balmet.com

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

contact.js (3198B)

      1 /**
      2  * WordPress dependencies
      3  */
      4 import { __ } from '@wordpress/i18n'
      5 import CONFIG from '../config';
      6 import {CheckboxControl} from '@wordpress/components';
      7 
      8 const {compose} = wp.compose;
      9 const {useState} = wp.element;
     10 const {withDispatch, withSelect} = wp.data;
     11 
     12 
     13 const ratingStars = (
     14     <span className="rating-stars">
     15         <i className="fa fa-star"></i>
     16         <i className="fa fa-star"></i>
     17         <i className="fa fa-star"></i>
     18         <i className="fa fa-star"></i>
     19         <i className="fa fa-star"></i>
     20     </span>
     21 );
     22 
     23 function ChallengeContact(props) {
     24     const { setChallengeStep, setChallengeFinalStatus, setChallengeOpen } = props;
     25     const [comment, setComment] = useState('');
     26     const [agreeToContactFurther, setAgreement] = useState(false);
     27     const closeModal = () => {
     28         setChallengeStep(CONFIG.beginningStep);
     29         setChallengeFinalStatus('');
     30         setChallengeOpen(false);
     31     }
     32 
     33     const handleChange = (e) => {
     34         setComment(e.target.value);
     35     }
     36 
     37     const contactRedux = () => {
     38         //sending data
     39         console.log('contact information', comment, agreeToContactFurther);
     40         closeModal();
     41     }
     42 
     43     return (
     44         <div className="redux-templates-modal-overlay">
     45             <div className="redux-templates-modal-wrapper challenge-popup-wrapper">
     46                 <div className="challenge-popup-header challenge-popup-header-contact"
     47                     style={{ backgroundImage: `url(${redux_templates.plugin + 'assets/img/popup-contact.png'})` }}>
     48                     <a className="challenge-popup-close" onClick={closeModal}>
     49                         <i className='fas fa-times' />
     50                     </a>
     51                 </div>
     52                 <div className="challenge-popup-content challenge-contact">
     53                     <h3>{__('Help us improve Redux', redux_templates.i18n)}</h3>
     54                     <p>
     55                         {__('We\'re sorry that it took longer than 5 minutes to try our challenge. We aim to ensure our Block Template library is as beginner friendly as possible. Please take a moment to let us know how we can improve our challenge.', redux_templates.i18n)}
     56                     </p>
     57                     <textarea value={comment} onChange={handleChange}></textarea>
     58                     <CheckboxControl
     59                         label={__('Yes, I give Redux permission to contact me for any follow up questions.', redux_templates.i18n)}
     60                         checked={agreeToContactFurther}
     61                         onChange={() => setAgreement(!agreeToContactFurther)}
     62                     />
     63                     <button className="challenge-popup-btn challenge-popup-rate-btn" onClick={contactRedux}>
     64                         {__('Submit Feedback', redux_templates.i18n)}
     65                     </button>
     66                 </div>
     67             </div>
     68         </div>
     69     );
     70 }
     71 
     72 export default compose([
     73     withDispatch((dispatch) => {
     74         const { setChallengeStep, setChallengeFinalStatus, setChallengeOpen } = dispatch('redux-templates/sectionslist');
     75         return {
     76             setChallengeStep,
     77             setChallengeFinalStatus,
     78             setChallengeOpen
     79         };
     80     })
     81 ])(ChallengeContact);