Add copy to subscription page indicating free Password Manager for a year (#8010)

* Initial commit

* refactoring the code

* resolve pr comment

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

@@ -76,7 +76,17 @@
                 {{ i.amount | currency: "$" }}
               </td>
               <td bitCell class="tw-text-right">
+                <ng-container
+                  *ngIf="
+                    sub?.customerDiscount?.appliesTo?.includes(i.productId);
+                    else calculateElse
+                  "
+                >
+                  {{ "freeForOneYear" | i18n }}
+                </ng-container>
+                <ng-template #calculateElse>
                   {{ i.quantity * i.amount | currency: "$" }} /{{ i.interval | i18n }}
+                </ng-template>
               </td>
             </tr>
           </ng-container>

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

@@ -111,6 +111,10 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
           })
           .sort(sortSubscriptionItems);
       }
+
+      if (this.sub?.customerDiscount?.percentOff == 100) {
+        this.lineItems.reverse();
+      }
     }
 
     const apiKeyResponse = await this.organizationApiService.getApiKeyInformation(
@@ -152,6 +156,7 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
       sponsoredSubscriptionItem: lineItem.sponsoredSubscriptionItem,
       addonSubscriptionItem: lineItem.addonSubscriptionItem,
       productName: lineItem.productName,
+      productId: lineItem.productId,
     }));
   }
 

apps/web/src/locales/en/messages.json

@@ -7584,5 +7584,8 @@
   "tooExpensive": {
     "message": "Too expensive",
     "description": "An option for the offboarding survey shown when a user cancels their subscription."
+  },
+  "freeForOneYear": {
+    "message": "Free for 1 year"
   }
 }