Live Preview: Introduce the upgrade modal in Premium and WooCommerce themes #85013

okmttdhr · 2023-12-08T06:25:55Z

Related to #79223, #83630, #84676
#84483

Proposed Changes

This PR introduces the upgrade modal that activates when a user, while live-previewing a theme, clicks on the Upgrade button.

UI

the modal (for Premium themes)

the modal (for WooCommerce themes)

'edit' mode

'view' mode

Flow

Screen.Recording.2023-12-11.at.15.26.31.2.mov

Testing Instructions

Run install-plugin.sh wpcom-block-editor add/live-preview-upgrade-modal on your sandbox.
Sandbox widgets.wp.com and your site.
Follow the testing instruction in ☂️ PT: Live Preview in Premium and WooCommerce Themes #79223

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md 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 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-ajp-p2)?

matticbot · 2023-12-08T06:26:05Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2023-12-08T06:30:00Z

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

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

editing-toolkit
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/live-preview-upgrade-modal on your sandbox.

client/components/theme-upgrade-modal/index.tsx

apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-modal.tsx

client/my-sites/theme/hooks/use-bundle-settings.tsx

fushar · 2023-12-13T06:55:15Z

Wait a minute... So if I made some changes, then click Upgrade now, I will be redirected to the checkout, then got redirected back to the Site Editor, but my changes are lost... is this the expected flow? 🥲

I think so because we currently don't have the mechanism to save without activating (CMIIW).

But this seems weird...

okmttdhr · 2023-12-13T06:58:23Z

Wait a minute... So if I made some changes, then click Upgrade now, I will be redirected to the checkout, then got redirected back to the Site Editor, but my changes are lost... is this the expected flow? 🥲

I think so because we currently don't have the mechanism to save without activating (CMIIW).

But this seems weird...

Yes, that is expected, and we have no way to save before activation (yet) ... （´・ω・｀）.;:…（´・ω...:.;::..（´・;::: .:.;:

taipeicoder · 2023-12-13T07:30:59Z

Wait a minute... So if I made some changes, then click Upgrade now, I will be redirected to the checkout, then got redirected back to the Site Editor, but my changes are lost... is this the expected flow? 🥲
I think so because we currently don't have the mechanism to save without activating (CMIIW).
But this seems weird...

Yes, that is expected, and we have no way to save before activation (yet) ... （´・ω・｀）.;:…（´・ω...:.;::..（´・;::: .:.;:

This seems to be a pretty significant caveat. cc: @autumnfjeld
Ideally the changes are saved before leaving the Site Editor to the checkout, can we create a spike for this?

apps/wpcom-block-editor/src/wpcom/features/live-preview/hooks/use-previewing-theme.ts

apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-modal.tsx

apps/wpcom-block-editor/src/wpcom/features/live-preview/hooks/use-override-save-button.ts

See #85013 (comment)

#85013 (comment)

fushar

Working well.

Thanks for the hard work!

okmttdhr · 2023-12-15T03:59:47Z

#85013 (comment)

Wait a minute... So if I made some changes, then click Upgrade now, I will be redirected to the checkout, then got redirected back to the Site Editor, but my changes are lost... is this the expected flow? 🥲
I think so because we currently don't have the mechanism to save without activating (CMIIW).
But this seems weird...

Yes, that is expected, and we have no way to save before activation (yet) ... （´・ω・｀）.;:…（´・ω...:.;::..（´・;::: .:.;:

This seems to be a pretty significant caveat. cc: @autumnfjeld Ideally the changes are saved before leaving the Site Editor to the checkout, can we create a spike for this?

In reference to the previous discussions about saving functionality in #81119, I believe the following same principles apply here:

The current behavior is already clear, if we think the BTP as a truly "Preview" experience (quoting @autumnfjeld's words). We also have communicated this behavior clearly in two places:
#81119 (comment)

Given that we can still perceive it as "a true Preview experience", and we have the notices indicating that users cannot save changes before upgrading (You can try out your own style customizations, which will only be saved if you upgrade and activate this theme.),
We might want to retain user editings during the same flow (= 'Live Preview in Premium and WooCommerce themes') at least. But, if we decide to do a spike, we may want to aim to think about these complexities #81119 (comment). This may include considering the saving feature in Live Preview comprehensively to ensure a consistent and non-contradictory user experience.

taipeicoder · 2023-12-15T04:20:47Z

We might want to retain user editings during the same flow (= 'Live Preview in Premium and WooCommerce themes') at least.

Yes. I think this user scenario is more nuanced than #81119, in terms of (1) we are not providing a Save button to the user, and (2) I don't think it's a good UX for users to change the theme → upgrade → redo the changes → activate the theme.

The wording "You can try out your own style customizations, which will only be saved if you upgrade and activate this theme." implies the order of trying out changes → upgrade → activate, which is not technically correct since the changes will be gone after upgrading.

That said, we don't necessarily need to save when users go to checkout. Just need to improve the UX so that the second point mentioned above can be further avoided 🙂

okmttdhr · 2023-12-15T04:25:59Z

It would be worthwhile to see how many users make what changes before upgrading their plan in this flow before jumping in.

* Refactor check for plugins to be generic * Update bundle settings hook to allow getting settings by theme software * Move array of plugins to check to the bundle settings * Update feature flag to a generic name * Rename woo confirm to bundle confirm * Add new hook to get site bundle settings * Add TODO comment to review later * Rename woo transfer to bundle transfer * Make bundle transfer step generic * Rename woo install plugins to bundle install plugins * Make install plugins generic * Translate message that was not translated * Get software name dynamically from bundle settings * Remove a not necessary hook * Refactor hooks to be named exports, following the standards of the existing ones * Use hook to get plugin slug * Remove Woo Verify Email not used feature * Reorganize bundle steps array * Add comments to make the steps more clear * Move custom back to settings * Move flow settings to bundleStepsSettings * Move steps to settings So only one object from this file needs to be customized for bundles. * Make end of flow generic * Make custom functions optional * Add comments to the custom functions * Rename the variable to follow the same standard of the other file * Force type to be a string * Add steps as argument to the useStepNavigation * Make the navigation to the next step generic for the submit * Refactor submit * Update log and event name * Update import to the new function * Remove unused code This logic is part of plugin-bundle-flow. * Move the styles to the file Following the approach applied in other files * Remove comment Keeping it as a customization inside the step, as exception. * Update logic to upgrade site when installing free theme with bundle * Make `ThemeUpgradeModal` Calypso-State-free Update to match changes from conflicting PR. See #85013 and #84886 (comment). Co-authored-by: okmttdhr <okmttdhr@users.noreply.github.com> * Add event for all the cases, and keep the current one for backward compatibility * Fix case when endFlow is not set * Fix logic to display activate or upgrade button --------- Co-authored-by: okmttdhr <okmttdhr@users.noreply.github.com>

* Refactor check for plugins to be generic * Update bundle settings hook to allow getting settings by theme software * Move array of plugins to check to the bundle settings * Update feature flag to a generic name * Rename woo confirm to bundle confirm * Add new hook to get site bundle settings * Add TODO comment to review later * Rename woo transfer to bundle transfer * Make bundle transfer step generic * Rename woo install plugins to bundle install plugins * Make install plugins generic * Translate message that was not translated * Get software name dynamically from bundle settings * Remove a not necessary hook * Refactor hooks to be named exports, following the standards of the existing ones * Use hook to get plugin slug * Remove Woo Verify Email not used feature * Reorganize bundle steps array * Add comments to make the steps more clear * Move custom back to settings * Move flow settings to bundleStepsSettings * Move steps to settings So only one object from this file needs to be customized for bundles. * Make end of flow generic * Make custom functions optional * Add comments to the custom functions * Rename the variable to follow the same standard of the other file * Force type to be a string * Add steps as argument to the useStepNavigation * Make the navigation to the next step generic for the submit * Refactor submit * Update log and event name * Update import to the new function * Remove unused code This logic is part of plugin-bundle-flow. * Move the styles to the file Following the approach applied in other files * Remove comment Keeping it as a customization inside the step, as exception. * Update logic to upgrade site when installing free theme with bundle * Make `ThemeUpgradeModal` Calypso-State-free Update to match changes from conflicting PR. See #85013 and #84886 (comment). Co-authored-by: okmttdhr <okmttdhr@users.noreply.github.com> * Add event for all the cases, and keep the current one for backward compatibility * Fix case when endFlow is not set * Add Sensei bundle settings * Update string to match new updates from rebase * Redirect to Sensei Setup Wizard after the WPCOM flow * Remove step from URL It automattically redirects to the first step of the wizard. * Update string for bundled plugin messages * Fix logic to display activate or upgrade button --------- Co-authored-by: okmttdhr <okmttdhr@users.noreply.github.com>

okmttdhr mentioned this pull request Dec 8, 2023

☂️ PT: Live Preview in Premium and WooCommerce Themes #79223

Closed

27 tasks

okmttdhr force-pushed the add/live-preview-upgrade-modal branch 2 times, most recently from 48f0b87 to 4e64079 Compare December 11, 2023 04:32

okmttdhr marked this pull request as ready for review December 11, 2023 07:12

okmttdhr commented Dec 11, 2023

View reviewed changes

client/components/theme-upgrade-modal/index.tsx Show resolved Hide resolved

apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-modal.tsx Outdated Show resolved Hide resolved

okmttdhr requested a review from a team December 11, 2023 07:16

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 11, 2023

okmttdhr self-assigned this Dec 11, 2023

okmttdhr changed the title ~~Live Preview: Add the upgrade modal~~ Live Preview: Introduce the upgrade modal in Premium and WooCommerce themes Dec 11, 2023

This comment was marked as resolved.

Sign in to view

okmttdhr force-pushed the add/live-preview-upgrade-modal branch 2 times, most recently from 4ee9590 to c2af835 Compare December 12, 2023 06:03

This comment was marked as resolved.

Sign in to view

okmttdhr force-pushed the add/live-preview-upgrade-modal branch from c2af835 to fe737d0 Compare December 12, 2023 06:05

okmttdhr requested review from renatho and a team December 12, 2023 06:37

This comment was marked as resolved.

Sign in to view

renatho reviewed Dec 12, 2023

View reviewed changes

client/my-sites/theme/hooks/use-bundle-settings.tsx Outdated Show resolved Hide resolved

This comment was marked as resolved.

Sign in to view

okmttdhr force-pushed the add/live-preview-upgrade-modal branch from fe737d0 to 8f09760 Compare December 13, 2023 02:23

This comment was marked as resolved.

Sign in to view

fushar reviewed Dec 13, 2023

View reviewed changes

apps/wpcom-block-editor/src/wpcom/features/live-preview/hooks/use-previewing-theme.ts Outdated Show resolved Hide resolved

apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-modal.tsx Outdated Show resolved Hide resolved

fushar reviewed Dec 13, 2023

View reviewed changes

apps/wpcom-block-editor/src/wpcom/features/live-preview/hooks/use-override-save-button.ts Outdated Show resolved Hide resolved

okmttdhr added 12 commits December 15, 2023 09:37

Extract useOverrideSaveButton

ddaab4a

Fix Failed to execute 'observe' on 'MutationObserver'

b53e6c7

Replace Gridicons with WordPress icons

9249898

Fix regression of the keyboard shortcut (⌘S) for saving

4bb7416

Remove unnecessary deps

65b9ace

Add a comment about usage of ThemeUpgradeModal

55aab90

Remove the shortcut text from the tooltip

9a0c3e7

See #85013 (comment)

Replace Gridicons directly in ThemeUpgradeModal

cea517a

Apply #84886 to useBundleSetting

9358abf

#85013 (comment)

Replace Gridicons directly in ThemeUpgradeModal (Remove the loader)

77e7eae

Use the defined function

2c07f30

Add a comment about build settings change

1b374b4

okmttdhr force-pushed the add/live-preview-upgrade-modal branch from 978bb27 to 1b374b4 Compare December 15, 2023 00:42

This comment was marked as resolved.

Sign in to view

fushar approved these changes Dec 15, 2023

View reviewed changes

okmttdhr merged commit 41bf95c into trunk Dec 15, 2023
12 of 13 checks passed

okmttdhr deleted the add/live-preview-upgrade-modal branch December 15, 2023 01:53

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Dec 15, 2023

okmttdhr mentioned this pull request Dec 15, 2023

Live Preview: Save & Activate button separation #81119

Open

3 tasks

okmttdhr mentioned this pull request Dec 15, 2023

Fix incorrect padding on the ThemeUpgradeModal #85346

Merged

7 tasks

okmttdhr mentioned this pull request Dec 22, 2023

Live Preview: The Upgrade Flow in A New Tab #85683

Closed

jsnajdr mentioned this pull request Jan 22, 2024

Live Preview: Reduce file size #86626

Closed

This was referenced Feb 19, 2024

Add WP Admin link to Global Site Sidebar #87584

Merged

Live Preview: Remove the redundant tooltip #87617

Merged

Live Preview: Add Tooltip for Displaying Shortcut Key #87619

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Live Preview: Introduce the upgrade modal in Premium and WooCommerce themes #85013

Live Preview: Introduce the upgrade modal in Premium and WooCommerce themes #85013

okmttdhr commented Dec 8, 2023 •

edited

Loading

matticbot commented Dec 8, 2023 •

edited

Loading

matticbot commented Dec 8, 2023 •

edited

Loading

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

fushar commented Dec 13, 2023

okmttdhr commented Dec 13, 2023 •

edited

Loading

This comment was marked as resolved.

taipeicoder commented Dec 13, 2023

This comment was marked as resolved.

This comment was marked as resolved.

fushar left a comment

okmttdhr commented Dec 15, 2023

taipeicoder commented Dec 15, 2023

okmttdhr commented Dec 15, 2023 •

edited

Loading

Live Preview: Introduce the upgrade modal in Premium and WooCommerce themes #85013

Live Preview: Introduce the upgrade modal in Premium and WooCommerce themes #85013

Conversation

okmttdhr commented Dec 8, 2023 • edited Loading

Proposed Changes

UI

Flow

Testing Instructions

Pre-merge Checklist

matticbot commented Dec 8, 2023 • edited Loading

matticbot commented Dec 8, 2023 • edited Loading

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

fushar commented Dec 13, 2023

okmttdhr commented Dec 13, 2023 • edited Loading

This comment was marked as resolved.

taipeicoder commented Dec 13, 2023

This comment was marked as resolved.

This comment was marked as resolved.

fushar left a comment

Choose a reason for hiding this comment

okmttdhr commented Dec 15, 2023

taipeicoder commented Dec 15, 2023

okmttdhr commented Dec 15, 2023 • edited Loading

okmttdhr commented Dec 8, 2023 •

edited

Loading

matticbot commented Dec 8, 2023 •

edited

Loading

matticbot commented Dec 8, 2023 •

edited

Loading

okmttdhr commented Dec 13, 2023 •

edited

Loading

okmttdhr commented Dec 15, 2023 •

edited

Loading