modal.js (4879B)
1 const {__} = wp.i18n; 2 const {useState, useEffect} = wp.element; 3 const {apiFetch} = wp; 4 import {installedBlocksTypes} from '~redux-templates/stores/actionHelper'; 5 import {Modal, ModalManager} from '../modal-manager' 6 import './style.scss' 7 8 export default function FeedbackModal(props) { 9 const {importedData, handledBlock, invalidBlocks} = props; 10 const [description, setDescription] = useState(''); 11 const [loading, setLoading] = useState(false); 12 const [sendingThemePlugins, setSendingThemePlugins] = useState(true); 13 const [sendingContent, setSendingContent] = useState(true); 14 const [errorMessage, setErrorMessage] = useState(''); 15 const [panelClassname, setPanelClassname] = useState('panel') 16 17 const submitFeedback = () => { 18 if (loading) return; 19 setLoading(true); 20 21 let data = { 22 description, 23 'theme_plugins': sendingThemePlugins, 24 'template_id': importedData.hash 25 }; 26 if (sendingContent) { 27 data.content = handledBlock; 28 } 29 apiFetch({ 30 path: 'redux-templates/v1/feedback/', 31 method: 'POST', 32 headers: {'Registered-Blocks': installedBlocksTypes()}, 33 data 34 }).then(data => { 35 setLoading(false); 36 if (data.success) { 37 setPanelClassname('panel fade') 38 } else { 39 setErrorMessage(__('An Error occured', redux_templates.i18n)); 40 } 41 }).catch(err => { 42 setLoading(false); 43 setErrorMessage(__('There was an error: ', redux_templates.i18n) + err.message); 44 }); 45 } 46 47 const onCloseWizard = () => { 48 ModalManager.close(); 49 } 50 51 useEffect(() => { 52 if (invalidBlocks && invalidBlocks.length > 0) { 53 setDescription( 54 invalidBlocks.map(block => { 55 if (block.validationIssues && Array.isArray(block.validationIssues)) 56 return block.validationIssues.map(error => { 57 return sprintf(...error.args) 58 }).join('\n'); 59 else 60 return null; 61 }).join('\n') 62 ); 63 } 64 }, [invalidBlocks]); 65 66 return ( 67 <Modal compactMode={true}> 68 <div className="redux-templates-feedback-modal-wrapper"> 69 <div className="redux-templates-modal-header"> 70 <h3>{__('Feedback Wizard', redux_templates.i18n)}</h3> 71 <button className="redux-templates-modal-close" onClick={onCloseWizard}> 72 <i className={'fas fa-times'}/> 73 </button> 74 </div> 75 <div className="redux-templates-feedback"> 76 { 77 errorMessage.length > 0 && 78 <div className="error-panel"> 79 {errorMessage} 80 </div> 81 } 82 <h4>{__('Thank you for reporting an issue.', redux_templates.i18n)}</h4> 83 <div className={panelClassname}> 84 <p>{__('We want to make Redux perfect. Please send whatever you are comfortable sending, and we will do our best to resolve the problem.', redux_templates.i18n)}</p> 85 <div className="field"> 86 <input type="checkbox" id="theme_plugins" checked={sendingThemePlugins} onChange={() => setSendingThemePlugins(!sendingThemePlugins)} /> 87 <label htmlFor="theme_plugins">Send theme and plugins</label> 88 </div> 89 <div className="field"> 90 <input type="checkbox" id="content" checked={sendingContent} onChange={() => setSendingContent(!sendingContent)} /> 91 <label htmlFor="content">Send page content</label> 92 </div> 93 <div className="field"> 94 <label htmlFor="template_id">Template ID</label> 95 <input type="input" id="template_id" disabled="disabled" value={importedData.hash} /> 96 </div> 97 <div className="field top"> 98 <label>Description</label> 99 <textarea value={description} onChange={(e) => setDescription(e.target.value)} /> 100 </div> 101 <button className="button button-primary" onClick={submitFeedback}> 102 {loading ? <i className="fas fa-spinner fa-pulse"/> : 103 <i className="fas fa-share"></i>} Submit Feedback 104 </button> 105 </div> 106 </div> 107 </div> 108 </Modal> 109 ); 110 }