Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
wants to merge 17 commits into
base: main
Choose a base branch
from
Open

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

wants to merge 17 commits into from

Conversation

rafeerahman
Copy link
Contributor

@rafeerahman rafeerahman commented Feb 6, 2024 •
edited

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.

@rafeerahman rafeerahman mentioned this pull request Feb 6, 2024
Merged
rafeerahman
rafeerahman commented Feb 6, 2024
View reviewed changes
src/popup.html Outdated Show resolved Hide resolved
rafeerahman
rafeerahman commented Feb 6, 2024
View reviewed changes
src/popup.html Outdated Show resolved Hide resolved
@flodolo flodolo mentioned this pull request Feb 6, 2024
Closed
@lloan lloan mentioned this pull request Feb 6, 2024
Closed
4 tasks
@lloan
Copy link
Contributor

lloan commented Feb 6, 2024

Closed #552 - work will be tracked here.

@rafeerahman
Copy link
Contributor Author

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

lloan
lloan reviewed Feb 9, 2024
View reviewed changes
src/css/global.css
Comment on lines +26 to +28
--borderRadiusXl: 24px;
--borderRadius2xl: 32px;
--borderRadius3xl: 40px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

src/css/popup.css
Comment on lines +57 to +58
min-height: 315px;
max-height: 315px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

src/css/popup.css

.dashboard-info.forwarded-calls-texts,
.dashboard-info.blocked-calls-texts {
padding-left: var(--spacingLg) !important;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@lloan lloan lloan left review comments

@maxxcrawford maxxcrawford Awaiting requested review from maxxcrawford

At least 1 approving review is required to merge this pull request.

Assignees

@lloan lloan

@rafeerahman rafeerahman

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@rafeerahman @lloan