OwlCyberSecurity - MANAGER
Edit File: ImportSingleTemplate.jsx
import React, { useEffect, useState } from 'react' import Button from '../Buttons/Button' import ExternalLinkButton from '../Buttons/ExternalLinkButton' import ImportElementorTemplateImages from '../Actions/ImportElementorTemplateImages' import { getImportedTemplateUrl } from '../../utils/linkGenerator' import getSingleTemplateImportData from '../../api/getSingleTemplateImportData' import importSingleTemplate from '../../api/importSingleTemplate' import useGlobalConfig from '../Contexts/useGlobalConfig' const ImportTemplateInBackground = ({ templateKitId, templateId, importAgain, insertToPage, completeCallback }) => { const { loading, error, data } = importSingleTemplate({ templateKitId, templateId, importAgain, insertToPage }) useEffect(() => { if (!loading && !error && data && data.imported_template_id) { // If we have finished loading (i.e. importing the template has finished) completeCallback(data) } }, [loading]) return null } const GetTemplateData = ({ templateKitId, templateId, completeCallback }) => { const { loading, error, data } = getSingleTemplateImportData({ templateKitId, templateId }) useEffect(() => { if (!loading && !error && data && data.template_data) { // We get some JSON back of the template we wish to import completeCallback(data.template_data) } }, [loading]) return null } /** * * @param templateKitId * @param templateId * @param existingImports * @returns {*} * @constructor */ const ImportSingleTemplate = ({ templateKitId, templateId, existingImports = [] }) => { // Determines what type of mode we're in, this changes the button we choose to render on each templates kit. const { getMagicButtonMode } = useGlobalConfig() const magicButtonMode = getMagicButtonMode() const isElementorMagicMode = magicButtonMode && magicButtonMode.mode === 'elementorMagicButton' // Here we store the ID number of the latest imported template. // We use this ID further down to generate a URL to the installed template and show that in a button to the user const [importedTemplateId, setImportedTemplateId] = useState(isElementorMagicMode ? null : (existingImports.length ? existingImports[0].imported_template_id : null)) // This is the JSON data for the Template we wish to import: const [templateDataToImport, setTemplateDataToImport] = useState(null) // This is the progress percent (stored as 0.4 for 40%) for the import process, reflected in the button label: const [importProgress, setImportProgress] = useState(0) // This is the import state we used to control what buttons are visible / what react hooks we mount in: const [importState, setImportState] = useState('idle') // This decides if we should import the templatea gain a second time. const [importTemplateAgain, setImportTemplateAgain] = useState(false) // This is the button the user clicks when they wish to start importing a template: const StartImportButton = importedTemplateId ? ( <Button type='ghost' label='Import Again' icon='plus' onClick={() => { setImportProgress(0) setImportTemplateAgain(true) setImportState('importingFetchJsonData') }} /> ) : ( <Button type='primary' label={isElementorMagicMode ? 'Insert Template' : 'Import Template'} icon='plus' onClick={() => { setImportProgress(0) setImportState('importingFetchJsonData') }} /> ) // This is the importing button we display to the user during the import process: const ImportingButton = <Button type='primary' label={`Importing ${Math.round(importProgress * 100)}%`} icon='updateSpinning' disabled /> // This is the button that goes to imported template: const ImportedTemplateButton = <ExternalLinkButton href={getImportedTemplateUrl({ importedTemplateId })} type='primary' label='View Template' icon='eye' openNewWindow /> return ( <> {importedTemplateId ? ImportedTemplateButton : null} {importState === 'idle' ? StartImportButton : null} {importState === 'importingFetchJsonData' || importState === 'importingImages' || importState === 'importingTemplate' ? ImportingButton : null} {importState === 'importingFetchJsonData' ? ( <GetTemplateData templateKitId={templateKitId} templateId={templateId} completeCallback={(data) => { // This means we've collected the Elementor JSOn data correctly, time to import these images: setTemplateDataToImport(data) setImportState('importingImages') }} /> ) : null} {importState === 'importingImages' ? ( <ImportElementorTemplateImages templateData={templateDataToImport} progressCallback={(importProgress) => { setImportProgress(importProgress) }} completeCallback={() => { // This means we've imported the template images correctly, time to fire off the final json import. setImportState('importingTemplate') }} /> ) : null} {importState === 'importingTemplate' ? ( <ImportTemplateInBackground templateKitId={templateKitId} templateId={templateId} importAgain={importTemplateAgain} insertToPage={isElementorMagicMode} completeCallback={(data) => { // This means the final template import has been completed and we have a template ID ready to go if (data && data.imported_template_id) { setImportProgress(1) setTimeout(() => { setImportedTemplateId(data.imported_template_id) setImportState('idle') }, 300) // Fire off the magic button insert callback if it exists if (isElementorMagicMode && magicButtonMode.insertCallback && typeof magicButtonMode.insertCallback === 'function') { magicButtonMode.insertCallback(data) } } }} /> ) : null} </> ) } export default ImportSingleTemplate