Partner Coupon: Add a new Partner Coupon Redeem CTA

[atanas-dev]

Changes proposed in this Pull Request:

• Add new partner coupon redeem CTA for connected users when a partner coupon is detected on the site.

Jetpack product discussion

pdpAdu-1U-p2

There were 2 design pieces left out because the scope was reduced:

• The pre-connection CTA did not have its design changed as the scope of this change was reduced.
• The primary button design was kept as-is as it's based on the WP admin style and to match the pre-connection button as well.

Does this pull request change what data or activity we track or use?

Added a new jetpackRedeemPartnerCouponDismissedAt Local Storage key that holds a timestamp when the user clicks the "Remind me later" button.

Testing instructions:

• Make sure Jetpack is activated but not connected.
• Visit /wp-admin/?jetpack-partner-coupon=PARTNER_COUPON_CODE to store a partner coupon code. Please reach out to team Avalon to get a coupon code.
• Confirm you are redirected to /wp-admin/admin.php?page=jetpack&showCouponRedemption=1#/ which matches screenshot 1 below.
• For every step, make sure that the Redeem button redirects you to checkout with your partner coupon applied. The "Set up & redeem" buttons should first connect you and then redirect you to checkout instead.
• Establish a site connection by bailing out of the connection flow before approving the connection to your account.
• Go to Jetpack Dashboard and confirm it matches screenshot 2 below.
• Establish a user connection.
• Go to Jetpack Dashboard and confirm it matches screenshot 3 below.
• Go to Jetpack Dashboard, add &showCouponRedemption=1 to your URL and confirm it matches screenshot 4 below.

Final results:

Screenshot 1: No connection with and without showCouponRedemption=1:

Screenshot 2: Site connection with and without showCouponRedemption=1:

Screenshot 3: User connection without showCouponRedemption=1:

Screenshot 4: User connection and showCouponRedemption=1:

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ⚠️ All commits were linted before commit.
  
• ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

---

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

---

Jetpack plugin:

• Next scheduled release: March 1, 2022.
• Scheduled code freeze: February 22, 2022.

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello atanas-dev! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D73666-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

[kallehauge]

Design

IMO the whitespace seems a bit off when a bullet breaks down to a new line

The overall "feel" looks a bit messy/chaotic and it's difficult to glance the bullets compared to the original design

I know design is supposed to give a 👍 after team approval, but it might be worth pulling them in now to specifically look at the "bullets" since the first image is what everyone is currently going to see?
It looks like the code is using the suggested spacing when nothing is breaking into new lines so maybe we need a copy change / design change? Or it's just my eyes and everything is good 😂

---

"Remind me later"

There's no "Remind me later" functionality which the design implies. I kinda like it since, if you do not want to claim the coupon anyway, this box would be "in the way" for about a month before auto-purge removes it from the site.
If it to limit scope, perhaps we could have an action called "Remove coupon" which would purge the coupon from the database?

---

Mobile experience

The mobile device usage of the Jetpack screen is (IMO) surprisingly small, so I think we generally just try and support it as well as possible without going too far out of our own way to handle it.
I'm prefacing the following comment with the above, because other components are "breaking" around the same time as our new component but 360x640 and 360x800 screen sizes are still some of the most popular mobile resolutions and 360x width is actually the most popular by far, if you combine the two

That being said: until we reach the minimum limits, it flows pretty well up until the max width 😃

[atanas-dev]

Design

@Luchadores any thoughts on the feature listing and line-breaking we currently have because of the verbiage? Should we drop the two column layout?

Remind me later
Mobile experience

Turns out I've been looking at an outdated design in Figma. I've posted pdpAdu-7z-p2 in order to discuss the "remind me later" feature which I will be exploring soon and I've reworked the design implementation, especially on mobile.

[Luchadores]

Hey @atanas-dev, here is what the design is looking like in Figma. Hope I understood your question correctly and that this helps.

[atanas-dev]

@Luchadores take a look at this screenshot from André's comment (my ones in the PR itself are a bit outdated):

The verbiage you see is what we have in production for the product that IONOS will be providing - we have 3 features with one of them being significantly longer ("Automated daily backups (off-site)") which causes it to break into multiple lines even on desktop browser sizes. Should we drop the two-column layout for features even on desktop?

[Luchadores]

Hey @atanas-dev, in that case, I would put all "One-click restores" under "Unlimited backup storage". That way we won't have "One-click restores" by itself, nor it will break the line for "Automated daily backups".

[atanas-dev]

Since we're adding a new cookie, we'll definitely want to keep track this since our cookie policy will need to be updated.

@jeherve apologies, this was added at the end and I missed updating the PR description.
Would using localStorage instead of cookies change anything privacy policy-wise? We can definitely add an extra API endpoint and handle dismissals via transients but it'd be great if we can keep it simpler.

[jeherve]

Would using localStorage instead of cookies change anything privacy policy-wise?

Yeah, it would definitely simplify things, and would probably work just as well for such a short duration. For a longer duration (if that changes following our discussion above), however, it probably wouldn't be as good?

[atanas-dev]

I've updated the dismissal time to 3 days and switched the implementation to use localStorage rather than cookies.

[kallehauge]

The new localStorage implementation tests well for me 👍

The "3 days if you're in the same browser" time also seems like a fair compromise between:

@jeherve: This feels very short, doesn't it? If I dismiss a "later" banner, I would expect it to be gone for at least a few days. A week seems like minimum to me.

and

@Luchadores: Can we not show it next time the user starts a new session?

[jeherve]

This looks good to me now. I have a few remarks left:

• When in offline mode, the component is still displayed:

• When the site is connected, but not the user, the banners are still displayed:

[atanas-dev]

When in offline mode, the component is still displayed:

The component is now disabled in Offline mode.

When the site is connected, but not the user, the banners are still displayed:

• Screenshot 1: This cannot have been taken while a user was not connected because this is the My Plan tab which is only shown when you are user-connected, right? Note that the banner on the screenshot is part of Jetpack plugin: add Jetpack partner coupon banner on My Page #22633 and not this PR.
• Screenshot 2: This is by design - the "Set up & Redeem" button will push the user through the normal user connection flow and then redirect them to checkout to redeem their coupon once a connection is established. This piece of functionality has already been merged in Partner Compatibility: Adding a unique connection screen for customers who receive a coupon from a Jetpack partner #21813 - the current PR introduces a similar CTA that shows up when a user connection already exists (you can distinguish them by the aside image used and the button being "Set up & redeem ..." vs "Redeem ...").

[jeherve]

Thanks, all looks good now! 🚢

[github-actions]

Great news! One last step: head over to your WordPress.com diff, D73666-code, and commit it.
Once you've done so, come back to this PR and add a comment with your changeset ID.

Thank you!

[atanas-dev]

Deployed in r240207-wpcom