[AC-3052] [Defect] Payment method section is blank when upgrading Teams SM trial initiated org paid with Bank Account (#11158)

* Fix the payment method issue

* Resolve the navigation after upgrade

apps/web/src/app/billing/organizations/change-plan-dialog.component.html

@@ -86,9 +86,9 @@
                 }"
               >
                 <h3
-                  class="tw-text-[1.5rem] tw-mt-[6px] tw-font-bold tw-mb-0 tw-leading-[2rem] tw-flex tw-items-center"
+                  class="tw-text-[1.25rem] tw-mt-[6px] tw-font-bold tw-mb-0 tw-leading-[2rem] tw-flex tw-items-center"
                 >
-                  <span class="tw-capitalize">{{
+                  <span class="tw-capitalize tw-whitespace-nowrap">{{
                     selectableProduct.nameLocalizationKey | i18n
                   }}</span>
                   <span
@@ -332,9 +332,17 @@
       <!-- Payment info -->
       <ng-container *ngIf="formGroup.value.productTier !== productTypes.Free">
         <h2 bitTypography="h4">{{ "paymentMethod" | i18n }}</h2>
-        <p *ngIf="!showPayment && billing.paymentSource">
+        <p *ngIf="!showPayment && !deprecateStripeSourcesAPI">
           <i class="bwi bwi-fw" [ngClass]="paymentSourceClasses"></i>
-          {{ billing.paymentSource.description }}
+          {{ billing?.paymentSource?.description }}
+          <span class="ml-2 tw-text-primary-600 tw-cursor-pointer" (click)="toggleShowPayment()">{{
+            "changePaymentMethod" | i18n
+          }}</span>
+          <a></a>
+        </p>
+        <p *ngIf="!showPayment && deprecateStripeSourcesAPI">
+          <i class="bwi bwi-fw" [ngClass]="paymentSourceClasses"></i>
+          {{ paymentSource?.description }}
           <span class="ml-2 tw-text-primary-600 tw-cursor-pointer" (click)="toggleShowPayment()">{{
             "changePaymentMethod" | i18n
           }}</span>
@@ -513,7 +521,7 @@
                 {{ "serviceAccounts" | i18n | lowercase }}
                 &times;
                 {{ selectedPlan?.SecretsManager?.additionalPricePerServiceAccount | currency: "$" }}
-                /{{ "month" | i18n }}
+                /{{ "year" | i18n }}
               </span>
               <span>{{ additionalServiceAccountTotal(selectedPlan) | currency: "$" }}</span>
             </p>

apps/web/src/app/billing/organizations/change-plan-dialog.component.ts

@@ -32,6 +32,7 @@ import { PaymentRequest } from "@bitwarden/common/billing/models/request/payment
 import { UpdatePaymentMethodRequest } from "@bitwarden/common/billing/models/request/update-payment-method.request";
 import { BillingResponse } from "@bitwarden/common/billing/models/response/billing.response";
 import { OrganizationSubscriptionResponse } from "@bitwarden/common/billing/models/response/organization-subscription.response";
+import { PaymentSourceResponse } from "@bitwarden/common/billing/models/response/payment-source.response";
 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";
@@ -163,6 +164,8 @@ export class ChangePlanDialogComponent implements OnInit, OnDestroy {
   currentFocusIndex = 0;
   isCardStateDisabled = false;
   focusedIndex: number | null = null;
+  accountCredit: number;
+  paymentSource?: PaymentSourceResponse;
 
   deprecateStripeSourcesAPI: boolean;
 
@@ -200,8 +203,15 @@ export class ChangePlanDialogComponent implements OnInit, OnDestroy {
       this.currentPlan = this.sub?.plan;
       this.selectedPlan = this.sub?.plan;
       this.organization = await this.organizationService.get(this.organizationId);
+      if (this.deprecateStripeSourcesAPI) {
+        const { accountCredit, paymentSource } =
+          await this.billingApiService.getOrganizationPaymentMethod(this.organizationId);
+        this.accountCredit = accountCredit;
+        this.paymentSource = paymentSource;
+      } else {
         this.billing = await this.organizationApiService.getBilling(this.organizationId);
       }
+    }
 
     if (!this.selfHosted) {
       const plans = await this.apiService.getPlans();
@@ -669,7 +679,7 @@ export class ChangePlanDialogComponent implements OnInit, OnDestroy {
       if (!this.acceptingSponsorship && !this.isInTrialFlow) {
         // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        this.router.navigate(["/organizations/" + orgId + "/members"]);
+        this.router.navigate(["/organizations/" + orgId + "/billing/subscription"]);
       }
 
       if (this.isInTrialFlow) {
@@ -836,6 +846,23 @@ export class ChangePlanDialogComponent implements OnInit, OnDestroy {
   }
 
   get paymentSourceClasses() {
+    if (this.deprecateStripeSourcesAPI) {
+      if (this.paymentSource == null) {
+        return [];
+      }
+      switch (this.paymentSource.type) {
+        case PaymentMethodType.Card:
+          return ["bwi-credit-card"];
+        case PaymentMethodType.BankAccount:
+          return ["bwi-bank"];
+        case PaymentMethodType.Check:
+          return ["bwi-money"];
+        case PaymentMethodType.PayPal:
+          return ["bwi-paypal text-primary"];
+        default:
+          return [];
+      }
+    } else {
       if (this.billing.paymentSource == null) {
         return [];
       }
@@ -852,6 +879,7 @@ export class ChangePlanDialogComponent implements OnInit, OnDestroy {
           return [];
       }
     }
+  }
 
   resolvePlanName(productTier: ProductTierType) {
     switch (productTier) {
@@ -863,6 +891,8 @@ export class ChangePlanDialogComponent implements OnInit, OnDestroy {
         return this.i18nService.t("planNameFamilies");
       case ProductTierType.Teams:
         return this.i18nService.t("planNameTeams");
+      case ProductTierType.TeamsStarter:
+        return this.i18nService.t("planNameTeamsStarter");
     }
   }
 

apps/web/src/app/billing/organizations/organization-subscription-cloud.component.ts

@@ -422,9 +422,10 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
 
       const result = await lastValueFrom(reference.closed);
 
-      if (result === ChangePlanDialogResultType.Submitted) {
-        await this.load();
+      if (result === ChangePlanDialogResultType.Closed) {
+        return;
       }
+      await this.load();
     } else {
       this.showChangePlan = !this.showChangePlan;
     }