diff --git a/packages/fxa-auth-server/lib/senders/emails/layouts/subscription/index.scss b/packages/fxa-auth-server/lib/senders/emails/layouts/subscription/index.scss index 41a2fc3993..9d0ae48c59 100644 --- a/packages/fxa-auth-server/lib/senders/emails/layouts/subscription/index.scss +++ b/packages/fxa-auth-server/lib/senders/emails/layouts/subscription/index.scss @@ -17,6 +17,14 @@ color: global.$grey-600 !important; } +.text-header-two div { + @extend %text-header-common; + @extend .text-lg; + @extend .mb-6; + font-weight: 700; + color: global.$grey-600 !important; +} + %text-body-common { @extend %text-body-common; @extend .text-md; @@ -33,6 +41,12 @@ @extend .mb-4; } +.text-body-mt-2 div { + @extend %text-body-common; + @extend .mt-2; + text-align: center !important; +} + .text-title { @extend .font-sans; font-size: 18px !important; @@ -167,3 +181,41 @@ .text-footer-automatedEmail { @extend .text-footer; } + +.container-grey { + @extend .mt-6; + @extend .p-4; + max-width: 568px !important; + background-color: global.$grey-50 !important; + border-radius: 16px !important; +} + +.text-container-link div { + @extend .text-link; + font-size: 14px !important; + line-height: 22px !important; + text-align: center !important; +} + +.primary-button-sm-subplat { + max-width: 310px !important; + height: 30px !important; + + td { + height: 30px !important; + background: global.$blue-500 !important; + border-radius: 6px !important; + } + + a { + @extend .font-sans; + @extend .text-sm; + max-width: 310px !important; + background: global.$blue-500 !important; + color: global.$white; + font-weight: 400 !important; + display: unset !important; + padding: global.$s-1 20px !important; + border-radius: 6px !important; + } +} diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/subscriptionStaySubscribedReminder/en.ftl b/packages/fxa-auth-server/lib/senders/emails/templates/subscriptionStaySubscribedReminder/en.ftl new file mode 100644 index 0000000000..8600c46485 --- /dev/null +++ b/packages/fxa-auth-server/lib/senders/emails/templates/subscriptionStaySubscribedReminder/en.ftl @@ -0,0 +1,23 @@ +# Variables +# $productName (String) - The name of the subscribed product, e.g. Mozilla VPN +subscriptionStaySubscribedReminder-subject = { $productName } expiry notice +subscriptionStaySubscribedReminder-title = Your { $productName } subscription will expire soon + +# Variables: +# $productName (String) - The name of the subscribed product, e.g. Mozilla VPN +# $serviceLastActiveDateOnly (String) - The date of last active service, e.g. 01/20/2016 +subscriptionStaySubscribedReminder-content-line1 = Your access to { $productName } will end on { $serviceLastActiveDateOnly }. +subscriptionStaySubscribedReminder-content-line2 = If you’d like to continue using { $productName }, you can reactive your subscription in Account Settings before . If you need assistance, contact our Support Team. + +subscriptionStaySubscribedReminder-content-closing = Thanks for being a valued subscriber! + +subscriptionStaySubscribedReminder-churn-title = Want to keep access? +subscriptionStaySubscribedReminder-churn-terms = Limited terms and restrictions apply + +# Variables: +# $churnTermsUrl (String) - URL to the terms and restrictions page applied to this promotion +subscriptionStaySubscribedReminder-churn-terms-plaintext = Limited terms and restrictions apply: { $churnTermsUrl } + +# Variables: +# $subscriptionSupportUrl (String) - URL to the subscription products support page +subscriptionStaySubscribedReminder-content-support-plaintext = Contact our Support Team: { $subscriptionSupportUrl } diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/subscriptionStaySubscribedReminder/includes.json b/packages/fxa-auth-server/lib/senders/emails/templates/subscriptionStaySubscribedReminder/includes.json new file mode 100644 index 0000000000..53f8216de6 --- /dev/null +++ b/packages/fxa-auth-server/lib/senders/emails/templates/subscriptionStaySubscribedReminder/includes.json @@ -0,0 +1,6 @@ +{ + "subject": { + "id": "subscriptionStaySubscribedReminder-subject", + "message": "<%- productName %> expiry notice" + } +} diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/subscriptionStaySubscribedReminder/index.mjml b/packages/fxa-auth-server/lib/senders/emails/templates/subscriptionStaySubscribedReminder/index.mjml new file mode 100644 index 0000000000..d9ef05f2f6 --- /dev/null +++ b/packages/fxa-auth-server/lib/senders/emails/templates/subscriptionStaySubscribedReminder/index.mjml @@ -0,0 +1,48 @@ +<%# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. If a copy of the MPL was not distributed with this +# file, You can obtain one at http://mozilla.org/MPL/2.0/. %> + +<%- include ('/partials/icon/index.mjml') %> + + + + + Your <%- productName %> subscription will expire soon + + + + + Your access to <%- productName %> will end on <%- serviceLastActiveDateOnly %>. + + + + + + If you’d like to continue using <%- productName %>, you can reactive your subscription in Account Settings before <%- serviceLastActiveDateOnly %>. If you need assistance, contact our Support Team. + + + + + Thanks for being a valued subscriber! + + + + + +<% if (showChurn) { %> + + + + Want to keep access? + + + <%- ctaButtonLabel %> + + + + Limited terms and restrictions apply + + + + +<% } %> diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/subscriptionStaySubscribedReminder/index.stories.ts b/packages/fxa-auth-server/lib/senders/emails/templates/subscriptionStaySubscribedReminder/index.stories.ts new file mode 100644 index 0000000000..828033e394 --- /dev/null +++ b/packages/fxa-auth-server/lib/senders/emails/templates/subscriptionStaySubscribedReminder/index.stories.ts @@ -0,0 +1,29 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +import { Meta } from '@storybook/html'; +import { subplatStoryWithProps } from '../../storybook-email'; + +export default { + title: 'SubPlat Emails/Templates/subscriptionStaySubscribedReminder', +} as Meta; + +const createStory = subplatStoryWithProps( + 'subscriptionStaySubscribedReminder', + 'Sent to remind a user their subscriptions is expiring soon.', + { + productName: 'Firefox Fortress', + serviceLastActiveDateOnly: 'July 15, 2025', + accountSettingsUrl: 'http://localhost:3030/settings', + subscriptionSupportUrl: 'http://localhost:3030/support', + churnTermsUrl: 'http://localhost:3030/support', + productIconURLNew: + 'https://cdn.accounts.firefox.com/product-icons/mozilla-vpn-email.png', + ctaButtonLabel: 'Stay subscribed and save 20%', + ctaButtonUrl: 'http://localhost:3030/renew', + showChurn: true, + } +); + +export const SubscriptionReactivation = createStory(); diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/subscriptionStaySubscribedReminder/index.txt b/packages/fxa-auth-server/lib/senders/emails/templates/subscriptionStaySubscribedReminder/index.txt new file mode 100644 index 0000000000..a64afb9475 --- /dev/null +++ b/packages/fxa-auth-server/lib/senders/emails/templates/subscriptionStaySubscribedReminder/index.txt @@ -0,0 +1,19 @@ +subscriptionStaySubscribedReminder-subject = "<%- productName %> expiry notice" + +subscriptionStaySubscribedReminder-title = "Your <%- productName %> subscription will expire soon" + +subscriptionStaySubscribedReminder-content-line1 = "Your access to <%- productName %> will end on <%- serviceLastActiveDateOnly %>." + +subscriptionStaySubscribedReminder-content-line2 = "If you’d like to continue using <%- productName %>, you can reactive your subscription in Account Settings before <%- serviceLastActiveDateOnly %>. If you need assistance, contact our Support Team." + +subscriptionStaySubscribedReminder-content-closing = "Thanks for being a valued subscriber!" + +<% if (showChurn) { %> +subscriptionStaySubscribedReminder-churn-title = "Want to keep access?" + +<%- ctaButtonLabel %>: <%- ctaButtonUrl %> + +subscriptionStaySubscribedReminder-churn-terms-plaintext = "Limited terms and restrictions apply: <%- churnTermsUrl %>" +<% } %> + +subscriptionStaySubscribedReminder-content-support-plaintext = "Contact our Support Team: <%- subscriptionSupportUrl %>"