diff --git a/frontend/src/features/org/org-status-banner.ts b/frontend/src/features/org/org-status-banner.ts index fcdce49029..78af19c0f0 100644 --- 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`

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

@@ -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` +

+ ${msg( + html`Your free trial ends on ${dateStr}. To continue using + Browsertrix, select Choose Plan in + ${billingTabLink}.`, + )} +

+

+ ${msg( + str`Your web archives are always yours — you can download any archived items you'd like to keep + before the trial ends!`, + )} +

+ `, + }; + }, + }, + { + 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`

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

${msg( - html`To keep your plan and continue crawling, see + html`To choose a plan and continue using Browsertrix, see ${billingTabLink}.`, )}

diff --git a/frontend/src/pages/org/settings/components/billing.ts b/frontend/src/pages/org/settings/components/billing.ts index b7fe0ddfbf..9a47eb6096 100644 --- 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` + `; + return html`
${columns([ @@ -124,18 +139,17 @@ export class OrgSettingsBilling extends BtrixElement { class="text-base" > - ${msg( - html`Your plan will be canceled on - - `, - )} + ${org.subscription.status === + SubscriptionStatus.Trialing + ? msg( + html`Your trial will end on + ${futureCancelDate()} - Click + Choose Plan to subscribe`, + ) + : msg( + html`Your plan will be canceled on + ${futureCancelDate()}`, + )} ` @@ -247,6 +261,12 @@ export class OrgSettingsBilling extends BtrixElement { `; break; } + case SubscriptionStatus.Trialing: { + statusLabel = html` + ${msg("Trial")} + `; + break; + } case SubscriptionStatus.PausedPaymentFailed: { statusLabel = html` ${msg("Paused, payment failed")} diff --git a/frontend/src/types/billing.ts b/frontend/src/types/billing.ts index fdaae35030..24d1dfa987 100644 --- 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 index 69f38a8044..2e9926dc39 100644 --- a/frontend/xliff/es.xlf +++ b/frontend/xliff/es.xlf @@ -2958,7 +2958,7 @@ days - Your subscription ends on . Your user account, org, and all associated data will be deleted. + Your subscription ends on . Your user account, org, and all associated data will be deleted. We suggest downloading your archived items before they @@ -2972,11 +2972,7 @@ Archiving will be disabled within one day - Your subscription ends on . You will no longer be able to run crawls, upload files, create browser profiles, or create collections. - - - To keep your plan and continue crawling, see - . + Your subscription ends on . You will no longer be able to run crawls, upload files, create browser profiles, or create collections. Archiving is disabled for this org @@ -3629,10 +3625,6 @@ Upload: - - Your plan will be canceled on - - Scope @@ -3783,6 +3775,37 @@ Removing + + Trial + + + You have days left of your Browsertrix trial + + + Your trial ends within one day + + + To choose a plan and continue using Browsertrix, see + . + + + Your web archives are always yours — you can download any archived items you'd like to keep + before the trial ends! + + + Your trial will end on + - Click + Choose Plan to subscribe + + + Your plan will be canceled on + + + + Your free trial ends on . To continue using + Browsertrix, select Choose Plan in + . +