Add messages, separate components, finish actions

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

@@ -25,4 +25,7 @@ export default {
 	DO_REFRESH_MERCHANT: 'COMMON:DO_REFRESH_MERCHANT',
 	DO_REFRESH_FEATURES: 'DO_REFRESH_FEATURES',
 	DO_WEBHOOKS_DATA: 'COMMON:DO_WEBHOOKS_DATA',
+	DO_RESUBSCRIBE_WEBHOOKS: 'COMMON:DO_RESUBSCRIBE_WEBHOOKS',
+	DO_WEBHOOK_SIMULATION_START: 'COMMON:DO_WEBHOOK_SIMULATION_START',
+	DO_WEBHOOK_SIMULATION_STATE: 'COMMON:DO_WEBHOOK_SIMULATION_STATE',
 };

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

@@ -7,7 +7,7 @@
  * @file
  */
 
-import { dispatch, select } from '@wordpress/data';
+import { select } from '@wordpress/data';
 
 import ACTION_TYPES from './action-types';
 import { STORE_NAME } from './constants';
@@ -134,11 +134,6 @@ export const setClientSecret = ( clientSecret ) => ( {
 	payload: { clientSecret },
 } );
 
-export const setWebhooks = ( webhooks ) => ( {
-	type: ACTION_TYPES.SET_PERSISTENT,
-	payload: { webhooks },
-} );
-
 /**
  * Side effect. Saves the persistent details to the WP database.
  *
@@ -219,3 +214,30 @@ export const refreshFeatureStatuses = function* () {
 
 	return result;
 };
+
+/**
+ * Persistent. Changes the "webhooks" value.
+ *
+ * @param {string} webhooks
+ * @return {Action} The action.
+ */
+export const setWebhooks = ( webhooks ) => ( {
+	type: ACTION_TYPES.SET_PERSISTENT,
+	payload: { webhooks },
+} );
+
+/**
+ * Side effect
+ * Refreshes subscribed webhooks via a REST request
+ *
+ * @return {Action} The action.
+ */
+export const resubscribeWebhooks = function* () {
+	const result = yield { type: ACTION_TYPES.DO_RESUBSCRIBE_WEBHOOKS };
+
+	if ( result && result.success ) {
+		yield hydrate( result );
+	}
+
+	return result;
+};

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

@@ -53,8 +53,26 @@ export const REST_MANUAL_CONNECTION_PATH = '/wc/v3/wc_paypal/connect_manual';
  * @type {string}
  */
 export const REST_CONNECTION_URL_PATH = '/wc/v3/wc_paypal/login_link';
+
+/**
+ * REST path to fetch webhooks data or resubscribe webhooks,
+ *
+ * Used by: Controls
+ * See: WebhookSettingsEndpoint.php
+ *
+ * @type {string}
+ */
 export const REST_WEBHOOKS = '/wc/v3/wc_paypal/webhook_settings';
-export const REST_WEBHOOKS_SIMULATE = '/wc/v3/wc_paypal/webhooks_simulate';
+
+/**
+ * REST path to start webhook simulation and observe the state,
+ *
+ * Used by: Controls
+ * See: WebhookSettingsEndpoint.php
+ *
+ * @type {string}
+ */
+export const REST_WEBHOOKS_SIMULATE = '/wc/v3/wc_paypal/webhook_simulate';
 
 /**
  * REST path to refresh the feature status.

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

@@ -10,11 +10,12 @@
 import apiFetch from '@wordpress/api-fetch';
 
 import {
-	REST_PERSIST_PATH,
-	REST_MANUAL_CONNECTION_PATH,
 	REST_CONNECTION_URL_PATH,
 	REST_HYDRATE_MERCHANT_PATH,
+	REST_MANUAL_CONNECTION_PATH,
+	REST_PERSIST_PATH,
 	REST_REFRESH_FEATURES_PATH,
+	REST_WEBHOOKS,
 } from './constants';
 import ACTION_TYPES from './action-types';
 
@@ -115,4 +116,11 @@ export const controls = {
 			};
 		}
 	},
+
+	async [ ACTION_TYPES.DO_RESUBSCRIBE_WEBHOOKS ]() {
+		return await apiFetch( {
+			method: 'POST',
+			path: REST_WEBHOOKS,
+		} );
+	},
 };

modules/ppcp-settings/resources/js/data/common/hooks.js

@@ -9,11 +9,9 @@
 
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
-import { REST_WEBHOOKS, REST_WEBHOOKS_SIMULATE } from './constants';
+import { REST_WEBHOOKS, STORE_NAME } from './constants';
 import apiFetch from '@wordpress/api-fetch';
 
-import { STORE_NAME } from './constants';
-
 const useTransient = ( key ) =>
 	useSelect(
 		( select ) => select( STORE_NAME ).transientData()?.[ key ],
@@ -87,19 +85,6 @@ const useHooks = () => {
 			} );
 			setWebhooks( response?.data?.webhooks );
 		},
-		registerWebhooks: async () => {
-			const response = await apiFetch( {
-				method: 'POST',
-				path: REST_WEBHOOKS,
-			} );
-			setWebhooks( response?.data?.webhooks );
-		},
-		simulateWebhooks: async () => {
-			const response = await apiFetch( {
-				path: REST_WEBHOOKS_SIMULATE,
-			} );
-			console.log( response );
-		},
 		connectToSandbox,
 		connectToProduction,
 		connectViaIdAndSecret,
@@ -150,8 +135,20 @@ export const useWooSettings = () => {
 };
 
 export const useWebhooks = () => {
-	const { webhooks, setWebhooks, registerWebhooks } = useHooks();
-	return { webhooks, setWebhooks, registerWebhooks };
+	const {
+		webhooks,
+		setWebhooks,
+		registerWebhooks,
+		startWebhookSimulation,
+		checkWebhookSimulationState,
+	} = useHooks();
+	return {
+		webhooks,
+		setWebhooks,
+		registerWebhooks,
+		startWebhookSimulation,
+		checkWebhookSimulationState,
+	};
 };
 export const useMerchantInfo = () => {
 	const { merchant } = useHooks();