balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

index.js (3494B)

      1 /**
      2  * WordPress dependencies
      3  */
      4 import { __ } from '@wordpress/i18n'
      5 import { ModalManager } from '~redux-templates/modal-manager';
      6 import Form from '@rjsf/core';
      7 import {BlockPreview} from '@wordpress/block-editor';
      8 const {useState} = wp.element;
      9 const {apiFetch} = wp;
     10 
     11 function FeedbackDialog(props) {
     12     const {title, description, schema, uiSchema, headerImage, headerIcon, data, ignoreData, endpoint, width, buttonLabel} = props;
     13     const {closeModal, onSuccess} = props;
     14 
     15     const [loading, setLoading] = useState(false);
     16     const [errorMessage, setErrorMessage] = useState(null);
     17 
     18     const onSubmit = ({formData}) => {
     19         const path = `redux/v1/templates/${endpoint ? endpoint : 'feedback'}`;
     20         if (loading) return;
     21         setLoading(true);
     22         apiFetch({
     23             path,
     24             method: 'POST',
     25             data: ignoreData ? formData : {...data, ...formData}
     26         }).then(data => {
     27             setLoading(false);
     28             if (data.success) {
     29                 setErrorMessage(null);
     30                 if (onSuccess) onSuccess(data); else onCloseModal();
     31             } else {
     32                 console.log('There was an error: ', data);
     33                 setErrorMessage(__('An unexpected error occured, please try again later.', redux_templates.i18n));
     34             }
     35         }).catch(err => {
     36             setLoading(false);
     37             console.log('There was an error: ', err);
     38             setErrorMessage(__('An unexpected error occured, please try again later.', redux_templates.i18n));
     39         });
     40     }
     41 
     42     const onCloseModal = () => {
     43         if (closeModal) closeModal(); else ModalManager.closeFeedback();
     44     }
     45 
     46     const style = width ? {width} : null;
     47     const wrapperClassname = width ? 'redux-templates-modal-wrapper feedback-popup-wrapper less-margin' : 'redux-templates-modal-wrapper feedback-popup-wrapper';
     48 
     49     return (
     50         <div className="redux-templates-modal-overlay">
     51             <div className={wrapperClassname} style={style}>
     52                 <div className="feedback-popup-header feedback-popup-header-contact">
     53                     {headerImage}
     54                     {headerIcon}
     55                     <a className="feedback-popup-close" onClick={onCloseModal}>
     56                         <i className='fas fa-times' />
     57                     </a>
     58                 </div>
     59                 <div className="feedback-popup-content">
     60                     <h3>{title}</h3>
     61                     {errorMessage && <p className="error-message">{errorMessage}</p>}
     62                     <p>{description}</p>
     63                     <div className="col-wrapper">
     64                         <Form schema={schema} uiSchema={uiSchema} onSubmit={onSubmit}>
     65                             <button className="feedback-popup-btn feedback-popup-rate-btn" type="submit">
     66                                 {loading && <i className="fas fa-spinner fa-pulse"/>}
     67                                 {buttonLabel}
     68                             </button>
     69                         </Form>
     70                         { data && data.editor_blocks &&
     71                             <div className="preview-panel">
     72                                 <div className="redux-templates-block-preview-hover" />
     73                                 <BlockPreview blocks={data.editor_blocks} />
     74                             </div>
     75                         }
     76                     </div>
     77                 </div> {/* /.feedback-popup-content */}
     78             </div>
     79         </div>
     80     );
     81 }
     82 
     83 export default FeedbackDialog;