From 0080fcc979ef56655c4824652ae36d34b8c8a2e6 Mon Sep 17 00:00:00 2001
From: Alex Morask <144709477+amorask-bitwarden@users.noreply.github.com>
Date: Fri, 13 Sep 2024 09:29:11 -0400
Subject: [PATCH] Use payment-v2.component in trial-billing-step.component
 (#11010)

---
 .../organization-information.component.ts     |  2 +-
 .../trial-billing-step.component.html         | 10 +++-
 .../trial-billing-step.component.ts           | 46 +++++++++++++++----
 3 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/app/admin-console/organizations/create/organization-information.component.ts b/apps/web/src/app/admin-console/organizations/create/organization-information.component.ts
index 602ad82972..3adfb7340b 100644
--- a/apps/web/src/app/admin-console/organizations/create/organization-information.component.ts
+++ b/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;
     }
 
diff --git a/apps/web/src/app/billing/accounts/trial-initiation/trial-billing-step.component.html b/apps/web/src/app/billing/accounts/trial-initiation/trial-billing-step.component.html
index 71a4ff119c..f927a7ca61 100644
--- a/apps/web/src/app/billing/accounts/trial-initiation/trial-billing-step.component.html
+++ b/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">
diff --git a/apps/web/src/app/billing/accounts/trial-initiation/trial-billing-step.component.ts b/apps/web/src/app/billing/accounts/trial-initiation/trial-billing-step.component.ts
index 7dad7effee..9b9e6f0cd0 100644
--- a/apps/web/src/app/billing/accounts/trial-initiation/trial-billing-step.component.ts
+++ b/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,13 +122,23 @@ export class TrialBillingStepComponent implements OnInit {
   }
 
   protected changedCountry() {
-    this.paymentComponent.hideBank = this.taxInfoComponent.taxFormGroup.value.country !== "US";
-    if (
-      this.paymentComponent.hideBank &&
-      this.paymentComponent.method === PaymentMethodType.BankAccount
-    ) {
-      this.paymentComponent.method = PaymentMethodType.Card;
-      this.paymentComponent.changeMethod();
+    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 &&
+        this.paymentComponent.method === PaymentMethodType.BankAccount
+      ) {
+        this.paymentComponent.method = PaymentMethodType.Card;
+        this.paymentComponent.changeMethod();
+      }
     }
   }
 
@@ -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,