Show users how to opt in to new Premium filter lists
Background / User story
As a new Premium user, I expect that the features I paid for to work straight out of the box, or that I have a clear way for turning them on and benefitting from them.
We're introducing a new Premium list as part of #1347 (closed). As this list is not turned on by default for subscribers, and we want to make sure they understand the impact of turning it on, we want to show them a mini-onboarding.
As a result, we want to have a dedicated landing page within the extension, that can be linked to from the ABP website. When a new Premium user completes the purchase flow, a confirmation message is shown as well as a CTA that encourages the user to finish their Premium setup. Once a user clicks on the CTA on the ABP website, the extension landing page opens and the user can opt in to Premium filter lists that aren't enabled by default, or turn off those that are.
This onboarding page packaged with the extension will also serve as a basis for future onboarding needs. Currently, aside from a Welcome email, Premium users don't receive any sort of information about what they can do with their new subscription post-purchase.
What to change
- Design: https://www.figma.com/file/mU4E9k2cSoKgUBEeke51yU/ABP-Premium?type=design&node-id=3956-21621&mode=design&t=10zvvrQsJPaLjx5w-0
- Spec: spec!422 (merged) (except trigger for opening the Premium onboarding page)
- Good to know: This issue references strictly the onboarding page, not how the feature is made available in the Settings page;
- If the translations cannot be done within the 6-week cycle, we can release in English only and add translations at a later point in time;
Hints for testers
- This change doesn't contain the trigger for opening the Premium onboarding page (see #1453 (closed)).
- This change doesn't contain the new cookie filter list yet (see #1454 (closed)), so the checkbox for enabling it doesn't work yet. In the meantime, you can change the following line in the build's premium-onboarding.html file to have the checkbox refer to the existing cookie filter list instead:
- <io-checkbox data-feature="cookies-premium" disabled></io-checkbox> + <io-checkbox data-feature="cookies" disabled></io-checkbox>
Hints for translators
Added new translation file "premium-onboarding.json".