diff --git a/jslib b/jslib index 36e65f08cad..2b931963cd8 160000 --- a/jslib +++ b/jslib @@ -1 +1 @@ -Subproject commit 36e65f08cad6cebdb5b90c88a68360296e8ff2ec +Subproject commit 2b931963cd8dbebdcbdd6a418ac3ef72adb73539 diff --git a/src/app/settings/adjust-payment.component.html b/src/app/settings/adjust-payment.component.html index 2bfc1409942..4fcf5144736 100644 --- a/src/app/settings/adjust-payment.component.html +++ b/src/app/settings/adjust-payment.component.html @@ -1,7 +1,7 @@

{{(currentType != null ? 'changePaymentMethod' : 'addPaymentMethod') | i18n}}

- +
{{'paymentChargedWithTrial' | i18n : (interval | i18n) }}

{{'paymentInformation' | i18n}}

- +
+ +
+
+ {{'paypalClickSubmit' | i18n}} +
+ + + + {{'makeSureEnoughCredit' | i18n}} + + diff --git a/src/app/settings/payment.component.ts b/src/app/settings/payment.component.ts index 53b09467221..fcac370938b 100644 --- a/src/app/settings/payment.component.ts +++ b/src/app/settings/payment.component.ts @@ -35,9 +35,10 @@ const StripeElementClasses = { }) export class PaymentComponent implements OnInit { @Input() showOptions = true; - @Input() method: 'card' | 'paypal' | 'bank' = 'card'; + @Input() method = PaymentMethodType.Card; @Input() hideBank = false; @Input() hidePaypal = false; + @Input() hideCredit = false; bank: any = { routing_number: null, @@ -48,6 +49,8 @@ export class PaymentComponent implements OnInit { country: 'US', }; + paymentMethodType = PaymentMethodType; + private btScript: HTMLScriptElement; private btInstance: any = null; private stripeScript: HTMLScriptElement; @@ -74,8 +77,9 @@ export class PaymentComponent implements OnInit { ngOnInit() { if (!this.showOptions) { - this.hidePaypal = this.method !== 'paypal'; - this.hideBank = this.method !== 'bank'; + this.hidePaypal = this.method !== PaymentMethodType.PayPal; + this.hideBank = this.method !== PaymentMethodType.BankAccount; + this.hideCredit = this.method !== PaymentMethodType.Credit; } window.document.head.appendChild(this.stripeScript); if (!this.hidePaypal) { @@ -93,7 +97,7 @@ export class PaymentComponent implements OnInit { } catch { } } }); - }, 200); + }, 500); if (!this.hidePaypal) { window.document.head.removeChild(this.btScript); window.setTimeout(() => { @@ -110,14 +114,14 @@ export class PaymentComponent implements OnInit { window.document.head.removeChild(btStylesheet); } catch { } } - }, 200); + }, 500); } } changeMethod() { this.btInstance = null; - if (this.method === 'paypal') { + if (this.method === PaymentMethodType.PayPal) { window.setTimeout(() => { (window as any).braintree.dropin.create({ authorization: this.platformUtilsService.isDev() ? @@ -149,20 +153,18 @@ export class PaymentComponent implements OnInit { createPaymentToken(): Promise<[string, PaymentMethodType]> { return new Promise((resolve, reject) => { - if (this.method === 'paypal') { + if (this.method === PaymentMethodType.PayPal) { this.btInstance.requestPaymentMethod().then((payload: any) => { - resolve([payload.nonce, PaymentMethodType.PayPal]); + resolve([payload.nonce, this.method]); }).catch((err: any) => { reject(err.message); }); - } else if (this.method === 'card' || this.method === 'bank') { - let type = PaymentMethodType.Card; + } else if (this.method === PaymentMethodType.Card || this.method === PaymentMethodType.BankAccount) { let sourceObj: any = null; let createObj: any = null; - if (this.method === 'card') { + if (this.method === PaymentMethodType.Card) { sourceObj = this.stripeCardNumberElement; } else { - type = PaymentMethodType.BankAccount; sourceObj = 'bank_account'; createObj = this.bank; } @@ -170,7 +172,7 @@ export class PaymentComponent implements OnInit { if (result.error) { reject(result.error.message); } else if (result.token && result.token.id != null) { - resolve([result.token.id, type]); + resolve([result.token.id, this.method]); } else { reject(); } @@ -181,7 +183,7 @@ export class PaymentComponent implements OnInit { private setStripeElement() { window.setTimeout(() => { - if (this.method === 'card') { + if (this.method === PaymentMethodType.Card) { if (this.stripeCardNumberElement == null) { this.stripeCardNumberElement = this.stripeElements.create('cardNumber', { style: StripeElementStyle, diff --git a/src/app/settings/user-billing.component.html b/src/app/settings/user-billing.component.html index 4f1d4d20a26..635d4e9ad3a 100644 --- a/src/app/settings/user-billing.component.html +++ b/src/app/settings/user-billing.component.html @@ -9,7 +9,8 @@

{{(isCreditBalance ? 'accountCredit' : 'accountBalance') | i18n}}

-

{{creditOrBalance | currency:'$'}}

+

{{creditOrBalance | currency:'$'}}

+

{{'creditAppliedDesc' | i18n}}

diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json index 5b2f2e4c3cd..c68673a09b9 100644 --- a/src/locales/en/messages.json +++ b/src/locales/en/messages.json @@ -1506,6 +1506,12 @@ "message": "Amount", "description": "Dollar amount, or quantity." }, + "makeSureEnoughCredit": { + "message": "Please make sure that your account has enough credit available for this purchase. If your account does not have enough credit available, your default payment method on file will be used for the difference. You can add credit to your account from the Billing page." + }, + "creditAppliedDesc": { + "message": "Your account's credit can be used to make purchases. Any available credit will be automatically applied towards invoices generated for this account." + }, "goPremium": { "message": "Go Premium", "description": "Another way of saying \"Get a premium membership\""