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
2024-11-27 14:27:05 -08:00 · 2024-11-27 14:27:05 -08:00 · 292176da2c
commit 292176da2c
parent 50dac7dc50
4 changed files with 95 additions and 55 deletions
--- a/frontend/src/controllers/localize.ts
+++ b/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,
+    });
+  };
 }
--- a/frontend/src/features/archived-items/archived-item-list.ts
+++ b/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, {
-              style: "unit",
-              unit: "byte",
+            content=${this.localize.bytes(this.item.fileSize || 0, {
              unitDisplay: "long",
            })}
            @click=${this.onTooltipClick}
--- a/frontend/src/pages/org/settings/components/billing.ts
+++ b/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
-                      class="truncate"
-                      date=${org.subscription.futureCancelDate}
-                      month="long"
-                      day="numeric"
-                      year="numeric"
-                    >
-                    </sl-format-date>`;
+                    const futureCancelDate = this.localize.date(
+                      org.subscription.futureCancelDate,
+                      {
+                        month: "long",
+                        day: "numeric",
+                        year: "numeric",
+                      },
+                    );

                    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>
-                        <span>
+                        <sl-icon
+                          name="info-circle"
+                          class="size-4 flex-shrink-0"
+                        ></sl-icon>
+                        <div>
                          ${org.subscription.status ===
                          SubscriptionStatus.Trialing
-                            ? msg(
-                                html`Your trial will end on ${futureCancelDate}
-                                  - Click <strong>Choose Plan</strong> to
-                                  subscribe`,
-                              )
+                            ? html`
+                                <span class="font-medium text-neutral-700">
+                                  ${msg(
+                                    str`Your trial will end on ${futureCancelDate}`,
+                                  )}
+                                </span>
+                                &mdash;
+                                ${msg(str`subscribe to keep your account`)}
+                              `
                            : msg(
-                                html`Your plan will be canceled on
-                                ${futureCancelDate}`,
+                                str`Your plan will be canceled on ${futureCancelDate}`,
                              )}
-                        </span>
+                        </div>
                      </div>
                    `;
                  },
@ -175,10 +181,15 @@ export class OrgSettingsBilling extends BtrixElement {
              </p>
              ${when(this.org, (org) =>
                org.subscription
-                  ? html`<p class="mb-3 leading-normal">
-                        ${msg(
-                          str`You can view plan details, update payment methods, and update billing information by clicking “${this.portalUrlLabel}”.`,
-                        )}
+                  ? html` <p class="mb-3 leading-normal">
+                        ${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>
                      ${this.salesEmail
                        ? html`<p class="leading-normal">
@ -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`,
-          )}
-        </li>
-        <li>
-          ${msg(
-            html`${quotas.storageQuota
-              ? html`<sl-format-bytes
-                  value=${quotas.storageQuota}
-                ></sl-format-bytes>`
-              : msg("Unlimited")}
-            storage`,
+            str`${maxExecMinutesPerMonth || msg("Unlimited minutes")} of crawling time`,
          )}
        </li>
+        <li>${msg(str`${storageBytesText} of disk space`)}</li>
        <li>
          ${msg(str`${maxPagesPerCrawl || msg("Unlimited pages")} per crawl`)}
        </li>
--- a/frontend/xliff/es.xlf
+++ b/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">
-        <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 id="s17658c5f9a5e8a52">
+        <source>Your trial will end on <x equiv-text="${futureCancelDate}" id="0"/></source>
      </trans-unit>
-      <trans-unit id="h244d3ee006a72650">
-        <source>Your plan will be canceled on
-                                <x equiv-text="${futureCancelDate}" id="0"/></source>
+      <trans-unit id="s5f5b3049f319a00a">
+        <source>Your plan will be canceled on <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>