From 74d4bd9839b0f50d37ac9d4949aba4d2f1589fc5 Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Wed, 11 Jun 2025 15:48:38 -0700
Subject: [PATCH 1/3] update style

---
 .../src/features/org/org-status-banner.ts     | 38 +++++++++++++++----
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/frontend/src/features/org/org-status-banner.ts b/frontend/src/features/org/org-status-banner.ts
index d673470dc7..e0c5e84b37 100644
--- a/frontend/src/features/org/org-status-banner.ts
+++ b/frontend/src/features/org/org-status-banner.ts
@@ -1,5 +1,5 @@
 import { localized, msg, str } from "@lit/localize";
-import type { SlAlert } from "@shoelace-style/shoelace";
+import type { SlAlert, SlIcon } from "@shoelace-style/shoelace";
 import { differenceInHours } from "date-fns/fp";
 import { html, type TemplateResult } from "lit";
 import { customElement } from "lit/decorators.js";
@@ -18,6 +18,26 @@ type Alert = {
   };
 };
 
+const iconForVariant = (
+  variant: SlAlert["variant"],
+): NonNullable<SlIcon["name"]> => {
+  switch (variant) {
+    case "danger":
+      return "exclamation-triangle";
+    case "success":
+      return "check2-circle";
+    case "warning":
+      return "exclamation-diamond";
+    default:
+      return "info-circle";
+  }
+};
+
+// show banner if <= this many days of trial is left
+const MAX_TRIAL_DAYS_SHOW_BANNER = 7;
+// display banner as warning if <=
+const MAX_TRIAL_DAYS_SHOW_WARNING = 4;
+
 @customElement("btrix-org-status-banner")
 @localized()
 export class OrgStatusBanner extends BtrixElement {
@@ -29,12 +49,13 @@ export class OrgStatusBanner extends BtrixElement {
     if (!alert) return;
 
     const content = alert.content();
+    const variant = alert.variant || "danger";
 
     return html`
       <div id="banner" class="border-b bg-slate-100 py-5">
         <div class="mx-auto box-border w-full max-w-screen-desktop px-3">
-          <sl-alert variant=${alert.variant || "danger"} open>
-            <sl-icon slot="icon" name="exclamation-triangle-fill"></sl-icon>
+          <sl-alert variant=${variant} open>
+            <sl-icon slot="icon" name=${iconForVariant(variant)}></sl-icon>
             <strong class="block font-semibold">${content.title}</strong>
             ${content.detail}
           </sl-alert>
@@ -89,9 +110,6 @@ export class OrgStatusBanner extends BtrixElement {
     const isTrial =
       subscription?.status === SubscriptionStatus.Trialing || isCancelingTrial;
 
-    // show banner if < this many days of trial is left
-    const MAX_TRIAL_DAYS_SHOW_BANNER = 8;
-
     return [
       {
         test: () =>
@@ -127,9 +145,13 @@ export class OrgStatusBanner extends BtrixElement {
           !readOnly &&
           !readOnlyOnCancel &&
           !!futureCancelDate &&
-          ((isTrial && daysDiff < MAX_TRIAL_DAYS_SHOW_BANNER) ||
+          ((isTrial && daysDiff <= MAX_TRIAL_DAYS_SHOW_BANNER) ||
             isCancelingTrial),
-        variant: isCancelingTrial ? "danger" : "warning",
+        variant: isCancelingTrial
+          ? "danger"
+          : isTrial && daysDiff <= MAX_TRIAL_DAYS_SHOW_WARNING
+            ? "warning"
+            : "primary",
         content: () => {
           return {
             title:

From 808b037e3014eb5bc991921de1844937ab9452ab Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Wed, 11 Jun 2025 15:57:27 -0700
Subject: [PATCH 2/3] clean up name

---
 frontend/src/features/org/org-status-banner.ts | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend/src/features/org/org-status-banner.ts b/frontend/src/features/org/org-status-banner.ts
index e0c5e84b37..e54b2f148d 100644
--- a/frontend/src/features/org/org-status-banner.ts
+++ b/frontend/src/features/org/org-status-banner.ts
@@ -34,9 +34,9 @@ const iconForVariant = (
 };
 
 // show banner if <= this many days of trial is left
-const MAX_TRIAL_DAYS_SHOW_BANNER = 7;
-// display banner as warning if <=
-const MAX_TRIAL_DAYS_SHOW_WARNING = 4;
+const TRIAL_DAYS_SHOW_BANNER = 7;
+// show banner as warning if <= this many days of trial is left
+const TRIAL_DAYS_SHOW_WARNING = 4;
 
 @customElement("btrix-org-status-banner")
 @localized()
@@ -145,11 +145,10 @@ export class OrgStatusBanner extends BtrixElement {
           !readOnly &&
           !readOnlyOnCancel &&
           !!futureCancelDate &&
-          ((isTrial && daysDiff <= MAX_TRIAL_DAYS_SHOW_BANNER) ||
-            isCancelingTrial),
+          ((isTrial && daysDiff <= TRIAL_DAYS_SHOW_BANNER) || isCancelingTrial),
         variant: isCancelingTrial
           ? "danger"
-          : isTrial && daysDiff <= MAX_TRIAL_DAYS_SHOW_WARNING
+          : isTrial && daysDiff <= TRIAL_DAYS_SHOW_WARNING
             ? "warning"
             : "primary",
         content: () => {

From 0ca133a16720341d67b47c6e4dfac5beef835231 Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Thu, 12 Jun 2025 11:11:39 -0700
Subject: [PATCH 3/3] always show trial banner

---
 .../src/features/org/org-status-banner.ts     | 52 ++++++++++---------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/frontend/src/features/org/org-status-banner.ts b/frontend/src/features/org/org-status-banner.ts
index e54b2f148d..151f74d9fc 100644
--- a/frontend/src/features/org/org-status-banner.ts
+++ b/frontend/src/features/org/org-status-banner.ts
@@ -33,10 +33,8 @@ const iconForVariant = (
   }
 };
 
-// show banner if <= this many days of trial is left
-const TRIAL_DAYS_SHOW_BANNER = 7;
 // show banner as warning if <= this many days of trial is left
-const TRIAL_DAYS_SHOW_WARNING = 4;
+const TRIAL_DAYS_LEFT_SHOW_WARNING = 4;
 
 @customElement("btrix-org-status-banner")
 @localized()
@@ -87,16 +85,19 @@ export class OrgStatusBanner extends BtrixElement {
     const readOnlyOnCancel =
       subscription?.readOnlyOnCancel ?? this.org.readOnlyOnCancel;
 
-    let hoursDiff = 0;
-    let daysDiff = 0;
-    let dateStr = "";
+    let hoursUntilTrialEnd = 0;
+    let daysUntilTrialEnd = 0;
+    let trialEndDate = "";
     const futureCancelDate = subscription?.futureCancelDate || null;
 
     if (futureCancelDate) {
-      hoursDiff = differenceInHours(new Date(), new Date(futureCancelDate));
-      daysDiff = Math.ceil(hoursDiff / 24);
+      hoursUntilTrialEnd = differenceInHours(
+        new Date(),
+        new Date(futureCancelDate),
+      );
+      daysUntilTrialEnd = Math.ceil(hoursUntilTrialEnd / 24);
 
-      dateStr = this.localize.date(futureCancelDate, {
+      trialEndDate = this.localize.date(futureCancelDate, {
         month: "long",
         day: "numeric",
         year: "numeric",
@@ -118,15 +119,17 @@ export class OrgStatusBanner extends BtrixElement {
         content: () => {
           return {
             title:
-              hoursDiff < 24
+              hoursUntilTrialEnd < 24
                 ? msg("Your org will be deleted within one day")
-                : daysDiff === 1
+                : daysUntilTrialEnd === 1
                   ? msg("Your org will be deleted in one day.")
-                  : msg(str`Your org will be deleted in ${daysDiff} days`),
+                  : msg(
+                      str`Your org will be deleted in ${daysUntilTrialEnd} days`,
+                    ),
             detail: html`
               <p>
                 ${msg(
-                  str`Your subscription ends on ${dateStr}. Your user account, org, and all associated data will be deleted.`,
+                  str`Your subscription ends on ${trialEndDate}. Your user account, org, and all associated data will be deleted.`,
                 )}
               </p>
               <p>
@@ -142,28 +145,25 @@ export class OrgStatusBanner extends BtrixElement {
       },
       {
         test: () =>
-          !readOnly &&
-          !readOnlyOnCancel &&
-          !!futureCancelDate &&
-          ((isTrial && daysDiff <= TRIAL_DAYS_SHOW_BANNER) || isCancelingTrial),
+          !readOnly && !readOnlyOnCancel && !!futureCancelDate && isTrial,
         variant: isCancelingTrial
           ? "danger"
-          : isTrial && daysDiff <= TRIAL_DAYS_SHOW_WARNING
+          : isTrial && daysUntilTrialEnd <= TRIAL_DAYS_LEFT_SHOW_WARNING
             ? "warning"
             : "primary",
         content: () => {
           return {
             title:
-              hoursDiff < 24
+              hoursUntilTrialEnd < 24
                 ? msg("Your trial ends within one day")
-                : daysDiff === 1
+                : daysUntilTrialEnd === 1
                   ? msg("You have one day left of your Browsertrix trial")
                   : msg(
-                      str`You have ${daysDiff} days left of your Browsertrix trial`,
+                      str`You have ${daysUntilTrialEnd} days left of your Browsertrix trial`,
                     ),
 
             detail: html`<p>
-                ${msg(str`Your free trial ends on ${dateStr}.`)}
+                ${msg(str`Your free trial ends on ${trialEndDate}.`)}
                 ${isCancelingTrial
                   ? msg(
                       html`To continue using Browsertrix, select
@@ -198,13 +198,15 @@ export class OrgStatusBanner extends BtrixElement {
         content: () => {
           return {
             title:
-              daysDiff > 1
-                ? msg(str`Archiving will be disabled in ${daysDiff} days`)
+              daysUntilTrialEnd > 1
+                ? msg(
+                    str`Archiving will be disabled in ${daysUntilTrialEnd} days`,
+                  )
                 : msg("Archiving will be disabled within one day"),
             detail: html`
               <p>
                 ${msg(
-                  str`Your subscription ends on ${dateStr}. You will no longer be able to run crawls, upload files, create browser profiles, or create collections.`,
+                  str`Your subscription ends on ${trialEndDate}. You will no longer be able to run crawls, upload files, create browser profiles, or create collections.`,
                 )}
               </p>
               <p>