Merge pull request #2776 from woocommerce/PCP-3838-display-onboarding-in-full-screen-view-without-woo-commerce-header

Display onboarding in full screen view without WC header, refactor the navigation (3838)

modules/ppcp-settings/images/icon-arrow-left.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.44497 12.0046L0.986328 6.00011L6.44497 -0.00439453L7.55488 1.00461L3.01352 6.00011L7.55488 10.9956L6.44497 12.0046Z" fill="#070707"/>
+</svg>

modules/ppcp-settings/resources/css/components/reusable-components/_button.scss

@@ -17,7 +17,7 @@ button.components-button, a.components-button {
 	}
 
 	&.is-primary {
-		@include font(13, 16, 500);
+		@include font(13, 20, 400);
 		color:$color-white;
 	}
 

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

@@ -1,19 +1,65 @@
-.ppcp-r-navigation {
+.ppcp-r-navigation-container {
-	display: flex;
+	padding: 24px 48px;
-	justify-content: flex-end;
+	margin: 0 -20px 48px -20px;
-	align-items: center;
+	border-bottom: 1px solid $color-gray-300;
-	gap: 12px;
+	position: relative;
 
-	.is-primary {
+	.ppcp-r-navigation {
-		min-width: 196px;
+		display: flex;
-		justify-content: center;
+		justify-content: space-between;
+		align-items: center;
+
+		button.is-primary {
+			padding: 10px 18px;
+			justify-content: center;
+			margin: 0 0 0 12px;
+			&:not(:disabled) {
+				background-color: $color-blueberry;
+			}
+		}
+
+		button.is-tertiary {
+			@include font(16, 24, 600);
+			color: $color-gray-900;
+			&:hover{
+				background-color:none;
+				background:none;
+			}
+		}
+
+		&--left {
+			&__link {
+				@include font(20, 28, 400);
+				color: $color-gray-900;
+				text-decoration: none;
+				padding: 0 0 0 18px;
+			}
+		}
+
+		&--right a{
+			@include font(13, 20, 400);
+			color: $color-blueberry;
+			text-decoration: none;
+		}
+
+		&--progress-bar {
+			position: absolute;
+			bottom: 0px;
+			left: 0;
+			background-color: $color-blueberry;
+			height: 4px;
+		}
 	}
 
-	.is-tertiary {
+	@media screen and (max-width: 480px) {
-		padding: 10px 17px;
+		padding: 24px 35px;
+		.ppcp-r-navigation {
+			flex-wrap: wrap;
+			row-gap: 8px;
 
-		&:hover {
+			&--progress-bar {
-			background-color: transparent;
+				display: none;
+			}
 		}
 	}
 }

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

@@ -0,0 +1,7 @@
+body:has(.ppcp-r-container--onboarding) {
+	background-color: #fff !important;
+
+	.notice, .nav-tab-wrapper.woo-nav-tab-wrapper, .woocommerce-layout, .wrap.woocommerce h2:first-of-type {
+		display: none !important;
+	}
+}

modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss

@@ -109,6 +109,11 @@
 		justify-content: center;
 		padding: 8px;
 		margin: 0 0 48px 0;
+
+		@media screen and (max-width: 480px) {
+			flex-wrap: wrap;
+			row-gap: 8px;
+		}
 	}
 
 	&__col {
@@ -128,26 +133,21 @@
 			border-right: 1px solid $color-gray-200;
 			margin-right: 48px;
 		}
+
+		@media screen and (max-width: 480px) {
+			width: 100%;
+			text-align: center;
+			border-right: 0 !important;
+			padding-right: 0 !important;
+
+			&:not(:last-child) {
+				padding-bottom: 8px;
+			}
+		}
 	}
 
 	.ppcp-r-page-welcome-mode-separator {
 		margin: 8px 0 16px 0;
 	}
-
-	@media screen and (max-width: 480px) {
-		flex-wrap: wrap;
-		row-gap: 8px;
-		&__col {
-			width: 100%;
-			text-align: center;
-
-			&:not(:last-child) {
-				border-bottom: 1px solid $color-gray-200;
-				border-right: 0;
-				padding-right: 0;
-				padding-bottom: 8px;
-			}
-		}
-	}
 }
 

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

@@ -23,3 +23,4 @@
 }
 
 @import './components/reusable-components/payment-method-modal';
+@import './components/screens/onboarding-global';

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

@@ -1,13 +1,16 @@
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import {useOnboardingStepBusiness, useOnboardingStepProducts} from "../../data";
+import data from "../../utils/data";
 
 const Navigation = ( {
 	setStep,
 	setCompleted,
 	currentStep,
-	stepperOrder,
+	stepperOrder
-	canProceeedCallback = () => true,
 } ) => {
+    const isLastStep = () => currentStep + 1 === stepperOrder.length;
+    const isFistStep = () => currentStep === 0;
 	const navigateBy = ( stepDirection ) => {
 		let newStep = currentStep + stepDirection;
 
@@ -23,20 +26,77 @@ const Navigation = ( {
 		}
 	};
 
+    const { products, toggleProduct } = useOnboardingStepProducts();
+    const { isCasualSeller, setIsCasualSeller } = useOnboardingStepBusiness();
+
+    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' );
+    }
+
 	return (
-		<div className="ppcp-r-navigation">
+        <div className="ppcp-r-navigation-container">
-			<Button variant="tertiary" onClick={ () => navigateBy( -1 ) }>
+            <div className="ppcp-r-navigation">
-				{ __( 'Back', 'woocommerce-paypal-payments' ) }
+                <div className="ppcp-r-navigation--left">
-			</Button>
+                    <span>{data().getImage('icon-arrow-left.svg')}</span>
-			<Button
+                    {!isFistStep() ? (
-				variant="primary"
+                        <Button variant="tertiary" onClick={() => navigateBy(-1)}>
-				disabled={ ! canProceeedCallback() }
+                            {navigationTitle}
-				onClick={ () => navigateBy( 1 ) }
+                        </Button>
-			>
+                    ) : (
-				{ __( 'Next', 'woocommerce-paypal-payments' ) }
+                        <a
-			</Button>
+                            className="ppcp-r-navigation--left__link"
-		</div>
+                            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;

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

@@ -1,6 +1,8 @@
 import Container from '../../ReusableComponents/Container';
 import { useOnboardingStep } from '../../../data';
 import { getSteps } from './availableSteps';
+import {__} from "@wordpress/i18n";
+import Navigation from "../../ReusableComponents/Navigation";
 
 const getCurrentStep = ( requestedStep, steps ) => {
 	const isValidStep = ( step ) =>
@@ -20,16 +22,24 @@ const Onboarding = () => {
 	const CurrentStepComponent = getCurrentStep( step, steps );
 
 	return (
-		<Container page="onboarding">
+        <>
-			<div className="ppcp-r-card">
+            <Navigation
-				<CurrentStepComponent
+                setStep={ setStep }
-					setStep={ setStep }
+                currentStep={ step }
-					currentStep={ step }
+                setCompleted={ setCompleted }
-					setCompleted={ setCompleted }
+                stepperOrder={ steps }
-					stepperOrder={ steps }
+            />
-				/>
+            <Container page="onboarding">
-			</div>
+                <div className="ppcp-r-card">
-		</Container>
+                    <CurrentStepComponent
+                        setStep={ setStep }
+                        currentStep={ step }
+                        setCompleted={ setCompleted }
+                        stepperOrder={ steps }
+                    />
+                </div>
+            </Container>
+        </>
 	);
 };
 

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js

@@ -4,7 +4,6 @@ import SelectBox from '../../ReusableComponents/SelectBox';
 import { __ } from '@wordpress/i18n';
 import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons';
 import { useOnboardingStepBusiness } from '../../../data';
-import Navigation from '../../ReusableComponents/Navigation';
 import { BUSINESS_TYPES } from '../../../data/constants';
 
 const BUSINESS_RADIO_GROUP_NAME = 'business';
@@ -101,13 +100,6 @@ const StepBusiness = ( {
 						/>
 					</SelectBox>
 				</SelectBoxWrapper>
-				<Navigation
-					setStep={ setStep }
-					currentStep={ currentStep }
-					stepperOrder={ stepperOrder }
-					setCompleted={ setCompleted }
-					canProceeedCallback={ () => isCasualSeller !== null }
-				/>
 			</div>
 		</div>
 	);

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepProducts.js

@@ -1,5 +1,4 @@
 import OnboardingHeader from '../../ReusableComponents/OnboardingHeader';
-import Navigation from '../../ReusableComponents/Navigation';
 import { __ } from '@wordpress/i18n';
 import SelectBox from '../../ReusableComponents/SelectBox';
 import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper';
@@ -121,13 +120,6 @@ const StepProducts = ( {
 						</a>
 					</SelectBox>
 				</SelectBoxWrapper>
-				<Navigation
-					setStep={ setStep }
-					currentStep={ currentStep }
-					stepperOrder={ stepperOrder }
-					setCompleted={ setCompleted }
-					canProceeedCallback={ () => products.length > 0 }
-				/>
 			</div>
 		</div>
 	);

modules/ppcp-settings/src/SettingsModule.php

@@ -85,10 +85,11 @@ class SettingsModule implements ServiceModule, ExecutableModule {
 					'ppcp-admin-settings',
 					'ppcpSettings',
 					array(
-						'assets' => array(
+						'assets'           => array(
 							'imagesUrl' => $module_url . '/images/',
 						),
-						'debug'  => defined( 'WP_DEBUG' ) && WP_DEBUG,
+						'wcPaymentsTabUrl' => admin_url( 'admin.php?page=wc-settings&tab=checkout' ),
+						'debug'            => defined( 'WP_DEBUG' ) && WP_DEBUG,
 					)
 				);
 			}