Partner Compatibility: Adding a unique connection screen for customers who receive a coupon from a Jetpack partner

[rcoll]

Changes proposed in this Pull Request:

• This PR accepts a coupon code via URL parameter. The code is stored in the database and forwarded to checkout upon user connection.
• This PR adds new copy and imagery to the ConnectScreen component if a partner coupon is stored in the database.

Prerequisite

• Should be used in conjunction with Jetpack Plans: Add redirect middleware for partner coupon handling wp-calypso#58177

Jetpack product discussion

• PT: pbtFPC-2c3-p2
• Design: p1HpG7-dvB-p2

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

This PR introduces 2 new tracking events:

• jetpack_partner_coupon_redeem_view: This event is triggered whenever the new PartnerCouponRedeem is rendered (if connected*).
• jetpack_partner_coupon_redeem_click: This event is triggered when a user clicks the Redeem <Product name> button (if connected*).

If connected*: the "redeem coupon" component is shown in two instances:
a) Instead of the pre-connection screen so we both connect the site and direct them to checkout with their partner coupon.
b) As a specific screen that can be directly accessed if the site is already connected.
Because we only track events after the user has connected Jetpack, we can only track stats for the latter "connected" scenario.

Needs to be done before merge

• We need to run tools/project-version.sh -f -u 1.14.0-alpha packages/options to bump the dependency version of Jetpack options, but it introduces a lot of "noice" (~28 touched files), so we're waiting with this until the rest of the PR has been approved.

Testing instructions:

Setup

• Add the code snippet below to your WordPress installation (e.g.: in 0-sandbox.php if you use Jetpack Docker). This will allow the test coupon to be recognised as a valid coupon.

add_filter( 'jetpack_partner_coupon_supported_partners', function ( $partners ) {
	$partners['JPTST'] = 'Jetpack Test';

	return $partners;
} );

add_filter( 'jetpack_partner_coupon_supported_presets', function ( $presets ) {
	$presets['JPTA'] = 'jetpack_backup_daily';

	return $presets;
} );

Functional test: Pre-connection screen
This assumes that you've done the "setup" steps above.

• Login to your WordPress site and make sure you use this branch of Jetpack.
• Go to /wp-admin/admin.php?jetpack-partner-coupon=JPTST_JPTA_123AB.
• You should now be redirect to a screen that says "Welcome to Jetpack Jetpack Test traveler!"
• Click the "Set up & redeem Jetpack Backup" button.
• Approve that Jetpack is allowed to use site data.
• You should now be directed to checkout with a 100% discounted Jetpack Backup Daily product.

Functional test: Connected Jetpack
This assumes that you've done the "setup" steps above.

• Login to your WordPress site and make sure you use this branch of Jetpack.
• Create a Jetpack connection.
• Go to /wp-admin/admin.php?jetpack-partner-coupon=JPTST_JPTA_123AB.
• You should now be redirect to a screen that says "Welcome to Jetpack Jetpack Test traveler!"
• Click the "Redeem Jetpack Backup" button (this should not say "Set up" in the button since we're already connected).
• You should now be directed to checkout with a 100% discounted Jetpack Backup Daily product.

Tracking

If you have completed the Functional test: Connected Jetpack test, you should have automatically triggered both events described in the "Does this pull request change what data or activity we track or use?" section.
You'll probably have to wait between 5-20min before it appears in the live tracks tool: PCYsg-5hv-p2.

Both events should contain the following event properties:

• connected: expected to be yes with test instruction coupon.
• coupon: expected to be JPTST_JPTA_123AB with test instruction coupon.
• partner: expected to be JPTST with test instruction coupon.
• preset: expected to be JPTA with test instruction coupon.

Screenshots

Notice: some of the styling differs from the purposed design since we want to lean into the existing "Connection screen" but all the same messages/ideas should be conveyed as the design.

Pre-connection screen: "desktop"

Pre-connection screen: "tablet"

Pre-connection screen: "phone"

Connected screen: "desktop"

Connected screen: "tablet"

Connected screen: "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: December 7, 2021.
• Scheduled code freeze: November 30, 2021.

---

Backup plugin:

• Next scheduled release: December 7, 2021.
• Scheduled code freeze: November 29, 2021.

---

Boost plugin:

• Next scheduled release: November 30, 2021.
• Scheduled code freeze: November 23, 2021.

[kallehauge]

@rcoll, do you think we can perhaps connect-right-partner.png reduce the size of this image? (e.g.: https://tinypng.com/).
Also, this image looks a lot like the one use in the product description view for backups, so perhaps we can re-use the image from there and show product specific images?

[kallehauge]

@rcoll I've addressed some of my own suggestions and done the following:

• Refactored some of the coupon logic, so we no longer pass a string to JS but instead an object.
• Added some partner + preset validation logic so we don't display the redeem coupon screens if there for some reason is an empty string or similar.
• Now fetching partner and product descriptions from Jetpack::get_products_for_purchase. While I worked with this one I also noticed that the previous copy (taken from design) is for the new tiered version of Backup whereas the IONOS coupons - at least for now - are for Backup Daily.
• I've added "Jetpack Daily" back in the plugin (was recently removed in Products: Update links on Backup/Security cards to direct to checkout for real-time products #21674) to support the above scenario.
• Added "purge coupon code" logic.

[kallehauge]

Oi! I've also added three new filters:

1. jetpack_get_products_for_purchase
2. jetpack_partner_coupon_supported_presets
3. jetpack_partner_coupon_supported_partners

Technically these will allow future partners to add backwards compatibility for coupons by adding their name and presets to e.g. a MU plugin for all sites they want to give coupons for.
Or just existing partners who want to start offering new products/presets.

[ederrengifo]

LGTM! Great job 🙌

[leogermani]

@kallehauge

I gave it another round of tests and everything worked this time! Every possible case

• From a disconnected site
• From a fully connected site
• From a site-only connected site

As for the amount of files. I think it's fine - we can navigate the noise of all the boiler plate

[kallehauge]

That sounds great @leogermani !

@rcanepa has (indirectly) done manual tests of this PR over at Automattic/wp-calypso#58552 as well which included some edge-cases with sites that had unattached licenses and/or partner ids, so I'm feeling pretty confident we're about there 😄

I'm going to give p9dueE-wa-p2 a go to see why we get the wpcom - Could not cleanly apply this PR to synced wpcom files error.

If there's anything else, then please don't hold back! I'm pretty stocked to get this in 10.4 😛

[jeherve]

This looks good to me, it should be good to merge! I only have one question, but that's not blocking or anything.

[jeherve]

I don't quite understand why this needs to be removed. Does this change anything here?

[kallehauge]

It's because it's deprecated 😄 When you run PHPUnit you'll get the following warning:

Warning:       Your XML configuration validates against a deprecated schema.
Suggestion:    Migrate your XML configuration using "--migrate-configuration"!

Technically we could convert it to <coverage> instead but I think it's unnecessary 😅 I think we're covered by the <directory prefix="test" suffix=".php">tests/php</directory> definition (only test prefixes in PHP files, in the tests/php directory).
That being said; I'm not a PHPUnit configuration master - more of a general user - so there might be something I'm missing.

<!--
<filter>
    <whitelist processUncoveredFilesFromWhitelist="false">
        <directory suffix=".php">src</directory>
    </whitelist>
</filter>
-->
<coverage processUncoveredFiles="false">
    <include>
        <directory suffix=".php">src</directory>
    </include>
</coverage>

[jeherve]

Do you have time to make a few quick bullets of what actions you took? E.g.:

I cannot reproduce today, the coupon seems to work now. Not sure what I did wrong the last time around, but you can ignore it now :)

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello rcoll! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D70760-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]

r235750-wpcom