Conditionally display new copy under subscriptions table [AC-1657] (#6332)

* Add copy to translations

* Add copy to premium user subscription page

* Add copy to organization user subscription page

* Conditionally display copy on premium user subscription page

* Conditionally display copy on organization user subscription page

* Update translations to approved copy

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

@@ -81,6 +81,17 @@
                 {{ i.quantity * i.amount | currency : "$" }} /{{ i.interval | i18n }}
               </td>
             </tr>
+            <tr bitRow *ngIf="discount && discount.active">
+              <td bitCell colspan="2">
+                <small>
+                  {{ "customBillingStart" | i18n }}
+                  <a routerLink="/settings/subscription/billing-history">
+                    {{ "billingHistory" | i18n }}
+                  </a>
+                  {{ "customBillingEnd" | i18n }}
+                </small>
+              </td>
+            </tr>
           </ng-container>
           <ng-container *ngIf="userOrg.isFreeOrg">
             <tr bitRow *ngIf="userOrg.usePasswordManager">

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

@@ -140,6 +140,10 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
     return this.sub != null ? this.sub.upcomingInvoice : null;
   }
 
+  get discount() {
+    return this.sub != null ? this.sub.discount : null;
+  }
+
   get isExpired() {
     const nextInvoice = this.nextInvoice;
 

apps/web/src/app/billing/settings/user-subscription.component.html

@@ -90,6 +90,17 @@
             </td>
             <td>{{ i.quantity * i.amount | currency : "$" }} /{{ i.interval | i18n }}</td>
           </tr>
+          <tr *ngIf="discount != null && discount.active">
+            <td colspan="2">
+              <small>
+                {{ "customBillingStart" | i18n }}
+                <a routerLink="/settings/subscription/billing-history">
+                  {{ "billingHistory" | i18n }}
+                </a>
+                {{ "customBillingEnd" | i18n }}
+              </small>
+            </td>
+          </tr>
         </tbody>
       </table>
     </div>

apps/web/src/app/billing/settings/user-subscription.component.ts

@@ -206,6 +206,10 @@ export class UserSubscriptionComponent implements OnInit {
     return this.sub != null ? this.sub.upcomingInvoice : null;
   }
 
+  get discount() {
+    return this.sub != null ? this.sub.discount : null;
+  }
+
   get storagePercentage() {
     return this.sub != null && this.sub.maxStorageGb
       ? +(100 * (this.sub.storageGb / this.sub.maxStorageGb)).toFixed(2)

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

@@ -7177,5 +7177,11 @@
   },
   "alreadyHaveAccount": {
     "message": "Already have an account?"
+  },
+  "customBillingStart": {
+    "message": "Custom billing is not reflected. Visit the "
+  },
+  "customBillingEnd": {
+    "message": " page for latest invoicing."
   }
 }

libs/common/src/billing/models/response/organization-subscription.response.ts

@@ -3,6 +3,7 @@ import { OrganizationResponse } from "../../../admin-console/models/response/org
 import {
   BillingSubscriptionResponse,
   BillingSubscriptionUpcomingInvoiceResponse,
+  BillingCustomerDiscount,
 } from "./subscription.response";
 
 export class OrganizationSubscriptionResponse extends OrganizationResponse {
@@ -10,6 +11,7 @@ export class OrganizationSubscriptionResponse extends OrganizationResponse {
   storageGb: number;
   subscription: BillingSubscriptionResponse;
   upcomingInvoice: BillingSubscriptionUpcomingInvoiceResponse;
+  discount: BillingCustomerDiscount;
   expiration: string;
   expirationWithoutGracePeriod: string;
   secretsManagerBeta: boolean;
@@ -25,6 +27,8 @@ export class OrganizationSubscriptionResponse extends OrganizationResponse {
       upcomingInvoice == null
         ? null
         : new BillingSubscriptionUpcomingInvoiceResponse(upcomingInvoice);
+    const discount = this.getResponseProperty("Discount");
+    this.discount = discount == null ? null : new BillingCustomerDiscount(discount);
     this.expiration = this.getResponseProperty("Expiration");
     this.expirationWithoutGracePeriod = this.getResponseProperty("ExpirationWithoutGracePeriod");
     this.secretsManagerBeta = this.getResponseProperty("SecretsManagerBeta");

libs/common/src/billing/models/response/subscription.response.ts

@@ -7,6 +7,7 @@ export class SubscriptionResponse extends BaseResponse {
   maxStorageGb: number;
   subscription: BillingSubscriptionResponse;
   upcomingInvoice: BillingSubscriptionUpcomingInvoiceResponse;
+  discount: BillingCustomerDiscount;
   license: any;
   expiration: string;
   usingInAppPurchase: boolean;
@@ -21,11 +22,13 @@ export class SubscriptionResponse extends BaseResponse {
     this.usingInAppPurchase = this.getResponseProperty("UsingInAppPurchase");
     const subscription = this.getResponseProperty("Subscription");
     const upcomingInvoice = this.getResponseProperty("UpcomingInvoice");
+    const discount = this.getResponseProperty("Discount");
     this.subscription = subscription == null ? null : new BillingSubscriptionResponse(subscription);
     this.upcomingInvoice =
       upcomingInvoice == null
         ? null
         : new BillingSubscriptionUpcomingInvoiceResponse(upcomingInvoice);
+    this.discount = discount == null ? null : new BillingCustomerDiscount(discount);
   }
 }
 
@@ -88,3 +91,14 @@ export class BillingSubscriptionUpcomingInvoiceResponse extends BaseResponse {
     this.amount = this.getResponseProperty("Amount");
   }
 }
+
+export class BillingCustomerDiscount extends BaseResponse {
+  id: string;
+  active: boolean;
+
+  constructor(response: any) {
+    super(response);
+    this.id = this.getResponseProperty("Id");
+    this.active = this.getResponseProperty("Active");
+  }
+}