From c8998d0c00cbcad2bf2bc96ae267e17df8457dde Mon Sep 17 00:00:00 2001 From: KiruthigaManivannan <162679756+KiruthigaManivannan@users.noreply.github.com> Date: Tue, 21 May 2024 18:33:19 +0530 Subject: [PATCH] [PM-5018] Migrate Add Credit component (#8321) * Migrated Add Credit component * PM-5018 Addressed Review comments for Add Credit Component * PM-5018 Design team comments addressed * PM-5018 Latest review comments are addressed * PM-5018 Minor comments addressed --- .../shared/add-credit-dialog.component.html | 61 ++++++++++ ...nent.ts => add-credit-dialog.component.ts} | 107 ++++++++++-------- .../billing/shared/add-credit.component.html | 80 ------------- .../billing/shared/billing-shared.module.ts | 4 +- .../shared/payment-method.component.html | 15 +-- .../shared/payment-method.component.ts | 23 ++-- 6 files changed, 136 insertions(+), 154 deletions(-) create mode 100644 apps/web/src/app/billing/shared/add-credit-dialog.component.html rename apps/web/src/app/billing/shared/{add-credit.component.ts => add-credit-dialog.component.ts} (64%) delete mode 100644 apps/web/src/app/billing/shared/add-credit.component.html diff --git a/apps/web/src/app/billing/shared/add-credit-dialog.component.html b/apps/web/src/app/billing/shared/add-credit-dialog.component.html new file mode 100644 index 00000000000..790099df882 --- /dev/null +++ b/apps/web/src/app/billing/shared/add-credit-dialog.component.html @@ -0,0 +1,61 @@ +
+ + +

{{ "creditDelayed" | i18n }}

+
+ + + PayPal + + + Bitcoin + + +
+
+ + {{ "amount" | i18n }} + + $USD + +
+ + + + + + +
+
+ + + + + + + + + + + + + + + +
diff --git a/apps/web/src/app/billing/shared/add-credit.component.ts b/apps/web/src/app/billing/shared/add-credit-dialog.component.ts similarity index 64% rename from apps/web/src/app/billing/shared/add-credit.component.ts rename to apps/web/src/app/billing/shared/add-credit-dialog.component.ts index 7cf9054198c..68f074076d7 100644 --- a/apps/web/src/app/billing/shared/add-credit.component.ts +++ b/apps/web/src/app/billing/shared/add-credit-dialog.component.ts @@ -1,12 +1,6 @@ -import { - Component, - ElementRef, - EventEmitter, - Input, - OnInit, - Output, - ViewChild, -} from "@angular/core"; +import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog"; +import { Component, ElementRef, Inject, OnInit, ViewChild } from "@angular/core"; +import { FormControl, FormGroup, Validators } from "@angular/forms"; import { firstValueFrom, map } from "rxjs"; import { ApiService } from "@bitwarden/common/abstractions/api.service"; @@ -17,6 +11,16 @@ import { BitPayInvoiceRequest } from "@bitwarden/common/billing/models/request/b import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service"; import { LogService } from "@bitwarden/common/platform/abstractions/log.service"; import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; +import { DialogService } from "@bitwarden/components"; + +export interface AddCreditDialogData { + organizationId: string; +} + +export enum AddCreditDialogResult { + Added = "added", + Cancelled = "cancelled", +} export type PayPalConfig = { businessId?: string; @@ -24,17 +28,9 @@ export type PayPalConfig = { }; @Component({ - selector: "app-add-credit", - templateUrl: "add-credit.component.html", + templateUrl: "add-credit-dialog.component.html", }) -export class AddCreditComponent implements OnInit { - @Input() creditAmount: string; - @Input() showOptions = true; - @Input() method = PaymentMethodType.PayPal; - @Input() organizationId: string; - @Output() onAdded = new EventEmitter(); - @Output() onCanceled = new EventEmitter(); - +export class AddCreditDialogComponent implements OnInit { @ViewChild("ppButtonForm", { read: ElementRef, static: true }) ppButtonFormRef: ElementRef; paymentMethodType = PaymentMethodType; @@ -44,14 +40,22 @@ export class AddCreditComponent implements OnInit { ppLoading = false; subject: string; returnUrl: string; - formPromise: Promise; + organizationId: string; private userId: string; private name: string; private email: string; private region: string; + protected DialogResult = AddCreditDialogResult; + protected formGroup = new FormGroup({ + method: new FormControl(PaymentMethodType.PayPal), + creditAmount: new FormControl(null, [Validators.required]), + }); + constructor( + private dialogRef: DialogRef, + @Inject(DIALOG_DATA) protected data: AddCreditDialogData, private accountService: AccountService, private apiService: ApiService, private platformUtilsService: PlatformUtilsService, @@ -59,6 +63,7 @@ export class AddCreditComponent implements OnInit { private logService: LogService, private configService: ConfigService, ) { + this.organizationId = data.organizationId; const payPalConfig = process.env.PAYPAL_CONFIG as PayPalConfig; this.ppButtonFormAction = payPalConfig.buttonAction; this.ppButtonBusinessId = payPalConfig.businessId; @@ -93,7 +98,18 @@ export class AddCreditComponent implements OnInit { this.returnUrl = window.location.href; } - async submit() { + get creditAmount() { + return this.formGroup.value.creditAmount; + } + set creditAmount(value: string) { + this.formGroup.get("creditAmount").setValue(value); + } + + get method() { + return this.formGroup.value.method; + } + + submit = async () => { if (this.creditAmount == null || this.creditAmount === "") { return; } @@ -104,33 +120,20 @@ export class AddCreditComponent implements OnInit { return; } if (this.method === PaymentMethodType.BitPay) { - try { - const req = new BitPayInvoiceRequest(); - req.email = this.email; - req.name = this.name; - req.credit = true; - req.amount = this.creditAmountNumber; - req.organizationId = this.organizationId; - req.userId = this.userId; - req.returnUrl = this.returnUrl; - this.formPromise = this.apiService.postBitPayInvoice(req); - const bitPayUrl: string = await this.formPromise; - this.platformUtilsService.launchUri(bitPayUrl); - } catch (e) { - this.logService.error(e); - } + const req = new BitPayInvoiceRequest(); + req.email = this.email; + req.name = this.name; + req.credit = true; + req.amount = this.creditAmountNumber; + req.organizationId = this.organizationId; + req.userId = this.userId; + req.returnUrl = this.returnUrl; + const bitPayUrl: string = await this.apiService.postBitPayInvoice(req); + this.platformUtilsService.launchUri(bitPayUrl); return; } - try { - this.onAdded.emit(); - } catch (e) { - this.logService.error(e); - } - } - - cancel() { - this.onCanceled.emit(); - } + this.dialogRef.close(AddCreditDialogResult.Added); + }; formatAmount() { try { @@ -160,3 +163,15 @@ export class AddCreditComponent implements OnInit { return null; } } + +/** + * Strongly typed helper to open a AddCreditDialog + * @param dialogService Instance of the dialog service that will be used to open the dialog + * @param config Configuration for the dialog + */ +export function openAddCreditDialog( + dialogService: DialogService, + config: DialogConfig, +) { + return dialogService.open(AddCreditDialogComponent, config); +} diff --git a/apps/web/src/app/billing/shared/add-credit.component.html b/apps/web/src/app/billing/shared/add-credit.component.html deleted file mode 100644 index 73c71812be6..00000000000 --- a/apps/web/src/app/billing/shared/add-credit.component.html +++ /dev/null @@ -1,80 +0,0 @@ -
-
- -

{{ "addCredit" | i18n }}

-
-
- - -
-
- - -
-
-
-
-
- -
-
$USD
- -
-
-
- {{ "creditDelayed" | i18n }} -
- - -
-
-
- - - - - - - - - - - - - - - -
diff --git a/apps/web/src/app/billing/shared/billing-shared.module.ts b/apps/web/src/app/billing/shared/billing-shared.module.ts index 65a651b73df..35fe33c7e06 100644 --- a/apps/web/src/app/billing/shared/billing-shared.module.ts +++ b/apps/web/src/app/billing/shared/billing-shared.module.ts @@ -3,7 +3,7 @@ import { NgModule } from "@angular/core"; import { HeaderModule } from "../../layouts/header/header.module"; import { SharedModule } from "../../shared"; -import { AddCreditComponent } from "./add-credit.component"; +import { AddCreditDialogComponent } from "./add-credit-dialog.component"; import { AdjustPaymentDialogComponent } from "./adjust-payment-dialog.component"; import { AdjustStorageComponent } from "./adjust-storage.component"; import { BillingHistoryComponent } from "./billing-history.component"; @@ -17,7 +17,7 @@ import { UpdateLicenseComponent } from "./update-license.component"; @NgModule({ imports: [SharedModule, PaymentComponent, TaxInfoComponent, HeaderModule], declarations: [ - AddCreditComponent, + AddCreditDialogComponent, AdjustPaymentDialogComponent, AdjustStorageComponent, BillingHistoryComponent, diff --git a/apps/web/src/app/billing/shared/payment-method.component.html b/apps/web/src/app/billing/shared/payment-method.component.html index 5f78294fa64..2ac9233b5bb 100644 --- a/apps/web/src/app/billing/shared/payment-method.component.html +++ b/apps/web/src/app/billing/shared/payment-method.component.html @@ -33,22 +33,9 @@ {{ creditOrBalance | currency: "$" }}

{{ "creditAppliedDesc" | i18n }}

- - -

{{ "paymentMethod" | i18n }}

{{ "noPaymentMethod" | i18n }}

diff --git a/apps/web/src/app/billing/shared/payment-method.component.ts b/apps/web/src/app/billing/shared/payment-method.component.ts index fee97cb912a..967bff6d1ab 100644 --- a/apps/web/src/app/billing/shared/payment-method.component.ts +++ b/apps/web/src/app/billing/shared/payment-method.component.ts @@ -15,6 +15,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service" import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; import { DialogService } from "@bitwarden/components"; +import { AddCreditDialogResult, openAddCreditDialog } from "./add-credit-dialog.component"; import { AdjustPaymentDialogResult, openAdjustPaymentDialog, @@ -30,7 +31,6 @@ export class PaymentMethodComponent implements OnInit { loading = false; firstLoaded = false; - showAddCredit = false; billing: BillingPaymentResponse; org: OrganizationSubscriptionResponse; sub: SubscriptionResponse; @@ -111,18 +111,17 @@ export class PaymentMethodComponent implements OnInit { this.loading = false; } - addCredit() { - this.showAddCredit = true; - } - - closeAddCredit(load: boolean) { - this.showAddCredit = false; - if (load) { - // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling. - // eslint-disable-next-line @typescript-eslint/no-floating-promises - this.load(); + addCredit = async () => { + const dialogRef = openAddCreditDialog(this.dialogService, { + data: { + organizationId: this.organizationId, + }, + }); + const result = await lastValueFrom(dialogRef.closed); + if (result === AddCreditDialogResult.Added) { + await this.load(); } - } + }; changePayment = async () => { const dialogRef = openAdjustPaymentDialog(this.dialogService, {