Implement product view

2025-09-05 08:59:14 +08:00 · 2024-10-24 13:54:50 +02:00 · 2024-10-24 13:54:50 +02:00 · fc51e7f1a3
commit fc51e7f1a3
parent 1ced06b24e
18 changed files with 444 additions and 52 deletions
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js
@ -1,18 +1,29 @@
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';

-const Navigation = ( { setStep, currentStep } ) => {
+const Navigation = ( {
+	setStep,
+	currentStep,
+	stepperOrder,
+	canProceeedCallback = () => true,
+} ) => {
+	const setNextStep = ( nextStep ) => {
+		let newStep = currentStep + nextStep;
+		if ( newStep > stepperOrder.length - 1 ) {
+			newStep = currentStep;
+		}
+		setStep( newStep );
+	};
+
 	return (
 		<div className="ppcp-r-navigation">
-			<Button
-				variant="tertiary"
-				onClick={ () => setStep( currentStep - 1 ) }
-			>
+			<Button variant="tertiary" onClick={ () => setNextStep( -1 ) }>
 				{ __( 'Back', 'woocommerce-paypal-payments' ) }
 			</Button>
 			<Button
 				variant="primary"
-				onClick={ () => setStep( currentStep + 1 ) }
+				disabled={ ! canProceeedCallback() }
+				onClick={ () => setNextStep( 1 ) }
 			>
 				{ __( 'Next', 'woocommerce-paypal-payments' ) }
 			</Button>
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SelectBox.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SelectBox.js
@ -1,23 +1,61 @@
 import data from '../../utils/data';

 const SelectBox = ( props ) => {
+	const handleCheckboxState = ( checked ) => {
+		let newValue = null;
+		if ( checked ) {
+			newValue = [ ...props.currentValue, props.value ];
+			props.changeCallback( newValue );
+		} else {
+			newValue = props.currentValue.filter(
+				( value ) => value !== props.value
+			);
+		}
+		props.changeCallback( newValue );
+	};
+
 	let boxClassName = 'ppcp-r-select-box';

-	if ( props.value === props.currentValue ) {
+	if (
+		props.value === props.currentValue ||
+		( Array.isArray( props.currentValue ) &&
+			props.currentValue.includes( props.value ) )
+	) {
 		boxClassName += ' selected';
 	}
+
 	return (
 		<div className={ boxClassName }>
-			<div className="ppcp-r-select-box__radio">
-				<input
-					className="ppcp-r-select-box__radio-value"
-					type="radio"
-					name={ props.name }
-					value={ props.value }
-					onChange={ () => props.changeCallback( props.value ) }
-				/>
-				<span className="ppcp-r-select-box__radio-presentation"></span>
-			</div>
+			{ props.type === 'radio' && (
+				<div className="ppcp-r-select-box__radio">
+					<input
+						className="ppcp-r-select-box__radio-value"
+						type="radio"
+						checked={ props.value === props.currentValue }
+						name={ props.name }
+						value={ props.value }
+						onChange={ () => props.changeCallback( props.value ) }
+					/>
+					<span className="ppcp-r-select-box__radio-presentation"></span>
+				</div>
+			) }
+			{ props.type === 'checkbox' && (
+				<div className="ppcp-r-select-box__checkbox">
+					<input
+						className="ppcp-r-select-box__checkbox-value"
+						type="checkbox"
+						checked={ props.currentValue.includes( props.value ) }
+						name={ props.name }
+						value={ props.value }
+						onChange={ ( e ) =>
+							handleCheckboxState( e.target.checked )
+						}
+					/>
+					<span className="ppcp-r-select-box__checkbox-presentation">
+						{ data().getImage( 'icon-checkbox.svg' ) }
+					</span>
+				</div>
+			) }
 			<div className="ppcp-r-select-box__content">
 				{ data().getImage( props.icon ) }
 				<div className="ppcp-r-select-box__content-inner">
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/TabNavigation.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/TabNavigation.js
@ -0,0 +1,45 @@
+import { TabPanel } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const onSelect = ( tabName ) => {
+	console.log( 'Selecting tab', tabName );
+};
+
+const TabNavigation = () => {
+	return (
+		<TabPanel
+			className="my-tab-panel"
+			activeClass="active-tab"
+			onSelect={ onSelect }
+			tabs={ [
+				{
+					name: 'dashboard',
+					title: __( 'Dashboard', 'woocommerce-paypal-payments' ),
+					className: 'ppcp-r-tab-dashboard',
+				},
+				{
+					name: 'payment-methods',
+					title: __(
+						'Payment Methods',
+						'woocommerce-paypal-payments'
+					),
+					className: 'ppcp-r-tab-payment-methods',
+				},
+				{
+					name: 'settings',
+					title: __( 'Settings', 'woocommerce-paypal-payments' ),
+					className: 'ppcp-r-tab-settings',
+				},
+				{
+					name: 'styling',
+					title: __( 'Styling', 'woocommerce-paypal-payments' ),
+					className: 'ppcp-r-tab-styling',
+				},
+			] }
+		>
+			{ ( tab ) => <p>{ tab.title }</p> }
+		</TabPanel>
+	);
+};
+
+export default TabNavigation;
--- a/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/Dashboard.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/Dashboard.js
@ -0,0 +1,11 @@
+import TabNavigation from '../../ReusableComponents/TabNavigation';
+
+const Dashboard = () => {
+	return (
+		<div>
+			<TabNavigation />
+		</div>
+	);
+};
+
+export default Dashboard;
--- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js
@ -1,7 +1,9 @@
 import Container from '../../ReusableComponents/Container.js';
 import StepWelcome from './StepWelcome.js';
-import StepBusiness from './StepBusiness';
+import StepBusiness from './StepBusiness.js';
+import StepProducts from './StepProducts.js';
 import { useState } from '@wordpress/element';
+import Dashboard from '../Dashboard/Dashboard';

 const Onboarding = () => {
 	const [ step, setStep ] = useState( 0 );
@ -16,18 +18,26 @@ const Onboarding = () => {
 };

 const Stepper = ( { currentStep, setStep } ) => {
-	const stepperOrder = {
-		0: StepWelcome,
-		1: StepBusiness,
+	const stepperOrder = [ StepWelcome, StepBusiness, StepProducts ];
+
+	const renderSteps = () => {
+		return stepperOrder.map( ( Step, index ) => {
+			return (
+				<div
+					key={ index }
+					style={ index !== currentStep ? { display: 'none' } : {} }
+				>
+					<Step
+						setStep={ setStep }
+						currentStep={ currentStep }
+						stepperOrder={ stepperOrder }
+					/>
+				</div>
+			);
+		} );
 	};

-	const Component = stepperOrder[ currentStep ];
-
-	return (
-		<>
-			<Component setStep={ setStep } currentStep={ currentStep } />
-		</>
-	);
+	return <>{ renderSteps() }</>;
 };

 export default Onboarding;
--- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js
@ -6,7 +6,7 @@ import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons';
 import { useState } from '@wordpress/element';
 import Navigation from '../../ReusableComponents/Navigation';

-const StepBusiness = ( { setStep, currentStep } ) => {
+const StepBusiness = ( { setStep, currentStep, stepperOrder } ) => {
 	const [ businessCategory, setBusinessCategory ] = useState( null );
 	const BUSINESS_RADIO_GROUP_NAME = 'business';
 	const CASUAL_SELLER_CHECKBOX_VALUE = 'casual_seller';
@ -40,6 +40,7 @@ const StepBusiness = ( { setStep, currentStep } ) => {
 							businessCategory ===
 							{ CASUAL_SELLER_CHECKBOX_VALUE }
 						}
+						type="radio"
 					>
 						<PaymentMethodIcons
 							icons={ [
@ -69,6 +70,7 @@ const StepBusiness = ( { setStep, currentStep } ) => {
 						checked={
 							businessCategory === { BUSINESS_CHECKBOX_VALUE }
 						}
+						type="radio"
 					>
 						<PaymentMethodIcons
 							icons={ [
@ -85,7 +87,12 @@ const StepBusiness = ( { setStep, currentStep } ) => {
 						/>
 					</SelectBox>
 				</SelectBoxWrapper>
-				<Navigation setStep={ setStep } currentStep={ currentStep } />
+				<Navigation
+					setStep={ setStep }
+					currentStep={ currentStep }
+					stepperOrder={ stepperOrder }
+					canProceeedCallback={ () => businessCategory !== null }
+				/>
 			</div>
 		</div>
 	);
--- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepProducts.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepProducts.js
@ -0,0 +1,128 @@
+import OnboardingHeader from '../../ReusableComponents/OnboardingHeader';
+import Navigation from '../../ReusableComponents/Navigation';
+import { __ } from '@wordpress/i18n';
+import SelectBox from '../../ReusableComponents/SelectBox';
+import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper';
+import { useState } from '@wordpress/element';
+
+const StepProducts = ( { setStep, currentStep, stepperOrder } ) => {
+	const [ products, setProducts ] = useState( [] );
+	const PRODUCTS_CHECKBOX_GROUP_NAME = 'products';
+	const VIRTUAL_CHECKBOX_VALUE = 'virtual';
+	const PHYSICAL_CHECKBOX_VALUE = 'physical';
+	const SUBSCRIPTIONS_CHECKBOX_VALUE = 'subscriptions';
+
+	return (
+		<div className="ppcp-r-page-products">
+			<OnboardingHeader
+				title={ __(
+					'Tell Us About the Products You Sell',
+					'woocommerce-paypal-payments'
+				) }
+			/>
+			<div className="ppcp-r-inner-container">
+				<SelectBoxWrapper>
+					<SelectBox
+						title={ __( 'Virtual', 'woocommerce-paypal-payments' ) }
+						description={ __(
+							'Digital items or services that don’t require shipping.',
+							'woocommerce-paypal-payments'
+						) }
+						icon="icon-product-virtual.svg"
+						name={ PRODUCTS_CHECKBOX_GROUP_NAME }
+						value={ VIRTUAL_CHECKBOX_VALUE }
+						changeCallback={ setProducts }
+						currentValue={ products }
+						type="checkbox"
+					>
+						<ul className="ppcp-r-services">
+							<li>
+								{ __(
+									'Services',
+									'woocommerce-paypal-payments'
+								) }
+							</li>
+							<li>
+								{ __(
+									'Downloadable',
+									'woocommerce-paypal-payments'
+								) }
+							</li>
+							<li>
+								{ __(
+									'Bookings',
+									'woocommerce-paypal-payments'
+								) }
+							</li>
+							<li>
+								{ __(
+									'Deposits',
+									'woocommerce-paypal-payments'
+								) }
+							</li>
+						</ul>
+					</SelectBox>
+					<SelectBox
+						title={ __(
+							'Physical Goods',
+							'woocommerce-paypal-payments'
+						) }
+						description={ __(
+							'Items that need to be shipped.',
+							'woocommerce-paypal-payments'
+						) }
+						icon="icon-product-physical.svg"
+						name={ PRODUCTS_CHECKBOX_GROUP_NAME }
+						value={ PHYSICAL_CHECKBOX_VALUE }
+						changeCallback={ setProducts }
+						currentValue={ products }
+						type="checkbox"
+					>
+						<ul className="ppcp-r-services">
+							<li>
+								{ __( 'Goods', 'woocommerce-paypal-payments' ) }
+							</li>
+							<li>
+								{ __(
+									'Deliveries',
+									'woocommerce-paypal-payments'
+								) }
+							</li>
+						</ul>
+					</SelectBox>
+					<SelectBox
+						title={ __(
+							'Subscriptions',
+							'woocommerce-paypal-payments'
+						) }
+						description={ __(
+							'Recurring payments for physical goods or services.',
+							'woocommerce-paypal-payments'
+						) }
+						icon="icon-product-subscription.svg"
+						name={ PRODUCTS_CHECKBOX_GROUP_NAME }
+						value={ SUBSCRIPTIONS_CHECKBOX_VALUE }
+						changeCallback={ setProducts }
+						currentValue={ products }
+						type="checkbox"
+					>
+						<a href="#">
+							{ __(
+								'WooCommerce Subscriptions - TODO missing link',
+								'woocommerce-paypal-payments'
+							) }
+						</a>
+					</SelectBox>
+				</SelectBoxWrapper>
+				<Navigation
+					setStep={ setStep }
+					currentStep={ currentStep }
+					stepperOrder={ stepperOrder }
+					canProceeedCallback={ () => products.length > 0 }
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default StepProducts;
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings.js
@ -0,0 +1,11 @@
+import Onboarding from './Onboarding/Onboarding';
+import { useState } from '@wordpress/element';
+import Dashboard from './Dashboard/Dashboard';
+
+const Settings = () => {
+	const [ onboarded, setOnboarded ] = useState( true );
+
+	return <>{ onboarded ? <Onboarding /> : <Dashboard /> }</>;
+};
+
+export default Settings;