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

fix the first step back link

Browse source
This commit is contained in:
Narek Zakarian 2024-11-08 15:27:00 +04:00
parent 66536f2a57
commit f6ad82886b
No known key found for this signature in database
GPG key ID: 07AFD7E7A9C164A7
2 changed files with 36 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

9
modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss
View file

@ -25,9 +25,14 @@
background-color:none;
background:none;
}
}
span {
padding: 0 12px 0 0;
&--left {
&__link {
@include font(20, 28, 400);
color: $color-gray-900;
text-decoration: none;
padding: 0 0 0 18px;
}
}

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

@ -9,6 +9,8 @@ const Navigation = ( {
currentStep,
stepperOrder
} ) => {
const isLastStep = () => currentStep + 1 === stepperOrder.length;
const isFistStep = () => currentStep === 0;
const navigateBy = ( stepDirection ) => {
let newStep = currentStep + stepDirection;
@ -29,8 +31,6 @@ const Navigation = ( {
let navigationTitle = '';
let disabled = false;
let isLastStep = currentStep + 1 === stepperOrder.length;
let isFistStep = currentStep === 0;
switch ( currentStep ) {
case 1:
@ -54,30 +54,45 @@ const Navigation = ( {
<div className="ppcp-r-navigation-container">
<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>
<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 && (
{!isFistStep() && (
<div className="ppcp-r-navigation--right">
<a href={ global.ppcpSettings.wcPaymentsTabUrl }
aria-label="Return to payments">{__('Save and exit', 'woocommerce-paypal-payments')}</a>
{ ! isLastStep && (
<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') }
{ __( 'Continue', 'woocommerce-paypal-payments' ) }
</Button>
) }
)}
</div>
) }
)}
<div
className="ppcp-r-navigation--progress-bar"
style={ {
style={{
width: `${ ( currentStep / ( stepperOrder.length - 1 ) ) * 90 }%`
} }
}}
></div>
</div>
</div>