Require provider payment method during setup behind FF (#14550)

apps/web/src/app/billing/shared/payment/payment.component.html

@@ -81,7 +81,7 @@
   <!-- Bank Account -->
   <ng-container *ngIf="showBankAccount && usingBankAccount">
     <bit-callout type="warning" title="{{ 'verifyBankAccount' | i18n }}">
-      {{ "verifyBankAccountWithStatementDescriptorWarning" | i18n }}
+      {{ bankAccountWarning }}
     </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>

apps/web/src/app/billing/shared/payment/payment.component.ts

@@ -8,6 +8,7 @@ import { takeUntil } from "rxjs/operators";
 import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions";
 import { PaymentMethodType } from "@bitwarden/common/billing/enums";
 import { TokenizedPaymentSourceRequest } from "@bitwarden/common/billing/models/request/tokenized-payment-source.request";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
 import { SharedModule } from "../../../shared";
 import { BillingServicesModule, BraintreeService, StripeService } from "../../services";
@@ -37,6 +38,8 @@ export class PaymentComponent implements OnInit, OnDestroy {
   /** If provided, will be invoked with the tokenized payment source during form submission. */
   @Input() protected onSubmit?: (request: TokenizedPaymentSourceRequest) => Promise<void>;
 
+  @Input() private bankAccountWarningOverride?: string;
+
   @Output() submitted = new EventEmitter<PaymentMethodType>();
 
   private destroy$ = new Subject<void>();
@@ -56,6 +59,7 @@ export class PaymentComponent implements OnInit, OnDestroy {
   constructor(
     private billingApiService: BillingApiServiceAbstraction,
     private braintreeService: BraintreeService,
+    private i18nService: I18nService,
     private stripeService: StripeService,
   ) {}
 
@@ -200,4 +204,12 @@ export class PaymentComponent implements OnInit, OnDestroy {
   private get usingStripe(): boolean {
     return this.usingBankAccount || this.usingCard;
   }
+
+  get bankAccountWarning(): string {
+    if (this.bankAccountWarningOverride) {
+      return this.bankAccountWarningOverride;
+    } else {
+      return this.i18nService.t("verifyBankAccountWithStatementDescriptorWarning");
+    }
+  }
 }

apps/web/src/locales/en/messages.json

@@ -10631,5 +10631,8 @@
   },
   "restart": {
     "message": "Restart"
+  },
+  "verifyProviderBankAccountWithStatementDescriptorWarning": {
+    "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 provider's subscription page to verify the bank account. Failure to verify the bank account will result in a missed payment and your subscription being suspended."
   }
 }