MNTOR-3924: Plus Expiration heads-up page #5524
Conversation
Note: I did not add unit tests yet because it looks like Jest does not currently have access to the same version of React as our app does, and hence, useFormState is not supported: https://stackoverflow.com/a/78736908 Once we upgrade to React 19 (and use useActionState instead), the tests can be added. The same is also a requirement for showing the pending state, which requires the useActionState API.
|
Preview URL 🚀 : https://blurts-server-pr-5524-mgjlpikfea-uk.a.run.app |
| plus-expiration-error-already-applied-content-part2 = <support-link>Contact our Support team</support-link> for help or head to your dashboard to see the latest on how we’re protecting your data. | ||
| plus-expiration-error-already-applied-cta-label = Go to { -brand-monitor } | ||
| plus-expiration-terms-heading = <b>Terms and restrictions</b> 10% off subscription renewal |
There was a problem hiding this comment.
Is it just me or this string seems a bit strange? How does it look in the website?
There was a problem hiding this comment.
Heh, now that you mention it it does, but it looked fine initially, and I think it's technically correct (though maybe needs a dash somewhere) - it's the terms for getting 10% off of the renewal of your subscription.
Here's what it looks like:
There was a problem hiding this comment.
I wonder if it would make more sense swapped (10% off subscription renewal — <b>Terms and restrictions</b>).
There was a problem hiding this comment.
I'll check with content.
| @@ -74,6 +74,10 @@ const preview: Preview = { | |||
| linkTo("Pages/Public/Breach listing")(); | |||
| } | |||
|
|
|||
| if (path === "/terms/expiration-offer") { | |||
There was a problem hiding this comment.
It doesn't look like this actually works anymore with the latest Storybook (I can't find the docs on it anymore either), but figured it couldn't harm in case they add it back or something.
There was a problem hiding this comment.
The line height of the h1 seems a bit too high as well as the indentation of the list. On mobile the content overlaps with the header logo.
| <li>{l10n.getString("plus-expiration-terms-term5")}</li> | ||
| <li> | ||
| {l10n.getFragment("plus-expiration-terms-term6", { | ||
| elems: { "monitor-link": <Link href="/" /> }, |
There was a problem hiding this comment.
If we don’t know the href value, yet: Should we add a TODO comment?
References:
Jira: MNTOR-3924
Figma:
Description
Note: I did not add unit tests yet because it looks like Jest does not currently have access to the same version of React as our app does, and hence, useFormState is not supported:
https://stackoverflow.com/a/78736908
Once we upgrade to React 19 (and use useActionState instead), the tests can be added.
The same is also a requirement for showing the pending state, which requires the useActionState API.
It's also not finished yet because it's waiting on the back-end code to know which subscriptions are about to expire: #5512
However, since it's all under pretty tight timelines, I figured I'd submit this already to get a design and first code review, and finish it up once the other pieces are in place.
Screenshot (if applicable)
See Storybook, also for the terms.
How to test
I'm not sure if it's possible to test the coupon flow locally and if it's entirely done yet, but you should be able to view the individual pages in Storybook at least, and see the happy path and terms on the dev server.
Checklist (Definition of Done)