Update bank account verification to use statement descriptor (#12055)

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>

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>

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();
   };

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"
   }
 }

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;
   }
 }