DemoSiteTemplatesImport.js
3 years ago
FeedbackNotice.js
1 year ago
Filters.js
1 year ago
ImportTemplatesModal.js
1 year ago
Library.js
1 year ago
ListItem.js
1 year ago
PreviewFrame.js
1 year ago
common.js
2 years ago
FeedbackNotice.js
256 lines
| 1 | import classnames from 'classnames'; |
| 2 | import { __ } from '@wordpress/i18n'; |
| 3 | import { Button, Flex, FlexItem, Modal, RadioControl, TextareaControl, Spinner, Icon } from '@wordpress/components'; |
| 4 | import { useEffect, useState } from '@wordpress/element'; |
| 5 | import { changeOption, fetchOptions } from './common'; |
| 6 | |
| 7 | const { version, feedback } = window.tiobDash; |
| 8 | |
| 9 | const collectedInfo = [ |
| 10 | { |
| 11 | name: __( 'Plugin version', 'templates-patterns-collection' ), |
| 12 | value: version |
| 13 | }, |
| 14 | { |
| 15 | name: __( 'Feedback Response', 'templates-patterns-collection' ), |
| 16 | value: __( 'Checked option from feedback', 'templates-patterns-collection' ) |
| 17 | }, |
| 18 | { |
| 19 | name: __( 'Feedback Details', 'templates-patterns-collection' ), |
| 20 | value: __( 'Text from the above text area', 'templates-patterns-collection' ) |
| 21 | } |
| 22 | ]; |
| 23 | |
| 24 | const feedbackStatusText = { |
| 25 | error: __( 'There was a problem submitting your feedback.', 'templates-patterns-collection' ), |
| 26 | emptyFeedback: __( 'Please provide a feedback before submitting the form.', 'templates-patterns-collection' ), |
| 27 | submitted: __( 'Thank you for helping us improve Templates Cloud!', 'templates-patterns-collection' ), |
| 28 | }; |
| 29 | const FeedbackNotice = ( { importTemplate } ) => { |
| 30 | const [ isFeedbackOpen, setFeedbackOpen ] = useState( false ); |
| 31 | const [ showInfo, setShowInfo ] = useState( false ); |
| 32 | const [ feedbackResponse, setFeedbackResponse ] = useState( 'store_in_cloud' ); |
| 33 | const [ feedbackDetails, setFeedbackDetails ] = useState( '' ); |
| 34 | const [ feedbackStatus, setFeedbackStatus ] = useState( 'notSubmitted' ); |
| 35 | |
| 36 | const [ countImported, setCountImported ] = useState( feedback.count || 0 ); |
| 37 | const [ isDismissed, setIsDismissed ] = useState( feedback.dismissed || false ); |
| 38 | const [ hide, setHide ] = useState( false ); |
| 39 | |
| 40 | useEffect( () => { |
| 41 | const info = document.querySelector( '.tiob_feedback_collect.info' ); |
| 42 | if ( info ) { |
| 43 | info.style.height = showInfo ? '255px' : '0'; |
| 44 | } |
| 45 | |
| 46 | }, [ showInfo, isFeedbackOpen ]); |
| 47 | |
| 48 | const updateOptionState = () => { |
| 49 | fetchOptions().then((r) => { |
| 50 | if ( r.tiob_premade_imported !== undefined ) { |
| 51 | setCountImported( r.tiob_premade_imported ); |
| 52 | } |
| 53 | if ( r.tiob_feedback_dismiss !== undefined ) { |
| 54 | setIsDismissed( r.tiob_feedback_dismiss ); |
| 55 | } |
| 56 | }); |
| 57 | }; |
| 58 | |
| 59 | useEffect( () => { |
| 60 | updateOptionState(); |
| 61 | }, [ importTemplate ] ); |
| 62 | |
| 63 | const openModal = () => setFeedbackOpen( true ); |
| 64 | const closeModal = () => setFeedbackOpen( false ); |
| 65 | |
| 66 | const dismissFeedback = () => { |
| 67 | changeOption( 'tiob_feedback_dismiss', true ); |
| 68 | }; |
| 69 | |
| 70 | const submitFeedback = () => { |
| 71 | if ( feedbackResponse === 'other' && 5 >= feedbackDetails.trim().length ) { |
| 72 | setFeedbackStatus( 'emptyFeedback' ); |
| 73 | return; |
| 74 | } |
| 75 | |
| 76 | let feedback = feedbackDetails.trim(); |
| 77 | if ( feedbackResponse !== 'other') { |
| 78 | feedback = feedbackResponse; |
| 79 | } |
| 80 | |
| 81 | setFeedbackStatus( 'loading' ); |
| 82 | try { |
| 83 | fetch( 'https://api.themeisle.com/tracking/feedback', { |
| 84 | method: 'POST', |
| 85 | headers: { |
| 86 | 'Content-Type': 'application/json', |
| 87 | Accept: 'application/json, */*;q=0.1', |
| 88 | 'Cache-Control': 'no-cache' |
| 89 | }, |
| 90 | body: JSON.stringify({ |
| 91 | slug: 'templates-patterns-collection', |
| 92 | version, |
| 93 | feedback, |
| 94 | data: { |
| 95 | 'feedback-area': 'template-patterns-collection-page-templates', |
| 96 | 'feedback-option': feedbackResponse |
| 97 | } |
| 98 | }) |
| 99 | }).then( r => { |
| 100 | if ( ! r.ok ) { |
| 101 | setFeedbackStatus( 'error' ); |
| 102 | closeModal(); |
| 103 | return; |
| 104 | } |
| 105 | |
| 106 | setFeedbackStatus( 'submitted' ); |
| 107 | dismissFeedback(); |
| 108 | closeModal(); |
| 109 | })?.catch( ( error ) => { |
| 110 | console.warn( error.message ); |
| 111 | setFeedbackStatus( 'error' ); |
| 112 | closeModal(); |
| 113 | }); |
| 114 | } catch ( error ) { |
| 115 | console.warn( error.message ); |
| 116 | setFeedbackStatus( 'error' ); |
| 117 | closeModal(); |
| 118 | } |
| 119 | }; |
| 120 | |
| 121 | return ( |
| 122 | <> |
| 123 | { countImported >= 4 && ! isDismissed && ! hide && ( |
| 124 | <Flex className="tiob-feedback-notice" justify="right"> |
| 125 | <Flex |
| 126 | className={ classnames({ |
| 127 | 'tiob-notice': true, |
| 128 | 'error': 'error' === feedbackStatus, |
| 129 | 'updated': 'submitted' === feedbackStatus, |
| 130 | }) } |
| 131 | justify="right"> |
| 132 | { 'submitted' === feedbackStatus && ( |
| 133 | <FlexItem> |
| 134 | <Icon icon="saved" /> |
| 135 | </FlexItem> |
| 136 | ) } |
| 137 | <FlexItem> |
| 138 | <p>{ ( ['error', 'submitted'].includes( feedbackStatus ) ) ? feedbackStatusText[feedbackStatus] : __( 'Help us improve and let us know how are you using Templates Cloud.', 'templates-patterns-collection' ) }</p> |
| 139 | </FlexItem> |
| 140 | <FlexItem> |
| 141 | { 'error' === feedbackStatus && ( |
| 142 | <Button |
| 143 | isLink |
| 144 | className="error" |
| 145 | onClick={openModal} |
| 146 | > |
| 147 | { __( 'Try again', 'templates-patterns-collection' ) } |
| 148 | </Button> |
| 149 | ) } |
| 150 | { ! ['error', 'submitted'].includes( feedbackStatus ) && ( |
| 151 | <Button |
| 152 | isPrimary |
| 153 | onClick={ openModal } |
| 154 | > |
| 155 | { __( 'Share feedback', 'templates-patterns-collection' ) } |
| 156 | </Button> |
| 157 | ) } |
| 158 | </FlexItem> |
| 159 | <FlexItem> |
| 160 | <Button |
| 161 | isTertiary |
| 162 | icon="no-alt" |
| 163 | iconSize={20} |
| 164 | onClick={ () => { |
| 165 | setHide( true ); |
| 166 | if ( feedbackStatus !== 'error' ) { |
| 167 | dismissFeedback(); |
| 168 | } |
| 169 | } } |
| 170 | /> |
| 171 | </FlexItem> |
| 172 | </Flex> |
| 173 | </Flex> |
| 174 | ) } |
| 175 | { isFeedbackOpen && ( |
| 176 | <Modal |
| 177 | className="tiob_feedback_modal" |
| 178 | title={ __( 'How are you using Templates Cloud?', 'templates-patterns-collection' ) } |
| 179 | onRequestClose={ closeModal } |
| 180 | > |
| 181 | <RadioControl |
| 182 | className="feedback_options" |
| 183 | selected={ feedbackResponse } |
| 184 | options={ [ |
| 185 | { label: __( 'To store my templates in the cloud', 'templates-patterns-collection' ), value: 'store_in_cloud' }, |
| 186 | { label: __( 'To share templates with the clients', 'templates-patterns-collection' ), value: 'share_with_clients' }, |
| 187 | { label: __( 'Other', 'templates-patterns-collection' ), value: 'other' }, |
| 188 | ] } |
| 189 | onChange={ ( value ) => setFeedbackResponse( value ) } |
| 190 | /> |
| 191 | { feedbackResponse === 'other' && ( |
| 192 | <TextareaControl |
| 193 | className={ classnames({ |
| 194 | 'feedback_details': true, |
| 195 | 'invalid': 'emptyFeedback' === feedbackStatus, |
| 196 | }) } |
| 197 | placeholder={ __( 'Tell us more …', 'templates-patterns-collection' ) } |
| 198 | value={ feedbackDetails } |
| 199 | help={ feedbackStatusText[feedbackStatus] || false } |
| 200 | rows={7} |
| 201 | cols={50} |
| 202 | onChange={ value => { |
| 203 | setFeedbackDetails( value ); |
| 204 | if ( 5 < value.trim().length ) { |
| 205 | setFeedbackStatus( 'notSubmitted' ); |
| 206 | } |
| 207 | } } |
| 208 | /> |
| 209 | ) } |
| 210 | <div className="tiob_feedback_collect info"> |
| 211 | <div className="wrapper"> |
| 212 | <p>{ __( 'We value privacy, that\'s why no domain name, email address or IP addresses are collected after you submit the survey. Below is a detailed view of all data that Themeisle will receive if you fill in this survey.', 'templates-patterns-collection' ) }</p> |
| 213 | { collectedInfo.map( ( row, index ) => { |
| 214 | return ( |
| 215 | <div className="info-row" key={ index }> |
| 216 | <p><b>{ row.name }</b></p> |
| 217 | <p>{ row.value }</p> |
| 218 | </div> |
| 219 | ); |
| 220 | }) } |
| 221 | </div> |
| 222 | </div> |
| 223 | <Flex |
| 224 | direction="column" |
| 225 | align="left" |
| 226 | justify="start" |
| 227 | style={ { height: 'auto' } } |
| 228 | > |
| 229 | <FlexItem> |
| 230 | <Button |
| 231 | isPrimary |
| 232 | onClick={ submitFeedback } |
| 233 | disabled={ 'loading' === feedbackStatus } |
| 234 | > |
| 235 | { 'loading' === feedbackStatus ? <Spinner /> : __( 'Submit feedback', 'templates-patterns-collection' ) } |
| 236 | </Button> |
| 237 | </FlexItem> |
| 238 | <FlexItem> |
| 239 | <Button |
| 240 | className="toggle-info" |
| 241 | aria-expanded={ showInfo } |
| 242 | variant="link" |
| 243 | isLink |
| 244 | onClick={() => setShowInfo( ! showInfo )} |
| 245 | > |
| 246 | { __( 'What info do we collect?', 'templates-patterns-collection' ) } |
| 247 | </Button> |
| 248 | </FlexItem> |
| 249 | </Flex> |
| 250 | </Modal> |
| 251 | ) } |
| 252 | </> |
| 253 | ); |
| 254 | }; |
| 255 | |
| 256 | export default FeedbackNotice; |