Merge pull request #3059 from woocommerce/PCP-4124-dynamic-logic-for-things-to-do-next-ver4

Settings UI: Add functionality to mark todos as complete on click

modules/ppcp-settings/resources/js/data/todos/action-types.js

@@ -17,4 +17,5 @@ export default {
 	DO_FETCH_TODOS: 'TODOS:DO_FETCH_TODOS',
 	DO_PERSIST_DATA: 'TODOS:DO_PERSIST_DATA',
 	DO_RESET_DISMISSED_TODOS: 'TODOS:DO_RESET_DISMISSED_TODOS',
+	DO_COMPLETE_ONCLICK: 'TODOS:DO_COMPLETE_ONCLICK',
 };

modules/ppcp-settings/resources/js/data/todos/actions.js

@@ -39,8 +39,7 @@ export const resetDismissedTodos = function* () {
 	const result = yield { type: ACTION_TYPES.DO_RESET_DISMISSED_TODOS };
 
 	if ( result && result.success ) {
-		// After successful reset, fetch fresh todos
-		yield fetchTodos();
+		yield setDismissedTodos( [] );
 	}
 
 	return result;
@@ -50,3 +49,19 @@ export const setCompletedTodos = ( completedTodos ) => ( {
 	type: ACTION_TYPES.SET_COMPLETED_TODOS,
 	payload: completedTodos,
 } );
+
+export const completeOnClick = function* ( todoId ) {
+	const result = yield {
+		type: ACTION_TYPES.DO_COMPLETE_ONCLICK,
+		todoId,
+	};
+
+	if ( result && result.success ) {
+		// Set transient completed state for visual feedback
+		const currentTransientCompleted =
+			yield select( STORE_NAME ).getCompletedTodos();
+		yield setCompletedTodos( [ ...currentTransientCompleted, todoId ] );
+	}
+
+	return result;
+};

modules/ppcp-settings/resources/js/data/todos/constants.js

@@ -9,3 +9,4 @@ export const REST_PATH = '/wc/v3/wc_paypal/todos';
 export const REST_PERSIST_PATH = '/wc/v3/wc_paypal/todos';
 export const REST_RESET_DISMISSED_TODOS_PATH =
 	'/wc/v3/wc_paypal/reset-dismissed-todos';
+export const REST_COMPLETE_ONCLICK_PATH = '/wc/v3/wc_paypal/complete-onclick';

modules/ppcp-settings/resources/js/data/todos/controls.js

@@ -12,6 +12,7 @@ import {
 	REST_PATH,
 	REST_PERSIST_PATH,
 	REST_RESET_DISMISSED_TODOS_PATH,
+	REST_COMPLETE_ONCLICK_PATH,
 } from './constants';
 import ACTION_TYPES from './action-types';
 
@@ -44,4 +45,21 @@ export const controls = {
 			};
 		}
 	},
+	async [ ACTION_TYPES.DO_COMPLETE_ONCLICK ]( { todoId } ) {
+		try {
+			const response = await apiFetch( {
+				path: REST_COMPLETE_ONCLICK_PATH,
+				method: 'POST',
+				data: { todoId },
+			} );
+
+			return response;
+		} catch ( e ) {
+			return {
+				success: false,
+				error: e,
+				message: e.message,
+			};
+		}
+	},
 };

modules/ppcp-settings/resources/js/data/todos/reducer.js

@@ -28,6 +28,7 @@ const defaultTransient = Object.freeze( {
 const defaultPersistent = Object.freeze( {
 	todos: [],
 	dismissedTodos: [],
+	completedOnClickTodos: [],
 } );
 
 // Reducer logic.