woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-07 19:54:15 +08:00
Code Issues Projects Packages Wiki Activity Actions

✨ Integrate Redux store to onboarding naviagtion

Browse source
This commit is contained in:
Philipp Stracker 2024-10-28 18:27:12 +01:00
parent 164af7f515
commit ef60cca606
No known key found for this signature in database
4 changed files with 38 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

20
modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js
View file

@ -3,27 +3,35 @@ import { __ } from '@wordpress/i18n';
const Navigation = ( { const Navigation = ( {
setStep, setStep,
setCompleted,
currentStep, currentStep,
stepperOrder, stepperOrder,
canProceeedCallback = () => true, canProceeedCallback = () => true,
} ) => { } ) => {
const setNextStep = ( nextStep ) => { const navigateBy = ( stepDirection ) => {
let newStep = currentStep + nextStep; let newStep = currentStep + stepDirection;
if ( newStep > stepperOrder.length - 1 ) {
newStep = currentStep; if ( isNaN( newStep ) || newStep < 0 ) {
console.warn( 'Invalid next step:', newStep );
newStep = 0;
} }
if ( newStep >= stepperOrder.length ) {
setCompleted( true );
} else {
setStep( newStep ); setStep( newStep );
}
}; };
return ( return (
<div className="ppcp-r-navigation"> <div className="ppcp-r-navigation">
<Button variant="tertiary" onClick={ () => setNextStep( -1 ) }> <Button variant="tertiary" onClick={ () => navigateBy( -1 ) }>
{ __( 'Back', 'woocommerce-paypal-payments' ) } { __( 'Back', 'woocommerce-paypal-payments' ) }
</Button> </Button>
<Button <Button
variant="primary" variant="primary"
disabled={ ! canProceeedCallback() } disabled={ ! canProceeedCallback() }
onClick={ () => setNextStep( 1 ) } onClick={ () => navigateBy( 1 ) }
> >
{ __( 'Next', 'woocommerce-paypal-payments' ) } { __( 'Next', 'woocommerce-paypal-payments' ) }
</Button> </Button>

13
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js
View file

@ -4,21 +4,25 @@ import Container, {
import StepWelcome from './StepWelcome.js'; import StepWelcome from './StepWelcome.js';
import StepBusiness from './StepBusiness.js'; import StepBusiness from './StepBusiness.js';
import StepProducts from './StepProducts.js'; import StepProducts from './StepProducts.js';
import { useState } from '@wordpress/element'; import { useOnboardingStep } from '../../../data';
const Onboarding = () => { const Onboarding = () => {
const [ step, setStep ] = useState( 0 ); const { step, setStep, setCompleted } = useOnboardingStep();
return ( return (
<Container page={ PAGE_ONBOARDING }> <Container page={ PAGE_ONBOARDING }>
<div className="ppcp-r-card"> <div className="ppcp-r-card">
<Stepper currentStep={ step } setStep={ setStep } /> <Stepper
currentStep={ step }
setStep={ setStep }
setCompleted={ setCompleted }
/>
</div> </div>
</Container> </Container>
); );
}; };
const Stepper = ( { currentStep, setStep } ) => { const Stepper = ( { currentStep, setStep, setCompleted } ) => {
const stepperOrder = [ StepWelcome, StepBusiness, StepProducts ]; const stepperOrder = [ StepWelcome, StepBusiness, StepProducts ];
const renderSteps = () => { const renderSteps = () => {
@ -31,6 +35,7 @@ const Stepper = ( { currentStep, setStep } ) => {
<Step <Step
setStep={ setStep } setStep={ setStep }
currentStep={ currentStep } currentStep={ currentStep }
setCompleted={ setCompleted }
stepperOrder={ stepperOrder } stepperOrder={ stepperOrder }
/> />
</div> </div>

8
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js
View file

@ -6,7 +6,12 @@ import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons';
import { useState } from '@wordpress/element'; import { useState } from '@wordpress/element';
import Navigation from '../../ReusableComponents/Navigation'; import Navigation from '../../ReusableComponents/Navigation';
const StepBusiness = ( { setStep, currentStep, stepperOrder } ) => { const StepBusiness = ( {
setStep,
currentStep,
stepperOrder,
setCompleted,
} ) => {
const [ businessCategory, setBusinessCategory ] = useState( null ); const [ businessCategory, setBusinessCategory ] = useState( null );
const BUSINESS_RADIO_GROUP_NAME = 'business'; const BUSINESS_RADIO_GROUP_NAME = 'business';
const CASUAL_SELLER_CHECKBOX_VALUE = 'casual_seller'; const CASUAL_SELLER_CHECKBOX_VALUE = 'casual_seller';
@ -91,6 +96,7 @@ const StepBusiness = ( { setStep, currentStep, stepperOrder } ) => {
setStep={ setStep } setStep={ setStep }
currentStep={ currentStep } currentStep={ currentStep }
stepperOrder={ stepperOrder } stepperOrder={ stepperOrder }
setCompleted={ setCompleted }
canProceeedCallback={ () => businessCategory !== null } canProceeedCallback={ () => businessCategory !== null }
/> />
</div> </div>

8
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepProducts.js
View file

@ -5,7 +5,12 @@ import SelectBox from '../../ReusableComponents/SelectBox';
import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper'; import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper';
import { useState } from '@wordpress/element'; import { useState } from '@wordpress/element';
const StepProducts = ( { setStep, currentStep, stepperOrder } ) => { const StepProducts = ( {
setStep,
currentStep,
stepperOrder,
setCompleted,
} ) => {
const [ products, setProducts ] = useState( [] ); const [ products, setProducts ] = useState( [] );
const PRODUCTS_CHECKBOX_GROUP_NAME = 'products'; const PRODUCTS_CHECKBOX_GROUP_NAME = 'products';
const VIRTUAL_CHECKBOX_VALUE = 'virtual'; const VIRTUAL_CHECKBOX_VALUE = 'virtual';
@ -118,6 +123,7 @@ const StepProducts = ( { setStep, currentStep, stepperOrder } ) => {
setStep={ setStep } setStep={ setStep }
currentStep={ currentStep } currentStep={ currentStep }
stepperOrder={ stepperOrder } stepperOrder={ stepperOrder }
setCompleted={ setCompleted }
canProceeedCallback={ () => products.length > 0 } canProceeedCallback={ () => products.length > 0 }
/> />
</div> </div>