Merge temp/settings ui

woocommerce · Jan 3, 2025 · 2e3c1f3 · 2e3c1f3
2 parents bdb72d7 + 7c8fcb2
commit 2e3c1f3
Show file tree

Hide file tree

Showing 15 changed files with 622 additions and 246 deletions.
diff --git a/...les/ppcp-settings/resources/css/components/reusable-components/_payment-method-modal.scss b/...les/ppcp-settings/resources/css/components/reusable-components/_payment-method-modal.scss
@@ -119,8 +119,6 @@
 					background-color: $color-white;
 
 					&::before {
-						transform: translate(3px, 3px);
-						border-width: 6px;
 						border-color: $color-blueberry;
 					}
 				}

diff --git a/...ettings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js b/...ettings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js
@@ -19,6 +19,27 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
 		);
 	};
 
+	const renderButton = ( button ) => {
+		const buttonElement = (
+			<Button
+				className={ button.class ? button.class : '' }
+				key={ button.text }
+				variant={ button.type }
+				onClick={ button.onClick }
+			>
+				{ button.text }
+			</Button>
+		);
+
+		return button.urls ? (
+			<a href={ button.urls.live } key={ button.text }>
+				{ buttonElement }
+			</a>
+		) : (
+			buttonElement
+		);
+	};
+
 	return (
 		<SettingsBlock { ...props } className="ppcp-r-settings-block__feature">
 			<Header>
@@ -35,16 +56,7 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
 			</Header>
 			<Action>
 				<div className="ppcp-r-feature-item__buttons">
-					{ props.actionProps?.buttons.map( ( button ) => (
-						<Button
-							className={ button.class ? button.class : '' }
-							href={ button.url }
-							key={ button.text }
-							variant={ button.type }
-						>
-							{ button.text }
-						</Button>
-					) ) }
+					{ props.actionProps?.buttons.map( renderButton ) }
 				</div>
 			</Action>
 		</SettingsBlock>

diff --git a/...tings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js b/...tings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js
@@ -1,51 +1,50 @@
-import { useState } from '@wordpress/element';
 import { ToggleControl } from '@wordpress/components';
 import SettingsBlock from './SettingsBlock';
 import PaymentMethodIcon from '../PaymentMethodIcon';
 import data from '../../../utils/data';
+import { MODAL_CONFIG } from '../../Screens/Overview/Modals/Modal';
 
-const PaymentMethodItemBlock = ( props ) => {
-	const [ toggleIsChecked, setToggleIsChecked ] = useState( false );
-	const [ modalIsVisible, setModalIsVisible ] = useState( false );
-	const Modal = props?.modal;
+const PaymentMethodItemBlock = ( {
+	id,
+	title,
+	description,
+	icon,
+	onTriggerModal,
+	onSelect,
+	isSelected,
+} ) => {
+	// Only show settings icon if this method has a modal configured
+	const hasModal = Boolean( MODAL_CONFIG[ 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={ [ props.icon ] }
-							type={ props.icon }
-						/>
-						<span className="ppcp-r-settings-block__payment-methods__item__title">
-							{ props.title }
-						</span>
-					</div>
-					<p className="ppcp-r-settings-block__payment-methods__item__description">
-						{ props.description }
-					</p>
-					<div className="ppcp-r-settings-block__payment-methods__item__footer">
-						<ToggleControl
-							__nextHasNoMarginBottom={ true }
-							checked={ toggleIsChecked }
-							onChange={ setToggleIsChecked }
-						/>
-						{ Modal && (
-							<div
-								className="ppcp-r-settings-block__payment-methods__item__settings"
-								onClick={ () => setModalIsVisible( true ) }
-							>
-								{ data().getImage( 'icon-settings.svg' ) }
-							</div>
-						) }
-					</div>
+		<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 } />
+					<span className="ppcp-r-settings-block__payment-methods__item__title">
+						{ title }
+					</span>
 				</div>
-			</SettingsBlock>
-			{ Modal && modalIsVisible && (
-				<Modal setModalIsVisible={ setModalIsVisible } />
-			) }
-		</>
+				<p className="ppcp-r-settings-block__payment-methods__item__description">
+					{ description }
+				</p>
+				<div className="ppcp-r-settings-block__payment-methods__item__footer">
+					<ToggleControl
+						__nextHasNoMarginBottom={ true }
+						checked={ isSelected }
+						onChange={ onSelect }
+					/>
+					{ hasModal && onTriggerModal && (
+						<div
+							className="ppcp-r-settings-block__payment-methods__item__settings"
+							onClick={ onTriggerModal }
+						>
+							{ data().getImage( 'icon-settings.svg' ) }
+						</div>
+					) }
+				</div>
+			</div>
+		</SettingsBlock>
 	);
 };
 

diff --git a/...settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js b/...settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js
@@ -2,7 +2,11 @@ import { useState, useCallback } from '@wordpress/element';
 import SettingsBlock from './SettingsBlock';
 import PaymentMethodItemBlock from './PaymentMethodItemBlock';
 
-const PaymentMethodsBlock = ( { paymentMethods, className = '' } ) => {
+const PaymentMethodsBlock = ( {
+	paymentMethods,
+	className = '',
+	onTriggerModal,
+} ) => {
 	const [ selectedMethod, setSelectedMethod ] = useState( null );
 
 	const handleSelect = useCallback( ( methodId, isSelected ) => {
@@ -25,6 +29,9 @@ const PaymentMethodsBlock = ( { paymentMethods, className = '' } ) => {
 					onSelect={ ( checked ) =>
 						handleSelect( paymentMethod.id, checked )
 					}
+					onTriggerModal={ () =>
+						onTriggerModal?.( paymentMethod.id )
+					}
 				/>
 			) ) }
 		</SettingsBlock>

diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js
@@ -1,6 +1,7 @@
 import { Content, ContentWrapper } from './SettingsBlocks';
 
 const SettingsCard = ( {
+	id,
 	className: extraClassName,
 	title,
 	description,
@@ -33,7 +34,7 @@ const SettingsCard = ( {
 	};
 
 	return (
-		<div className={ className }>
+		<div id={ id } className={ className }>
 			<div className="ppcp-r-settings-card__header">
 				<div className="ppcp-r-settings-card__content-inner">
 					<span className="ppcp-r-settings-card__title">

diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/TabNavigation.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/TabNavigation.js
@@ -1,4 +1,6 @@
 import { useCallback, useEffect, useState } from '@wordpress/element';
+
+// TODO: Migrate to Tabs (TabPanel v2) once its API is publicly available, as it provides programmatic tab switching support: https://github.com/WordPress/gutenberg/issues/52997
 import { TabPanel } from '@wordpress/components';
 
 import { getQuery, updateQueryString } from '../../utils/navigation';

diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/Modals/Modal.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/Modals/Modal.js
@@ -0,0 +1,51 @@
+import { __ } from '@wordpress/i18n';
+import ModalPayPal from './ModalPayPal';
+import ModalFastlane from './ModalFastlane';
+import ModalAcdc from './ModalAcdc';
+import { useActiveModal } from '../../../../data/common/hooks';
+
+export const MODAL_CONFIG = {
+	paypal: {
+		component: ModalPayPal,
+		icon: 'payment-method-paypal-big',
+		title: __( 'PayPal', 'woocommerce-paypal-payments' ),
+	},
+	fastlane: {
+		component: ModalFastlane,
+		icon: 'payment-method-fastlane-big',
+		title: __( 'Fastlane by PayPal', 'woocommerce-paypal-payments' ),
+		size: 'small',
+	},
+	advanced_credit_and_debit_card_payments: {
+		component: ModalAcdc,
+		icon: 'payment-method-cards-big',
+		title: __(
+			'Advanced Credit and Debit Card Payments',
+			'woocommerce-paypal-payments'
+		),
+	},
+};
+
+const Modal = () => {
+	const { activeModal, setActiveModal } = useActiveModal();
+
+	const handleCloseModal = () => {
+		setActiveModal( '' );
+	};
+
+	if ( ! activeModal || ! MODAL_CONFIG[ activeModal ] ) {
+		return null;
+	}
+
+	const { component: ModalComponent, ...modalProps } =
+		MODAL_CONFIG[ activeModal ];
+
+	return (
+		<ModalComponent
+			setModalIsVisible={ handleCloseModal }
+			{ ...modalProps }
+		/>
+	);
+};
+
+export default Modal;