Merge pull request #2821 from woocommerce/PCP-3946-convert-existing-payment-methods-screen-into-the-new-design-two-columns

Settings UI: Migrate to two column design

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

@@ -17,21 +17,35 @@
 	}
 
 	&-settings-card {
-		background-color: $color-white;
+		@media screen and (min-width: 960px) {
-		padding: 48px;
+			display: flex;
-		border-radius: 8px;
+			gap: 48px;
-		box-shadow: 0 2px 4px 0 #0000001A;
+		}
+
 		@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 {

modules/ppcp-settings/resources/css/components/screens/_settings-global.scss

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

modules/ppcp-settings/resources/css/components/screens/_settings.scss

@@ -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);
+	}
+}

modules/ppcp-settings/resources/css/style.scss

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

modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js

@@ -1,16 +1,14 @@
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import {useOnboardingStepBusiness, useOnboardingStepProducts} from "../../data";
+import {
-import data from "../../utils/data";
+	useOnboardingStepBusiness,
+	useOnboardingStepProducts,
+} from '../../data';
+import data from '../../utils/data';
 
-const Navigation = ( {
+const Navigation = ( { setStep, setCompleted, currentStep, stepperOrder } ) => {
-	setStep,
+	const isLastStep = () => currentStep + 1 === stepperOrder.length;
-	setCompleted,
+	const isFistStep = () => currentStep === 0;
-	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 { products, toggleProduct } = useOnboardingStepProducts();
-    const { isCasualSeller, setIsCasualSeller } = useOnboardingStepBusiness();
+	const { isCasualSeller, setIsCasualSeller } = useOnboardingStepBusiness();
 
-    let navigationTitle = '';
+	let navigationTitle = '';
-    let disabled = false;
+	let disabled = false;
 
-    switch ( currentStep ) {
+	switch ( currentStep ) {
-        case 1:
+		case 1:
-            navigationTitle = __( 'Set up store type', 'woocommerce-paypal-payments' );
+			navigationTitle = __(
-            disabled = isCasualSeller === null
+				'Set up store type',
-            break;
+				'woocommerce-paypal-payments'
-        case 2:
+			);
-            navigationTitle = __( 'Select product types', 'woocommerce-paypal-payments' );
+			disabled = isCasualSeller === null;
-            disabled = products.length < 1
+			break;
-            break;
+		case 2:
-        case 3:
+			navigationTitle = __(
-            navigationTitle = __( 'Choose checkout options', 'woocommerce-paypal-payments' );
+				'Select product types',
-        case 4:
+				'woocommerce-paypal-payments'
-            navigationTitle = __( 'Connect your PayPal account', 'woocommerce-paypal-payments' );
+			);
-            break;
+			disabled = products.length < 1;
-        default:
+			break;
-            navigationTitle = __( 'PayPal Payments', 'woocommerce-paypal-payments' );
+		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-container">
-            <div className="ppcp-r-navigation">
+			<div className="ppcp-r-navigation">
-                <div className="ppcp-r-navigation--left">
+				<div className="ppcp-r-navigation--left">
-                    <span>{data().getImage('icon-arrow-left.svg')}</span>
+					<span>{ data().getImage( 'icon-arrow-left.svg' ) }</span>
-                    {!isFistStep() ? (
+					{ ! isFistStep() ? (
-                        <Button variant="tertiary" onClick={() => navigateBy(-1)}>
+						<Button
-                            {navigationTitle}
+							variant="tertiary"
-                        </Button>
+							onClick={ () => navigateBy( -1 ) }
-                    ) : (
+						>
-                        <a
+							{ navigationTitle }
-                            className="ppcp-r-navigation--left__link"
+						</Button>
-                            href={global.ppcpSettings.wcPaymentsTabUrl}
+					) : (
-                            aria-label={__('Return to payments', 'woocommerce-paypal-payments')}
+						<a
-                        >
+							className="ppcp-r-navigation--left__link"
-                            {navigationTitle}
+							href={ global.ppcpSettings.wcPaymentsTabUrl }
-                        </a>
+							aria-label={ __(
-                    )}
+								'Return to payments',
-                </div>
+								'woocommerce-paypal-payments'
-                {!isFistStep() && (
+							) }
-                    <div className="ppcp-r-navigation--right">
+						>
-                        <a
+							{ navigationTitle }
-                            href={ global.ppcpSettings.wcPaymentsTabUrl }
+						</a>
-                            aria-label={ __( 'Return to payments', 'woocommerce-paypal-payments' ) }
+					) }
-                        >
+				</div>
-                            { __( 'Save and exit', 'woocommerce-paypal-payments' ) }
+				{ ! isFistStep() && (
-                        </a>
+					<div className="ppcp-r-navigation--right">
-                        {!isLastStep() && (
+						<a
-                            <Button
+							href={ global.ppcpSettings.wcPaymentsTabUrl }
-                                variant="primary"
+							aria-label={ __(
-                                disabled={ disabled }
+								'Return to payments',
-                                onClick={ () => navigateBy( 1 ) }
+								'woocommerce-paypal-payments'
-                            >
+							) }
-                                { __( 'Continue', 'woocommerce-paypal-payments' ) }
+						>
-                            </Button>
+							{ __(
-                        )}
+								'Save and exit',
-                    </div>
+								'woocommerce-paypal-payments'
-                )}
+							) }
-                <div
+						</a>
-                    className="ppcp-r-navigation--progress-bar"
+						{ ! isLastStep() && (
-                    style={{
+							<Button
-                        width: `${ ( currentStep / ( stepperOrder.length - 1 ) ) * 90 }%`
+								variant="primary"
-                    }}
+								disabled={ disabled }
-                ></div>
+								onClick={ () => navigateBy( 1 ) }
-            </div>
+							>
-        </div>
+								{ __(
-    );
+									'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;

modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js

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

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

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

modules/ppcp-settings/resources/js/Components/Screens/Settings.js

@@ -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 <SettingsScreen />;
-
-	return <TabNavigation tabs={ tabs }></TabNavigation>;
 };
 
 export default Settings;

modules/ppcp-settings/resources/js/Components/Screens/SettingsNavigation.js

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

modules/ppcp-settings/resources/js/Components/Screens/SettingsScreen.js

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