-
Notifications
You must be signed in to change notification settings - Fork 2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add a beta feedback form to the Site Editor (#56667)
* initial copy pasta * pass configData to editor iframe * have a portMessage trigger the feedback sender * it works! kind of... * connect necessary selectors * update confimation notice * fix post editor error * actually fix post editor * restructure files * make feedback function more general * update testing comment goo * use imported package * remove testing goo * update copies
- Loading branch information
1 parent
18b176c
commit 48fe031
Showing
5 changed files
with
163 additions
and
2 deletions.
There are no files selected for viewing
83 changes: 83 additions & 0 deletions
83
apps/wpcom-block-editor/src/calypso/features/fse-beta/feedback-form.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| /* global MessageChannel */ | ||
| import { TextareaControl, Button, PanelBody, Notice } from '@wordpress/components'; | ||
| import { useState, useEffect } from '@wordpress/element'; | ||
| import { __, _x } from '@wordpress/i18n'; | ||
|
|
||
| export default function FseBetaFeedbackForm( { calypsoPort } ) { | ||
| const [ confirmation, setConfirmation ] = useState( null ); | ||
| const [ isSubmitting, setIsSubmitting ] = useState( false ); | ||
| const [ message, setMessage ] = useState( '' ); | ||
|
|
||
| useEffect( () => { | ||
| // Reset confirmation if new message is input. | ||
| if ( confirmation && ! confirmation.isError && message.length ) { | ||
| setConfirmation( null ); | ||
| } | ||
| }, [ confirmation, message ] ); | ||
|
|
||
| const submitFeedback = () => { | ||
| setIsSubmitting( true ); | ||
|
|
||
| const { port1, port2 } = new MessageChannel(); | ||
| calypsoPort.postMessage( { action: 'sendSiteEditorBetaFeedback', payload: message }, [ | ||
| port2, | ||
| ] ); | ||
|
|
||
| port1.onmessage = ( { data } ) => { | ||
| setIsSubmitting( false ); | ||
|
|
||
| if ( 'success' === data ) { | ||
| setMessage( '' ); | ||
| setConfirmation( { | ||
| title: __( 'Got it!' ), | ||
| message: __( 'Thank you for helping us make WordPress.com awesome.' ), | ||
| isError: false, | ||
| } ); | ||
| } else if ( 'error' === data ) { | ||
| setConfirmation( { | ||
| title: __( 'Error!' ), | ||
| message: __( | ||
| "We're sorry, there was an error in sending your feedback. Please try again later." | ||
| ), | ||
| isError: true, | ||
| } ); | ||
| } | ||
|
|
||
| port1.close(); | ||
| }; | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <PanelBody> | ||
| <TextareaControl | ||
| disabled={ isSubmitting } | ||
| onChange={ setMessage } | ||
| placeholder={ __( | ||
| 'How can we improve your site editing experience?', | ||
| 'full-site-editing' | ||
| ) } | ||
| value={ message } | ||
| label={ __( 'Leave feedback (optional)', 'full-site-editing' ) } | ||
| rows={ 12 } | ||
| /> | ||
| <Button | ||
| disabled={ isSubmitting || ! message } | ||
| type="button" | ||
| isPrimary | ||
| onClick={ submitFeedback } | ||
| > | ||
| { isSubmitting | ||
| ? __( 'Sending…', 'full-site-editing' ) | ||
| : _x( 'Send', 'verb: imperative', 'full-site-editing' ) } | ||
| </Button> | ||
| </PanelBody> | ||
| { confirmation && ( | ||
| <Notice status={ confirmation?.isError ? 'error' : 'success' } isDismissible={ false }> | ||
| <h1>{ confirmation.title }</h1> | ||
| <p>{ confirmation.message }</p> | ||
| </Notice> | ||
| ) } | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import config from '@automattic/calypso-config'; | ||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import wpcom from 'calypso/lib/wp'; | ||
|
|
||
| const noop = () => {}; | ||
|
|
||
| /** | ||
| * | ||
| * @param {string} message The user's feedback message to send. | ||
| * @param {string} siteUrl The current site Url. | ||
| * @param {string} userLocale The user's locale. | ||
| * @param {Function} handleSuccess Function to handle response of post request. | ||
| * @param {Function} handleError Function to handle error in post request. | ||
| */ | ||
| export const sendSiteEditorBetaFeedback = ( | ||
| message, | ||
| siteUrl, | ||
| userLocale, | ||
| handleSuccess = noop, | ||
| handleError = noop | ||
| ) => { | ||
| const kayakoMessage = `Site: ${ siteUrl ? siteUrl : 'N/A' }\n\n${ message }`; | ||
|
|
||
| wpcom.req | ||
| .post( '/help/tickets/kayako/new', { | ||
| subject: '[Dotcom FSE Beta]', | ||
| message: kayakoMessage, | ||
| locale: userLocale, | ||
| client: config( 'client_slug' ), | ||
| is_chat_overflow: false, | ||
| } ) | ||
| .then( handleSuccess ) | ||
| .catch( handleError ); | ||
| }; |