Merge pull request #3022 from mozilla/mntor-1387-settings-cancel

MNTOR-1387 - Cancel premium subscription settings option

.env-dist

@@ -114,4 +114,7 @@ GA4_MEASUREMENT_ID=test
 # E2E Tests
 E2E_TEST_BASE_URL=
 E2E_TEST_ACCOUNT_EMAIL=
-E2E_TEST_ACCOUNT_PASSWORD=
+E2E_TEST_ACCOUNT_PASSWORD=
+
+# Settings page
+CANCEL_SUBSCRIPTION_FLOW=true

locales/en/app.ftl

@@ -855,6 +855,7 @@ ad-unit-6-before-you-complete = Before you complete that next signup, use an ema
 -brand-firefox = Firefox
 -brand-fx-monitor = Firefox Monitor
 -brand-mozilla = Mozilla
+-brand-premium = Premium
 -brand-mozilla-foundation = Mozilla Foundation
 -brand-github = GitHub
 -brand-mozilla-vpn = Mozilla VPN

locales/en/settings.ftl

@@ -42,6 +42,12 @@ settings-email-number-of-breaches-info =
        *[other] Appears in { $breachCount } known breaches.
   }
 
+## Cancel Premium subscription
+
+settings-cancel-premium-subscription-title = Cancel { -brand-premium } subscription
+settings-cancel-premium-subscription-info = Your subscription will revert to a free account after the current billing cycle ends. Your privacy protection scan results will be permanently deleted, and you’ll only have data breach monitoring for 1 email address.
+settings-cancel-premium-subscription-link-label = Cancel from your { -brand-fx-account }
+
 ## Deactivate account
 
 settings-deactivate-account-title = Deactivate account

src/appConstants.js

@@ -51,7 +51,8 @@ const optionalEnvVars = [
   'HIBP_BREACH_DOMAIN_BLOCKLIST',
   'LIVE_RELOAD',
   'PORT',
-  'SENTRY_DSN_LEGACY'
+  'SENTRY_DSN_LEGACY',
+  'CANCEL_SUBSCRIPTION_FLOW'
 ]
 
 /** @type {Record<string, string>} */

src/client/css/partials/settings.css

@@ -10,9 +10,13 @@
   color: black;
 }
 
+.settings-section-info {
+  margin-top: 0;
+}
+
 .settings-section-title {
-  font: var(--h4-font);
-  margin: var(--padding-sm) 0 var(--padding-md) 0;
+  margin: var(--padding-sm) 0;
+  font: 700 1rem var(--body-font);
 }
 
 .settings-content {
@@ -74,10 +78,7 @@
 }
 
 .settings-email-item {
-  border: 1px solid var(--gray-10);
-  border-radius: var(--border-radius);
   gap: var(--padding-sm);
-  padding: calc(var(--padding-lg) * 0.75);
   padding-right: var(--padding-lg);
 }
 

src/client/css/variables.css

@@ -20,6 +20,7 @@
   --h2-font: 700 1.75rem/1 metropolis, sans-serif;
   --h3-font: 700 1.25rem/1 metropolis, sans-serif;
   --h4-font: 700 1.125rem/1 metropolis, sans-serif;
+  --body-font: inter, inter-fallback, sans-serif;
   --gray-5: #f9f9fa;
   --gray-10: #e7e7e7;
   --gray-20: #cececf;

src/views/partials/settings.js

@@ -106,6 +106,22 @@ const alertOptions = ({ csrfToken, allEmailsToPrimary }) => `
   </label>
   </div>
 `
+const cancelPremiumSubscription = () => `
+  <hr>
+  <section>
+    <h3 class='settings-section-title'>
+      ${getMessage('settings-cancel-premium-subscription-title')}
+    </h3>
+    <p class='settings-section-info'>${getMessage('settings-cancel-premium-subscription-info')}</p>
+    <a
+      class='settings-link-fxa'
+      href='${AppConstants.FXA_SETTINGS_URL}'
+      target='_blank'
+    >
+      ${getMessage('settings-cancel-premium-subscription-link-label')}
+    </a>
+  </section>
+`
 
 /**
  * @typedef {object} PartialData
@@ -123,24 +139,14 @@ export const settings = data => {
   return `
     <div class='settings js-settings' data-csrf-token='${csrfToken}'>
       <h2 class='settings-title'>${getMessage('settings-page-title')}</h2>
-
+      
       <div class='settings-content'>
-        <!-- Breach alert preferences -->
-        <section>
-          <h3 class='settings-section-title'>
-            ${getMessage('settings-alert-preferences-title')}
-          </h3>
-          ${alertOptions({ csrfToken, allEmailsToPrimary })}
-        </section>
-
-        <hr>
-
         <!-- Monitored email addresses -->
         <section>
           <h3 class='settings-section-title'>
             ${getMessage('settings-email-list-title')}
           </h3>
-          <p>${getMessage('settings-email-limit-info', { limit })}</p>
+          <p class='settings-section-info'>${getMessage('settings-email-limit-info', { limit })}</p>
 
           ${createEmailList(emails, breachCounts)}
           <button
@@ -152,12 +158,23 @@ export const settings = data => {
 
         <hr>
 
+        <!-- Breach alert preferences -->
+        <section>
+          <h3 class='settings-section-title'>
+            ${getMessage('settings-alert-preferences-title')}
+          </h3>
+          ${alertOptions({ csrfToken, allEmailsToPrimary })}
+        </section>
+
+        <!-- Cancel Premium Subscription -->
+        ${AppConstants.CANCEL_SUBSCRIPTION_FLOW ? cancelPremiumSubscription() : '<hr>'}
+
         <!-- Deactivate account -->
         <section>
           <h3 class='settings-section-title'>
             ${getMessage('settings-deactivate-account-title')}
           </h3>
-          <p>${getMessage('settings-deactivate-account-info')}</p>
+          <p class='settings-section-info'>${getMessage('settings-deactivate-account-info')}</p>
           <a
             class='settings-link-fxa'
             href='${AppConstants.FXA_SETTINGS_URL}'