[MPP-1708] Popup Refactor - Masks Panel

[maxxcrawford]

Summary

Links:

• Jira Tickets:
  • https://mozilla-hub.atlassian.net/browse/MPP-1712
  • https://mozilla-hub.atlassian.net/browse/MPP-1713
  • https://mozilla-hub.atlassian.net/browse/MPP-1714
• Blocked by #461
• L10N PR: https://github.com/mozilla-l10n/fx-private-relay-add-on-l10n/pull/44
• Epic PR #456

Caveats/Not included:

• Toggle/Expanded view of masks (to manage block level of masks)
• Search bar/filter masks for premium masks
• Custom (subdomain'ed) masks generation for premium users

Acceptance Criteria

MPP-1712

• [x] If no aliases are created show placeholder screen: https://www.figma.com/file/NP5tLeIFJeHC5HvaqpLQdp?node-id=144:7504#184844686
• [x] For free users show alias count out of 5.
• [x] Free and Premium users
• [x] Premium show all aliases that they have
• [x] Include loading animation

MPP-1713

• [x] Clicking copy button copies the alias to a user’s clipboard.
• [x] A tag appears after a user clicks saying “Copied”

MPP-1714

• [x] Random Mask creation
• [x] Free and premium users
• [x] If free a user has less than 5 aliases, they should see a button for generate new alias which generates a new random alias
• [x] premium users should always be able to create a new alias
• [x] Show new alias in the list of alias
• [x] show a tag that says “Mask created”
• [x] If a free user has 5 aliases then they should see an upsell button instead of the generate new alias button.
• [x] If a free user has 5 aliases also show a red banner at the top of the add-on indicating they have reached their limit and should upgrade (see designs)

Testing

TBD

Screenshots

(Free Account) No masks created

Free account: 1 mask (with label set)

Free account with maximum masks set (cannot generate more)

Premium account (more than 5 more masks)