-
{
- const assemblerUrl = getNewPath( {}, '/customize-store/assembler-hub', {} );
- const iframe = document.createElement( 'iframe' );
- iframe.classList.add( 'cys-fullscreen-iframe' );
- iframe.src = assemblerUrl;
-
- const showIframe = () => {
- if ( iframe.style.opacity === '1' ) {
- // iframe is already visible
- return;
- }
-
- const loader = document.getElementsByClassName(
- 'woocommerce-onboarding-loader'
- );
- if ( loader[ 0 ] ) {
- ( loader[ 0 ] as HTMLElement ).style.display = 'none';
- }
-
- iframe.style.opacity = '1';
-
- if ( context.startLoadingTime ) {
- const endLoadingTime = performance.now();
- const timeToLoad = endLoadingTime - context.startLoadingTime;
- recordEvent( 'customize_your_store_ai_wizard_loading_time', {
- time_in_s: ( timeToLoad / 1000 ).toFixed( 2 ),
- } );
- }
- };
-
- iframe.onload = () => {
- // Hide loading UI
- attachIframeListeners( iframe );
- onIframeLoad( showIframe );
-
- // Ceiling wait time set to 60 seconds
- setTimeout( showIframe, 60 * 1000 );
- window.history?.pushState( {}, '', assemblerUrl );
- };
-
- document.body.appendChild( iframe );
-
+const redirectToAssemblerHub = async () => {
// This is a workaround to update the "activeThemeHasMods" in the parent's machine
// state context. We should find a better way to do this using xstate actions,
// since state machines should rely only on their context.
@@ -345,33 +297,6 @@ const redirectToAssemblerHub = async (
// than the parent window.
// Check https://github.com/woocommerce/woocommerce/pull/44206 for more details.
window.parent.__wcCustomizeStore.activeThemeHasMods = true;
-
- // Listen for back button click
- window.addEventListener(
- 'popstate',
- () => {
- const apiLoaderUrl = getNewPath(
- {},
- '/customize-store/design-with-ai/api-call-loader',
- {}
- );
-
- // Only catch the back button click when the user is on the main assember hub page
- // and trying to go back to the api loader page
- if ( 'admin.php' + window.location.search === apiLoaderUrl ) {
- iframe.contentWindow?.postMessage(
- {
- type: 'assemberBackButtonClicked',
- },
- '*'
- );
- // When the user clicks the back button, push state changes to the previous step
- // Set it back to the assembler hub
- window.history?.pushState( {}, '', assemblerUrl );
- }
- },
- false
- );
};
export const actions = {
diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/ApiCallLoader.tsx b/plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/ApiCallLoader.tsx
index fd86fb4c1640..e369d2dc51b0 100644
--- a/plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/ApiCallLoader.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/ApiCallLoader.tsx
@@ -3,7 +3,8 @@
*/
import { Loader } from '@woocommerce/onboarding';
import { __ } from '@wordpress/i18n';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
+import { getNewPath } from '@woocommerce/navigation';
/**
* Internal dependencies
@@ -15,7 +16,11 @@ import assemblingAiOptimizedStore from '../../assets/images/loader-assembling-ai
import applyingFinishingTouches from '../../assets/images/loader-applying-the-finishing-touches.svg';
import generatingContent from '../../assets/images/loader-generating-content.svg';
import openingTheDoors from '../../assets/images/loader-opening-the-doors.svg';
-import { createAugmentedSteps } from '~/customize-store/utils';
+import {
+ attachIframeListeners,
+ createAugmentedSteps,
+ onIframeLoad,
+} from '~/customize-store/utils';
const loaderSteps = [
{
@@ -150,6 +155,62 @@ export const ApiCallLoader = () => {
);
};
+const AssemblerHub = () => {
+ const assemblerUrl = getNewPath( {}, '/customize-store/assembler-hub', {} );
+ const iframe = useRef< HTMLIFrameElement | null >( null );
+ const [ isVisible, setIsVisible ] = useState( false );
+
+ useEffect( () => {
+ const currentIframe = iframe.current;
+ if ( currentIframe === null ) {
+ return;
+ }
+ window.addEventListener(
+ 'popstate',
+ () => {
+ const apiLoaderUrl = getNewPath(
+ {},
+ '/customize-store/design-with-ai/api-call-loader',
+ {}
+ );
+
+ // Only catch the back button click when the user is on the main assember hub page
+ // and trying to go back to the api loader page
+ if ( 'admin.php' + window.location.search === apiLoaderUrl ) {
+ currentIframe.contentWindow?.postMessage(
+ {
+ type: 'assemberBackButtonClicked',
+ },
+ '*'
+ );
+ // When the user clicks the back button, push state changes to the previous step
+ // Set it back to the assembler hub
+ window.history?.pushState( {}, '', assemblerUrl );
+ }
+ },
+ false
+ );
+ }, [ assemblerUrl, iframe ] );
+
+ return (
+
+
+ { isVariation ? (
+ <>
{ lastPersistedProduct?.name }
-
-
- # { lastPersistedProduct?.id }
-
+
+ # { lastPersistedProduct?.id }
+
+
+ ) : (
+ getHeaderTitle(
+ editedProductName,
+ lastPersistedProduct?.name
+ )
+ ) }
+
+
+
+ { isHeaderImageVisible ? (
+ 
+ ) : (
+
+
+ { isVariation ? (
+ <>
{ lastPersistedProduct?.name }
-
-
- # { lastPersistedProduct?.id }
-
+
+ # { lastPersistedProduct?.id }
+
+
+ ) : (
+ getHeaderTitle(
+ editedProductName,
+ lastPersistedProduct?.name
+ )
+ ) }
+
+ { getVisibilityTags() }
- ) : (
- getHeaderTitle(
- editedProductName,
- lastPersistedProduct?.name
- )
- ) }
-
+
+
{ ! isVariation && (
diff --git a/packages/js/product-editor/src/components/header/hooks/use-publish/use-publish.tsx b/packages/js/product-editor/src/components/header/hooks/use-publish/use-publish.tsx
index d8c22ee672ee..f4805ee9e47f 100644
--- a/packages/js/product-editor/src/components/header/hooks/use-publish/use-publish.tsx
+++ b/packages/js/product-editor/src/components/header/hooks/use-publish/use-publish.tsx
@@ -4,18 +4,17 @@
import { MouseEvent } from 'react';
import { Button } from '@wordpress/components';
import { useEntityProp } from '@wordpress/core-data';
-import { useDispatch, useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
-import type { Product, ProductVariation } from '@woocommerce/data';
+import type { Product } from '@woocommerce/data';
/**
* Internal dependencies
*/
-import { useValidations } from '../../../../contexts/validation-context';
+import { useProductManager } from '../../../../hooks/use-product-manager';
import type { WPError } from '../../../../utils/get-product-error-message';
import type { PublishButtonProps } from '../../publish-button';
-export function usePublish( {
+export function usePublish< T = Product >( {
productType = 'product',
disabled,
onClick,
@@ -23,20 +22,11 @@ export function usePublish( {
onPublishError,
...props
}: PublishButtonProps & {
- onPublishSuccess?( product: Product ): void;
+ onPublishSuccess?( product: T ): void;
onPublishError?( error: WPError ): void;
-} ): Button.ButtonProps & {
- publish(
- productOrVariation?: Partial< Product | ProductVariation >
- ): Promise< Product | ProductVariation | undefined >;
-} {
- const { isValidating, validate } = useValidations< Product >();
-
- const [ productId ] = useEntityProp< number >(
- 'postType',
- productType,
- 'id'
- );
+} ): Button.ButtonProps {
+ const { isValidating, isDirty, isPublishing, publish } =
+ useProductManager( productType );
const [ status, , prevStatus ] = useEntityProp< Product[ 'status' ] >(
'postType',
@@ -44,97 +34,10 @@ export function usePublish( {
'status'
);
- const { isSaving, isDirty } = useSelect(
- ( select ) => {
- const {
- // @ts-expect-error There are no types for this.
- isSavingEntityRecord,
- // @ts-expect-error There are no types for this.
- hasEditsForEntityRecord,
- } = select( 'core' );
-
- return {
- isSaving: isSavingEntityRecord< boolean >(
- 'postType',
- productType,
- productId
- ),
- isDirty: hasEditsForEntityRecord(
- 'postType',
- productType,
- productId
- ),
- };
- },
- [ productId ]
- );
-
- const isBusy = isSaving || isValidating;
+ const isBusy = isPublishing || isValidating;
const isDisabled = disabled || isBusy || ! isDirty;
- // @ts-expect-error There are no types for this.
- const { editEntityRecord, saveEditedEntityRecord } = useDispatch( 'core' );
-
- async function publish(
- productOrVariation: Partial< Product | ProductVariation > = {}
- ) {
- const isPublished = status === 'publish' || status === 'future';
-
- try {
- // The publish button click not only change the status of the product
- // but also save all the pending changes. So even if the status is
- // publish it's possible to save the product too.
- const data = ! isPublished
- ? { status: 'publish', ...productOrVariation }
- : productOrVariation;
-
- await validate( data as Partial< Product > );
-
- await editEntityRecord( 'postType', productType, productId, data );
-
- const publishedProduct = await saveEditedEntityRecord<
- Product | ProductVariation
- >( 'postType', productType, productId, {
- throwOnError: true,
- } );
-
- if ( publishedProduct && onPublishSuccess ) {
- onPublishSuccess( publishedProduct );
- }
-
- return publishedProduct as Product | ProductVariation;
- } catch ( error ) {
- if ( onPublishError ) {
- let wpError = error as WPError;
- if ( ! wpError.code ) {
- wpError = {
- code: isPublished
- ? 'product_publish_error'
- : 'product_create_error',
- } as WPError;
- if ( ( error as Record< string, string > ).variations ) {
- wpError.code = 'variable_product_no_variation_prices';
- wpError.message = (
- error as Record< string, string >
- ).variations;
- } else {
- const errorMessage = Object.values(
- error as Record< string, string >
- ).find( ( value ) => value !== undefined ) as
- | string
- | undefined;
- if ( errorMessage !== undefined ) {
- wpError.code = 'product_form_field_error';
- wpError.message = errorMessage;
- }
- }
- }
- onPublishError( wpError );
- }
- }
- }
-
- async function handleClick( event: MouseEvent< HTMLButtonElement > ) {
+ function handleClick( event: MouseEvent< HTMLButtonElement > ) {
if ( isDisabled ) {
event.preventDefault?.();
return;
@@ -144,7 +47,7 @@ export function usePublish( {
onClick( event );
}
- await publish();
+ publish().then( onPublishSuccess ).catch( onPublishError );
}
function getButtonText() {
@@ -169,6 +72,5 @@ export function usePublish( {
'aria-disabled': isDisabled,
variant: 'primary',
onClick: handleClick,
- publish,
};
}
diff --git a/packages/js/product-editor/src/components/header/publish-button/publish-button-menu/index.ts b/packages/js/product-editor/src/components/header/publish-button/publish-button-menu/index.ts
new file mode 100644
index 000000000000..d1fdefc59ecb
--- /dev/null
+++ b/packages/js/product-editor/src/components/header/publish-button/publish-button-menu/index.ts
@@ -0,0 +1,2 @@
+export * from './publish-button-menu';
+export * from './types';
diff --git a/packages/js/product-editor/src/components/header/publish-button/publish-button-menu/publish-button-menu.tsx b/packages/js/product-editor/src/components/header/publish-button/publish-button-menu/publish-button-menu.tsx
new file mode 100644
index 000000000000..4a08bb1ab255
--- /dev/null
+++ b/packages/js/product-editor/src/components/header/publish-button/publish-button-menu/publish-button-menu.tsx
@@ -0,0 +1,155 @@
+/**
+ * External dependencies
+ */
+import { Dropdown, MenuGroup, MenuItem } from '@wordpress/components';
+import { useEntityProp } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { createElement, Fragment, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import type { ProductStatus } from '@woocommerce/data';
+import { navigateTo } from '@woocommerce/navigation';
+import { getAdminLink } from '@woocommerce/settings';
+
+/**
+ * Internal dependencies
+ */
+import { useProductManager } from '../../../../hooks/use-product-manager';
+import { useProductScheduled } from '../../../../hooks/use-product-scheduled';
+import { recordProductEvent } from '../../../../utils/record-product-event';
+import { getProductErrorMessage } from '../../../../utils/get-product-error-message';
+import { ButtonWithDropdownMenu } from '../../../button-with-dropdown-menu';
+import { SchedulePublishModal } from '../../../schedule-publish-modal';
+import { showSuccessNotice } from '../utils';
+import type { PublishButtonMenuProps } from './types';
+
+export function PublishButtonMenu( {
+ postType,
+ ...props
+}: PublishButtonMenuProps ) {
+ const { isScheduled, schedule, date, formattedDate } =
+ useProductScheduled( postType );
+ const [ showScheduleModal, setShowScheduleModal ] = useState<
+ 'schedule' | 'edit' | undefined
+ >();
+ const { trash } = useProductManager( postType );
+ const { createErrorNotice, createSuccessNotice } =
+ useDispatch( 'core/notices' );
+ const [ , , prevStatus ] = useEntityProp< ProductStatus >(
+ 'postType',
+ postType,
+ 'status'
+ );
+
+ function scheduleProduct( dateString?: string ) {
+ schedule( dateString )
+ .then( ( scheduledProduct ) => {
+ recordProductEvent( 'product_schedule', scheduledProduct );
+
+ showSuccessNotice( scheduledProduct );
+ } )
+ .catch( ( error ) => {
+ const message = getProductErrorMessage( error );
+ createErrorNotice( message );
+ } )
+ .finally( () => {
+ setShowScheduleModal( undefined );
+ } );
+ }
+
+ function renderSchedulePublishModal() {
+ return (
+ showScheduleModal && (
+ setShowScheduleModal( undefined ) }
+ onSchedule={ scheduleProduct }
+ />
+ )
+ );
+ }
+
+ function renderMenu( { onClose }: Dropdown.RenderProps ) {
+ return (
+ <>
+
+ { isScheduled ? (
+ <>
+
+
+
+ ) : (
+
+ ) }
+
+
+ { prevStatus !== 'trash' && (
+
+
+
+ ) }
+
+ );
+ }
+
+ return (
+ <>
+ setShowScheduleModal( undefined ) }
- onSchedule={ async ( value ) => {
- await schedule( publish, value );
- setShowScheduleModal( undefined );
- } }
- />
- )
+ {
- sendEvent(
+ window.parent.__wcCustomizeStore.sendEventToIntroMachine(
flowType && isAIFlow( flowType )
- ? 'GO_BACK_TO_DESIGN_WITH_AI'
- : 'GO_BACK_TO_DESIGN_WITHOUT_AI'
+ ? { type: 'GO_BACK_TO_DESIGN_WITH_AI' }
+ : { type: 'GO_BACK_TO_DESIGN_WITHOUT_AI' }
);
} }
/>
diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/site-hub.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/site-hub.tsx
index 099d26733dea..aa555e3069b1 100644
--- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/site-hub.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/site-hub.tsx
@@ -78,21 +78,13 @@ export const SiteHub = forwardRef(
className="edit-site-site-hub__text-content"
spacing="0"
>
-
+
-
- ),
- onClick() {
- setShowScheduleModal( 'edit' );
- },
- },
- ]
- : [
- {
- title: __( 'Schedule publish', 'woocommerce' ),
- onClick() {
- setShowScheduleModal( 'schedule' );
- },
- },
- ],
- ];
- }
-
- function renderSchedulePublishModal() {
+ function renderPublishButtonMenu(
+ menuProps: Dropdown.RenderProps
+ ): React.ReactElement {
return (
- showScheduleModal && (
-
- { __(
- 'Edit schedule',
- 'woocommerce'
- ) }
-
- { formattedDate }
-