MNTOR-3057 - Cancel flow discount callout #4635

codemist · 2024-06-05T14:29:19Z

References:

Jira: MNTOR-3057
Figma: https://www.figma.com/design/DTbmXzCQCw2PxXpHQW8yfW/Monitor-MVP-Enhancements?node-id=1157-25611&t=CyXrO2sT6Vra9psg-0

Description

The flags CancellationFlow, ConfirmCancellation and DiscountCouponNextThreeMonths are required. You'll also need the CURRENT_COUPON_CODE_ID env var set, which can be found in this ticket: https://mozilla-hub.atlassian.net/browse/MNTOR-3057?focusedCommentId=895742.

With account that's subscribed to premium, go through the cancellation flow and the 30% off discount state should be visible. Selecting the CTA should output a fxa_apply_coupon_code_success in your server logs, and you should be taken to the all-set dialog state.

Screenshot (if applicable)

Screen.Recording.2024-06-13.at.3.34.02.PM.mov

How to test

Checklist (Definition of Done)

Localization strings (if needed) have been added.
Commits in this PR are minimal and have descriptive commit messages.
I've added or updated the relevant sections in readme and/or code comments
I've added a unit test to test for potential regressions of this bug.
If this PR implements a feature flag or experimentation, the Ship Behind Feature Flag status in Jira has been set
Product Owner accepted the User Story (demo of functionality completed) or waived the privilege.
All acceptance criteria are met.
Jira ticket has been updated (if needed) to match changes made during the development process.
Jira ticket has been updated (if needed) with suggestions for QA when this PR is deployed to stage.

github-actions · 2024-06-05T14:47:21Z

Preview URL 🚀 : https://blurts-server-pr-4635-mgjlpikfea-uk.a.run.app

mansaj

Overall looking good to me, tests are breaking due to the console logs I believe.
I haven't had the chance to manually test the UI e2e, will do

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/CancelFlow.tsx

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/actions.ts

flozia · 2024-06-17T12:24:53Z

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/CancelFlow.tsx

+
+  const discountedNext3Months: DiscountData = {
+    headline: l10n.getString("settings-unsubscribe-dialog-promotion-cta", {
+      discount_percentage_num: "30%",


Question: Is it OK to pass the % sign here or should this be part of the localized string?

flozia · 2024-06-17T12:32:01Z

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/CancelFlow.tsx

+  const [primaryCta, setPrimaryCta] = useState<ReactElement>();
+  const [ctaSubtitle, setCtaSubtitle] = useState<ReactElement>();


React component should not go into state: What Shouldn’t Go in State?. Since the entire component rerenders when you update step with setStep you can just assign primaryCta and ctaSubtitle to a variable depending on the current step.

Ah gotcha! I previously used state because in the old nimbus experiments implementation it seemed like we wanted to account for different variations of the discount code step. Good to know though. 06d0d4b

flozia · 2024-06-17T12:34:26Z

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/CancelFlow.tsx

+    // Current experiment
+    // Note: Opted to use state here to support future experiments


As mentioned above, I don’t think you would need to store the elements in state.

Fixed in 06d0d4b

flozia · 2024-06-17T12:37:59Z

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/CancelFlow.tsx

+          />
+        </video>
+        {/* Fall back to the image if the video formats are not supported: */}
+        {/* The .staticAlternative class ensures that this image will only be shown if the user has prefers-reduced-motion on */}


Praise: Nice!

codemist · 2024-06-17T22:50:39Z

...p/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/CancelFlow.module.scss

+.goToDashboardCta {
+  margin-top: $spacing-lg;
+  font: $text-body-md;
+  font-weight: 500;
+  border: 0;
+  padding: $spacing-md $spacing-lg;
+  border-radius: $border-radius-md;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+  text-align: center;
+  text-decoration: none;
+  color: $color-white;
+  background-color: $color-blue-50;
+
+  &:hover {
+    background-color: $color-blue-60;
+  }
+
+  &:focus {
+    outline: $border-focus-width solid $color-blue-30;
+  }
+}
+


I'd use the styling from Button here but alas, "Go to dashboard" functions as an internal link and I had to use the TelemetryLink component which does not use the Button, hence the custom styling.

flozia · 2024-06-18T11:08:38Z

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/CancelFlow.tsx

+          className={`
+${styles.cancellationIllustrationWrapper}
+${styles.staticAlternative}
+`}


Formatting: Not sure why the linter is not picking up on this, but the formatting seems to be off here?

flozia · 2024-06-18T11:11:28Z

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/CancelFlow.tsx

+
+  const checkCouponCode = async () => {
+    const result = await onCheckUserHasCurrentCouponSet();
+    if (typeof result.success === "boolean") {


Just checking for a boolean here might not be enough. It’s safer to explicitly check if result.success is also truthy.

mansaj

Thanks for the fix, lgtm on the calls

mansaj · 2024-06-18T14:32:25Z

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/CancelFlow.tsx

+  /* c8 ignore start */
+  const handleApplyCouponCode = async () => {
+    const result = await onApplyCouponCode();
+    if (result?.success) {


I think this can be simplified as: setCouponSuccess(!!result?.success);

jespy2

LGTM--no additional comments

github-actions · 2024-06-19T14:26:23Z

Cleanup completed - database 'blurts-server-pr-4635' destroyed, cloud run service 'blurts-server-pr-4635' destroyed

codemist changed the base branch from main to MNTOR-3272 June 6, 2024 15:48

codemist changed the base branch from MNTOR-3272 to MNTOR-3271 June 6, 2024 15:50

codemist changed the base branch from MNTOR-3271 to MNTOR-3272 June 6, 2024 15:52

codemist changed the base branch from MNTOR-3272 to main June 6, 2024 20:57

codemist force-pushed the mntor-3057 branch from de1d31c to 00bac65 Compare June 7, 2024 19:39

codemist changed the base branch from main to MNTOR-3272 June 7, 2024 19:39

codemist changed the base branch from MNTOR-3272 to main June 7, 2024 19:39

codemist changed the base branch from main to MNTOR-3272 June 7, 2024 19:40

codemist force-pushed the mntor-3057 branch from 6c452d1 to 84ab2aa Compare June 10, 2024 21:28

Base automatically changed from MNTOR-3272 to main June 12, 2024 20:49

codemist added 10 commits June 13, 2024 09:48

add dialog strings

e07fa0b

add limitations apply strings

93791ea

add both experiment data

8f2c383

reorg css

7e846c8

ignore dependency array

3e168d0

use handler for applycouponcode func

1184403

test endpoint

bfc1f70

add you're all set animation

4fca954

add images

c946849

check that the code application is successful

f9cfe49

codemist force-pushed the mntor-3057 branch from 33b962f to f9cfe49 Compare June 13, 2024 13:49

codemist marked this pull request as ready for review June 13, 2024 13:52

codemist requested a review from flodolo as a code owner June 13, 2024 13:52

flodolo approved these changes Jun 13, 2024

View reviewed changes

codemist added 5 commits June 13, 2024 09:59

add go back to dashboard btn

a4dba60

always show the first dialog state

c26d03c

add media query to discount cta

6ff83a5

remove animationpath

19f6647

check that a user already has a coupon set

d65b71d

mansaj requested changes Jun 13, 2024

View reviewed changes

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/CancelFlow.tsx Outdated Show resolved Hide resolved

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/actions.ts Outdated Show resolved Hide resolved

codemist added 6 commits June 14, 2024 10:21

use flags instead of experiment

f3691a9

Add animation switch

d3eae57

remove nimbus sticking to flag

a9973f4

do not import from the table level

f63c3a2

nit: whitespace

7f7bdbc

mock actions.ts func in jest

806376e

codemist requested a review from flozia June 14, 2024 15:40

fix animation switch dialog state

b901c9e

flozia reviewed Jun 17, 2024

View reviewed changes

dont pass reactelem into state

06d0d4b

codemist requested a review from flozia June 17, 2024 15:37

add unit tests

07a4ccb

codemist requested review from mansaj and jespy2 June 17, 2024 22:48

codemist commented Jun 17, 2024

View reviewed changes

remove cmted out code

7640ce6

codemist force-pushed the mntor-3057 branch from ff5a0b5 to 7640ce6 Compare June 17, 2024 22:58

Merge branch 'main' into mntor-3057

6f04a03

flozia approved these changes Jun 18, 2024

View reviewed changes

mansaj approved these changes Jun 18, 2024

View reviewed changes

jespy2 approved these changes Jun 18, 2024

View reviewed changes

Merge branch 'main' into mntor-3057

50ce6a1

codemist merged commit 190f4c0 into main Jun 19, 2024
15 checks passed

codemist deleted the mntor-3057 branch June 19, 2024 14:24

This was referenced Jun 25, 2024

Add telemetry event to exiting the cancellation flow #4722

Merged

MNTOR-3246- Add error state and limitations apply page #4697

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MNTOR-3057 - Cancel flow discount callout #4635

MNTOR-3057 - Cancel flow discount callout #4635

codemist commented Jun 5, 2024 •

edited

Loading

github-actions bot commented Jun 5, 2024

mansaj left a comment

flozia Jun 17, 2024

codemist Jun 17, 2024

flozia Jun 17, 2024

codemist Jun 17, 2024

flozia Jun 17, 2024

codemist Jun 17, 2024

flozia Jun 17, 2024

codemist Jun 17, 2024 •

edited

Loading

flozia Jun 18, 2024

flozia Jun 18, 2024

mansaj left a comment

mansaj Jun 18, 2024

jespy2 left a comment

github-actions bot commented Jun 19, 2024

		const [primaryCta, setPrimaryCta] = useState<ReactElement>();
		const [ctaSubtitle, setCtaSubtitle] = useState<ReactElement>();

		// Current experiment
		// Note: Opted to use state here to support future experiments

MNTOR-3057 - Cancel flow discount callout #4635

MNTOR-3057 - Cancel flow discount callout #4635

Conversation

codemist commented Jun 5, 2024 • edited Loading

References:

Description

Screenshot (if applicable)

How to test

Checklist (Definition of Done)

github-actions bot commented Jun 5, 2024

mansaj left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codemist Jun 17, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mansaj left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jespy2 left a comment

Choose a reason for hiding this comment

github-actions bot commented Jun 19, 2024

codemist commented Jun 5, 2024 •

edited

Loading

codemist Jun 17, 2024 •

edited

Loading