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

/**
 * 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-admin' ) }
			content={ __(
				'You can now favorite your extensions to pin them in the top level of the navigation.',
				'woocommerce-admin'
			) }
			closeButtonText={ __( 'Got it', 'woocommerce-admin' ) }
			id="woocommerce-navigation-favorite-button"
			onClose={ () =>
				updateOptions( {
					[ tooltipHiddenOption ]: 'yes',
				} )
			}
			useAnchor
		/>
	);
};

export default FavoritesTooltip;