pull sl-format-date template out of msg()

webrecorder · Nov 24, 2024 · dd5e6d1 · dd5e6d1
1 parent 4acf53a
commit dd5e6d1
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 22 deletions.
diff --git a/frontend/src/features/org/org-status-banner.ts b/frontend/src/features/org/org-status-banner.ts
@@ -135,7 +135,8 @@ export class OrgStatusBanner extends BtrixElement {
               <p>
                 ${msg(
                   html`Your free trial ends on ${dateStr}. To continue using
-                    Browsertrix, select <strong>Choose Plan</strong> in ${billingTabLink}.`,
+                    Browsertrix, select <strong>Choose Plan</strong> in
+                    ${billingTabLink}.`,
                 )}
               </p>
               <p>

diff --git a/frontend/src/pages/org/settings/components/billing.ts b/frontend/src/pages/org/settings/components/billing.ts
@@ -86,6 +86,20 @@ export class OrgSettingsBilling extends BtrixElement {
   });
 
   render() {
+    let futureCancelDate = null;
+
+    if (this.org?.subscription?.futureCancelDate) {
+      futureCancelDate = html`<sl-format-date
+        lang=${getLocale()}
+        class="truncate"
+        date=${this.org.subscription.futureCancelDate}
+        month="long"
+        day="numeric"
+        year="numeric"
+      >
+      </sl-format-date>`;
+    }
+
     return html`
       <section class="-mt-5">
         ${columns([
@@ -132,30 +146,12 @@ export class OrgSettingsBilling extends BtrixElement {
                               SubscriptionStatus.Trialing
                                 ? msg(
                                     html`Your trial will end on
-                                      <sl-format-date
-                                        lang=${getLocale()}
-                                        class="truncate"
-                                        date=${org.subscription
-                                          .futureCancelDate}
-                                        month="long"
-                                        day="numeric"
-                                        year="numeric"
-                                      >
-                                      </sl-format-date>
-                                      - Click <strong>Choose Plan</strong> to subscribe`,
+                                      ${futureCancelDate} - Click
+                                      <strong>Choose Plan</strong> to subscribe`,
                                   )
                                 : msg(
                                     html`Your plan will be canceled on
-                                      <sl-format-date
-                                        lang=${getLocale()}
-                                        class="truncate"
-                                        date=${org.subscription
-                                          .futureCancelDate}
-                                        month="long"
-                                        day="numeric"
-                                        year="numeric"
-                                      >
-                                      </sl-format-date>`,
+                                    ${futureCancelDate}`,
                                   )}
                             </span>
                           </div>