ReduxTemplatesPremiumActivate.js (4180B)
1 const {__, sprintf} = wp.i18n; 2 const {useState} = wp.element; 3 const {apiFetch} = wp; 4 5 export default function ReduxTemplatesPremiumActivate(props) { 6 7 const [installing, setInstalling] = useState(null); 8 const [status, setStatus] = useState(__('Enter your API key to activate and install your copy of Redux Pro.', redux_templates.i18n)); 9 const [statusType, setStatusType] = useState(''); 10 const [proKey, setProKey] = useState( atob( redux_templates.key ) ); 11 const {toPluginStep} = props; 12 13 const installReduxPlugin = async () => { 14 if ( ! redux_templates.supported_plugins['redux-framework'].plugin ) { 15 setStatus(__('Installing the redux-framework plugin.', redux_templates.i18n)); 16 await apiFetch({ 17 path: 'redux/v1/templates/plugin-install?slug=redux-framework', 18 }).then(res => { 19 if (res.success) { 20 installReduxPro(); 21 } else { 22 setStatus(__('Install of Redux Pro failed, please try again.', redux_templates.i18n)); 23 setInstalling(null); 24 } 25 }) 26 .catch(res => { 27 setStatus(__('There seems to be an API issue. Please contact Redux support or try again.', redux_templates.i18n)); 28 setInstalling(null); 29 }); 30 } else { 31 installReduxPro(); 32 } 33 }; 34 35 const installReduxPro = async () => { 36 if ( ! redux_templates.supported_plugins['redux-pro'].version ) { 37 setStatus(__('Installing Redux Pro.', redux_templates.i18n)); 38 await apiFetch({ 39 path: 'redux/v1/templates/plugin-install?slug=redux-pro&redux_pro=1', 40 }).then(res => { 41 if (res.success) { 42 setStatus(__('Redux Pro successfully installed!', redux_templates.i18n)); 43 redux_templates.mokama = true; 44 delete redux_templates.left; 45 toPluginStep(); 46 } else { 47 setStatus(__('Install of Redux Pro failed, please try again.', redux_templates.i18n)); 48 } 49 }) 50 .catch(res => { 51 setStatus(__('There seems to be an API issue. Please contact Redux support or try again.', redux_templates.i18n)); 52 setInstalling(null); 53 }); 54 } else { 55 redux_templates.mokama = true; 56 delete redux_templates.left; 57 toPluginStep(); 58 } 59 }; 60 61 const activateKey = async () => { 62 setInstalling(true); 63 setStatus(__('Validating license key.', redux_templates.i18n)); 64 await apiFetch({ 65 path: 'redux/v1/templates/license?key=' + proKey, 66 }).then(res => { 67 if (res.success) { 68 setStatus(__('API key activated, installing Redux Pro.', redux_templates.i18n)); 69 installReduxPlugin(); 70 } else { 71 if ( res.msg ) { 72 setStatus(res.msg); 73 } else { 74 setStatus(__('License key failed to activate. Please try again.', redux_templates.i18n)); 75 } 76 setInstalling(null); 77 } 78 }).catch(res => { 79 setStatus(__('There seems to be an API issue. Please contact Redux support or try again.', redux_templates.i18n)); 80 setInstalling(null); 81 }); 82 }; 83 84 const updateProKey = (e) => { 85 setProKey(e.target.value); 86 } 87 88 return ( 89 <div className="redux-templates-modal-body"> 90 <div className="section-box premium-box"> 91 <h3>{__('Activate Redux Pro', redux_templates.i18n)}</h3> 92 93 <div className={statusType}>{status}</div> 94 95 <p> 96 <input type="text" placeholder={__('Enter your subscription key', redux_templates.i18n)} value={proKey} onChange={updateProKey} disabled={installing !== null} /> 97 </p> 98 <p className="subscription_key"> 99 <button className="redux-pro-activate-button" aria-label="Activate my key" disabled={installing !== null} 100 onClick={() => activateKey()}> 101 {installing !== null && <i className="fas fa-spinner fa-pulse"/>} 102 <span>{__('Activate & Install Pro', redux_templates.i18n)}</span> 103 </button> 104 </p> 105 <p style={{fontSize:'1.1em', paddingTop:'10px'}}><small><em dangerouslySetInnerHTML={{__html: redux_templates.tos.replace(__('Register', redux_templates.i18n), __('Activate', redux_templates.i18n))}} /> <br /><span dangerouslySetInnerHTML={{__html: sprintf( __( 'Visit the <a href="%s" target="_blank">account dashboard</a> to recover your subscription key.', redux_templates.i18n ), 'https://redux.io/account/?utm_source=plugin-installation&utm_campaign=import_wizard&utm_medium=appsero&utm_content=activate_pro' )}} /></small> 106 </p> 107 </div> 108 </div> 109 ); 110 }