Add modal data to data store

modules/ppcp-settings/resources/js/Components/Screens/Overview/TabPaymentMethods.js

@@ -92,18 +92,37 @@ const TabPaymentMethods = () => {
 					method={ getActiveMethod() }
 					setModalIsVisible={ () => setActiveModal( null ) }
 					onSave={ ( methodId, settings ) => {
-						console.log(
-							'Saving settings for:',
-							methodId,
-							settings
-						);
-
 						setPersistent( methodId, {
 							...getActiveMethod(),
 							title: settings.checkoutPageTitle,
 							description: settings.checkoutPageDescription,
 						} );
 
+						if ( 'paypalShowLogo' in settings ) {
+							setPersistent(
+								'paypalShowLogo',
+								settings.paypalShowLogo
+							);
+						}
+						if ( 'threeDSecure' in settings ) {
+							setPersistent(
+								'threeDSecure',
+								settings.threeDSecure
+							);
+						}
+						if ( 'fastlaneCardholderName' in settings ) {
+							setPersistent(
+								'fastlaneCardholderName',
+								settings.fastlaneCardholderName
+							);
+						}
+						if ( 'fastlaneDisplayWatermark' in settings ) {
+							setPersistent(
+								'fastlaneDisplayWatermark',
+								settings.fastlaneDisplayWatermark
+							);
+						}
+
 						setActiveModal( null );
 					} }
 				/>

modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Modal.js

@@ -7,10 +7,19 @@ import {
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import PaymentMethodModal from '../../../../ReusableComponents/PaymentMethodModal';
-import { usePaymentMethods } from '../../../../../data/payment/hooks';
+import {
+	usePaymentMethods,
+	usePaymentMethodsModal,
+} from '../../../../../data/payment/hooks';
 
 const Modal = ( { method, setModalIsVisible, onSave } ) => {
 	const { paymentMethods } = usePaymentMethods();
+	const {
+		paypalShowLogo,
+		threeDSecure,
+		fastlaneCardholderName,
+		fastlaneDisplayWatermark,
+	} = usePaymentMethodsModal();
 
 	const [ settings, setSettings ] = useState( () => {
 		if ( ! method?.id ) {
@@ -24,15 +33,23 @@ const Modal = ( { method, setModalIsVisible, onSave } ) => {
 
 		const initialSettings = {};
 		Object.entries( methodConfig.fields ).forEach( ( [ key, field ] ) => {
-			initialSettings[ key ] =
-				// eslint-disable-next-line no-nested-ternary
-				key === 'checkoutPageTitle'
-					? methodConfig.title
-					: key === 'checkoutPageDescription'
-					? methodConfig.description
-					: field.default;
+			switch ( key ) {
+				case 'checkoutPageTitle':
+					initialSettings[ key ] = methodConfig.title;
+					break;
+				case 'checkoutPageDescription':
+					initialSettings[ key ] = methodConfig.description;
+					break;
+				default:
+					initialSettings[ key ] = field.default;
+			}
 		} );
 
+		initialSettings.paypalShowLogo = paypalShowLogo;
+		initialSettings.threeDSecure = threeDSecure;
+		initialSettings.fastlaneCardholderName = fastlaneCardholderName;
+		initialSettings.fastlaneDisplayWatermark = fastlaneDisplayWatermark;
+
 		return initialSettings;
 	} );
 

modules/ppcp-settings/resources/js/data/payment/hooks.js

@@ -119,10 +119,6 @@ export const usePaymentMethods = () => {
 		multibanco,
 		pui,
 		oxxo,
-		paypalShowLogo,
-		threeDSecure,
-		fastlaneCardholderName,
-		fastlaneDisplayWatermark,
 	} = useHooks();
 
 	const paymentMethods = [
@@ -144,10 +140,6 @@ export const usePaymentMethods = () => {
 		multibanco,
 		pui,
 		oxxo,
-		paypalShowLogo,
-		threeDSecure,
-		fastlaneCardholderName,
-		fastlaneDisplayWatermark,
 	];
 
 	return {
@@ -156,6 +148,22 @@ export const usePaymentMethods = () => {
 	};
 };
 
+export const usePaymentMethodsModal = () => {
+	const {
+		paypalShowLogo,
+		threeDSecure,
+		fastlaneCardholderName,
+		fastlaneDisplayWatermark,
+	} = useHooks();
+
+	return {
+		paypalShowLogo,
+		threeDSecure,
+		fastlaneCardholderName,
+		fastlaneDisplayWatermark,
+	};
+};
+
 export const usePaymentMethodsPayPalCheckout = () => {
 	const { paypal, venmo, payLater, creditCard } = useHooks();
 	const paymentMethodsPayPalCheckout = [

modules/ppcp-settings/src/Endpoint/PaymentRestEndpoint.php

@@ -116,7 +116,7 @@ class PaymentRestEndpoint extends RestEndpoint {
 						'default' => $this->getPaymentDescription(PayPalGateway::ID) ?? '',
 						'label'   => __( 'Checkout page description', 'woocommerce-paypal-payments' ),
 					),
-					'showLogo'                => array(
+					'paypalShowLogo'                => array(
 						'type'    => 'toggle',
 						'default' => $this->settings->get_paypal_show_logo(),
 						'label'   => __( 'Show logo', 'woocommerce-paypal-payments' ),
@@ -263,7 +263,7 @@ class PaymentRestEndpoint extends RestEndpoint {
 						'default' => $this->getPaymentDescription(AxoGateway::ID) ?? '',
 						'label'   => __( 'Checkout page description', 'woocommerce-paypal-payments' ),
 					),
-					'cardholderName'          => array(
+					'fastlaneCardholderName'          => array(
 						'type'    => 'toggle',
 						'default' => $this->settings->get_fastlane_cardholder_name(),
 						'label'   => __(
@@ -271,7 +271,7 @@ class PaymentRestEndpoint extends RestEndpoint {
 							'woocommerce-paypal-payments'
 						),
 					),
-					'displayWatermark'        => array(
+					'fastlaneDisplayWatermark'        => array(
 						'type'    => 'toggle',
 						'default' => $this->settings->get_fastlane_display_watermark(),
 						'label'   => __(