From 292176da2c251ce433e25e9c6b17671ee3cf22b8 Mon Sep 17 00:00:00 2001 From: sua yoo Date: Wed, 27 Nov 2024 14:27:05 -0800 Subject: [PATCH] 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 | 32 ++++++++ .../archived-items/archived-item-list.ts | 4 +- .../pages/org/settings/components/billing.ts | 75 ++++++++++--------- frontend/xliff/es.xlf | 39 +++++----- 4 files changed, 95 insertions(+), 55 deletions(-) diff --git a/frontend/src/controllers/localize.ts b/frontend/src/controllers/localize.ts index d199877c..687423a6 100644 --- 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, + }); + }; } diff --git a/frontend/src/features/archived-items/archived-item-list.ts b/frontend/src/features/archived-items/archived-item-list.ts index eff75c8f..82384428 100644 --- 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 { - `; + const futureCancelDate = this.localize.date( + org.subscription.futureCancelDate, + { + month: "long", + day: "numeric", + year: "numeric", + }, + ); return html`
- - + +
${org.subscription.status === SubscriptionStatus.Trialing - ? msg( - html`Your trial will end on ${futureCancelDate} - - Click Choose Plan to - subscribe`, - ) + ? html` + + ${msg( + str`Your trial will end on ${futureCancelDate}`, + )} + + — + ${msg(str`subscribe to keep your account`)} + ` : msg( - html`Your plan will be canceled on - ${futureCancelDate}`, + str`Your plan will be canceled on ${futureCancelDate}`, )} - +
`; }, @@ -175,10 +181,15 @@ export class OrgSettingsBilling extends BtrixElement {

${when(this.org, (org) => org.subscription - ? html`

- ${msg( - str`You can view plan details, update payment methods, and update billing information by clicking “${this.portalUrlLabel}”.`, - )} + ? html`

+ ${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}”.`, + )}

${this.salesEmail ? html`

@@ -260,7 +271,7 @@ export class OrgSettingsBilling extends BtrixElement { } case SubscriptionStatus.Trialing: { statusLabel = html` - ${msg("Trial")} + ${msg("Free Trial")} `; 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`

  • ${msg( - str`${maxExecMinutesPerMonth || msg("Unlimited minutes")} of crawl and QA analysis execution time`, - )} -
    • -
  • - ${msg( - html`${quotas.storageQuota - ? html`` - : msg("Unlimited")} - storage`, + str`${maxExecMinutesPerMonth || msg("Unlimited minutes")} of crawling time`, )}
    • +
  • ${msg(str`${storageBytesText} of disk space`)}
  • ${msg(str`${maxPagesPerCrawl || msg("Unlimited pages")} per crawl`)}
    • diff --git a/frontend/xliff/es.xlf b/frontend/xliff/es.xlf index d20663bd..37f4db50 100644 --- a/frontend/xliff/es.xlf +++ b/frontend/xliff/es.xlf @@ -271,9 +271,6 @@ Pro - - of crawl and QA analysis execution time - Unlimited minutes @@ -3532,10 +3529,6 @@ PM Time AM/PM - - - storage - per crawl @@ -3800,9 +3793,6 @@ Profiles: - - Trial - Removing @@ -3825,14 +3815,29 @@ To choose a plan and continue using Browsertrix, see . - - Your trial will end on - - Click Choose Plan to - subscribe + + Your trial will end on - - Your plan will be canceled on - + + Your plan will be canceled on + + + Subscribe Now + + + subscribe to keep your account + + + To continue using Browsertrix at the end of your trial, click “”. + + + Free Trial + + + of crawling time + + + of disk space