mirror of
https://github.com/mozilla/fxa.git
synced 2025-12-28 07:03:55 +00:00
feat(auth): add churn stay subscribed email
Because: - Want to remind customers that do not have auto-renew set that their subscription is expiring soon and potentially offer them a coupon. This commit: - Adds subscriptionStaySubscribedReminder email Closes #PAY-3366
This commit is contained in:
Reino Muhl
parent
14a6d4f532
commit
8c6d84884d
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 <strong>{ $serviceLastActiveDateOnly }</strong>.
|
||||
subscriptionStaySubscribedReminder-content-line2 = If you’d like to continue using { $productName }, you can reactive your subscription in <a data-l10n-name="subscriptionStaySubscribedReminder-account-settings">Account Settings</a> before <strong{ $serviceLastActiveDateOnly }</strong>. If you need assistance, <a data-l10n-name="subscriptionStaySubscribedReminder-contact-support">contact our Support Team</a>.
|
||||
|
||||
subscriptionStaySubscribedReminder-content-closing = Thanks for being a valued subscriber!
|
||||
|
||||
subscriptionStaySubscribedReminder-churn-title = Want to keep access?
|
||||
subscriptionStaySubscribedReminder-churn-terms = <a data-l10n-name="subscriptionStaySubscribedReminder-churn-terms">Limited terms and restrictions apply</a>
|
||||
|
||||
# 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 }
|
||||
@ -0,0 +1,6 @@
|
||||
{
|
||||
"subject": {
|
||||
"id": "subscriptionStaySubscribedReminder-subject",
|
||||
"message": "<%- productName %> expiry notice"
|
||||
}
|
||||
}
|
||||
@ -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') %>
|
||||
|
||||
<mj-section>
|
||||
<mj-column>
|
||||
<mj-text css-class="text-header">
|
||||
<span data-l10n-id="subscriptionStaySubscribedReminder-title">Your <%- productName %> subscription will expire soon</span>
|
||||
</mj-text>
|
||||
|
||||
<mj-text css-class="text-body">
|
||||
<span data-l10n-id="subscriptionStaySubscribedReminder-content-line1" data-l10n-args="<%= JSON.stringify({productName, serviceLastActiveDateOnly }) %>">
|
||||
Your access to <%- productName %> will end on <strong><%- serviceLastActiveDateOnly %></strong>.
|
||||
</span>
|
||||
</mj-text>
|
||||
|
||||
<mj-text css-class="text-body">
|
||||
<span data-l10n-id="subscriptionStaySubscribedReminder-content-line2" data-l10n-args="<%= JSON.stringify({productName, serviceLastActiveDateOnly, accountSettingsUrl, subscriptionSupportUrl }) %>">
|
||||
If you’d like to continue using <%- productName %>, you can reactive your subscription in <a href="<%- accountSettingsUrl %>" class="link-blue" data-l10n-name="subscriptionStaySubscribedReminder-account-settings">Account Settings</a> before <strong><%- serviceLastActiveDateOnly %></strong>. If you need assistance, <a href="<%- subscriptionSupportUrl %>" class="link-blue" data-l10n-name="subscriptionStaySubscribedReminder-contact-support">contact our Support Team</a>.
|
||||
</span>
|
||||
</mj-text>
|
||||
|
||||
<mj-text css-class="text-body">
|
||||
<span data-l10n-id="subscriptionStaySubscribedReminder-content-closing">Thanks for being a valued subscriber!</span>
|
||||
</mj-text>
|
||||
</mj-column>
|
||||
</mj-section>
|
||||
|
||||
|
||||
<% if (showChurn) { %>
|
||||
<mj-section css-class="container-grey">
|
||||
<mj-column>
|
||||
<mj-text css-class="text-header-two">
|
||||
<span data-l10n-id="subscriptionStaySubscribedReminder-churn-title">Want to keep access?</span>
|
||||
</mj-text>
|
||||
<mj-button css-class="primary-button-sm-subplat" href="<%- ctaButtonUrl %>">
|
||||
<span><%- ctaButtonLabel %></span>
|
||||
</mj-button>
|
||||
<mj-text css-class="text-container-link">
|
||||
<span data-l10n-id="subscriptionStaySubscribedReminder-churn-terms" data-l10n-args="<%= JSON.stringify({churnTermsUrl}) %>">
|
||||
<a href="<%- churnTermsUrl %>" class="link-blue" data-l10n-name="subscriptionStaySubscribedReminder-churn-terms">Limited terms and restrictions apply</a>
|
||||
</span>
|
||||
</mj-text>
|
||||
</mj-column>
|
||||
</mj-section>
|
||||
<% } %>
|
||||
@ -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();
|
||||
@ -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 %>"
|
||||
Loading…
Reference in New Issue
Block a user