Merge pull request #2763 from woocommerce/PCP-3816-Create-payment-pla…

…ceholder-page-in-new-settings-module

Create payment placeholder page in new settings module (3816)

modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss

@@ -0,0 +1,48 @@
+.ppcp-r-payment-method-item {
+	display: flex;
+	align-items: center;
+
+	&:not(:last-child) {
+		padding-bottom: 32px;
+	}
+
+	&:not(:first-child) {
+		border-top: 1px solid $color-gray-400;
+		padding-top: 32px;
+	}
+
+	&__checkbox-wrap {
+		position: relative;
+		display: flex;
+		align-items: center;
+
+		.ppcp-r__checkbox {
+			margin-right: 24px;
+		}
+	}
+
+	&__icon-wrap {
+		margin-right: 18px;
+	}
+
+	&__content {
+		padding-right: 24px;
+
+		p {
+			margin: 0;
+		}
+	}
+
+	&__title {
+		@include font(16, 20, 600);
+		color: $color-black;
+		margin: 0 0 8px 0;
+		display: block;
+	}
+
+	button {
+		margin-left: auto;
+		@include font(13, 20, 400);
+		padding: 6px 12px !important;
+	}
+}

modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-modal.scss

@@ -0,0 +1,123 @@
+.ppcp-r-modal {
+	@import "../../global";
+	@import './button';
+	@import './fields';
+
+	&__container {
+		max-width: 100%;
+		width: 400px;
+
+		&--small {
+			padding: 0 50px;
+			@media screen and (max-width: 480px){
+				padding:0;
+			}
+		}
+	}
+
+	.components-modal {
+		&__header {
+			height: 52px;
+			padding: 20px 20px 0 20px;
+
+			button {
+				padding: 4px;
+			}
+		}
+
+		&__content {
+			margin-top: 48px;
+			padding: 0 50px 48px 50px;
+		}
+	}
+
+	&__header {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 8px;
+		border-bottom: 1px solid $color-gray-500;
+		padding-bottom: 12px;
+		margin-bottom: 24px;
+	}
+
+	&__title {
+		@include font(16, 20, 600);
+		color: $color-black;
+	}
+
+	&__content {
+		width: 400px;
+		max-width: 100%;
+	}
+
+	&__inverted-toggle-control {
+		.components-form-toggle {
+			order: 1;
+		}
+	}
+
+	&__field-row {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+
+		&--save {
+			margin-top: 24px;
+			align-items: flex-end;
+		}
+
+
+		input[type='text'] {
+			padding: 7px 11px;
+			@include font(14, 20, 400);
+			margin: 0;
+			border-color: $color-gray-700;
+		}
+
+		label {
+			@include font(14, 16, 400);
+			color: $color-gray-900;
+		}
+	}
+
+	&__field-rows {
+		display: flex;
+		flex-direction: column;
+		gap: 24px;
+
+		&--acdc {
+			gap: 18px;
+		}
+	}
+
+	.ppcp-r-modal__field-row--save button.is-primary {
+		border-radius: 2px;
+		padding: 6px 12px;
+		@include font(13, 20, 400);
+	}
+
+	&__content-title {
+		@include font(14, 20, 600);
+		color: $color-black;
+		display: block;
+		margin: 0 0 4px 0;
+	}
+
+	&__description {
+		@include font(14, 20, 400);
+		margin: 0 0 24px 0;
+		color: $color-black;
+	}
+
+	&__field-rdb {
+		display: flex;
+		gap: 18px;
+		align-items: center;
+		position: relative;
+		label {
+			@include font(14, 20, 400);
+			color: $color-black;
+		}
+	}
+}

modules/ppcp-settings/resources/css/components/screens/dashboard/_tab-payment-methods.scss

@@ -0,0 +1,5 @@
+.ppcp-r-payment-methods{
+	display: flex;
+	flex-direction: column;
+	gap:48px;
+}

modules/ppcp-settings/resources/css/style.scss

@@ -9,6 +9,7 @@
 	@import './components/reusable-components/text-control';
 	@import './components/reusable-components/separator';
 	@import './components/reusable-components/payment-method-icons';
+	@import "./components/reusable-components/payment-method-item";
 	@import './components/reusable-components/settings-wrapper';
 	@import './components/reusable-components/select-box';
 	@import './components/reusable-components/tab-navigation';
@@ -17,4 +18,7 @@
 	@import './components/reusable-components/title-badge';
 	@import './components/screens/onboarding';
 	@import './components/screens/dashboard/tab-dashboard';
+	@import './components/screens/dashboard/tab-payment-methods';
 }
+
+@import './components/reusable-components/payment-method-modal';

modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields.js

@@ -24,6 +24,7 @@ export const PayPalRdb = ( props ) => {
 	return (
 		<div className="ppcp-r__radio">
 			<input
+				id={ props?.id ? props.id : null }
 				className="ppcp-r__radio-value"
 				type="radio"
 				checked={ props.value === props.currentValue }

modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodItem.js

@@ -0,0 +1,62 @@
+import { Button } from '@wordpress/components';
+import PaymentMethodIcon from './PaymentMethodIcon';
+import { PayPalCheckbox } from './Fields';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+const PaymentMethodItem = ( props ) => {
+	const [ paymentMethodState, setPaymentMethodState ] = useState();
+	const [ modalIsVisible, setModalIsVisible ] = useState( false );
+	let Modal = null;
+	if ( props?.modal ) {
+		Modal = props.modal;
+	}
+	const handleCheckboxState = ( checked ) => {
+		if ( checked ) {
+			setPaymentMethodState( props.payment_method_id );
+		} else {
+			setPaymentMethodState( null );
+		}
+	};
+	return (
+		<>
+			<div className="ppcp-r-payment-method-item">
+				<div className="ppcp-r-payment-method-item__checkbox-wrap">
+					<PayPalCheckbox
+						currentValue={ [ paymentMethodState ] }
+						name="payment_method_status"
+						value={ props.payment_method_id }
+						handleCheckboxState={ handleCheckboxState }
+					/>
+					<div className="ppcp-r-payment-method-item__icon-wrap">
+						<PaymentMethodIcon
+							icons={ [ props.icon ] }
+							type={ props.icon }
+						/>
+					</div>
+					<div className="ppcp-r-payment-method-item__content">
+						<span className="ppcp-r-payment-method-item__title">
+							{ props.title }
+						</span>
+						<p>{ props.description }</p>
+					</div>
+				</div>
+				{ Modal && (
+					<Button
+						variant="secondary"
+						onClick={ () => {
+							setModalIsVisible( true );
+						} }
+					>
+						{ __( 'Modify', 'woocommerce-paypal-payments' ) }
+					</Button>
+				) }
+			</div>
+			{ Modal && modalIsVisible && (
+				<Modal setModalIsVisible={ setModalIsVisible } />
+			) }
+		</>
+	);
+};
+
+export default PaymentMethodItem;

modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodModal.js

@@ -0,0 +1,35 @@
+import { Modal } from '@wordpress/components';
+import PaymentMethodIcon from './PaymentMethodIcon';
+
+const PaymentMethodModal = ( props ) => {
+	let className = 'ppcp-r-modal';
+	let classNameContainer = 'ppcp-r-modal__container';
+
+	if ( props?.className ) {
+		className += ' ' + props.className;
+	}
+
+	if ( props?.container && props.container === 'small' ) {
+		classNameContainer += ' ppcp-r-modal__container--small';
+	}
+
+	return (
+		<Modal
+			className={ className }
+			onRequestClose={ () => props.setModalIsVisible( false ) }
+		>
+			<div className={ classNameContainer }>
+				<div className="ppcp-r-modal__header">
+					<PaymentMethodIcon
+						icons={ [ props.icon ] }
+						type={ props.icon }
+					/>
+					<span className="ppcp-r-modal__title">{ props.title }</span>
+				</div>
+				<div className="ppcp-r-modal__content">{ props.children }</div>
+			</div>
+		</Modal>
+	);
+};
+
+export default PaymentMethodModal;