Create New Item
Item Type
File
Folder
Item Name
Search file in folder and subfolders...
Are you sure want to rename?
primogenial
/
languages
/
wp-content
/
plugins
/
elementor
/
app
/
modules
/
onboarding
/
assets
/
js
/
components
/
layout
:
layout.js
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
import { useRef, useContext, useEffect } from 'react'; import { OnboardingContext } from '../../context/context'; import Header from './header'; import ProgressBar from '../progress-bar/progress-bar'; import Content from '../../../../../../assets/js/layout/content'; import Connect from '../../utils/connect'; export default function Layout( props ) { useEffect( () => { // Send modal load event for current step. elementorCommon.events.dispatchEvent( { event: 'modal load', version: '', details: { placement: elementorAppConfig.onboarding.eventPlacement, step: props.pageId, user_state: elementorCommon.config.library_connect.is_connected ? 'logged' : 'anon', }, } ); updateState( { currentStep: props.pageId, nextStep: props.nextStep || '', proNotice: null, } ); }, [ props.pageId ] ); const { state, updateState } = useContext( OnboardingContext ), headerButtons = [], goProButtonRef = useRef(), createAccountButton = { id: 'create-account', text: __( 'Create Account', 'elementor-pro' ), hideText: false, elRef: useRef(), url: elementorAppConfig.onboarding.urls.signUp + elementorAppConfig.onboarding.utms.connectTopBar, target: '_blank', rel: 'opener', onClick: () => { elementorCommon.events.dispatchEvent( { event: 'create account', version: '', details: { placement: elementorAppConfig.onboarding.eventPlacement, step: state.currentStep, source: 'header', }, } ); }, }; if ( state.isLibraryConnected ) { headerButtons.push( { id: 'my-elementor', text: __( 'My Elementor', 'elementor-pro' ), hideText: false, icon: 'eicon-user-circle-o', 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, target: '_blank', onClick: () => { elementorCommon.events.dispatchEvent( { event: 'my elementor click', version: '', details: { placement: elementorAppConfig.onboarding.eventPlacement, step: state.currentStep, source: 'header', }, } ); }, } ); } else { headerButtons.push( createAccountButton ); } if ( ! state.hasPro ) { headerButtons.push( { id: 'go-pro', text: __( 'Upgrade', 'elementor' ), hideText: false, className: 'eps-button__go-pro-btn', 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, target: '_blank', elRef: goProButtonRef, onClick: () => { elementorCommon.events.dispatchEvent( { event: 'go pro', version: '', details: { placement: elementorAppConfig.onboarding.eventPlacement, step: state.currentStep, }, } ); }, } ); } return ( <div className="eps-app__lightbox"> <div className="eps-app e-onboarding"> { ! state.isLibraryConnected && <Connect buttonRef={ createAccountButton.elRef } /> } <Header title={ __( 'Getting Started', 'elementor' ) } buttons={ headerButtons } /> <div className={ 'eps-app__main e-onboarding__page-' + props.pageId }> <Content className="e-onboarding__content"> <ProgressBar /> { props.children } </Content> </div> </div> </div> ); } Layout.propTypes = { pageId: PropTypes.string.isRequired, nextStep: PropTypes.string, className: PropTypes.string, children: PropTypes.any.isRequired, };