Design Picker: Include premium themes #59293

arthur791004 · 2021-12-16T10:18:29Z

Changes proposed in this Pull Request

Check the premium themes are available for the user by planHasFeature utils and then determine the value of the tier should be all or free
Add PremiumBadge component in the Design Picker package and pass PremiumBadge as a prop of the Design Picker

Example of the premium badge and the hover behavior

Testing instructions

Apply D72672-code to your sandbox to ensure the theme demo API v1.1 is in your sandbox. Note that the mshot image might be broken as D72672-code should be shipped first.
Follow D71467-code to add your user id into the whitelist in your sandbox
Go to /start/setup-site/intent?siteSlug=<your_site>&flags=themes/premium
Select “build”
Check the premium themes are showing on the page and you can select that theme if the plan is premium or above
Check the premium themes won't show on the page if the plan is free or personal

Related to #59025

github-actions · 2021-12-16T10:18:45Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2021-12-16T10:21:22Z

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

App Entrypoints (~565 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
entry-gutenboarding        +3340 B  (+0.2%)    +1029 B  (+0.2%)
entry-domains-landing        -86 B  (-0.0%)     +158 B  (+0.1%)
entry-main                   +70 B  (+0.0%)      +95 B  (+0.0%)
entry-login                  +70 B  (+0.0%)      +97 B  (+0.0%)

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

Sections (~31 bytes added 📈 [gzipped])

name             parsed_size           gzip_size
signup                 +55 B  (+0.0%)      +31 B  (+0.0%)
jetpack-connect        +55 B  (+0.0%)      +31 B  (+0.0%)
accept-invite          +55 B  (+0.0%)      +31 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 (~204 bytes added 📈 [gzipped])

name                                   parsed_size           gzip_size
async-load-signup-steps-design-picker       +926 B  (+0.9%)     +204 B  (+0.6%)

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.

p-jackson · 2021-12-20T01:11:19Z

client/state/themes/actions/recommended-themes.js

 	return async ( dispatch ) => {
 		dispatch( { type: RECOMMENDED_THEMES_FETCH, filter } );
 		const query = {
 			search: '',
 			number: 50,
-			tier: '',
+			tier,


This means the fetching takes the tier into account, but the reducer doesn't take the tier into account.
https://github.com/Automattic/wp-calypso/blob/031a60d1891e2c610d9e8048a241c7e523d8cef0/client/state/themes/reducer.js#L491

It will stash the response in the store using only the filter, which means when the selector gets called it will return whatever tier just happens to have been last fetched.

A fix for this would be to store the response in the redux using both the filter and tier. But since I'd already planned on moving the theme fetching to @automattic/design-picker anyway, I thought the addition of premium themes would be a good opportunity to make that change. Making the code sharable with Gutenboarding rather than modifying the recommended themes reducer.

I'm making that change here: #59342

#59342 doesn't implement the actual feature that this PR does though i.e. it doesn't use hasFeature to decide whether to request premium themes or not. But I think that it'd be good to merge #59342 first so that we don't have to modify the Redux store.

Oh cool, I don't notice that we use action.filter as the key of the themes. I think #59342 is a great refactor and I'm looking forward to merging it 👍

p-jackson

Just tested using Business plan, and planHasFeature() doesn't return true for FEATURE_PREMIUM_THEMES. Not sure why though.

p-jackson · 2021-12-22T08:04:46Z

packages/design-picker/src/components/premium-badge/index.tsx

+	return (
+		<Tooltip
+			position="top center"
+			// @ts-expect-error: @types/wordpress__components doesn't align with latest @wordpress/components


Much tidier 😅 I've worked around this in much hackier ways before

p-jackson · 2021-12-22T08:22:42Z

client/signup/steps/design-picker/index.jsx

+
+	const [ userLoggedIn, isPremiumThemesAvailable ] = useSelector( ( state ) => [
+		isUserLoggedIn( state ),
+		planHasFeature( sitePlanSlug, FEATURE_PREMIUM_THEMES ),


planHasFeature() isn't actually a selector so doesn't need useSelector()

arthur791004 · 2021-12-22T09:37:18Z

Just tested using Business plan, and planHasFeature() doesn't return true for FEATURE_PREMIUM_THEMES. Not sure why though.

Do you enable the feature flags? See:

wp-calypso/packages/calypso-products/src/plans-list.tsx

Line 626 in f88cf2d

isEnabled( 'themes/premium' ) ? FEATURE_PREMIUM_THEMES : null,

Or maybe your business plan is expired 🤔

a8ci18n · 2022-01-03T09:16:25Z

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

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

p-jackson

Do you enable the feature flags?

This was my problem, I'd forgotten the feature flag.

Looks good 👍
I've pushed some changes to the unit tests to fix them and to include a test for the case where the theme config is missing the stylesheet information.

The thumbnails didn't work, as expected. But I'm confident it'll work once the diff has shipped because the iframe'd preview of the design is working. I suggested some changes to the diff.

We have to wait for the backend to ship first anyway, but I think we don't need to feel blocked by the string freeze error. When you drill into the details of the translation task it's basically all done now.

arthur791004 · 2022-01-13T08:01:24Z

The thumbnails didn't work, as expected. But I'm confident it'll work once the diff has shipped because the iframe'd preview of the design is working. I suggested some changes to the diff.

Yep, I think the thumbnail will work after the backend is shipped!

a8ci18n · 2022-01-14T10:28:47Z

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

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

autumnfjeld · 2022-01-18T05:31:52Z

@arthur791004 Premium themes looks good.

I counted five premium themes in total (in the "Show All" category.)
I selected Byrne and it was successfully applied with starter content for a Home page with three posts.

Could we update the tooltip to be:
"Let your site stand out from the crowd with a modern and stylish Premium theme. Premium themes are included in your plan.”

Just to make sure I understand the order of operations in coordinating with the launch of the five Premium Themes (pdgA0m-b7-p2)

merge this PR, keeping the feature flag so that we(internally) have a way to view the "soft launched" Premium Themes
users(public) cannot see the "soft launched" Premium Themes
when Premium Themes are launched to the public they will be automatically visible to users, you will need to update this line .

Is that correct?

arthur791004 · 2022-01-18T05:54:09Z

Could we update the tooltip to be:
"Let your site stand out from the crowd with a modern and stylish Premium theme. Premium themes are included in your plan.”

Sure, I'll add the new copy. But we need to wait for the translation after we update the copy. Besides, we should keep in mind that we have to remove/replace “Premium themes are included in your plan.” when we work on showing premium themes for the user with free or personal plan.

Is that correct?

Yep, you're right! But I think we don't need to update this line. Is there any reason we have to?

autumnfjeld · 2022-01-19T21:59:21Z

Yep, you're right! But I think we don't need to update this line. Is there any reason we have to?

Nope. All good. 😄

autumnfjeld · 2022-01-19T22:07:25Z

packages/design-picker/src/components/premium-badge/index.tsx

+			// @ts-expect-error: @types/wordpress__components doesn't align with latest @wordpress/components
+			delay={ 300 }
+			text={ `${ __(
+				'Let your site stand out from the crowd with a modern and stylish Premium theme.',


@arthur791004 Thanks for thinking ahead on this and making these two separate i18n strings! 😄

Is this string 'Let your site stand out from the crowd with a modern and stylish Premium theme.', already translated? If so, then don't let the new string block merging this PR.

We can add the new string in a subsequent PR. (I think translations can take a week or two right? )

I see the first string is done: https://translate.wordpress.com/developer/arthur791004 😄

Okay, I'll add a new string in follow-up PR.

stephanethomas · 2022-01-24T16:55:44Z

client/landing/gutenboarding/onboarding-block/designs/index.tsx

@@ -1,6 +1,7 @@
 import { isEnabled } from '@automattic/calypso-config';
 import DesignPicker, {
 	FeaturedPicksButtons,
+	PremiumBadge,


This change triggers the following TypeScript error:

yarn tsc -p client/tsconfig.json --noEmit client/landing/gutenboarding/onboarding-block/designs/index.tsx:1:24 - error TS2614: Module '"@automattic/design-picker"' has no exported member 'PremiumBadge'. Did you mean to use 'import PremiumBadge from "@automattic/design-picker"' instead? 1 import DesignPicker, { PremiumBadge, getAvailableDesigns } from '@automattic/design-picker'; ~~~~~~~~~~~~

Could you fix it @arthur791004? Thanks!

Well apparently this is an issue with tsc, and it's just a matter of rebuilding packages to make those errors go away (more information here). Sorry for the ping Arthur.

a8ci18n · 2022-01-28T10:28:32Z

Translation for this Pull Request has now been finished.

arthur791004 added the Blogger Experience Pod label Dec 16, 2021

arthur791004 force-pushed the feat/design-picker-premium-themes branch from 8e119eb to 5ca9b57 Compare December 17, 2021 08:27

arthur791004 changed the title ~~WIP Design Picker: Include premium themes~~ Design Picker: Include premium themes Dec 17, 2021

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Dec 17, 2021

arthur791004 force-pushed the feat/design-picker-premium-themes branch from 7ffdaaf to 6674bbd Compare December 17, 2021 10:38

p-jackson reviewed Dec 20, 2021

View reviewed changes

p-jackson mentioned this pull request Dec 20, 2021

Design Picker: Refactor themes request to react-query and only fetch free themes #59342

Merged

arthur791004 force-pushed the feat/design-picker-premium-themes branch from 6674bbd to 7c02162 Compare December 21, 2021 09:29

arthur791004 changed the base branch from trunk to update/fetch-design-picker-with-react-query December 21, 2021 09:29

Base automatically changed from update/fetch-design-picker-with-react-query to trunk December 21, 2021 21:07

arthur791004 force-pushed the feat/design-picker-premium-themes branch from ab76d59 to 147c197 Compare December 22, 2021 02:35

p-jackson reviewed Dec 22, 2021

View reviewed changes

arthur791004 added the [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging label Jan 3, 2022

arthur791004 force-pushed the feat/design-picker-premium-themes branch 2 times, most recently from c387d06 to 04efb6e Compare January 7, 2022 09:43

p-jackson approved these changes Jan 13, 2022

View reviewed changes

p-jackson mentioned this pull request Jan 14, 2022

Design Picker: include Premium Themes in Premium and above plans #59025

Closed

8 tasks

arthur791004 force-pushed the feat/design-picker-premium-themes branch from ddb1a97 to 431b806 Compare January 14, 2022 09:32

arthur791004 force-pushed the feat/design-picker-premium-themes branch from 431b806 to cfd1008 Compare January 17, 2022 03:10

arthur791004 force-pushed the feat/design-picker-premium-themes branch from 710c7d3 to 96ddc1c Compare January 18, 2022 06:16

autumnfjeld reviewed Jan 19, 2022

View reviewed changes

arthur791004 and others added 15 commits January 20, 2022 12:55

Add PremiumBadge component

95ab350

Only fetch free themes if the premium themes are not available to user

5003bd6

Apply PremiumBadge to Design Picker of Gutenboarding

b0ce198

Adjust delay of Tooltip

a399437

Refactor useSelector usage to follow best practice

8df1f4e

Update copy of tooltip

d7f715e

Change to use planHasFeature

d5866d8

Return array from useSelector

3c00c97

Rollback the change of getRecommendedThemes

e1d1fad

Fix ts error

277b37f

Move planHasFeature out of useSelector

bf764b2

Use theme demo API v1.1

5efb223

Use stylesheet if possible

0b7a32f

Update tests

86929c5

Test situation where the design config info is missing stylesheet

9a1f03c

arthur791004 force-pushed the feat/design-picker-premium-themes branch from 96ddc1c to 9a1f03c Compare January 20, 2022 04:57

arthur791004 mentioned this pull request Jan 20, 2022

Design Picker: Update premium badge copy #60279

Merged

arthur791004 merged commit 4b4cae6 into trunk Jan 20, 2022

arthur791004 deleted the feat/design-picker-premium-themes branch January 20, 2022 06:26

github-actions bot removed [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Jan 20, 2022

stephanethomas reviewed Jan 24, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Design Picker: Include premium themes #59293

Design Picker: Include premium themes #59293

arthur791004 commented Dec 16, 2021 •

edited

github-actions bot commented Dec 16, 2021 •

edited by matticbot

matticbot commented Dec 16, 2021 •

edited

p-jackson Dec 20, 2021

arthur791004 Dec 21, 2021

p-jackson left a comment

p-jackson Dec 22, 2021

p-jackson Dec 22, 2021

arthur791004 Dec 22, 2021

arthur791004 commented Dec 22, 2021

a8ci18n commented Jan 3, 2022

p-jackson left a comment

arthur791004 commented Jan 13, 2022

a8ci18n commented Jan 14, 2022 •

edited

autumnfjeld commented Jan 18, 2022 •

edited

arthur791004 commented Jan 18, 2022 •

edited

autumnfjeld commented Jan 19, 2022

autumnfjeld Jan 19, 2022

autumnfjeld Jan 19, 2022

autumnfjeld Jan 19, 2022

arthur791004 Jan 20, 2022 •

edited

stephanethomas Jan 24, 2022

stephanethomas Jan 24, 2022

a8ci18n commented Jan 28, 2022

Design Picker: Include premium themes #59293

Design Picker: Include premium themes #59293

Conversation

arthur791004 commented Dec 16, 2021 • edited

Changes proposed in this Pull Request

Testing instructions

github-actions bot commented Dec 16, 2021 • edited by matticbot

matticbot commented Dec 16, 2021 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

p-jackson left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arthur791004 commented Dec 22, 2021

a8ci18n commented Jan 3, 2022

p-jackson left a comment

Choose a reason for hiding this comment

arthur791004 commented Jan 13, 2022

a8ci18n commented Jan 14, 2022 • edited

autumnfjeld commented Jan 18, 2022 • edited

arthur791004 commented Jan 18, 2022 • edited

autumnfjeld commented Jan 19, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arthur791004 Jan 20, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

a8ci18n commented Jan 28, 2022

arthur791004 commented Dec 16, 2021 •

edited

github-actions bot commented Dec 16, 2021 •

edited by matticbot

matticbot commented Dec 16, 2021 •

edited

a8ci18n commented Jan 14, 2022 •

edited

autumnfjeld commented Jan 18, 2022 •

edited

arthur791004 commented Jan 18, 2022 •

edited

arthur791004 Jan 20, 2022 •

edited