diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js index b7163dc6f..089ad7150 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js +++ b/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 { refreshFeatureStatuses, setActiveModal } = - useDispatch( COMMON_STORE_NAME ); + const { merchant } = useMerchantInfo(); + const { refreshFeatureStatuses } = useDispatch( COMMON_STORE_NAME ); const { createSuccessNotice, createErrorNotice } = useDispatch( noticesStore ); const { features, fetchFeatures } = useFeatures(); useEffect( () => { - fetchFeatures( setActiveModal ); - }, [ fetchFeatures, setActiveModal ] ); + fetchFeatures(); + }, [ 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 ), } ) ), }; diff --git a/modules/ppcp-settings/resources/js/data/features/actions.js b/modules/ppcp-settings/resources/js/data/features/actions.js index 587844fcf..664e7cbae 100644 --- a/modules/ppcp-settings/resources/js/data/features/actions.js +++ b/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 ) => ( { - ...feature, - buttons: feature.buttons.map( ( button ) => ( { - ...button, - onClick: - featureButtonOnClickMap[ button.onClick ]( setActiveModal ), - } ) ), - } ) ); - dispatch( setFeatures( featuresWithModal ) ); + dispatch( setFeatures( features ) ); }; } - -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 ); - }, -}; diff --git a/modules/ppcp-settings/src/Data/Definition/FeaturesDefinition.php b/modules/ppcp-settings/src/Data/Definition/FeaturesDefinition.php index 064bf27bf..a4c9ca3b4 100644 --- a/modules/ppcp-settings/src/Data/Definition/FeaturesDefinition.php +++ b/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', ),