└── HelpButton.jsx


/HelpButton.jsx:
--------------------------------------------------------------------------------
  1 | import { useState, useMemo } from 'react';
  2 | import { connect } from 'react-redux';
  3 | import { setAlert } from '../../actions/alert';
  4 | import classes from './HelpButton.module.css';
  5 | import { FiHelpCircle } from 'react-icons/fi';
  6 | import { GrClose, GrUserManager } from 'react-icons/gr';
  7 | import {
  8 |   getHelpBtnSubject,
  9 |   helpBtnFields,
 10 |   validateHelpBtnForm
 11 | } from './HelpButton.service';
 12 | import { useRef } from 'react';
 13 | import { getEmailBody } from '../../utils/global.services';
 14 | import { sendEmail } from '../../actions/user';
 15 | import { TextEditor } from '../../UI/TextEditor/TextEditor';
 16 | import { Button, buttonTypes } from '../../UI/Button/Button';
 17 | 
 18 | const HelpButton = ({ auth: { user, emailLoading }, setAlert, sendEmail }) => {
 19 |   const textEditor = useRef(null);
 20 |   const [files, setAttachments] = useState([]);
 21 |   const [isOpen, setOpen] = useState(false);
 22 |   const [formData, setFormData] = useState(
 23 |     helpBtnFields.map((field) => ({
 24 |       value: '',
 25 |       isValid: true,
 26 |       ...field
 27 |     }))
 28 |   );
 29 |   const filesLimit = useMemo(() => 3, []);
 30 |   const fileTypes = useMemo(
 31 |     () => ['jpg', 'jpeg', 'png', 'gif', 'csv', 'pdf', 'txt'],
 32 |     []
 33 |   );
 34 | 
 35 |   const openForm = () => setOpen(!isOpen);
 36 | 
 37 |   const changeDescription = (e) => {
 38 |     setFormData(
 39 |       formData.map((data) => {
 40 |         if (data.name === 'question') {
 41 |           data.value = e.target.innerHTML;
 42 |         }
 43 |         return data;
 44 |       })
 45 |     );
 46 |   };
 47 | 
 48 |   const submitForm = async () => {
 49 |     const isValid = validateHelpBtnForm(formData, setFormData);
 50 |     if (isValid) {
 51 |       const mailData = {
 52 |         body: getEmailBody({
 53 |           data: [
 54 |             { label: 'Email', value: user.email },
 55 |             { label: 'Vendor Name', value: user.vendorname },
 56 |             ...formData
 57 |           ]
 58 |         }),
 59 |         subject: getHelpBtnSubject(user)
 60 |       };
 61 |       if (files.length) mailData.files = files;
 62 | 
 63 |       const res = await sendEmail({ data: mailData, hideAlert: true });
 64 |       if (res) {
 65 |         setFormData(
 66 |           formData.map((field) => {
 67 |             field.value = '';
 68 |             return field;
 69 |           })
 70 |         );
 71 |         if (textEditor.current) textEditor.current.innerHTML = '';
 72 |         setAttachments([]);
 73 |         setAlert(`We've received your email!`, 'success', 7000);
 74 |       } else {
 75 |         setAlert(
 76 |           'There was an error trying to send your message. Please try again.',
 77 |           'error',
 78 |           7000
 79 |         );
 80 |       }
 81 |     } else {
 82 |       setAlert('Some required fields are empty or incorrect', 'error', 5000);
 83 |     }
 84 |   };
 85 | 
 86 |   //if (user.role !== roles.vendor) return null;
 87 | 
 88 |   return (
 89 |     <div>
 90 |       <div
 91 |         className={`${classes.helpForm} ${
 92 |           !isOpen ? classes.helpFormDisabled : ''
 93 |         }`}
 94 |       >
 95 |         <h2 className={classes.helpButtonHeader}>How can we help?</h2>
 96 |         <div className={classes.helpFormBody}>
 97 |           <div className={classes.helpFormUser}>
 98 |             {user.avatar ? (
 99 |               <img
100 |                 src={user.avatar}
101 |                 alt="user avatar"
102 |                 className={classes.helpUserAvatar}
103 |               />
104 |             ) : (
105 |               <div className={classes.helpUserIconBox}>
106 |                 <GrUserManager className={classes.helpUserIcon} />
107 |               </div>
108 |             )}
109 |             <div className={classes.helpFormUserInfo}>
110 |               <p className={classes.helpFormUserName}>{user.vendorname}</p>
111 |               <p className={classes.helpFormUserEmail}>{user.email}</p>
112 |             </div>
113 |           </div>
114 |           <ul className={classes.helpButtonList}>
115 |             {formData.map((field) => (
116 |               <li key={field.name}>
117 |                 {field.type === 'texteditor' ? (
118 |                   <TextEditor
119 |                     containerClassName={classes.helpButtonTextContainer}
120 |                     isValid={field.isValid}
121 |                     onChange={changeDescription}
122 |                     placeholder={field.placeholder}
123 |                     editorRef={textEditor}
124 |                     files={files}
125 |                     fileTypes={fileTypes}
126 |                     filesLimit={filesLimit}
127 |                     setAttachments={setAttachments}
128 |                     setAlert={setAlert}
129 |                     loading={emailLoading}
130 |                     error={field.isValid ? '' : 'required'}
131 |                   />
132 |                 ) : null}
133 |               </li>
134 |             ))}
135 |           </ul>
136 |           <Button
137 |             className={classes.helpButtonSubmit}
138 |             buttonType={buttonTypes.SECONDARY}
139 |             onClick={submitForm}
140 |             disabled={emailLoading}
141 |             loading={emailLoading}
142 |           >
143 |             Submit
144 |           </Button>
145 |         </div>
146 |       </div>
147 |       <button
148 |         className={`${classes.helpButton} ${isOpen && classes.helpButtonClose}`}
149 |         onClick={openForm}
150 |       >
151 |         {isOpen ? (
152 |           <GrClose className={classes.helpButtonCloseIcon} />
153 |         ) : (
154 |           <FiHelpCircle className={classes.helpButtonIcon} />
155 |         )}
156 |       </button>
157 |     </div>
158 |   );
159 | };
160 | 
161 | const mapStateToProps = (state) => ({
162 |   auth: state.auth
163 | });
164 | 
165 | export default connect(mapStateToProps, { setAlert, sendEmail })(HelpButton);
166 | 


--------------------------------------------------------------------------------