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."
   }
 }