🔀 Merge branch 'trunk'

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

@@ -34,7 +34,7 @@ const useHooks = () => {
 	};
 };
 
-export const useState = () => {
+export const useStore = () => {
 	const { persist, isReady } = useHooks();
 	return { persist, isReady };
 };

modules/ppcp-settings/resources/js/data/debug.js

@@ -4,16 +4,24 @@ import {
 	PaymentStoreName,
 	SettingsStoreName,
 	StylingStoreName,
+	TodosStoreName,
 } from './index';
-import { setCompleted } from './onboarding/actions';
 
 export const addDebugTools = ( context, modules ) => {
-	if ( ! context || ! context?.debug ) {
+	if ( ! context ) {
 		return;
 	}
 
+	/*
+     // TODO - enable this condition for version 3.0.1
+     // In version 3.0.0 we want to have the debug tools available on every installation
+     if ( ! context.debug ) { return }
+     */
+
+	const debugApi = ( window.ppcpDebugger = window.ppcpDebugger || {} );
+
 	// Dump the current state of all our Redux stores.
-	context.dumpStore = async () => {
+	debugApi.dumpStore = async () => {
 		/* eslint-disable no-console */
 		if ( ! console?.groupCollapsed ) {
 			console.error( 'console.groupCollapsed is not supported.' );
@@ -41,7 +49,7 @@ export const addDebugTools = ( context, modules ) => {
 	};
 
 	// Reset all Redux stores to their initial state.
-	context.resetStore = () => {
+	debugApi.resetStore = () => {
 		const stores = [];
 		const { isConnected } = wp.data.select( CommonStoreName ).merchant();
 
@@ -56,6 +64,7 @@ export const addDebugTools = ( context, modules ) => {
 			stores.push( PaymentStoreName );
 			stores.push( SettingsStoreName );
 			stores.push( StylingStoreName );
+			stores.push( TodosStoreName );
 		} else {
 			// Only reset the common & onboarding stores to restart the onboarding wizard.
 			stores.push( CommonStoreName );
@@ -68,13 +77,17 @@ export const addDebugTools = ( context, modules ) => {
 			// eslint-disable-next-line no-console
 			console.log( `Reset store: ${ storeName }...` );
 
-			store.reset();
-			store.persist();
+			try {
+				store.reset();
+				store.persist();
+			} catch ( error ) {
+				console.error( ' ... Reset failed, skipping this store' );
+			}
 		} );
 	};
 
 	// Disconnect the merchant and display the onboarding wizard.
-	context.disconnect = () => {
+	debugApi.disconnect = () => {
 		const common = wp.data.dispatch( CommonStoreName );
 
 		common.disconnectMerchant();
@@ -86,10 +99,13 @@ export const addDebugTools = ( context, modules ) => {
 	};
 
 	// Enters or completes the onboarding wizard without changing anything else.
-	context.onboardingMode = ( state ) => {
+	debugApi.onboardingMode = ( state ) => {
 		const onboarding = wp.data.dispatch( OnboardingStoreName );
 
 		onboarding.setCompleted( ! state );
 		onboarding.persist();
 	};
+
+	// Expose original debug API.
+	Object.assign( context, debugApi );
 };

modules/ppcp-settings/resources/js/data/index.js

@@ -4,8 +4,18 @@ import * as Common from './common';
 import * as Payment from './payment';
 import * as Settings from './settings';
 import * as Styling from './styling';
+import * as Todos from './todos';
+import * as PayLaterMessaging from './pay-later-messaging';
 
-const stores = [ Onboarding, Common, Payment, Settings, Styling ];
+const stores = [
+	Onboarding,
+	Common,
+	Payment,
+	Settings,
+	Styling,
+	Todos,
+	PayLaterMessaging,
+];
 
 stores.forEach( ( store ) => {
 	try {
@@ -28,12 +38,16 @@ export const CommonHooks = Common.hooks;
 export const PaymentHooks = Payment.hooks;
 export const SettingsHooks = Settings.hooks;
 export const StylingHooks = Styling.hooks;
+export const TodosHooks = Todos.hooks;
+export const PayLaterMessagingHooks = PayLaterMessaging.hooks;
 
 export const OnboardingStoreName = Onboarding.STORE_NAME;
 export const CommonStoreName = Common.STORE_NAME;
 export const PaymentStoreName = Payment.STORE_NAME;
 export const SettingsStoreName = Settings.STORE_NAME;
 export const StylingStoreName = Styling.STORE_NAME;
+export const TodosStoreName = Todos.STORE_NAME;
+export const PayLaterMessagingStoreName = PayLaterMessaging.STORE_NAME;
 
 export * from './configuration';
 

modules/ppcp-settings/resources/js/data/pay-later-messaging/action-types.js

@@ -0,0 +1,18 @@
+/**
+ * Action Types: Define unique identifiers for actions across all store modules.
+ *
+ * @file
+ */
+
+export default {
+	// Transient data.
+	SET_TRANSIENT: 'PAY_LATER_MESSAGING:SET_TRANSIENT',
+
+	// Persistent data.
+	SET_PERSISTENT: 'PAY_LATER_MESSAGING:SET_PERSISTENT',
+	RESET: 'PAY_LATER_MESSAGING:RESET',
+	HYDRATE: 'PAY_LATER_MESSAGING:HYDRATE',
+
+	// Controls - always start with "DO_".
+	DO_PERSIST_DATA: 'PAY_LATER_MESSAGING:DO_PERSIST_DATA',
+};

modules/ppcp-settings/resources/js/data/pay-later-messaging/actions.js

@@ -0,0 +1,80 @@
+/**
+ * Action Creators: Define functions to create action objects.
+ *
+ * These functions update state or trigger side effects (e.g., async operations).
+ * Actions are categorized as Transient, Persistent, or Side effect.
+ *
+ * @file
+ */
+
+import { select } from '@wordpress/data';
+
+import ACTION_TYPES from './action-types';
+import { STORE_NAME } from './constants';
+
+/**
+ * @typedef {Object} Action An action object that is handled by a reducer or control.
+ * @property {string}  type    - The action type.
+ * @property {Object?} payload - Optional payload for the action.
+ */
+
+/**
+ * Special. Resets all values in the store to initial defaults.
+ *
+ * @return {Action} The action.
+ */
+export const reset = () => ( { type: ACTION_TYPES.RESET } );
+
+/**
+ * Persistent. Set the full store details during app initialization.
+ *
+ * @param {{data: {}, flags?: {}}} payload
+ * @return {Action} The action.
+ */
+export const hydrate = ( payload ) => ( {
+	type: ACTION_TYPES.HYDRATE,
+	payload,
+} );
+
+/**
+ * Generic transient-data updater.
+ *
+ * @param {string} prop  Name of the property to update.
+ * @param {any}    value The new value of the property.
+ * @return {Action} The action.
+ */
+export const setTransient = ( prop, value ) => ( {
+	type: ACTION_TYPES.SET_TRANSIENT,
+	payload: { [ prop ]: value },
+} );
+
+/**
+ * Generic persistent-data updater.
+ *
+ * @param {string} prop  Name of the property to update.
+ * @param {any}    value The new value of the property.
+ * @return {Action} The action.
+ */
+export const setPersistent = ( prop, value ) => ( {
+	type: ACTION_TYPES.SET_PERSISTENT,
+	payload: { [ prop ]: value },
+} );
+
+/**
+ * Transient. Marks the store as "ready", i.e., fully initialized.
+ *
+ * @param {boolean} isReady
+ * @return {Action} The action.
+ */
+export const setIsReady = ( isReady ) => setTransient( 'isReady', isReady );
+
+/**
+ * Side effect. Triggers the persistence of store data to the server.
+ *
+ * @return {Action} The action.
+ */
+export const persist = function* () {
+	const data = yield select( STORE_NAME ).persistentData();
+
+	yield { type: ACTION_TYPES.DO_PERSIST_DATA, data };
+};

modules/ppcp-settings/resources/js/data/pay-later-messaging/constants.js

@@ -0,0 +1,28 @@
+/**
+ * Name of the Redux store module.
+ *
+ * Used by: Reducer, Selector, Index
+ *
+ * @type {string}
+ */
+export const STORE_NAME = 'wc/paypal/pay_later_messaging';
+
+/**
+ * REST path to hydrate data of this module by loading data from the WP DB.
+ *
+ * Used by: Resolvers
+ * See: PayLaterMessagingEndpoint.php
+ *
+ * @type {string}
+ */
+export const REST_HYDRATE_PATH = '/wc/v3/wc_paypal/pay_later_messaging';
+
+/**
+ * REST path to persist data of this module to the WP DB.
+ *
+ * Used by: Controls
+ * See: PayLaterMessagingEndpoint.php
+ *
+ * @type {string}
+ */
+export const REST_PERSIST_PATH = '/wc/v3/wc_paypal/pay_later_messaging';

modules/ppcp-settings/resources/js/data/pay-later-messaging/controls.js

@@ -0,0 +1,23 @@
+/**
+ * Controls: Implement side effects, typically asynchronous operations.
+ *
+ * Controls use ACTION_TYPES keys as identifiers.
+ * They are triggered by corresponding actions and handle external interactions.
+ *
+ * @file
+ */
+
+import apiFetch from '@wordpress/api-fetch';
+
+import { REST_PERSIST_PATH } from './constants';
+import ACTION_TYPES from './action-types';
+
+export const controls = {
+	async [ ACTION_TYPES.DO_PERSIST_DATA ]( { data } ) {
+		return await apiFetch( {
+			path: REST_PERSIST_PATH,
+			method: 'POST',
+			data,
+		} );
+	},
+};

modules/ppcp-settings/resources/js/data/pay-later-messaging/hooks.js

@@ -0,0 +1,89 @@
+/**
+ * Hooks: Provide the main API for components to interact with the store.
+ *
+ * These encapsulate store interactions, offering a consistent interface.
+ * Hooks simplify data access and manipulation for components.
+ *
+ * @file
+ */
+
+import { useDispatch } from '@wordpress/data';
+
+import { createHooksForStore } from '../utils';
+import { STORE_NAME } from './constants';
+
+const useHooks = () => {
+	const { useTransient, usePersistent } = createHooksForStore( STORE_NAME );
+	const { persist } = useDispatch( STORE_NAME );
+
+	// Read-only flags and derived state.
+	// Nothing here yet.
+
+	// Transient accessors.
+	const [ isReady ] = useTransient( 'isReady' );
+
+	// Persistent accessors.
+	const [ cart, setCart ] = usePersistent( 'cart' );
+	const [ checkout, setCheckout ] = usePersistent( 'checkout' );
+	const [ product, setProduct ] = usePersistent( 'product' );
+	const [ shop, setShop ] = usePersistent( 'shop' );
+	const [ home, setHome ] = usePersistent( 'home' );
+	const [ custom_placement, setCustom_placement ] =
+		usePersistent( 'custom_placement' );
+
+	return {
+		persist,
+		isReady,
+		cart,
+		setCart,
+		checkout,
+		setCheckout,
+		product,
+		setProduct,
+		shop,
+		setShop,
+		home,
+		setHome,
+		custom_placement,
+		setCustom_placement,
+	};
+};
+
+export const useStore = () => {
+	const { persist, isReady } = useHooks();
+	return { persist, isReady };
+};
+
+export const usePayLaterMessaging = () => {
+	const {
+		cart,
+		setCart,
+		checkout,
+		setCheckout,
+		product,
+		setProduct,
+		shop,
+		setShop,
+		home,
+		setHome,
+		custom_placement,
+		setCustom_placement,
+	} = useHooks();
+
+	return {
+		config: {
+			cart,
+			checkout,
+			product,
+			shop,
+			home,
+			custom_placement,
+		},
+		setCart,
+		setCheckout,
+		setProduct,
+		setShop,
+		setHome,
+		setCustom_placement,
+	};
+};

modules/ppcp-settings/resources/js/data/pay-later-messaging/index.js

@@ -0,0 +1,32 @@
+import { createReduxStore, register } from '@wordpress/data';
+import { controls as wpControls } from '@wordpress/data-controls';
+
+import { STORE_NAME } from './constants';
+import reducer from './reducer';
+import * as selectors from './selectors';
+import * as actions from './actions';
+import * as hooks from './hooks';
+import { resolvers } from './resolvers';
+import { controls } from './controls';
+
+/**
+ * Initializes and registers the settings store with WordPress data layer.
+ * Combines custom controls with WordPress data controls.
+ *
+ * @return {boolean} True if initialization succeeded, false otherwise.
+ */
+export const initStore = () => {
+	const store = createReduxStore( STORE_NAME, {
+		reducer,
+		controls: { ...wpControls, ...controls },
+		actions,
+		selectors,
+		resolvers,
+	} );
+
+	register( store );
+
+	return Boolean( wp.data.select( STORE_NAME ) );
+};
+
+export { hooks, selectors, STORE_NAME };

modules/ppcp-settings/resources/js/data/pay-later-messaging/reducer.js

@@ -0,0 +1,60 @@
+/**
+ * Reducer: Defines store structure and state updates for this module.
+ *
+ * Manages both transient (temporary) and persistent (saved) state.
+ * The initial state must define all properties, as dynamic additions are not supported.
+ *
+ * @file
+ */
+
+import { createReducer, createReducerSetters } from '../utils';
+import ACTION_TYPES from './action-types';
+
+// Store structure.
+
+// Transient: Values that are _not_ saved to the DB (like app lifecycle-flags).
+const defaultTransient = Object.freeze( {
+	isReady: false,
+} );
+
+// Persistent: Values that are loaded from the DB.
+const defaultPersistent = Object.freeze( {
+	cart: {},
+	checkout: {},
+	product: {},
+	shop: {},
+	home: {},
+	custom_placement: [],
+} );
+
+// Reducer logic.
+
+const [ changeTransient, changePersistent ] = createReducerSetters(
+	defaultTransient,
+	defaultPersistent
+);
+
+const reducer = createReducer( defaultTransient, defaultPersistent, {
+	[ ACTION_TYPES.SET_TRANSIENT ]: ( state, payload ) =>
+		changeTransient( state, payload ),
+
+	[ ACTION_TYPES.SET_PERSISTENT ]: ( state, payload ) =>
+		changePersistent( state, payload ),
+
+	[ ACTION_TYPES.RESET ]: ( state ) => {
+		const cleanState = changeTransient(
+			changePersistent( state, defaultPersistent ),
+			defaultTransient
+		);
+
+		// Keep "read-only" details and initialization flags.
+		cleanState.isReady = true;
+
+		return cleanState;
+	},
+
+	[ ACTION_TYPES.HYDRATE ]: ( state, payload ) =>
+		changePersistent( state, payload.data ),
+} );
+
+export default reducer;

modules/ppcp-settings/resources/js/data/pay-later-messaging/resolvers.js

@@ -0,0 +1,37 @@
+/**
+ * Resolvers: Handle asynchronous data fetching for the store.
+ *
+ * These functions update store state with data from external sources.
+ * Each resolver corresponds to a specific selector (selector with same name must exist).
+ * Resolvers are called automatically when selectors request unavailable data.
+ *
+ * @file
+ */
+
+import { dispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { apiFetch } from '@wordpress/data-controls';
+
+import { STORE_NAME, REST_HYDRATE_PATH } from './constants';
+
+export const resolvers = {
+	/**
+	 * Retrieve settings from the site's REST API.
+	 */
+	*persistentData() {
+		try {
+			const result = yield apiFetch( { path: REST_HYDRATE_PATH } );
+
+			yield dispatch( STORE_NAME ).hydrate( result );
+			yield dispatch( STORE_NAME ).setIsReady( true );
+		} catch ( e ) {
+			yield dispatch( 'core/notices' ).createErrorNotice(
+				// TODO: Add the module name to the error message.
+				__(
+					'Error retrieving Pay Later Messaging config details.',
+					'woocommerce-paypal-payments'
+				)
+			);
+		}
+	},
+};

modules/ppcp-settings/resources/js/data/pay-later-messaging/selectors.js

@@ -0,0 +1,21 @@
+/**
+ * Selectors: Extract specific pieces of state from the store.
+ *
+ * These functions provide a consistent interface for accessing store data.
+ * They allow components to retrieve data without knowing the store structure.
+ *
+ * @file
+ */
+
+const EMPTY_OBJ = Object.freeze( {} );
+
+const getState = ( state ) => state || EMPTY_OBJ;
+
+export const persistentData = ( state ) => {
+	return getState( state ).data || EMPTY_OBJ;
+};
+
+export const transientData = ( state ) => {
+	const { data, ...transientState } = getState( state );
+	return transientState || EMPTY_OBJ;
+};

modules/ppcp-settings/resources/js/data/payment/index.js

@@ -8,6 +8,7 @@ import * as actions from './actions';
 import * as hooks from './hooks';
 import { resolvers } from './resolvers';
 import { controls } from './controls';
+import { initTodoSync } from '../sync/todo-state-sync';
 
 /**
  * Initializes and registers the settings store with WordPress data layer.
@@ -26,6 +27,9 @@ export const initStore = () => {
 
 	register( store );
 
+	// Initialize todo sync after store registration. Potentially should be moved elsewhere.
+	initTodoSync();
+
 	return Boolean( wp.data.select( STORE_NAME ) );
 };
 

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

@@ -21,25 +21,28 @@ const useHooks = () => {
 	// Persistent accessors.
 	const [ invoicePrefix, setInvoicePrefix ] =
 		usePersistent( 'invoicePrefix' );
+	const [ brandName, setBrandName ] = usePersistent( 'brandName' );
+	const [ softDescriptor, setSoftDescriptor ] =
+		usePersistent( 'softDescriptor' );
+
+	const [ subtotalAdjustment, setSubtotalAdjustment ] =
+		usePersistent( 'subtotalAdjustment' );
+	const [ landingPage, setLandingPage ] = usePersistent( 'landingPage' );
+	const [ buttonLanguage, setButtonLanguage ] =
+		usePersistent( 'buttonLanguage' );
+
 	const [ authorizeOnly, setAuthorizeOnly ] =
 		usePersistent( 'authorizeOnly' );
 	const [ captureVirtualOnlyOrders, setCaptureVirtualOnlyOrders ] =
-		usePersistent( 'captureVirtualOnlyOrders' );
+		usePersistent( 'captureVirtualOrders' );
 	const [ savePaypalAndVenmo, setSavePaypalAndVenmo ] =
 		usePersistent( 'savePaypalAndVenmo' );
 	const [ saveCardDetails, setSaveCardDetails ] =
 		usePersistent( 'saveCardDetails' );
 	const [ payNowExperience, setPayNowExperience ] =
-		usePersistent( 'payNowExperience' );
-	const [ logging, setLogging ] = usePersistent( 'logging' );
-	const [ subtotalAdjustment, setSubtotalAdjustment ] =
-		usePersistent( 'subtotalAdjustment' );
-	const [ brandName, setBrandName ] = usePersistent( 'brandName' );
-	const [ softDescriptor, setSoftDescriptor ] =
-		usePersistent( 'softDescriptor' );
-	const [ landingPage, setLandingPage ] = usePersistent( 'landingPage' );
-	const [ buttonLanguage, setButtonLanguage ] =
-		usePersistent( 'buttonLanguage' );
+		usePersistent( 'enablePayNow' );
+	const [ logging, setLogging ] = usePersistent( 'enableLogging' );
+
 	const [ disabledCards, setDisabledCards ] =
 		usePersistent( 'disabledCards' );
 

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

@@ -25,18 +25,25 @@ const defaultTransient = Object.freeze( {
  * These represent the core PayPal payment settings configuration.
  */
 const defaultPersistent = Object.freeze( {
+	// String values.
 	invoicePrefix: '', // Prefix for PayPal invoice IDs
-	authorizeOnly: false, // Whether to only authorize payments initially
-	captureVirtualOnlyOrders: false, // Auto-capture virtual-only orders
-	savePaypalAndVenmo: false, // Enable PayPal & Venmo vaulting
-	saveCardDetails: false, // Enable card vaulting
-	payNowExperience: false, // Enable Pay Now experience
-	logging: false, // Enable debug logging
-	subtotalAdjustment: 'skip_details', // Handling for subtotal mismatches
 	brandName: '', // Merchant brand name for PayPal
 	softDescriptor: '', // Payment descriptor on statements
-	landingPage: 'any', // PayPal checkout landing page
+
+	// Limited value strings.
+	subtotalAdjustment: 'no_details', // [correction|no_details] Handling for subtotal mismatches
+	landingPage: 'any', // [any|login|guest_checkout] PayPal checkout landing page
 	buttonLanguage: '', // Language for PayPal buttons
+
+	// Boolean flags.
+	authorizeOnly: false, // Whether to only authorize payments initially
+	captureVirtualOrders: false, // Auto-capture virtual-only orders
+	savePaypalAndVenmo: false, // Enable PayPal & Venmo vaulting
+	saveCardDetails: false, // Enable card vaulting
+	enablePayNow: false, // Enable Pay Now experience
+	enableLogging: false, // Enable debug logging
+
+	// String arrays.
 	disabledCards: [], // Disabled credit card types
 } );
 

modules/ppcp-settings/resources/js/data/sync/todo-state-sync.js

@@ -0,0 +1,67 @@
+import { subscribe, select, dispatch } from '@wordpress/data';
+
+const TODO_TRIGGERS = {
+	'ppcp-applepay': 'enable_apple_pay',
+	'ppcp-googlepay': 'enable_google_pay',
+	'ppcp-axo-gateway': 'enable_fastlane',
+	'ppcp-card-button-gateway': 'enable_credit_debit_cards',
+};
+
+/**
+ * Initialize todo synchronization
+ */
+export const initTodoSync = () => {
+	let previousPaymentState = null;
+	let isProcessing = false;
+
+	subscribe( () => {
+		if ( isProcessing ) {
+			return;
+		}
+
+		isProcessing = true;
+
+		try {
+			const paymentState = select( 'wc/paypal/payment' ).persistentData();
+			const todosState = select( 'wc/paypal/todos' ).getTodos();
+
+			// Skip if states haven't been initialized yet
+			if ( ! paymentState || ! todosState || ! previousPaymentState ) {
+				previousPaymentState = paymentState;
+				return;
+			}
+
+			Object.entries( TODO_TRIGGERS ).forEach(
+				( [ paymentMethod, todoId ] ) => {
+					const wasEnabled =
+						previousPaymentState[ paymentMethod ]?.enabled;
+					const isEnabled = paymentState[ paymentMethod ]?.enabled;
+
+					if ( wasEnabled !== isEnabled ) {
+						const todoToUpdate = todosState.find(
+							( todo ) => todo.id === todoId
+						);
+
+						if ( todoToUpdate ) {
+							const updatedTodos = todosState.map( ( todo ) =>
+								todo.id === todoId
+									? { ...todo, isCompleted: isEnabled }
+									: todo
+							);
+
+							dispatch( 'wc/paypal/todos' ).setTodos(
+								updatedTodos
+							);
+						}
+					}
+				}
+			);
+
+			previousPaymentState = paymentState;
+		} catch ( error ) {
+			console.error( 'Error in todo sync:', error );
+		} finally {
+			isProcessing = false;
+		}
+	} );
+};

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

@@ -0,0 +1,16 @@
+/**
+ * Action Types: Define unique identifiers for actions across all store modules.
+ *
+ * @file
+ */
+
+export default {
+	// Transient data
+	SET_TRANSIENT: 'TODOS:SET_TRANSIENT',
+
+	// Persistent data
+	SET_TODOS: 'TODOS:SET_TODOS',
+
+	// Controls
+	DO_FETCH_TODOS: 'TODOS:DO_FETCH_TODOS',
+};

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

@@ -0,0 +1,24 @@
+/**
+ * Action Creators: Define functions to create action objects.
+ *
+ * These functions update state or trigger side effects (e.g., async operations).
+ * Actions are categorized as Transient, Persistent, or Side effect.
+ *
+ * @file
+ */
+
+import ACTION_TYPES from './action-types';
+
+export const setIsReady = ( isReady ) => ( {
+	type: ACTION_TYPES.SET_TRANSIENT,
+	payload: { isReady },
+} );
+
+export const setTodos = ( todos ) => ( {
+	type: ACTION_TYPES.SET_TODOS,
+	payload: todos,
+} );
+
+export const fetchTodos = function* () {
+	yield { type: ACTION_TYPES.DO_FETCH_TODOS };
+};

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

@@ -0,0 +1,8 @@
+/**
+ * Constants: Define store configuration values.
+ *
+ * @file
+ */
+
+export const STORE_NAME = 'wc/paypal/todos';
+export const REST_PATH = '/wc/v3/wc_paypal/todos';

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

@@ -0,0 +1,22 @@
+/**
+ * Controls: Implement side effects, typically asynchronous operations.
+ *
+ * Controls use ACTION_TYPES keys as identifiers.
+ * They are triggered by corresponding actions and handle external interactions.
+ *
+ * @file
+ */
+
+import apiFetch from '@wordpress/api-fetch';
+import { REST_PATH } from './constants';
+import ACTION_TYPES from './action-types';
+
+export const controls = {
+	async [ ACTION_TYPES.DO_FETCH_TODOS ]() {
+		const response = await apiFetch( {
+			path: REST_PATH,
+			method: 'GET',
+		} );
+		return response?.data || [];
+	},
+};

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

@@ -0,0 +1,33 @@
+/**
+ * Hooks: Provide the main API for components to interact with the store.
+ *
+ * These encapsulate store interactions, offering a consistent interface.
+ * Hooks simplify data access and manipulation for components.
+ *
+ * @file
+ */
+
+import { useSelect, useDispatch } from '@wordpress/data';
+import { STORE_NAME } from './constants';
+
+const useTransient = ( key ) =>
+	useSelect(
+		( select ) => select( STORE_NAME ).transientData()?.[ key ],
+		[ key ]
+	);
+
+export const useTodos = () => {
+	const todos = useSelect(
+		( select ) => select( STORE_NAME ).getTodos(),
+		[]
+	);
+	const isReady = useTransient( 'isReady' );
+
+	const { fetchTodos } = useDispatch( STORE_NAME );
+
+	return {
+		todos,
+		isReady,
+		fetchTodos,
+	};
+};

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

@@ -0,0 +1,32 @@
+import { createReduxStore, register } from '@wordpress/data';
+import { controls as wpControls } from '@wordpress/data-controls';
+
+import { STORE_NAME } from './constants';
+import reducer from './reducer';
+import * as selectors from './selectors';
+import * as actions from './actions';
+import * as hooks from './hooks';
+import { resolvers } from './resolvers';
+import { controls } from './controls';
+
+/**
+ * Initializes and registers the todos store with WordPress data layer.
+ * Combines custom controls with WordPress data controls.
+ *
+ * @return {boolean} True if initialization succeeded, false otherwise.
+ */
+export const initStore = () => {
+	const store = createReduxStore( STORE_NAME, {
+		reducer,
+		controls: { ...wpControls, ...controls },
+		actions,
+		selectors,
+		resolvers,
+	} );
+
+	register( store );
+
+	return Boolean( wp.data.select( STORE_NAME ) );
+};
+
+export { hooks, selectors, STORE_NAME };

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

@@ -0,0 +1,90 @@
+/**
+ * Reducer: Defines store structure and state updates for todos module.
+ *
+ * Manages both transient (temporary) and persistent (saved) state.
+ * The initial state must define all properties, as dynamic additions are not supported.
+ *
+ * @file
+ */
+
+import { createReducer, createReducerSetters } from '../utils';
+import ACTION_TYPES from './action-types';
+
+// Store structure.
+
+/**
+ * Transient: Values that are _not_ saved to the DB (like app lifecycle-flags).
+ * These reset on page reload.
+ */
+const defaultTransient = Object.freeze( {
+	isReady: false,
+} );
+
+/**
+ * Persistent: Values that are loaded from and saved to the DB.
+ * These represent the core todos configuration.
+ */
+const defaultPersistent = Object.freeze( {
+	todos: [],
+} );
+
+// Reducer logic.
+
+const [ changeTransient, changePersistent ] = createReducerSetters(
+	defaultTransient,
+	defaultPersistent
+);
+
+/**
+ * Reducer implementation mapping actions to state updates.
+ */
+const reducer = createReducer( defaultTransient, defaultPersistent, {
+	/**
+	 * Updates temporary state values
+	 *
+	 * @param {Object} state   Current state
+	 * @param {Object} payload Update payload
+	 * @return {Object} Updated state
+	 */
+	[ ACTION_TYPES.SET_TRANSIENT ]: ( state, payload ) =>
+		changeTransient( state, payload ),
+
+	/**
+	 * Updates todos list
+	 *
+	 * @param {Object} state   Current state
+	 * @param {Object} payload Update payload
+	 * @return {Object} Updated state
+	 */
+	[ ACTION_TYPES.SET_TODOS ]: ( state, payload ) => {
+		return changePersistent( state, { todos: payload } );
+	},
+
+	/**
+	 * Resets state to defaults while maintaining initialization status
+	 *
+	 * @param {Object} state Current state
+	 * @return {Object} Reset state
+	 */
+	[ ACTION_TYPES.RESET ]: ( state ) => {
+		const cleanState = changeTransient(
+			changePersistent( state, defaultPersistent ),
+			defaultTransient
+		);
+		cleanState.isReady = true; // Keep initialization flag
+		return cleanState;
+	},
+
+	/**
+	 * Initializes persistent state with data from the server
+	 *
+	 * @param {Object} state        Current state
+	 * @param {Object} payload      Hydration payload containing server data
+	 * @param {Object} payload.data The todos data to hydrate
+	 * @return {Object} Hydrated state
+	 */
+	[ ACTION_TYPES.HYDRATE ]: ( state, payload ) =>
+		changePersistent( state, payload.data ),
+} );
+
+export default reducer;

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

@@ -0,0 +1,35 @@
+/**
+ * Resolvers: Handle asynchronous data fetching for the store.
+ *
+ * These functions update store state with data from external sources.
+ * Each resolver corresponds to a specific selector (selector with same name must exist).
+ * Resolvers are called automatically when selectors request unavailable data.
+ *
+ * @file
+ */
+
+import { dispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { apiFetch } from '@wordpress/data-controls';
+import { STORE_NAME, REST_PATH } from './constants';
+
+export const resolvers = {
+	*getTodos() {
+		try {
+			const response = yield apiFetch( { path: REST_PATH } );
+
+			// Make sure we're accessing the correct part of the response
+			const todos = response?.data || [];
+
+			yield dispatch( STORE_NAME ).setTodos( todos );
+			yield dispatch( STORE_NAME ).setIsReady( true );
+
+		} catch ( e ) {
+			console.error( 'Resolver error:', e );
+			yield dispatch( STORE_NAME ).setIsReady( false );
+			yield dispatch( 'core/notices' ).createErrorNotice(
+				__( 'Error retrieving todos.', 'woocommerce-paypal-payments' )
+			);
+		}
+	},
+};

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

@@ -0,0 +1,28 @@
+/**
+ * Selectors: Extract specific pieces of state from the store.
+ *
+ * These functions provide a consistent interface for accessing store data.
+ * They allow components to retrieve data without knowing the store structure.
+ *
+ * @file
+ */
+
+const EMPTY_OBJ = Object.freeze( {} );
+const EMPTY_ARR = Object.freeze( [] );
+
+const getState = ( state ) => state || EMPTY_OBJ;
+
+export const persistentData = ( state ) => {
+	return getState( state ).data || EMPTY_OBJ;
+};
+
+export const transientData = ( state ) => {
+	const { data, ...transientState } = getState( state );
+	return transientState || EMPTY_OBJ;
+};
+
+export const getTodos = ( state ) => {
+	// Access todos directly from state first
+	const todos = state?.todos || persistentData( state ).todos || EMPTY_ARR;
+	return todos;
+};