#7465145 Site Setup Design Picker: Recognize individual theme purchases

Proposed Changes

• Site Setup Design Picker: Recognize individual theme purchases
  • PRs #66187 and #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