diff --git a/src/app/app.module.ts b/src/app/app.module.ts index fb1405cb23..9b14e5afeb 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -90,6 +90,7 @@ import { GroupingsComponent as OrgGroupingsComponent } from './organizations/vau import { VaultComponent as OrgVaultComponent } from './organizations/vault/vault.component'; import { AccountComponent } from './settings/account.component'; +import { AddCreditComponent } from './settings/add-credit.component'; import { AdjustPaymentComponent } from './settings/adjust-payment.component'; import { AdjustStorageComponent } from './settings/adjust-storage.component'; import { ChangeEmailComponent } from './settings/change-email.component'; @@ -224,6 +225,7 @@ registerLocaleData(localeZhTw, 'zh-TW'); declarations: [ AcceptOrganizationComponent, AccountComponent, + AddCreditComponent, AddEditComponent, AdjustPaymentComponent, AdjustSeatsComponent, diff --git a/src/app/settings/add-credit.component.html b/src/app/settings/add-credit.component.html new file mode 100644 index 0000000000..018d57ed3a --- /dev/null +++ b/src/app/settings/add-credit.component.html @@ -0,0 +1,52 @@ +
+
+

{{'addCredit' | i18n}}

+
+
+ + +
+ +
+
+
+ +
+
$USD
+ +
+
+
+ + +
+
+
+ + + + + + + + + + + + + + +
diff --git a/src/app/settings/add-credit.component.ts b/src/app/settings/add-credit.component.ts new file mode 100644 index 0000000000..4e3174d7a4 --- /dev/null +++ b/src/app/settings/add-credit.component.ts @@ -0,0 +1,106 @@ +import { + Component, + ElementRef, + EventEmitter, + Input, + OnInit, + Output, + ViewChild, +} from '@angular/core'; + +import { ToasterService } from 'angular2-toaster'; +import { Angulartics2 } from 'angulartics2'; + +import { I18nService } from 'jslib/abstractions/i18n.service'; +import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service'; +import { UserService } from 'jslib/abstractions/user.service'; + +import { PaymentMethodType } from 'jslib/enums/paymentMethodType'; + +import { WebConstants } from '../../services/webConstants'; + +@Component({ + selector: 'app-add-credit', + templateUrl: 'add-credit.component.html', +}) +export class AddCreditComponent implements OnInit { + @Input() creditAmount = '10.00'; + @Input() showOptions = true; + @Input() method = PaymentMethodType.PayPal; + @Input() organizationId: string; + @Output() onAdded = new EventEmitter(); + @Output() onCanceled = new EventEmitter(); + + @ViewChild('ppButtonForm', { read: ElementRef }) ppButtonFormRef: ElementRef; + + paymentMethodType = PaymentMethodType; + ppButtonFormAction = WebConstants.paypal.buttonActionProduction; + ppButtonBusinessId = WebConstants.paypal.businessIdProduction; + ppButtonCustomField: string; + subject: string; + formPromise: Promise; + + constructor(private userService: UserService, private i18nService: I18nService, + private analytics: Angulartics2, private toasterService: ToasterService, + platformUtilsService: PlatformUtilsService) { + if (platformUtilsService.isDev()) { + this.ppButtonFormAction = WebConstants.paypal.buttonActionSandbox; + this.ppButtonBusinessId = WebConstants.paypal.businessIdSandbox; + } + } + + async ngOnInit() { + if (this.organizationId != null) { + this.ppButtonCustomField = 'organization_id:' + this.organizationId; + const org = await this.userService.getOrganization(this.organizationId); + if (org != null) { + this.subject = org.name; + } + } else { + const userId = await this.userService.getUserId(); + this.subject = await this.userService.getEmail(); + this.ppButtonCustomField = 'user_id:' + userId; + } + this.ppButtonCustomField += ',account_credit:true'; + } + + async submit() { + if (this.creditAmount == null || this.creditAmount === '') { + return; + } + + if (this.method === PaymentMethodType.PayPal) { + this.ppButtonFormRef.nativeElement.submit(); + return; + } + try { + this.analytics.eventTrack.next({ + action: 'Added Credit', + }); + this.toasterService.popAsync('success', null, this.i18nService.t('updatedPaymentMethod')); + this.onAdded.emit(); + } catch { } + } + + changeMethod() { + // TODO: + } + + cancel() { + this.onCanceled.emit(); + } + + formatAmount() { + try { + if (this.creditAmount != null && this.creditAmount !== '') { + const floatAmount = Math.abs(parseFloat(this.creditAmount)); + if (floatAmount > 0) { + this.creditAmount = parseFloat((Math.round(floatAmount * 100) / 100).toString()) + .toFixed(2).toString(); + return; + } + } + } catch { } + this.creditAmount = ''; + } +} diff --git a/src/app/settings/payment.component.ts b/src/app/settings/payment.component.ts index 1ff2ed1d9b..53b0946722 100644 --- a/src/app/settings/payment.component.ts +++ b/src/app/settings/payment.component.ts @@ -8,12 +8,7 @@ import { PaymentMethodType } from 'jslib/enums/paymentMethodType'; import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service'; -const Keys = { - stripeTest: 'pk_test_KPoCfZXu7mznb9uSCPZ2JpTD', - stripeLive: 'pk_live_bpN0P37nMxrMQkcaHXtAybJk', - btSandbox: 'sandbox_r72q8jq6_9pnxkwm75f87sdc2', - btProduction: 'production_qfbsv8kc_njj2zjtyngtjmbjd', -}; +import { WebConstants } from '../../services/webConstants'; const StripeElementStyle = { base: { @@ -67,8 +62,8 @@ export class PaymentComponent implements OnInit { this.stripeScript.src = 'https://js.stripe.com/v3/'; this.stripeScript.async = true; this.stripeScript.onload = () => { - this.stripe = (window as any).Stripe( - this.platformUtilsService.isDev() ? Keys.stripeTest : Keys.stripeLive); + this.stripe = (window as any).Stripe(this.platformUtilsService.isDev() ? + WebConstants.stripeTestKey : WebConstants.stripeLiveKey); this.stripeElements = this.stripe.elements(); this.setStripeElement(); }; @@ -125,7 +120,8 @@ export class PaymentComponent implements OnInit { if (this.method === 'paypal') { window.setTimeout(() => { (window as any).braintree.dropin.create({ - authorization: this.platformUtilsService.isDev() ? Keys.btSandbox : Keys.btProduction, + authorization: this.platformUtilsService.isDev() ? + WebConstants.btSandboxKey : WebConstants.btProductionKey, container: '#bt-dropin-container', paymentOptionPriority: ['paypal'], paypal: { diff --git a/src/app/settings/user-billing.component.html b/src/app/settings/user-billing.component.html index 9f334fdc18..4f1d4d20a2 100644 --- a/src/app/settings/user-billing.component.html +++ b/src/app/settings/user-billing.component.html @@ -10,6 +10,12 @@

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

{{creditOrBalance | currency:'$'}}

+ + +

{{'paymentMethod' | i18n}}

{{'noPaymentMethod' | i18n}}

diff --git a/src/app/settings/user-billing.component.ts b/src/app/settings/user-billing.component.ts index 134f9b9401..e50c7a9776 100644 --- a/src/app/settings/user-billing.component.ts +++ b/src/app/settings/user-billing.component.ts @@ -23,6 +23,7 @@ export class UserBillingComponent implements OnInit { loading = false; firstLoaded = false; showAdjustPayment = false; + showAddCredit = false; billing: BillingResponse; paymentMethodType = PaymentMethodType; transactionType = TransactionType; @@ -70,6 +71,17 @@ export class UserBillingComponent implements OnInit { } catch { } } + addCredit() { + this.showAddCredit = true; + } + + closeAddCredit(load: boolean) { + this.showAddCredit = false; + if (load) { + this.load(); + } + } + changePayment() { this.showAdjustPayment = true; } diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json index ac1b9c4bde..5b2f2e4c3c 100644 --- a/src/locales/en/messages.json +++ b/src/locales/en/messages.json @@ -1502,6 +1502,10 @@ "message": "Add Credit", "description": "Add more credit to your account's balance." }, + "amount": { + "message": "Amount", + "description": "Dollar amount, or quantity." + }, "goPremium": { "message": "Go Premium", "description": "Another way of saying \"Get a premium membership\"" diff --git a/src/services/webConstants.ts b/src/services/webConstants.ts new file mode 100644 index 0000000000..0090037b37 --- /dev/null +++ b/src/services/webConstants.ts @@ -0,0 +1,12 @@ +export class WebConstants { + static readonly stripeTestKey = 'pk_test_KPoCfZXu7mznb9uSCPZ2JpTD'; + static readonly stripeLiveKey = 'pk_live_bpN0P37nMxrMQkcaHXtAybJk'; + static readonly btSandboxKey = 'sandbox_r72q8jq6_9pnxkwm75f87sdc2'; + static readonly btProductionKey = 'production_qfbsv8kc_njj2zjtyngtjmbjd'; + static readonly paypal = { + businessIdProduction: '4ZDA7DLUUJGMN', + businessIdSandbox: 'AD3LAUZSNVPJY', + buttonActionProduction: 'https://www.paypal.com/cgi-bin/webscr', + buttonActionSandbox: 'https://www.sandbox.paypal.com/cgi-bin/webscr', + }; +}