Settings UI: Move Todos config data to a dedicated REST endpoint. Add payment method - todo state sync.

modules/ppcp-settings/resources/css/components/screens/_settings.scss

@@ -41,6 +41,27 @@
 		padding-top: 16px;
 	}
 
+	&.is-completed {
+		.ppcp-r-todo-item__icon {
+			border-style: solid;
+			background-color: $color-blueberry;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			.dashicons {
+				color: #fff;
+				font-size: 18px;
+				width: 18px;
+				height: 18px;
+			}
+		}
+
+		.ppcp-r-todo-item__content {
+			text-decoration: line-through;
+		}
+	}
+
 	p {
 		@include font(14, 20, 400);
 	}

modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js

@@ -1,3 +1,5 @@
+import { selectTab, TAB_IDS } from '../../../utils/tabSelector';
+
 const TodoSettingsBlock = ( { todosData, className = '' } ) => {
 	if ( todosData.length === 0 ) {
 		return null;
@@ -7,29 +9,50 @@ const TodoSettingsBlock = ( { todosData, className = '' } ) => {
 		<div
 			className={ `ppcp-r-settings-block__todo ppcp-r-todo-items ${ className }` }
 		>
-			{ todosData
-				.slice( 0, 5 )
-				.filter( ( todo ) => {
-					return ! todo.isCompleted();
-				} )
-				.map( ( todo ) => (
-					<TodoItem
-						key={ todo.id }
-						title={ todo.title }
-						onClick={ todo.onClick }
-					/>
-				) ) }
+			{ todosData.slice( 0, 5 ).map( ( todo ) => (
+				<TodoItem
+					key={ todo.id }
+					title={ todo.title }
+					description={ todo.description }
+					isCompleted={ todo.isCompleted }
+					onClick={ async () => {
+						if ( todo.action.type === 'tab' ) {
+							const tabId =
+								TAB_IDS[ todo.action.tab.toUpperCase() ];
+							await selectTab( tabId, todo.action.section );
+						} else if ( todo.action.type === 'external' ) {
+							window.open( todo.action.url, '_blank' );
+						}
+					} }
+				/>
+			) ) }
 		</div>
 	);
 };
 
-const TodoItem = ( props ) => {
+const TodoItem = ( { title, description, isCompleted, onClick } ) => {
 	return (
-		<div className="ppcp-r-todo-item" onClick={ props.onClick }>
+		<div
+			className={ `ppcp-r-todo-item ${
+				isCompleted ? 'is-completed' : ''
+			}` }
+			onClick={ onClick }
+		>
 			<div className="ppcp-r-todo-item__inner">
-				<div className="ppcp-r-todo-item__icon"></div>
-				<div className="ppcp-r-todo-item__description">
-					{ props.title }
+				<div className="ppcp-r-todo-item__icon">
+					{ isCompleted && (
+						<span className="dashicons dashicons-yes"></span>
+					) }
+				</div>
+				<div className="ppcp-r-todo-item__content">
+					<div className="ppcp-r-todo-item__description">
+						{ title }
+					</div>
+					{ description && (
+						<div className="ppcp-r-todo-item__secondary-description">
+							{ description }
+						</div>
+					) }
 				</div>
 			</div>
 		</div>

modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js

@@ -12,10 +12,9 @@ import {
 import SettingsCard from '../../../ReusableComponents/SettingsCard';
 import { TITLE_BADGE_POSITIVE } from '../../../ReusableComponents/TitleBadge';
 import { useMerchantInfo } from '../../../../data/common/hooks';
+import { useTodos } from '../../../../data/todos/hooks';
 import { STORE_NAME } from '../../../../data/common';
 import Features from '../Components/Overview/Features';
-import { todosData } from '../todo-items';
-
 import {
 	NOTIFICATION_ERROR,
 	NOTIFICATION_SUCCESS,
@@ -24,6 +23,7 @@ import {
 const TabOverview = () => {
 	const [ isRefreshing, setIsRefreshing ] = useState( false );
 
+	const { todos, isReady: areTodosReady } = useTodos();
 	const { merchant, features: merchantFeatures } = useMerchantInfo();
 	const { refreshFeatureStatuses, setActiveModal } =
 		useDispatch( STORE_NAME );
@@ -86,9 +86,12 @@ const TabOverview = () => {
 		}
 	};
 
+	// Don't render todos section until data is ready
+	const showTodos = areTodosReady && todos.length > 0;
+
 	return (
 		<div className="ppcp-r-tab-overview">
-			{ todosData.length > 0 && (
+			{ showTodos && (
 				<SettingsCard
 					className="ppcp-r-tab-overview-todo"
 					title={ __(
@@ -100,7 +103,7 @@ const TabOverview = () => {
 						'woocommerce-paypal-payments'
 					) }
 				>
-					<TodoSettingsBlock todosData={ todosData } />
+					<TodoSettingsBlock todosData={ todos } />
 				</SettingsCard>
 			) }
 
@@ -208,7 +211,7 @@ const TabOverview = () => {
 										'View full documentation',
 										'woocommerce-paypal-payments'
 									),
-									url: 'https://woocommerce.com/document/woocommerce-paypal-payments/ ',
+									url: 'https://woocommerce.com/document/woocommerce-paypal-payments/',
 								},
 							],
 						} }
@@ -228,7 +231,7 @@ const TabOverview = () => {
 										'View support options',
 										'woocommerce-paypal-payments'
 									),
-									url: 'https://woocommerce.com/document/woocommerce-paypal-payments/#get-help ',
+									url: 'https://woocommerce.com/document/woocommerce-paypal-payments/#get-help',
 								},
 							],
 						} }

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

@@ -4,6 +4,7 @@ import {
 	PaymentStoreName,
 	SettingsStoreName,
 	StylingStoreName,
+	TodosStoreName,
 } from './index';
 import { setCompleted } from './onboarding/actions';
 
@@ -56,6 +57,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 );

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

@@ -4,8 +4,9 @@ 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';
 
-const stores = [ Onboarding, Common, Payment, Settings, Styling ];
+const stores = [ Onboarding, Common, Payment, Settings, Styling, Todos ];
 
 stores.forEach( ( store ) => {
 	try {
@@ -28,12 +29,14 @@ 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 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 * from './configuration';
 

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/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;
+};

modules/ppcp-settings/services.php

@@ -15,6 +15,8 @@ use WooCommerce\PayPalCommerce\Settings\Data\GeneralSettings;
 use WooCommerce\PayPalCommerce\Settings\Data\OnboardingProfile;
 use WooCommerce\PayPalCommerce\Settings\Data\PaymentSettings;
 use WooCommerce\PayPalCommerce\Settings\Data\SettingsModel;
+use WooCommerce\PayPalCommerce\Settings\Data\StylingSettings;
+use WooCommerce\PayPalCommerce\Settings\Data\TodosModel;
 use WooCommerce\PayPalCommerce\Settings\Endpoint\AuthenticationRestEndpoint;
 use WooCommerce\PayPalCommerce\Settings\Endpoint\CommonRestEndpoint;
 use WooCommerce\PayPalCommerce\Settings\Endpoint\LoginLinkRestEndpoint;
@@ -23,13 +25,13 @@ use WooCommerce\PayPalCommerce\Settings\Endpoint\PaymentRestEndpoint;
 use WooCommerce\PayPalCommerce\Settings\Endpoint\RefreshFeatureStatusEndpoint;
 use WooCommerce\PayPalCommerce\Settings\Endpoint\WebhookSettingsEndpoint;
 use WooCommerce\PayPalCommerce\Settings\Endpoint\SettingsRestEndpoint;
+use WooCommerce\PayPalCommerce\Settings\Endpoint\StylingRestEndpoint;
+use WooCommerce\PayPalCommerce\Settings\Endpoint\TodosRestEndpoint;
 use WooCommerce\PayPalCommerce\Settings\Handler\ConnectionListener;
 use WooCommerce\PayPalCommerce\Settings\Service\AuthenticationManager;
 use WooCommerce\PayPalCommerce\Settings\Service\ConnectionUrlGenerator;
 use WooCommerce\PayPalCommerce\Settings\Service\OnboardingUrlManager;
 use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
-use WooCommerce\PayPalCommerce\Settings\Endpoint\StylingRestEndpoint;
-use WooCommerce\PayPalCommerce\Settings\Data\StylingSettings;
 use WooCommerce\PayPalCommerce\Settings\Service\DataSanitizer;
 
 return array(
@@ -231,4 +233,12 @@ return array(
 	'settings.data.settings'                      => static function() : SettingsModel {
 		return new SettingsModel();
 	},
+	'settings.rest.todos' => static function ( ContainerInterface $container ) : TodosRestEndpoint {
+		return new TodosRestEndpoint(
+			$container->get( 'settings.data.todos' ),
+		);
+	},
+	'settings.data.todos' => static function ( ContainerInterface $container ) : TodosModel {
+		return new TodosModel();
+	},
 );

modules/ppcp-settings/src/Data/TodosModel.php

@@ -0,0 +1,70 @@
+<?php
+/**
+ * PayPal Commerce Todos Model
+ *
+ * @package WooCommerce\PayPalCommerce\Settings\Data
+ */
+
+declare(strict_types=1);
+
+namespace WooCommerce\PayPalCommerce\Settings\Data;
+
+use WooCommerce\PayPalCommerce\ApiClient\Exception\RuntimeException;
+
+/**
+ * Class TodosModel
+ *
+ * Handles the storage and retrieval of todo completion states in WordPress options table.
+ * Provides methods to get and update completion states with proper type casting.
+ */
+class TodosModel {
+	/**
+	 * WordPress option name for storing the completion states.
+	 *
+	 * @var string
+	 */
+	const OPTION_NAME = 'ppcp_todos';
+
+	/**
+	 * Retrieves the formatted completion states from WordPress options.
+	 *
+	 * Loads the raw completion states from wp_options table and formats them into a
+	 * standardized array structure with proper type casting.
+	 *
+	 * @return array The formatted completion states array.
+	 */
+	public function get(): array {
+		$completion_states = get_option(self::OPTION_NAME, array());
+		return array_map(
+			static function ($state) {
+				return (bool) $state;
+			},
+			$completion_states
+		);
+	}
+
+	/**
+	 * Updates the completion states in WordPress options.
+	 *
+	 * Converts the provided data array and saves it to wp_options table.
+	 * Throws an exception if update fails.
+	 *
+	 * @param array $states Array of todo IDs and their completion states.
+	 * @return void
+	 * @throws RuntimeException When the completion states update fails.
+	 */
+	public function update(array $states): void {
+		$completion_states = array_map(
+			static function ($state) {
+				return (bool) $state;
+			},
+			$states
+		);
+
+		$result = update_option(self::OPTION_NAME, $completion_states);
+
+		if (!$result) {
+			throw new RuntimeException('Failed to update todo completion states');
+		}
+	}
+}

modules/ppcp-settings/src/Endpoint/TodosRestEndpoint.php

@@ -0,0 +1,173 @@
+<?php
+/**
+ * REST endpoint to manage the things to do items.
+ *
+ * @package WooCommerce\PayPalCommerce\Settings\Endpoint
+ */
+
+declare(strict_types=1);
+
+namespace WooCommerce\PayPalCommerce\Settings\Endpoint;
+
+use WP_REST_Response;
+use WP_REST_Server;
+use WooCommerce\PayPalCommerce\Settings\Data\TodosModel;
+
+/**
+ * REST controller for the "Things To Do" items in the Overview tab.
+ *
+ * This API acts as the intermediary between the "external world" and our
+ * internal data model. It's responsible for checking eligibility and
+ * providing configuration data for things to do next.
+ */
+class TodosRestEndpoint extends RestEndpoint {
+	/**
+	 * The base path for this REST controller.
+	 *
+	 * @var string
+	 */
+	protected $rest_base = 'todos';
+
+	/**
+	 * The todos model instance.
+	 *
+	 * @var TodosModel
+	 */
+	protected TodosModel $todos;
+
+	/**
+	 * Constructor.
+	 *
+	 * @param TodosModel $todos The todos model instance.
+	 */
+	public function __construct(TodosModel $todos) {
+		$this->todos = $todos;
+	}
+
+	/**
+	 * Configure REST API routes.
+	 */
+	public function register_routes(): void {
+		register_rest_route(
+			$this->namespace,
+			'/' . $this->rest_base,
+			array(
+				'methods' => WP_REST_Server::READABLE,
+				'callback' => array($this, 'get_todos'),
+				'permission_callback' => array($this, 'check_permission'),
+			)
+		);
+	}
+
+	/**
+	 * Returns the full list of todo definitions with their eligibility conditions.
+	 *
+	 * @return array The array of todo definitions.
+	 */
+	protected function get_todo_definitions(): array {
+		return array(
+			'enable_fastlane' => array(
+				'title' => __('Enable Fastlane', 'woocommerce-paypal-payments'),
+				'description' => __('Accelerate your guest checkout with Fastlane by PayPal.', 'woocommerce-paypal-payments'),
+				'isEligible' => fn() => true,
+				'action' => array(
+					'type' => 'tab',
+					'tab' => 'payment_methods',
+					'section' => 'ppcp-card-payments-card',
+				),
+			),
+			'enable_credit_debit_cards' => array(
+				'title' => __('Enable Credit and Debit Cards on your checkout', 'woocommerce-paypal-payments'),
+				'description' => __('Credit and Debit Cards is now available for Blocks checkout pages.', 'woocommerce-paypal-payments'),
+				'isEligible' => fn() => true,
+				'action' => array(
+					'type' => 'tab',
+					'tab' => 'payment_methods',
+					'section' => 'ppcp-card-payments-card',
+				),
+			),
+			'enable_pay_later_messaging' => array(
+				'title' => __('Enable Pay Later messaging', 'woocommerce-paypal-payments'),
+				'description' => __('Show Pay Later messaging to boost conversion rate and increase cart size.', 'woocommerce-paypal-payments'),
+				'isEligible' => fn() => true,
+				'action' => array(
+					'type' => 'tab',
+					'tab' => 'overview',
+					'section' => 'pay_later_messaging',
+				),
+			),
+			'configure_paypal_subscription' => array(
+				'title' => __('Configure a PayPal Subscription', 'woocommerce-paypal-payments'),
+				'description' => __('Connect a subscriptions-type product from WooCommerce with PayPal.', 'woocommerce-paypal-payments'),
+				'isEligible' => fn() => true,
+				'action' => array(
+					'type' => 'external',
+					'url' => admin_url('edit.php?post_type=product&product_type=subscription'),
+				),
+			),
+			'register_domain_apple_pay' => array(
+				'title' => __('Register Domain for Apple Pay', 'woocommerce-paypal-payments'),
+				'description' => __('To enable Apple Pay, you must register your domain with PayPal.', 'woocommerce-paypal-payments'),
+				'isEligible' => fn() => true,
+				'action' => array(
+					'type' => 'tab',
+					'tab' => 'overview',
+					'section' => 'apple_pay',
+				),
+			),
+			'add_digital_wallets_to_account' => array(
+				'title' => __('Add digital wallets to your account', 'woocommerce-paypal-payments'),
+				'description' => __('Add the ability to accept Apple Pay & Google Pay to your PayPal account.', 'woocommerce-paypal-payments'),
+				'isEligible' => fn() => true,
+				'action' => array(
+					'type' => 'external',
+					'url' => 'https://www.paypal.com/businessmanage/account/settings',
+				),
+			),
+			'enable_apple_pay' => array(
+				'title' => __('Enable Apple Pay', 'woocommerce-paypal-payments'),
+				'description' => __('Allow your buyers to check out via Apple Pay.', 'woocommerce-paypal-payments'),
+				'isEligible' => fn() => true,
+				'action' => array(
+					'type' => 'tab',
+					'tab' => 'overview',
+					'section' => 'apple_pay',
+				),
+			),
+			'enable_google_pay' => array(
+				'title' => __('Enable Google Pay', 'woocommerce-paypal-payments'),
+				'description' => __('Allow your buyers to check out via Google Pay.', 'woocommerce-paypal-payments'),
+				'isEligible' => fn() => true,
+				'action' => array(
+					'type' => 'tab',
+					'tab' => 'overview',
+					'section' => 'google_pay',
+				),
+			),
+		);
+	}
+
+	/**
+	 * Returns all eligible todo items.
+	 *
+	 * @return WP_REST_Response The response containing eligible todo items.
+	 */
+	public function get_todos(): WP_REST_Response {
+		$completion_states = $this->todos->get();
+		$todos = array();
+
+		foreach ($this->get_todo_definitions() as $id => $todo) {
+			if ($todo['isEligible']()) {
+				$todos[] = array_merge(
+					array(
+						'id' => $id,
+						'isCompleted' => $completion_states[$id] ?? false
+					),
+					array_diff_key($todo, array('isEligible' => true))
+				);
+			}
+		}
+
+		return $this->return_success($todos);
+	}
+}

modules/ppcp-settings/src/SettingsModule.php

@@ -220,6 +220,7 @@ class SettingsModule implements ServiceModule, ExecutableModule {
 					'payment'                => $container->get( 'settings.rest.payment' ),
 					'settings'               => $container->get( 'settings.rest.settings' ),
 					'styling'                => $container->get( 'settings.rest.styling' ),
+					'todos'                => $container->get( 'settings.rest.todos' ),
 				);
 
 				foreach ( $endpoints as $endpoint ) {