From 2f9ddc3aae71587b44a264371d04a207bb47d5ac Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Tue, 28 Jan 2025 17:49:50 +0100 Subject: [PATCH 01/12] =?UTF-8?q?=F0=9F=92=84=20Remove=20extra=20gap=20abv?= =?UTF-8?q?oe=20the=20top-navigation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/css/components/screens/_fullscreen.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/modules/ppcp-settings/resources/css/components/screens/_fullscreen.scss b/modules/ppcp-settings/resources/css/components/screens/_fullscreen.scss index f29755306..bf00b6a68 100644 --- a/modules/ppcp-settings/resources/css/components/screens/_fullscreen.scss +++ b/modules/ppcp-settings/resources/css/components/screens/_fullscreen.scss @@ -12,6 +12,7 @@ body:has(.ppcp-r-container--onboarding) { .woocommerce-layout__header, .wrap.woocommerce form > h2, #mainform .subsubsub, + #mainform .subsubsub + br.clear, #screen-meta-links { display: none !important; visibility: hidden; From 1f3049e2eb3ee1534166df0f74f853122a6a9306 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Tue, 28 Jan 2025 18:27:42 +0100 Subject: [PATCH 02/12] =?UTF-8?q?=F0=9F=A7=91=E2=80=8D=F0=9F=92=BB=20Enabl?= =?UTF-8?q?e=20debug=20tools=20on=20every=20environment?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ppcp-settings/resources/js/data/debug.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/modules/ppcp-settings/resources/js/data/debug.js b/modules/ppcp-settings/resources/js/data/debug.js index ed3233116..e9bd1295e 100644 --- a/modules/ppcp-settings/resources/js/data/debug.js +++ b/modules/ppcp-settings/resources/js/data/debug.js @@ -6,13 +6,18 @@ import { StylingStoreName, TodosStoreName, } from './index'; -import { setCompleted } from './onboarding/actions'; export const addDebugTools = ( context, modules ) => { - if ( ! context || ! context?.debug ) { + if ( ! context ) { return; } + /* + // TODO - enable this condition for version 3.0.1 + // In version 3.0.0 we want to have the debug tools available on every installation + if ( ! context.debug ) { return } + */ + // Dump the current state of all our Redux stores. context.dumpStore = async () => { /* eslint-disable no-console */ @@ -70,8 +75,12 @@ export const addDebugTools = ( context, modules ) => { // eslint-disable-next-line no-console console.log( `Reset store: ${ storeName }...` ); - store.reset(); - store.persist(); + try { + store.reset(); + store.persist(); + } catch ( error ) { + console.error( ' ... Reset failed, skipping this store' ); + } } ); }; From de71c31bc6a2a9aec8db0b7014cc53b0b5918d02 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Tue, 28 Jan 2025 18:33:50 +0100 Subject: [PATCH 03/12] =?UTF-8?q?=F0=9F=A7=91=E2=80=8D=F0=9F=92=BB=20Expos?= =?UTF-8?q?e=20debubg=20API=20in=20new=20object?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ppcp-settings/resources/js/data/debug.js | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/modules/ppcp-settings/resources/js/data/debug.js b/modules/ppcp-settings/resources/js/data/debug.js index e9bd1295e..91adebb3c 100644 --- a/modules/ppcp-settings/resources/js/data/debug.js +++ b/modules/ppcp-settings/resources/js/data/debug.js @@ -13,13 +13,15 @@ export const addDebugTools = ( context, modules ) => { } /* - // TODO - enable this condition for version 3.0.1 - // In version 3.0.0 we want to have the debug tools available on every installation - if ( ! context.debug ) { return } - */ + // TODO - enable this condition for version 3.0.1 + // In version 3.0.0 we want to have the debug tools available on every installation + if ( ! context.debug ) { return } + */ + + const debugApi = ( window.ppcpDebugger = window.ppcpDebugger || {} ); // Dump the current state of all our Redux stores. - context.dumpStore = async () => { + debugApi.dumpStore = async () => { /* eslint-disable no-console */ if ( ! console?.groupCollapsed ) { console.error( 'console.groupCollapsed is not supported.' ); @@ -47,7 +49,7 @@ export const addDebugTools = ( context, modules ) => { }; // Reset all Redux stores to their initial state. - context.resetStore = () => { + debugApi.resetStore = () => { const stores = []; const { isConnected } = wp.data.select( CommonStoreName ).merchant(); @@ -85,7 +87,7 @@ export const addDebugTools = ( context, modules ) => { }; // Disconnect the merchant and display the onboarding wizard. - context.disconnect = () => { + debugApi.disconnect = () => { const common = wp.data.dispatch( CommonStoreName ); common.disconnectMerchant(); @@ -97,10 +99,13 @@ export const addDebugTools = ( context, modules ) => { }; // Enters or completes the onboarding wizard without changing anything else. - context.onboardingMode = ( state ) => { + debugApi.onboardingMode = ( state ) => { const onboarding = wp.data.dispatch( OnboardingStoreName ); onboarding.setCompleted( ! state ); onboarding.persist(); }; + + // Expose original debug API. + Object.assign( context, debugApi ); }; From c50a1c30abf1273cc4b59a6f7abd753c62856fd3 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Tue, 28 Jan 2025 18:43:21 +0100 Subject: [PATCH 04/12] =?UTF-8?q?=F0=9F=9A=9A=20Rename=20custom=20icon=20c?= =?UTF-8?q?omponents?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../js/Components/ReusableComponents/Icons/GenericIcon.js | 0 .../Icons/{logo-paypal.js => LogoPayPal.js} | 4 ++-- .../Icons/{open-signup.js => OpenSignup.js} | 4 ++-- .../resources/js/Components/ReusableComponents/Icons/index.js | 4 ++-- .../Screens/Onboarding/Components/ConnectionButton.js | 4 ++-- .../Screens/Onboarding/Components/OnboardingHeader.js | 4 ++-- 6 files changed, 10 insertions(+), 10 deletions(-) create mode 100644 modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/GenericIcon.js rename modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/{logo-paypal.js => LogoPayPal.js} (98%) rename modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/{open-signup.js => OpenSignup.js} (97%) diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/GenericIcon.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/GenericIcon.js new file mode 100644 index 000000000..e69de29bb diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/logo-paypal.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/LogoPayPal.js similarity index 98% rename from modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/logo-paypal.js rename to modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/LogoPayPal.js index fec3f38a3..f1802d549 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/logo-paypal.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/LogoPayPal.js @@ -1,6 +1,6 @@ import { SVG, Path } from '@wordpress/primitives'; -const logoPayPal = ( +const LogoPayPal = ( ); -export default logoPayPal; +export default LogoPayPal; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/open-signup.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/OpenSignup.js similarity index 97% rename from modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/open-signup.js rename to modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/OpenSignup.js index 8e8daa32b..2f5bcc629 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/open-signup.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/OpenSignup.js @@ -1,9 +1,9 @@ import { SVG, Path } from '@wordpress/primitives'; -const openSignup = ( +const OpenSignup = ( ); -export default openSignup; +export default OpenSignup; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/index.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/index.js index 005d1bc58..f79e4c987 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/index.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/index.js @@ -1,5 +1,5 @@ -export { default as openSignup } from './open-signup'; -export { default as logoPayPal } from './logo-paypal'; +export { default as OpenSignup } from './OpenSignup'; +export { default as LogoPayPal } from './LogoPayPal'; export const NOTIFICATION_SUCCESS = '✔️'; export const NOTIFICATION_ERROR = '❌'; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/ConnectionButton.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/ConnectionButton.js index 36ab8e197..29434f344 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/ConnectionButton.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/ConnectionButton.js @@ -1,7 +1,7 @@ import { Button } from '@wordpress/components'; import { useEffect } from '@wordpress/element'; import classNames from 'classnames'; -import { openSignup } from '../../../ReusableComponents/Icons'; +import { OpenSignup } from '../../../ReusableComponents/Icons'; import { useHandleOnboardingButton } from '../../../../hooks/useHandleConnections'; import BusyStateWrapper from '../../../ReusableComponents/BusyStateWrapper'; @@ -27,7 +27,7 @@ const ButtonOrPlaceholder = ( { const buttonProps = { className, variant, - icon: showIcon ? openSignup : null, + icon: showIcon ? OpenSignup : null, }; if ( href ) { diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/OnboardingHeader.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/OnboardingHeader.js index 638af4704..47acf2895 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/OnboardingHeader.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/OnboardingHeader.js @@ -1,13 +1,13 @@ import { Icon } from '@wordpress/components'; -import { logoPayPal } from '../../../ReusableComponents/Icons'; +import { LogoPayPal } from '../../../ReusableComponents/Icons'; const OnboardingHeader = ( props ) => { return (
- +
From 235ff308f5a48682ff164f1967469b2d4984da4c Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Tue, 28 Jan 2025 18:43:43 +0100 Subject: [PATCH 05/12] =?UTF-8?q?=E2=9C=A8=20New=20generic=20icon=20to=20r?= =?UTF-8?q?eplace=20data().getImage()?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ReusableComponents/Icons/GenericIcon.js | 15 +++++++++++++++ .../Components/ReusableComponents/Icons/index.js | 1 + 2 files changed, 16 insertions(+) diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/GenericIcon.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/GenericIcon.js index e69de29bb..1b5e0a184 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/GenericIcon.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/GenericIcon.js @@ -0,0 +1,15 @@ +import React from 'react'; + +const GenericIcon = ( { imageName, className = '', alt = '' } ) => { + const pathToImages = global.ppcpSettings.assets.imagesUrl; + + return ( + { + ); +}; + +export default GenericIcon; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/index.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/index.js index f79e4c987..5519a99d7 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/index.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/index.js @@ -1,3 +1,4 @@ +export { default as PPIcon } from './GenericIcon'; export { default as OpenSignup } from './OpenSignup'; export { default as LogoPayPal } from './LogoPayPal'; From e1c57bd35e2232213dc1d988703a535d38044313 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Tue, 28 Jan 2025 18:51:12 +0100 Subject: [PATCH 06/12] =?UTF-8?q?=F0=9F=A9=B9=20Fix=20several=20React=20wa?= =?UTF-8?q?rnings?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../js/Components/ReusableComponents/BadgeBox.js | 10 ++++++++-- .../ReusableComponents/Fields/OptionSelector.js | 4 +++- .../Screens/Onboarding/Components/OnboardingHeader.js | 2 +- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/BadgeBox.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/BadgeBox.js index 337e5626c..b044e7087 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/BadgeBox.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/BadgeBox.js @@ -1,4 +1,4 @@ -import data from '../../utils/data'; +import { PPIcon } from './Icons'; const ImageBadge = ( { images } ) => { if ( ! images || ! images.length ) { @@ -8,7 +8,13 @@ const ImageBadge = ( { images } ) => { return ( - { images.map( ( badge ) => data().getImage( badge ) ) } + { images.map( ( badge, index ) => ( + + ) ) } ); diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/OptionSelector.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/OptionSelector.js index e4327273f..7faf68a0c 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/OptionSelector.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/OptionSelector.js @@ -65,7 +65,9 @@ const OptionItem = ( {
{ itemTitle } -

{ itemDescription }

+
+ { itemDescription } +
{ children && (
{ children }
) } diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/OnboardingHeader.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/OnboardingHeader.js index 47acf2895..349eadd80 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/OnboardingHeader.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/OnboardingHeader.js @@ -7,7 +7,7 @@ const OnboardingHeader = ( props ) => {
- +
From 2380892b652a7a7c5c364c8daed1a4906c87f98e Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Tue, 28 Jan 2025 18:52:02 +0100 Subject: [PATCH 07/12] =?UTF-8?q?=F0=9F=90=9B=20Hide=20top-navigtation=20a?= =?UTF-8?q?ctions=20on=20welcome=20screen?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Onboarding/Components/Navigation.js | 34 ++++++++++++++++--- 1 file changed, 30 insertions(+), 4 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js index 52d496b33..9d4bcd0a1 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js @@ -21,9 +21,37 @@ const OnboardingNavigation = ( { stepDetails, onNext, onPrev } ) => { showProgressBar={ true } progressBarPercent={ percentage * 0.9 } > - + { showNext && ( ) } - + ); }; - -export default OnboardingNavigation; From 8bd0743183e9f0be9366b8e658a168e5f3312579 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Tue, 28 Jan 2025 19:03:30 +0100 Subject: [PATCH 08/12] =?UTF-8?q?=E2=9C=A8=20Prepare=20a=20sub-navigation?= =?UTF-8?q?=20slot=20for=20the=20top-nav?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reusable-components/_navigation.scss | 10 ++- .../ReusableComponents/TopNavigation.js | 61 +++++++++++-------- 2 files changed, 44 insertions(+), 27 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 a4695e256..fdcbcaa40 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss @@ -1,10 +1,12 @@ +$margin_bottom: 48px; + .ppcp-r-navigation-container { position: sticky; top: var(--wp-admin--admin-bar--height); z-index: 10; padding: 10px 48px; - margin: 0 -20px 48px -20px; + margin: 0 -20px #{$margin_bottom} -20px; box-shadow: 0 -1px 0 0 $color-gray-300 inset; background: var(--ppcp-color-app-bg); @@ -83,6 +85,12 @@ box-shadow: 0 -1px 0 0 $color-gray-300 inset, 0 8px 8px 0 rgba(85, 93, 102, .3); } + + .ppcp--top-sub-navigation { + position: relative; + margin: -#{$margin_bottom } -20px #{$margin_bottom}; + padding: 24px 20px 0; + } + @media screen and (max-width: 782px) { padding: 10px 12px; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js index bbffaaaa5..d456c4e4a 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js @@ -15,6 +15,7 @@ const TopNavigation = ( { onTitleClick = null, showProgressBar = false, progressBarPercent = 0, + subNavigation = null, } ) => { const { goToWooCommercePaymentsTab } = useNavigation(); const { isScrolled } = useIsScrolled(); @@ -40,35 +41,43 @@ const TopNavigation = ( { }, [] ); return ( -
-
- - - + + - - { children } - + + { children } + - { showProgressBar && ( - - ) } -
-
+ { showProgressBar && ( + + ) } +
+ + + { subNavigation && ( +
+ { subNavigation } +
+ ) } + ); }; From ffa869fce4d874e3cdd2ffe6c109f3b1b647b878 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Wed, 29 Jan 2025 17:10:27 +0100 Subject: [PATCH 09/12] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Change=20TabNavigati?= =?UTF-8?q?on=20to=20generic=20=E2=80=9CsubNavigation=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ReusableComponents/TopNavigation.js | 72 ++++++++----------- .../Screens/Settings/Components/Navigation.js | 11 ++- 2 files changed, 36 insertions(+), 47 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js index 635a2969f..26613f574 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js @@ -6,7 +6,6 @@ import classNames from 'classnames'; import useIsScrolled from '../../hooks/useIsScrolled'; import { useNavigation } from '../../hooks/useNavigation'; import BusyStateWrapper from './BusyStateWrapper'; -import TabNavigation from './TabNavigation'; const TopNavigation = ( { title, @@ -17,9 +16,6 @@ const TopNavigation = ( { showProgressBar = false, progressBarPercent = 0, subNavigation = null, - tabs = [], - activePanel = '', - setActivePanel = () => {}, } ) => { const { goToWooCommercePaymentsTab } = useNavigation(); const { isScrolled } = useIsScrolled(); @@ -48,50 +44,38 @@ const TopNavigation = ( { <> + { showProgressBar && ( + + ) } - { subNavigation && ( -
- { subNavigation } -
- ) } + { subNavigation && ( +
+ { subNavigation } +
+ ) } + ); }; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Navigation.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Navigation.js index 7fdba20d1..0bcc96288 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Navigation.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Navigation.js @@ -3,6 +3,7 @@ import { __ } from '@wordpress/i18n'; import TopNavigation from '../../../ReusableComponents/TopNavigation'; import { useSaveSettings } from '../../../../hooks/useSaveSettings'; +import TabNavigation from '../../../ReusableComponents/TabNavigation'; const SettingsNavigation = ( { canSave = true, @@ -18,9 +19,13 @@ const SettingsNavigation = ( { + } > { canSave && (
- { showProgressBar && ( - - ) } { subNavigation && (
{ subNavigation }
) } + + { showProgressBar && ( + + ) } );