From 34e20b7ae86b0ac3737fd5e096303077dfa91a19 Mon Sep 17 00:00:00 2001
From: Alex Morask <144709477+amorask-bitwarden@users.noreply.github.com>
Date: Wed, 20 Nov 2024 14:36:52 -0500
Subject: [PATCH] Update bank account verification to use statement descriptor
 (#12055)

---
 .../shared/payment/payment-v2.component.html   |  6 +++---
 .../verify-bank-account.component.html         | 18 ++++++------------
 .../verify-bank-account.component.ts           | 16 ++++------------
 apps/web/src/locales/en/messages.json          |  9 +++++++++
 .../request/verify-bank-account.request.ts     |  8 +++-----
 5 files changed, 25 insertions(+), 32 deletions(-)

diff --git a/apps/web/src/app/billing/shared/payment/payment-v2.component.html b/apps/web/src/app/billing/shared/payment/payment-v2.component.html
index 51fdb1738f..9804e6bc86 100644
--- a/apps/web/src/app/billing/shared/payment/payment-v2.component.html
+++ b/apps/web/src/app/billing/shared/payment/payment-v2.component.html
@@ -80,9 +80,9 @@
   </ng-container>
   <!-- Bank Account -->
   <ng-container *ngIf="showBankAccount && usingBankAccount">
-    <app-callout type="warning" title="{{ 'verifyBankAccount' | i18n }}">
-      {{ "verifyBankAccountInitialDesc" | i18n }} {{ "verifyBankAccountFailureWarning" | i18n }}
-    </app-callout>
+    <bit-callout type="warning" title="{{ 'verifyBankAccount' | i18n }}">
+      {{ "verifyBankAccountWithStatementDescriptorWarning" | i18n }}
+    </bit-callout>
     <div class="tw-grid tw-grid-cols-2 tw-gap-4 tw-mb-4" formGroupName="bankInformation">
       <bit-form-field class="tw-col-span-1" disableMargin>
         <bit-label>{{ "routingNumber" | i18n }}</bit-label>
diff --git a/apps/web/src/app/billing/shared/verify-bank-account/verify-bank-account.component.html b/apps/web/src/app/billing/shared/verify-bank-account/verify-bank-account.component.html
index 1b09f4bed5..1367e6e308 100644
--- a/apps/web/src/app/billing/shared/verify-bank-account/verify-bank-account.component.html
+++ b/apps/web/src/app/billing/shared/verify-bank-account/verify-bank-account.component.html
@@ -1,18 +1,12 @@
-<app-callout type="warning" title="{{ 'verifyBankAccount' | i18n }}">
-  <p>{{ "verifyBankAccountDesc" | i18n }} {{ "verifyBankAccountFailureWarning" | i18n }}</p>
+<bit-callout type="warning" title="{{ 'verifyBankAccount' | i18n }}">
+  <p>{{ "verifyBankAccountWithStatementDescriptorInstructions" | i18n }}</p>
   <form [formGroup]="formGroup" [bitSubmit]="submit">
-    <bit-form-field class="tw-mr-2 tw-w-40">
-      <bit-label>{{ "amountX" | i18n: "1" }}</bit-label>
-      <input bitInput type="number" step="1" placeholder="xx" formControlName="amount1" />
-      <span bitPrefix>$0.</span>
-    </bit-form-field>
-    <bit-form-field class="tw-mr-2 tw-w-40">
-      <bit-label>{{ "amountX" | i18n: "2" }}</bit-label>
-      <input bitInput type="number" step="1" placeholder="xx" formControlName="amount2" />
-      <span bitPrefix>$0.</span>
+    <bit-form-field class="tw-mr-2 tw-w-48">
+      <bit-label>{{ "descriptorCode" | i18n }}</bit-label>
+      <input bitInput type="text" placeholder="SMAB12" formControlName="descriptorCode" />
     </bit-form-field>
     <button *ngIf="onSubmit" type="submit" bitButton bitFormButton buttonType="primary">
       {{ "submit" | i18n }}
     </button>
   </form>
-</app-callout>
+</bit-callout>
diff --git a/apps/web/src/app/billing/shared/verify-bank-account/verify-bank-account.component.ts b/apps/web/src/app/billing/shared/verify-bank-account/verify-bank-account.component.ts
index 2f9e34f877..6f98ddad35 100644
--- a/apps/web/src/app/billing/shared/verify-bank-account/verify-bank-account.component.ts
+++ b/apps/web/src/app/billing/shared/verify-bank-account/verify-bank-account.component.ts
@@ -16,25 +16,17 @@ export class VerifyBankAccountComponent {
   @Output() submitted = new EventEmitter();
 
   protected formGroup = this.formBuilder.group({
-    amount1: new FormControl<number>(null, [
+    descriptorCode: new FormControl<string>(null, [
       Validators.required,
-      Validators.min(0),
-      Validators.max(99),
-    ]),
-    amount2: new FormControl<number>(null, [
-      Validators.required,
-      Validators.min(0),
-      Validators.max(99),
+      Validators.minLength(6),
+      Validators.maxLength(6),
     ]),
   });
 
   constructor(private formBuilder: FormBuilder) {}
 
   submit = async () => {
-    const request = new VerifyBankAccountRequest(
-      this.formGroup.value.amount1,
-      this.formGroup.value.amount2,
-    );
+    const request = new VerifyBankAccountRequest(this.formGroup.value.descriptorCode);
     await this.onSubmit?.(request);
     this.submitted.emit();
   };
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index a0b4793916..ff3f050569 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -9751,5 +9751,14 @@
   },
   "freeFamiliesSponsorshipPolicyDesc": {
     "message": "Do not allow members to redeem a Families plan through this organization."
+  },
+  "verifyBankAccountWithStatementDescriptorWarning": {
+    "message": "Payment with a bank account is only available to customers in the United States. You will be required to verify your bank account. We will make a micro-deposit within the next 1-2 business days. Enter the statement descriptor code from this deposit on the organization's billing page to verify the bank account. Failure to verify the bank account will result in a missed payment and your subscription being suspended."
+  },
+  "verifyBankAccountWithStatementDescriptorInstructions": {
+    "message": "We have made a micro-deposit to your bank account (this may take 1-2 business days). Enter the six-digit code starting with 'SM' found on the deposit description. Failure to verify the bank account will result in a missed payment and your subscription being suspended."
+  },
+  "descriptorCode": {
+    "message": "Descriptor code"
   }
 }
diff --git a/libs/common/src/billing/models/request/verify-bank-account.request.ts b/libs/common/src/billing/models/request/verify-bank-account.request.ts
index cadf4b9709..ee85d1a2aa 100644
--- a/libs/common/src/billing/models/request/verify-bank-account.request.ts
+++ b/libs/common/src/billing/models/request/verify-bank-account.request.ts
@@ -1,9 +1,7 @@
 export class VerifyBankAccountRequest {
-  amount1: number;
-  amount2: number;
+  descriptorCode: string;
 
-  constructor(amount1: number, amount2: number) {
-    this.amount1 = amount1;
-    this.amount2 = amount2;
+  constructor(descriptorCode: string) {
+    this.descriptorCode = descriptorCode;
   }
 }