add generic error message when interactive task fails

Author: ilicfilip

assets/js/recommendations/interactive-task.js

@@ -1,4 +1,4 @@
-/* global prplSuggestedTask, progressPlannerAjaxRequest, progressPlanner */
+/* global prplSuggestedTask, progressPlannerAjaxRequest, progressPlanner, prplL10n */
 
 /*
  * Core Blog Description recommendation.
@@ -85,9 +85,13 @@ const prplInteractiveTaskFormListener = {
 
 			callback()
 				.then( ( response ) => {
-					console.log( response );
 					if ( true !== response.success ) {
-						// TODO: Handle error.
+						// Show error to the user.
+						prplInteractiveTaskFormListener.showError(
+							response,
+							popoverId
+						);
+
 						return response;
 					}
 
@@ -107,11 +111,11 @@ const prplInteractiveTaskFormListener = {
 					} );
 				} )
 				.catch( ( error ) => {
-					console.error(
-						'Error in interactive task callback:',
-						error
+					// Show error to the user.
+					prplInteractiveTaskFormListener.showError(
+						error,
+						popoverId
 					);
-					// TODO: Handle the error appropriately.
 				} );
 		} );
 	},
@@ -153,7 +157,12 @@ const prplInteractiveTaskFormListener = {
 				.then( ( response ) => {
 					console.log( response );
 					if ( true !== response.success ) {
-						// TODO: Handle error.
+						// Show error to the user.
+						prplInteractiveTaskFormListener.showError(
+							response,
+							popoverId
+						);
+
 						return response;
 					}
 
@@ -177,12 +186,57 @@ const prplInteractiveTaskFormListener = {
 					} );
 				} )
 				.catch( ( error ) => {
-					console.error(
-						'Error in interactive task settings:',
-						error
+					// Show error to the user.
+					prplInteractiveTaskFormListener.showError(
+						error,
+						popoverId
 					);
-					// TODO: Handle the error appropriately.
 				} );
 		} );
 	},
+
+	/**
+	 * Helper which shows user an error message.
+	 * For now the error message is generic.
+	 *
+	 * @param {Object} error     - The error object.
+	 * @param {string} popoverId - The ID of the popover.
+	 * @return {void}
+	 */
+	showError: ( error, popoverId ) => {
+		const formElement = document.querySelector( `#${ popoverId } form` );
+
+		if ( ! formElement ) {
+			return;
+		}
+
+		console.error( 'Error in interactive task callback:', error );
+
+		// Add error message.
+		const submitButton = formElement.querySelector(
+			'button[type="submit"]'
+		);
+
+		if (
+			submitButton &&
+			! formElement.querySelector(
+				'.prpl-interactive-task-error-message'
+			)
+		) {
+			// Add paragraph with error message.
+			const errorParagraph = document.createElement( 'p' );
+			errorParagraph.classList.add(
+				'prpl-note',
+				'prpl-note-error',
+				'prpl-interactive-task-error-message'
+			);
+			errorParagraph.textContent = prplL10n( 'somethingWentWrong' );
+
+			// Append before submit button.
+			submitButton.parentNode.insertBefore(
+				errorParagraph,
+				submitButton
+			);
+		}
+	},
 };

assets/js/recommendations/set-date-format.js

@@ -10,24 +10,32 @@ prplInteractiveTaskFormListener.customSubmit( {
 	taskId: 'set-date-format',
 	popoverId: 'prpl-popover-set-date-format',
 	callback: () => {
-		const format = document.querySelector(
-			'#prpl-popover-set-date-format input[name="date_format"]:checked'
-		);
-		const customFormat = document.querySelector(
-			'#prpl-popover-set-date-format input[name="date_format_custom"]'
-		);
+		return new Promise( ( resolve, reject ) => {
+			const format = document.querySelector(
+				'#prpl-popover-set-date-format input[name="date_format"]:checked'
+			);
+			const customFormat = document.querySelector(
+				'#prpl-popover-set-date-format input[name="date_format_custom"]'
+			);
 
-		fetch( progressPlanner.ajaxUrl, {
-			method: 'POST',
-			headers: {
-				'Content-Type': 'application/x-www-form-urlencoded',
-			},
-			body: new URLSearchParams( {
-				action: 'prpl_interactive_task_submit_set-date-format',
-				nonce: progressPlanner.nonce,
-				date_format: format.value,
-				date_format_custom: customFormat.value,
-			} ),
+			fetch( progressPlanner.ajaxUrl, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/x-www-form-urlencoded',
+				},
+				body: new URLSearchParams( {
+					action: 'prpl_interactive_task_submit_set-date-format',
+					nonce: progressPlanner.nonce,
+					date_format: format.value,
+					date_format_custom: customFormat.value,
+				} ),
+			} )
+				.then( ( response ) => {
+					resolve( { response, success: true } );
+				} )
+				.catch( ( error ) => {
+					reject( { success: false, error } );
+				} );
 		} );
 	},
 } );

classes/admin/class-enqueue.php

@@ -381,6 +381,7 @@ public function get_localized_strings() {
 			'installed'                    => \esc_html__( 'Installed', 'progress-planner' ),
 			'activating'                   => \esc_html__( 'Activating...', 'progress-planner' ),
 			'activated'                    => \esc_html__( 'Activated', 'progress-planner' ),
+			'somethingWentWrong'           => \esc_html__( 'Something went wrong.', 'progress-planner' ),
 		];
 	}