Theme Tiers: Switching away from a theme requires confirmation

[rcrdortiz]

Related to:

• Theme Tiers: Warn user when switching away from a theme they'll lose access to #98978

Proposed Changes

When the customer switches from a theme that now requires a different plan, he will need to explicitly accept that he can't switch back to the theme without a plan upgrade.

We've updated the theme switch modal so that we show a checkbox and a message that the user must read and accept before allowing the user to switch themes.

We're generating new event names for this specific case so that we can monitor how users are behaving. We will not send the normal events since there's a chance that the special case of showing explicit acceptance alters the metrics of the normal theme switch flow.

Why are these changes being made?

• We want to warn users when they switch away from a plan that changed tiers that they won't be able to switch back to it.

Testing Instructions

Testing is a bit complicated, we can't change theme tiers in production without disrupting our users so we basically have two ways of testing. You can either hijack the WPCom API to simulate that a given theme is now on a different tier. Or you can check this branch and test locally forcing isCurrentThemeAllowedOnSite to false so that it always gets triggered.

• Use the Calypso live link and hijack WPCom API or build locally
• Go to the LiTS and make sure you have a theme that will trigger the use case
• Select a different theme and press the activate button
• You should see the modal with the explicit checkbox check, the button should be disabled
• When accepting, the button will become active.
• You should be able to activate the theme if the checkbox is checked.

explicit-accept.mp4

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• 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)?
  • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-132069&env=a8c-for-agencies

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/theme-switch-requires-confirmation-when-tier-changed on your sandbox.

[matticbot]

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

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

name                   parsed_size           gzip_size
entry-main                  +297 B  (+0.0%)      -48 B  (-0.0%)
entry-stepper                -36 B  (-0.0%)      -25 B  (-0.0%)
entry-subscriptions          +16 B  (+0.0%)      -34 B  (-0.0%)
entry-login                  +16 B  (+0.0%)      -34 B  (-0.0%)
entry-domains-landing        +16 B  (+0.0%)      -34 B  (-0.0%)
entry-browsehappy            +16 B  (+0.0%)      -34 B  (-0.1%)

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

Sections (~24570 bytes added 📈 [gzipped])

name                             parsed_size           gzip_size
marketplace                         +17431 B  (+3.2%)    +5234 B  (+3.1%)
themes                               +7467 B  (+0.8%)    +2521 B  (+0.8%)
theme                                +1709 B  (+0.2%)    +1155 B  (+0.5%)
settings                             -1451 B  (-0.1%)     -660 B  (-0.2%)
update-design-flow                    +272 B  (+0.0%)      +17 B  (+0.0%)
signup                                +272 B  (+0.1%)      +17 B  (+0.0%)
site-setup-wg                         +236 B  (+0.1%)     -725 B  (-0.7%)
site-setup-flow                       +236 B  (+0.1%)     -725 B  (-0.7%)
jetpack-cloud-settings                -196 B  (-0.0%)     -362 B  (-0.2%)
email                                 -196 B  (-0.0%)     -824 B  (-0.3%)
backup                                +196 B  (+0.0%)     +882 B  (+0.3%)
a8c-for-agencies-sites                +196 B  (+0.0%)     +882 B  (+0.1%)
link-in-bio-tld-flow                  +169 B  (+0.0%)       -2 B  (-0.0%)
home                                  -156 B  (-0.0%)      -29 B  (-0.0%)
readymade-template-flow               -128 B  (-0.1%)     -694 B  (-1.2%)
assembler-first-flow                  -128 B  (-0.1%)     -731 B  (-1.5%)
devdocs                               +108 B  (+0.1%)      +28 B  (+0.0%)
settings-performance                  -103 B  (-0.0%)      -11 B  (-0.0%)
account                               -103 B  (-0.0%)      -10 B  (-0.0%)
site-settings                          +54 B  (+0.0%)      -75 B  (-0.0%)
settings-jetpack                       -52 B  (-0.0%)      -92 B  (-0.1%)
site-purchases                         +51 B  (+0.0%)     +213 B  (+0.0%)
purchases                              +51 B  (+0.0%)     +213 B  (+0.0%)
plugins                                -46 B  (-0.0%)      -31 B  (-0.0%)
jetpack-cloud-plugin-management        -46 B  (-0.0%)       -1 B  (-0.0%)
a8c-for-agencies-plugins               -46 B  (-0.0%)       -6 B  (-0.0%)
checkout                               -35 B  (-0.0%)      +23 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 (~3952 bytes removed 📉 [gzipped])

name                                                parsed_size           gzip_size
async-load-design-blocks                                 +272 B  (+0.0%)     +955 B   (+0.2%)
async-load-signup-steps-theme-selection                  +247 B  (+0.1%)     +331 B   (+0.3%)
async-load-calypso-blocks-jitm-templates-spotlight       -126 B  (-3.6%)     -290 B  (-18.1%)
async-load-signup-steps-website-content                  -103 B  (-0.0%)      -22 B   (-0.0%)
async-load-calypso-blocks-jitm                            -53 B  (-0.1%)       -7 B   (-0.0%)
async-load-design                                         -33 B  (-0.0%)       -8 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.

[a8ci18n]

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

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

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

[mmtr]

Can you fix the position of the checkbox so it's aligned with the text?

[rcrdortiz]

Can you fix the position of the checkbox so it's aligned with the text?

The component does not expose a way of changing the position. I could add some paddings here and there but it would not be a good solution. The checkbox does seem to be aligned though, it's aligned with the bottom of the line.

[mmtr]

Pretty close!

For some reason, the "check" icon is not visible after checking the checkbox:

Also, the "Activate" button is enabled by default, even though I didn't check the checkbox yet:

[rcrdortiz]

Pretty close!

For some reason, the "check" icon is not visible after checking the checkbox:

Also, the "Activate" button is enabled by default, even though I didn't check the checkbox yet:

I can't reproduce the button state. I see the correct state. Regarding the checkbox icon, it seems that the component requires the checked attribute to show the icon even though the element works.

[a8ci18n]

Translation for this Pull Request has now been finished.