Merge pull request #3018 from woocommerce/PCP-4120-add-payment-method…

…-modal-data-to-data-store

Add Payment method modal data to data store (4120)

modules/ppcp-save-payment-methods/src/Helper/SavePaymentMethodsApplies.php

@@ -39,7 +39,7 @@ public function __construct(
 		string $country
 	) {
 		$this->allowed_countries = $allowed_countries;
-		$this->country            = $country;
+		$this->country           = $country;
 	}
 
 	/**

modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js

@@ -2,39 +2,35 @@ import { ToggleControl } from '@wordpress/components';
 import SettingsBlock from './SettingsBlock';
 import PaymentMethodIcon from '../PaymentMethodIcon';
 import data from '../../../utils/data';
-import { hasSettings } from '../../Screens/Overview/TabSettingsElements/Blocks/PaymentMethods';
 
 const PaymentMethodItemBlock = ( {
-	id,
-	title,
-	description,
-	icon,
+	paymentMethod,
 	onTriggerModal,
 	onSelect,
 	isSelected,
 } ) => {
-	// Only show settings icon if this method has fields configured
-	const hasModal = hasSettings( id );
-
 	return (
 		<SettingsBlock className="ppcp-r-settings-block__payment-methods__item">
 			<div className="ppcp-r-settings-block__payment-methods__item__inner">
 				<div className="ppcp-r-settings-block__payment-methods__item__title-wrapper">
-					<PaymentMethodIcon icons={ [ icon ] } type={ icon } />
+					<PaymentMethodIcon
+						icons={ [ paymentMethod.icon ] }
+						type={ paymentMethod.icon }
+					/>
 					<span className="ppcp-r-settings-block__payment-methods__item__title">
-						{ title }
+						{ paymentMethod.itemTitle }
 					</span>
 				</div>
 				<p className="ppcp-r-settings-block__payment-methods__item__description">
-					{ description }
+					{ paymentMethod.itemDescription }
 				</p>
 				<div className="ppcp-r-settings-block__payment-methods__item__footer">
 					<ToggleControl
 						__nextHasNoMarginBottom={ true }
 						checked={ isSelected }
 						onChange={ onSelect }
 					/>
-					{ hasModal && onTriggerModal && (
+					{ paymentMethod?.fields && onTriggerModal && (
 						<div
 							className="ppcp-r-settings-block__payment-methods__item__settings"
 							onClick={ onTriggerModal }

modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js

@@ -27,7 +27,7 @@ const PaymentMethodsBlock = ( {
 			{ paymentMethods.map( ( paymentMethod ) => (
 				<PaymentMethodItemBlock
 					key={ paymentMethod.id }
-					{ ...paymentMethod }
+					paymentMethod={ paymentMethod }
 					isSelected={ paymentMethod.enabled }
 					onSelect={ ( checked ) =>
 						handleSelect( paymentMethod, checked )

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

@@ -5,6 +5,7 @@ import PaymentMethodsBlock from '../../ReusableComponents/SettingsBlocks/Payment
 import { PaymentHooks } from '../../../data';
 import { useActiveModal } from '../../../data/common/hooks';
 import Modal from './TabSettingsElements/Blocks/Modal';
+import { usePaymentMethods } from '../../../data/payment/hooks';
 
 const TabPaymentMethods = () => {
 	const { paymentMethodsPayPalCheckout } =
@@ -14,6 +15,8 @@ const TabPaymentMethods = () => {
 	const { paymentMethodsAlternative } =
 		PaymentHooks.usePaymentMethodsAlternative();
 
+	const { setPersistent } = usePaymentMethods();
+
 	const { activeModal, setActiveModal } = useActiveModal();
 
 	const getActiveMethod = () => {
@@ -89,11 +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,31 +7,57 @@ import {
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import PaymentMethodModal from '../../../../ReusableComponents/PaymentMethodModal';
-import { getPaymentMethods } from './PaymentMethods';
+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 ) {
 			return {};
 		}
 
-		const methodConfig = getPaymentMethods( method );
+		const methodConfig = paymentMethods.find( ( i ) => i.id === method.id );
 		if ( ! methodConfig?.fields ) {
 			return {};
 		}
 
 		const initialSettings = {};
 		Object.entries( methodConfig.fields ).forEach( ( [ key, field ] ) => {
-			initialSettings[ key ] = 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;
 	} );
 
 	if ( ! method?.id ) {
 		return null;
 	}
 
-	const methodConfig = getPaymentMethods( method );
+	const methodConfig = paymentMethods.find( ( i ) => i.id === method.id );
 	if ( ! methodConfig?.fields ) {
 		return null;
 	}