Add actions in feature definitions

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

@@ -1,7 +1,7 @@
 import { __, sprintf } from '@wordpress/i18n';
-import { useState, useMemo, useEffect } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 import { Button, Icon } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import { reusableBlock } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 
@@ -16,7 +16,7 @@ import { useTodos } from '../../../../data/todos/hooks';
 import { useMerchantInfo } from '../../../../data/common/hooks';
 import { STORE_NAME as COMMON_STORE_NAME } from '../../../../data/common';
 import { STORE_NAME as TODOS_STORE_NAME } from '../../../../data/todos';
-import { CommonHooks, TodosHooks, FeaturesHooks } from '../../../../data';
+import { CommonHooks, TodosHooks } from '../../../../data';
 
 import {
 	NOTIFICATION_ERROR,
@@ -24,7 +24,8 @@ import {
 } from '../../../ReusableComponents/Icons';
 import SpinnerOverlay from '../../../ReusableComponents/SpinnerOverlay';
 import { useFeatures } from '../../../../data/features/hooks';
-import { featureButtonOnClickMap } from '../../../../data/features/actions';
+import { selectTab, TAB_IDS } from '../../../../utils/tabSelector';
+import { setActiveModal } from '../../../../data/common/actions';
 
 const TabOverview = () => {
 	const { isReady: areTodosReady } = TodosHooks.useTodos();
@@ -48,6 +49,7 @@ export default TabOverview;
 const OverviewTodos = () => {
 	const [ isResetting, setIsResetting ] = useState( false );
 	const { todos, isReady: areTodosReady, dismissTodo } = useTodos();
+	// eslint-disable-next-line no-shadow
 	const { setActiveModal, setActiveHighlight } =
 		useDispatch( COMMON_STORE_NAME );
 	const { resetDismissedTodos, setDismissedTodos } =
@@ -118,16 +120,15 @@ const OverviewTodos = () => {
 
 const OverviewFeatures = () => {
 	const [ isRefreshing, setIsRefreshing ] = useState( false );
-	const { merchant, features: merchantFeatures } = useMerchantInfo();
+	const { merchant } = useMerchantInfo();
-	const { refreshFeatureStatuses, setActiveModal } =
+	const { refreshFeatureStatuses } = useDispatch( COMMON_STORE_NAME );
-		useDispatch( COMMON_STORE_NAME );
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 	const { features, fetchFeatures } = useFeatures();
 
 	useEffect( () => {
-		fetchFeatures( setActiveModal );
+		fetchFeatures();
-	}, [ fetchFeatures, setActiveModal ] );
+	}, [ fetchFeatures ] );
 
 	const refreshHandler = async () => {
 		setIsRefreshing( true );
@@ -221,6 +222,15 @@ const OverviewFeatureItem = ( {
 			( enabled && button.showWhen === 'enabled' ) ||
 			( ! enabled && button.showWhen === 'disabled' )
 	);
+	const handleClick = async ( feature ) => {
+		if ( feature.action?.type === 'tab' ) {
+			const tabId = TAB_IDS[ feature.action.tab.toUpperCase() ];
+			await selectTab( tabId, feature.action.section );
+		}
+		if ( feature.action?.modal ) {
+			setActiveModal( feature.action.modal );
+		}
+	};
 
 	const actionProps = {
 		isBusy,
@@ -229,6 +239,7 @@ const OverviewFeatureItem = ( {
 		buttons: visibleButtons.map( ( button ) => ( {
 			...button,
 			url: getButtonUrl( button ),
+			onClick: () => handleClick( button ),
 		} ) ),
 	};
 

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

@@ -12,7 +12,6 @@ import apiFetch from '@wordpress/api-fetch';
 import ACTION_TYPES from './action-types';
 import { REST_PERSIST_PATH } from './constants';
 import { dispatch } from '@wordpress/data';
-import { selectTab, TAB_IDS } from '../../utils/tabSelector';
 
 /**
  * @typedef {Object} Action An action object that is handled by a reducer or control.
@@ -85,51 +84,10 @@ export function persist() {
 	};
 }
 
-export function fetchFeatures( setActiveModal ) {
+export function fetchFeatures() {
 	return async () => {
 		const response = await apiFetch( { path: REST_PERSIST_PATH } );
 		const features = response?.data || [];
-		const featuresWithModal = features.map( ( feature ) => ( {
+		dispatch( setFeatures( features ) );
-			...feature,
-			buttons: feature.buttons.map( ( button ) => ( {
-				...button,
-				onClick:
-					featureButtonOnClickMap[ button.onClick ]( setActiveModal ),
-			} ) ),
-		} ) );
-		dispatch( setFeatures( featuresWithModal ) );
 	};
 }
-
-const featureButtonOnClickMap = {
-	save_paypal_and_venmo: () => {
-		selectTab( TAB_IDS.SETTINGS, 'ppcp--save-payment-methods' );
-	},
-	advanced_credit_and_debit_cards: ( setActiveModal ) => {
-		selectTab( TAB_IDS.PAYMENT_METHODS, 'ppcp-card-payments-card' ).then(
-			() => {
-				setActiveModal( 'ppcp-credit-card-gateway' );
-			}
-		);
-	},
-	alternative_payment_methods: () => {
-		selectTab( TAB_IDS.PAYMENT_METHODS, 'ppcp-alternative-payments-card' );
-	},
-	google_pay: ( setActiveModal ) => {
-		selectTab( TAB_IDS.PAYMENT_METHODS, 'ppcp-card-payments-card' ).then(
-			() => {
-				setActiveModal( 'ppcp-googlepay' );
-			}
-		);
-	},
-	apple_pay: ( setActiveModal ) => {
-		selectTab( TAB_IDS.PAYMENT_METHODS, 'ppcp-card-payments-card' ).then(
-			() => {
-				setActiveModal( 'ppcp-applepay' );
-			}
-		);
-	},
-	pay_later: () => {
-		selectTab( TAB_IDS.PAY_LATER_MESSAGING );
-	},
-};

modules/ppcp-settings/src/Data/Definition/FeaturesDefinition.php

@@ -79,7 +79,11 @@ class FeaturesDefinition
 					array(
 						'type' => 'secondary',
 						'text' => __('Configure', 'woocommerce-paypal-payments'),
-						'onClick' => 'save_paypal_and_venmo',
+						'action'      => array(
+							'type' => 'tab',
+							'tab'  => 'settings',
+							'section' => 'ppcp--save-payment-methods',
+						),
 						'showWhen' => 'enabled',
 						'class' => 'small-button',
 					),
@@ -109,7 +113,12 @@ class FeaturesDefinition
 					array(
 						'type' => 'secondary',
 						'text' => __('Configure', 'woocommerce-paypal-payments'),
-						'onClick' => 'advanced_credit_and_debit_cards',
+						'action'      => array(
+							'type' => 'tab',
+							'tab'  => 'payment_methods',
+							'section' => 'ppcp-card-payments-card',
+							'modal' => 'ppcp-credit-card-gateway',
+						),
 						'showWhen' => 'enabled',
 						'class' => 'small-button',
 					),
@@ -139,7 +148,11 @@ class FeaturesDefinition
 					array(
 						'type' => 'secondary',
 						'text' => __('Configure', 'woocommerce-paypal-payments'),
-						'onClick' => 'alternative_payment_methods',
+						'action'      => array(
+							'type' => 'tab',
+							'tab'  => 'payment_methods',
+							'section' => 'ppcp-alternative-payments-card',
+						),
 						'showWhen' => 'enabled',
 						'class' => 'small-button',
 					),
@@ -166,7 +179,12 @@ class FeaturesDefinition
 					array(
 						'type' => 'secondary',
 						'text' => __('Configure', 'woocommerce-paypal-payments'),
-						'onClick' => 'google_pay',
+						'action'      => array(
+							'type' => 'tab',
+							'tab'  => 'payment_methods',
+							'section' => 'ppcp-card-payments-card',
+							'modal' => 'ppcp-googlepay',
+						),
 						'showWhen' => 'enabled',
 						'class' => 'small-button',
 					),
@@ -199,7 +217,12 @@ class FeaturesDefinition
 					array(
 						'type' => 'secondary',
 						'text' => __('Configure', 'woocommerce-paypal-payments'),
-						'onClick' => 'apple_pay',
+						'action'      => array(
+							'type' => 'tab',
+							'tab'  => 'payment_methods',
+							'section' => 'ppcp-card-payments-card',
+							'modal' => 'ppcp-applepay',
+						),
 						'showWhen' => 'enabled',
 						'class' => 'small-button',
 					),
@@ -242,7 +265,10 @@ class FeaturesDefinition
 					array(
 						'type' => 'secondary',
 						'text' => __('Configure', 'woocommerce-paypal-payments'),
-						'onClick' => 'pay_later',
+						'action'      => array(
+							'type' => 'tab',
+							'tab'  => 'pay_later_messaging',
+						),
 						'showWhen' => 'enabled',
 						'class' => 'small-button',
 					),