From a7448759fc479f6346fdec45aad43e660d5373e6 Mon Sep 17 00:00:00 2001 From: Kaitlyn Date: Thu, 4 May 2023 16:58:10 -0400 Subject: [PATCH 01/13] MNTOR-1387 - Cancel premium subscription settings option --- locales/en/settings.ftl | 5 +++++ src/appConstants.js | 3 ++- src/views/partials/settings.js | 17 +++++++++++++++++ 3 files changed, 24 insertions(+), 1 deletion(-) diff --git a/locales/en/settings.ftl b/locales/en/settings.ftl index fbb910d32..f34426bd4 100644 --- a/locales/en/settings.ftl +++ b/locales/en/settings.ftl @@ -42,6 +42,11 @@ settings-email-number-of-breaches-info = *[other] Appears in { $breachCount } known breaches. } +## Cancel Premium subscription + +settings-cancel-premium-subscription-title = Cancel 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-firefox } settings ## Deactivate account settings-deactivate-account-title = Deactivate account diff --git a/src/appConstants.js b/src/appConstants.js index 88802cb95..8c1922c7a 100644 --- a/src/appConstants.js +++ b/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} */ diff --git a/src/views/partials/settings.js b/src/views/partials/settings.js index f0828280e..8ce6d5083 100644 --- a/src/views/partials/settings.js +++ b/src/views/partials/settings.js @@ -106,6 +106,22 @@ const alertOptions = ({ csrfToken, allEmailsToPrimary }) => ` ` +const cancelPremiumSubscription = () => ` +
+

+ ${getMessage('settings-cancel-premium-subscription-title')} +

+

${getMessage('settings-cancel-premium-subscription-info')}

+ + ${getMessage('settings-cancel-premium-subscription-link-label')} + +
+
+` /** * @typedef {object} PartialData @@ -151,6 +167,7 @@ export const settings = data => {
+ ${AppConstants.CANCEL_SUBSCRIPTION_FLOW ? cancelPremiumSubscription() : '
'}
From 25cec4bc979e20c05b78cead6d3d3824b2fe17a4 Mon Sep 17 00:00:00 2001 From: Kaitlyn Date: Fri, 5 May 2023 11:35:33 -0400 Subject: [PATCH 02/13] add environment var --- .env-dist | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/.env-dist b/.env-dist index 06e34aa3d..3b80746d5 100755 --- a/.env-dist +++ b/.env-dist @@ -114,4 +114,7 @@ GA4_MEASUREMENT_ID=test # E2E Tests E2E_TEST_BASE_URL= E2E_TEST_ACCOUNT_EMAIL= -E2E_TEST_ACCOUNT_PASSWORD= \ No newline at end of file +E2E_TEST_ACCOUNT_PASSWORD= + +# Settings page +CANCEL_SUBSCRIPTION_FLOW=true \ No newline at end of file From 327554bd0f8c07419290eadde72d204ccadd789c Mon Sep 17 00:00:00 2001 From: Kaitlyn Date: Fri, 5 May 2023 11:36:22 -0400 Subject: [PATCH 03/13] lint --- .env-dist | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.env-dist b/.env-dist index 3b80746d5..6f6bb6d6a 100755 --- a/.env-dist +++ b/.env-dist @@ -117,4 +117,4 @@ E2E_TEST_ACCOUNT_EMAIL= E2E_TEST_ACCOUNT_PASSWORD= # Settings page -CANCEL_SUBSCRIPTION_FLOW=true \ No newline at end of file +CANCEL_SUBSCRIPTION_FLOW=true From 378b923c2fdce731d600bd5ac3efe4ac3a6fae70 Mon Sep 17 00:00:00 2001 From: Kaitlyn Date: Fri, 5 May 2023 11:37:54 -0400 Subject: [PATCH 04/13] lint --- locales/en/settings.ftl | 1 + 1 file changed, 1 insertion(+) diff --git a/locales/en/settings.ftl b/locales/en/settings.ftl index f34426bd4..aca28b344 100644 --- a/locales/en/settings.ftl +++ b/locales/en/settings.ftl @@ -47,6 +47,7 @@ settings-email-number-of-breaches-info = settings-cancel-premium-subscription-title = Cancel 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-firefox } settings + ## Deactivate account settings-deactivate-account-title = Deactivate account From 643a1492f7fbf3403ac61177f310ebff23e10b72 Mon Sep 17 00:00:00 2001 From: Kaitlyn Date: Fri, 5 May 2023 12:05:31 -0400 Subject: [PATCH 05/13] apply updated settings styling, rearrange order on settings page --- src/client/css/partials/settings.css | 12 +++++++----- src/client/css/variables.css | 1 + src/views/partials/settings.js | 28 ++++++++++++++-------------- 3 files changed, 22 insertions(+), 19 deletions(-) diff --git a/src/client/css/partials/settings.css b/src/client/css/partials/settings.css index ce6910834..5c1e2622d 100644 --- a/src/client/css/partials/settings.css +++ b/src/client/css/partials/settings.css @@ -10,9 +10,14 @@ color: black; } +.settings-section-info { + margin-top: 0; +} .settings-section-title { - font: var(--h4-font); - margin: var(--padding-sm) 0 var(--padding-md) 0; + font-family: var(--body-font); + margin: var(--padding-sm) 0; + font-weight: 700; + font-size: 1rem; } .settings-content { @@ -74,10 +79,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); } diff --git a/src/client/css/variables.css b/src/client/css/variables.css index 251e29a38..c772005b0 100644 --- a/src/client/css/variables.css +++ b/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; diff --git a/src/views/partials/settings.js b/src/views/partials/settings.js index 8ce6d5083..cc63a82f2 100644 --- a/src/views/partials/settings.js +++ b/src/views/partials/settings.js @@ -111,7 +111,7 @@ const cancelPremiumSubscription = () => `

${getMessage('settings-cancel-premium-subscription-title')}

-

${getMessage('settings-cancel-premium-subscription-info')}

+

${getMessage('settings-cancel-premium-subscription-info')}

{ return `

${getMessage('settings-page-title')}

- +
- -
-

- ${getMessage('settings-alert-preferences-title')} -

- ${alertOptions({ csrfToken, allEmailsToPrimary })} -
- -
-

${getMessage('settings-email-list-title')}

-

${getMessage('settings-email-limit-info', { limit })}

+

${getMessage('settings-email-limit-info', { limit })}

${createEmailList(emails, breachCounts)}
+
+ + +
+

+ ${getMessage('settings-alert-preferences-title')} +

+ ${alertOptions({ csrfToken, allEmailsToPrimary })} +
+
${AppConstants.CANCEL_SUBSCRIPTION_FLOW ? cancelPremiumSubscription() : '
'} @@ -174,7 +174,7 @@ export const settings = data => {

${getMessage('settings-deactivate-account-title')}

-

${getMessage('settings-deactivate-account-info')}

+

${getMessage('settings-deactivate-account-info')}

Date: Fri, 5 May 2023 12:08:46 -0400 Subject: [PATCH 06/13] lint --- src/client/css/partials/settings.css | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/client/css/partials/settings.css b/src/client/css/partials/settings.css index 5c1e2622d..e21237d8e 100644 --- a/src/client/css/partials/settings.css +++ b/src/client/css/partials/settings.css @@ -13,11 +13,10 @@ .settings-section-info { margin-top: 0; } + .settings-section-title { - font-family: var(--body-font); - margin: var(--padding-sm) 0; - font-weight: 700; - font-size: 1rem; + margin: var(--padding-sm) 0; + font: 700 1rem var(--body-font); } .settings-content { From 748a3588ad55f3328707b0253178506567d27e37 Mon Sep 17 00:00:00 2001 From: Kaitlyn Date: Fri, 5 May 2023 12:12:00 -0400 Subject: [PATCH 07/13] add brand name Premium --- locales/en/app.ftl | 1 + locales/en/settings.ftl | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/locales/en/app.ftl b/locales/en/app.ftl index 0c1808543..21e47c933 100644 --- a/locales/en/app.ftl +++ b/locales/en/app.ftl @@ -8,6 +8,7 @@ -product-short-name = Monitor -brand-name = Firefox -brand-Mozilla = Mozilla +-brand-premium = Premium -brand-HIBP = Have I Been Pwned -brand-fxa = Firefox Account -brand-pocket = Pocket diff --git a/locales/en/settings.ftl b/locales/en/settings.ftl index aca28b344..5919019f6 100644 --- a/locales/en/settings.ftl +++ b/locales/en/settings.ftl @@ -44,7 +44,7 @@ settings-email-number-of-breaches-info = ## Cancel Premium subscription -settings-cancel-premium-subscription-title = 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-firefox } settings From 8927be762a8693f5dc2e91251b4e8329971c2d98 Mon Sep 17 00:00:00 2001 From: Kaitlyn Date: Fri, 5 May 2023 12:14:13 -0400 Subject: [PATCH 08/13] remove extra
tag --- src/views/partials/settings.js | 29 ++++++++++++++--------------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/src/views/partials/settings.js b/src/views/partials/settings.js index cc63a82f2..a86937f8c 100644 --- a/src/views/partials/settings.js +++ b/src/views/partials/settings.js @@ -107,20 +107,20 @@ const alertOptions = ({ csrfToken, allEmailsToPrimary }) => `
` const cancelPremiumSubscription = () => ` -
-

- ${getMessage('settings-cancel-premium-subscription-title')} -

-

${getMessage('settings-cancel-premium-subscription-info')}

- - ${getMessage('settings-cancel-premium-subscription-link-label')} - -
-
+
+
+

+ ${getMessage('settings-cancel-premium-subscription-title')} +

+

${getMessage('settings-cancel-premium-subscription-info')}

+ + ${getMessage('settings-cancel-premium-subscription-link-label')} + +
` /** @@ -166,7 +166,6 @@ export const settings = data => { ${alertOptions({ csrfToken, allEmailsToPrimary })}
-
${AppConstants.CANCEL_SUBSCRIPTION_FLOW ? cancelPremiumSubscription() : '
'} From 683f6d8c9405383858271f199268cb551fdb9708 Mon Sep 17 00:00:00 2001 From: Kaitlyn Date: Fri, 5 May 2023 12:16:39 -0400 Subject: [PATCH 09/13] add comment on settings section --- src/views/partials/settings.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/views/partials/settings.js b/src/views/partials/settings.js index a86937f8c..4208e87b0 100644 --- a/src/views/partials/settings.js +++ b/src/views/partials/settings.js @@ -166,6 +166,7 @@ export const settings = data => { ${alertOptions({ csrfToken, allEmailsToPrimary })} + ${AppConstants.CANCEL_SUBSCRIPTION_FLOW ? cancelPremiumSubscription() : '
'} From 39ec0871d40b1f10352316d4a2b68de5e5accd28 Mon Sep 17 00:00:00 2001 From: Vincent Date: Wed, 10 May 2023 11:34:44 +0200 Subject: [PATCH 10/13] Add note on running Redis locally --- README.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index a8e8ff7a4..906c18bc7 100644 --- a/README.md +++ b/README.md @@ -176,4 +176,10 @@ If you encounter issues with Heroku deploys, be sure to check your environment v _**TODO:** add full deploy process similar to Relay_ -_**TODO:** consider whether we can re-enable Heroku Review Apps_ \ No newline at end of file +_**TODO:** consider whether we can re-enable Heroku Review Apps_ + +## Preserve sessions in local development + +Sessions by default are stored in-memory, which means that when the server restarts (e.g. because you made a code change), you will have to log in again. + +To avoid this hassle, you can install and run [Redis](https://redis.io/), which by default runs on `redis://localhost:6379`. Use that value for `REDIS_URL` in your `.env` file to preserve your sessions across server restarts. From 8710a9916a0c94201207701948bb8f4c419f70d3 Mon Sep 17 00:00:00 2001 From: Kaitlyn Date: Wed, 10 May 2023 20:41:04 -0400 Subject: [PATCH 11/13] move premium to the second half of the file --- locales/en/app.ftl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/locales/en/app.ftl b/locales/en/app.ftl index 21e47c933..8e89987d4 100644 --- a/locales/en/app.ftl +++ b/locales/en/app.ftl @@ -8,7 +8,6 @@ -product-short-name = Monitor -brand-name = Firefox -brand-Mozilla = Mozilla --brand-premium = Premium -brand-HIBP = Have I Been Pwned -brand-fxa = Firefox Account -brand-pocket = Pocket @@ -856,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 From 268ad578ca120271b1739585bf0ebcf741026de0 Mon Sep 17 00:00:00 2001 From: Kaitlyn Date: Thu, 11 May 2023 10:24:45 -0400 Subject: [PATCH 12/13] update string --- locales/en/settings.ftl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/locales/en/settings.ftl b/locales/en/settings.ftl index 5919019f6..b651eea06 100644 --- a/locales/en/settings.ftl +++ b/locales/en/settings.ftl @@ -46,7 +46,7 @@ settings-email-number-of-breaches-info = 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-firefox } settings +settings-cancel-premium-subscription-link-label = Cancel from your { -brand-fx-account } ## Deactivate account From 2d53a934907ce3d60c7423c46b04a1e3cf03e3ce Mon Sep 17 00:00:00 2001 From: Joey Zhou Date: Thu, 11 May 2023 22:45:23 -0700 Subject: [PATCH 13/13] more --- docs/adr/0005-feature-flags.md | 64 +++++++++++++++++----------------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/docs/adr/0005-feature-flags.md b/docs/adr/0005-feature-flags.md index 1f41a3bd6..efa908ec5 100644 --- a/docs/adr/0005-feature-flags.md +++ b/docs/adr/0005-feature-flags.md @@ -83,6 +83,20 @@ Tagging refers to the ability to attach arbitrary key:value pairs to a feature f ## Considered Options ### Environment Variables + +### Unleashed Open Source Feature Flag (self host) + +### Unleased (managed cloud) + +## Decision Outcome + +TBD + + +## Pros and Cons of the Options + +### Environment Variable + ``` ENABLED_FEATURE_FLAGS = "premium,party-mode,feature-x" @@ -95,24 +109,6 @@ const confettiScript = isFlagEnabled('party-mode') : ""; ``` -### Unleashed Open Source Feature Flag (self host) - -### Unleased (managed cloud) - - -... - -## Decision Outcome - -TBD - - -## Pros and Cons of the Options - -### Environment Variable - -[example | description | pointer to more information | …] - * Good, because it's the easiest/quickest way to implement feature flags * Good, because the changes can be easily tested in separate environments, programmatically * Good, because the changes can be scalable (by simply adding and subtracting from the env var array) @@ -121,25 +117,29 @@ TBD * Bad, because we will become dependent on SRE to make any changes in stage and production environment. However, it's not too bad because we will likely have to involve SRE when releasing to production anyways, and during release is when we will be deciding and modifying the environment variables. * Bad, because the "implementation" is limited to the current repo. In a world where we have multiple repos serving different parts of the app, there's no easy way to share -### [option 2] +### Unleash (Cloud) -[example | description | pointer to more information | …] -* Good, because [argument a] -* Good, because [argument b] -* Bad, because [argument c] -* … +* Good, because set up is minimized +* Good, because it is manged so we have support when things fall apart, relatively worry-free +* Good, because new features get added without costing us valuable engineering time +* Bad, because we have to pay and probably sign a contract +* Bad, because we adds an additonal dependency -### [option 3] -[example | description | pointer to more information | …] +### Unleash (self-hosted) -* Good, because [argument a] -* Good, because [argument b] -* Bad, because [argument c] -* … + + +* Good, because we have visibility into the entire stack +* Good, because it is more flexible, we can pick and choose what we need +* Good, because it's open source and we can fork / modify features +* Bad, because we need more support from SRE +* Bad, because we have to keep up with open source development +* Bad, because we won't have the support that a paying customer would get, have to rely on Github issues mainly for support ## Links -* [Link type] [Link to ADR] -* … +* [Unleash: Open source](https://github.com/Unleash/unleash) +* [Unleash: Hosted](https://www.getunleash.io/) +* [Feature Flags in Next.js with iron-session](https://doist.dev/posts/feature-flags-iron-session-nextjs) \ No newline at end of file