Jetpack plugin: add Jetpack partner coupon banner on My Page

[kallehauge]

Summary

This PR will add a banner to the My Plan page, informing users about unredeemed Jetpack partner coupons (if they have any).

The banner will redirect to a "Redeem coupon" component that gives the user greater detail about the product they are about to claim (/wp-admin/admin.php?page=jetpack&showCouponRedemption=1).

Heads up: this PR adds the component to plugins/jetpack instead of js-packages/partner-coupon. The main reason for this decision is because it's almost a 1:1 copy of <MyPlanCard> (except positioning and a background), so I've created a <MyPlanBanner> component that can be re-used on the My Plan page instead.

If we wanted to implement <MyPlanPartnerCoupon> as a RNA component, we wouldn't be able to use any of the font sizes etc. that exists in @automattic/jetpack-base-styles anyway and would have to hardcode old style values.

Needs design approval: I've changed the copy of the component a bit (button and title) based on the conversation we had about JITM messaging in the coupon improvements project (source: pdpAdu-1U-p2#comment-53).

Changes proposed in this Pull Request:

• Add a new <MyPlanBanner> component to highlight efforts/opportunities relevant for users plans/products on the "My Plan" page.
• Add a <MyPlanPartnerCoupon> that uses <MyPlanBanner> to inform users about available Jetpack Partner coupons.

Jetpack product discussion

• 1201265858818217-as-1201673004210759
• pdpAdu-1U-p2

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

This PR introduced one (and a half) new events:

• jetpack_wpa_click: we trigger a WPA click event when the banner button is clicked. The event itself isn't new, but the situation it's triggered is new and will add the following event properties:
  • target: jetpack-partner-coupon (this value will change if other places implement the new banner component)
  • feature: my-plan-banner
  • page: my-plan
• jetpack_my_plan_banner_view: will be trigger each time a My Plan banner is viewed. The event is new and shares the following event properties:
  • type: jetpack-partner-coupon

Testing instructions:

• Spin up this branch locally or as a JN beta site.
• Create a Jetpack connection.
• Go to /wp-admin/admin.php?jetpack-partner-coupon={COUPON}.
  • ^ Replace {COUPON} with the coupon found here: 2b922-pb.
• Go to Jetpack > My Plan
• Verify that the banner from the screenshots below is showing.
• If you click the Redeem button, you should be redirected to a Welcome to Jetpack <partner-name> traveler! component with additional information about the product you're about to claim.
• Hopefully, you've both seen the banner and clicked the Redeem button by now, which means you have triggered both events mentioned in the tracking section above.
• It will take 5-10min for the data to show up in the live data (documented here: PCYsg-4KT-p2), so go grab a ☕ - you deserve it!

Screenshots

"Desktop"

"Tablet"

"Phone"

[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.

[atanas-dev]

Code looks good to me.

Side-note:
Are we sure we want the redeem button to lead to the other CTA? I don't think that one provides a sufficient amount of context and the CTA is Redeem in both so from a Redeem action I'm pushed to another Redeem action in a card that doesn't provide much more context. I've reached out to Design in pdpAdu-1U-p2#comment-142.

[atanas-dev]

I'm overriding my approval - I'm waiting for an answer from Design on the CTA redirect and I noted a minor adjustment to the Redeem button to match designs.
Apologies!

[kallehauge]

Are we sure we want the redeem button to lead to the other CTA? [...] I've reached out to Design

Thank you Atanas!

[jeherve]

This works well for me. I'm approving the PR, but I do have 2 questions / remarks left. Those can be addressed in follow-up PRs if necessary though.