feat: Update subscription strings (#2185)

- Separates translatable html strings into parts to make them easier to
translate
- Updates copy regarding subscription
- Updates plan feature list to match website

frontend/src/controllers/localize.ts

@@ -12,4 +12,36 @@ export class LocalizeController extends SlLocalizeController {
    * Custom date formatter that takes missing `Z` into account
    */
   readonly date = localize.date;
+
+  /**
+   * From https://github.com/shoelace-style/shoelace/blob/v2.18.0/src/components/format-bytes/format-bytes.component.ts
+   */
+  readonly bytes = (value: number, options?: Intl.NumberFormatOptions) => {
+    if (isNaN(value)) {
+      return "";
+    }
+
+    const opts: Intl.NumberFormatOptions = {
+      unit: "byte",
+      unitDisplay: "short",
+      ...options,
+    };
+    const bitPrefixes = ["", "kilo", "mega", "giga", "tera"]; // petabit isn't a supported unit
+    const bytePrefixes = ["", "kilo", "mega", "giga", "tera", "peta"];
+    const prefix = opts.unit === "bit" ? bitPrefixes : bytePrefixes;
+    const index = Math.max(
+      0,
+      Math.min(Math.floor(Math.log10(value) / 3), prefix.length - 1),
+    );
+    const unit = prefix[index] + opts.unit;
+    const valueToFormat = parseFloat(
+      (value / Math.pow(1000, index)).toPrecision(3),
+    );
+
+    return localize.number(valueToFormat, {
+      style: "unit",
+      unit,
+      unitDisplay: opts.unitDisplay,
+    });
+  };
 }

frontend/src/features/archived-items/archived-item-list.ts

@@ -238,9 +238,7 @@ export class ArchivedItemListItem extends BtrixElement {
         <btrix-table-cell class="tabular-nums">
           <sl-tooltip
             hoist
-            content=${this.localize.number(this.item.fileSize || 0, {
+            content=${this.localize.bytes(this.item.fileSize || 0, {
-              style: "unit",
-              unit: "byte",
               unitDisplay: "long",
             })}
             @click=${this.onTooltipClick}

frontend/src/pages/org/settings/components/billing.ts

@@ -42,7 +42,7 @@ export class OrgSettingsBilling extends BtrixElement {
 
     switch (subscription.status) {
       case SubscriptionStatus.Trialing: {
-        label = msg("Choose Plan");
+        label = msg("Subscribe Now");
         break;
       }
       case SubscriptionStatus.PausedPaymentFailed: {
@@ -121,33 +121,39 @@ export class OrgSettingsBilling extends BtrixElement {
                       return nothing;
                     }
 
-                    const futureCancelDate = html`<sl-format-date
+                    const futureCancelDate = this.localize.date(
-                      class="truncate"
+                      org.subscription.futureCancelDate,
-                      date=${org.subscription.futureCancelDate}
+                      {
-                      month="long"
+                        month: "long",
-                      day="numeric"
+                        day: "numeric",
-                      year="numeric"
+                        year: "numeric",
-                    >
+                      },
-                    </sl-format-date>`;
+                    );
 
                     return html`
                       <div
                         class="mb-3 flex items-center gap-2 border-b pb-3 text-neutral-500"
                       >
-                        <sl-icon name="info-circle" class="text-base"></sl-icon>
+                        <sl-icon
-                        <span>
+                          name="info-circle"
+                          class="size-4 flex-shrink-0"
+                        ></sl-icon>
+                        <div>
                           ${org.subscription.status ===
                           SubscriptionStatus.Trialing
-                            ? msg(
+                            ? html`
-                                html`Your trial will end on ${futureCancelDate}
+                                <span class="font-medium text-neutral-700">
-                                  - Click <strong>Choose Plan</strong> to
+                                  ${msg(
-                                  subscribe`,
+                                    str`Your trial will end on ${futureCancelDate}`,
-                              )
-                            : msg(
-                                html`Your plan will be canceled on
-                                ${futureCancelDate}`,
                                   )}
                                 </span>
+                                &mdash;
+                                ${msg(str`subscribe to keep your account`)}
+                              `
+                            : msg(
+                                str`Your plan will be canceled on ${futureCancelDate}`,
+                              )}
+                        </div>
                       </div>
                     `;
                   },
@@ -176,7 +182,12 @@ export class OrgSettingsBilling extends BtrixElement {
               ${when(this.org, (org) =>
                 org.subscription
                   ? html` <p class="mb-3 leading-normal">
-                        ${msg(
+                        ${org.subscription.status ===
+                        SubscriptionStatus.Trialing
+                          ? msg(
+                              str`To continue using Browsertrix at the end of your trial, click “${this.portalUrlLabel}”.`,
+                            )
+                          : msg(
                               str`You can view plan details, update payment methods, and update billing information by clicking “${this.portalUrlLabel}”.`,
                             )}
                       </p>
@@ -260,7 +271,7 @@ export class OrgSettingsBilling extends BtrixElement {
         }
         case SubscriptionStatus.Trialing: {
           statusLabel = html`
-            <span class="text-success-700">${msg("Trial")}</span>
+            <span class="text-success-700">${msg("Free Trial")}</span>
           `;
           break;
         }
@@ -309,24 +320,18 @@ export class OrgSettingsBilling extends BtrixElement {
       msg(
         str`${this.localize.number(quotas.maxConcurrentCrawls)} concurrent ${pluralOf("crawls", quotas.maxConcurrentCrawls)}`,
       );
+    const storageBytesText = quotas.storageQuota
+      ? this.localize.bytes(quotas.storageQuota)
+      : msg("Unlimited");
 
     return html`
       <ul class="leading-relaxed text-neutral-700">
         <li>
           ${msg(
-            str`${maxExecMinutesPerMonth || msg("Unlimited minutes")} of crawl and QA analysis execution time`,
+            str`${maxExecMinutesPerMonth || msg("Unlimited minutes")} of crawling time`,
-          )}
-        </li>
-        <li>
-          ${msg(
-            html`${quotas.storageQuota
-              ? html`<sl-format-bytes
-                  value=${quotas.storageQuota}
-                ></sl-format-bytes>`
-              : msg("Unlimited")}
-            storage`,
           )}
         </li>
+        <li>${msg(str`${storageBytesText} of disk space`)}</li>
         <li>
           ${msg(str`${maxPagesPerCrawl || msg("Unlimited pages")} per crawl`)}
         </li>

frontend/xliff/es.xlf

@@ -271,9 +271,6 @@
       <trans-unit id="s8e067719f45b0458">
         <source>Pro</source>
       </trans-unit>
-      <trans-unit id="sd069593586fce913">
-        <source><x equiv-text="${maxExecMinutesPerMonth || msg(&quot;Unlimited minutes&quot;)}" id="0"/> of crawl and QA analysis execution time</source>
-      </trans-unit>
       <trans-unit id="s1228a18c03355491">
         <source>Unlimited minutes</source>
       </trans-unit>
@@ -3532,10 +3529,6 @@
         <source>PM</source>
         <note from="lit-localize">Time AM/PM</note>
       </trans-unit>
-      <trans-unit id="h9083eded7901e66a">
-        <source><x equiv-text="${quotas.storageQuota&#10;    ? html `&lt;sl-format-bytes&#10;                  value=${quotas.storageQuota}&#10;                &gt;&lt;/sl-format-bytes&gt;`&#10;    : msg(&quot;Unlimited&quot;)}" id="0"/>
-            storage</source>
-      </trans-unit>
       <trans-unit id="s1d6a13ef53c51ee9">
         <source><x equiv-text="${maxPagesPerCrawl || msg(&quot;Unlimited pages&quot;)}" id="0"/> per crawl</source>
       </trans-unit>
@@ -3800,9 +3793,6 @@
         <source>Profiles:
                     <x equiv-text="&lt;sl-format-bytes value=&quot;${org.bytesStoredProfiles}&quot;&gt;&lt;/sl-format-bytes&gt;" id="0"/></source>
       </trans-unit>
-      <trans-unit id="se3d7a30d5e45c393">
-        <source>Trial</source>
-      </trans-unit>
       <trans-unit id="s582e36ff4a424786">
         <source>Removing <x equiv-text="${this.localize.number(removeCount)} ${pluralOf(&quot;items&quot;, removeCount)}" id="0"/></source>
       </trans-unit>
@@ -3825,14 +3815,29 @@
         <source>To choose a plan and continue using Browsertrix, see
                   <x equiv-text="${billingTabLink}" id="0"/>.</source>
       </trans-unit>
-      <trans-unit id="h003bd6a4e60ee0a5">
+      <trans-unit id="s17658c5f9a5e8a52">
-        <source>Your trial will end on <x equiv-text="${futureCancelDate}" id="0"/>
+        <source>Your trial will end on <x equiv-text="${futureCancelDate}" id="0"/></source>
-                                  - 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="h244d3ee006a72650">
+      <trans-unit id="s5f5b3049f319a00a">
-        <source>Your plan will be canceled on
+        <source>Your plan will be canceled on <x equiv-text="${futureCancelDate}" id="0"/></source>
-                                <x equiv-text="${futureCancelDate}" id="0"/></source>
+      </trans-unit>
+      <trans-unit id="s02e734a81b23d11b">
+        <source>Subscribe Now</source>
+      </trans-unit>
+      <trans-unit id="s0fd618c2a8596617">
+        <source>subscribe to keep your account</source>
+      </trans-unit>
+      <trans-unit id="s2ab646dc4c6667ec">
+        <source>To continue using Browsertrix at the end of your trial, click “<x equiv-text="${this.portalUrlLabel}" id="0"/>”.</source>
+      </trans-unit>
+      <trans-unit id="sd95c2c71d3eaada7">
+        <source>Free Trial</source>
+      </trans-unit>
+      <trans-unit id="sdf3aa31f524a7300">
+        <source><x equiv-text="${maxExecMinutesPerMonth || msg(&quot;Unlimited minutes&quot;)}" id="0"/> of crawling time</source>
+      </trans-unit>
+      <trans-unit id="sab5061cf8c519285">
+        <source><x equiv-text="${storageBytesText}" id="0"/> of disk space</source>
       </trans-unit>
     </body>
   </file>