33 lines
1022 B
TypeScript
33 lines
1022 B
TypeScript
|
/**
|
||
|
|
* External dependencies
|
||
|
|
*/
|
||
|
|
import { useEffect, useState } from '@wordpress/element';
|
||
|
|
import { useLocalStorageState } from '@woocommerce/base-hooks';
|
||
|
|
|
||
|
|
const initialDismissedNotices: string[] = [];
|
||
|
|
|
||
|
|
export const useCompatibilityNotice = (
|
||
|
|
blockName: string
|
||
|
|
): [ boolean, () => void ] => {
|
||
|
|
const [ dismissedNotices, setDismissedNotices ] = useLocalStorageState(
|
||
|
|
`wc-blocks_dismissed_compatibility_notices`,
|
||
|
|
initialDismissedNotices
|
||
|
|
);
|
||
|
|
const [ isVisible, setIsVisible ] = useState( false );
|
||
|
|
|
||
|
|
const isDismissed = dismissedNotices.includes( blockName );
|
||
|
|
const dismissNotice = () => {
|
||
|
|
const dismissedNoticesSet = new Set( dismissedNotices );
|
||
|
|
dismissedNoticesSet.add( blockName );
|
||
|
|
setDismissedNotices( [ ...dismissedNoticesSet ] );
|
||
|
|
};
|
||
|
|
|
||
|
|
// This ensures the modal is not loaded on first render. This is required so
|
||
|
|
// Gutenberg doesn't steal the focus from the Guide and focuses the block.
|
||
|
|
useEffect( () => {
|
||
|
|
setIsVisible( ! isDismissed );
|
||
|
|
}, [ isDismissed ] );
|
||
|
|
|
||
|
|
return [ isVisible, dismissNotice ];
|
||
|
|
};
|