Merge branch 'trunk' of github.com:woocommerce/woocommerce into e2e/f…

…ix-command-pallete-with-gb-tests

packages/js/product-editor/changelog/add-43707_show_prepublish_checks_section

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add Always show pre-publish checks checkbox #44595

packages/js/product-editor/src/components/header/header.tsx

@@ -27,6 +27,7 @@ import { PublishButton } from './publish-button';
 import { LoadingState } from './loading-state';
 import { Tabs } from '../tabs';
 import { HEADER_PINNED_ITEMS_SCOPE, TRACKS_SOURCE } from '../../constants';
+import { useShowPrepublishChecks } from '../../hooks/use-show-prepublish-checks';
 
 export type HeaderProps = {
 	onTabSelect: ( tabId: string | null ) => void;
@@ -64,6 +65,8 @@ export function Header( {
 		'name'
 	);
 
+	const { showPrepublishChecks } = useShowPrepublishChecks();
+
 	const sidebarWidth = useAdminSidebarWidth();
 
 	useEffect( () => {
@@ -158,7 +161,10 @@ export function Header( {
 						productStatus={ lastPersistedProduct?.status }
 					/>
 
-					<PublishButton productType={ productType } prePublish />
+					<PublishButton
+						productType={ productType }
+						prePublish={ showPrepublishChecks }
+					/>
 
 					<WooHeaderItem.Slot name="product" />
 					<PinnedItems.Slot scope={ HEADER_PINNED_ITEMS_SCOPE } />

packages/js/product-editor/src/components/prepublish-panel/prepublish-panel.tsx

@@ -17,6 +17,7 @@ import { store as productEditorUiStore } from '../../store/product-editor-ui';
 import { TRACKS_SOURCE } from '../../constants';
 import { VisibilitySection } from './visibility-section';
 import { ScheduleSection } from './schedule-section';
+import { ShowPrepublishChecksSection } from './show-prepublish-checks-section';
 
 export function PrepublishPanel( {
 	productType = 'product',
@@ -63,9 +64,13 @@ export function PrepublishPanel( {
 				<h4>{ title }</h4>
 				<span>{ description }</span>
 			</div>
-			<VisibilitySection productType={ productType } />
-
-			<ScheduleSection postType={ productType } />
+			<div className="woocommerce-product-publish-panel__content">
+				<VisibilitySection productType={ productType } />
+				<ScheduleSection postType={ productType } />
+			</div>
+			<div className="woocommerce-product-publish-panel__footer">
+				<ShowPrepublishChecksSection />
+			</div>
 		</div>
 	);
 }

packages/js/product-editor/src/components/prepublish-panel/show-prepublish-checks-section/index.ts

@@ -0,0 +1 @@
+export * from './show-prepublish-checks-section';

packages/js/product-editor/src/components/prepublish-panel/show-prepublish-checks-section/show-prepublish-checks-section.tsx

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { createElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { recordEvent } from '@woocommerce/tracks';
+import { CheckboxControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { TRACKS_SOURCE } from '../../../constants';
+import { useShowPrepublishChecks } from '../../../hooks/use-show-prepublish-checks';
+
+export function ShowPrepublishChecksSection() {
+	const { isResolving, showPrepublishChecks, togglePrepublishChecks } =
+		useShowPrepublishChecks();
+
+	if ( isResolving ) {
+		return null;
+	}
+
+	return (
+		<div className="woocommerce-publish-panel-show-checks">
+			<CheckboxControl
+				label={ __( 'Always show pre-publish checks.', 'woocommerce' ) }
+				checked={ showPrepublishChecks }
+				onChange={ ( selected: boolean ) => {
+					togglePrepublishChecks();
+					recordEvent( 'product_prepublish_panel', {
+						source: TRACKS_SOURCE,
+						action: 'toggle_prepublish_checks',
+						value: selected,
+					} );
+				} }
+			/>
+		</div>
+	);
+}

packages/js/product-editor/src/components/prepublish-panel/style.scss

@@ -1,11 +1,19 @@
 @import './visibility-section/style.scss';
 
 .woocommerce-product-publish-panel {
+	bottom: 0;
+    right: 0;
+    top: $admin-bar-height-big;
+	overflow: auto;
+    position: fixed;
 	background: $white;
 	transform: translateX(+100%);
 	animation: product-publish-panel__slide-in-animation 0.1s forwards;
+    width: 100%;
 
 	@include break-medium() {
+		top: $admin-bar-height;
+		width: $sidebar-width - $border-width;
 		@include reduce-motion("animation");
 
 		body.is-fullscreen-mode & {
@@ -43,6 +51,24 @@
 			margin: 8px 0;
 		}
 	}
+
+	&__content {
+		// Ensure the pre-publish panel accounts for the header and footer height.
+		min-height: calc( 100% - #{ $header-height + 200px } );
+	}
+
+	&__footer {
+		padding: 0 $grid-unit-20;
+		left: 0;
+		width: 100%;
+		min-height: $gap-largest + $gap-large;
+		display: flex;
+		align-items: center;
+
+		.components-base-control__field {
+			margin: 0;
+		}
+	}
 }
 
 @keyframes product-publish-panel__slide-in-animation {

packages/js/product-editor/src/constants.ts

@@ -5,6 +5,8 @@ export const NEW_PRODUCT_MANAGEMENT_ENABLED_OPTION_NAME =
 	'woocommerce_new_product_management_enabled';
 export const SINGLE_VARIATION_NOTICE_DISMISSED_OPTION =
 	'woocommerce_single_variation_notice_dismissed';
+export const SHOW_PREPUBLISH_CHECKS_ENABLED_OPTION_NAME =
+	'woocommerce_show_prepublish_checks_enabled';
 
 export const NUMBERS_AND_ALLOWED_CHARS = '[^-0-9%s1%s2]';
 export const NUMBERS_AND_DECIMAL_SEPARATOR = '[^-\\d\\%s]+';

packages/js/product-editor/src/hooks/use-show-prepublish-checks.ts

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { OPTIONS_STORE_NAME } from '@woocommerce/data';
+
+/**
+ * Internal dependencies
+ */
+import { SHOW_PREPUBLISH_CHECKS_ENABLED_OPTION_NAME } from '../constants';
+
+export function useShowPrepublishChecks() {
+	const { updateOptions } = useDispatch( OPTIONS_STORE_NAME );
+
+	const { isResolving, showPrepublishChecks } = useSelect( ( select ) => {
+		const { getOption, hasFinishedResolution } =
+			select( OPTIONS_STORE_NAME );
+
+		const showPrepublishChecksOption =
+			getOption( SHOW_PREPUBLISH_CHECKS_ENABLED_OPTION_NAME ) || 'yes';
+
+		const resolving = ! hasFinishedResolution( 'getOption', [
+			SHOW_PREPUBLISH_CHECKS_ENABLED_OPTION_NAME,
+		] );
+
+		return {
+			isResolving: resolving,
+			showPrepublishChecks: showPrepublishChecksOption === 'yes',
+		};
+	}, [] );
+
+	const togglePrepublishChecks = () => {
+		updateOptions( {
+			[ SHOW_PREPUBLISH_CHECKS_ENABLED_OPTION_NAME ]: showPrepublishChecks
+				? 'no'
+				: 'yes',
+		} );
+	};
+
+	return {
+		isResolving,
+		showPrepublishChecks,
+		togglePrepublishChecks,
+	};
+}

plugins/woocommerce-admin/client/customize-store/intro/intro-banners.tsx

@@ -3,11 +3,12 @@
  */
 import { __ } from '@wordpress/i18n';
 import classNames from 'classnames';
-import { Button } from '@wordpress/components';
+import { Button, Modal } from '@wordpress/components';
 import { getNewPath } from '@woocommerce/navigation';
 import { recordEvent } from '@woocommerce/tracks';
 import interpolateComponents from '@automattic/interpolate-components';
 import { Link } from '@woocommerce/components';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -220,22 +221,65 @@ export const NoAIBanner = ( {
 }: {
 	sendEvent: React.ComponentProps< typeof Intro >[ 'sendEvent' ];
 } ) => {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+
 	return (
-		<BaseIntroBanner
-			bannerTitle={ __( 'Design your own', 'woocommerce' ) }
-			bannerText={ __(
-				'Quickly create a beautiful store using our built-in store designer. Choose your layout, select a style, and much more.',
-				'woocommerce'
+		<>
+			<BaseIntroBanner
+				bannerTitle={ __( 'Design your own', 'woocommerce' ) }
+				bannerText={ __(
+					'Quickly create a beautiful store using our built-in store designer. Choose your layout, select a style, and much more.',
+					'woocommerce'
+				) }
+				bannerClass="no-ai-banner"
+				bannerButtonText={ __( 'Start designing', 'woocommerce' ) }
+				bannerButtonOnClick={ () => {
+					setIsModalOpen( true );
+				} }
+				showAIDisclaimer={ false }
+			/>
+			{ isModalOpen && (
+				<Modal
+					className={
+						'woocommerce-customize-store__theme-switch-warning-modal'
+					}
+					title={ __(
+						'Are you sure you want to design a new theme?',
+						'woocommerce'
+					) }
+					onRequestClose={ () => setIsModalOpen( false ) }
+					shouldCloseOnClickOutside={ false }
+				>
+					<p>
+						{ __(
+							'Your active theme will be changed and you could lose any changes you’ve made to it.',
+							'woocommerce'
+						) }
+					</p>
+					<div className="woocommerce-customize-store__theme-switch-warning-modal-footer">
+						<Button
+							onClick={ () => {
+								setIsModalOpen( false );
+							} }
+							variant="link"
+						>
+							{ __( 'Cancel', 'woocommerce' ) }
+						</Button>
+						<Button
+							onClick={ () => {
+								sendEvent( {
+									type: 'DESIGN_WITHOUT_AI',
+								} );
+								setIsModalOpen( false );
+							} }
+							variant="primary"
+						>
+							{ __( 'Design a new theme', 'woocommerce' ) }
+						</Button>
+					</div>
+				</Modal>
 			) }
-			bannerClass="no-ai-banner"
-			bannerButtonText={ __( 'Start designing', 'woocommerce' ) }
-			bannerButtonOnClick={ () => {
-				sendEvent( {
-					type: 'DESIGN_WITHOUT_AI',
-				} );
-			} }
-			showAIDisclaimer={ false }
-		/>
+		</>
 	);
 };
 

plugins/woocommerce-admin/client/customize-store/style.scss

@@ -180,7 +180,8 @@ body.woocommerce-customize-store.js.is-fullscreen-mode {
 }
 
 .woocommerce-customize-store__onboarding-welcome-modal,
-.woocommerce-customize-store__design-change-warning-modal {
+.woocommerce-customize-store__design-change-warning-modal,
+.woocommerce-customize-store__theme-switch-warning-modal {
 	width: 480px;
 	max-width: 480px;
 
@@ -213,7 +214,8 @@ body.woocommerce-customize-store.js.is-fullscreen-mode {
 		font-weight: 700;
 	}
 
-	.woocommerce-customize-store__design-change-warning-modal-footer {
+	.woocommerce-customize-store__design-change-warning-modal-footer,
+	.woocommerce-customize-store__theme-switch-warning-modal-footer {
 		display: flex;
 		gap: 12px;
 		justify-content: flex-end;