Refactor form view script with new response notification containers

packages/block-library/form/view.js

@@ -1,14 +1,69 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
 import { applyFilters } from '@wordpress/hooks';
 
 ( function() {
 	'use strict';
 
 	document.addEventListener( 'DOMContentLoaded', function() {
+		const successContainer = document.querySelector( '.wp-block-omniform-response-notification.success-response-notification' );
+		const errorContainer = document.querySelector( '.wp-block-omniform-response-notification.error-response-notification' );
+		const containers = [ successContainer, errorContainer ];
+		const containersInitialState = {};
+
+		/**
+		 * Save the initial state of the containers.
+		 *
+		 * @param {HTMLElement} container
+		 */
+		const saveInitialState = ( container ) => {
+			if ( ! container ) {
+				return;
+			}
+
+			containersInitialState[ container.className ] = Array.from( container.children ).map( ( child ) => child.cloneNode( true ) );
+			container.textContent = '';
+		};
+
+		/**
+		 * Show a message in a container.
+		 *
+		 * @param {HTMLElement} container
+		 * @param {Array}       additionalChildren
+		 */
+		const showMessage = ( container, additionalChildren = [] ) => {
+			if ( ! container ) {
+				return;
+			}
+
+			// Hide all containers.
+			containers.forEach( ( elm ) => elm.style.display = 'none' );
+
+			// Reset the container to its initial state.
+			container.textContent = '';
+			containersInitialState[ container.className ].forEach( ( child ) => {
+				container.appendChild( child.cloneNode( true ) );
+			} );
+
+			// Add additional children to the container.
+			additionalChildren.forEach( ( child ) => {
+				container.appendChild( child );
+			} );
+
+			// Show the message container.
+			container.style.display = 'block';
+
+			// Focus the message container.
+			container.setAttribute( 'tabindex', '-1' );
+			container.focus();
+			container.removeAttribute( 'tabindex' );
+		};
+
+		// Save initial state and clear content for both containers
+		containers.forEach( ( container ) => saveInitialState( container ) );
+
 		const formResponseHandler = async ( event ) => {
 			event.preventDefault();
 
@@ -18,46 +73,21 @@ import { applyFilters } from '@wordpress/hooks';
 			const { action: url, method } = formElement;
 			const body = new FormData( formElement );
 
-			const messageContainer = event.target.querySelector( '.omniform-response-container' );
-
 			await apiFetch( {
 				url,
 				method,
 				body,
 			} ).then( () => {
-				messageContainer.innerHTML = '';
-				messageContainer.append( createParagraph( __( 'Success! Your submission has been completed.', 'omniform' ) ) );
-
-				// Show the success message.
-				messageContainer.style.display = 'block';
-				messageContainer.style.borderLeftColor = 'var(--wp--preset--color--vivid-green-cyan,#00d084)';
+				showMessage( successContainer );
 
 				// Reset the form.
 				event.target.reset();
 			} ).catch( ( error ) => {
-				messageContainer.innerHTML = '';
-				messageContainer.append( createParagraph( __( 'Unfortunately, your submission was not successful. Please ensure all fields are correctly filled out and try again.', 'omniform' ) ) );
-
-				if ( error.invalid_fields ) {
-					messageContainer.append( createUnorderedList( Object.values( error.invalid_fields ) ) );
-				}
-
-				// Show the error message.
-				messageContainer.style.display = 'block';
-				messageContainer.style.borderLeftColor = 'var(--wp--preset--color--vivid-red,#cf2e2e)';
+				showMessage(
+					errorContainer,
+					[ createUnorderedList( Object.values( error.invalid_fields ) ) ]
+				);
 			} );
-
-			// Focus the message container.
-			messageContainer.setAttribute( 'tabindex', '-1' );
-			messageContainer.focus();
-			messageContainer.removeAttribute( 'tabindex' );
-		};
-
-		// Create a paragraph element from text.
-		const createParagraph = ( text ) => {
-			const paragraph = document.createElement( 'p' );
-			paragraph.textContent = text;
-			return paragraph;
 		};
 
 		// Create an unordered list from an array of items.