-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Live Preview: Introduce the upgrade modal in Premium and WooCommerce themes #85013
Conversation
This PR modifies the release build for the following Calypso Apps: For info about this notification, see here: PCYsg-OT6-p2
To test WordPress.com changes, run |
48f0b87
to
4e64079
Compare
apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-modal.tsx
Outdated
Show resolved
Hide resolved
This comment was marked as resolved.
This comment was marked as resolved.
4ee9590
to
c2af835
Compare
This comment was marked as resolved.
This comment was marked as resolved.
c2af835
to
fe737d0
Compare
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.
This comment was marked as resolved.
fe737d0
to
8f09760
Compare
Wait a minute... So if I made some changes, then click 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 comment was marked as resolved.
This comment was marked as resolved.
This seems to be a pretty significant caveat. cc: @autumnfjeld |
This comment was marked as resolved.
This comment was marked as resolved.
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
apps/wpcom-block-editor/src/wpcom/features/live-preview/hooks/use-override-save-button.ts
Outdated
Show resolved
Hide resolved
978bb27
to
1b374b4
Compare
This comment was marked as resolved.
This comment was marked as resolved.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Working well.
Thanks for the hard work!
In reference to the previous discussions about saving functionality in #81119, I believe the following same principles apply here:
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 ( |
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 🙂 |
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>
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
install-plugin.sh wpcom-block-editor add/live-preview-upgrade-modal
on your sandbox.Pre-merge Checklist