Subscription-based premium themes: Support multiple premium theme products

[DavidRothstein]

Proposed Changes

Currently Calypso assumes all premium themes have the same product slug. But to support having subscription-based themes with different products for each theme (an implementation we are currently investigating) it is necessary to make Calypso check the product type rather than the product slug to determine if a purchase is a premium theme.

This pull request accomplishes that. Props to @mreishus for part of the code here (from https://github.com/Automattic/wp-calypso/pull/66319).

Related to: paYKcK-1Qr-p2

Testing Instructions

The most important testing is to buy a premium theme via /themes/premium/[YOURSITE] as a one-time purchase and make sure the entire experience is unchanged by this pull request:

1. Buy the theme and make sure it can be activated during the purchase process.
2. Go back to /themes/premium/[YOURSITE] (with the purchased theme either set as active or not) and make sure it displays correctly.
3. Go to /themes/premium/[YOURSITE]?flags=signup/seller-upgrade-modal (per https://github.com/Automattic/wp-calypso/pull/66285#issuecomment-1206744656) and make sure it looks correct there too. Note that it looks like the theme is being misidentified as an annual subscription on this page (even though it's a one-time purchase) but that is a preexisting issue.
4. Go to /setup/designSetup?siteSlug=[YOURSITE]&flags=signup/design-picker-unified (per https://github.com/Automattic/wp-calypso/pull/66319) and make sure it looks correct there too. As with the above, it looks like the theme is being misidentified as an annual subscription on this page (even though it's a one-time purchase) but that is a preexisting issue.
5. Cancel/refund the theme and make sure that works correctly also.

You can also test with D85381-code on the server and follow the instructions there to test purchasing an annual subscription. Following similar testing steps as above, the theme should display in a reasonable way everywhere in the user interface.

Pre-merge Checklist

• [ ] Have you written new tests for your changes?
• [ ] Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• [ ] Have you checked for TypeScript, React or other console errors?
• [ ] Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• [ ] Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?

[matticbot]

This PR modifies the release build for editing-toolkit

To test your changes on WordPress.com, run install-plugin.sh editing-toolkit update/support-multiple-theme-products on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-mMA-p2

[github-actions[bot]]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-44174

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-44174&env=jetpack

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~10 bytes added 📈 [gzipped])

name           parsed_size           gzip_size
entry-stepper        +11 B  (+0.0%)      +10 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~85 bytes added 📈 [gzipped])

name                             parsed_size           gzip_size
plans                                  -28 B  (-0.0%)       -2 B  (-0.0%)
jetpack-connect                        -28 B  (-0.0%)       -6 B  (-0.0%)
jetpack-cloud-pricing                  -28 B  (-0.0%)       -6 B  (-0.0%)
email                                  -28 B  (-0.0%)       -2 B  (-0.0%)
domains                                -28 B  (-0.0%)       -2 B  (-0.0%)
settings                               +27 B  (+0.0%)      +10 B  (+0.0%)
plugins                                +27 B  (+0.0%)      +10 B  (+0.0%)
jetpack-cloud-settings                 +27 B  (+0.0%)       +9 B  (+0.0%)
jetpack-cloud-plugin-management        +27 B  (+0.0%)       +6 B  (+0.0%)
home                                   +27 B  (+0.0%)       +7 B  (+0.0%)
help                                   +27 B  (+0.0%)       +6 B  (+0.0%)
backup                                 +27 B  (+0.0%)       +6 B  (+0.0%)
add-ons                                +27 B  (+0.0%)       +6 B  (+0.0%)
themes                                 +19 B  (+0.0%)       +4 B  (+0.0%)
theme                                  +19 B  (+0.0%)       +5 B  (+0.0%)
checkout                               -19 B  (-0.0%)       +7 B  (+0.0%)
account-close                          +19 B  (+0.0%)      +11 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~21 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-calypso-my-sites-checkout-modal             -28 B  (-0.0%)       +0 B
async-load-calypso-blocks-editor-checkout-modal        -28 B  (-0.0%)       +0 B
async-load-signup-steps-plans-atomic-store             +27 B  (+0.0%)      +10 B  (+0.0%)
async-load-signup-steps-plans                          +27 B  (+0.0%)      +10 B  (+0.0%)
async-load-calypso-blocks-inline-help-popover          +27 B  (+0.0%)       +7 B  (+0.0%)
async-load-automattic-help-center                      +27 B  (+0.0%)       +7 B  (+0.0%)
async-load-signup-steps-theme-selection                +19 B  (+0.0%)       +4 B  (+0.0%)
async-load-design-blocks                               +19 B  (+0.0%)       +4 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory. Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[mreishus]

:+1: I've purchased both legacy premium theme (skivers) and a new annual subscription (baxter) one. Calypso recognizes both:

It also does with ?flags=signup/seller-upgrade-modal

Billing screens look good:

Purchase process worked fine (ignore sandbox warnings in preview modal)

[mreishus]

The unified design picker on (/setup/designSetup with signup/design-picker-unified flag on) is not noticing the new purchases: This is something I just worked on though, so I will create a small PR that fixes (or can be added to this PR).

Fixed here: https://github.com/Automattic/wp-calypso/pull/66319

[DavidRothstein]

Thanks for the reviews!

After checking all usages of isTheme() in the codebase, it looks like all of them pass in a purchase object which came from either createPurchaseObject() (which this diff adds the productType property to) or createReceiptObject() (which already had a productType property). So I agree; we only need to support that one property. I've simplified the pull request accordingly. Also, I renamed isTheme() to isThemePurchase() to hopefully be a bit more clear about what is expected to be passed in.

@mreishus Thanks so much for posting https://github.com/Automattic/wp-calypso/pull/66319! (I believe that new getPurchasedThemes() method was introduced right around the time I was working on this). I've incorporated those changes here, and I think it works well.

I've added some updated testing instructions to the main body of the pull request, and I think this is hopefully ready to go in.

[DavidRothstein]

This PR modifies the release build for editing-toolkit .... To deploy your changes after merging, see the documentation

FYI, I'm not planning to deploy anything here, based on my interpretation of the discussion at p1663873510345439-slack-CHN6J22MP (for example).