Merge branch 'MNTOR-24' of github.com:mozilla/blurts-server into MNTOR-24
* 'MNTOR-24' of github.com:mozilla/blurts-server: more update string move premium to the second half of the file Add note on running Redis locally add comment on settings section remove extra <hr> tag add brand name Premium lint apply updated settings styling, rearrange order on settings page lint lint add environment var MNTOR-1387 - Cancel premium subscription settings option
This commit is contained in:
Joey Zhou
Коммит
9683e4fa84
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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_
|
||||
_**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.
|
||||
|
|
|
|||
|
|
@ -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 <!-- optional -->
|
||||
|
||||
### Environment Variable
|
||||
|
||||
```
|
||||
ENABLED_FEATURE_FLAGS = "premium_subplat_email, free_breaches_hibp"
|
||||
|
||||
|
|
@ -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 <!-- optional -->
|
||||
|
||||
### Environment Variable
|
||||
|
||||
[example | description | pointer to more information | …] <!-- optional -->
|
||||
|
||||
* 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 | …] <!-- optional -->
|
||||
|
||||
* Good, because [argument a]
|
||||
* Good, because [argument b]
|
||||
* Bad, because [argument c]
|
||||
* … <!-- numbers of pros and cons can vary -->
|
||||
* 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 | …] <!-- optional -->
|
||||
### Unleash (self-hosted)
|
||||
|
||||
* Good, because [argument a]
|
||||
* Good, because [argument b]
|
||||
* Bad, because [argument c]
|
||||
* … <!-- numbers of pros and cons can vary -->
|
||||
|
||||
|
||||
* 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 <!-- optional -->
|
||||
|
||||
* [Link type] [Link to ADR] <!-- example: Refined by [ADR-0005](0005-example.md) -->
|
||||
* … <!-- numbers of links can vary -->
|
||||
* [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)
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>} */
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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}'
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче