| 1 |
import { useRef, useContext, useEffect } from 'react'; |
| 2 |
import { OnboardingContext } from '../../context/context'; |
| 3 |
|
| 4 |
import Header from './header'; |
| 5 |
import ProgressBar from '../progress-bar/progress-bar'; |
| 6 |
import Content from '../../../../../../assets/js/layout/content'; |
| 7 |
import Connect from '../../utils/connect'; |
| 8 |
|
| 9 |
export default function Layout( props ) { |
| 10 |
useEffect( () => { |
| 11 |
// Send modal load event for current step. |
| 12 |
elementorCommon.events.dispatchEvent( { |
| 13 |
event: 'modal load', |
| 14 |
version: '', |
| 15 |
details: { |
| 16 |
placement: elementorAppConfig.onboarding.eventPlacement, |
| 17 |
step: props.pageId, |
| 18 |
user_state: elementorCommon.config.library_connect.is_connected ? 'logged' : 'anon', |
| 19 |
}, |
| 20 |
} ); |
| 21 |
|
| 22 |
updateState( { |
| 23 |
currentStep: props.pageId, |
| 24 |
nextStep: props.nextStep || '', |
| 25 |
proNotice: null, |
| 26 |
} ); |
| 27 |
}, [ props.pageId ] ); |
| 28 |
|
| 29 |
const { state, updateState } = useContext( OnboardingContext ), |
| 30 |
headerButtons = [], |
| 31 |
goProButtonRef = useRef(), |
| 32 |
createAccountButton = { |
| 33 |
id: 'create-account', |
| 34 |
text: __( 'Create Account', 'elementor-pro' ), |
| 35 |
hideText: false, |
| 36 |
elRef: useRef(), |
| 37 |
url: elementorAppConfig.onboarding.urls.signUp + elementorAppConfig.onboarding.utms.connectTopBar, |
| 38 |
target: '_blank', |
| 39 |
rel: 'opener', |
| 40 |
onClick: () => { |
| 41 |
elementorCommon.events.dispatchEvent( { |
| 42 |
event: 'create account', |
| 43 |
version: '', |
| 44 |
details: { |
| 45 |
placement: elementorAppConfig.onboarding.eventPlacement, |
| 46 |
step: state.currentStep, |
| 47 |
source: 'header', |
| 48 |
}, |
| 49 |
} ); |
| 50 |
}, |
| 51 |
}; |
| 52 |
|
| 53 |
if ( state.isLibraryConnected ) { |
| 54 |
headerButtons.push( { |
| 55 |
id: 'my-elementor', |
| 56 |
text: __( 'My Elementor', 'elementor-pro' ), |
| 57 |
hideText: false, |
| 58 |
icon: 'eicon-user-circle-o', |
| 59 |
url: 'https://my.elementor.com/?utm_source=onboarding-wizard&utm_medium=wp-dash&utm_campaign=my-account&utm_content=top-bar&utm_term=' + elementorAppConfig.onboarding.onboardingVersion, |
| 60 |
target: '_blank', |
| 61 |
onClick: () => { |
| 62 |
elementorCommon.events.dispatchEvent( { |
| 63 |
event: 'my elementor click', |
| 64 |
version: '', |
| 65 |
details: { |
| 66 |
placement: elementorAppConfig.onboarding.eventPlacement, |
| 67 |
step: state.currentStep, |
| 68 |
source: 'header', |
| 69 |
}, |
| 70 |
} ); |
| 71 |
}, |
| 72 |
} ); |
| 73 |
} else { |
| 74 |
headerButtons.push( createAccountButton ); |
| 75 |
} |
| 76 |
|
| 77 |
if ( ! state.hasPro ) { |
| 78 |
headerButtons.push( { |
| 79 |
id: 'go-pro', |
| 80 |
text: __( 'Upgrade', 'elementor' ), |
| 81 |
hideText: false, |
| 82 |
className: 'eps-button__go-pro-btn', |
| 83 |
url: 'https://elementor.com/pro/?utm_source=onboarding-wizard&utm_campaign=gopro&utm_medium=wp-dash&utm_content=top-bar&utm_term=' + elementorAppConfig.onboarding.onboardingVersion, |
| 84 |
target: '_blank', |
| 85 |
elRef: goProButtonRef, |
| 86 |
onClick: () => { |
| 87 |
elementorCommon.events.dispatchEvent( { |
| 88 |
event: 'go pro', |
| 89 |
version: '', |
| 90 |
details: { |
| 91 |
placement: elementorAppConfig.onboarding.eventPlacement, |
| 92 |
step: state.currentStep, |
| 93 |
}, |
| 94 |
} ); |
| 95 |
}, |
| 96 |
} ); |
| 97 |
} |
| 98 |
|
| 99 |
return ( |
| 100 |
<div className="eps-app__lightbox"> |
| 101 |
<div className="eps-app e-onboarding"> |
| 102 |
{ ! state.isLibraryConnected && |
| 103 |
<Connect |
| 104 |
buttonRef={ createAccountButton.elRef } |
| 105 |
/> |
| 106 |
} |
| 107 |
<Header |
| 108 |
title={ __( 'Getting Started', 'elementor' ) } |
| 109 |
buttons={ headerButtons } |
| 110 |
/> |
| 111 |
<div className={ 'eps-app__main e-onboarding__page-' + props.pageId }> |
| 112 |
<Content className="e-onboarding__content"> |
| 113 |
<ProgressBar /> |
| 114 |
{ props.children } |
| 115 |
</Content> |
| 116 |
</div> |
| 117 |
</div> |
| 118 |
</div> |
| 119 |
); |
| 120 |
} |
| 121 |
|
| 122 |
Layout.propTypes = { |
| 123 |
pageId: PropTypes.string.isRequired, |
| 124 |
nextStep: PropTypes.string, |
| 125 |
className: PropTypes.string, |
| 126 |
children: PropTypes.any.isRequired, |
| 127 |
}; |
| 128 |
|
