Distinguish between free and premium users in the extension

Background / User story

We will be offering our users the option to upgrade to a premium version of ABP, with more features that aim to add more benefits to every day usage.

One of the pre-requisites for this is being able to differentiate between a free and premium user in the extension. Whenever a user opens up the extension, they should clearly see which "plan" they're on.

More background info in Notion >

What to change

• Design:
  Screenshots for internal Figma links are attached below.
  • Bubble UI:
    • Free users: https://www.figma.com/file/mU4E9k2cSoKgUBEeke51yU/ABP-Premium?node-id=413%3A1831
    • Premium users: https://www.figma.com/file/mU4E9k2cSoKgUBEeke51yU/ABP-Premium?node-id=413%3A1808
  • Settings page:
    • Free users: https://www.figma.com/file/mU4E9k2cSoKgUBEeke51yU/ABP-Premium?node-id=181%3A2045
    • Premium users: https://www.figma.com/file/mU4E9k2cSoKgUBEeke51yU/ABP-Premium?node-id=433%3A1941
• Spec: https://gitlab.com/eyeo/specs/spec/-/merge_requests/387
• Legal: Not needed
• Development: (Mention any implementation details here)

Hints for testers

• The changes for this ticket had been merged into feature-premium-1.0 feature branch.
• In order to change the premium state in the extension, we can run the following in the console of the options page:

async function togglePremium(value)
{
  if (typeof(value) !== "boolean")
    value = !( await browser.runtime.sendMessage({type: "prefs.get", key:"premium_is_active"}));
  browser.runtime.sendMessage({type: "prefs.set", key: "premium_is_active", value})
}

togglePremium();

• Although, currently, the pages for "manage" and "upgrade" URLs doesn't exist, as websites is still working on it, we can test that the URLs opened in a new tab correspond to the ones that are defined in the specs.

Hints for translators

• The changes for this ticket had been merged into feature-premium-1.0 feature branch.
• added strings:
  • desktop-options
    • "options_premium_upgrade_description"
    • "options_signin_button"
    • "options_upgrade_button"
    • "options_premium_manage"
  • popup
    • "premium_upgrade"