From f39b4ca891581a83d613b1dbd2cb6d8fbb41f6f9 Mon Sep 17 00:00:00 2001 From: Narek Zakarian Date: Thu, 7 Nov 2024 16:56:24 +0400 Subject: [PATCH 01/10] Hide the unnecessary items, set BG color to white --- .../css/components/screens/_onboarding-global.scss | 7 +++++++ modules/ppcp-settings/resources/css/style.scss | 1 + 2 files changed, 8 insertions(+) create mode 100644 modules/ppcp-settings/resources/css/components/screens/_onboarding-global.scss diff --git a/modules/ppcp-settings/resources/css/components/screens/_onboarding-global.scss b/modules/ppcp-settings/resources/css/components/screens/_onboarding-global.scss new file mode 100644 index 000000000..7c2d4bb36 --- /dev/null +++ b/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 { + display: none !important; + } +} diff --git a/modules/ppcp-settings/resources/css/style.scss b/modules/ppcp-settings/resources/css/style.scss index 43685aaaa..0e5de694f 100644 --- a/modules/ppcp-settings/resources/css/style.scss +++ b/modules/ppcp-settings/resources/css/style.scss @@ -23,3 +23,4 @@ } @import './components/reusable-components/payment-method-modal'; +@import './components/screens/onboarding-global'; From 4a3ce9d0293bfdb7a38884b71d24451de0fb9160 Mon Sep 17 00:00:00 2001 From: Narek Zakarian Date: Fri, 8 Nov 2024 13:03:39 +0400 Subject: [PATCH 02/10] Refactor the navigation component --- modules.php | 7 +-- .../ppcp-settings/images/icon-arrow-left.svg | 3 + .../reusable-components/_button.scss | 2 +- .../reusable-components/_navigation.scss | 44 +++++++++---- .../screens/onboarding/_step-welcome.scss | 32 +++++----- .../ReusableComponents/Navigation.js | 63 ++++++++++++++----- .../Screens/Onboarding/Onboarding.js | 30 ++++++--- 7 files changed, 122 insertions(+), 59 deletions(-) create mode 100644 modules/ppcp-settings/images/icon-arrow-left.svg diff --git a/modules.php b/modules.php index 792aa636e..26bd4eec0 100644 --- a/modules.php +++ b/modules.php @@ -90,12 +90,7 @@ return function ( string $root_dir ): iterable { $modules[] = ( require "$modules_dir/ppcp-axo-block/module.php" )(); } - if ( apply_filters( - 'woocommerce.feature-flags.woocommerce_paypal_payments.settings_enabled', - getenv( 'PCP_SETTINGS_ENABLED' ) === '1' - ) ) { - $modules[] = ( require "$modules_dir/ppcp-settings/module.php" )(); - } + $modules[] = ( require "$modules_dir/ppcp-settings/module.php" )(); return $modules; }; diff --git a/modules/ppcp-settings/images/icon-arrow-left.svg b/modules/ppcp-settings/images/icon-arrow-left.svg new file mode 100644 index 000000000..eac560f6e --- /dev/null +++ b/modules/ppcp-settings/images/icon-arrow-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_button.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_button.scss index 2f3445abe..dbf41614c 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_button.scss +++ b/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; } diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss index e7099be46..f2405d33e 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss @@ -1,19 +1,41 @@ .ppcp-r-navigation { display: flex; - justify-content: flex-end; + justify-content: space-between; align-items: center; - gap: 12px; + padding: 24px 48px; + margin: 0 -20px 48px -20px; + border-bottom: 1px solid $color-gray-300; - .is-primary { - min-width: 196px; + button.is-primary { + padding: 10px 18px; justify-content: center; - } - - .is-tertiary { - padding: 10px 17px; - - &:hover { - background-color: transparent; + 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; + } + + span { + padding: 0 12px 0 0; + } + } + + &--right a{ + @include font(13, 20, 400); + color: $color-blueberry; + text-decoration: none; + } + + @media screen and (max-width: 480px) { + flex-wrap: wrap; + row-gap: 8px; + } } diff --git a/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss b/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss index 34c9150d0..2b70def3d 100644 --- a/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss +++ b/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss @@ -109,6 +109,22 @@ justify-content: center; padding: 8px; margin: 0 0 48px 0; + + @media screen and (max-width: 480px) { + flex-wrap: wrap; + row-gap: 8px; + &__col { + width: 100%; + text-align: center; + border-right: 0; + padding-right: 0; + + &:not(:last-child) { + border-bottom: 1px solid $color-gray-200; + padding-bottom: 8px; + } + } + } } &__col { @@ -133,21 +149,5 @@ .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; - } - } - } } diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js index 05950f13d..e5739f99c 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js @@ -1,12 +1,13 @@ 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 navigateBy = ( stepDirection ) => { let newStep = currentStep + stepDirection; @@ -23,20 +24,52 @@ 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 ( -
- - -
- ); +
+
+ +
+ { currentStep > 0 && ( +
+ {__('Save and exit', 'woocommerce-paypal-payments')} + +
+ ) } +
+ ); }; export default Navigation; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js index 20c18fc33..587d59253 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js +++ b/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 ( - -
- -
- + <> + + +
+ +
+ + ); }; From 8336ffd2a69ad63bff0f5c9179d2d8296838be76 Mon Sep 17 00:00:00 2001 From: Narek Zakarian Date: Fri, 8 Nov 2024 13:06:58 +0400 Subject: [PATCH 03/10] Revert changing the modules file --- modules.php | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/modules.php b/modules.php index 26bd4eec0..792aa636e 100644 --- a/modules.php +++ b/modules.php @@ -90,7 +90,12 @@ return function ( string $root_dir ): iterable { $modules[] = ( require "$modules_dir/ppcp-axo-block/module.php" )(); } - $modules[] = ( require "$modules_dir/ppcp-settings/module.php" )(); + if ( apply_filters( + 'woocommerce.feature-flags.woocommerce_paypal_payments.settings_enabled', + getenv( 'PCP_SETTINGS_ENABLED' ) === '1' + ) ) { + $modules[] = ( require "$modules_dir/ppcp-settings/module.php" )(); + } return $modules; }; From f3c9787c6825214932cb7847dfaa4491ca44e7e2 Mon Sep 17 00:00:00 2001 From: Narek Zakarian Date: Fri, 8 Nov 2024 13:28:58 +0400 Subject: [PATCH 04/10] Add the progress bar --- .../components/reusable-components/_navigation.scss | 13 +++++++++++++ .../js/Components/ReusableComponents/Navigation.js | 6 ++++++ 2 files changed, 19 insertions(+) diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss index f2405d33e..5a8ee3027 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss @@ -5,6 +5,7 @@ padding: 24px 48px; margin: 0 -20px 48px -20px; border-bottom: 1px solid $color-gray-300; + position: relative; button.is-primary { padding: 10px 18px; @@ -34,8 +35,20 @@ text-decoration: none; } + &--progress-bar { + position: absolute; + bottom: 0px; + left: 0; + background-color: $color-blueberry; + height: 4px; + } + @media screen and (max-width: 480px) { flex-wrap: wrap; row-gap: 8px; + + &--progress-bar { + display:none; + } } } diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js index e5739f99c..cae298d59 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js @@ -68,6 +68,12 @@ const Navigation = ( { ) } +
); }; From c5d229551197f978bb4a6ca088a8219d991ad13c Mon Sep 17 00:00:00 2001 From: Narek Zakarian Date: Fri, 8 Nov 2024 13:31:12 +0400 Subject: [PATCH 05/10] Remove the navigation from bottom --- .../js/Components/Screens/Onboarding/StepBusiness.js | 7 ------- .../js/Components/Screens/Onboarding/StepProducts.js | 7 ------- 2 files changed, 14 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js index 252045ba7..7c5f0b30b 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js @@ -101,13 +101,6 @@ const StepBusiness = ( { /> - isCasualSeller !== null } - /> ); diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepProducts.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepProducts.js index fecdc6029..d40f8fa6a 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepProducts.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepProducts.js @@ -121,13 +121,6 @@ const StepProducts = ( { - products.length > 0 } - /> ); From ce61b661ab3c25aed876812bf45e7e8335d5ed6e Mon Sep 17 00:00:00 2001 From: Narek Zakarian Date: Fri, 8 Nov 2024 13:31:45 +0400 Subject: [PATCH 06/10] Remove the navigation from bottom --- .../resources/js/Components/Screens/Onboarding/StepBusiness.js | 1 - .../resources/js/Components/Screens/Onboarding/StepProducts.js | 1 - 2 files changed, 2 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js index 7c5f0b30b..8bbc3c199 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js +++ b/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'; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepProducts.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepProducts.js index d40f8fa6a..44c56d509 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepProducts.js +++ b/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'; From d3accc0d8c3bcac8bcf60f3672b39c0611e474eb Mon Sep 17 00:00:00 2001 From: Narek Zakarian Date: Fri, 8 Nov 2024 14:02:05 +0400 Subject: [PATCH 07/10] Improve mobile styles --- .../reusable-components/_navigation.scss | 86 ++++++++++--------- .../screens/_onboarding-global.scss | 2 +- .../ReusableComponents/Navigation.js | 52 ++++++----- 3 files changed, 76 insertions(+), 64 deletions(-) diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss index 5a8ee3027..a3e24f3c1 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss @@ -1,54 +1,60 @@ -.ppcp-r-navigation { - display: flex; - justify-content: space-between; - align-items: center; +.ppcp-r-navigation-container { padding: 24px 48px; margin: 0 -20px 48px -20px; border-bottom: 1px solid $color-gray-300; position: relative; - button.is-primary { - padding: 10px 18px; - justify-content: center; - margin: 0 0 0 12px; - &:not(:disabled) { + .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; + } + } + + button.is-tertiary { + @include font(16, 24, 600); + color: $color-gray-900; + &:hover{ + background-color:none; + background:none; + } + + span { + padding: 0 12px 0 0; + } + } + + &--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; } } - button.is-tertiary { - @include font(16, 24, 600); - color: $color-gray-900; - &:hover{ - background-color:none; - background:none; - } - - span { - padding: 0 12px 0 0; - } - } - - &--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) { - flex-wrap: wrap; - row-gap: 8px; + padding: 24px 35px; + .ppcp-r-navigation { + flex-wrap: wrap; + row-gap: 8px; - &--progress-bar { - display:none; + &--progress-bar { + display: none; + } } } } diff --git a/modules/ppcp-settings/resources/css/components/screens/_onboarding-global.scss b/modules/ppcp-settings/resources/css/components/screens/_onboarding-global.scss index 7c2d4bb36..22a2f1260 100644 --- a/modules/ppcp-settings/resources/css/components/screens/_onboarding-global.scss +++ b/modules/ppcp-settings/resources/css/components/screens/_onboarding-global.scss @@ -1,7 +1,7 @@ body:has(.ppcp-r-container--onboarding) { background-color: #fff !important; - .notice, .nav-tab-wrapper.woo-nav-tab-wrapper, .woocommerce-layout { + .notice, .nav-tab-wrapper.woo-nav-tab-wrapper, .woocommerce-layout, .wrap.woocommerce h2:first-of-type { display: none !important; } } diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js index cae298d59..abac8047e 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js @@ -29,6 +29,8 @@ const Navigation = ( { let navigationTitle = ''; let disabled = false; + let isLastStep = currentStep + 1 === stepperOrder.length; + let isFistStep = currentStep === 0; switch ( currentStep ) { case 1: @@ -49,31 +51,35 @@ const Navigation = ( { } return ( -
-
- -
- { currentStep > 0 && ( -
- {__('Save and exit', 'woocommerce-paypal-payments')} -
- ) } -
+ { ! isFistStep && ( +
+ {__('Save and exit', 'woocommerce-paypal-payments')} + { ! isLastStep && ( + + ) } +
+ ) } +
+
); }; From 66536f2a57b2df0802084bf1cda63bd376512af4 Mon Sep 17 00:00:00 2001 From: Narek Zakarian Date: Fri, 8 Nov 2024 14:06:38 +0400 Subject: [PATCH 08/10] Pass the WC payments tab URL to JS --- .../resources/js/Components/ReusableComponents/Navigation.js | 2 +- modules/ppcp-settings/src/SettingsModule.php | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js index abac8047e..9cdf49c87 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js @@ -60,7 +60,7 @@ const Navigation = ( { { ! isFistStep && (
- {__('Save and exit', 'woocommerce-paypal-payments')} { ! isLastStep && ( + {data().getImage('icon-arrow-left.svg')} + {!isFistStep() ? ( + + ) : ( + + {navigationTitle} + + )}
- { ! isFistStep && ( + {!isFistStep() && (
- {__('Save and exit', 'woocommerce-paypal-payments')} - { ! isLastStep && ( + + { __( 'Save and exit', 'woocommerce-paypal-payments' ) } + + {!isLastStep() && ( - ) } + )}
- ) } + )}
From 11ea4360b84308e78096ea82fe2b5c8d605efd26 Mon Sep 17 00:00:00 2001 From: Narek Zakarian Date: Fri, 8 Nov 2024 15:42:30 +0400 Subject: [PATCH 10/10] Fix the mobile view --- .../screens/onboarding/_step-welcome.scss | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss b/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss index 2b70def3d..8ff8ab4ea 100644 --- a/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss +++ b/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss @@ -113,17 +113,6 @@ @media screen and (max-width: 480px) { flex-wrap: wrap; row-gap: 8px; - &__col { - width: 100%; - text-align: center; - border-right: 0; - padding-right: 0; - - &:not(:last-child) { - border-bottom: 1px solid $color-gray-200; - padding-bottom: 8px; - } - } } } @@ -144,6 +133,17 @@ 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 {