Use payment-v2.component in trial-billing-step.component (#11010)

apps/web/src/app/admin-console/organizations/create/organization-information.component.ts

@@ -19,7 +19,7 @@ export class OrganizationInformationComponent implements OnInit {
   constructor(private accountService: AccountService) {}
 
   async ngOnInit(): Promise<void> {
-    if (this.formGroup.controls.billingEmail.value) {
+    if (this.formGroup?.controls?.billingEmail?.value) {
       return;
     }
 

apps/web/src/app/billing/accounts/trial-initiation/trial-billing-step.component.html

@@ -49,7 +49,15 @@
     </div>
     <div class="tw-mb-4">
       <h2 class="tw-mb-3 tw-text-base tw-font-semibold">{{ "paymentType" | i18n }}</h2>
-      <app-payment [hideCredit]="true" [trialFlow]="true"></app-payment>
+      <app-payment
+        *ngIf="!deprecateStripeSourcesAPI"
+        [hideCredit]="true"
+        [trialFlow]="true"
+      ></app-payment>
+      <app-payment-v2
+        *ngIf="deprecateStripeSourcesAPI"
+        [showAccountCredit]="false"
+      ></app-payment-v2>
       <app-tax-info [trialFlow]="true" (onCountryChanged)="changedCountry()"></app-tax-info>
     </div>
     <div class="tw-flex tw-space-x-2">

apps/web/src/app/billing/accounts/trial-initiation/trial-billing-step.component.ts

@@ -11,12 +11,14 @@ import {
 } from "@bitwarden/common/billing/abstractions/organization-billing.service";
 import { PaymentMethodType, PlanType, ProductTierType } from "@bitwarden/common/billing/enums";
 import { PlanResponse } from "@bitwarden/common/billing/models/response/plan.response";
+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 { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
-import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { ToastService } from "@bitwarden/components";
 
 import { BillingSharedModule, PaymentComponent, TaxInfoComponent } from "../../shared";
+import { PaymentV2Component } from "../../shared/payment/payment-v2.component";
 
 export type TrialOrganizationType = Exclude<ProductTierType, ProductTierType.Free>;
 
@@ -49,6 +51,7 @@ export enum SubscriptionProduct {
 })
 export class TrialBillingStepComponent implements OnInit {
   @ViewChild(PaymentComponent) paymentComponent: PaymentComponent;
+  @ViewChild(PaymentV2Component) paymentV2Component: PaymentV2Component;
   @ViewChild(TaxInfoComponent) taxInfoComponent: TaxInfoComponent;
   @Input() organizationInfo: OrganizationInfo;
   @Input() subscriptionProduct: SubscriptionProduct = SubscriptionProduct.PasswordManager;
@@ -69,17 +72,22 @@ export class TrialBillingStepComponent implements OnInit {
   annualPlan?: PlanResponse;
   monthlyPlan?: PlanResponse;
 
+  deprecateStripeSourcesAPI: boolean;
+
   constructor(
     private apiService: ApiService,
+    private configService: ConfigService,
     private i18nService: I18nService,
     private formBuilder: FormBuilder,
     private messagingService: MessagingService,
     private organizationBillingService: OrganizationBillingService,
-    private platformUtilsService: PlatformUtilsService,
     private toastService: ToastService,
   ) {}
 
   async ngOnInit(): Promise<void> {
+    this.deprecateStripeSourcesAPI = await this.configService.getFeatureFlag(
+      FeatureFlag.AC2476_DeprecateStripeSourcesAPI,
+    );
     const plans = await this.apiService.getPlans();
     this.applicablePlans = plans.data.filter(this.isApplicable);
     this.annualPlan = this.findPlanFor(SubscriptionCadence.Annual);
@@ -114,6 +122,15 @@ export class TrialBillingStepComponent implements OnInit {
   }
 
   protected changedCountry() {
+    if (this.deprecateStripeSourcesAPI) {
+      this.paymentV2Component.showBankAccount = this.taxInfoComponent.country === "US";
+      if (
+        !this.paymentV2Component.showBankAccount &&
+        this.paymentV2Component.selected === PaymentMethodType.BankAccount
+      ) {
+        this.paymentV2Component.select(PaymentMethodType.Card);
+      }
+    } else {
       this.paymentComponent.hideBank = this.taxInfoComponent.taxFormGroup.value.country !== "US";
       if (
         this.paymentComponent.hideBank &&
@@ -123,6 +140,7 @@ export class TrialBillingStepComponent implements OnInit {
         this.paymentComponent.changeMethod();
       }
     }
+  }
 
   protected getPriceFor(cadence: SubscriptionCadence): number {
     const plan = this.findPlanFor(cadence);
@@ -141,7 +159,15 @@ export class TrialBillingStepComponent implements OnInit {
 
   private async createOrganization(): Promise<string> {
     const planResponse = this.findPlanFor(this.formGroup.value.cadence);
-    const paymentMethod = await this.paymentComponent.createPaymentToken();
+
+    let paymentMethod: [string, PaymentMethodType];
+
+    if (this.deprecateStripeSourcesAPI) {
+      const { type, token } = await this.paymentV2Component.tokenize();
+      paymentMethod = [token, type];
+    } else {
+      paymentMethod = await this.paymentComponent.createPaymentToken();
+    }
 
     const organization: OrganizationInformation = {
       name: this.organizationInfo.name,