index.js (8247B)
1 const {__} = wp.i18n; 2 const {compose} = wp.compose; 3 const {withDispatch, withSelect} = wp.data; 4 const {useState, useEffect} = wp.element; 5 const {apiFetch} = wp; 6 7 import InstallPluginStep from './InstallPluginStep'; 8 import ProPluginStep from './ProPluginsStep'; 9 import OptionStep from './OptionStep'; 10 import ImportingStep from './ImportingStep'; 11 import ReduxTemplatesPremiumBox from './ReduxTemplatesPremiumBox'; 12 import ReduxTemplatesPremiumActivate from './ReduxTemplatesPremiumActivate'; 13 import ReduxTemplatesActivateBox from './ReduxTemplatesActivateBox'; 14 15 import {requiresInstall, requiresPro, requiresReduxPro, isReduxProInstalled} from '~redux-templates/stores/dependencyHelper' 16 17 import '../modals.scss' 18 import './style.scss' 19 20 const PRO_STEP = 0; 21 const PLUGIN_STEP = 1; 22 const OPTION_STEP = 2; 23 const IMPORT_STEP = 3; 24 const REDUX_PRO_STEP = -10; 25 const REDUX_PRO_ACTIVATE_STEP = -9; 26 const REDUX_ACTIVATE_STEP = 999; 27 const tourPlugins = ['qubely', 'kioken-blocks']; 28 29 function ImportWizard(props) { 30 const {startImportTemplate, setImportingTemplate, setActivateDialogDisplay, appendErrorMessage} = props; 31 const {isChallengeOpen, importingTemplate, activateDialogDisplay, isPostEmpty, isInstalledDependencies} = props; 32 const [currentStep, setCurrentStep] = useState(PRO_STEP); 33 const [importing, setImporting] = useState(false); 34 const [activating, setActivating] = useState(false); 35 const [missingPlugins, setMissingPlugins] = useState([]); 36 37 useEffect(() => { 38 if (importingTemplate) { 39 if ( !importingTemplate.proDependenciesMissing ) { 40 importingTemplate.proDependenciesMissing = []; 41 } 42 if ( !importingTemplate.installDependenciesMissing ) { 43 importingTemplate.installDependenciesMissing = []; 44 } 45 // IMPORTANT First check: can you use redux pro? 46 const leftTry = isNaN(redux_templates.left) === false ? parseInt(redux_templates.left) : 0; 47 if ((!!(redux_templates.mokama) === false) && leftTry < 1 && currentStep !== REDUX_PRO_ACTIVATE_STEP ) { 48 if ( currentStep !== REDUX_ACTIVATE_STEP ) { 49 setCurrentStep(REDUX_PRO_STEP); 50 return; 51 } 52 } 53 /* Redux pro check */ 54 if (requiresReduxPro(importingTemplate)) { 55 if (currentStep !== REDUX_PRO_ACTIVATE_STEP) setCurrentStep(REDUX_PRO_STEP); 56 return; 57 } 58 // Start with Pro step 59 // When all OK with Pro Step, move to Plugin Step, on the way, prepare reduxProMergedPlugins. 60 if (importingTemplate && currentStep === PRO_STEP && requiresPro(importingTemplate) === false) { 61 setCurrentStep(PLUGIN_STEP); 62 if (isReduxProInstalled()) { 63 setMissingPlugins( 64 [].concat(importingTemplate.proDependenciesMissing, importingTemplate.installDependenciesMissing) 65 .filter(plugin => plugin) 66 ); 67 } else { 68 setMissingPlugins(importingTemplate.installDependenciesMissing.filter(plugin => plugin)); 69 } 70 71 } 72 if (importingTemplate && currentStep === PLUGIN_STEP && requiresInstall(importingTemplate) === false) 73 if (isPostEmpty === false) setCurrentStep(OPTION_STEP); else setCurrentStep(IMPORT_STEP); 74 if (importingTemplate && currentStep === OPTION_STEP && isPostEmpty === true) 75 setCurrentStep(IMPORT_STEP); 76 if (importingTemplate && currentStep === IMPORT_STEP && importing === false) { 77 setImporting(true); 78 try { 79 startImportTemplate(); 80 } catch (e) { 81 console.log('importing exception', e); 82 setImporting(false); 83 setCurrentStep(PLUGIN_STEP); 84 setImportingTemplate(null); 85 } 86 } 87 } 88 }, [importingTemplate, currentStep, activateDialogDisplay]) 89 90 // Activate dialog display 91 useEffect(() => { 92 if (activateDialogDisplay === true) { // Activate dialog hard reset case 93 setCurrentStep(REDUX_ACTIVATE_STEP); 94 setActivateDialogDisplay(false); 95 } 96 }, [activateDialogDisplay]); 97 98 // On the initial loading 99 useEffect(() => { 100 setActivateDialogDisplay(false); 101 }, []); 102 103 const toNextStep = () => { 104 if (isChallengeOpen) return; 105 setCurrentStep(currentStep + 1); 106 }; 107 108 const toPluginStep = () => { 109 setCurrentStep(PRO_STEP); 110 }; 111 const toProActivateStep = () => { 112 setCurrentStep(REDUX_PRO_ACTIVATE_STEP); 113 }; 114 115 const onCloseWizard = () => { 116 if (isChallengeOpen) return; // When in tour mode, we don't accept mouse event. 117 if (importing) return; 118 setCurrentStep(PLUGIN_STEP); 119 setImportingTemplate(null); 120 }; 121 122 const activateReduxTracking = () => { 123 setActivating(true); 124 apiFetch({path: 'redux/v1/templates/activate'}).then(response => { 125 if (response.success) { 126 redux_templates.left = response.data.left; 127 } 128 setCurrentStep(PRO_STEP); 129 setActivating(false); 130 }).catch(error => { 131 appendErrorMessage(error.code + ' : ' + error.message); 132 setCurrentStep(PRO_STEP); 133 setActivating(false); 134 }); 135 } 136 137 138 if (isChallengeOpen) { 139 // exception handling for tour mode 140 if (currentStep !== PLUGIN_STEP) setCurrentStep(PLUGIN_STEP) 141 } 142 143 if (!importingTemplate) return null; 144 return ( 145 <div className="redux-templates-modal-overlay"> 146 <div className="redux-templates-modal-wrapper" data-tut="tour__import_wizard"> 147 <div className="redux-templates-modal-header"> 148 <h3>{__('Import Wizard', redux_templates.i18n)}</h3> 149 <button className="redux-templates-modal-close" onClick={onCloseWizard}> 150 <i className={'fas fa-times'}/> 151 </button> 152 </div> 153 <div className="redux-templates-importmodal-content"> 154 {(currentStep === PRO_STEP) && requiresPro(importingTemplate) && 155 <ProPluginStep missingPros={importingTemplate.proDependenciesMissing } onCloseWizard={onCloseWizard} />} 156 {(currentStep === PLUGIN_STEP) && 157 <InstallPluginStep missingPlugins={isChallengeOpen ? tourPlugins : missingPlugins} toNextStep={toNextStep} 158 onCloseWizard={onCloseWizard}/>} 159 {currentStep === OPTION_STEP && <OptionStep toNextStep={toNextStep} onCloseWizard={onCloseWizard} />} 160 {currentStep === IMPORT_STEP && <ImportingStep />} 161 {currentStep === REDUX_ACTIVATE_STEP && <ReduxTemplatesActivateBox onActivateRedux={activateReduxTracking} activating={activating} />} 162 {currentStep === REDUX_PRO_ACTIVATE_STEP && <ReduxTemplatesPremiumActivate toPluginStep={toPluginStep} />} 163 {currentStep === REDUX_PRO_STEP && <ReduxTemplatesPremiumBox toProActivateStep={toProActivateStep} />} 164 {isInstalledDependencies && <iframe src='./' width="0" height="0" />} 165 </div> 166 </div> 167 </div> 168 ); 169 } 170 171 172 export default compose([ 173 withDispatch((dispatch) => { 174 const {setImportingTemplate, setActivateDialogDisplay, appendErrorMessage} = dispatch('redux-templates/sectionslist'); 175 return { 176 setImportingTemplate, 177 setActivateDialogDisplay, 178 appendErrorMessage 179 }; 180 }), 181 182 withSelect((select, props) => { 183 const {getChallengeOpen, getImportingTemplate, getActivateDialogDisplay, getInstalledDependencies} = select('redux-templates/sectionslist'); 184 const {isEditedPostEmpty} = select('core/editor'); 185 return { 186 isChallengeOpen: getChallengeOpen(), 187 importingTemplate: getImportingTemplate(), 188 activateDialogDisplay: getActivateDialogDisplay(), 189 isPostEmpty: isEditedPostEmpty(), 190 isInstalledDependencies: getInstalledDependencies() 191 }; 192 }) 193 ])(ImportWizard);