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

bitwarden_license/bit-web/src/app/admin-console/providers/providers.module.ts

@@ -7,6 +7,7 @@ import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { CardComponent, SearchModule } from "@bitwarden/components";
 import { DangerZoneComponent } from "@bitwarden/web-vault/app/auth/settings/account/danger-zone.component";
 import { OrganizationPlansComponent } from "@bitwarden/web-vault/app/billing";
+import { PaymentComponent } from "@bitwarden/web-vault/app/billing/shared/payment/payment.component";
 import { VerifyBankAccountComponent } from "@bitwarden/web-vault/app/billing/shared/verify-bank-account/verify-bank-account.component";
 import { OssModule } from "@bitwarden/web-vault/app/oss.module";
 
@@ -53,6 +54,7 @@ import { VerifyRecoverDeleteProviderComponent } from "./verify-recover-delete-pr
     ScrollingModule,
     VerifyBankAccountComponent,
     CardComponent,
+    PaymentComponent,
   ],
   declarations: [
     AcceptProviderComponent,

bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup.component.html

@@ -12,23 +12,50 @@
   </div>
   <p>{{ "setupProviderDesc" | i18n }}</p>
   <form [formGroup]="formGroup" [bitSubmit]="submit">
-    <h2 class="tw-mt-5">{{ "generalInformation" | i18n }}</h2>
-    <div class="tw-grid tw-grid-flow-col tw-grid-cols-12 tw-gap-4">
-      <div class="tw-col-span-6">
-        <bit-form-field>
-          <bit-label>{{ "providerName" | i18n }}</bit-label>
-          <input type="text" bitInput formControlName="name" />
-        </bit-form-field>
+    @if (!(requireProviderPaymentMethodDuringSetup$ | async)) {
+      <h2 class="tw-mt-5">{{ "generalInformation" | i18n }}</h2>
+      <div class="tw-grid tw-grid-flow-col tw-grid-cols-12 tw-gap-4">
+        <div class="tw-col-span-6">
+          <bit-form-field>
+            <bit-label>{{ "providerName" | i18n }}</bit-label>
+            <input type="text" bitInput formControlName="name" />
+          </bit-form-field>
+        </div>
+        <div class="tw-col-span-6">
+          <bit-form-field>
+            <bit-label>{{ "billingEmail" | i18n }}</bit-label>
+            <input type="email" bitInput formControlName="billingEmail" />
+            <bit-hint>{{ "providerBillingEmailHint" | i18n }}</bit-hint>
+          </bit-form-field>
+        </div>
       </div>
-      <div class="tw-col-span-6">
-        <bit-form-field>
-          <bit-label>{{ "billingEmail" | i18n }}</bit-label>
-          <input type="email" bitInput formControlName="billingEmail" />
-          <bit-hint>{{ "providerBillingEmailHint" | i18n }}</bit-hint>
-        </bit-form-field>
+      <app-manage-tax-information />
+    } @else {
+      <h2 class="tw-mt-5">{{ "billingInformation" | i18n }}</h2>
+      <div class="tw-grid tw-grid-flow-col tw-grid-cols-12 tw-gap-4">
+        <div class="tw-col-span-6">
+          <bit-form-field>
+            <bit-label>{{ "providerName" | i18n }}</bit-label>
+            <input type="text" bitInput formControlName="name" />
+          </bit-form-field>
+        </div>
+        <div class="tw-col-span-6">
+          <bit-form-field>
+            <bit-label>{{ "billingEmail" | i18n }}</bit-label>
+            <input type="email" bitInput formControlName="billingEmail" />
+            <bit-hint>{{ "providerBillingEmailHint" | i18n }}</bit-hint>
+          </bit-form-field>
+        </div>
       </div>
-    </div>
-    <app-manage-tax-information />
+      <h2 class="tw-mt-5">{{ "paymentMethod" | i18n }}</h2>
+      <app-payment
+        [showAccountCredit]="false"
+        [bankAccountWarningOverride]="
+          'verifyProviderBankAccountWithStatementDescriptorWarning' | i18n
+        "
+      />
+      <app-manage-tax-information />
+    }
     <button class="tw-mt-8" bitButton bitFormButton buttonType="primary" type="submit">
       {{ "submit" | i18n }}
     </button>

bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup.component.ts

@@ -3,13 +3,14 @@
 import { Component, OnDestroy, OnInit, ViewChild } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
-import { Subject, switchMap } from "rxjs";
+import { firstValueFrom, Subject, switchMap } from "rxjs";
 import { first, takeUntil } from "rxjs/operators";
 
 import { ManageTaxInformationComponent } from "@bitwarden/angular/billing/components";
 import { ProviderApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/provider/provider-api.service.abstraction";
 import { ProviderSetupRequest } from "@bitwarden/common/admin-console/models/request/provider/provider-setup.request";
 import { ExpandedTaxInfoUpdateRequest } from "@bitwarden/common/billing/models/request/expanded-tax-info-update.request";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
@@ -17,12 +18,14 @@ import { ProviderKey } from "@bitwarden/common/types/key";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 import { ToastService } from "@bitwarden/components";
 import { KeyService } from "@bitwarden/key-management";
+import { PaymentComponent } from "@bitwarden/web-vault/app/billing/shared/payment/payment.component";
 
 @Component({
   selector: "provider-setup",
   templateUrl: "setup.component.html",
 })
 export class SetupComponent implements OnInit, OnDestroy {
+  @ViewChild(PaymentComponent) paymentComponent: PaymentComponent;
   @ViewChild(ManageTaxInformationComponent) taxInformationComponent: ManageTaxInformationComponent;
 
   loading = true;
@@ -36,6 +39,10 @@ export class SetupComponent implements OnInit, OnDestroy {
 
   private destroy$ = new Subject<void>();
 
+  requireProviderPaymentMethodDuringSetup$ = this.configService.getFeatureFlag$(
+    FeatureFlag.PM19956_RequireProviderPaymentMethodDuringSetup,
+  );
+
   constructor(
     private router: Router,
     private i18nService: I18nService,
@@ -134,6 +141,14 @@ export class SetupComponent implements OnInit, OnDestroy {
       request.taxInfo.city = taxInformation.city;
       request.taxInfo.state = taxInformation.state;
 
+      const requireProviderPaymentMethodDuringSetup = await firstValueFrom(
+        this.requireProviderPaymentMethodDuringSetup$,
+      );
+
+      if (requireProviderPaymentMethodDuringSetup) {
+        request.paymentSource = await this.paymentComponent.tokenize();
+      }
+
       const provider = await this.providerApiService.postProviderSetup(this.providerId, request);
 
       this.toastService.showToast({