woocommerce/plugins/woocommerce-admin/client/navigation/components/favorites-tooltip/index.js

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;