diff --git a/jslib b/jslib index 36e65f08..2b931963 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 2bfc1409..4fcf5144 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 53b09467..fcac3709 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 4f1d4d20..635d4e9a 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 5b2f2e4c..c68673a0 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\""