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

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

Browse source 
Display onboarding in full screen view without WC header, refactor the navigation (3838)
This commit is contained in:
Emili Castells 2024-11-11 13:05:09 +01:00 • committed by GitHub
commit 57eec61c87
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 184 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

3
modules/ppcp-settings/images/icon-arrow-left.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 287 B

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

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

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

@ -1,19 +1,65 @@
.ppcp-r-navigation {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 12px;
.ppcp-r-navigation-container {
padding: 24px 48px;
margin: 0 -20px 48px -20px;
border-bottom: 1px solid $color-gray-300;
position: relative;
.is-primary {
min-width: 196px;
.ppcp-r-navigation {
display: flex;
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;
}
}
.is-tertiary {
padding: 10px 17px;
button.is-tertiary {
@include font(16, 24, 600);
color: $color-gray-900;
&:hover{
background-color:none;
background:none;
}
}
&:hover {
background-color: transparent;
&--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;
}
}
@media screen and (max-width: 480px) {
padding: 24px 35px;
.ppcp-r-navigation {
flex-wrap: wrap;
row-gap: 8px;
&--progress-bar {
display: none;
}
}
}
}

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

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

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

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

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

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

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

@ -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,
canProceeedCallback = () => true,
stepperOrder
} ) => {
const isLastStep = () => currentStep + 1 === stepperOrder.length;
const isFistStep = () => currentStep === 0;
const navigateBy = ( stepDirection ) => {
let newStep = currentStep + stepDirection;
@ -23,18 +26,75 @@ 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-container">
<div className="ppcp-r-navigation">
<Button variant="tertiary" onClick={ () => navigateBy( -1 ) }>
{ __( 'Back', 'woocommerce-paypal-payments' ) }
<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={ ! canProceeedCallback() }
disabled={ disabled }
onClick={ () => navigateBy( 1 ) }
>
{ __( 'Next', 'woocommerce-paypal-payments' ) }
{ __( 'Continue', 'woocommerce-paypal-payments' ) }
</Button>
)}
</div>
)}
<div
className="ppcp-r-navigation--progress-bar"
style={{
width: `${ ( currentStep / ( stepperOrder.length - 1 ) ) * 90 }%`
}}
></div>
</div>
</div>
);
};

10
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js
View file

@ -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,6 +22,13 @@ const Onboarding = () => {
const CurrentStepComponent = getCurrentStep( step, steps );
return (
<>
<Navigation
setStep={ setStep }
currentStep={ step }
setCompleted={ setCompleted }
stepperOrder={ steps }
/>
<Container page="onboarding">
<div className="ppcp-r-card">
<CurrentStepComponent
@ -30,6 +39,7 @@ const Onboarding = () => {
/>
</div>
</Container>
</>
);
};

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

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

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

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

1
modules/ppcp-settings/src/SettingsModule.php
View file

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