Skip to content

Commit

Permalink
Fix activeThemeHasMods undefined error (#45255)
Browse files Browse the repository at this point in the history 
* Fix activeThemeHasMods undefined error

* remove comment

* fix naming

* improve comment

* Add changefile(s) from automation for the following project(s): woocommerce

---------

Co-authored-by: github-actions <github-actions@github.com>
  • Loading branch information
@gigitux @thealexandrelara
2 people authored and thealexandrelara committed Mar 4, 2024
1 parent 549f1d5 commit 6e54c7d
Show file tree
Hide file tree
Showing 8 changed files with 193 additions and 178 deletions.
8 changes: 4 additions & 4 deletions ...commerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen.tsx
View file
Expand Up @@ -54,7 +54,7 @@ export const SidebarNavigationScreen = ( {
backPath?: string;
onNavigateBackClick?: () => void;
} ) => {
const { sendEvent, context } = useContext( CustomizeStoreContext );
const { context } = useContext( CustomizeStoreContext );
const [ openWarningModal, setOpenWarningModal ] =
useState< boolean >( false );
const location = useLocation();
Expand Down Expand Up @@ -148,10 +148,10 @@ export const SidebarNavigationScreen = ( {
<GoBackWarningModal
setOpenWarningModal={ setOpenWarningModal }
onExitClicked={ () => {
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' }
);
} }
/>
Expand Down
79 changes: 2 additions & 77 deletions plugins/woocommerce-admin/client/customize-store/design-with-ai/actions.ts
View file
Expand Up @@ -2,11 +2,7 @@
* External dependencies
*/
import { assign, spawn } from 'xstate';
import {
getQuery,
updateQueryString,
getNewPath,
} from '@woocommerce/navigation';
import { getQuery, updateQueryString } from '@woocommerce/navigation';
import { recordEvent } from '@woocommerce/tracks';
import { dispatch } from '@wordpress/data';
import { OPTIONS_STORE_NAME } from '@woocommerce/data';
Expand All @@ -29,7 +25,6 @@ import {
lookAndFeelCompleteEvent,
toneOfVoiceCompleteEvent,
} from './pages';
import { attachIframeListeners, onIframeLoad } from '../utils';

const assignStartLoadingTime = assign<
designWithAiStateMachineContext,
Expand Down Expand Up @@ -292,50 +287,7 @@ const recordTracksStepCompleted = (
} );
};

const redirectToAssemblerHub = async (
context: designWithAiStateMachineContext
) => {
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.
Expand All @@ -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 = {
Expand Down
118 changes: 91 additions & 27 deletions plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/ApiCallLoader.tsx
View file
Expand Up @@ -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
Expand All @@ -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 = [
{
Expand Down Expand Up @@ -150,37 +155,96 @@ 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 (
<iframe
ref={ iframe }
onLoad={ ( frame ) => {
const showIframe = () => setIsVisible( true );
attachIframeListeners( frame.currentTarget );
onIframeLoad( showIframe );
// Ceiling wait time set to 60 seconds
setTimeout( showIframe, 60 * 1000 );
window.parent.history?.pushState( {}, '', assemblerUrl );
} }
style={ { opacity: isVisible ? 1 : 0 } }
src={ assemblerUrl }
title="assembler-hub"
className="cys-fullscreen-iframe"
/>
);
};

export const AssembleHubLoader = () => {
// Show the last two steps of the loader so that the last frame is the shortest time possible
const augmentedSteps = createAugmentedSteps( loaderSteps.slice( -2 ), 10 );

const [ progress, setProgress ] = useState( augmentedSteps[ 0 ].progress );

return (
<Loader>
<Loader.Sequence
interval={ ( 10 * 1000 ) / ( augmentedSteps.length - 1 ) }
shouldLoop={ false }
onChange={ ( index ) => {
// to get around bad set state timing issue
setTimeout( () => {
setProgress( augmentedSteps[ index ].progress );
}, 0 );
} }
>
{ augmentedSteps.map( ( step, index ) => (
<Loader.Layout key={ index }>
<Loader.Illustration>
{ step.image }
</Loader.Illustration>
<Loader.Title>{ step.title }</Loader.Title>
</Loader.Layout>
) ) }
</Loader.Sequence>
<Loader.ProgressBar
className="smooth-transition"
progress={ progress || 0 }
/>
</Loader>
<>
<Loader>
<Loader.Sequence
interval={ ( 10 * 1000 ) / ( augmentedSteps.length - 1 ) }
shouldLoop={ false }
onChange={ ( index ) => {
// to get around bad set state timing issue
setTimeout( () => {
setProgress( augmentedSteps[ index ].progress );
}, 0 );
} }
>
{ augmentedSteps.map( ( step, index ) => (
<Loader.Layout key={ index }>
<Loader.Illustration>
{ step.image }
</Loader.Illustration>
<Loader.Title>{ step.title }</Loader.Title>
</Loader.Layout>
) ) }
</Loader.Sequence>
<Loader.ProgressBar
className="smooth-transition"
progress={ progress || 0 }
/>
</Loader>
<AssemblerHub />
</>
);
};
35 changes: 0 additions & 35 deletions plugins/woocommerce-admin/client/customize-store/design-without-ai/actions.ts
View file
@@ -1,50 +1,15 @@
/**
* External dependencies
*/
import { getNewPath } from '@woocommerce/navigation';
import { sendParent } from 'xstate';

/**
* Internal dependencies
*/
import { attachIframeListeners, onIframeLoad } from '../utils';
import { DesignWithoutAIStateMachineContext } from './types';
import { DesignWithoutAIStateMachineEvents } from './state-machine';

const redirectToAssemblerHub = async () => {
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';
};

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 );

// 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.
Expand Down
1 change: 1 addition & 0 deletions plugins/woocommerce-admin/client/customize-store/design-without-ai/index.tsx
View file
Expand Up @@ -49,6 +49,7 @@ export const DesignWithNoAiController = ( {

const [ CurrentComponent, setCurrentComponent ] =
useState< DesignWithoutAiComponent | null >( null );

useEffect( () => {
if ( currentNodeMeta?.component ) {
setCurrentComponent( () => currentNodeMeta?.component );
Expand Down

0 comments on commit 6e54c7d

Please sign in to comment.