47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { OPTIONS_STORE_NAME } from '@woocommerce/data';
|
|
import { useSelect, useDispatch } from '@wordpress/data';
|
|
import { useState } from 'react';
|
|
|
|
export const CUSTOMIZE_STORE_ONBOARDING_TOUR_HIDDEN =
|
|
'woocommerce_customize_store_onboarding_tour_hidden';
|
|
|
|
export const useOnboardingTour = () => {
|
|
const [ showWelcomeTour, setShowWelcomeTour ] = useState( true );
|
|
const [ isResizeHandleVisible, setIsResizeHandleVisible ] =
|
|
useState( true );
|
|
|
|
const { updateOptions } = useDispatch( OPTIONS_STORE_NAME );
|
|
const { shouldTourBeShown } = useSelect( ( select ) => {
|
|
const { getOption, hasFinishedResolution } =
|
|
select( OPTIONS_STORE_NAME );
|
|
|
|
const wasTourShown =
|
|
getOption( CUSTOMIZE_STORE_ONBOARDING_TOUR_HIDDEN ) === 'yes' ||
|
|
! hasFinishedResolution( 'getOption', [
|
|
CUSTOMIZE_STORE_ONBOARDING_TOUR_HIDDEN,
|
|
] );
|
|
|
|
return {
|
|
shouldTourBeShown: ! wasTourShown,
|
|
};
|
|
} );
|
|
|
|
const onClose = () => {
|
|
updateOptions( {
|
|
[ CUSTOMIZE_STORE_ONBOARDING_TOUR_HIDDEN ]: 'yes',
|
|
} );
|
|
};
|
|
|
|
return {
|
|
onClose,
|
|
shouldTourBeShown,
|
|
showWelcomeTour,
|
|
setShowWelcomeTour,
|
|
setIsResizeHandleVisible,
|
|
isResizeHandleVisible,
|
|
};
|
|
};
|