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

Settings UI: Migrate to two column design

Browse source
This commit is contained in:
Daniel Dudzic 2024-11-21 13:08:38 +01:00
parent 7a5cc397ed
commit 9137712196
No known key found for this signature in database
GPG key ID: 31B40D33E3465483
10 changed files with 202 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

24
modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss
View file

@ -17,21 +17,35 @@
}
&-settings-card {
background-color: $color-white;
padding: 48px;
border-radius: 8px;
box-shadow: 0 2px 4px 0 #0000001A;
@media screen and (min-width: 960px) {
display: flex;
gap: 48px;
}
@media screen and (max-width: 480px) {
padding: 24px;
}
&__header {
display: flex;
align-items: center;
gap: 18px;
padding-bottom: 18px;
border-bottom: 2px solid $color-gray-700;
margin-bottom: 32px;
@media screen and (min-width: 960px) {
width: 280px;
flex-shrink: 0;
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
}
&__content {
@media screen and (min-width: 960px) {
flex: 1;
}
}
&__title {

7
modules/ppcp-settings/resources/css/components/screens/_settings-global.scss Normal file
View file

@ -0,0 +1,7 @@
body:has(.ppcp-r-container--settings) {
background-color: #fff !important;
.notice, .nav-tab-wrapper.woo-nav-tab-wrapper, .woocommerce-layout, .wrap.woocommerce form > h2, #screen-meta-links {
display: none !important;
}
}

8
modules/ppcp-settings/resources/css/components/screens/_settings.scss Normal file
View file

@ -0,0 +1,8 @@
.ppcp-r-tabs.settings,
.ppcp-r-container--settings {
--max-container-width: var(--max-width-settings);
.ppcp-r-inner-container {
max-width: var(--max-container-width);
}
}

4
modules/ppcp-settings/resources/css/style.scss
View file

@ -20,10 +20,12 @@
@import './components/reusable-components/spinner-overlay';
@import './components/reusable-components/welcome-docs';
@import './components/screens/onboarding';
@import './components/screens/settings';
@import './components/screens/overview/tab-overview';
@import './components/screens/overview/tab-payment-methods';
@import 'components/screens/overview/tab-settings';
@import './components/screens/overview/tab-settings';
}
@import './components/reusable-components/payment-method-modal';
@import './components/screens/onboarding-global';
@import './components/screens/settings-global';

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

@ -1,14 +1,12 @@
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 Navigation = ( { setStep, setCompleted, currentStep, stepperOrder } ) => {
const isLastStep = () => currentStep + 1 === stepperOrder.length;
const isFistStep = () => currentStep === 0;
const navigateBy = ( stepDirection ) => {
@ -34,65 +32,97 @@ const Navigation = ( {
switch ( currentStep ) {
case 1:
navigationTitle = __( 'Set up store type', 'woocommerce-paypal-payments' );
disabled = isCasualSeller === null
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
navigationTitle = __(
'Select product types',
'woocommerce-paypal-payments'
);
disabled = products.length < 1;
break;
case 3:
navigationTitle = __( 'Choose checkout options', 'woocommerce-paypal-payments' );
navigationTitle = __(
'Choose checkout options',
'woocommerce-paypal-payments'
);
case 4:
navigationTitle = __( 'Connect your PayPal account', 'woocommerce-paypal-payments' );
navigationTitle = __(
'Connect your PayPal account',
'woocommerce-paypal-payments'
);
break;
default:
navigationTitle = __( 'PayPal Payments', 'woocommerce-paypal-payments' );
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}
<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')}
href={ global.ppcpSettings.wcPaymentsTabUrl }
aria-label={ __(
'Return to payments',
'woocommerce-paypal-payments'
) }
>
{navigationTitle}
{ navigationTitle }
</a>
)}
) }
</div>
{!isFistStep() && (
{ ! isFistStep() && (
<div className="ppcp-r-navigation--right">
<a
href={ global.ppcpSettings.wcPaymentsTabUrl }
aria-label={ __( 'Return to payments', 'woocommerce-paypal-payments' ) }
aria-label={ __(
'Return to payments',
'woocommerce-paypal-payments'
) }
>
{ __( 'Save and exit', 'woocommerce-paypal-payments' ) }
{ __(
'Save and exit',
'woocommerce-paypal-payments'
) }
</a>
{!isLastStep() && (
{ ! 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={{
width: `${ ( currentStep / ( stepperOrder.length - 1 ) ) * 90 }%`
}}
style={ {
width: `${
( currentStep / ( stepperOrder.length - 1 ) ) * 90
}%`,
} }
></div>
</div>
</div>

1
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js
View file

@ -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 }

2
modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js
View file

@ -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.',

7
modules/ppcp-settings/resources/js/Components/Screens/Settings.js
View file

@ -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;

37
modules/ppcp-settings/resources/js/Components/Screens/SettingsNavigation.js Normal file
View file

@ -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;

19
modules/ppcp-settings/resources/js/Components/Screens/SettingsScreen.js Normal file
View file

@ -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;