From 4066022e18da5deba1a6acd9f888f65bdc288352 Mon Sep 17 00:00:00 2001
From: cyprain-okeke <108260115+cyprain-okeke@users.noreply.github.com>
Date: Tue, 21 Jan 2025 16:01:48 +0100
Subject: [PATCH] make the pricing breakdown to show properly (#12982)

---
 .../change-plan-dialog.component.html         | 38 +++++++++----------
 .../change-plan-dialog.component.ts           |  3 ++
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/apps/web/src/app/billing/organizations/change-plan-dialog.component.html b/apps/web/src/app/billing/organizations/change-plan-dialog.component.html
index 89c0075ba0d..96679ea1753 100644
--- a/apps/web/src/app/billing/organizations/change-plan-dialog.component.html
+++ b/apps/web/src/app/billing/organizations/change-plan-dialog.component.html
@@ -130,7 +130,7 @@
                             : selectableProduct.PasswordManager.seatPrice
                           ) | currency: "$"
                         }}
-                        /{{ "month" | i18n }}
+                        /{{ selectedPlanInterval | i18n }}
                       </ng-container>
                     </b>
                   </ng-container>
@@ -400,7 +400,7 @@
                     : selectedPlan.PasswordManager.basePrice
                   ) | currency: "$"
                 }}
-                /{{ "year" | i18n }}
+                /{{ selectedPlanInterval | i18n }}
               </span>
               <span>
                 <ng-container *ngIf="acceptingSponsorship; else notAcceptingSponsorship">
@@ -427,7 +427,7 @@
                 <span *ngIf="!selectedPlan.PasswordManager.baseSeats">{{ "members" | i18n }}</span>
                 &times;
                 {{ selectedPlan.PasswordManager.seatPrice | currency: "$" }}
-                /{{ "year" | i18n }}
+                /{{ selectedPlanInterval | i18n }}
               </span>
 
               <span>
@@ -444,7 +444,7 @@
                 {{ "additionalStorageGbMessage" | i18n }}
                 &times;
                 {{ additionalStoragePriceMonthly(selectedPlan) | currency: "$" }}
-                /{{ "year" | i18n }}
+                /{{ selectedPlanInterval | i18n }}
               </span>
               <span>{{ additionalStorageTotal(selectedPlan) | currency: "$" }}</span>
             </p>
@@ -485,7 +485,7 @@
                     : selectedPlan.SecretsManager.basePrice
                   ) | currency: "$"
                 }}
-                /{{ "year" | i18n }}
+                /{{ selectedPlanInterval | i18n }}
               </span>
             </p>
             <p
@@ -504,7 +504,7 @@
                 <span *ngIf="!selectedPlan.SecretsManager.baseSeats">{{ "members" | i18n }}</span>
                 &times;
                 {{ selectedPlan.SecretsManager.seatPrice | currency: "$" }}
-                /{{ "year" | i18n }}
+                /{{ selectedPlanInterval | i18n }}
               </span>
 
               <span>
@@ -524,7 +524,7 @@
                 {{ "serviceAccounts" | i18n | lowercase }}
                 &times;
                 {{ selectedPlan?.SecretsManager?.additionalPricePerServiceAccount | currency: "$" }}
-                /{{ "year" | i18n }}
+                /{{ selectedPlanInterval | i18n }}
               </span>
               <span>{{ additionalServiceAccountTotal(selectedPlan) | currency: "$" }}</span>
             </p>
@@ -580,7 +580,7 @@
                 <span *ngIf="!selectedPlan.PasswordManager.baseSeats">{{ "members" | i18n }}</span>
                 &times;
                 {{ selectedPlan.PasswordManager.seatPrice | currency: "$" }}
-                /{{ "month" | i18n }}
+                /{{ selectedPlanInterval | i18n }}
               </span>
               <span>
                 {{ passwordManagerSeatTotal(selectedPlan) | currency: "$" }}
@@ -596,7 +596,7 @@
                 {{ "additionalStorageGbMessage" | i18n }}
                 &times;
                 {{ additionalStoragePriceMonthly(selectedPlan) | currency: "$" }}
-                /{{ "month" | i18n }}
+                /{{ selectedPlanInterval | i18n }}
               </span>
               <span>{{
                 storageGb * selectedPlan.PasswordManager.additionalStoragePricePerGb | currency: "$"
@@ -656,7 +656,7 @@
                 <span *ngIf="!selectedPlan.SecretsManager.baseSeats">{{ "members" | i18n }}</span>
                 &times;
                 {{ selectedPlan.SecretsManager.seatPrice | currency: "$" }}
-                /{{ "month" | i18n }}
+                /{{ selectedPlanInterval | i18n }}
               </span>
               <span>
                 {{ secretsManagerSeatTotal(selectedPlan, sub?.smSeats) | currency: "$" }}
@@ -675,7 +675,7 @@
                 {{ "serviceAccounts" | i18n | lowercase }}
                 &times;
                 {{ selectedPlan.SecretsManager.additionalPricePerServiceAccount | currency: "$" }}
-                /{{ "month" | i18n }}
+                /{{ selectedPlanInterval | i18n }}
               </span>
               <span>{{ additionalServiceAccountTotal(selectedPlan) | currency: "$" }}</span>
             </p>
@@ -725,7 +725,7 @@
                     : selectedPlan.SecretsManager.basePrice
                   ) | currency: "$"
                 }}
-                /{{ "year" | i18n }}
+                /{{ selectedPlanInterval | i18n }}
               </span>
             </p>
             <p
@@ -744,7 +744,7 @@
                 <span *ngIf="!selectedPlan.SecretsManager.baseSeats">{{ "members" | i18n }}</span>
                 &times;
                 {{ selectedPlan.SecretsManager.seatPrice | currency: "$" }}
-                /{{ "year" | i18n }}
+                /{{ selectedPlanInterval | i18n }}
               </span>
 
               <span>
@@ -764,7 +764,7 @@
                 {{ "serviceAccounts" | i18n }}
                 &times;
                 {{ selectedPlan.SecretsManager.additionalPricePerServiceAccount | currency: "$" }}
-                /{{ "year" | i18n }}
+                /{{ selectedPlanInterval | i18n }}
               </span>
               <span>{{ additionalServiceAccountTotal(selectedPlan) | currency: "$" }}</span>
             </p>
@@ -786,7 +786,7 @@
                     : selectedPlan.PasswordManager.basePrice
                   ) | currency: "$"
                 }}
-                /{{ "year" | i18n }}
+                /{{ selectedPlanInterval | i18n }}
               </span>
               <span>
                 <ng-container *ngIf="acceptingSponsorship; else notAcceptingSponsorship">
@@ -813,7 +813,7 @@
                 <span *ngIf="!selectedPlan.PasswordManager.baseSeats">{{ "members" | i18n }}</span>
                 &times;
                 {{ selectedPlan.PasswordManager.seatPrice | currency: "$" }}
-                /{{ "year" | i18n }}
+                /{{ selectedPlanInterval | i18n }}
               </span>
 
               <span *ngIf="isSecretsManagerTrial()">
@@ -860,7 +860,7 @@
                 <span *ngIf="!selectedPlan.SecretsManager.baseSeats">{{ "members" | i18n }}</span>
                 &times;
                 {{ selectedPlan.SecretsManager.seatPrice | currency: "$" }}
-                /{{ "month" | i18n }}
+                /{{ selectedPlanInterval | i18n }}
               </span>
               <span>
                 {{ secretsManagerSeatTotal(selectedPlan, sub?.smSeats) | currency: "$" }}
@@ -879,7 +879,7 @@
                 {{ "serviceAccounts" | i18n }}
                 &times;
                 {{ selectedPlan.SecretsManager.additionalPricePerServiceAccount | currency: "$" }}
-                /{{ "month" | i18n }}
+                /{{ selectedPlanInterval | i18n }}
               </span>
               <span>{{ additionalServiceAccountTotal(selectedPlan) | currency: "$" }}</span>
             </p>
@@ -914,7 +914,7 @@
                 <span *ngIf="!selectedPlan.PasswordManager.baseSeats">{{ "members" | i18n }}</span>
                 &times;
                 {{ selectedPlan.PasswordManager.seatPrice | currency: "$" }}
-                /{{ "month" | i18n }}
+                /{{ selectedPlanInterval | i18n }}
               </span>
               <span *ngIf="isSecretsManagerTrial()">
                 {{ "freeForOneYear" | i18n }}
diff --git a/apps/web/src/app/billing/organizations/change-plan-dialog.component.ts b/apps/web/src/app/billing/organizations/change-plan-dialog.component.ts
index 73577c7b002..4e850edfb0e 100644
--- a/apps/web/src/app/billing/organizations/change-plan-dialog.component.ts
+++ b/apps/web/src/app/billing/organizations/change-plan-dialog.component.ts
@@ -485,6 +485,9 @@ export class ChangePlanDialogComponent implements OnInit, OnDestroy {
   }
 
   get selectedPlanInterval() {
+    if (this.isSubscriptionCanceled) {
+      return this.currentPlan.isAnnual ? "year" : "month";
+    }
     return this.selectedPlan.isAnnual ? "year" : "month";
   }