Forms: Add error message on network request failure for ajax submission (#44386)

* fix typo

* add network error message to config

* add debug dependency

* show error on submission failure

* auto-remove submission error notice

* changelog

* update error message

Author: dhasilva

pnpm-lock.yaml

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Forms: Add error message on network request failure for ajax submission

projects/packages/forms/changelog/update-forms-submit-ajax-frontend-errors

@@ -61,6 +61,7 @@
 		"@wordpress/url": "4.26.0",
 		"clsx": "2.1.1",
 		"copy-webpack-plugin": "13.0.0",
+		"debug": "4.4.1",
 		"email-validator": "2.0.4",
 		"gridicons": "3.4.2",
 		"js-sha256": "0.11.1",

projects/packages/forms/package.json

@@ -298,6 +298,7 @@ protected function __construct() {
 				'is_required'        => __( 'This field is required.', 'jetpack-forms' ),
 				'invalid_form_empty' => __( 'The form you are trying to submit is empty.', 'jetpack-forms' ),
 				'invalid_form'       => __( 'Please fill out the form correctly.', 'jetpack-forms' ),
+				'network_error'      => __( 'Connection issue while submitting the form. Check that you are connected to the Internet and try again.', 'jetpack-forms' ),
 			),
 			'admin_ajax_url' => admin_url( 'admin-ajax.php' ),
 		);

projects/packages/forms/src/contact-form/class-contact-form-plugin.php

@@ -675,7 +675,7 @@ private static function format_submission_data( $data ) {
 	 * @return string HTML string for the error wrapper.
 	 */
 	private static function render_error_wrapper() {
-		$html  = '<div class="contact-form__error" data-wp-class--show-errors="state.showFromErrors">';
+		$html  = '<div class="contact-form__error" data-wp-class--show-errors="state.showFormErrors">';
 		$html .= '<span class="contact-form__warning-icon"><span class="visually-hidden">' . __( 'Warning.', 'jetpack-forms' ) . '</span><i aria-hidden="true"></i></span>
 				<span data-wp-text="state.getFormErrorMessage"></span>
 				<ul>
@@ -684,6 +684,8 @@ private static function render_error_wrapper() {
 				</template>
 				</ul>';
 		$html .= '</div>';
+
+		$html .= '<div class="contact-form__error" data-wp-class--show-errors="state.showSubmissionError" data-wp-text="context.submissionError"></div>';
 		return $html;
 	}
 

projects/packages/forms/src/contact-form/class-contact-form.php

@@ -2,6 +2,9 @@
  * External dependencies
  */
 import { getConfig } from '@wordpress/interactivity';
+import debugFactory from 'debug';
+
+const debug = debugFactory( 'jetpack-forms:interactivity' );
 
 const NAMESPACE = 'jetpack/form';
 const config = getConfig( NAMESPACE );
@@ -61,13 +64,15 @@ export const submitForm = async formHash => {
 		} );
 
 		if ( ! response.ok ) {
-			return { success: false, error: response.status };
+			debug( 'Form submission failed', response );
+			return { success: false, error: config?.error_types?.network_error };
 		}
 
 		const result = await response.json();
 
 		return result;
 	} catch ( error ) {
-		return { success: false, error: error.message };
+		debug( 'Form submission failed', error );
+		return { success: false, error: config?.error_types?.network_error };
 	}
 };

projects/packages/forms/src/modules/form/shared.js

@@ -21,6 +21,7 @@ const withSyncEvent =
 
 const NAMESPACE = 'jetpack/form';
 const config = getConfig( NAMESPACE );
+let errorTimeout = null;
 
 const updateField = ( fieldId, value, showFieldError = false ) => {
 	const context = getContext();
@@ -183,12 +184,18 @@ const { state } = store( NAMESPACE, {
 			return ! Object.values( context.fields ).some( field => field.error !== 'yes' );
 		},
 
-		get showFromErrors() {
+		get showFormErrors() {
 			const context = getContext();
 
 			return ! state.isFormValid && context.showErrors;
 		},
 
+		get showSubmissionError() {
+			const context = getContext();
+
+			return !! context.submissionError && ! state.showFormErrors;
+		},
+
 		get getFormErrorMessage() {
 			if ( state.isFormEmpty ) {
 				const context = getContext();
@@ -229,11 +236,6 @@ const { state } = store( NAMESPACE, {
 			const field = context.fields[ fieldId ];
 			return field?.value || '';
 		},
-
-		get getSubmissionError() {
-			const context = getContext();
-			return context.submissionError || '';
-		},
 	},
 
 	actions: {
@@ -339,12 +341,12 @@ const { state } = store( NAMESPACE, {
 			if ( context.isResponseWithoutReloadEnabled ) {
 				event.preventDefault();
 				event.stopPropagation();
+				context.submissionError = null;
 
 				const { success, error, data, refreshArgs } = yield submitForm( context.formHash );
 
 				if ( success ) {
 					setSubmissionData( data );
-					context.submissionError = null;
 					context.submissionSuccess = true;
 
 					if ( refreshArgs ) {
@@ -357,6 +359,15 @@ const { state } = store( NAMESPACE, {
 					}
 				} else {
 					context.submissionError = error;
+
+					if ( errorTimeout ) {
+						clearTimeout( errorTimeout );
+					}
+
+					errorTimeout = setTimeout( () => {
+						context.submissionError = null;
+					}, 5000 );
+
 					setSubmissionData( [] );
 				}