From c06211829f034c05e1c7077ce8c11777e137cd18 Mon Sep 17 00:00:00 2001 From: vinith-kovan <156108204+vinith-kovan@users.noreply.github.com> Date: Thu, 6 Jun 2024 19:29:54 +0530 Subject: [PATCH] [PM 5023] migrate payment component (#8345) * payment component migration * payment component migration * payment component migration --- .../app/billing/shared/payment.component.html | 266 +++++++----------- .../app/billing/shared/payment.component.ts | 63 +++-- 2 files changed, 149 insertions(+), 180 deletions(-) diff --git a/apps/web/src/app/billing/shared/payment.component.html b/apps/web/src/app/billing/shared/payment.component.html index db6f4f311b1..d76de65e507 100644 --- a/apps/web/src/app/billing/shared/payment.component.html +++ b/apps/web/src/app/billing/shared/payment.component.html @@ -1,163 +1,113 @@ -
-
- - -
-
- - -
-
- - -
-
- - -
-
- -
-
- -
-
-
- Visa, MasterCard, Discover, AmEx, JCB, Diners Club, UnionPay -
-
- -
-
-
-
- - +
+ + + + + {{ "creditCard" | i18n }} - - + + + + + {{ "bankAccount" | i18n }} + + + PayPal + + + + + {{ "accountCredit" | i18n }} + + +
+ +
+
+ +
+
+
+ Visa, MasterCard, Discover, AmEx, JCB, Diners Club, UnionPay +
+
+ +
+
+
+
+ + + + +
+
-
-
- - - - {{ "verifyBankAccountInitialDesc" | i18n }} {{ "verifyBankAccountFailureWarning" | i18n }} - -
-
- - + + + + {{ "verifyBankAccountInitialDesc" | i18n }} {{ "verifyBankAccountFailureWarning" | i18n }} + +
+ + {{ "routingNumber" | i18n }} + + + + {{ "accountNumber" | i18n }} + + + + {{ "accountHolderName" | i18n }} + + + + + {{ "bankAccountType" | i18n }} + + + + + +
-
- - + + +
+
+ {{ "paypalClickSubmit" | i18n }}
-
- - -
-
- - -
-
- - -
-
- {{ "paypalClickSubmit" | i18n }} -
- - - - {{ "makeSureEnoughCredit" | i18n }} - - + + + + {{ "makeSureEnoughCredit" | i18n }} + + +
diff --git a/apps/web/src/app/billing/shared/payment.component.ts b/apps/web/src/app/billing/shared/payment.component.ts index 652bed7801d..95b25a74e4e 100644 --- a/apps/web/src/app/billing/shared/payment.component.ts +++ b/apps/web/src/app/billing/shared/payment.component.ts @@ -1,4 +1,5 @@ import { Component, Input, OnDestroy, OnInit } from "@angular/core"; +import { FormControl, FormGroup, Validators } from "@angular/forms"; import { Subject, takeUntil } from "rxjs"; import { AbstractThemingService } from "@bitwarden/angular/platform/services/theming/theming.service.abstraction"; @@ -17,23 +18,34 @@ import { SharedModule } from "../../shared"; export class PaymentComponent implements OnInit, OnDestroy { @Input() showMethods = true; @Input() showOptions = true; - @Input() method = PaymentMethodType.Card; @Input() hideBank = false; @Input() hidePaypal = false; @Input() hideCredit = false; @Input() trialFlow = false; + @Input() + set method(value: PaymentMethodType) { + this._method = value; + this.paymentForm?.controls.method.setValue(value, { emitEvent: false }); + } + + get method(): PaymentMethodType { + return this._method; + } + private _method: PaymentMethodType = PaymentMethodType.Card; + private destroy$ = new Subject(); - - bank: any = { - routing_number: null, - account_number: null, - account_holder_name: null, - account_holder_type: "", - currency: "USD", - country: "US", - }; - + protected paymentForm = new FormGroup({ + method: new FormControl(this.method), + bank: new FormGroup({ + routing_number: new FormControl(null, [Validators.required]), + account_number: new FormControl(null, [Validators.required]), + account_holder_name: new FormControl(null, [Validators.required]), + account_holder_type: new FormControl("", [Validators.required]), + currency: new FormControl("USD"), + country: new FormControl("US"), + }), + }); paymentMethodType = PaymentMethodType; private btScript: HTMLScriptElement; @@ -85,7 +97,6 @@ export class PaymentComponent implements OnInit, OnDestroy { invalid: "is-invalid", }; } - async ngOnInit() { if (!this.showOptions) { this.hidePaypal = this.method !== PaymentMethodType.PayPal; @@ -97,6 +108,13 @@ export class PaymentComponent implements OnInit, OnDestroy { if (!this.hidePaypal) { window.document.head.appendChild(this.btScript); } + this.paymentForm + .get("method") + .valueChanges.pipe(takeUntil(this.destroy$)) + .subscribe((v) => { + this.method = v; + this.changeMethod(); + }); } ngOnDestroy() { @@ -140,7 +158,6 @@ export class PaymentComponent implements OnInit, OnDestroy { changeMethod() { this.btInstance = null; - if (this.method === PaymentMethodType.PayPal) { window.setTimeout(() => { (window as any).braintree.dropin.create( @@ -209,15 +226,17 @@ export class PaymentComponent implements OnInit, OnDestroy { } }); } else { - this.stripe.createToken("bank_account", this.bank).then((result: any) => { - if (result.error) { - reject(result.error.message); - } else if (result.token && result.token.id != null) { - resolve([result.token.id, this.method]); - } else { - reject(); - } - }); + this.stripe + .createToken("bank_account", this.paymentForm.get("bank").value) + .then((result: any) => { + if (result.error) { + reject(result.error.message); + } else if (result.token && result.token.id != null) { + resolve([result.token.id, this.method]); + } else { + reject(); + } + }); } } });