diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/contact-form/components/jetpack-contact-form.js')
| -rw-r--r-- | plugins/jetpack/extensions/blocks/contact-form/components/jetpack-contact-form.js | 266 |
1 files changed, 0 insertions, 266 deletions
diff --git a/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-contact-form.js b/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-contact-form.js deleted file mode 100644 index 952a3934..00000000 --- a/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-contact-form.js +++ /dev/null @@ -1,266 +0,0 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; -import emailValidator from 'email-validator'; -import { __, sprintf } from '@wordpress/i18n'; -import { Button, PanelBody, Path, Placeholder, TextControl } from '@wordpress/components'; -import { Component, Fragment } from '@wordpress/element'; -import { compose, withInstanceId } from '@wordpress/compose'; -import { InnerBlocks, InspectorControls } from '@wordpress/editor'; - -/** - * Internal dependencies - */ -import HelpMessage from '../../../shared/help-message'; -import renderMaterialIcon from '../../../shared/render-material-icon'; -import SubmitButton from '../../../shared/submit-button'; - -const ALLOWED_BLOCKS = [ - 'jetpack/markdown', - 'core/paragraph', - 'core/image', - 'core/heading', - 'core/gallery', - 'core/list', - 'core/quote', - 'core/shortcode', - 'core/audio', - 'core/code', - 'core/cover', - 'core/file', - 'core/html', - 'core/separator', - 'core/spacer', - 'core/subhead', - 'core/table', - 'core/verse', - 'core/video', -]; - -class JetpackContactForm extends Component { - constructor( ...args ) { - super( ...args ); - this.onChangeSubject = this.onChangeSubject.bind( this ); - this.onBlurTo = this.onBlurTo.bind( this ); - this.onChangeTo = this.onChangeTo.bind( this ); - this.onChangeSubmit = this.onChangeSubmit.bind( this ); - this.onFormSettingsSet = this.onFormSettingsSet.bind( this ); - this.getToValidationError = this.getToValidationError.bind( this ); - this.renderToAndSubjectFields = this.renderToAndSubjectFields.bind( this ); - this.preventEnterSubmittion = this.preventEnterSubmittion.bind( this ); - this.hasEmailError = this.hasEmailError.bind( this ); - - const to = args[ 0 ].attributes.to ? args[ 0 ].attributes.to : ''; - const error = to - .split( ',' ) - .map( this.getToValidationError ) - .filter( Boolean ); - - this.state = { - toError: error && error.length ? error : null, - }; - } - - getIntroMessage() { - return __( - 'You’ll receive an email notification each time someone fills out the form. Where should it go, and what should the subject line be?', - 'jetpack' - ); - } - - getEmailHelpMessage() { - return __( 'You can enter multiple email addresses separated by commas.', 'jetpack' ); - } - - onChangeSubject( subject ) { - this.props.setAttributes( { subject } ); - } - - getToValidationError( email ) { - email = email.trim(); - if ( email.length === 0 ) { - return false; // ignore the empty emails - } - if ( ! emailValidator.validate( email ) ) { - return { email }; - } - return false; - } - - onBlurTo( event ) { - const error = event.target.value - .split( ',' ) - .map( this.getToValidationError ) - .filter( Boolean ); - if ( error && error.length ) { - this.setState( { toError: error } ); - return; - } - } - - onChangeTo( to ) { - const emails = to.trim(); - if ( emails.length === 0 ) { - this.setState( { toError: null } ); - this.props.setAttributes( { to } ); - return; - } - - this.setState( { toError: null } ); - this.props.setAttributes( { to } ); - } - - onChangeSubmit( submitButtonText ) { - this.props.setAttributes( { submitButtonText } ); - } - - onFormSettingsSet( event ) { - event.preventDefault(); - if ( this.state.toError ) { - // don't submit the form if there are errors. - return; - } - this.props.setAttributes( { hasFormSettingsSet: 'yes' } ); - } - - getfieldEmailError( errors ) { - if ( errors ) { - if ( errors.length === 1 ) { - if ( errors[ 0 ] && errors[ 0 ].email ) { - return sprintf( __( '%s is not a valid email address.', 'jetpack' ), errors[ 0 ].email ); - } - return errors[ 0 ]; - } - - if ( errors.length === 2 ) { - return sprintf( - __( '%s and %s are not a valid email address.', 'jetpack' ), - errors[ 0 ].email, - errors[ 1 ].email - ); - } - const inValidEmails = errors.map( error => error.email ); - return sprintf( - __( '%s are not a valid email address.', 'jetpack' ), - inValidEmails.join( ', ' ) - ); - } - return null; - } - - preventEnterSubmittion( event ) { - if ( event.key === 'Enter' ) { - event.preventDefault(); - event.stopPropagation(); - } - } - - renderToAndSubjectFields() { - const fieldEmailError = this.state.toError; - const { instanceId, attributes } = this.props; - const { subject, to } = attributes; - return ( - <Fragment> - <TextControl - aria-describedby={ `contact-form-${ instanceId }-email-${ - this.hasEmailError() ? 'error' : 'help' - }` } - label={ __( 'Email address', 'jetpack' ) } - placeholder={ __( 'name@example.com', 'jetpack' ) } - onKeyDown={ this.preventEnterSubmittion } - value={ to } - onBlur={ this.onBlurTo } - onChange={ this.onChangeTo } - /> - <HelpMessage isError id={ `contact-form-${ instanceId }-email-error` }> - { this.getfieldEmailError( fieldEmailError ) } - </HelpMessage> - <HelpMessage id={ `contact-form-${ instanceId }-email-help` }> - { this.getEmailHelpMessage() } - </HelpMessage> - - <TextControl - label={ __( 'Email subject line', 'jetpack' ) } - value={ subject } - placeholder={ __( "Let's work together", 'jetpack' ) } - onChange={ this.onChangeSubject } - /> - </Fragment> - ); - } - - hasEmailError() { - const fieldEmailError = this.state.toError; - return fieldEmailError && fieldEmailError.length > 0; - } - - render() { - const { className, attributes } = this.props; - const { hasFormSettingsSet } = attributes; - const formClassnames = classnames( className, 'jetpack-contact-form', { - 'has-intro': ! hasFormSettingsSet, - } ); - - return ( - <Fragment> - <InspectorControls> - <PanelBody title={ __( 'Email feedback settings', 'jetpack' ) }> - { this.renderToAndSubjectFields() } - </PanelBody> - </InspectorControls> - <div className={ formClassnames }> - { ! hasFormSettingsSet && ( - <Placeholder - label={ __( 'Form', 'jetpack' ) } - icon={ renderMaterialIcon( - <Path d="M13 7.5h5v2h-5zm0 7h5v2h-5zM19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM11 6H6v5h5V6zm-1 4H7V7h3v3zm1 3H6v5h5v-5zm-1 4H7v-3h3v3z" /> - ) } - > - <form onSubmit={ this.onFormSettingsSet }> - <p className="jetpack-contact-form__intro-message">{ this.getIntroMessage() }</p> - { this.renderToAndSubjectFields() } - <p className="jetpack-contact-form__intro-message"> - { __( - '(If you leave these blank, notifications will go to the author with the post or page title as the subject line.)', - 'jetpack' - ) } - </p> - <div className="jetpack-contact-form__create"> - <Button isPrimary type="submit" disabled={ this.hasEmailError() }> - { __( 'Add form', 'jetpack' ) } - </Button> - </div> - </form> - </Placeholder> - ) } - { hasFormSettingsSet && ( - <InnerBlocks - allowedBlocks={ ALLOWED_BLOCKS } - templateLock={ false } - template={ [ - [ - 'jetpack/field-name', - { - required: true, - }, - ], - [ - 'jetpack/field-email', - { - required: true, - }, - ], - [ 'jetpack/field-url', {} ], - [ 'jetpack/field-textarea', {} ], - ] } - /> - ) } - { hasFormSettingsSet && <SubmitButton { ...this.props } /> } - </div> - </Fragment> - ); - } -} - -export default compose( [ withInstanceId ] )( JetpackContactForm ); |