Save pay later messaging config to database

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 );
 				},
 			} );
 		}

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

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,
 	};
 };

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: {},

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