restrict changing payment method with iap

jslib

@@ -1 +1 @@
-Subproject commit ec012c99341ee65c0d5a7a7fdf153e79bfb274be
+Subproject commit 575a28e25fd27969d0335f06b1778027f1214c3e

src/app/organizations/settings/organization-billing.component.ts

@@ -9,6 +9,7 @@ import { Angulartics2 } from 'angulartics2';
 
 import { ApiService } from 'jslib/abstractions/api.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 
 import { UserBillingComponent } from '../../settings/user-billing.component';
 
@@ -19,8 +20,8 @@ import { UserBillingComponent } from '../../settings/user-billing.component';
 export class OrganizationBillingComponent extends UserBillingComponent implements OnInit {
     constructor(apiService: ApiService, i18nService: I18nService,
         analytics: Angulartics2, toasterService: ToasterService,
-        private route: ActivatedRoute) {
+        private route: ActivatedRoute, platformUtilsService: PlatformUtilsService) {
-        super(apiService, i18nService, analytics, toasterService);
+        super(apiService, i18nService, analytics, toasterService, platformUtilsService);
     }
 
     async ngOnInit() {

src/app/settings/user-billing.component.html

@@ -51,7 +51,10 @@
         <p>
             <i class="fa fa-fw" [ngClass]="{'fa-credit-card': paymentSource.type === paymentMethodType.Card,
                     'fa-university': paymentSource.type === paymentMethodType.BankAccount,
-                    'fa-paypal text-primary': paymentSource.type === paymentMethodType.PayPal}"></i>
+                    'fa-paypal text-primary': paymentSource.type === paymentMethodType.PayPal,
+                    'fa-apple text-muted': paymentSource.type === paymentMethodType.AppleInApp,
+                    'fa-google text-muted': paymentSource.type === paymentMethodType.GoogleInApp}"></i>
+            <span *ngIf="paymentSourceInApp">{{'inAppPurchase' | i18n}}</span>
             {{paymentSource.description}}
         </p>
     </ng-container>

src/app/settings/user-billing.component.ts

@@ -10,6 +10,7 @@ import { BillingResponse } from 'jslib/models/response/billingResponse';
 
 import { ApiService } from 'jslib/abstractions/api.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 
 import { PaymentMethodType } from 'jslib/enums/paymentMethodType';
 import { TransactionType } from 'jslib/enums/transactionType';
@@ -34,7 +35,8 @@ export class UserBillingComponent implements OnInit {
     verifyBankPromise: Promise<any>;
 
     constructor(protected apiService: ApiService, protected i18nService: I18nService,
-        protected analytics: Angulartics2, protected toasterService: ToasterService) { }
+        protected analytics: Angulartics2, protected toasterService: ToasterService,
+        protected platformUtilsService: PlatformUtilsService) { }
 
     async ngOnInit() {
         await this.load();
@@ -72,6 +74,10 @@ export class UserBillingComponent implements OnInit {
     }
 
     addCredit() {
+        if (this.paymentSourceInApp) {
+            this.platformUtilsService.showDialog(this.i18nService.t('cannotPerformInAppPurchase'));
+            return;
+        }
         this.showAddCredit = true;
     }
 
@@ -83,6 +89,10 @@ export class UserBillingComponent implements OnInit {
     }
 
     changePayment() {
+        if (this.paymentSourceInApp) {
+            this.platformUtilsService.showDialog(this.i18nService.t('cannotPerformInAppPurchase'));
+            return;
+        }
         this.showAdjustPayment = true;
     }
 
@@ -105,6 +115,12 @@ export class UserBillingComponent implements OnInit {
         return this.billing != null ? this.billing.paymentSource : null;
     }
 
+    get paymentSourceInApp() {
+        return this.paymentSource != null &&
+            (this.paymentSource.type === PaymentMethodType.AppleInApp ||
+                this.paymentSource.type === PaymentMethodType.GoogleInApp);
+    }
+
     get invoices() {
         return this.billing != null ? this.billing.invoices : null;
     }

src/locales/en/messages.json

@@ -2929,5 +2929,11 @@
   },
   "couldNotChargeCardPayInvoice": {
     "message": "We were not able to charge your card. Please view and pay the unpaid invoice listed below."
+  },
+  "inAppPurchase": {
+    "message": "In-app Purchase"
+  },
+  "cannotPerformInAppPurchase": {
+    "message": "You cannot perform this action while using an in-app purchase payment method."
   }
 }

src/scss/plugins.scss

@@ -112,6 +112,9 @@ $fa-font-path: "~font-awesome/fonts";
             &:last-child {
                 margin-bottom: 0;
             }
+            &:first-child {
+                margin-top: 0;
+            }
         }
 
         .swal-title, .swal-text {