| 1 |
import { useState, useEffect, useContext } from 'react'; |
| 2 |
|
| 3 |
import Page from 'elementor-app/layout/page'; |
| 4 |
import ContentLayout from '../shared/content-layout/content-layout'; |
| 5 |
import { infoButtonProps } from '../shared/info-modal/info-modal'; |
| 6 |
import ImportInfoModal from '../shared/info-modal/import-info-modal'; |
| 7 |
import ExportInfoModal from '../shared/info-modal/export-info-modal'; |
| 8 |
import { SharedContext } from '../context/shared-context/shared-context-provider'; |
| 9 |
import { appsEventTrackingDispatch } from 'elementor-app/event-track/apps-event-tracking'; |
| 10 |
|
| 11 |
import useQueryParams from 'elementor-app/hooks/use-query-params'; |
| 12 |
|
| 13 |
export default function Layout( props ) { |
| 14 |
const [ showInfoModal, setShowInfoModal ] = useState( false ), |
| 15 |
{ referrer } = useQueryParams().getAll(), |
| 16 |
sharedContext = useContext( SharedContext ), |
| 17 |
{ currentPage } = sharedContext.data, |
| 18 |
eventTracking = ( command, elementPosition = null, element = null, eventType = 'click', modalType = null ) => { |
| 19 |
if ( 'kit-library' === sharedContext.data.referrer || referrer ) { |
| 20 |
appsEventTrackingDispatch( |
| 21 |
command, |
| 22 |
{ |
| 23 |
element, |
| 24 |
page_source: 'import', |
| 25 |
event_type: eventType, |
| 26 |
step: currentPage, |
| 27 |
element_position: elementPosition, |
| 28 |
modal_type: modalType, |
| 29 |
}, |
| 30 |
); |
| 31 |
} |
| 32 |
}, |
| 33 |
onModalClose = ( e, command ) => { |
| 34 |
const element = e.target.classList.contains( 'eps-modal__overlay' ) ? 'overlay' : 'x'; |
| 35 |
eventTracking( command, element, null, 'info' ); |
| 36 |
}, |
| 37 |
getContent = () => { |
| 38 |
let infoModalProps = { |
| 39 |
show: showInfoModal, |
| 40 |
setShow: setShowInfoModal, |
| 41 |
}; |
| 42 |
|
| 43 |
if ( 'kit-library' === sharedContext.data.referrer || referrer ) { |
| 44 |
infoModalProps = { |
| 45 |
referrer, |
| 46 |
...infoModalProps, |
| 47 |
onOpen: () => eventTracking( 'kit-library/modal-open', null, null, 'load', 'info' ), |
| 48 |
onClose: ( e ) => onModalClose( e, 'kit-library/modal-close' ), |
| 49 |
}; |
| 50 |
} |
| 51 |
|
| 52 |
return ( |
| 53 |
<ContentLayout> |
| 54 |
{ props.children } |
| 55 |
{ 'import' === props.type ? <ImportInfoModal { ...infoModalProps } /> : <ExportInfoModal { ...infoModalProps } /> } |
| 56 |
</ContentLayout> |
| 57 |
); |
| 58 |
}, |
| 59 |
getInfoButtonProps = () => { |
| 60 |
return { |
| 61 |
...infoButtonProps, |
| 62 |
onClick: () => { |
| 63 |
eventTracking( 'kit-library/seek-more-info', 'app_header' ); |
| 64 |
setShowInfoModal( true ); |
| 65 |
}, |
| 66 |
}; |
| 67 |
}, |
| 68 |
onClose = () => { |
| 69 |
eventTracking( 'kit-library/close', 'app_header', null, 'click' ); |
| 70 |
window.top.location = elementorAppConfig.admin_url; |
| 71 |
}, |
| 72 |
config = { |
| 73 |
title: 'import' === props.type ? __( 'Import', 'elementor' ) : __( 'Export', 'elementor' ), |
| 74 |
headerButtons: [ getInfoButtonProps(), ...props.headerButtons ], |
| 75 |
content: getContent(), |
| 76 |
footer: props.footer, |
| 77 |
onClose: () => onClose(), |
| 78 |
}, |
| 79 |
moduleAdminTab = '#tab-import-export-kit'; |
| 80 |
|
| 81 |
// Targeting the return_url value to the import-export dedicated admin tab (only when there is no specific referrer). |
| 82 |
if ( ! referrer && -1 === elementorAppConfig.return_url.indexOf( moduleAdminTab ) && elementorAppConfig.return_url.includes( 'page=elementor-tools' ) ) { |
| 83 |
elementorAppConfig.return_url += moduleAdminTab; |
| 84 |
} |
| 85 |
|
| 86 |
useEffect( () => { |
| 87 |
if ( referrer ) { |
| 88 |
sharedContext.dispatch( { type: 'SET_REFERRER', payload: referrer } ); |
| 89 |
} |
| 90 |
}, [ referrer ] ); |
| 91 |
|
| 92 |
return <Page { ...config } />; |
| 93 |
} |
| 94 |
|
| 95 |
Layout.propTypes = { |
| 96 |
type: PropTypes.oneOf( [ 'import', 'export' ] ), |
| 97 |
headerButtons: PropTypes.arrayOf( PropTypes.object ), |
| 98 |
children: PropTypes.object.isRequired, |
| 99 |
footer: PropTypes.object, |
| 100 |
}; |
| 101 |
|
| 102 |
Layout.defaultProps = { |
| 103 |
headerButtons: [], |
| 104 |
}; |
| 105 |
|
