From 66c6fb17b81e2da4e3ae25bff92426d20914b60e Mon Sep 17 00:00:00 2001 From: Emili Castells Guasch Date: Thu, 30 Jan 2025 16:39:26 +0100 Subject: [PATCH] Save pay later messaging config to database --- .../Screens/Overview/TabPayLaterMessaging.js | 23 +++++--- .../resources/js/data/_example/hooks.js | 2 +- .../js/data/pay-later-messaging/hooks.js | 59 +++++++++++-------- .../js/data/pay-later-messaging/reducer.js | 2 - .../resources/js/hooks/useSaveSettings.js | 19 +++++- .../Endpoint/PayLaterMessagingEndpoint.php | 2 +- 6 files changed, 70 insertions(+), 37 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabPayLaterMessaging.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabPayLaterMessaging.js index d22318d26..274ef91c2 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabPayLaterMessaging.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabPayLaterMessaging.js @@ -2,7 +2,15 @@ import React, { useEffect } from 'react'; import { PayLaterMessagingHooks } from '../../../data'; const TabPayLaterMessaging = () => { - const { config } = PayLaterMessagingHooks.usePayLaterMessaging(); + const { + config, + setCart, + setCheckout, + setProduct, + setShop, + setHome, + setCustom_placement, + } = PayLaterMessagingHooks.usePayLaterMessaging(); const PcpPayLaterConfigurator = window.ppcpSettings?.PcpPayLaterConfigurator; @@ -28,13 +36,12 @@ const TabPayLaterMessaging = () => { subheader: 'ppcp-r-paylater-configurator__subheader', }, onSave: ( data ) => { - /* - TODO: - - The saving will be handled in a separate PR. - - One option could be: - - When saving the settings, programmatically click on the configurator's - "Save Changes" button and send the request to PHP. - */ + setCart( data.config.cart ); + setCheckout( data.config.checkout ); + setProduct( data.config.product ); + setShop( data.config.shop ); + setHome( data.config.home ); + setCustom_placement( data.config.custom_placement ); }, } ); } diff --git a/modules/ppcp-settings/resources/js/data/_example/hooks.js b/modules/ppcp-settings/resources/js/data/_example/hooks.js index b6878c2a9..95db3765e 100644 --- a/modules/ppcp-settings/resources/js/data/_example/hooks.js +++ b/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 }; }; diff --git a/modules/ppcp-settings/resources/js/data/pay-later-messaging/hooks.js b/modules/ppcp-settings/resources/js/data/pay-later-messaging/hooks.js index 174e618e7..0f51051cd 100644 --- a/modules/ppcp-settings/resources/js/data/pay-later-messaging/hooks.js +++ b/modules/ppcp-settings/resources/js/data/pay-later-messaging/hooks.js @@ -23,47 +23,52 @@ const useHooks = () => { const [ isReady ] = useTransient( 'isReady' ); // Persistent accessors. - // TODO: Replace with real property. - const [ sampleValue, setSampleValue ] = usePersistent( 'sampleValue' ); - - const [ cart ] = usePersistent( 'cart' ); - const [ checkout ] = usePersistent( 'checkout' ); - const [ product ] = usePersistent( 'product' ); - const [ shop ] = usePersistent( 'shop' ); - const [ home ] = usePersistent( 'home' ); - const [ custom_placement ] = usePersistent( 'custom_placement' ); + 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, - sampleValue, - setSampleValue, cart, + setCart, checkout, + setCheckout, product, + setProduct, shop, + setShop, home, + setHome, custom_placement, + setCustom_placement, }; }; -export const useState = () => { +export const useStore = () => { const { persist, isReady } = useHooks(); return { persist, isReady }; }; -// TODO: Replace with real hook. -export const useSampleValue = () => { - const { sampleValue, setSampleValue } = useHooks(); - - return { - sampleValue, - setSampleValue, - }; -}; - export const usePayLaterMessaging = () => { - const { cart, checkout, product, shop, home, customPlacement } = useHooks(); + const { + cart, + setCart, + checkout, + setCheckout, + product, + setProduct, + shop, + setShop, + home, + setHome, + custom_placement, + setCustom_placement, + } = useHooks(); return { config: { @@ -72,7 +77,13 @@ export const usePayLaterMessaging = () => { product, shop, home, - customPlacement, + custom_placement, }, + setCart, + setCheckout, + setProduct, + setShop, + setHome, + setCustom_placement, }; }; diff --git a/modules/ppcp-settings/resources/js/data/pay-later-messaging/reducer.js b/modules/ppcp-settings/resources/js/data/pay-later-messaging/reducer.js index 7111d9302..5843ef400 100644 --- a/modules/ppcp-settings/resources/js/data/pay-later-messaging/reducer.js +++ b/modules/ppcp-settings/resources/js/data/pay-later-messaging/reducer.js @@ -19,8 +19,6 @@ const defaultTransient = Object.freeze( { // Persistent: Values that are loaded from the DB. const defaultPersistent = Object.freeze( { - // TODO: Add real DB properties here. - sampleValue: 'foo', cart: {}, checkout: {}, product: {}, diff --git a/modules/ppcp-settings/resources/js/hooks/useSaveSettings.js b/modules/ppcp-settings/resources/js/hooks/useSaveSettings.js index f268d3214..ca594e39d 100644 --- a/modules/ppcp-settings/resources/js/hooks/useSaveSettings.js +++ b/modules/ppcp-settings/resources/js/hooks/useSaveSettings.js @@ -2,6 +2,7 @@ import { useCallback } from '@wordpress/element'; import { CommonHooks, + PayLaterMessagingHooks, PaymentHooks, SettingsHooks, StylingHooks, @@ -13,8 +14,13 @@ export const useSaveSettings = () => { const { persist: persistPayment } = PaymentHooks.useStore(); const { persist: persistSettings } = SettingsHooks.useStore(); const { persist: persistStyling } = StylingHooks.useStore(); + const { persist: persistPayLaterMessaging } = + PayLaterMessagingHooks.useStore(); const persistAll = useCallback( () => { + // Executes onSave on TabPayLaterMessaging component. + document.getElementById( 'configurator-publishButton' )?.click(); + withActivity( 'persist-methods', 'Save payment methods', @@ -30,7 +36,18 @@ export const useSaveSettings = () => { 'Save styling details', persistStyling ); - }, [ persistPayment, persistSettings, persistStyling, withActivity ] ); + withActivity( + 'persist-pay-later-messaging', + 'Save pay later messaging details', + persistPayLaterMessaging + ); + }, [ + persistPayment, + persistSettings, + persistStyling, + persistPayLaterMessaging, + withActivity, + ] ); return { persistAll }; }; diff --git a/modules/ppcp-settings/src/Endpoint/PayLaterMessagingEndpoint.php b/modules/ppcp-settings/src/Endpoint/PayLaterMessagingEndpoint.php index d448e1a9b..5713ce570 100644 --- a/modules/ppcp-settings/src/Endpoint/PayLaterMessagingEndpoint.php +++ b/modules/ppcp-settings/src/Endpoint/PayLaterMessagingEndpoint.php @@ -103,7 +103,7 @@ class PayLaterMessagingEndpoint extends RestEndpoint { * @return WP_REST_Response The updated Pay Later Messaging configuration details. */ public function update_details( WP_REST_Request $request ) : WP_REST_Response { - $this->save_config->save_config( $request->get_params() ); + $this->save_config->save_config( $request->get_json_params() ); return $this->get_details(); }