index.js
61 lines
| 1 | import { memo, useEffect, useState } from '@wordpress/element'; |
| 2 | import { Button, Popover } from '@wordpress/components'; |
| 3 | import { __ } from '@wordpress/i18n'; |
| 4 | import './styles.scss'; |
| 5 | import { store as coreStore } from '@wordpress/core-data'; |
| 6 | import { useSelect } from '@wordpress/data'; |
| 7 | import apiFetch from '@wordpress/api-fetch'; |
| 8 | |
| 9 | const OnboardPopover = memo( function OnboardPopover( { onboardingKey, children } ) { |
| 10 | const [ showOnboard, setShowOnboard ] = useState( false ); |
| 11 | const user = useSelect( ( select ) => select( coreStore )?.getCurrentUser(), [] ); |
| 12 | |
| 13 | useEffect( function() { |
| 14 | if ( |
| 15 | sessionStorage.getItem( `generateblocks_onboarding_${ onboardingKey }` ) !== '1' && |
| 16 | ! user?.meta?.generateblocks_onboarding[ onboardingKey ] |
| 17 | ) { |
| 18 | setShowOnboard( true ); |
| 19 | } |
| 20 | }, [ user?.id, JSON.stringify( user?.meta ), onboardingKey ] ); |
| 21 | |
| 22 | return ( |
| 23 | <> |
| 24 | { showOnboard && |
| 25 | <Popover |
| 26 | position="bottom right" |
| 27 | className="gb-onboard-popover" |
| 28 | focusOnMount={ true } |
| 29 | noArrow={ false } |
| 30 | variant="toolbar" |
| 31 | offset={ 10 } |
| 32 | flip={ true } |
| 33 | > |
| 34 | { children } |
| 35 | <div className="gb-onboard-popover__button"> |
| 36 | <Button |
| 37 | variant="primary" |
| 38 | onClick={ () => { |
| 39 | apiFetch( { |
| 40 | path: '/generateblocks/v1/onboarding', |
| 41 | method: 'POST', |
| 42 | data: { |
| 43 | key: onboardingKey, |
| 44 | }, |
| 45 | } ).then( () => { |
| 46 | setShowOnboard( false ); |
| 47 | sessionStorage.setItem( `generateblocks_onboarding_${ onboardingKey }`, '1' ); |
| 48 | } ); |
| 49 | } } |
| 50 | > |
| 51 | { __( 'Got it', 'generateblocks' ) } |
| 52 | </Button> |
| 53 | </div> |
| 54 | </Popover> |
| 55 | } |
| 56 | </> |
| 57 | ); |
| 58 | } ); |
| 59 | |
| 60 | export default OnboardPopover; |
| 61 |