feat(payments-next): Add Free Trial section to Subscription Management page by elizabeth-ilina · Pull Request #20282 · mozilla/fxa

elizabeth-ilina · 2026-03-27T20:18:03Z

Because

We need to add a Free Trials section to the Sub Manage page so that a customer can see what free trials they have.

This pull request

Adds a new Free Trial section and component, to be rendered on the Subscription Management page, akin to “Payment details” and “Active subscriptions”, that is only rendered if a user has an active trialing subscription.
If the free trial is active, includes details about their upcoming billing cycle, and the option to cancel their free trial
If the free trial could not be converted due to a failed payment method, includes invoice details, and the option to update their payment info
Implements cancelling and resubscribing to a free trial
Implements UI for both Desktop and Mobile views
Adds mobile "Jump to" Free Trials nav link

Issue that this pull request solves

Closes #PAY-3547

Checklist

Put an x in the boxes that apply

My commit is GPG signed.
If applicable, I have modified or added tests which pass locally.
I have added necessary documentation (if appropriate).
I have verified that my changes render correctly in RTL (if appropriate).
I have manually reviewed all AI generated code.

How to review (Optional)

Key files/areas to focus on:
Suggested review order:
Risky or complex parts:

Screenshots (Optional)

Tablet+ :

Trialing, with and without tax:

Failed payment method, with and without tax:

Trial cancelled:

Error resubscribing:

Error cancelling:

Mobile:

No default payment method:

Other information (Optional)

Any other information that is important to this pull request.

libs/payments/management/src/lib/subscriptionManagement.service.ts

elizabeth-ilina · 2026-03-30T16:36:17Z

apps/payments/next/app/[locale]/subscriptions/manage/page.tsx

+          >
+            {l10n.getString(
+              'subscription-management-free-trial-heading',
+              'Free trials'


To match the rest of the page, where headings are plural like Payment details, Active subscriptions, I wrote "Free trials" (with -s at the end), while Figma has "Free trial". Which is better?

Let's go with "Free trials", thanks!

apps/payments/next/app/[locale]/subscriptions/manage/en.ftl

elizabeth-ilina · 2026-03-31T16:32:39Z

libs/payments/ui/src/lib/client/components/FreeTrialContent/index.tsx

+        case 'daily':
+          return {
+            ftlId: 'free-trial-content-charge-info-with-tax-day',
+            fallbackText: `You will be charged ${amount} + ${tax} tax per day after the free trial ends on ${date}.`,


Question: Figma had (what I assume) just total/monthly, not broken up into totalWithoutTax + tax like we do in other places. Should we display just one number, as per Figma, or break it up into totalWithoutTax + tax?

xlisachan

Looks great, Liz!

I came across a scenario where the Subscription Management page did not load after the payment method was removed. It would be an edge case, as Support would have to do this, but we should handle it just in case.

See comments below and let me know if you have any questions. Thanks!

xlisachan · 2026-04-01T19:10:24Z

apps/payments/next/app/[locale]/subscriptions/manage/page.tsx

+          >
+            {l10n.getString(
+              'subscription-management-free-trial-heading',
+              'Free trials'


Let's go with "Free trials", thanks!

xlisachan · 2026-04-06T15:00:09Z

libs/payments/management/src/lib/subscriptionManagement.service.ts

+    const isPastDue = subscription.status === 'past_due';
+    const latestInvoiceId = subscription.latest_invoice;
+
+    const upcomingInvoice =


When testing the scenario where a customer had an active free trial, but no default payment method, the Subscription Management page crashed as Stripe could not generate an upcoming invoice (The subscription's trial_settings.end_behavior.missing_payment_method is set to cancel the subscription since there is no default payment method).

Suggestion:

// Stripe throws invoice_upcoming_none when a trialing subscription // has no payment method and will cancel at trial end — skip the call. const willCancelAtTrialEnd = subscription.status === 'trialing' && subscription.trial_settings?.end_behavior?.missing_payment_method === 'cancel' && !subscription.default_payment_method; const upcomingInvoice = willCancelAtTrialEnd ? undefined : await this.invoiceManager.previewUpcomingSubscription({ customer, subscription, });

No need to throw if there is no upcoming invoice for free trials.

xlisachan · 2026-04-06T16:03:00Z

libs/payments/ui/src/lib/client/components/FreeTrialContent/index.tsx

+                  id="free-trial-content-trial-ends"
+                  vars={{ date: trialEndDateFallback }}
+                >
+                  <p className="text-sm">{`Your free trial ends on ${trialEndDateFallback}.`}</p>


Suggestion (non-blocking): Your free trial ends on {trialEndDateFallback}. Update your payment method to keep access after your free trial.

xlisachan · 2026-04-06T16:04:33Z

libs/payments/ui/src/lib/client/components/FreeTrialContent/index.tsx

+                <p className="text-sm text-yellow-800">
+                  {trialEndDateFallback
+                    ? `Your free trial expires on ${trialEndDateFallback}.`
+                    : 'Your free trial has been cancelled.'}


Separate ftl ids would be needed for these two strings: Your free trial expires on ${trialEndDateFallback}. and Your free trial has been cancelled.

xlisachan · 2026-04-06T16:06:51Z

libs/payments/ui/src/lib/client/components/FreeTrialContent/index.tsx

+              <LinkExternal
+                href={updatePaymentUrl}
+                className="border box-border flex font-bold font-header h-10 items-center justify-center rounded-md py-2 px-5 bg-blue-500 hover:bg-blue-700 text-white min-w-[212px] tablet:w-auto"
+                aria-label={l10n.getString(


We would not need this aria-label for this button, as payment methods cannot be assigned to a product/subscription (it would just be updating the default payment method.

xlisachan · 2026-04-06T16:07:30Z

libs/payments/ui/src/lib/client/components/FreeTrialContent/index.tsx

+                      services.
+                    </>
+                  ) : (
+                    'We were unable to process your payment to start your subscription. Please update your payment method to activate your subscription and restore access to your services.'


Separate ftls ids would be needed for these two strings.

xlisachan · 2026-04-06T16:14:35Z

libs/payments/ui/src/lib/client/components/FreeTrialContent/index.tsx

+
+      <div className="mt-3 tablet:mt-0 flex w-full flex-col tablet:flex-row tablet:justify-end gap-3">
+        <div className="ms-auto tablet:w-auto">
+          {isCancelled ? (


Suggestion (non-blocking):
Figma positioned these buttons like this; however, I believe we should be consistent with the buttons in the other sections (Payment methods, Active Subscriptions), which are the full-width in mobile view.

…t page Because: * We need to add a Free Trials section to the Sub Manage page so that a customer can see what free trials they have. This commit: * Adds a new Free Trial section and component, to be rendered on the Subscription Management page, akin to “Payment details” and “Active subscriptions”, that is only rendered if a user has an active trialing subscription. * If the free trial is active, includes details about their upcoming billing cycle, and the option to cancel their free trial * If the free trial could not be converted due to a failed payment method, includes invoice details, and the option to update their payment info * Implements UI for both Desktop and Mobile views Closes #[PAY-3547](https://mozilla-hub.atlassian.net/browse/PAY-3547)

bcolsson · 2026-04-07T01:21:10Z

libs/payments/ui/src/lib/client/components/FreeTrialContent/en.ftl

+free-trial-content-trial-expires = Your free trial expires on { $date }.
+free-trial-content-trial-cancelled = Your free trial has been cancelled.
+
+# Charge info strings - with tax, per interval


Suggested change

# Charge info strings - with tax, per interval

# Charge info strings - with tax, per interval

For internal facing comments you can separate with a newline to avoid exposing to localizers. Otherwise this would act as an individual comment only for the string immediately below it.

bcolsson · 2026-04-07T01:22:20Z

libs/payments/ui/src/lib/client/components/FreeTrialContent/en.ftl

+free-trial-content-charge-info-with-tax-year = You will be charged { $amount } + { $tax } tax per year after the free trial ends on { $date }.
+free-trial-content-charge-info-with-tax-default = You will be charged { $amount } + { $tax } tax after the free trial ends on { $date }.
+
+# Charge info strings - no tax, per interval


Suggested change

# Charge info strings - no tax, per interval

# Charge info strings - no tax, per interval

bcolsson · 2026-04-07T01:23:46Z

libs/payments/ui/src/lib/client/components/FreeTrialContent/en.ftl

+## $billedOnDate (Date) - The date of the last bill (e.g., July 20, 2025)
+## $invoiceTotal (Number) - The invoice total amount excluding tax. It will be formatted as currency.
+## $taxDue (Number) - The tax amount. It will be formatted as currency.
+free-trial-content-last-bill = Last bill • { $billedOnDate }


Suggested change

## $billedOnDate (Date) - The date of the last bill (e.g., July 20, 2025)

## $invoiceTotal (Number) - The invoice total amount excluding tax. It will be formatted as currency.

## $taxDue (Number) - The tax amount. It will be formatted as currency.

free-trial-content-last-bill = Last bill • { $billedOnDate }

## $billedOnDate (Date) - The date of the last bill (e.g., July 20, 2025)

## $invoiceTotal (Number) - The invoice total amount excluding tax. It will be formatted as currency.

## $taxDue (Number) - The tax amount. It will be formatted as currency.

free-trial-content-last-bill = Last bill • { $billedOnDate }

Group comments need to be followed by an empty newline.

bcolsson · 2026-04-07T01:26:08Z

libs/payments/ui/src/lib/client/components/FreeTrialContent/en.ftl

+free-trial-content-last-bill = Last bill • { $billedOnDate }
+free-trial-content-last-bill-with-tax = { $invoiceTotal } + { $taxDue } tax
+free-trial-content-last-bill-no-tax = { $invoiceTotal }
+free-trial-content-link-view-invoice = View invoice


Suggested change

free-trial-content-link-view-invoice = View invoice

##

free-trial-content-link-view-invoice = View invoice

This closes the group comment to ensure the comments to appear for unrelated strings.

bcolsson · 2026-04-07T01:26:40Z

libs/payments/ui/src/lib/client/components/FreeTrialContent/en.ftl

+free-trial-content-last-bill-with-tax = { $invoiceTotal } + { $taxDue } tax
+free-trial-content-last-bill-no-tax = { $invoiceTotal }
+free-trial-content-link-view-invoice = View invoice
+free-trial-content-link-view-invoice-aria = View invoice for { $productName }


Suggested change

free-trial-content-link-view-invoice-aria = View invoice for { $productName }

# $productName (String) - The name of the subscribed product, e.g. Mozilla VPN

free-trial-content-link-view-invoice-aria = View invoice for { $productName }

Adds an individual comment for this string's variable.

bcolsson · 2026-04-07T01:26:55Z

libs/payments/ui/src/lib/client/components/FreeTrialContent/en.ftl

+free-trial-content-last-bill-no-tax = { $invoiceTotal }
+free-trial-content-link-view-invoice = View invoice
+free-trial-content-link-view-invoice-aria = View invoice for { $productName }
+## $date (Date) - The date the free trial ended (e.g., January 16, 2026)


Suggested change

## $date (Date) - The date the free trial ended (e.g., January 16, 2026)

# $date (Date) - The date the free trial ended (e.g., January 16, 2026)

This is only pertinent to this string, so let's make this an individual comment.

elizabeth-ilina force-pushed the PAY-3547-add-free-trial-section-to-subscription-management-page branch 2 times, most recently from 9a03645 to a3f3dd4 Compare March 30, 2026 16:15

elizabeth-ilina commented Mar 30, 2026

View reviewed changes

libs/payments/management/src/lib/subscriptionManagement.service.ts Outdated Show resolved Hide resolved

elizabeth-ilina commented Mar 30, 2026

View reviewed changes

apps/payments/next/app/[locale]/subscriptions/manage/en.ftl Show resolved Hide resolved

elizabeth-ilina force-pushed the PAY-3547-add-free-trial-section-to-subscription-management-page branch 5 times, most recently from 2c7b6a5 to c0057cd Compare March 30, 2026 19:02

elizabeth-ilina commented Mar 30, 2026

View reviewed changes

apps/payments/next/app/[locale]/subscriptions/manage/en.ftl Show resolved Hide resolved

elizabeth-ilina force-pushed the PAY-3547-add-free-trial-section-to-subscription-management-page branch from c0057cd to bfeffa3 Compare March 30, 2026 19:27

elizabeth-ilina marked this pull request as ready for review March 30, 2026 19:55

elizabeth-ilina requested review from a team as code owners March 30, 2026 19:55

elizabeth-ilina commented Mar 31, 2026

View reviewed changes

xlisachan requested changes Apr 6, 2026

View reviewed changes

elizabeth-ilina force-pushed the PAY-3547-add-free-trial-section-to-subscription-management-page branch from bfeffa3 to cafded4 Compare April 6, 2026 19:22

elizabeth-ilina requested a review from xlisachan April 6, 2026 19:24

elizabeth-ilina force-pushed the PAY-3547-add-free-trial-section-to-subscription-management-page branch from cafded4 to 2fcbac2 Compare April 6, 2026 19:43

bcolsson requested changes Apr 7, 2026

View reviewed changes

	# Charge info strings - with tax, per interval
	# Charge info strings - with tax, per interval

	# Charge info strings - no tax, per interval
	# Charge info strings - no tax, per interval

	free-trial-content-link-view-invoice-aria = View invoice for { $productName }
	# $productName (String) - The name of the subscribed product, e.g. Mozilla VPN
	free-trial-content-link-view-invoice-aria = View invoice for { $productName }

	## $date (Date) - The date the free trial ended (e.g., January 16, 2026)
	# $date (Date) - The date the free trial ended (e.g., January 16, 2026)

Conversation

elizabeth-ilina commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Because

This pull request

Issue that this pull request solves

Checklist

How to review (Optional)

Screenshots (Optional)

Other information (Optional)

Uh oh!

Uh oh!

elizabeth-ilina Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

xlisachan left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

elizabeth-ilina commented Mar 27, 2026 •

edited

Loading

elizabeth-ilina Mar 30, 2026 •

edited

Loading