From 727fbb6731dbb724ab0abdf0b0f9eae08d57dd64 Mon Sep 17 00:00:00 2001
From: cyprain-okeke <108260115+cyprain-okeke@users.noreply.github.com>
Date: Wed, 18 Sep 2024 16:22:04 +0100
Subject: [PATCH] Ac 3030 discount is not included in the pricing breakdown
 when annual plan (#11126)

* Resolve the discount issues

* Resolve the payment cvv alignment

* Resolve the wrong message for secrets manager

* Remove unused commented code

* resolve the display message bug on sm flow
---
 .../change-plan-dialog.component.html         | 81 +++++--------------
 .../change-plan-dialog.component.ts           | 12 +--
 .../shared/payment/payment.component.html     |  6 +-
 apps/web/src/locales/en/messages.json         |  4 +-
 4 files changed, 26 insertions(+), 77 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 8420916c8e..1a7b390d21 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
@@ -318,7 +318,7 @@
           type="info"
           title="SECRETS MANAGER SUBSCRIPTION"
         >
-          {{ "secretsManagerSubInfo" | i18n }}
+          {{ "secretsManagerSubscriptionInfo" | i18n }}
         </bit-callout>
         <bit-callout
           *ngIf="organization.useSecretsManager && isSecretsManagerTrial()"
@@ -356,7 +356,8 @@
         <div id="price" class="tw-mt-4">
           <p class="tw-text-lg tw-mb-1">
             <span class="tw-font-semibold"
-              >{{ "total" | i18n }}: {{ total | currency: "USD" : "$" }} USD</span
+              >{{ "total" | i18n }}:
+              {{ total - calculateTotalAppliedDiscount(total) | currency: "USD" : "$" }} USD</span
             >
             <span class="tw-text-xs tw-font-light"> / {{ selectedPlanInterval | i18n }}</span>
             <button
@@ -442,13 +443,11 @@
               bitTypography="body2"
               *ngIf="organization.useSecretsManager && !isSecretsManagerTrial()"
             >
-              <ng-container *ngIf="selectedInterval == planIntervals.Annually">
+              <ng-container
+                *ngIf="selectedInterval == planIntervals.Annually && discountPercentageFromSub > 0"
+              >
                 <span class="tw-text-xs">
-                  {{
-                    "providerDiscount"
-                      | i18n: this.discountPercentageFromSub + this.discountPercentage
-                      | lowercase
-                  }}
+                  {{ "providerDiscount" | i18n: this.discountPercentageFromSub | lowercase }}
                 </span>
                 <span class="tw-line-through tw-text-xs">{{
                   calculateTotalAppliedDiscount(
@@ -524,13 +523,11 @@
               bitTypography="body2"
               *ngIf="organization.useSecretsManager && !isSecretsManagerTrial()"
             >
-              <ng-container *ngIf="selectedInterval == planIntervals.Annually">
+              <ng-container
+                *ngIf="selectedInterval == planIntervals.Annually && discountPercentageFromSub > 0"
+              >
                 <span class="tw-text-xs">
-                  {{
-                    "providerDiscount"
-                      | i18n: this.discountPercentageFromSub + this.discountPercentage
-                      | lowercase
-                  }}
+                  {{ "providerDiscount" | i18n: this.discountPercentageFromSub | lowercase }}
                 </span>
                 <span class="tw-line-through tw-text-xs">{{
                   calculateTotalAppliedDiscount(
@@ -760,28 +757,6 @@
               </span>
               <span>{{ additionalServiceAccountTotal(selectedPlan) | currency: "$" }}</span>
             </p>
-            <!--Discount SM Annual-->
-            <p
-              class="tw-mb-0 tw-flex tw-justify-between"
-              bitTypography="body2"
-              *ngIf="organization.useSecretsManager && isSecretsManagerTrial()"
-            >
-              <ng-container *ngIf="selectedInterval == planIntervals.Annually">
-                <span class="tw-text-xs">
-                  {{
-                    "providerDiscount"
-                      | i18n: this.discountPercentageFromSub + this.discountPercentage
-                      | lowercase
-                  }}
-                </span>
-                <span class="tw-line-through tw-text-xs">{{
-                  calculateTotalAppliedDiscount(
-                    additionalServiceAccountTotal(selectedPlan) +
-                      secretsManagerSeatTotal(selectedPlan, sub.smSeats)
-                  ) | currency: "$"
-                }}</span>
-              </ng-container>
-            </p>
             <!-- password manager summary for annual -->
             <p class="tw-font-semibold tw-mt-3 tw-mb-0" *ngIf="organization.useSecretsManager">
               {{ "passwordManager" | i18n }}
@@ -946,37 +921,19 @@
           class="row"
         >
           <bit-hint class="col-6">
-            <p class="tw-mb-0 tw-flex tw-justify-between" bitTypography="body2">
-              <ng-container
-                *ngIf="
-                  selectedInterval == planIntervals.Annually;
-                  else MonthlyOrAnnuallyWithDiscount
-                "
-              >
+            <p
+              class="tw-mb-0 tw-flex tw-justify-between"
+              bitTypography="body2"
+              *ngIf="discountPercentageFromSub > 0"
+            >
+              <ng-container>
                 <span class="tw-text-xs">
-                  {{
-                    "providerDiscount"
-                      | i18n: this.discountPercentageFromSub + this.discountPercentage
-                      | lowercase
-                  }}
+                  {{ "providerDiscount" | i18n: this.discountPercentageFromSub | lowercase }}
                 </span>
                 <span class="tw-line-through tw-text-xs">{{
                   calculateTotalAppliedDiscount(total) | currency: "$"
                 }}</span>
               </ng-container>
-              <ng-template #MonthlyOrAnnuallyWithDiscount>
-                <span
-                  class="tw-text-xs"
-                  [style.display]="discountPercentageFromSub > 0 ? 'block' : 'none'"
-                >
-                  {{ "providerDiscount" | i18n: this.discountPercentageFromSub | lowercase }}
-                </span>
-                <span
-                  [style.display]="discountPercentageFromSub > 0 ? 'block' : 'none'"
-                  class="tw-line-through tw-text-xs"
-                  >{{ calculateTotalAppliedDiscount(total) | currency: "$" }}</span
-                >
-              </ng-template>
             </p>
           </bit-hint>
         </div>
@@ -989,7 +946,7 @@
                 {{ "total" | i18n }}
               </span>
               <span>
-                {{ total | currency: "USD" : "$" }}
+                {{ total - calculateTotalAppliedDiscount(total) | currency: "USD" : "$" }}
                 <span class="tw-text-xs tw-font-semibold">
                   / {{ selectedPlanInterval | i18n }}</span
                 >
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 8f2b04331c..52ca5857a0 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
@@ -509,10 +509,7 @@ export class ChangePlanDialogComponent implements OnInit, OnDestroy {
   }
 
   additionalStoragePriceMonthly(selectedPlan: PlanResponse) {
-    if (!selectedPlan.isAnnual) {
-      return selectedPlan.PasswordManager.additionalStoragePricePerGb;
-    }
-    return selectedPlan.PasswordManager.additionalStoragePricePerGb / 12;
+    return selectedPlan.PasswordManager.additionalStoragePricePerGb;
   }
 
   additionalServiceAccountTotal(plan: PlanResponse): number {
@@ -834,12 +831,7 @@ export class ChangePlanDialogComponent implements OnInit, OnDestroy {
   }
 
   calculateTotalAppliedDiscount(total: number) {
-    const discountPercent =
-      this.selectedInterval == PlanInterval.Annually
-        ? this.discountPercentage + this.discountPercentageFromSub
-        : this.discountPercentageFromSub;
-
-    const discountedTotal = total / (1 - discountPercent / 100);
+    const discountedTotal = total * (this.discountPercentageFromSub / 100);
     return discountedTotal;
   }
 
diff --git a/apps/web/src/app/billing/shared/payment/payment.component.html b/apps/web/src/app/billing/shared/payment/payment.component.html
index a627da18da..f33768c2c9 100644
--- a/apps/web/src/app/billing/shared/payment/payment.component.html
+++ b/apps/web/src/app/billing/shared/payment/payment.component.html
@@ -26,7 +26,7 @@
   </div>
   <ng-container *ngIf="showMethods && method === paymentMethodType.Card">
     <div class="tw-grid tw-grid-cols-12 tw-gap-4 tw-mb-4">
-      <div [ngClass]="trialFlow ? 'tw-col-span-12' : 'tw-col-span-4'">
+      <div [ngClass]="trialFlow ? 'tw-col-span-12' : 'tw-col-span-6'">
         <app-payment-label-v2 for="stripe-card-number-element">{{
           "number" | i18n
         }}</app-payment-label-v2>
@@ -40,13 +40,13 @@
           height="32"
         />
       </div>
-      <div [ngClass]="trialFlow ? 'tw-col-span-6' : 'tw-col-span-4'">
+      <div [ngClass]="trialFlow ? 'tw-col-span-6' : 'tw-col-span-6'">
         <app-payment-label-v2 for="stripe-card-expiry-element">{{
           "expiration" | i18n
         }}</app-payment-label-v2>
         <div id="stripe-card-expiry-element" class="form-control stripe-form-control"></div>
       </div>
-      <div [ngClass]="trialFlow ? 'tw-col-span-6' : 'tw-col-span-4'">
+      <div [ngClass]="trialFlow ? 'tw-col-span-6' : 'tw-col-span-6'">
         <app-payment-label-v2 for="stripe-card-cvc-element">
           {{ "securityCodeSlashCVV" | i18n }}
           <a
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index cdfae90423..1ca7d04082 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -9131,8 +9131,8 @@
   "current": {
     "message": "Current"
   },
-  "secretsManagerSubInfo": {
-    "message": "Your Secrets Manager subscription will upgrade base on the plan selected"
+  "secretsManagerSubscriptionInfo": {
+    "message": "Your Secrets Manager subscription will upgrade based on the plan selected"
   },
   "bitwardenPasswordManager": {
     "message": "Bitwarden Password Manager"