Frontend: update org subscription messaging to handle trials. (#2179)

- Show `Trialing` status on billing page, list trial end time and choose plan option. - Show custom alert when trial is about to end, <4 days left, similar to subscription cancellation - No backend changes needed, `trialing` status checked on frontend along with `futureCancelDate` --------- Co-authored-by: Henry Wilkinson <[email protected]>
webrecorder · Nov 24, 2024 · f503c9e · f503c9e
1 parent ca012a4
commit f503c9e
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 52 deletions.
diff --git a/frontend/src/features/org/org-status-banner.ts b/frontend/src/features/org/org-status-banner.ts
@@ -4,6 +4,7 @@ import { html, type TemplateResult } from "lit";
 import { customElement } from "lit/decorators.js";
 
 import { BtrixElement } from "@/classes/BtrixElement";
+import { SubscriptionStatus } from "@/types/billing";
 import { OrgReadOnlyReason } from "@/types/org";
 import { formatISODateString } from "@/utils/localization";
 
@@ -62,16 +63,32 @@ export class OrgStatusBanner extends BtrixElement {
       execMinutesQuotaReached,
     } = this.org;
 
+    let daysDiff = 0;
+    let dateStr = "";
+    const futureCancelDate = subscription?.futureCancelDate || null;
+
+    if (futureCancelDate) {
+      daysDiff = differenceInDays(new Date(), new Date(futureCancelDate));
+
+      dateStr = formatISODateString(futureCancelDate, {
+        month: "long",
+        day: "numeric",
+        year: "numeric",
+        hour: "numeric",
+      });
+    }
+
+    const isTrial = subscription?.status === SubscriptionStatus.Trialing;
+
+    // show banner if < this many days of trial is left
+    const MAX_TRIAL_DAYS_SHOW_BANNER = 4;
+
     return [
       {
         test: () =>
-          !readOnly && !readOnlyOnCancel && !!subscription?.futureCancelDate,
+          !readOnly && !readOnlyOnCancel && !!futureCancelDate && !isTrial,
 
         content: () => {
-          const daysDiff = differenceInDays(
-            new Date(),
-            new Date(subscription!.futureCancelDate!),
-          );
           return {
             title:
               daysDiff > 1
@@ -83,15 +100,7 @@ export class OrgStatusBanner extends BtrixElement {
             detail: html`
               <p>
                 ${msg(
-                  str`Your subscription ends on ${formatISODateString(
-                    subscription!.futureCancelDate!,
-                    {
-                      month: "long",
-                      day: "numeric",
-                      year: "numeric",
-                      hour: "numeric",
-                    },
-                  )}. Your user account, org, and all associated data will be deleted.`,
+                  str`Your subscription ends on ${dateStr}. Your user account, org, and all associated data will be deleted.`,
                 )}
               </p>
               <p>
@@ -107,13 +116,43 @@ export class OrgStatusBanner extends BtrixElement {
       },
       {
         test: () =>
-          !readOnly && readOnlyOnCancel && !!subscription?.futureCancelDate,
+          !readOnly &&
+          !readOnlyOnCancel &&
+          !!futureCancelDate &&
+          isTrial &&
+          daysDiff < MAX_TRIAL_DAYS_SHOW_BANNER,
+
+        content: () => {
+          return {
+            title:
+              daysDiff > 1
+                ? msg(
+                    str`You have ${daysDiff} days left of your Browsertrix trial`,
+                  )
+                : msg(`Your trial ends within one day`),
+
+            detail: html`
+              <p>
+                ${msg(
+                  html`Your free trial ends on ${dateStr}. To continue using
+                    Browsertrix, select <strong>Choose Plan</strong> in
+                    ${billingTabLink}.`,
+                )}
+              </p>
+              <p>
+                ${msg(
+                  str`Your web archives are always yours — you can download any archived items you'd like to keep
+                  before the trial ends!`,
+                )}
+              </p>
+            `,
+          };
+        },
+      },
+      {
+        test: () => !readOnly && readOnlyOnCancel && !!futureCancelDate,
 
         content: () => {
-          const daysDiff = differenceInDays(
-            new Date(),
-            new Date(subscription!.futureCancelDate!),
-          );
           return {
             title:
               daysDiff > 1
@@ -122,20 +161,12 @@ export class OrgStatusBanner extends BtrixElement {
             detail: html`
               <p>
                 ${msg(
-                  str`Your subscription ends on ${formatISODateString(
-                    subscription!.futureCancelDate!,
-                    {
-                      month: "long",
-                      day: "numeric",
-                      year: "numeric",
-                      hour: "numeric",
-                    },
-                  )}. You will no longer be able to run crawls, upload files, create browser profiles, or create collections.`,
+                  str`Your subscription ends on ${dateStr}. You will no longer be able to run crawls, upload files, create browser profiles, or create collections.`,
                 )}
               </p>
               <p>
                 ${msg(
-                  html`To keep your plan and continue crawling, see
+                  html`To choose a plan and continue using Browsertrix, see
                   ${billingTabLink}.`,
                 )}
               </p>

diff --git a/frontend/src/pages/org/settings/components/billing.ts b/frontend/src/pages/org/settings/components/billing.ts
@@ -19,7 +19,7 @@ import { tw } from "@/utils/tailwind";
 const linkClassList = tw`transition-color text-primary hover:text-primary-500`;
 const manageLinkClasslist = clsx(
   linkClassList,
-  tw`flex items-center gap-2 p-2 text-sm font-semibold leading-none`,
+  tw`flex cursor-pointer items-center gap-2 p-2 text-sm font-semibold leading-none`,
 );
 
 @localized()
@@ -42,6 +42,10 @@ export class OrgSettingsBilling extends BtrixElement {
     let label = msg("Manage Billing");
 
     switch (subscription.status) {
+      case SubscriptionStatus.Trialing: {
+        label = msg("Choose Plan");
+        break;
+      }
       case SubscriptionStatus.PausedPaymentFailed: {
         label = msg("Update Billing");
         break;
@@ -82,6 +86,17 @@ export class OrgSettingsBilling extends BtrixElement {
   });
 
   render() {
+    const 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([
@@ -124,18 +139,17 @@ export class OrgSettingsBilling extends BtrixElement {
                               class="text-base"
                             ></sl-icon>
                             <span>
-                              ${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>`,
-                              )}
+                              ${org.subscription.status ===
+                              SubscriptionStatus.Trialing
+                                ? msg(
+                                    html`Your trial will end on
+                                      ${futureCancelDate()} - Click
+                                      <strong>Choose Plan</strong> to subscribe`,
+                                  )
+                                : msg(
+                                    html`Your plan will be canceled on
+                                    ${futureCancelDate()}`,
+                                  )}
                             </span>
                           </div>
                         `
@@ -247,6 +261,12 @@ export class OrgSettingsBilling extends BtrixElement {
           `;
           break;
         }
+        case SubscriptionStatus.Trialing: {
+          statusLabel = html`
+            <span class="text-success-700">${msg("Trial")}</span>
+          `;
+          break;
+        }
         case SubscriptionStatus.PausedPaymentFailed: {
           statusLabel = html`
             <span class="text-danger">${msg("Paused, payment failed")}</span>

diff --git a/frontend/src/types/billing.ts b/frontend/src/types/billing.ts
@@ -4,6 +4,7 @@ import { apiDateSchema } from "./api";
 
 export enum SubscriptionStatus {
   Active = "active",
+  Trialing = "trialing",
   PausedPaymentFailed = "paused_payment_failed",
   Cancelled = "cancelled",
 }

diff --git a/frontend/xliff/es.xlf b/frontend/xliff/es.xlf
@@ -2958,7 +2958,7 @@
               <x equiv-text="${daysDiff}" id="0"/> days</source>
       </trans-unit>
       <trans-unit id="s7fa0d24b94690373">
-        <source>Your subscription ends on <x equiv-text="${formatISODateString(subscription!.futureCancelDate!, {&#10;    month: &quot;long&quot;,&#10;    day: &quot;numeric&quot;,&#10;    year: &quot;numeric&quot;,&#10;    hour: &quot;numeric&quot;,&#10;})}" id="0"/>. Your user account, org, and all associated data will be deleted.</source>
+        <source>Your subscription ends on <x equiv-text="${dateStr}" id="0"/>. Your user account, org, and all associated data will be deleted.</source>
       </trans-unit>
       <trans-unit id="h16be212de6638b6c">
         <source>We suggest downloading your archived items before they
@@ -2972,11 +2972,7 @@
         <source>Archiving will be disabled within one day</source>
       </trans-unit>
       <trans-unit id="s618b35a93b6fd392">
-        <source>Your subscription ends on <x equiv-text="${formatISODateString(subscription!.futureCancelDate!, {&#10;    month: &quot;long&quot;,&#10;    day: &quot;numeric&quot;,&#10;    year: &quot;numeric&quot;,&#10;    hour: &quot;numeric&quot;,&#10;})}" id="0"/>. You will no longer be able to run crawls, upload files, create browser profiles, or create collections.</source>
-      </trans-unit>
-      <trans-unit id="hf17c5369da37401b">
-        <source>To keep your plan and continue crawling, see
-                  <x equiv-text="${billingTabLink}" id="0"/>.</source>
+        <source>Your subscription ends on <x equiv-text="${dateStr}" id="0"/>. You will no longer be able to run crawls, upload files, create browser profiles, or create collections.</source>
       </trans-unit>
       <trans-unit id="sfb85ab2a166e4c99">
         <source>Archiving is disabled for this org</source>
@@ -3629,10 +3625,6 @@
       <trans-unit id="s0eb7c300368b2a58">
         <source>Upload: <x equiv-text="${crawlStatus.label}" id="0"/></source>
       </trans-unit>
-      <trans-unit id="hac630f92c94217bc">
-        <source>Your plan will be canceled on
-                                  <x equiv-text="&lt;sl-format-date lang=&quot;${getLocale()}&quot; class=&quot;truncate&quot; date=&quot;${org.subscription.futureCancelDate}&quot; month=&quot;long&quot; day=&quot;numeric&quot; year=&quot;numeric&quot;&gt;&#10;                                  &lt;/sl-format-date&gt;" id="0"/></source>
-      </trans-unit>
       <trans-unit id="s7d61376257220dab">
         <source>Scope</source>
       </trans-unit>
@@ -3783,6 +3775,37 @@
       <trans-unit id="s582e36ff4a424786">
         <source>Removing <x equiv-text="${formatNumber(removeCount)} ${pluralOf(&quot;items&quot;, removeCount)}" id="0"/></source>
       </trans-unit>
+      <trans-unit id="se3d7a30d5e45c393">
+        <source>Trial</source>
+      </trans-unit>
+      <trans-unit id="s1f1b3cea8b3a20f3">
+        <source>You have <x equiv-text="${daysDiff}" id="0"/> days left of your Browsertrix trial</source>
+      </trans-unit>
+      <trans-unit id="se4dfda71fd51327d">
+        <source>Your trial ends within one day</source>
+      </trans-unit>
+      <trans-unit id="hc4152410e53b56c9">
+        <source>To choose a plan and continue using Browsertrix, see
+                  <x equiv-text="${billingTabLink}" id="0"/>.</source>
+      </trans-unit>
+      <trans-unit id="se5578c14db3c7b2b">
+        <source>Your web archives are always yours — you can download any archived items you'd like to keep
+                  before the trial ends!</source>
+      </trans-unit>
+      <trans-unit id="hae309891e25bac19">
+        <source>Your trial will end on
+                                      <x equiv-text="${futureCancelDate()}" id="0"/> - Click
+                                      <x equiv-text="&lt;strong&gt;" id="1"/>Choose Plan<x equiv-text="&lt;/strong&gt;" id="2"/> to subscribe</source>
+      </trans-unit>
+      <trans-unit id="h9359132712e72230">
+        <source>Your plan will be canceled on
+                                    <x equiv-text="${futureCancelDate()}" id="0"/></source>
+      </trans-unit>
+      <trans-unit id="he8a019fc239da9d2">
+        <source>Your free trial ends on <x equiv-text="${dateStr}" id="0"/>. To continue using
+                    Browsertrix, select <x equiv-text="&lt;strong&gt;" id="1"/>Choose Plan<x equiv-text="&lt;/strong&gt;" id="2"/> in
+                    <x equiv-text="${billingTabLink}" id="3"/>.</source>
+      </trans-unit>
     </body>
   </file>
 </xliff>