| 1 |
import Header from '../../components/layout/header'; |
| 2 |
import { ModalProvider, Heading, Text, Button } from '@elementor/app-ui'; |
| 3 |
import { useMemo, useState, useRef } from 'react'; |
| 4 |
import { useNavigate } from '@reach/router'; |
| 5 |
import PopoverDialog from 'elementor-app/ui/popover-dialog/popover-dialog'; |
| 6 |
import { appsEventTrackingDispatch } from 'elementor-app/event-track/apps-event-tracking'; |
| 7 |
|
| 8 |
import './index-header.scss'; |
| 9 |
|
| 10 |
export default function IndexHeader( props ) { |
| 11 |
const navigate = useNavigate(); |
| 12 |
const [ isInfoModalOpen, setIsInfoModalOpen ] = useState( false ); |
| 13 |
const importRef = useRef(); |
| 14 |
const eventTracking = ( command, element = null, eventType = 'click', modalType = null ) => { |
| 15 |
appsEventTrackingDispatch( |
| 16 |
command, |
| 17 |
{ |
| 18 |
element, |
| 19 |
event_type: eventType, |
| 20 |
page_source: 'home page', |
| 21 |
element_position: 'app_header', |
| 22 |
modal_type: modalType, |
| 23 |
}, |
| 24 |
); |
| 25 |
}; |
| 26 |
const onClose = ( e ) => { |
| 27 |
const element = e.target.classList.contains( 'eps-modal__overlay' ) ? 'overlay' : 'x'; |
| 28 |
eventTracking( 'kit-library/modal-close', element, null, 'info' ); |
| 29 |
}; |
| 30 |
const buttons = useMemo( () => [ |
| 31 |
{ |
| 32 |
id: 'info', |
| 33 |
text: __( 'Info', 'elementor-pro' ), |
| 34 |
hideText: true, |
| 35 |
icon: 'eicon-info-circle-o', |
| 36 |
onClick: () => { |
| 37 |
eventTracking( 'kit-library/seek-more-info' ); |
| 38 |
setIsInfoModalOpen( true ); |
| 39 |
}, |
| 40 |
}, |
| 41 |
{ |
| 42 |
id: 'refetch', |
| 43 |
text: __( 'Refetch', 'elementor-pro' ), |
| 44 |
hideText: true, |
| 45 |
icon: `eicon-sync ${ props.isFetching ? 'eicon-animation-spin' : '' }`, |
| 46 |
onClick: () => { |
| 47 |
eventTracking( 'kit-library/refetch' ); |
| 48 |
props.refetch(); |
| 49 |
}, |
| 50 |
}, |
| 51 |
{ |
| 52 |
id: 'import', |
| 53 |
text: __( 'Import', 'elementor-pro' ), |
| 54 |
hideText: true, |
| 55 |
icon: 'eicon-upload-circle-o', |
| 56 |
elRef: importRef, |
| 57 |
onClick: () => { |
| 58 |
eventTracking( 'kit-library/kit-import' ); |
| 59 |
navigate( '/import?referrer=kit-library' ); |
| 60 |
}, |
| 61 |
}, |
| 62 |
], [ props.isFetching, props.refetch ] ); |
| 63 |
|
| 64 |
return ( |
| 65 |
<> |
| 66 |
<Header buttons={ buttons } /> |
| 67 |
<PopoverDialog |
| 68 |
targetRef={ importRef } |
| 69 |
wrapperClass="e-kit-library__tooltip" |
| 70 |
> |
| 71 |
{ __( 'Import Kit', 'elementor' ) } |
| 72 |
</PopoverDialog> |
| 73 |
<ModalProvider title={ __( 'Welcome to the Library', 'elementor' ) } |
| 74 |
show={ isInfoModalOpen } |
| 75 |
setShow={ setIsInfoModalOpen } |
| 76 |
onOpen={ () => eventTracking( 'kit-library/modal-open', null, 'load', 'info' ) } |
| 77 |
onClose={ ( e ) => onClose( e ) } |
| 78 |
> |
| 79 |
<div className="e-kit-library-header-info-modal-container"> |
| 80 |
<Heading tag="h3" variant="h3">{ __( 'What\'s a Website Kit?', 'elementor' ) }</Heading> |
| 81 |
<Text>{ __( 'A Website Kit is full, ready-made design that you can apply to your site. It includes all the pages, parts, settings and content that you\'d expect in a fully functional website.', 'elementor' ) }</Text> |
| 82 |
</div> |
| 83 |
<div className="e-kit-library-header-info-modal-container"> |
| 84 |
<Heading tag="h3" variant="h3">{ __( 'What\'s going on in the Kit Library?', 'elementor' ) }</Heading> |
| 85 |
<Text> |
| 86 |
{ __( 'Search & filter for kits by category and tags, or browse through individual kits to see what\'s inside.', 'elementor' ) } |
| 87 |
<br /> |
| 88 |
{ __( 'Once you\'ve picked a winner, apply it to your site!', 'elementor' ) } |
| 89 |
</Text> |
| 90 |
</div> |
| 91 |
<div> |
| 92 |
<Heading tag="h3" variant="h3">{ __( 'Happy browsing!', 'elementor' ) }</Heading> |
| 93 |
<Text> |
| 94 |
<Button |
| 95 |
url="https://go.elementor.com/app-kit-library-how-to-use-kits/" |
| 96 |
target="_blank" |
| 97 |
rel="noreferrer" |
| 98 |
text={ __( 'Learn more', 'elementor' ) } |
| 99 |
color="link" |
| 100 |
onClick={ () => { |
| 101 |
eventTracking( 'kit-library/seek-more-info', 'text link', null, 'info' ); |
| 102 |
} } |
| 103 |
/>{ ' ' } |
| 104 |
{ __( 'about using templates', 'elementor' ) } |
| 105 |
</Text> |
| 106 |
</div> |
| 107 |
</ModalProvider> |
| 108 |
</> |
| 109 |
); |
| 110 |
} |
| 111 |
|
| 112 |
IndexHeader.propTypes = { |
| 113 |
refetch: PropTypes.func.isRequired, |
| 114 |
isFetching: PropTypes.bool, |
| 115 |
}; |
| 116 |
|
