| 1 |
import Box from '@elementor/ui/Box'; |
| 2 |
import { ThemeProvider } from '@elementor/ui/styles'; |
| 3 |
import { __ } from '@wordpress/i18n'; |
| 4 |
import { useCallback, useState } from 'react'; |
| 5 |
|
| 6 |
import { useAdminContext } from '../hooks/use-admin-context'; |
| 7 |
import Modal from '@elementor/ui/Modal'; |
| 8 |
|
| 9 |
import { TopBarContent } from '../components/top-bar/top-bar-content'; |
| 10 |
import { GetStarted } from '../components/onboarding/screens/get-started'; |
| 11 |
import Spinner from '../components/spinner/spinner'; |
| 12 |
import { InstallKit } from '../components/onboarding/screens/install-kit'; |
| 13 |
import { ReadyToGo } from '../components/onboarding/screens/ready-to-go'; |
| 14 |
import { Preview } from '../components/onboarding/screens/preview'; |
| 15 |
|
| 16 |
export const OnboardingPage = () => { |
| 17 |
const [ message, setMessage ] = useState( '' ); |
| 18 |
const [ severity, setSeverity ] = useState( 'info' ); |
| 19 |
const [ previewKit, setPreviewKit ] = useState( null ); |
| 20 |
|
| 21 |
const { |
| 22 |
isLoading, |
| 23 |
setIsLoading, |
| 24 |
stepAction, |
| 25 |
buttonText, |
| 26 |
step, |
| 27 |
onboardingSettings: { nonce, modalCloseRedirectUrl, kits } = {}, |
| 28 |
} = useAdminContext(); |
| 29 |
|
| 30 |
const onClick = useCallback( async () => { |
| 31 |
setMessage( '' ); |
| 32 |
|
| 33 |
const data = { |
| 34 |
step: stepAction, |
| 35 |
_wpnonce: nonce, |
| 36 |
slug: 'elementor', |
| 37 |
}; |
| 38 |
|
| 39 |
setIsLoading( true ); |
| 40 |
|
| 41 |
try { |
| 42 |
switch ( stepAction ) { |
| 43 |
case 'install-elementor': |
| 44 |
const response = await wp.ajax.post( 'helloplus_setup_wizard', data ); |
| 45 |
|
| 46 |
if ( response.activateUrl ) { |
| 47 |
const activate = await fetch( response.activateUrl ); |
| 48 |
|
| 49 |
if ( activate.ok ) { |
| 50 |
window.location.reload(); |
| 51 |
} else { |
| 52 |
throw new Error( __( 'Failed to activate Elementor plugin', 'hello-plus' ) ); |
| 53 |
} |
| 54 |
} |
| 55 |
break; |
| 56 |
case 'activate-elementor': |
| 57 |
await wp.ajax.post( 'helloplus_setup_wizard', data ); |
| 58 |
|
| 59 |
window.location.reload(); |
| 60 |
break; |
| 61 |
default: |
| 62 |
break; |
| 63 |
} |
| 64 |
} catch ( error ) { |
| 65 |
setMessage( error.errorMessage ); |
| 66 |
setSeverity( 'error' ); |
| 67 |
} finally { |
| 68 |
setIsLoading( false ); |
| 69 |
} |
| 70 |
}, [ nonce, setIsLoading, stepAction ] ); |
| 71 |
|
| 72 |
const onClose = () => { |
| 73 |
window.location.href = modalCloseRedirectUrl; |
| 74 |
}; |
| 75 |
|
| 76 |
return ( |
| 77 |
<ThemeProvider colorScheme="auto"> |
| 78 |
<Modal open sx={ { zIndex: 100000 } } > |
| 79 |
<Box sx={ { |
| 80 |
backgroundColor: 'background.default', |
| 81 |
position: 'fixed', |
| 82 |
top: 0, |
| 83 |
left: 0, |
| 84 |
width: '100%', |
| 85 |
height: '100%', |
| 86 |
boxShadow: 24, |
| 87 |
display: 'flex', |
| 88 |
flexDirection: 'column', |
| 89 |
} }> |
| 90 |
{ ! previewKit && ( <TopBarContent onClose={ onClose } sx={ { borderBottom: '1px solid var(--divider-divider, rgba(0, 0, 0, 0.12))', mb: 4 } } iconSize="small" /> ) } |
| 91 |
{ 0 === step && ! isLoading && ! previewKit && ( |
| 92 |
<GetStarted severity={ severity } message={ message } buttonText={ buttonText } onClick={ onClick } /> |
| 93 |
) } |
| 94 |
{ 1 === step && ! isLoading && ! previewKit && ( <InstallKit setPreviewKit={ setPreviewKit } severity={ severity } message={ message } onClick={ onClick } kits={ kits } /> ) } |
| 95 |
{ 2 === step && ! isLoading && ! previewKit && ( <ReadyToGo modalCloseRedirectUrl={ modalCloseRedirectUrl } /> ) } |
| 96 |
{ previewKit && <Preview kit={ previewKit } setPreviewKit={ setPreviewKit } /> } |
| 97 |
{ isLoading && <Spinner /> } |
| 98 |
</Box> |
| 99 |
</Modal> |
| 100 |
</ThemeProvider> |
| 101 |
); |
| 102 |
}; |
| 103 |
|
