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

apps/editing-toolkit/editing-toolkit-plugin/common/override-preview-button-url.js

@@ -53,7 +53,9 @@ async function overridePreviewButtonUrl() {
 	} );
 
 	const popoverSlotElem = document.querySelector( '.interface-interface-skeleton ~ .popover-slot' );
-	popoverSlotObserver.observe( popoverSlotElem, { childList: true } );
+	if ( popoverSlotElem ) {
+		popoverSlotObserver.observe( popoverSlotElem, { childList: true } );
+	}
 }
 
 overridePreviewButtonUrl();

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nux/src/live-preview-modal/style.scss

@@ -49,7 +49,7 @@
 }
 
 .dialog__backdrop.live-preview-modal__overlay {
-	background-color: rgba(0, 0, 0, 0.7);
+	background-color: rgba(var(--color-neutral-70-rgb), 0.8);
 	// Dialog sets `z-index: z-index("root", ".dialog__backdrop")`,
 	// but this modal is used outside of Calypso, so we need to set it manually.
 	// We can refactor to use Modal from `@wordpress/components` instead of Dialog.

apps/wpcom-block-editor/src/wpcom/editor.scss

@@ -1,5 +1,5 @@
 @import "./features/use-classic-block-guide";
-@import "./features/live-preview/upgrade-notice";
+@import "./features/live-preview";
 
 .blog-onboarding-hide {
 	.components-external-link, // "Connect an account" link in Jetpack sidebar

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

@@ -0,0 +1,121 @@
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { useEffect } from 'react';
+import { getUnlock } from '../utils';
+
+const SAVE_HUB_SAVE_BUTTON_SELECTOR = '.edit-site-save-hub__button';
+const HEADER_SAVE_BUTTON_SELECTOR = '.edit-site-save-button__button';
+
+const unlock = getUnlock();
+
+/**
+ * This overrides the `SaveButton` behavior by adding a listener and changing the copy.
+ * Our objective is to open a custom modal ('ThemeUpgradeModal') instead of proceeding with the default behavior.
+ * For more context, see the discussion on adding an official customization method: https://github.com/WordPress/gutenberg/pull/56807.
+ */
+export const useOverrideSaveButton = ( {
+	setIsThemeUpgradeModalOpen,
+}: {
+	setIsThemeUpgradeModalOpen: ( isThemeUpgradeModalOpen: boolean ) => void;
+} ) => {
+	const canvasMode = useSelect(
+		( select ) =>
+			unlock && select( 'core/edit-site' ) && unlock( select( 'core/edit-site' ) ).getCanvasMode(),
+		[]
+	);
+
+	useEffect( () => {
+		const saveButtonClickHandler: EventListener = ( e ) => {
+			e.preventDefault();
+			e.stopPropagation();
+			setIsThemeUpgradeModalOpen( true );
+		};
+		const overrideSaveButtonClick = ( selector: string ) => {
+			const button = document.querySelector( selector );
+			if ( button ) {
+				button.textContent = __( 'Upgrade now', 'wpcom-live-preview' );
+				button.addEventListener( 'click', saveButtonClickHandler );
+			}
+		};
+
+		/**
+		 * This overrides the tooltip text for the save button.
+		 *
+		 * The tooltip is shown after a delay.
+		 * So we observe the DOM changes to avoid being fragile to the delay.
+		 * The observer is activated only when the user hovers over the button to optimize performance.
+		 */
+		const observer = new MutationObserver( ( mutations ) => {
+			mutations.forEach( ( mutation ) => {
+				mutation.addedNodes.forEach( ( node ) => {
+					if ( node.nodeType === Node.ELEMENT_NODE ) {
+						const tooltip = ( node as Element ).querySelector( '.components-tooltip' );
+						if ( tooltip ) {
+							tooltip.textContent = __( 'Upgrade now', 'wpcom-live-preview' );
+						}
+					}
+				} );
+			} );
+		} );
+		const startObserver = () => {
+			observer.observe( document.body, { childList: true } );
+		};
+		const stopObserver = () => {
+			observer.disconnect();
+		};
+		const overrideSaveButtonHover = ( selector: string ) => {
+			const button = document.querySelector( selector );
+			if ( button ) {
+				button.addEventListener( 'mouseover', startObserver );
+				button.addEventListener( 'mouseout', stopObserver );
+			}
+		};
+
+		if ( canvasMode === 'view' ) {
+			overrideSaveButtonClick( SAVE_HUB_SAVE_BUTTON_SELECTOR );
+			overrideSaveButtonHover( SAVE_HUB_SAVE_BUTTON_SELECTOR );
+			return;
+		}
+		if ( canvasMode === 'edit' ) {
+			overrideSaveButtonClick( HEADER_SAVE_BUTTON_SELECTOR );
+			overrideSaveButtonHover( HEADER_SAVE_BUTTON_SELECTOR );
+			return;
+		}
+
+		return () => {
+			document
+				.querySelector( SAVE_HUB_SAVE_BUTTON_SELECTOR )
+				?.removeEventListener( 'click', saveButtonClickHandler );
+			document
+				.querySelector( HEADER_SAVE_BUTTON_SELECTOR )
+				?.removeEventListener( 'click', saveButtonClickHandler );
+			document
+				.querySelector( SAVE_HUB_SAVE_BUTTON_SELECTOR )
+				?.removeEventListener( 'mouseover', startObserver );
+			document
+				.querySelector( HEADER_SAVE_BUTTON_SELECTOR )
+				?.removeEventListener( 'mouseover', startObserver );
+			document
+				.querySelector( SAVE_HUB_SAVE_BUTTON_SELECTOR )
+				?.removeEventListener( 'mouseout', stopObserver );
+			document
+				.querySelector( HEADER_SAVE_BUTTON_SELECTOR )
+				?.removeEventListener( 'mouseout', stopObserver );
+		};
+	}, [ canvasMode, setIsThemeUpgradeModalOpen ] );
+
+	useEffect( () => {
+		// This overrides the keyboard shortcut (⌘S) for saving.
+		const overrideSaveButtonKeyboardShortcut = ( e: KeyboardEvent ) => {
+			if ( e.key === 's' && ( e.metaKey || e.ctrlKey ) ) {
+				e.preventDefault();
+				e.stopPropagation();
+				setIsThemeUpgradeModalOpen( true );
+			}
+		};
+		document.addEventListener( 'keydown', overrideSaveButtonKeyboardShortcut );
+		return () => {
+			document.removeEventListener( 'keydown', overrideSaveButtonKeyboardShortcut );
+		};
+	}, [ setIsThemeUpgradeModalOpen ] );
+};

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

@@ -31,15 +31,14 @@ export const usePreviewingTheme = () => {
 	}, [] );
 	const [ previewingTheme, setPreviewingTheme ] = useState< Theme | undefined >( undefined );
 
+	const previewingThemeId =
+		( previewingThemeSlug as string )?.split( '/' )?.[ 1 ] || previewingThemeSlug;
 	const previewingThemeName = previewingTheme?.name || previewingThemeSlug;
 	const previewingThemeType = previewingTheme ? getThemeType( previewingTheme ) : undefined;
 	const previewingThemeTypeDisplay =
 		previewingThemeType === WOOCOMMERCE_THEME ? 'WooCommerce' : 'Premium';
 
 	useEffect( () => {
-		const previewingThemeId =
-			( previewingThemeSlug as string )?.split( '/' )?.[ 1 ] || previewingThemeSlug;
-
 		if ( previewingThemeId ) {
 			wpcom.req
 				.get( `/themes/${ previewingThemeId }`, { apiVersion: '1.2' } )
@@ -53,9 +52,10 @@ export const usePreviewingTheme = () => {
 			setPreviewingTheme( undefined );
 		}
 		return;
-	}, [ previewingThemeSlug ] );
+	}, [ previewingThemeId ] );
 
 	return {
+		id: previewingThemeId,
 		name: previewingThemeName,
 		type: previewingThemeType,
 		typeDisplay: previewingThemeTypeDisplay,

apps/wpcom-block-editor/src/wpcom/features/live-preview/index.scss

@@ -0,0 +1,2 @@
+@import "./upgrade-modal";
+@import "./upgrade-notice";

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

@@ -6,6 +6,7 @@ import { FC, useEffect } from 'react';
 import { useCanPreviewButNeedUpgrade } from './hooks/use-can-preview-but-need-upgrade';
 import { useHideTemplatePartHint } from './hooks/use-hide-template-part-hint';
 import { usePreviewingTheme } from './hooks/use-previewing-theme';
+import { LivePreviewUpgradeModal } from './upgrade-modal';
 import { LivePreviewUpgradeNotice } from './upgrade-notice';
 import { getUnlock } from './utils';
 
@@ -77,7 +78,12 @@ const LivePreviewNoticePlugin = () => {
 	}
 
 	if ( canPreviewButNeedUpgrade ) {
-		return <LivePreviewUpgradeNotice { ...{ previewingTheme, upgradePlan, dashboardLink } } />;
+		return (
+			<>
+				<LivePreviewUpgradeModal { ...{ themeId: previewingTheme.id as string, upgradePlan } } />
+				<LivePreviewUpgradeNotice { ...{ previewingTheme, dashboardLink } } />
+			</>
+		);
 	}
 	return <LivePreviewNotice { ...{ dashboardLink, previewingThemeName: previewingTheme.name } } />;
 };

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

@@ -0,0 +1,40 @@
+@import "@automattic/typography/styles/variables";
+// stylelint-disable-next-line scss/at-import-no-partial-leading-underscore
+@import "calypso/assets/stylesheets/shared/mixins/_breakpoints";
+// stylelint-disable-next-line scss/at-import-no-partial-leading-underscore
+@import "calypso/assets/stylesheets/shared/_loading";
+
+// Overriding `.wp-core-ui` styles back to Calypso styles.
+.wpcom-live-preview-upgrade-modal {
+	&.card {
+		border: none;
+	}
+	.theme-upgrade-modal p {
+		font-size: $font-body;
+	}
+	.theme-upgrade-modal .theme-upgrade-modal__actions.bundle {
+		.button {
+			color: var(--color-neutral-70);
+			border-color: var(--color-neutral-10);
+			background-color: transparent;
+			font-size: $font-body-small;
+			line-height: 22px;
+			&.is-primary {
+				color: var(--color-text-inverted);
+				border-color: var(--color-primary);
+				background-color: var(--color-primary);
+			}
+		}
+	}
+	.theme-upgrade-modal__included h2 {
+		margin-top: 0;
+		line-height: 1.5;
+	}
+}
+
+.dialog__backdrop.wpcom-live-preview-upgrade-modal__overlay {
+	background-color: rgba(var(--color-neutral-70-rgb), 0.8);
+	// Dialog sets `z-index: z-index("root", ".dialog__backdrop")`,
+	// but this modal is used outside of Calypso, so we need to set it manually.
+	z-index: 100000;
+}

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

@@ -0,0 +1,29 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { FC, useState } from 'react';
+import { ThemeUpgradeModal } from 'calypso/components/theme-upgrade-modal';
+import { useOverrideSaveButton } from './hooks/use-override-save-button';
+
+import './upgrade-modal.scss';
+
+export const LivePreviewUpgradeModal: FC< { themeId: string; upgradePlan: () => void } > = ( {
+	themeId,
+	upgradePlan,
+} ) => {
+	const [ isThemeUpgradeModalOpen, setIsThemeUpgradeModalOpen ] = useState( false );
+
+	useOverrideSaveButton( { setIsThemeUpgradeModalOpen } );
+
+	const queryClient = new QueryClient();
+	return (
+		<QueryClientProvider client={ queryClient }>
+			<ThemeUpgradeModal
+				additionalClassNames="wpcom-live-preview-upgrade-modal"
+				additionalOverlayClassNames="wpcom-live-preview-upgrade-modal__overlay"
+				slug={ themeId }
+				isOpen={ isThemeUpgradeModalOpen }
+				closeModal={ () => setIsThemeUpgradeModalOpen( false ) }
+				checkout={ upgradePlan }
+			/>
+		</QueryClientProvider>
+	);
+};

apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-notice.scss

@@ -6,6 +6,13 @@
 .wpcom-live-preview-upgrade-notice-view-container {
 	padding: 24px 24px 0;
 	border-top: 1px solid #2f2f2f;
+
+	// Hide the original border only when the notice is present.
+	+ .edit-site-save-hub {
+		border-top: none;
+		padding-top: 0;
+	}
+
 	.wpcom-live-preview-upgrade-notice-view {
 		margin: 0 0 24px;
 		color: var(--color-text);

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

@@ -21,21 +21,13 @@ const unlock = getUnlock();
 
 const LivePreviewUpgradeNoticeView: FC< {
 	noticeText: string;
-	upgradePlan: () => void;
-} > = ( { noticeText, upgradePlan } ) => {
+} > = ( { noticeText } ) => {
 	return (
 		<Notice
 			status="warning"
 			isDismissible={ false }
 			className="wpcom-live-preview-upgrade-notice-view"
-			actions={ [
-				{
-					// TODO: Add the tracking event.
-					label: __( 'Upgrade now', 'wpcom-live-preview' ),
-					onClick: upgradePlan,
-					variant: 'primary',
-				},
-			] }
+			// TODO: Add the tracking event.
 		>
 			{ noticeText }
 		</Notice>
@@ -45,8 +37,7 @@ const LivePreviewUpgradeNoticeView: FC< {
 export const LivePreviewUpgradeNotice: FC< {
 	dashboardLink?: string;
 	previewingTheme: ReturnType< typeof usePreviewingTheme >;
-	upgradePlan: () => void;
-} > = ( { dashboardLink, previewingTheme, upgradePlan } ) => {
+} > = ( { dashboardLink, previewingTheme } ) => {
 	const [ isRendered, setIsRendered ] = useState( false );
 	const { createWarningNotice } = useDispatch( 'core/notices' );
 	const canvasMode = useSelect(
@@ -75,11 +66,6 @@ export const LivePreviewUpgradeNotice: FC< {
 			isDismissible: false,
 			__unstableHTML: true,
 			actions: [
-				{
-					label: __( 'Upgrade now', 'wpcom-live-preview' ),
-					onClick: upgradePlan,
-					variant: 'primary',
-				},
 				...( dashboardLink
 					? [
 							{
@@ -91,7 +77,7 @@ export const LivePreviewUpgradeNotice: FC< {
 					: [] ),
 			],
 		} );
-	}, [ createWarningNotice, dashboardLink, noticeText, upgradePlan ] );
+	}, [ createWarningNotice, dashboardLink, noticeText ] );
 
 	/**
 	 * Show the notice when the canvas mode is 'view'.
@@ -119,13 +105,10 @@ export const LivePreviewUpgradeNotice: FC< {
 			container.insertBefore( noticeContainer, saveHub );
 		}
 
-		render(
-			<LivePreviewUpgradeNoticeView noticeText={ noticeText } upgradePlan={ upgradePlan } />,
-			noticeContainer
-		);
+		render( <LivePreviewUpgradeNoticeView noticeText={ noticeText } />, noticeContainer );
 
 		setIsRendered( true );
-	}, [ canvasMode, isRendered, noticeText, upgradePlan ] );
+	}, [ canvasMode, isRendered, noticeText ] );
 
 	return null;
 };

apps/wpcom-block-editor/webpack.config.js

@@ -5,6 +5,7 @@
 const path = require( 'path' );
 const getBaseWebpackConfig = require( '@automattic/calypso-build/webpack.config.js' );
 const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
+const webpack = require( 'webpack' );
 
 /**
  * Internal variables
@@ -58,6 +59,13 @@ function getWebpackConfig(
 			...webpackConfig.plugins.filter(
 				( plugin ) => plugin.constructor.name !== 'DependencyExtractionWebpackPlugin'
 			),
+			/**
+			 * This is needed for import-ing ThemeUpgradeModal,
+			 * which is directly due to the use of NODE_DEBUG in the package called `util`.
+			 */
+			new webpack.DefinePlugin( {
+				'process.env.NODE_DEBUG': JSON.stringify( process.env.NODE_DEBUG || false ),
+			} ),
 			new DependencyExtractionWebpackPlugin( {
 				requestToExternal( request ) {
 					if ( request === 'tinymce/tinymce' ) {

client/components/theme-tier/theme-tier-badge/theme-tier-bundled-badge.js

@@ -1,7 +1,7 @@
 import { BundledBadge, PremiumBadge } from '@automattic/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { useTranslate } from 'i18n-calypso';
-import useBundleSettings from 'calypso/my-sites/theme/hooks/use-bundle-settings';
+import { useBundleSettingsByTheme } from 'calypso/my-sites/theme/hooks/use-bundle-settings';
 import { useSelector } from 'calypso/state';
 import { canUseTheme } from 'calypso/state/themes/selectors';
 import { getSelectedSiteId } from 'calypso/state/ui/selectors';
@@ -14,7 +14,7 @@ export default function ThemeTierBundledBadge() {
 	const translate = useTranslate();
 	const siteId = useSelector( getSelectedSiteId );
 	const { themeId } = useThemeTierBadgeContext();
-	const bundleSettings = useBundleSettings( themeId );
+	const bundleSettings = useBundleSettingsByTheme( themeId );
 	const isThemeIncluded = useSelector(
 		( state ) => siteId && canUseTheme( state, siteId, themeId )
 	);