MPP-3599 & MPP-3602: Free user onboarding bug fixes #4170
Conversation
| @@ -524,15 +524,14 @@ const Profile: NextPage = () => { | |||
| {/* confetti animation should be shown if user has sent first forwarded email, is a free user, and has not reached the max onboarding step */} | |||
| {isFlagActive(runtimeData.data, "free_user_onboarding") && | |||
| !profile.has_premium && | |||
| profile.forwarded_first_reply && | |||
| profile.onboarding_state < freeOnboardingCelebrationStep && ( | |||
| profile.onboarding_free_state < freeOnboardingCelebrationStep && ( | |||
There was a problem hiding this comment.
(Blocking) With the changes in #4171, this triggers the confetti animation once for existing free users who sign in normally (did not come from onboarding).
There was a problem hiding this comment.
@rafeerahman Good catch. I updated this to only show when onboarding_free_state reaches 3 (which users gets to if they complete or skip onboarding) and we update the onboarding_free_state to 4 once the animation completes (so they don't see it again).
There was a problem hiding this comment.
Works as intended now!
One more thing, I believe we removed the double hyphens in the L10n repo, so the one here and possibly others are grabbing the strings from only pendingTranslations. We should change these in the pendingTranslations.ftl to remove the double hyphens, and in the files they are being used in.
https://github.com/mozilla/fx-private-relay/blob/4e4ebae7bd74b35ba601e1d810a25eaeca33404c/frontend/src/components/dashboard/FreeOnboarding.tsx#L108C7-L108C7
@rafeerahman opening ticket to address that in separate PR. I thought that was addressed with this work here. |
This PR fixes MPP-3599 and MPP-3602
New feature description
On the second step of the Free onboarding, the “See how forwarding works” button text has an extra “+”. This removes that.
No animation is triggered when completing the onboarding process. This animation is now triggered once user completes onboarding.
Screenshot (if applicable)
Second step - removal of +
Confetti animation
How to test
Free user account with
onboarding_free_stateset to 0.free_user_onboardingflag turned on.Checklist (Definition of Done)
/frontend/src/styles/tokens.scss).