Refactor the Overview tab > Features > Buttons

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;