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

🎨 Apply eslint styling to Navigation component

Browse source
This commit is contained in:
Philipp Stracker 2024-11-20 17:00:00 +01:00
parent c96957152b
commit 40a6514af7
No known key found for this signature in database
1 changed files with 107 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,16 +1,14 @@
import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import {useOnboardingStepBusiness, useOnboardingStepProducts} from "../../data";
import data from "../../utils/data";
import {
useOnboardingStepBusiness,
useOnboardingStepProducts,
} from '../../data';
import data from '../../utils/data';
const Navigation = ( {
setStep,
setCompleted,
currentStep,
stepperOrder
} ) => {
const isLastStep = () => currentStep + 1 === stepperOrder.length;
const isFistStep = () => currentStep === 0;
const Navigation = ( { setStep, setCompleted, currentStep, stepperOrder } ) => {
const isLastStep = () => currentStep + 1 === stepperOrder.length;
const isFistStep = () => currentStep === 0;
const navigateBy = ( stepDirection ) => {
let newStep = currentStep + stepDirection;
@ -26,77 +24,109 @@ const Navigation = ( {
}
};
const { products, toggleProduct } = useOnboardingStepProducts();
const { isCasualSeller, setIsCasualSeller } = useOnboardingStepBusiness();
const { products, toggleProduct } = useOnboardingStepProducts();
const { isCasualSeller, setIsCasualSeller } = useOnboardingStepBusiness();
let navigationTitle = '';
let disabled = false;
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' );
}
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-container">
<div className="ppcp-r-navigation">
<div className="ppcp-r-navigation--left">
<span>{data().getImage('icon-arrow-left.svg')}</span>
{!isFistStep() ? (
<Button variant="tertiary" onClick={() => navigateBy(-1)}>
{navigationTitle}
</Button>
) : (
<a
className="ppcp-r-navigation--left__link"
href={global.ppcpSettings.wcPaymentsTabUrl}
aria-label={__('Return to payments', 'woocommerce-paypal-payments')}
>
{navigationTitle}
</a>
)}
</div>
{!isFistStep() && (
<div className="ppcp-r-navigation--right">
<a
href={ global.ppcpSettings.wcPaymentsTabUrl }
aria-label={ __( 'Return to payments', 'woocommerce-paypal-payments' ) }
>
{ __( 'Save and exit', 'woocommerce-paypal-payments' ) }
</a>
{!isLastStep() && (
<Button
variant="primary"
disabled={ disabled }
onClick={ () => navigateBy( 1 ) }
>
{ __( 'Continue', 'woocommerce-paypal-payments' ) }
</Button>
)}
</div>
)}
<div
className="ppcp-r-navigation--progress-bar"
style={{
width: `${ ( currentStep / ( stepperOrder.length - 1 ) ) * 90 }%`
}}
></div>
</div>
</div>
);
<div className="ppcp-r-navigation-container">
<div className="ppcp-r-navigation">
<div className="ppcp-r-navigation--left">
<span>{ data().getImage( 'icon-arrow-left.svg' ) }</span>
{ ! isFistStep() ? (
<Button
variant="tertiary"
onClick={ () => navigateBy( -1 ) }
>
{ navigationTitle }
</Button>
) : (
<a
className="ppcp-r-navigation--left__link"
href={ global.ppcpSettings.wcPaymentsTabUrl }
aria-label={ __(
'Return to payments',
'woocommerce-paypal-payments'
) }
>
{ navigationTitle }
</a>
) }
</div>
{ ! isFistStep() && (
<div className="ppcp-r-navigation--right">
<a
href={ global.ppcpSettings.wcPaymentsTabUrl }
aria-label={ __(
'Return to payments',
'woocommerce-paypal-payments'
) }
>
{ __(
'Save and exit',
'woocommerce-paypal-payments'
) }
</a>
{ ! isLastStep() && (
<Button
variant="primary"
disabled={ disabled }
onClick={ () => navigateBy( 1 ) }
>
{ __(
'Continue',
'woocommerce-paypal-payments'
) }
</Button>
) }
</div>
) }
<div
className="ppcp-r-navigation--progress-bar"
style={ {
width: `${
( currentStep / ( stepperOrder.length - 1 ) ) * 90
}%`,
} }
></div>
</div>
</div>
);
};
export default Navigation;