index.js (2995B)
1 const {__} = wp.i18n; 2 const { apiFetch } = wp; 3 const { dispatch } = wp.data; 4 const { useState } = wp.element; 5 const { createSuccessNotice, createErrorNotice } = dispatch('core/notices'); 6 7 import { Button, ButtonGroup, TextareaControl } from '@wordpress/components'; 8 import { withState } from '@wordpress/compose'; 9 10 import '../modals.scss'; 11 import './style.scss'; 12 13 export default function PromotorScoreModal(props) { 14 const {propOnClose} = props; // from parent 15 const [score, setScore] = useState(-1); 16 const message = useState(''); 17 18 19 const afterPost = (response) => { 20 if (response.success) { 21 createSuccessNotice(__('Thanks for your feedback, your input is very much valued.'), { type: 'snackbar' }); 22 } else { 23 // createErrorNotice(response.data.message || __('Error'), { type: 'snackbar' }); 24 } 25 delete redux_templates.nps; 26 } 27 28 const onCloseWizard = () => { 29 apiFetch({path: 'redux/v1/templates/nps', method: 'POST', data: {nps: 'no-thanks'}}).then(afterPost).catch(afterPost); 30 propOnClose(); 31 }; 32 33 const submitScore = () => { 34 apiFetch({path: 'redux/v1/templates/nps', method: 'POST', data: {nps: score + 1}}).then(afterPost).catch(afterPost); 35 propOnClose(); 36 } 37 38 39 return ( 40 <div className="redux-templates-modal-overlay"> 41 <div className="redux-templates-modal-wrapper"> 42 <div className="redux-templates-modal-header"> 43 <h3>{__('Can we ask you a question?', redux_templates.i18n)}</h3> 44 <button className="redux-templates-modal-close" onClick={onCloseWizard}> 45 <i className={'fas fa-times'}/> 46 </button> 47 </div> 48 <div className="redux-templates-psmodal-content"> 49 <h3>{redux_templates.nps}</h3> 50 <ButtonGroup> 51 { 52 [...Array(10).keys()].map((i) => <Button key={i} isPrimary={score === i} onClick={()=>setScore(i)}>{ i + 1 }</Button>) 53 } 54 </ButtonGroup> 55 { -1 !== score && score < 5 && 56 <TextareaControl 57 // label="Could you tell us more?" 58 help="Could you give us more details?" 59 value={ message } 60 // onChange={() => setState( { message } ) } 61 /> 62 } 63 </div> 64 <div className="redux-templates-modal-footer nps-footer"> 65 <button className="button button-primary" disabled={-1 === score} onClick={() => submitScore()}> 66 {__('Submit', redux_templates.i18n)} 67 </button> 68 <a href="#" onClick={onCloseWizard}> 69 {__('Close', redux_templates.i18n)} 70 </a> 71 </div> 72 </div> 73 </div> 74 ); 75 };