MPP-3688, MPP-3689 and MPP-3690: Phones panel, dashboard switching, and stats

[rafeerahman]

This PR is for MPP-3688 and MPP-3689

L10N: mozilla-l10n/fx-private-relay-add-on-l10n#53

New feature description

Creates a new phone panel, a tab switcher for email masks and phone masks, and a phone stats page.

Screenshot (if applicable)

MPP-3688 and MPP-3689

MPP-3690

Non-premium users or premium users with no phones plan

Premium users who have not activated their phone mask

Unavailable in country

How to test

MPP-3688

If user has an active number

• Shows the user the active number
• Allows the user to copy that number as 3055555555 instead of the way it is rendered
• Allows the user to set forwarding/blocking state
• Shows user the number they’re forwarding to
• Shows user the date the mask was created

If user does not have an active phone number

• Show the user an ‘active your phone mask’ panel with a link to the dashboard

If user does not have phone premium

• Show the user a panel that prompts them to get phone number masking service. CTA takes them to upgrade flow.

If the user is from a NON-US/CA region

• Show user a panel that prompts them to join the waitlist Sign up for updates

MPP-3689

• Open add-on
• Switcher correctly shows the email mask content when switching to Email
• Switcher correctly shows the phone mask content when switching to Phone
• Add-on knows what tab is currently active

MPP-3690

• Open add-on
• Stats icon is now found in footer of panel shown when looking at email and phone panels
• Clicking on See stats while in Email or Phone panel takes you to the appropriate stats.
• Clicking on Go back link will take you to the appropriate place based on context.
• If user does not have an active phone number
  • Show the user an ‘active your phone mask’ panel with a link to the dashboard
• If user does not have phone premium
  • Show the user a panel that prompts them to get phone number masking service. CTA takes them to upgrade flow.
• If the user is from a NON-US/CA region
  • Show user a panel that prompts them to join the waitlist Sign up for updates

Checklist

• l10n changes have been submitted to the l10n repository, if any.
• All acceptance criteria are met.
• All UI revisions follow the coding standards, and use Protocol tokens where applicable (see /frontend/src/styles/tokens.scss).
• Commits in this PR are minimal and have descriptive commit messages.

[lloan]

Closed #552 - work will be tracked here.

[rafeerahman]

Noting here from UX sync, TODO: remove the stats footer from upgrade states

[lloan]

question (non-blocking): Do we need these?

[lloan]

question (non-blocking): Why did this change? Just curious.

[rafeerahman]

Removes the second scroll bar that appears if the height is bigger in the emails panel

[lloan]

question (non-blocking): Should we comment why we're using !important? Do we need this or can we increase specificity?

[rafeerahman]

The padding there was getting overridden by .dashboard-stats-list.phones-stats li { padding-left: 0; ... , so I added the !important