Site Setup Design Picker: Recognize individual theme purchases

[mreishus]

Proposed Changes

• Site Setup Design Picker: Recognize individual theme purchases
  • PRs Design Picker: Theme Card recognizes individual premium theme purchases #66187 and Unified Design Picker: Theme Preview recognizes individual premium theme purchases #66239 implemented this for the Unified Design Picker. This does it for the Site Setup Design Picker (what you see if the unified one is off).

Premium themes can be acquired by purchasing a plan that provides all premium themes, or by buying an individual premium theme directly. The design picker isn't aware of individual purchases yet, this PR adds it.

For example, I have a free plan site where I have purchased the premium theme skivers.

Before PR:

After PR:

Note: Interaction with other changes

This will need further update once #66048 + D84731-code is merged.

I'll have to change the format of purchasedThemes. It's currently an array of theme names, [ 'skivers', 'payton' ], but it will need to contain both the name and the period. Maybe [ {name: 'skivers', period: 'yearly'}, ... ] ?

Note: Duplication of wasThemePurchased()

I tried putting this in client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/utils, and importing it from the design-picker, but an eslint rule was triggered saying I shouldn't import from there (no-restricted-imports). I guess there has to be one copy in the design picker package, and one in stepper, unless I'm missing something.

Testing Instructions

Part 1

• Have a free site with an individual premium theme purchased
• Go to http://calypso.localhost:3000/setup/designSetup?siteSlug=SITE_SLUG_HERE&flags=-signup/design-picker-unified (note turning the flag off)
• Find Premium themes you have and have not purchased, and note the pricing information below the theme's name.

Part 2

• Find a Premium theme you have purchased, and click on it to preview
• The top right button should say "Start with ThemeName" and not "Unlock"
• Click back, and this time click on a Premium theme you have not purchased
• The top right button should continue to say "Unlock"

Related to #65704 #65857

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

[matticbot]

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

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

name                 parsed_size           gzip_size
entry-stepper             +391 B  (+0.0%)     +183 B  (+0.0%)
entry-gutenboarding       +242 B  (+0.0%)     +109 B  (+0.0%)

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

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

name                                   parsed_size           gzip_size
async-load-signup-steps-design-picker       +242 B  (+0.2%)     +114 B  (+0.3%)

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.

[andres-blanco]

Seems like this is not going to be a problem for the time being: paYKcK-1XV-p2

[andres-blanco]

This is looking good!

Purchased theme card:

Purchased theme preview:

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/7465145

Thank you @mreishus for including a screenshot in the description! This is really helpful for our translators.

[a8ci18n]

Translation for this Pull Request has now been finished.