mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-06 13:44:42 +08:00
Settings UI: Migrate to two column design
This commit is contained in:
Daniel Dudzic
parent
7a5cc397ed
commit
9137712196
10 changed files with 202 additions and 91 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ const SettingsCard = ( props ) => {
|
|||
return (
|
||||
<div className={ className }>
|
||||
<div className="ppcp-r-settings-card__header">
|
||||
{ data().getImage( props.icon ) }
|
||||
<div className="ppcp-r-settings-card__content-inner">
|
||||
<span className="ppcp-r-settings-card__title">
|
||||
{ props.title }
|
||||
|
|
|
|||
|
|
@ -24,7 +24,6 @@ const TabOverview = () => {
|
|||
{ todosData.length > 0 && (
|
||||
<SettingsCard
|
||||
className="ppcp-r-tab-overview-todo"
|
||||
icon="icon-overview-list.svg"
|
||||
title={ __(
|
||||
'Things to do next',
|
||||
'woocommerce-paypal-payments'
|
||||
|
|
@ -52,7 +51,6 @@ const TabOverview = () => {
|
|||
) }
|
||||
<SettingsCard
|
||||
className="ppcp-r-tab-overview-support"
|
||||
icon="icon-overview-support.svg"
|
||||
title={ __( 'Status', 'woocommerce-paypal-payments' ) }
|
||||
description={ __(
|
||||
'Your PayPal account connection details, along with available products and features.',
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import TabNavigation from '../ReusableComponents/TabNavigation';
|
||||
import { getSettingsTabs } from './tabs';
|
||||
import { useOnboardingStep } from '../../data';
|
||||
import Onboarding from './Onboarding/Onboarding';
|
||||
import SettingsScreen from './SettingsScreen';
|
||||
|
||||
const Settings = () => {
|
||||
const onboardingProgress = useOnboardingStep();
|
||||
|
|
@ -15,9 +14,7 @@ const Settings = () => {
|
|||
return <Onboarding />;
|
||||
}
|
||||
|
||||
const tabs = getSettingsTabs( onboardingProgress );
|
||||
|
||||
return <TabNavigation tabs={ tabs }></TabNavigation>;
|
||||
return <SettingsScreen />;
|
||||
};
|
||||
|
||||
export default Settings;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,37 @@
|
|||
import { Button } from '@wordpress/components';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import data from '../../utils/data';
|
||||
|
||||
const SettingsNavigation = ( {} ) => {
|
||||
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>
|
||||
<a
|
||||
className="ppcp-r-navigation--left__link"
|
||||
href={ global.ppcpSettings.wcPaymentsTabUrl }
|
||||
aria-label={ __(
|
||||
'PayPal Payments',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
>
|
||||
{ __(
|
||||
'PayPal Payments',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</a>
|
||||
</div>
|
||||
{
|
||||
<div className="ppcp-r-navigation--right">
|
||||
<Button variant="primary" disabled={ false }>
|
||||
{ __( 'Save', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SettingsNavigation;
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import { getSettingsTabs } from './tabs';
|
||||
import SettingsNavigation from './SettingsNavigation';
|
||||
import Container from '../ReusableComponents/Container';
|
||||
import TabNavigation from '../ReusableComponents/TabNavigation';
|
||||
|
||||
const SettingsScreen = () => {
|
||||
const tabs = getSettingsTabs();
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingsNavigation />
|
||||
<Container page="settings">
|
||||
<TabNavigation tabs={ tabs }></TabNavigation>
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SettingsScreen;
|
||||
Loading…
Add table
Add a link
Reference in a new issue
