File "layout.js"
Full Path: /home/warrior1/public_html/languages/wp-content/plugins/elementor/app/modules/onboarding/assets/js/components/layout/layout.js
File size: 3.49 KB
MIME-type: text/x-java
Charset: utf-8
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,
};