woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-08-30 05:00:51 +08:00
Code Issues Projects Packages Wiki Activity Actions 18

Refactor the navigation component

Browse source
This commit is contained in:
Narek Zakarian 2024-11-08 13:03:39 +04:00
parent f39b4ca891
commit 4a3ce9d029
No known key found for this signature in database
GPG key ID: 07AFD7E7A9C164A7
7 changed files with 122 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,12 +1,13 @@
import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import {useOnboardingStepBusiness, useOnboardingStepProducts} from "../../data";
import data from "../../utils/data";
const Navigation = ( {
setStep,
setCompleted,
currentStep,
stepperOrder,
canProceeedCallback = () => true,
stepperOrder
} ) => {
const navigateBy = ( stepDirection ) => {
let newStep = currentStep + stepDirection;
@ -23,20 +24,52 @@ const Navigation = ( {
}
};
const { products, toggleProduct } = useOnboardingStepProducts();
const { isCasualSeller, setIsCasualSeller } = useOnboardingStepBusiness();
let navigationTitle = '';
let disabled = false;
switch ( currentStep ) {
case 1:
navigationTitle = __( 'Set up store type', 'woocommerce-paypal-payments' );
disabled = isCasualSeller === null
break;
case 2:
navigationTitle = __( 'Select product types', 'woocommerce-paypal-payments' );
disabled = products.length < 1
break;
case 3:
navigationTitle = __( 'Choose checkout options', 'woocommerce-paypal-payments' );
case 4:
navigationTitle = __( 'Connect your PayPal account', 'woocommerce-paypal-payments' );
break;
default:
navigationTitle = __( 'PayPal Payments', 'woocommerce-paypal-payments' );
}
return (
<div className="ppcp-r-navigation">
<Button variant="tertiary" onClick={ () => navigateBy( -1 ) }>
{ __( 'Back', 'woocommerce-paypal-payments' ) }
</Button>
<Button
variant="primary"
disabled={ ! canProceeedCallback() }
onClick={ () => navigateBy( 1 ) }
>
{ __( 'Next', 'woocommerce-paypal-payments' ) }
</Button>
</div>
);
<div className="ppcp-r-navigation">
<div className="ppcp-r-navigation--left">
<Button variant="tertiary" onClick={ () => navigateBy( -1 ) }>
<span>{ data().getImage( 'icon-arrow-left.svg' ) }</span>{ navigationTitle }
</Button>
</div>
{ currentStep > 0 && (
<div className="ppcp-r-navigation--right">
<a href="wp-admin/admin.php?page=wc-settings&amp;tab=checkout"
aria-label="Return to payments">{__('Save and exit', 'woocommerce-paypal-payments')}</a>
<Button
variant="primary"
disabled={ disabled }
onClick={ () => navigateBy( 1 ) }
>
{ __('Continue', 'woocommerce-paypal-payments') }
</Button>
</div>
) }
</div>
);
};
export default Navigation;

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

@ -1,6 +1,8 @@
import Container from '../../ReusableComponents/Container';
import { useOnboardingStep } from '../../../data';
import { getSteps } from './availableSteps';
import {__} from "@wordpress/i18n";
import Navigation from "../../ReusableComponents/Navigation";
const getCurrentStep = ( requestedStep, steps ) => {
const isValidStep = ( step ) =>
@ -20,16 +22,24 @@ const Onboarding = () => {
const CurrentStepComponent = getCurrentStep( step, steps );
return (
<Container page="onboarding">
<div className="ppcp-r-card">
<CurrentStepComponent
setStep={ setStep }
currentStep={ step }
setCompleted={ setCompleted }
stepperOrder={ steps }
/>
</div>
</Container>
<>
<Navigation
setStep={ setStep }
currentStep={ step }
setCompleted={ setCompleted }
stepperOrder={ steps }
/>
<Container page="onboarding">
<div className="ppcp-r-card">
<CurrentStepComponent
setStep={ setStep }
currentStep={ step }
setCompleted={ setCompleted }
stepperOrder={ steps }
/>
</div>
</Container>
</>
);
};