Skip to content

Commit

Permalink
Live Preview: Introduce the upgrade modal in Premium and WooCommerce …
Browse files Browse the repository at this point in the history
…themes (#85013)
  • Loading branch information
okmttdhr authored Dec 15, 2023
1 parent 0b9e2b9 commit 41bf95c
Show file tree
Hide file tree
Showing 21 changed files with 292 additions and 70 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion apps/wpcom-block-editor/src/wpcom/editor.scss
Original file line number Diff line number Diff line change
@@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -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 ] );
};
Original file line number Diff line number Diff line change
Expand Up @@ -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' } )
Expand All @@ -53,9 +52,10 @@ export const usePreviewingTheme = () => {
setPreviewingTheme( undefined );
}
return;
}, [ previewingThemeSlug ] );
}, [ previewingThemeId ] );

return {
id: previewingThemeId,
name: previewingThemeName,
type: previewingThemeType,
typeDisplay: previewingThemeTypeDisplay,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
@import "./upgrade-modal";
@import "./upgrade-notice";
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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 } } />;
};
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
}
Original file line number Diff line number Diff line change
@@ -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>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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(
Expand Down Expand Up @@ -75,11 +66,6 @@ export const LivePreviewUpgradeNotice: FC< {
isDismissible: false,
__unstableHTML: true,
actions: [
{
label: __( 'Upgrade now', 'wpcom-live-preview' ),
onClick: upgradePlan,
variant: 'primary',
},
...( dashboardLink
? [
{
Expand All @@ -91,7 +77,7 @@ export const LivePreviewUpgradeNotice: FC< {
: [] ),
],
} );
}, [ createWarningNotice, dashboardLink, noticeText, upgradePlan ] );
}, [ createWarningNotice, dashboardLink, noticeText ] );

/**
* Show the notice when the canvas mode is 'view'.
Expand Down Expand Up @@ -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;
};
8 changes: 8 additions & 0 deletions apps/wpcom-block-editor/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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' ) {
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 )
);
Expand Down
Loading

0 comments on commit 41bf95c

Please sign in to comment.