Skip to content

feat(payments-next): Add Free Trial section to Subscription Management page#20282

Open
elizabeth-ilina wants to merge 1 commit intomainfrom
PAY-3547-add-free-trial-section-to-subscription-management-page
Open

feat(payments-next): Add Free Trial section to Subscription Management page#20282
elizabeth-ilina wants to merge 1 commit intomainfrom
PAY-3547-add-free-trial-section-to-subscription-management-page

Conversation

@elizabeth-ilina
Copy link
Copy Markdown
Contributor

@elizabeth-ilina elizabeth-ilina commented Mar 27, 2026

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:
image image
  • Failed payment method, with and without tax:
image image
  • Trial cancelled:
image
  • Error resubscribing:
image
  • Error cancelling:
image

Mobile:
image

image image image image

Other information (Optional)

Any other information that is important to this pull request.

@elizabeth-ilina 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

const subplatInterval = getSubplatInterval(interval, intervalCount);

//const isPastDue = true;
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TODO: remove before merging.

>
{l10n.getString(
'subscription-management-free-trial-heading',
'Free trials'
Copy link
Copy Markdown
Contributor Author

@elizabeth-ilina elizabeth-ilina Mar 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Comment on lines +6 to +7
subscription-management-free-trial-heading = Free trials
subscription-management-your-free-trials-aria = Your free trials
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@elizabeth-ilina 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

# Heading for mobile only quick links menu
subscription-management-jump-to-heading = Jump to
subscription-management-nav-free-trials = Free trials
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here, potentially update based on https://github.com/mozilla/fxa/pull/20282/changes#r3010922866

…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)
@elizabeth-ilina 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 elizabeth-ilina marked this pull request as ready for review March 30, 2026 19:55
@elizabeth-ilina elizabeth-ilina requested review from a team as code owners March 30, 2026 19:55
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}.`,
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant