From faff0baa434c91ea6982dde6c2090d226ef02613 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Thu, 21 Nov 2024 16:16:20 +0100 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Move=20sandbox=20&=20manua?= =?UTF-8?q?l-connect=20to=20common=20store?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/AdvancedOptionsForm.js | 9 +- .../resources/js/data/common/actions.js | 25 +++++ .../resources/js/data/common/constants.js | 10 ++ .../resources/js/data/common/controls.js | 29 ++++- .../resources/js/data/common/hooks.js | 77 ++++++++++++- .../resources/js/data/onboarding/actions.js | 19 ---- .../resources/js/data/onboarding/constants.js | 10 -- .../resources/js/data/onboarding/controls.js | 29 +---- .../resources/js/data/onboarding/hooks.js | 103 +++++------------- .../resources/js/data/onboarding/reducer.js | 4 - 10 files changed, 169 insertions(+), 146 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AdvancedOptionsForm.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AdvancedOptionsForm.js index 0fa0066fd..db3775e59 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AdvancedOptionsForm.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AdvancedOptionsForm.js @@ -11,20 +11,19 @@ import { OnboardingHooks, CommonHooks } from '../../../../data'; const AdvancedOptionsForm = ( { setCompleted } ) => { const { isBusy } = CommonHooks.useBusyState(); + const { isSandboxMode, setSandboxMode } = CommonHooks.useSandbox(); const { - isSandboxMode, - setSandboxMode, isManualConnectionMode, setManualConnectionMode, clientId, setClientId, clientSecret, setClientSecret, - } = OnboardingHooks.useConnection(); + connectViaIdAndSecret, + } = CommonHooks.useManualConnection(); const { createSuccessNotice, createErrorNotice } = useDispatch( noticesStore ); - const { connectManual } = OnboardingHooks.useManualConnect(); const refClientId = useRef( null ); const refClientSecret = useRef( null ); @@ -87,7 +86,7 @@ const AdvancedOptionsForm = ( { setCompleted } ) => { return; } - const res = await connectManual(); + const res = await connectViaIdAndSecret(); if ( res.success ) { handleServerSuccess(); diff --git a/modules/ppcp-settings/resources/js/data/common/actions.js b/modules/ppcp-settings/resources/js/data/common/actions.js index 4586b8923..63ace933b 100644 --- a/modules/ppcp-settings/resources/js/data/common/actions.js +++ b/modules/ppcp-settings/resources/js/data/common/actions.js @@ -7,7 +7,10 @@ * @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. @@ -104,3 +107,25 @@ export const persist = function* () { }; yield setIsBusy( false ); }; + +/** + * Side effect. Initiates a manual connection attempt using the provided client ID and secret. + * + * @return {Action} The action. + */ +export const connectViaIdAndSecret = function* () { + const { clientId, clientSecret, useSandbox } = + yield select( STORE_NAME ).persistentData(); + + yield setIsBusy( true ); + + const result = yield { + type: ACTION_TYPES.DO_MANUAL_CONNECTION, + clientId, + clientSecret, + useSandbox, + }; + yield setIsBusy( false ); + + return result; +}; diff --git a/modules/ppcp-settings/resources/js/data/common/constants.js b/modules/ppcp-settings/resources/js/data/common/constants.js index 881cac2f5..c0fa5200f 100644 --- a/modules/ppcp-settings/resources/js/data/common/constants.js +++ b/modules/ppcp-settings/resources/js/data/common/constants.js @@ -24,3 +24,13 @@ export const REST_HYDRATE_PATH = '/wc/v3/wc_paypal/common'; * @type {string} */ export const REST_PERSIST_PATH = '/wc/v3/wc_paypal/common'; + +/** + * REST path to perform the manual connection check, using client ID and secret, + * + * Used by: Controls + * See: ConnectManualRestEndpoint.php + * + * @type {string} + */ +export const REST_MANUAL_CONNECTION_PATH = '/wc/v3/wc_paypal/connect_manual'; diff --git a/modules/ppcp-settings/resources/js/data/common/controls.js b/modules/ppcp-settings/resources/js/data/common/controls.js index e18bb48ec..78dcc7f38 100644 --- a/modules/ppcp-settings/resources/js/data/common/controls.js +++ b/modules/ppcp-settings/resources/js/data/common/controls.js @@ -9,7 +9,7 @@ import apiFetch from '@wordpress/api-fetch'; -import { REST_PERSIST_PATH } from './constants'; +import { REST_PERSIST_PATH, REST_MANUAL_CONNECTION_PATH } from './constants'; import ACTION_TYPES from './action-types'; export const controls = { @@ -24,4 +24,31 @@ export const controls = { console.error( 'Error saving data.', error ); } }, + + async [ ACTION_TYPES.DO_MANUAL_CONNECTION ]( { + clientId, + clientSecret, + useSandbox, + } ) { + let result = null; + + try { + result = await apiFetch( { + path: REST_MANUAL_CONNECTION_PATH, + method: 'POST', + data: { + clientId, + clientSecret, + useSandbox, + }, + } ); + } catch ( e ) { + result = { + success: false, + error: e, + }; + } + + return result; + }, }; diff --git a/modules/ppcp-settings/resources/js/data/common/hooks.js b/modules/ppcp-settings/resources/js/data/common/hooks.js index 78813f066..642eed3dc 100644 --- a/modules/ppcp-settings/resources/js/data/common/hooks.js +++ b/modules/ppcp-settings/resources/js/data/common/hooks.js @@ -7,9 +7,10 @@ * @file */ -import { useSelect } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; import { STORE_NAME } from './constants'; +import { useCallback } from '@wordpress/element'; const useTransient = ( key ) => useSelect( @@ -23,6 +24,52 @@ const usePersistent = ( key ) => [ key ] ); +const useHooks = () => { + const { + persist, + setSandboxMode, + setManualConnectionMode, + setClientId, + setClientSecret, + connectViaIdAndSecret, + } = useDispatch( STORE_NAME ); + + // Transient accessors. + const isReady = useTransient( 'isReady' ); + + // Persistent accessors. + const clientId = usePersistent( 'clientId' ); + const clientSecret = usePersistent( 'clientSecret' ); + const isSandboxMode = usePersistent( 'useSandbox' ); + const isManualConnectionMode = usePersistent( 'useManualConnection' ); + + const savePersistent = async ( setter, value ) => { + setter( value ); + await persist(); + }; + + return { + isReady, + isSandboxMode, + setSandboxMode: ( state ) => { + return savePersistent( setSandboxMode, state ); + }, + isManualConnectionMode, + setManualConnectionMode: ( state ) => { + return savePersistent( setManualConnectionMode, state ); + }, + clientId, + setClientId: ( value ) => { + return savePersistent( setClientId, value ); + }, + clientSecret, + setClientSecret: ( value ) => { + return savePersistent( setClientSecret, value ); + }, + connectViaIdAndSecret, + }; +}; + export const useBusyState = () => { const { setIsBusy } = useDispatch( STORE_NAME ); const isBusy = useTransient( 'isBusy' ); @@ -32,3 +79,31 @@ export const useBusyState = () => { setIsBusy: useCallback( ( busy ) => setIsBusy( busy ), [ setIsBusy ] ), }; }; + +export const useSandbox = () => { + const { isSandboxMode, setSandboxMode } = useHooks(); + + return { isSandboxMode, setSandboxMode }; +}; + +export const useManualConnection = () => { + const { + isManualConnectionMode, + setManualConnectionMode, + clientId, + setClientId, + clientSecret, + setClientSecret, + connectViaIdAndSecret, + } = useHooks(); + + return { + isManualConnectionMode, + setManualConnectionMode, + clientId, + setClientId, + clientSecret, + setClientSecret, + connectViaIdAndSecret, + }; +}; diff --git a/modules/ppcp-settings/resources/js/data/onboarding/actions.js b/modules/ppcp-settings/resources/js/data/onboarding/actions.js index 764992fc1..84bca8e1a 100644 --- a/modules/ppcp-settings/resources/js/data/onboarding/actions.js +++ b/modules/ppcp-settings/resources/js/data/onboarding/actions.js @@ -145,22 +145,3 @@ export const persist = function* () { yield { type: ACTION_TYPES.DO_PERSIST_DATA, data }; }; - -/** - * Side effect. Initiates a manual connection attempt using the provided client ID and secret. - * - * @return {Action} The action. - */ -export const connectViaIdAndSecret = function* () { - const { clientId, clientSecret, useSandbox } = - yield select( STORE_NAME ).persistentData(); - - const result = yield { - type: ACTION_TYPES.DO_MANUAL_CONNECTION, - clientId, - clientSecret, - useSandbox, - }; - - return result; -}; diff --git a/modules/ppcp-settings/resources/js/data/onboarding/constants.js b/modules/ppcp-settings/resources/js/data/onboarding/constants.js index db9efebc6..4b33c6701 100644 --- a/modules/ppcp-settings/resources/js/data/onboarding/constants.js +++ b/modules/ppcp-settings/resources/js/data/onboarding/constants.js @@ -26,13 +26,3 @@ export const REST_HYDRATE_PATH = '/wc/v3/wc_paypal/onboarding'; * @type {string} */ export const REST_PERSIST_PATH = '/wc/v3/wc_paypal/onboarding'; - -/** - * REST path to perform the manual connection check, using client ID and secret, - * - * Used by: Controls - * See: ConnectManualRestEndpoint.php - * - * @type {string} - */ -export const REST_MANUAL_CONNECTION_PATH = '/wc/v3/wc_paypal/connect_manual'; diff --git a/modules/ppcp-settings/resources/js/data/onboarding/controls.js b/modules/ppcp-settings/resources/js/data/onboarding/controls.js index 94d108e16..30f1cce48 100644 --- a/modules/ppcp-settings/resources/js/data/onboarding/controls.js +++ b/modules/ppcp-settings/resources/js/data/onboarding/controls.js @@ -9,7 +9,7 @@ import apiFetch from '@wordpress/api-fetch'; -import { REST_PERSIST_PATH, REST_MANUAL_CONNECTION_PATH } from './constants'; +import { REST_PERSIST_PATH } from './constants'; import ACTION_TYPES from './action-types'; export const controls = { @@ -24,31 +24,4 @@ export const controls = { console.error( 'Error saving progress.', e ); } }, - - async [ ACTION_TYPES.DO_MANUAL_CONNECTION ]( { - clientId, - clientSecret, - useSandbox, - } ) { - let result = null; - - try { - result = await apiFetch( { - path: REST_MANUAL_CONNECTION_PATH, - method: 'POST', - data: { - clientId, - clientSecret, - useSandbox, - }, - } ); - } catch ( e ) { - result = { - success: false, - error: e, - }; - } - - return result; - }, }; diff --git a/modules/ppcp-settings/resources/js/data/onboarding/hooks.js b/modules/ppcp-settings/resources/js/data/onboarding/hooks.js index 6b2959bea..e240f0863 100644 --- a/modules/ppcp-settings/resources/js/data/onboarding/hooks.js +++ b/modules/ppcp-settings/resources/js/data/onboarding/hooks.js @@ -24,18 +24,9 @@ const usePersistent = ( key ) => [ key ] ); -const useOnboardingDetails = () => { - const { - persist, - setStep, - setCompleted, - setSandboxMode, - setManualConnectionMode, - setClientId, - setClientSecret, - setIsCasualSeller, - setProducts, - } = useDispatch( STORE_NAME ); +const useHooks = () => { + const { persist, setStep, setCompleted, setIsCasualSeller, setProducts } = + useDispatch( STORE_NAME ); // Read-only flags. const flags = useSelect( ( select ) => select( STORE_NAME ).flags(), [] ); @@ -46,21 +37,10 @@ const useOnboardingDetails = () => { // Persistent accessors. const step = usePersistent( 'step' ); const completed = usePersistent( 'completed' ); - const clientId = usePersistent( 'clientId' ); - const clientSecret = usePersistent( 'clientSecret' ); - const isSandboxMode = usePersistent( 'useSandbox' ); - const isManualConnectionMode = usePersistent( 'useManualConnection' ); const isCasualSeller = usePersistent( 'isCasualSeller' ); const products = usePersistent( 'products' ); - const toggleProduct = ( list ) => { - const validProducts = list.filter( ( item ) => - Object.values( PRODUCT_TYPES ).includes( item ) - ); - return setDetailAndPersist( setProducts, validProducts ); - }; - - const setDetailAndPersist = async ( setter, value ) => { + const savePersistent = async ( setter, value ) => { setter( value ); await persist(); }; @@ -69,75 +49,42 @@ const useOnboardingDetails = () => { flags, isReady, step, - setStep: ( value ) => setDetailAndPersist( setStep, value ), + setStep: ( value ) => { + return savePersistent( setStep, value ); + }, completed, - setCompleted: ( state ) => setDetailAndPersist( setCompleted, state ), - isSandboxMode, - setSandboxMode: ( state ) => - setDetailAndPersist( setSandboxMode, state ), - isManualConnectionMode, - setManualConnectionMode: ( state ) => - setDetailAndPersist( setManualConnectionMode, state ), - clientId, - setClientId: ( value ) => setDetailAndPersist( setClientId, value ), - clientSecret, - setClientSecret: ( value ) => - setDetailAndPersist( setClientSecret, value ), + setCompleted: ( state ) => { + return savePersistent( setCompleted, state ); + }, isCasualSeller, - setIsCasualSeller: ( value ) => - setDetailAndPersist( setIsCasualSeller, value ), + setIsCasualSeller: ( value ) => { + return savePersistent( setIsCasualSeller, value ); + }, products, - toggleProduct, - }; -}; - -export const useConnection = () => { - const { - isSandboxMode, - setSandboxMode, - isManualConnectionMode, - setManualConnectionMode, - clientId, - setClientId, - clientSecret, - setClientSecret, - } = useOnboardingDetails(); - - return { - isSandboxMode, - setSandboxMode, - isManualConnectionMode, - setManualConnectionMode, - clientId, - setClientId, - clientSecret, - setClientSecret, + setProducts: ( activeProducts ) => { + const validProducts = activeProducts.filter( ( item ) => + Object.values( PRODUCT_TYPES ).includes( item ) + ); + return savePersistent( setProducts, validProducts ); + }, }; }; export const useBusiness = () => { - const { isCasualSeller, setIsCasualSeller } = useOnboardingDetails(); + const { isCasualSeller, setIsCasualSeller } = useHooks(); return { isCasualSeller, setIsCasualSeller }; }; export const useProducts = () => { - const { products, toggleProduct } = useOnboardingDetails(); + const { products, setProducts } = useHooks(); - return { products, toggleProduct }; + return { products, setProducts }; }; export const useSteps = () => { - const { isReady, step, setStep, completed, setCompleted, flags } = - useOnboardingDetails(); + const { flags, isReady, step, setStep, completed, setCompleted } = + useHooks(); - return { isReady, step, setStep, completed, setCompleted, flags }; -}; - -export const useManualConnect = () => { - const { connectViaIdAndSecret } = useDispatch( STORE_NAME ); - - return { - connectManual: connectViaIdAndSecret, - }; + return { flags, isReady, step, setStep, completed, setCompleted }; }; diff --git a/modules/ppcp-settings/resources/js/data/onboarding/reducer.js b/modules/ppcp-settings/resources/js/data/onboarding/reducer.js index e337295ba..4c80cccf1 100644 --- a/modules/ppcp-settings/resources/js/data/onboarding/reducer.js +++ b/modules/ppcp-settings/resources/js/data/onboarding/reducer.js @@ -26,10 +26,6 @@ const defaultTransient = { const defaultPersistent = { completed: false, step: 0, - useSandbox: false, - useManualConnection: false, - clientId: '', - clientSecret: '', isCasualSeller: null, // null value will uncheck both options in the UI. products: [], };