woocommerce/plugins/woocommerce-admin/client/customize-store/assembler-hub/onboarding-tour/use-onboarding-tour.tsx

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,
};
};