diff --git a/jslib b/jslib index c0e7e588ed..f5287e29a2 160000 --- a/jslib +++ b/jslib @@ -1 +1 @@ -Subproject commit c0e7e588ed59832a6f579ff63d85bfcdfb400d78 +Subproject commit f5287e29a2a135c131d00c4a56a90b18bc4afaab diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 50c2be5b0d..1fb0a0a5e0 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -33,6 +33,7 @@ import { TwoFactorOptionsComponent } from './accounts/two-factor-options.compone import { TwoFactorComponent } from './accounts/two-factor.component'; import { AccountComponent } from './settings/account.component'; +import { AdjustPaymentComponent } from './settings/adjust-payment.component'; import { AdjustStorageComponent } from './settings/adjust-storage.component'; import { ChangeEmailComponent } from './settings/change-email.component'; import { ChangePasswordComponent } from './settings/change-password.component'; @@ -107,6 +108,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe'; declarations: [ AccountComponent, AddEditComponent, + AdjustPaymentComponent, AdjustStorageComponent, ApiActionDirective, AppComponent, diff --git a/src/app/settings/adjust-payment.component.html b/src/app/settings/adjust-payment.component.html new file mode 100644 index 0000000000..03c45e7836 --- /dev/null +++ b/src/app/settings/adjust-payment.component.html @@ -0,0 +1,22 @@ + +

{{'contactSupportPaymentMethod' | i18n}}

+ + {{'contactSupport' | i18n}} + + + +
+
+

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

+ + + +
+
diff --git a/src/app/settings/adjust-payment.component.ts b/src/app/settings/adjust-payment.component.ts new file mode 100644 index 0000000000..767600fb60 --- /dev/null +++ b/src/app/settings/adjust-payment.component.ts @@ -0,0 +1,64 @@ +import { + Component, + EventEmitter, + Input, + Output, + ViewChild, +} from '@angular/core'; + +import { ToasterService } from 'angular2-toaster'; +import { Angulartics2 } from 'angulartics2'; + +import { ApiService } from 'jslib/abstractions/api.service'; +import { I18nService } from 'jslib/abstractions/i18n.service'; + +import { PaymentRequest } from 'jslib/models/request/paymentRequest'; + +import { PaymentMethodType } from 'jslib/enums/paymentMethodType'; + +import { PaymentComponent } from './payment.component'; + +@Component({ + selector: 'app-adjust-payment', + templateUrl: 'adjust-payment.component.html', +}) +export class AdjustPaymentComponent { + @ViewChild(PaymentComponent) paymentComponent: PaymentComponent; + + @Input() currentType?: PaymentMethodType; + @Input() user = true; + @Output() onAdjusted = new EventEmitter(); + @Output() onCanceled = new EventEmitter(); + + paymentMethodType = PaymentMethodType; + formPromise: Promise; + + constructor(private apiService: ApiService, private i18nService: I18nService, + private analytics: Angulartics2, private toasterService: ToasterService) { } + + async submit() { + try { + const request = new PaymentRequest(); + this.formPromise = this.paymentComponent.createPaymentToken().then((token) => { + request.paymentToken = token; + if (this.user) { + return this.apiService.postAccountPayment(request); + } + }); + await this.formPromise; + this.analytics.eventTrack.next({ + action: this.currentType == null ? 'Added Payment Method' : 'Changed Payment Method', + }); + this.toasterService.popAsync('success', null, this.i18nService.t('updatedPaymentMethod')); + this.onAdjusted.emit(); + } catch { } + } + + cancel() { + this.onCanceled.emit(); + } + + get canChange() { + return this.currentType == null || this.currentType === PaymentMethodType.Card; + } +} diff --git a/src/app/settings/adjust-storage.component.html b/src/app/settings/adjust-storage.component.html index 02c9eb2ba7..f4ed1f5fdb 100644 --- a/src/app/settings/adjust-storage.component.html +++ b/src/app/settings/adjust-storage.component.html @@ -1,5 +1,6 @@
+

{{(add ? 'addStorage' : 'removeStorage') | i18n}}

diff --git a/src/app/settings/payment.component.html b/src/app/settings/payment.component.html index 2a1f48bc7f..58e1611b82 100644 --- a/src/app/settings/payment.component.html +++ b/src/app/settings/payment.component.html @@ -1,4 +1,4 @@ -
+
- +
diff --git a/src/app/settings/payment.component.ts b/src/app/settings/payment.component.ts index 103e43205d..7ca2dc64fb 100644 --- a/src/app/settings/payment.component.ts +++ b/src/app/settings/payment.component.ts @@ -1,5 +1,6 @@ import { Component, + Input, OnInit, } from '@angular/core'; @@ -18,6 +19,8 @@ const Keys = { templateUrl: 'payment.component.html', }) export class PaymentComponent implements OnInit { + @Input() showOptions = true; + method = 'card'; card: any = { number: null, diff --git a/src/app/settings/premium.component.html b/src/app/settings/premium.component.html index d5756c0189..44ebb866eb 100644 --- a/src/app/settings/premium.component.html +++ b/src/app/settings/premium.component.html @@ -42,7 +42,7 @@ {{'total' | i18n}}: {{total | currency:'USD $'}} /{{'year' | i18n}}
{{'paymentChargedAnnually' | i18n}} -

{{'paymentInformation' | i18n}}

+

{{'paymentInformation' | i18n}}

-
@@ -89,9 +89,12 @@ 'fa-paypal text-primary': paymentSource.type === paymentMethodType.PayPal}"> {{paymentSource.description}}

- + +

{{'charges' | i18n}}

{{'noCharges' | i18n}}

diff --git a/src/app/settings/user-billing.component.ts b/src/app/settings/user-billing.component.ts index 2e8d03a068..1a559577f2 100644 --- a/src/app/settings/user-billing.component.ts +++ b/src/app/settings/user-billing.component.ts @@ -27,6 +27,7 @@ export class UserBillingComponent implements OnInit { firstLoaded = false; adjustStorageAdd = true; showAdjustStorage = false; + showAdjustPayment = false; billing: BillingResponse; paymentMethodType = PaymentMethodType; @@ -109,17 +110,22 @@ export class UserBillingComponent implements OnInit { this.showAdjustStorage = true; } - adjustedStorage(gbAmount: number) { - this.showAdjustStorage = false; - this.load(); - } - - canceledAdjustStorage() { + closeStorage(load: boolean) { this.showAdjustStorage = false; + if (load) { + this.load(); + } } changePayment() { + this.showAdjustPayment = true; + } + closePayment(load: boolean) { + this.showAdjustPayment = false; + if (load) { + this.load(); + } } get subscriptionMarkedForCancel() { diff --git a/src/images/cards.png b/src/images/cards.png index 8adeaf5143..16722411c1 100644 Binary files a/src/images/cards.png and b/src/images/cards.png differ diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json index 936f77f584..600dcf1b73 100644 --- a/src/locales/en/messages.json +++ b/src/locales/en/messages.json @@ -1404,5 +1404,14 @@ "example": "5" } } + }, + "contactSupport": { + "message": "Contact Customer Support" + }, + "contactSupportPaymentMethod": { + "message": "If you would like to change from this payment method please contact customer support." + }, + "updatedPaymentMethod": { + "message": "Updated payment method." } } diff --git a/src/scss/styles.scss b/src/scss/styles.scss index 6aa34c9e72..e0e5091006 100644 --- a/src/scss/styles.scss +++ b/src/scss/styles.scss @@ -132,6 +132,11 @@ body { } } +.card-body-header { + font-size: $h3-font-size * 1.12; + @extend .mb-4 +} + .card ul.fa-ul.card-ul { margin-left: 1.9em;