CategoryCard.jsx
4 days ago
FAQs.jsx
4 days ago
PaidSupport.jsx
4 days ago
SearchBox.jsx
4 days ago
SupportForum.jsx
4 days ago
TicketModal.jsx
4 days ago
Videos.jsx
4 days ago
TicketModal.jsx
396 lines
| 1 | /** |
| 2 | * External Dependencies |
| 3 | */ |
| 4 | import { __, sprintf } from '@wordpress/i18n'; |
| 5 | import { Modal } from '@wordpress/components'; |
| 6 | import { useRef, useState } from '@wordpress/element'; |
| 7 | |
| 8 | /** |
| 9 | * Internal Dependencies |
| 10 | */ |
| 11 | import { siteInfo } from '@advancedAds'; |
| 12 | import { createToast } from '@advancedAds/utils'; |
| 13 | import { FileUploaderField } from '@admin/components/FileUploaderField'; |
| 14 | |
| 15 | import { base64ToBlob, validate } from '../utils'; |
| 16 | |
| 17 | const TICKET_API = |
| 18 | 'https://wpadvancedads.com/wp-json/advanced-ads/v1/create-ticket'; |
| 19 | |
| 20 | export function TicketModal( { closeModal } ) { |
| 21 | const uploaderRef = useRef( null ); |
| 22 | |
| 23 | const [ email, setEmail ] = useState( siteInfo.currentUserEmail ?? '' ); |
| 24 | const [ subject, setSubject ] = useState( '' ); |
| 25 | const [ message, setMessage ] = useState( '' ); |
| 26 | const [ termsAccepted, setTermsAccepted ] = useState( false ); |
| 27 | |
| 28 | const [ errors, setErrors ] = useState( {} ); |
| 29 | const [ isSubmitting, setIsSubmitting ] = useState( false ); |
| 30 | |
| 31 | const p2 = sprintf( |
| 32 | /* translators: 1: opening a tag, 2: opening a tag, 3: closing a tag */ |
| 33 | __( |
| 34 | 'By submitting this form, I accept the %1$sTerms%3$s and %2$sPrivacy Policy%3$s and consent that my personal information in this form will be stored and processed for the purposes of providing support.', |
| 35 | 'advanced-ads' |
| 36 | ), |
| 37 | '<a href="https://wpadvancedads.com/terms/" target="_blank">', |
| 38 | '<a href="https://wpadvancedads.com/privacy-policy/" target="_blank">', |
| 39 | '</a>' |
| 40 | ); |
| 41 | |
| 42 | async function handleSubmit( e ) { |
| 43 | e.preventDefault(); |
| 44 | |
| 45 | const { next, trimmedEmail, trimmedSubject, trimmedMessage } = validate( |
| 46 | email, |
| 47 | subject, |
| 48 | message, |
| 49 | termsAccepted |
| 50 | ); |
| 51 | setErrors( next ); |
| 52 | |
| 53 | if ( Object.keys( next ).length > 0 ) { |
| 54 | return; |
| 55 | } |
| 56 | |
| 57 | const uploader = uploaderRef.current; |
| 58 | const selectedFiles = uploader?.selectedFiles ?? []; |
| 59 | const hasFiles = selectedFiles.length > 0; |
| 60 | |
| 61 | const basePayload = { |
| 62 | email: trimmedEmail, |
| 63 | subject: trimmedSubject, |
| 64 | message: trimmedMessage, |
| 65 | terms: termsAccepted ? 'on' : '', |
| 66 | domain: siteInfo.siteUrl, |
| 67 | php_version: siteInfo.phpVersion, |
| 68 | wp_version: siteInfo.wpVersion, |
| 69 | }; |
| 70 | |
| 71 | setIsSubmitting( true ); |
| 72 | |
| 73 | let submitBody; |
| 74 | /** @type {Record<string, string>} */ |
| 75 | const headers = {}; |
| 76 | |
| 77 | if ( hasFiles ) { |
| 78 | const submitFormData = new FormData(); |
| 79 | for ( const [ key, value ] of Object.entries( basePayload ) ) { |
| 80 | submitFormData.append( key, String( value ) ); |
| 81 | } |
| 82 | selectedFiles.forEach( ( fileObj ) => { |
| 83 | const blob = base64ToBlob( fileObj.fileimage ); |
| 84 | submitFormData.append( |
| 85 | 'attachments[]', |
| 86 | blob, |
| 87 | fileObj.filename |
| 88 | ); |
| 89 | } ); |
| 90 | submitBody = submitFormData; |
| 91 | } else { |
| 92 | submitBody = JSON.stringify( basePayload ); |
| 93 | headers[ 'Content-Type' ] = 'application/json'; |
| 94 | } |
| 95 | |
| 96 | try { |
| 97 | const response = await fetch( TICKET_API, { |
| 98 | method: 'POST', |
| 99 | body: submitBody, |
| 100 | headers, |
| 101 | } ); |
| 102 | |
| 103 | if ( response.ok ) { |
| 104 | uploader?.reset?.(); |
| 105 | closeModal(); |
| 106 | createToast( { |
| 107 | type: 'muted', |
| 108 | iconType: 'success', |
| 109 | title: __( 'Ticket submitted', 'advanced-ads' ), |
| 110 | message: __( |
| 111 | 'Your ticket has been submitted successfully.', |
| 112 | 'advanced-ads' |
| 113 | ), |
| 114 | } ); |
| 115 | return; |
| 116 | } |
| 117 | |
| 118 | throw new Error( __( 'Failed to submit form', 'advanced-ads' ) ); |
| 119 | } catch ( error ) { |
| 120 | createToast( { |
| 121 | type: 'error', |
| 122 | title: __( 'Failed to submit form', 'advanced-ads' ), |
| 123 | message: |
| 124 | error instanceof Error |
| 125 | ? error.message |
| 126 | : __( 'Something went wrong.', 'advanced-ads' ), |
| 127 | inDialog: true, |
| 128 | } ); |
| 129 | } finally { |
| 130 | setIsSubmitting( false ); |
| 131 | } |
| 132 | } |
| 133 | |
| 134 | return ( |
| 135 | <Modal |
| 136 | title={ __( 'Get help from our support team', 'advanced-ads' ) } |
| 137 | size="small" |
| 138 | onRequestClose={ closeModal } |
| 139 | shouldCloseOnEscape={ true } |
| 140 | shouldCloseOnClickOutside={ false } |
| 141 | className="advads-modal w-lg max-w-lg" |
| 142 | overlayClassName="bg-black/50 backdrop-blur-[1px]" |
| 143 | > |
| 144 | <p className="mt-0"> |
| 145 | { __( |
| 146 | 'Describe your issue and our support team will review it as soon as possible. You’ll receive a confirmation email after submitting your request.', |
| 147 | 'advanced-ads' |
| 148 | ) } |
| 149 | </p> |
| 150 | |
| 151 | <form onSubmit={ handleSubmit }> |
| 152 | <div className="advads-form"> |
| 153 | <div |
| 154 | className={ |
| 155 | 'advads-field' + ( errors.email ? ' invalid' : '' ) |
| 156 | } |
| 157 | > |
| 158 | <div className="advads-field-label"> |
| 159 | <label htmlFor="email"> |
| 160 | { __( 'Email address', 'advanced-ads' ) } * |
| 161 | </label> |
| 162 | </div> |
| 163 | <div className="advads-field-input"> |
| 164 | <input |
| 165 | type="email" |
| 166 | name="email" |
| 167 | id="email" |
| 168 | className="regular-text" |
| 169 | autoComplete="email" |
| 170 | placeholder={ __( |
| 171 | 'Enter your email address', |
| 172 | 'advanced-ads' |
| 173 | ) } |
| 174 | value={ email } |
| 175 | onChange={ ( ev ) => { |
| 176 | setEmail( ev.target.value ); |
| 177 | if ( errors.email ) { |
| 178 | setErrors( ( prev ) => { |
| 179 | const next = { ...prev }; |
| 180 | delete next.email; |
| 181 | return next; |
| 182 | } ); |
| 183 | } |
| 184 | } } |
| 185 | aria-invalid={ errors.email ? 'true' : 'false' } |
| 186 | aria-describedby={ |
| 187 | errors.email ? 'email-error' : undefined |
| 188 | } |
| 189 | /> |
| 190 | </div> |
| 191 | { errors.email && ( |
| 192 | <p |
| 193 | id="email-error" |
| 194 | className="text-sm text-red-600 mt-2" |
| 195 | role="alert" |
| 196 | > |
| 197 | { errors.email } |
| 198 | </p> |
| 199 | ) } |
| 200 | </div> |
| 201 | |
| 202 | <div |
| 203 | className={ |
| 204 | 'advads-field' + |
| 205 | ( errors.subject ? ' invalid' : '' ) |
| 206 | } |
| 207 | > |
| 208 | <div className="advads-field-label"> |
| 209 | <label htmlFor="subject"> |
| 210 | { __( 'Subject', 'advanced-ads' ) } * |
| 211 | </label> |
| 212 | </div> |
| 213 | <div className="advads-field-input"> |
| 214 | <input |
| 215 | type="text" |
| 216 | name="subject" |
| 217 | id="subject" |
| 218 | className="regular-text" |
| 219 | placeholder={ __( |
| 220 | 'Enter the subject of your issue', |
| 221 | 'advanced-ads' |
| 222 | ) } |
| 223 | value={ subject } |
| 224 | onChange={ ( ev ) => { |
| 225 | setSubject( ev.target.value ); |
| 226 | if ( errors.subject ) { |
| 227 | setErrors( ( prev ) => { |
| 228 | const next = { ...prev }; |
| 229 | delete next.subject; |
| 230 | return next; |
| 231 | } ); |
| 232 | } |
| 233 | } } |
| 234 | aria-invalid={ |
| 235 | errors.subject ? 'true' : 'false' |
| 236 | } |
| 237 | aria-describedby={ |
| 238 | errors.subject ? 'subject-error' : undefined |
| 239 | } |
| 240 | /> |
| 241 | </div> |
| 242 | { errors.subject && ( |
| 243 | <p |
| 244 | id="subject-error" |
| 245 | className="text-sm text-red-600 mt-2" |
| 246 | role="alert" |
| 247 | > |
| 248 | { errors.subject } |
| 249 | </p> |
| 250 | ) } |
| 251 | </div> |
| 252 | |
| 253 | <div |
| 254 | className={ |
| 255 | 'advads-field' + |
| 256 | ( errors.message ? ' invalid' : '' ) |
| 257 | } |
| 258 | > |
| 259 | <div className="advads-field-label"> |
| 260 | <label htmlFor="message"> |
| 261 | { __( 'Your Message', 'advanced-ads' ) } * |
| 262 | </label> |
| 263 | </div> |
| 264 | <div className="advads-field-input"> |
| 265 | <textarea |
| 266 | name="message" |
| 267 | id="message" |
| 268 | className={ |
| 269 | 'large-text' + |
| 270 | ( errors.message ? ' !border-red-300' : '' ) |
| 271 | } |
| 272 | placeholder={ __( |
| 273 | 'Enter the message of your issue', |
| 274 | 'advanced-ads' |
| 275 | ) } |
| 276 | rows="5" |
| 277 | value={ message } |
| 278 | onChange={ ( ev ) => { |
| 279 | setMessage( ev.target.value ); |
| 280 | if ( errors.message ) { |
| 281 | setErrors( ( prev ) => { |
| 282 | const next = { ...prev }; |
| 283 | delete next.message; |
| 284 | return next; |
| 285 | } ); |
| 286 | } |
| 287 | } } |
| 288 | aria-invalid={ |
| 289 | errors.message ? 'true' : 'false' |
| 290 | } |
| 291 | aria-describedby={ |
| 292 | errors.message ? 'message-error' : undefined |
| 293 | } |
| 294 | /> |
| 295 | </div> |
| 296 | { errors.message && ( |
| 297 | <p |
| 298 | id="message-error" |
| 299 | className="text-sm text-red-600 mt-2" |
| 300 | role="alert" |
| 301 | > |
| 302 | { errors.message } |
| 303 | </p> |
| 304 | ) } |
| 305 | </div> |
| 306 | |
| 307 | <div className="advads-field"> |
| 308 | <FileUploaderField |
| 309 | uploaderRef={ uploaderRef } |
| 310 | maxFiles={ 5 } |
| 311 | maxSizeMB={ 5 } |
| 312 | allowedExt={ [ |
| 313 | 'jpg', |
| 314 | 'jpeg', |
| 315 | 'png', |
| 316 | 'gif', |
| 317 | 'pdf', |
| 318 | 'txt', |
| 319 | 'docx', |
| 320 | 'log', |
| 321 | ] } |
| 322 | /> |
| 323 | </div> |
| 324 | |
| 325 | <div |
| 326 | className={ |
| 327 | 'advads-field' + ( errors.terms ? ' invalid' : '' ) |
| 328 | } |
| 329 | > |
| 330 | <div className="flex items-start gap-2"> |
| 331 | <input |
| 332 | type="checkbox" |
| 333 | name="terms" |
| 334 | id="terms" |
| 335 | className="mt-0.5" |
| 336 | checked={ termsAccepted } |
| 337 | onChange={ ( ev ) => { |
| 338 | setTermsAccepted( ev.target.checked ); |
| 339 | if ( errors.terms ) { |
| 340 | setErrors( ( prev ) => { |
| 341 | const next = { ...prev }; |
| 342 | delete next.terms; |
| 343 | return next; |
| 344 | } ); |
| 345 | } |
| 346 | } } |
| 347 | aria-labelledby="terms-consent-label" |
| 348 | aria-invalid={ errors.terms ? 'true' : 'false' } |
| 349 | aria-describedby={ |
| 350 | errors.terms ? 'terms-error' : undefined |
| 351 | } |
| 352 | /> |
| 353 | <label |
| 354 | htmlFor="terms" |
| 355 | id="terms-consent-label" |
| 356 | dangerouslySetInnerHTML={ { __html: p2 } } |
| 357 | /> |
| 358 | </div> |
| 359 | { errors.terms && ( |
| 360 | <p |
| 361 | id="terms-error" |
| 362 | className="text-sm text-red-600 mt-2" |
| 363 | role="alert" |
| 364 | > |
| 365 | { errors.terms } |
| 366 | </p> |
| 367 | ) } |
| 368 | </div> |
| 369 | </div> |
| 370 | |
| 371 | <div className="pt-12 flex gap-x-4 justify-end -mb-2"> |
| 372 | <button |
| 373 | type="button" |
| 374 | data-dialog-close |
| 375 | className="button button-secondary" |
| 376 | onClick={ closeModal } |
| 377 | disabled={ isSubmitting } |
| 378 | > |
| 379 | { __( 'Cancel', 'advanced-ads' ) } |
| 380 | </button> |
| 381 | <button |
| 382 | type="submit" |
| 383 | className={ |
| 384 | 'button button-primary' + |
| 385 | ( isSubmitting ? ' submitting' : '' ) |
| 386 | } |
| 387 | disabled={ isSubmitting } |
| 388 | > |
| 389 | { __( 'Submit', 'advanced-ads' ) } |
| 390 | </button> |
| 391 | </div> |
| 392 | </form> |
| 393 | </Modal> |
| 394 | ); |
| 395 | } |
| 396 |