64 lines
1.6 KiB
JavaScript
64 lines
1.6 KiB
JavaScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { __ } from '@wordpress/i18n';
|
|
import { NAVIGATION_STORE_NAME, OPTIONS_STORE_NAME } from '@woocommerce/data';
|
|
import { useDispatch, useSelect } from '@wordpress/data';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { HighlightTooltip } from '~/activity-panel/highlight-tooltip';
|
|
|
|
const tooltipHiddenOption = 'woocommerce_navigation_favorites_tooltip_hidden';
|
|
|
|
export const FavoritesTooltip = () => {
|
|
const {
|
|
isFavoritesResolving,
|
|
isOptionResolving,
|
|
isTooltipHidden,
|
|
} = useSelect( ( select ) => {
|
|
const { getOption, isResolving } = select( OPTIONS_STORE_NAME );
|
|
return {
|
|
isFavoritesResolving: select( NAVIGATION_STORE_NAME ).isResolving(
|
|
'getFavorites'
|
|
),
|
|
isOptionResolving: isResolving( 'getOption', [
|
|
tooltipHiddenOption,
|
|
] ),
|
|
isTooltipHidden: getOption( tooltipHiddenOption ) === 'yes',
|
|
};
|
|
} );
|
|
|
|
const { updateOptions } = useDispatch( OPTIONS_STORE_NAME );
|
|
|
|
if ( isFavoritesResolving || isTooltipHidden || isOptionResolving ) {
|
|
return null;
|
|
}
|
|
|
|
if ( document.body.classList.contains( 'is-wc-nav-folded' ) ) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<HighlightTooltip
|
|
delay={ 1000 }
|
|
title={ __( 'Introducing favorites', 'woocommerce' ) }
|
|
content={ __(
|
|
'You can now favorite your extensions to pin them in the top level of the navigation.',
|
|
'woocommerce'
|
|
) }
|
|
closeButtonText={ __( 'Got it', 'woocommerce' ) }
|
|
id="woocommerce-navigation-favorite-button"
|
|
onClose={ () =>
|
|
updateOptions( {
|
|
[ tooltipHiddenOption ]: 'yes',
|
|
} )
|
|
}
|
|
useAnchor
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default FavoritesTooltip;
|