From 9234975178f41aee3bb52ed08a96d6978451857c Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Fri, 10 Jan 2025 13:13:49 +0100 Subject: [PATCH 01/16] =?UTF-8?q?=F0=9F=9A=9A=20Move=20onboarding=20header?= =?UTF-8?q?=20to=20onboarding=20screen?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Onboarding/Components}/OnboardingHeader.js | 8 +++++--- .../js/Components/Screens/Onboarding/StepBusiness.js | 2 +- .../js/Components/Screens/Onboarding/StepCompleteSetup.js | 2 +- .../Components/Screens/Onboarding/StepPaymentMethods.js | 2 +- .../js/Components/Screens/Onboarding/StepProducts.js | 2 +- .../js/Components/Screens/Onboarding/StepWelcome.js | 2 +- 6 files changed, 10 insertions(+), 8 deletions(-) rename modules/ppcp-settings/resources/js/Components/{ReusableComponents => Screens/Onboarding/Components}/OnboardingHeader.js (73%) diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/OnboardingHeader.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/OnboardingHeader.js similarity index 73% rename from modules/ppcp-settings/resources/js/Components/ReusableComponents/OnboardingHeader.js rename to modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/OnboardingHeader.js index 80fce1971..836c5645b 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/OnboardingHeader.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/OnboardingHeader.js @@ -1,4 +1,4 @@ -import data from '../../utils/data'; +import data from '../../../../utils/data'; const OnboardingHeader = ( props ) => { return ( @@ -14,8 +14,10 @@ const OnboardingHeader = ( props ) => { { props.description && (

) } 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 dd9a1dcd5..3c863611e 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js @@ -1,6 +1,6 @@ import { __ } from '@wordpress/i18n'; -import OnboardingHeader from '../../ReusableComponents/OnboardingHeader'; +import OnboardingHeader from './Components/OnboardingHeader'; import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper'; import SelectBox from '../../ReusableComponents/SelectBox'; import { OnboardingHooks, BUSINESS_TYPES } from '../../../data'; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepCompleteSetup.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepCompleteSetup.js index ed2001ac2..ee522abf1 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepCompleteSetup.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepCompleteSetup.js @@ -1,6 +1,6 @@ import { __ } from '@wordpress/i18n'; -import OnboardingHeader from '../../ReusableComponents/OnboardingHeader'; +import OnboardingHeader from './Components/OnboardingHeader'; import ConnectionButton from './Components/ConnectionButton'; const StepCompleteSetup = () => { diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepPaymentMethods.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepPaymentMethods.js index ac56180a3..0e724a49c 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepPaymentMethods.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepPaymentMethods.js @@ -1,7 +1,7 @@ import { __ } from '@wordpress/i18n'; import { CommonHooks, OnboardingHooks } from '../../../data'; -import OnboardingHeader from '../../ReusableComponents/OnboardingHeader'; +import OnboardingHeader from './Components/OnboardingHeader'; import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper'; import SelectBox from '../../ReusableComponents/SelectBox'; import OptionalPaymentMethods from '../../ReusableComponents/OptionalPaymentMethods/OptionalPaymentMethods'; 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 ee99f4acf..d42480656 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepProducts.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepProducts.js @@ -1,6 +1,6 @@ import { __ } from '@wordpress/i18n'; -import OnboardingHeader from '../../ReusableComponents/OnboardingHeader'; +import OnboardingHeader from './Components/OnboardingHeader'; import SelectBox from '../../ReusableComponents/SelectBox'; import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper'; import { OnboardingHooks, PRODUCT_TYPES } from '../../../data'; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js index f9b7ddea4..0250ac40b 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js @@ -1,7 +1,7 @@ import { __ } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; -import OnboardingHeader from '../../ReusableComponents/OnboardingHeader'; +import OnboardingHeader from './Components/OnboardingHeader'; import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons'; import Separator from '../../ReusableComponents/Separator'; import WelcomeDocs from '../../ReusableComponents/WelcomeDocs/WelcomeDocs'; From efa4ca1a43063de6d8c42a806202dee59881a992 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Fri, 10 Jan 2025 13:15:11 +0100 Subject: [PATCH 02/16] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Convert=20SVG=20logo?= =?UTF-8?q?=20to=20Icon=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- modules/ppcp-settings/images/logo-paypal.svg | 8 -------- .../js/Components/ReusableComponents/Icons.js | 2 ++ .../ReusableComponents/Icons/logo-paypal.js | 12 ++++++++++++ .../ReusableComponents/Icons/open-signup.js | 3 --- .../Onboarding/Components/OnboardingHeader.js | 6 ++++-- 5 files changed, 18 insertions(+), 13 deletions(-) delete mode 100644 modules/ppcp-settings/images/logo-paypal.svg create mode 100644 modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/logo-paypal.js diff --git a/modules/ppcp-settings/images/logo-paypal.svg b/modules/ppcp-settings/images/logo-paypal.svg deleted file mode 100644 index 93109cac9..000000000 --- a/modules/ppcp-settings/images/logo-paypal.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons.js index ddf3606dc..9a6c62a8f 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons.js @@ -1,3 +1,5 @@ export { default as openSignup } from './Icons/open-signup'; +export { default as logoPayPal } from './Icons/logo-paypal'; + export const NOTIFICATION_SUCCESS = '✔️'; export const NOTIFICATION_ERROR = '❌'; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/logo-paypal.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/logo-paypal.js new file mode 100644 index 000000000..fec3f38a3 --- /dev/null +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/logo-paypal.js @@ -0,0 +1,12 @@ +import { SVG, Path } from '@wordpress/primitives'; + +const 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/open-signup.js index 83c792f22..8e8daa32b 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/open-signup.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/open-signup.js @@ -1,6 +1,3 @@ -/** - * WordPress dependencies - */ import { SVG, Path } from '@wordpress/primitives'; const openSignup = ( 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 836c5645b..638af4704 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,11 +1,13 @@ -import data from '../../../../utils/data'; +import { Icon } from '@wordpress/components'; + +import { logoPayPal } from '../../../ReusableComponents/Icons'; const OnboardingHeader = ( props ) => { return (
- { data().getImage( 'logo-paypal.svg' ) } +
From e7fa7784ec8109ca07d497e56f2dabac18295734 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Fri, 10 Jan 2025 13:24:14 +0100 Subject: [PATCH 03/16] =?UTF-8?q?=F0=9F=9A=9A=20Move=20onboarding=20compon?= =?UTF-8?q?ents=20to=20onboarding=20dir?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Onboarding/Components}/AcdcFlow.js | 14 +++++++------- .../Components}/AcdcOptionalPaymentMethods.js | 6 +++--- .../Onboarding/Components}/BcdcFlow.js | 10 ++++++---- .../Components}/BcdcOptionalPaymentMethods.js | 4 ++-- .../Components}/OptionalPaymentMethods.js | 0 .../Onboarding/Components}/WelcomeDocs.js | 2 +- .../Components/Screens/Onboarding/StepBusiness.js | 2 +- .../Screens/Onboarding/StepPaymentMethods.js | 4 ++-- .../Components/Screens/Onboarding/StepProducts.js | 2 +- .../Components/Screens/Onboarding/StepWelcome.js | 5 ++--- 10 files changed, 25 insertions(+), 24 deletions(-) rename modules/ppcp-settings/resources/js/Components/{ReusableComponents/WelcomeDocs => Screens/Onboarding/Components}/AcdcFlow.js (95%) rename modules/ppcp-settings/resources/js/Components/{ReusableComponents/OptionalPaymentMethods => Screens/Onboarding/Components}/AcdcOptionalPaymentMethods.js (97%) rename modules/ppcp-settings/resources/js/Components/{ReusableComponents/WelcomeDocs => Screens/Onboarding/Components}/BcdcFlow.js (95%) rename modules/ppcp-settings/resources/js/Components/{ReusableComponents/OptionalPaymentMethods => Screens/Onboarding/Components}/BcdcOptionalPaymentMethods.js (92%) rename modules/ppcp-settings/resources/js/Components/{ReusableComponents/OptionalPaymentMethods => Screens/Onboarding/Components}/OptionalPaymentMethods.js (100%) rename modules/ppcp-settings/resources/js/Components/{ReusableComponents/WelcomeDocs => Screens/Onboarding/Components}/WelcomeDocs.js (89%) diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/AcdcFlow.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AcdcFlow.js similarity index 95% rename from modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/AcdcFlow.js rename to modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AcdcFlow.js index 3f4a6ff02..fbcce879c 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/AcdcFlow.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AcdcFlow.js @@ -1,9 +1,11 @@ import { __, sprintf } from '@wordpress/i18n'; -import BadgeBox, { BADGE_BOX_TITLE_BIG } from '../BadgeBox'; -import Separator from '../Separator'; -import OptionalPaymentMethods from '../OptionalPaymentMethods/OptionalPaymentMethods'; -import PricingTitleBadge from '../PricingTitleBadge'; +import BadgeBox, { + BADGE_BOX_TITLE_BIG, +} from '../../../ReusableComponents/BadgeBox'; +import Separator from '../../../ReusableComponents/Separator'; +import PricingTitleBadge from '../../../ReusableComponents/PricingTitleBadge'; +import OptionalPaymentMethods from './OptionalPaymentMethods'; const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => { if ( isFastlane && isPayLater && storeCountry === 'US' ) { @@ -53,9 +55,7 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => { imageBadge={ [ 'icon-payment-method-paypal-small.svg', ] } - textBadge={ - - } + textBadge={ } description={ sprintf( // translators: %s: Link to PayPal business fees guide __( diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/AcdcOptionalPaymentMethods.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AcdcOptionalPaymentMethods.js similarity index 97% rename from modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/AcdcOptionalPaymentMethods.js rename to modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AcdcOptionalPaymentMethods.js index 6066ac470..836c85689 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/AcdcOptionalPaymentMethods.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AcdcOptionalPaymentMethods.js @@ -1,8 +1,8 @@ import { __, sprintf } from '@wordpress/i18n'; -import BadgeBox from '../BadgeBox'; -import Separator from '../Separator'; -import PricingTitleBadge from '../PricingTitleBadge'; +import BadgeBox from '../../../ReusableComponents/BadgeBox'; +import Separator from '../../../ReusableComponents/Separator'; +import PricingTitleBadge from '../../../ReusableComponents/PricingTitleBadge'; const AcdcOptionalPaymentMethods = ( { isFastlane, diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/BcdcFlow.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/BcdcFlow.js similarity index 95% rename from modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/BcdcFlow.js rename to modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/BcdcFlow.js index 591412be3..eb7e30560 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/BcdcFlow.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/BcdcFlow.js @@ -1,9 +1,11 @@ import { __, sprintf } from '@wordpress/i18n'; -import BadgeBox, { BADGE_BOX_TITLE_BIG } from '../BadgeBox'; -import Separator from '../Separator'; -import OptionalPaymentMethods from '../OptionalPaymentMethods/OptionalPaymentMethods'; -import PricingTitleBadge from '../PricingTitleBadge'; +import BadgeBox, { + BADGE_BOX_TITLE_BIG, +} from '../../../ReusableComponents/BadgeBox'; +import Separator from '../../../ReusableComponents/Separator'; +import PricingTitleBadge from '../../../ReusableComponents/PricingTitleBadge'; +import OptionalPaymentMethods from './OptionalPaymentMethods'; const BcdcFlow = ( { isPayLater, storeCountry } ) => { if ( isPayLater && storeCountry === 'US' ) { diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/BcdcOptionalPaymentMethods.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/BcdcOptionalPaymentMethods.js similarity index 92% rename from modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/BcdcOptionalPaymentMethods.js rename to modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/BcdcOptionalPaymentMethods.js index 4307636e2..e2ed9978b 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/BcdcOptionalPaymentMethods.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/BcdcOptionalPaymentMethods.js @@ -1,7 +1,7 @@ import { __, sprintf } from '@wordpress/i18n'; -import BadgeBox from '../BadgeBox'; -import PricingTitleBadge from '../PricingTitleBadge'; +import BadgeBox from '../../../ReusableComponents/BadgeBox'; +import PricingTitleBadge from '../../../ReusableComponents/PricingTitleBadge'; const BcdcOptionalPaymentMethods = ( { isPayLater, storeCountry } ) => { if ( isPayLater && storeCountry === 'us' ) { diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/OptionalPaymentMethods.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/OptionalPaymentMethods.js similarity index 100% rename from modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/OptionalPaymentMethods.js rename to modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/OptionalPaymentMethods.js diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/WelcomeDocs.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/WelcomeDocs.js similarity index 89% rename from modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/WelcomeDocs.js rename to modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/WelcomeDocs.js index cb8d2fe7b..c5c4d9efd 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/WelcomeDocs.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/WelcomeDocs.js @@ -1,6 +1,6 @@ import { __ } from '@wordpress/i18n'; -import PricingDescription from '../PricingDescription'; +import PricingDescription from '../../../ReusableComponents/PricingDescription'; import AcdcFlow from './AcdcFlow'; import BcdcFlow from './BcdcFlow'; 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 3c863611e..f69c269fc 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js @@ -1,9 +1,9 @@ import { __ } from '@wordpress/i18n'; -import OnboardingHeader from './Components/OnboardingHeader'; import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper'; import SelectBox from '../../ReusableComponents/SelectBox'; import { OnboardingHooks, BUSINESS_TYPES } from '../../../data'; +import OnboardingHeader from './Components/OnboardingHeader'; const BUSINESS_RADIO_GROUP_NAME = 'business'; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepPaymentMethods.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepPaymentMethods.js index 0e724a49c..2d1935760 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepPaymentMethods.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepPaymentMethods.js @@ -1,11 +1,11 @@ import { __ } from '@wordpress/i18n'; import { CommonHooks, OnboardingHooks } from '../../../data'; -import OnboardingHeader from './Components/OnboardingHeader'; import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper'; import SelectBox from '../../ReusableComponents/SelectBox'; -import OptionalPaymentMethods from '../../ReusableComponents/OptionalPaymentMethods/OptionalPaymentMethods'; import PricingDescription from '../../ReusableComponents/PricingDescription'; +import OnboardingHeader from './Components/OnboardingHeader'; +import OptionalPaymentMethods from './Components/OptionalPaymentMethods'; const OPM_RADIO_GROUP_NAME = 'optional-payment-methods'; 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 d42480656..bbb85335a 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepProducts.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepProducts.js @@ -1,9 +1,9 @@ import { __ } from '@wordpress/i18n'; -import OnboardingHeader from './Components/OnboardingHeader'; import SelectBox from '../../ReusableComponents/SelectBox'; import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper'; import { OnboardingHooks, PRODUCT_TYPES } from '../../../data'; +import OnboardingHeader from './Components/OnboardingHeader'; const PRODUCTS_CHECKBOX_GROUP_NAME = 'products'; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js index 0250ac40b..93f52d96d 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js @@ -1,12 +1,11 @@ import { __ } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; -import OnboardingHeader from './Components/OnboardingHeader'; import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons'; import Separator from '../../ReusableComponents/Separator'; -import WelcomeDocs from '../../ReusableComponents/WelcomeDocs/WelcomeDocs'; import AccordionSection from '../../ReusableComponents/AccordionSection'; - +import OnboardingHeader from './Components/OnboardingHeader'; +import WelcomeDocs from './Components/WelcomeDocs'; import AdvancedOptionsForm from './Components/AdvancedOptionsForm'; import { CommonHooks } from '../../../data'; import BusyStateWrapper from '../../ReusableComponents/BusyStateWrapper'; From 0fb039d8cef5025a91bb205e187a2ab7e190f087 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Fri, 10 Jan 2025 13:30:06 +0100 Subject: [PATCH 04/16] =?UTF-8?q?=F0=9F=9A=9A=20Organize=20onboarding=20co?= =?UTF-8?q?mponents?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../js/Components/ReusableComponents/Icons.js | 5 ----- .../Components/ReusableComponents/Icons/index.js | 5 +++++ .../Components/Screens/Onboarding/Onboarding.js | 2 +- .../Onboarding/{ => Steps}/StepBusiness.js | 8 ++++---- .../Onboarding/{ => Steps}/StepCompleteSetup.js | 4 ++-- .../Onboarding/{ => Steps}/StepPaymentMethods.js | 12 ++++++------ .../Onboarding/{ => Steps}/StepProducts.js | 8 ++++---- .../Onboarding/{ => Steps}/StepWelcome.js | 16 ++++++++-------- .../{availableSteps.js => Steps/index.js} | 0 9 files changed, 30 insertions(+), 30 deletions(-) delete mode 100644 modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons.js create mode 100644 modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/index.js rename modules/ppcp-settings/resources/js/Components/Screens/Onboarding/{ => Steps}/StepBusiness.js (87%) rename modules/ppcp-settings/resources/js/Components/Screens/Onboarding/{ => Steps}/StepCompleteSetup.js (86%) rename modules/ppcp-settings/resources/js/Components/Screens/Onboarding/{ => Steps}/StepPaymentMethods.js (80%) rename modules/ppcp-settings/resources/js/Components/Screens/Onboarding/{ => Steps}/StepProducts.js (91%) rename modules/ppcp-settings/resources/js/Components/Screens/Onboarding/{ => Steps}/StepWelcome.js (83%) rename modules/ppcp-settings/resources/js/Components/Screens/Onboarding/{availableSteps.js => Steps/index.js} (100%) diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons.js deleted file mode 100644 index 9a6c62a8f..000000000 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons.js +++ /dev/null @@ -1,5 +0,0 @@ -export { default as openSignup } from './Icons/open-signup'; -export { default as logoPayPal } from './Icons/logo-paypal'; - -export const NOTIFICATION_SUCCESS = '✔️'; -export const NOTIFICATION_ERROR = '❌'; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/index.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/index.js new file mode 100644 index 000000000..005d1bc58 --- /dev/null +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/index.js @@ -0,0 +1,5 @@ +export { default as openSignup } from './open-signup'; +export { default as logoPayPal } from './logo-paypal'; + +export const NOTIFICATION_SUCCESS = '✔️'; +export const NOTIFICATION_ERROR = '❌'; 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 225527053..d770dafb1 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js @@ -1,7 +1,7 @@ import Container from '../../ReusableComponents/Container'; import { OnboardingHooks } from '../../../data'; -import { getSteps, getCurrentStep } from './availableSteps'; +import { getSteps, getCurrentStep } from './Steps'; import Navigation from './Components/Navigation'; const Onboarding = () => { diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepBusiness.js similarity index 87% rename from modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js rename to modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepBusiness.js index f69c269fc..d6e7af60e 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepBusiness.js @@ -1,9 +1,9 @@ import { __ } from '@wordpress/i18n'; -import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper'; -import SelectBox from '../../ReusableComponents/SelectBox'; -import { OnboardingHooks, BUSINESS_TYPES } from '../../../data'; -import OnboardingHeader from './Components/OnboardingHeader'; +import SelectBoxWrapper from '../../../ReusableComponents/SelectBoxWrapper'; +import SelectBox from '../../../ReusableComponents/SelectBox'; +import { OnboardingHooks, BUSINESS_TYPES } from '../../../../data'; +import OnboardingHeader from '../Components/OnboardingHeader'; const BUSINESS_RADIO_GROUP_NAME = 'business'; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepCompleteSetup.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepCompleteSetup.js similarity index 86% rename from modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepCompleteSetup.js rename to modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepCompleteSetup.js index ee522abf1..8c2fed3f0 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepCompleteSetup.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepCompleteSetup.js @@ -1,7 +1,7 @@ import { __ } from '@wordpress/i18n'; -import OnboardingHeader from './Components/OnboardingHeader'; -import ConnectionButton from './Components/ConnectionButton'; +import OnboardingHeader from '../Components/OnboardingHeader'; +import ConnectionButton from '../Components/ConnectionButton'; const StepCompleteSetup = () => { return ( diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepPaymentMethods.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepPaymentMethods.js similarity index 80% rename from modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepPaymentMethods.js rename to modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepPaymentMethods.js index 2d1935760..6db3c5473 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepPaymentMethods.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepPaymentMethods.js @@ -1,11 +1,11 @@ import { __ } from '@wordpress/i18n'; -import { CommonHooks, OnboardingHooks } from '../../../data'; -import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper'; -import SelectBox from '../../ReusableComponents/SelectBox'; -import PricingDescription from '../../ReusableComponents/PricingDescription'; -import OnboardingHeader from './Components/OnboardingHeader'; -import OptionalPaymentMethods from './Components/OptionalPaymentMethods'; +import { CommonHooks, OnboardingHooks } from '../../../../data'; +import SelectBoxWrapper from '../../../ReusableComponents/SelectBoxWrapper'; +import SelectBox from '../../../ReusableComponents/SelectBox'; +import PricingDescription from '../../../ReusableComponents/PricingDescription'; +import OnboardingHeader from '../Components/OnboardingHeader'; +import OptionalPaymentMethods from '../Components/OptionalPaymentMethods'; const OPM_RADIO_GROUP_NAME = 'optional-payment-methods'; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepProducts.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepProducts.js similarity index 91% rename from modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepProducts.js rename to modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepProducts.js index bbb85335a..f091d5162 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepProducts.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepProducts.js @@ -1,9 +1,9 @@ import { __ } from '@wordpress/i18n'; -import SelectBox from '../../ReusableComponents/SelectBox'; -import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper'; -import { OnboardingHooks, PRODUCT_TYPES } from '../../../data'; -import OnboardingHeader from './Components/OnboardingHeader'; +import SelectBox from '../../../ReusableComponents/SelectBox'; +import SelectBoxWrapper from '../../../ReusableComponents/SelectBoxWrapper'; +import { OnboardingHooks, PRODUCT_TYPES } from '../../../../data'; +import OnboardingHeader from '../Components/OnboardingHeader'; const PRODUCTS_CHECKBOX_GROUP_NAME = 'products'; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepWelcome.js similarity index 83% rename from modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js rename to modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepWelcome.js index 93f52d96d..c115aabdc 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepWelcome.js @@ -1,14 +1,14 @@ import { __ } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; -import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons'; -import Separator from '../../ReusableComponents/Separator'; -import AccordionSection from '../../ReusableComponents/AccordionSection'; -import OnboardingHeader from './Components/OnboardingHeader'; -import WelcomeDocs from './Components/WelcomeDocs'; -import AdvancedOptionsForm from './Components/AdvancedOptionsForm'; -import { CommonHooks } from '../../../data'; -import BusyStateWrapper from '../../ReusableComponents/BusyStateWrapper'; +import PaymentMethodIcons from '../../../ReusableComponents/PaymentMethodIcons'; +import Separator from '../../../ReusableComponents/Separator'; +import AccordionSection from '../../../ReusableComponents/AccordionSection'; +import { CommonHooks } from '../../../../data'; +import BusyStateWrapper from '../../../ReusableComponents/BusyStateWrapper'; +import OnboardingHeader from '../Components/OnboardingHeader'; +import WelcomeDocs from '../Components/WelcomeDocs'; +import AdvancedOptionsForm from '../Components/AdvancedOptionsForm'; const StepWelcome = ( { setStep, currentStep } ) => { const { storeCountry } = CommonHooks.useWooSettings(); diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/availableSteps.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/index.js similarity index 100% rename from modules/ppcp-settings/resources/js/Components/Screens/Onboarding/availableSteps.js rename to modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/index.js From e6b2f1c1bfffdfcc249a8751bea664ad2a39f573 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Fri, 10 Jan 2025 13:38:47 +0100 Subject: [PATCH 05/16] =?UTF-8?q?=F0=9F=9A=9A=20Start=20organizing=20setti?= =?UTF-8?q?ngs-screen?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Screens/Onboarding/{Onboarding.js => index.js} | 4 ++-- .../resources/js/Components/Screens/Settings.js | 6 +++--- .../{ => Settings/Components}/SettingsNavigation.js | 0 .../Screens/{SettingsScreen.js => Settings/index.js} | 6 +++--- .../js/Components/Screens/{ => Settings}/tabs.js | 8 ++++---- 5 files changed, 12 insertions(+), 12 deletions(-) rename modules/ppcp-settings/resources/js/Components/Screens/Onboarding/{Onboarding.js => index.js} (93%) rename modules/ppcp-settings/resources/js/Components/Screens/{ => Settings/Components}/SettingsNavigation.js (100%) rename modules/ppcp-settings/resources/js/Components/Screens/{SettingsScreen.js => Settings/index.js} (60%) rename modules/ppcp-settings/resources/js/Components/Screens/{ => Settings}/tabs.js (75%) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/index.js similarity index 93% rename from modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js rename to modules/ppcp-settings/resources/js/Components/Screens/Onboarding/index.js index d770dafb1..a58062006 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/index.js @@ -4,7 +4,7 @@ import { OnboardingHooks } from '../../../data'; import { getSteps, getCurrentStep } from './Steps'; import Navigation from './Components/Navigation'; -const Onboarding = () => { +const OnboardingScreen = () => { const { step, setStep, flags } = OnboardingHooks.useSteps(); const Steps = getSteps( flags ); const currentStep = getCurrentStep( step, Steps ); @@ -37,4 +37,4 @@ const Onboarding = () => { ); }; -export default Onboarding; +export default OnboardingScreen; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings.js index bc79b34b3..dfcdfafcd 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings.js @@ -5,8 +5,8 @@ import classNames from 'classnames'; import { OnboardingHooks } from '../../data'; import SpinnerOverlay from '../ReusableComponents/SpinnerOverlay'; -import Onboarding from './Onboarding/Onboarding'; -import SettingsScreen from './SettingsScreen'; +import OnboardingScreen from './Onboarding'; +import SettingsScreen from './Settings'; const Settings = () => { const onboardingProgress = OnboardingHooks.useSteps(); @@ -39,7 +39,7 @@ const Settings = () => { } if ( ! onboardingProgress.completed ) { - return ; + return ; } return ; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/SettingsNavigation.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/SettingsNavigation.js similarity index 100% rename from modules/ppcp-settings/resources/js/Components/Screens/SettingsNavigation.js rename to modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/SettingsNavigation.js diff --git a/modules/ppcp-settings/resources/js/Components/Screens/SettingsScreen.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/index.js similarity index 60% rename from modules/ppcp-settings/resources/js/Components/Screens/SettingsScreen.js rename to modules/ppcp-settings/resources/js/Components/Screens/Settings/index.js index 88fa12924..bb1da88c4 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/SettingsScreen.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/index.js @@ -1,7 +1,7 @@ import { getSettingsTabs } from './tabs'; -import SettingsNavigation from './SettingsNavigation'; -import Container from '../ReusableComponents/Container'; -import TabNavigation from '../ReusableComponents/TabNavigation'; +import SettingsNavigation from './Components/SettingsNavigation'; +import Container from '../../ReusableComponents/Container'; +import TabNavigation from '../../ReusableComponents/TabNavigation'; const SettingsScreen = () => { const tabs = getSettingsTabs(); diff --git a/modules/ppcp-settings/resources/js/Components/Screens/tabs.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/tabs.js similarity index 75% rename from modules/ppcp-settings/resources/js/Components/Screens/tabs.js rename to modules/ppcp-settings/resources/js/Components/Screens/Settings/tabs.js index c2f3b25e6..09c117a96 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/tabs.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/tabs.js @@ -1,8 +1,8 @@ import { __ } from '@wordpress/i18n'; -import TabOverview from './Overview/TabOverview'; -import TabPaymentMethods from './Overview/TabPaymentMethods'; -import TabSettings from './Overview/TabSettings'; -import TabStyling from './Overview/TabStyling'; +import TabOverview from '../Overview/TabOverview'; +import TabPaymentMethods from '../Overview/TabPaymentMethods'; +import TabSettings from '../Overview/TabSettings'; +import TabStyling from '../Overview/TabStyling'; export const getSettingsTabs = () => { const tabs = []; From 9cd09c8dfa344eff751d18ac3f234b25ae890a30 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Fri, 10 Jan 2025 13:40:10 +0100 Subject: [PATCH 06/16] =?UTF-8?q?=F0=9F=9A=9A=20Prepare=20the=20=E2=80=9Ct?= =?UTF-8?q?abs=E2=80=9D=20folder=20for=20settings?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Screens/Settings/{tabs.js => Tabs/index.js} | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) rename modules/ppcp-settings/resources/js/Components/Screens/Settings/{tabs.js => Tabs/index.js} (74%) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/tabs.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/index.js similarity index 74% rename from modules/ppcp-settings/resources/js/Components/Screens/Settings/tabs.js rename to modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/index.js index 09c117a96..494a19082 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/tabs.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/index.js @@ -1,8 +1,9 @@ import { __ } from '@wordpress/i18n'; -import TabOverview from '../Overview/TabOverview'; -import TabPaymentMethods from '../Overview/TabPaymentMethods'; -import TabSettings from '../Overview/TabSettings'; -import TabStyling from '../Overview/TabStyling'; + +import TabOverview from '../../Overview/TabOverview'; +import TabPaymentMethods from '../../Overview/TabPaymentMethods'; +import TabSettings from '../../Overview/TabSettings'; +import TabStyling from '../../Overview/TabStyling'; export const getSettingsTabs = () => { const tabs = []; From db7e5e0dae9ad6a40af3f752d9211b58fca6b019 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Fri, 10 Jan 2025 13:57:53 +0100 Subject: [PATCH 07/16] =?UTF-8?q?=F0=9F=9A=9A=20Improve=20component=20orga?= =?UTF-8?q?nization?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- modules/ppcp-settings/resources/js/App.js | 8 ---- .../{Screens/Settings.js => App.js} | 13 +++--- .../ReusableComponents/TabNavigation.js | 4 +- .../Settings/Components/SettingsNavigation.js | 2 +- .../Components/Screens/Settings/Tabs/index.js | 42 ++++++++++--------- .../js/Components/Screens/Settings/index.js | 4 +- modules/ppcp-settings/resources/js/index.js | 2 +- 7 files changed, 34 insertions(+), 41 deletions(-) delete mode 100644 modules/ppcp-settings/resources/js/App.js rename modules/ppcp-settings/resources/js/Components/{Screens/Settings.js => App.js} (79%) diff --git a/modules/ppcp-settings/resources/js/App.js b/modules/ppcp-settings/resources/js/App.js deleted file mode 100644 index 33d0f94f4..000000000 --- a/modules/ppcp-settings/resources/js/App.js +++ /dev/null @@ -1,8 +0,0 @@ -import Settings from './Components/Screens/Settings'; -export function App() { - return ( -
- -
- ); -} diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings.js b/modules/ppcp-settings/resources/js/Components/App.js similarity index 79% rename from modules/ppcp-settings/resources/js/Components/Screens/Settings.js rename to modules/ppcp-settings/resources/js/Components/App.js index dfcdfafcd..1b08de16e 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings.js +++ b/modules/ppcp-settings/resources/js/Components/App.js @@ -2,13 +2,12 @@ import { useEffect, useMemo } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import classNames from 'classnames'; -import { OnboardingHooks } from '../../data'; -import SpinnerOverlay from '../ReusableComponents/SpinnerOverlay'; +import { OnboardingHooks } from '../data'; +import SpinnerOverlay from './ReusableComponents/SpinnerOverlay'; +import OnboardingScreen from './Screens/Onboarding'; +import SettingsScreen from './Screens/Settings'; -import OnboardingScreen from './Onboarding'; -import SettingsScreen from './Settings'; - -const Settings = () => { +const SettingsApp = () => { const onboardingProgress = OnboardingHooks.useSteps(); // Disable the "Changes you made might not be saved" browser warning. @@ -48,4 +47,4 @@ const Settings = () => { return
{ Content }
; }; -export default Settings; +export default SettingsApp; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/TabNavigation.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/TabNavigation.js index e6561f56f..0ae4e001e 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/TabNavigation.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/TabNavigation.js @@ -43,9 +43,7 @@ const TabNavigation = ( { tabs } ) => { onSelect={ updateActivePanel } tabs={ tabs } > - { ( tab ) => { - return tab.component || <>{ tab.title ?? tab.name }; - } } + { ( { Component } ) => Component } ); }; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/SettingsNavigation.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/SettingsNavigation.js index 5552dd177..8eb6b12c5 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/SettingsNavigation.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/SettingsNavigation.js @@ -1,6 +1,6 @@ import { Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import data from '../../utils/data'; +import data from '../../../../utils/data'; const SettingsNavigation = ( {} ) => { return ( diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/index.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/index.js index 494a19082..e6cecf11d 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/index.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/index.js @@ -5,32 +5,36 @@ import TabPaymentMethods from '../../Overview/TabPaymentMethods'; import TabSettings from '../../Overview/TabSettings'; import TabStyling from '../../Overview/TabStyling'; -export const getSettingsTabs = () => { - const tabs = []; - - tabs.push( { +/** + * List of all default settings tabs. + * + * The tabs are displayed in the order in which they appear in this array + * + * @type {[{name, title, Component}]} + */ +const DEFAULT_TABS = [ + { name: 'overview', title: __( 'Overview', 'woocommerce-paypal-payments' ), - component: , - } ); - - tabs.push( { + Component: , + }, + { name: 'payment-methods', title: __( 'Payment Methods', 'woocommerce-paypal-payments' ), - component: , - } ); - - tabs.push( { + Component: , + }, + { name: 'settings', title: __( 'Settings', 'woocommerce-paypal-payments' ), - component: , - } ); - - tabs.push( { + Component: , + }, + { name: 'styling', title: __( 'Styling', 'woocommerce-paypal-payments' ), - component: , - } ); + Component: , + }, +]; - return tabs; +export const getSettingsTabs = () => { + return DEFAULT_TABS; }; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/index.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/index.js index bb1da88c4..e84916b67 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/index.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/index.js @@ -1,7 +1,7 @@ -import { getSettingsTabs } from './tabs'; -import SettingsNavigation from './Components/SettingsNavigation'; import Container from '../../ReusableComponents/Container'; import TabNavigation from '../../ReusableComponents/TabNavigation'; +import { getSettingsTabs } from './Tabs'; +import SettingsNavigation from './Components/SettingsNavigation'; const SettingsScreen = () => { const tabs = getSettingsTabs(); diff --git a/modules/ppcp-settings/resources/js/index.js b/modules/ppcp-settings/resources/js/index.js index 6dfd70ed5..f044642ba 100644 --- a/modules/ppcp-settings/resources/js/index.js +++ b/modules/ppcp-settings/resources/js/index.js @@ -1,6 +1,6 @@ import React from 'react'; import { createRoot } from 'react-dom/client'; -import { App } from './App'; +import App from './Components/App'; createRoot( document.getElementById( 'ppcp-settings-container' ) ).render( From d588a9cd188d047ac50ca07ddacf76fb63f1d7b2 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Fri, 10 Jan 2025 15:12:57 +0100 Subject: [PATCH 08/16] =?UTF-8?q?=E2=9C=A8=20New=20reusable=20TopNavigatio?= =?UTF-8?q?n=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ReusableComponents/TopNavigation.js | 81 +++++++++++++++++++ .../resources/js/hooks/useNavigation.js | 10 +++ 2 files changed, 91 insertions(+) create mode 100644 modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js create mode 100644 modules/ppcp-settings/resources/js/hooks/useNavigation.js diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js new file mode 100644 index 000000000..60bd19641 --- /dev/null +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js @@ -0,0 +1,81 @@ +import { useCallback } from '@wordpress/element'; +import { Button, Icon } from '@wordpress/components'; +import { chevronLeft } from '@wordpress/icons'; +import classNames from 'classnames'; + +import useIsScrolled from '../../hooks/useIsScrolled'; +import { useNavigation } from '../../hooks/useNavigation'; +import BusyStateWrapper from './BusyStateWrapper'; + +const TopNavigation = ( { + title, + children, + isMainTitle = true, + exitOnTitleClick = false, + onTitleClick = null, + showProgressBar = false, + progressBarPercent = 0, +} ) => { + const { goToWooCommercePaymentsTab } = useNavigation(); + const { isScrolled } = useIsScrolled(); + + const className = classNames( 'ppcp-r-navigation-container', { + 'is-scrolled': isScrolled, + } ); + const titleClassName = classNames( 'title', { + big: isMainTitle, + } ); + + const handleTitleClick = useCallback( () => { + if ( exitOnTitleClick ) { + goToWooCommercePaymentsTab(); + } else if ( 'function' === typeof onTitleClick ) { + onTitleClick(); + } + }, [ exitOnTitleClick, goToWooCommercePaymentsTab, onTitleClick ] ); + + return ( +
+
+ + + + + + { children } + + + { showProgressBar && ( + + ) } +
+
+ ); +}; + +const ProgressBar = ( { percent } ) => { + percent = Math.min( Math.max( percent, 0 ), 100 ); + + return ( +
+ ); +}; + +export default TopNavigation; diff --git a/modules/ppcp-settings/resources/js/hooks/useNavigation.js b/modules/ppcp-settings/resources/js/hooks/useNavigation.js new file mode 100644 index 000000000..f477a0b91 --- /dev/null +++ b/modules/ppcp-settings/resources/js/hooks/useNavigation.js @@ -0,0 +1,10 @@ +/** + * Navigate to the WooCommerce "Payments" settings tab, i.e. exit the settings app. + */ +const goToWooCommercePaymentsTab = () => { + window.location.href = window.ppcpSettings.wcPaymentsTabUrl; +}; + +export const useNavigation = () => { + return { goToWooCommercePaymentsTab }; +}; From 47be154307295b6a1de69cd69a5d3459130e3f00 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Fri, 10 Jan 2025 15:14:15 +0100 Subject: [PATCH 09/16] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20Settings?= =?UTF-8?q?=20to=20use=20new=20TopNavigation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Settings/Components/SettingsNavigation.js | 39 +++++-------------- 1 file changed, 10 insertions(+), 29 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/SettingsNavigation.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/SettingsNavigation.js index 8eb6b12c5..f195ea1b1 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/SettingsNavigation.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/SettingsNavigation.js @@ -1,36 +1,17 @@ import { Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import data from '../../../../utils/data'; -const SettingsNavigation = ( {} ) => { +import TopNavigation from '../../../ReusableComponents/TopNavigation'; + +const SettingsNavigation = () => { + const title = __( 'PayPal Payments', 'woocommerce-paypal-payments' ); + return ( -
-
-
- { data().getImage( 'icon-arrow-left.svg' ) } - - { __( - 'PayPal Payments', - 'woocommerce-paypal-payments' - ) } - -
- { -
- -
- } -
-
+ + + ); }; From 0a5fb316c4cb763a5d8e97cd58db0d7c2b369489 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Fri, 10 Jan 2025 15:14:38 +0100 Subject: [PATCH 10/16] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20Onboardin?= =?UTF-8?q?g=20to=20use=20new=20TopNavigation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Onboarding/Components/Navigation.js | 68 ++++--------------- .../js/Components/Screens/Onboarding/index.js | 4 -- 2 files changed, 14 insertions(+), 58 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 817b26f3e..f03abb383 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 @@ -1,56 +1,27 @@ -import { Button, Icon } from '@wordpress/components'; -import { chevronLeft } from '@wordpress/icons'; +import { Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import classNames from 'classnames'; import { OnboardingHooks } from '../../../../data'; -import useIsScrolled from '../../../../hooks/useIsScrolled'; -import BusyStateWrapper from '../../../ReusableComponents/BusyStateWrapper'; +import { useNavigation } from '../../../../hooks/useNavigation'; +import TopNavigation from '../../../ReusableComponents/TopNavigation'; -const Navigation = ( { stepDetails, onNext, onPrev, onExit } ) => { +const Navigation = ( { stepDetails, onNext, onPrev } ) => { + const { goToWooCommercePaymentsTab } = useNavigation(); const { title, isFirst, percentage, showNext, canProceed } = stepDetails; - const { isScrolled } = useIsScrolled(); const state = OnboardingHooks.useNavigationState(); const isDisabled = ! canProceed( state ); - const className = classNames( 'ppcp-r-navigation-container', { - 'is-scrolled': isScrolled, - } ); return ( -
-
- - - - { ! isFirst && - NextButton( { showNext, isDisabled, onNext, onExit } ) } - -
-
- ); -}; - -const NextButton = ( { showNext, isDisabled, onNext, onExit } ) => { - return ( - - { showNext && ( @@ -62,18 +33,7 @@ const NextButton = ( { showNext, isDisabled, onNext, onExit } ) => { { __( 'Continue', 'woocommerce-paypal-payments' ) } ) } - - ); -}; - -const ProgressBar = ( { percent } ) => { - percent = Math.min( Math.max( percent, 0 ), 100 ); - - return ( -
+ ); }; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/index.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/index.js index a58062006..69ffb6bfd 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/index.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/index.js @@ -11,9 +11,6 @@ const OnboardingScreen = () => { const handleNext = () => setStep( currentStep.nextStep ); const handlePrev = () => setStep( currentStep.prevStep ); - const handleExit = () => { - window.location.href = window.ppcpSettings.wcPaymentsTabUrl; - }; return ( <> @@ -21,7 +18,6 @@ const OnboardingScreen = () => { stepDetails={ currentStep } onNext={ handleNext } onPrev={ handlePrev } - onExit={ handleExit } /> From 2a1da98b5f663a8f25afcb3e3f771525f3a10d59 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Fri, 10 Jan 2025 15:16:05 +0100 Subject: [PATCH 11/16] =?UTF-8?q?=F0=9F=9A=9A=20Consistent=20file-=20and?= =?UTF-8?q?=20component-naming?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../js/Components/Screens/Onboarding/Components/Navigation.js | 4 ++-- .../resources/js/Components/Screens/Onboarding/index.js | 4 ++-- .../Components/{SettingsNavigation.js => Navigation.js} | 0 .../resources/js/Components/Screens/Settings/index.js | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) rename modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/{SettingsNavigation.js => Navigation.js} (100%) 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 f03abb383..52d496b33 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 @@ -5,7 +5,7 @@ import { OnboardingHooks } from '../../../../data'; import { useNavigation } from '../../../../hooks/useNavigation'; import TopNavigation from '../../../ReusableComponents/TopNavigation'; -const Navigation = ( { stepDetails, onNext, onPrev } ) => { +const OnboardingNavigation = ( { stepDetails, onNext, onPrev } ) => { const { goToWooCommercePaymentsTab } = useNavigation(); const { title, isFirst, percentage, showNext, canProceed } = stepDetails; @@ -37,4 +37,4 @@ const Navigation = ( { stepDetails, onNext, onPrev } ) => { ); }; -export default Navigation; +export default OnboardingNavigation; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/index.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/index.js index 69ffb6bfd..27bdaab9c 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/index.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/index.js @@ -2,7 +2,7 @@ import Container from '../../ReusableComponents/Container'; import { OnboardingHooks } from '../../../data'; import { getSteps, getCurrentStep } from './Steps'; -import Navigation from './Components/Navigation'; +import OnboardingNavigation from './Components/Navigation'; const OnboardingScreen = () => { const { step, setStep, flags } = OnboardingHooks.useSteps(); @@ -14,7 +14,7 @@ const OnboardingScreen = () => { return ( <> - { const tabs = getSettingsTabs(); From 25887024a6a5a2c4095bf156b0e079889dedf3ca Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Fri, 10 Jan 2025 18:20:00 +0100 Subject: [PATCH 12/16] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Start=20to=20unclutt?= =?UTF-8?q?er=20SCSS=20a=20bit?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/css/_variables.scss | 5 + .../resources/css/components/_reusable.scss | 19 ++ .../reusable-components/_settings-block.scss | 176 ++++++++++ .../reusable-components/_settings-card.scss | 63 ++++ .../_settings-wrapper.scss | 56 ---- .../css/components/screens/_settings.scss | 310 +----------------- .../screens/settings/_block-accordion.scss | 38 --- .../components/screens/settings/_input.scss | 77 +++++ .../{overview => settings}/_tab-styling.scss | 0 .../ppcp-settings/resources/css/style.scss | 19 +- .../SettingsBlocks/SettingsBlock.js | 10 +- .../ReusableComponents/SettingsCard.js | 6 +- 12 files changed, 351 insertions(+), 428 deletions(-) create mode 100644 modules/ppcp-settings/resources/css/components/_reusable.scss create mode 100644 modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss create mode 100644 modules/ppcp-settings/resources/css/components/reusable-components/_settings-card.scss delete mode 100644 modules/ppcp-settings/resources/css/components/screens/settings/_block-accordion.scss create mode 100644 modules/ppcp-settings/resources/css/components/screens/settings/_input.scss rename modules/ppcp-settings/resources/css/components/screens/{overview => settings}/_tab-styling.scss (100%) diff --git a/modules/ppcp-settings/resources/css/_variables.scss b/modules/ppcp-settings/resources/css/_variables.scss index 10f427ea9..5ccf191e5 100644 --- a/modules/ppcp-settings/resources/css/_variables.scss +++ b/modules/ppcp-settings/resources/css/_variables.scss @@ -54,4 +54,9 @@ $card-vertical-gap: 48px; --color-gray-200: #{$color-gray-200}; --color-gray-100: #{$color-gray-100}; --color-gradient-dark: #{$color-gradient-dark}; + + --color-text-title: #{$color-gray-900}; + --color-text-main: #{$color-text-text}; + --color-text-teriary: #{$color-text-tertiary}; + --color-text-description: #{$color-gray-700}; } diff --git a/modules/ppcp-settings/resources/css/components/_reusable.scss b/modules/ppcp-settings/resources/css/components/_reusable.scss new file mode 100644 index 000000000..4d4f5c1ba --- /dev/null +++ b/modules/ppcp-settings/resources/css/components/_reusable.scss @@ -0,0 +1,19 @@ +@import "./reusable-components/payment-method-item"; +@import './reusable-components/accordion-section'; +@import './reusable-components/badge-box'; +@import './reusable-components/busy-state'; +@import './reusable-components/button'; +@import './reusable-components/fields'; +@import './reusable-components/navigation'; +@import './reusable-components/onboarding-header'; +@import './reusable-components/payment-method-icons'; +@import './reusable-components/select-box'; +@import './reusable-components/separator'; +@import './reusable-components/settings-block'; +@import './reusable-components/settings-card'; +@import './reusable-components/settings-toggle-block'; +@import './reusable-components/settings-wrapper'; +@import './reusable-components/spinner-overlay'; +@import './reusable-components/tab-navigation'; +@import './reusable-components/title-badge'; +@import './reusable-components/welcome-docs'; diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss new file mode 100644 index 000000000..829be1977 --- /dev/null +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss @@ -0,0 +1,176 @@ +/* + Styles the `SettingsBlock` and all its derived components. + */ +.ppcp-r-settings-block { + display: flex; + flex-direction: column; + gap: 16px 0; + + &.ppcp-r-settings-block__input, + &.ppcp-r-settings-block__select { + gap: 6px 0; + } + + .ppcp-r-settings-block__header { + display: flex; + flex-direction: column; + gap: 6px; + + &:not(:last-child):not(.ppcp-r-settings-block--accordion__header) { + padding-bottom: 6px; + } + } + + .ppcp-r-settings-block__title { + @include font(11, 22, 600); + color: var(--color-text-title); + display: block; + text-transform: uppercase; + + .ppcp-r-title-badge { + text-transform: none; + margin-left: 6px; + } + } + + .ppcp-r-settings-block__title-wrapper { + display: flex; + justify-content: space-between; + align-items: center; + } + + &.ppcp-r-settings-block__feature { + .ppcp-r-settings-block__title { + @include font(13, 20, 600); + color: var(--color-text-main); + text-transform: none; + } + + .ppcp-r-settings-block__feature__description { + @include font(13, 20, 400); + color: var(--color-text-description); + } + } + + &.ppcp-r-settings-block__toggle { + display: flex; + flex-direction: row; + + .ppcp-r-settings-block__title { + @include font(13, 20, 400); + color: var(--color-text-main); + text-transform: none; + } + } + + .ppcp-r-settings-block__description { + @include font(13, 20, 400); + margin: 0; + color: var(--color-text-description); + + &:not(:last-child) { + padding-bottom: 1em; + } + + a { + color: var(--color-blueberry); + } + + strong { + color: var(--color-gray-800); + } + } + + .ppcp-r-settings-block__supplementary-title-label { + @include font(13, 20, 400); + color: var(--color-text-teriary); + text-transform: none; + margin-left: 5px; + } + + + .ppcp-r-settings-block { + margin-top: 32px; + padding-top: 32px; + border-top: 1px solid var(--color-gray-200); + } + + // Types + &--toggle-content { + &.ppcp-r-settings-block--content-visible { + .ppcp-r-settings-block__toggle-content { + transform: rotate(180deg); + } + } + + .ppcp-r-settings-block__header { + user-select: none; + + &:hover { + cursor: pointer; + } + } + } + + &--sandbox-connected { + .ppcp-r-settings-block__content { + margin-top: 24px; + } + + .ppcp-r-connection-status__data { + margin-bottom: 20px; + } + } + + &--connect-sandbox { + button.components-button { + @include small-button; + } + + .ppcp-r__radio-content-additional { + @include vertical-layout-event-gap(24px); + align-items: flex-start; + + .ppcp-r-vertical-text-control, + input[type='text'] { + width: 100%; + } + } + } +} + +.ppcp-r-settings-block { + &--order-intent, + &--save-payment-methods { + @include vertical-layout-event-gap(24px); + + > .ppcp-r-settings-block__content { + @include vertical-layout-event-gap(24px); + } + } +} + +.ppcp-r-settings-block--toggle-content { + .ppcp-r-settings-block__content { + margin-top: 32px; + } +} + +.ppcp-r-settings-block__button { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 50px; +} + +.ppcp-r-settings-block__accordion { + > .ppcp-r-accordion { + width: 100%; + + .ppcp-r-accordion__toggler { + width: 100%; + margin: 0; + text-align: unset; + } + } +} diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-card.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-card.scss new file mode 100644 index 000000000..634e3a8b7 --- /dev/null +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-card.scss @@ -0,0 +1,63 @@ +/* + Styles the `SettingsCard` layout component. + + This is a 2-column row that displays a title + description on the + left side, and a "card" with settings content on the right side. + */ +.ppcp-r-settings-card { + + // -- Theming + + --card-width-header: 100%; + --card-width-content: 100%; + --card-gap: 0; + --card-layout: block; + + @media screen and (min-width: 960px) { + --card-width-header: 280px; + --card-width-content: 610px; + --card-gap: 48px; + --card-layout: flex; + } + + // -- Styling + + display: var(--card-layout); + gap: var(--card-gap); + margin: 0 0 var(--card-gap) 0; + + .ppcp-r-settings-card__header { + display: var(--card-layout); + width: var(--card-width-header); + flex: 0 0 var(--card-width-header); + gap: 18px; + padding-bottom: 18px; + } + + .ppcp-r-settings-card__content-wrapper { + display: flex; + flex-direction: column; + gap: 24px; + } + + .ppcp-r-settings-card__content { + flex: 1; + max-width: var(--card-width-content); + border: 1px solid var(--color-gray-200); + border-radius: 4px; + padding: 24px; + } + + .ppcp-r-settings-card__title { + @include font(13, 24, 600); + color: var(--color-text-main); + margin: 0 0 4px 0; + display: block; + } + + .ppcp-r-settings-card__description { + @include font(13, 20, 400); + color: var(--color-text-teriary); + margin: 0; + } +} diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss index a13df6e77..342e4be1d 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss @@ -26,60 +26,4 @@ border-bottom: 1px solid $color-gray-200; } } - - &-settings-card { - @media screen and (min-width: 960px) { - display: flex; - gap: 48px; - } - - @media screen and (max-width: 480px) { - padding: 24px; - } - - &__content-wrapper { - display: flex; - flex-direction: column; - gap: 24px; - } - - &__header { - display: flex; - 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 { - border: 1px solid $color-gray-200; - border-radius: 4px; - padding: 24px; - @media screen and (min-width: 960px) { - flex: 1; - } - } - - &__title { - @include font(13, 24, 600); - color: $color-text-text; - margin: 0 0 4px 0; - display: block; - } - - - &__description { - @include font(13, 20, 400); - color: $color-text-tertiary; - margin: 0; - } - } } diff --git a/modules/ppcp-settings/resources/css/components/screens/_settings.scss b/modules/ppcp-settings/resources/css/components/screens/_settings.scss index 4315d3f1a..c5b10be9c 100644 --- a/modules/ppcp-settings/resources/css/components/screens/_settings.scss +++ b/modules/ppcp-settings/resources/css/components/screens/_settings.scss @@ -1,4 +1,5 @@ -@import "./settings/block-accordion"; +@import './settings/input'; +@import './settings/tab-styling'; // Container and Tab Settings .ppcp-r-tabs.settings, @@ -245,310 +246,3 @@ gap: 48px; } -// Settings Card and Block Styles -.ppcp-r-settings-card { - margin: 0 0 48px 0; -} - -.ppcp-r-settings-card__content { - > .ppcp-r-settings-block { - &:not(:last-child) { - border-bottom: 1px solid $color-divider; - } - } -} - -.ppcp-r-settings-block { - display: flex; - flex-direction: column; - gap: 16px 0; - - &.ppcp-r-settings-block__input, - &.ppcp-r-settings-block__select { - gap: 6px 0; - } - - .ppcp-r-settings-block__header { - display: flex; - flex-direction: column; - gap: 6px; - - &:not(:last-child):not(.ppcp-r-settings-block--accordion__header) { - padding-bottom: 6px; - } - } - - .ppcp-r-settings-block__title { - @include font(11, 22, 600); - color: $color-gray-900; - display: block; - text-transform: uppercase; - - .ppcp-r-title-badge { - text-transform: none; - margin-left: 6px; - } - } - - .ppcp-r-settings-block__title-wrapper { - display: flex; - justify-content: space-between; - align-items: center; - } - - &.ppcp-r-settings-block__feature { - .ppcp-r-settings-block__title { - @include font(13, 20, 600); - color: $color-text-text; - text-transform: none; - } - - .ppcp-r-settings-block__feature__description { - color: $color-gray-700; - @include font(13, 20, 400); - } - } - - &.ppcp-r-settings-block__toggle { - display: flex; - flex-direction: row; - - .ppcp-r-settings-block__title { - color: $color-text-text; - @include font(13, 20, 400); - text-transform: none; - } - } - - .ppcp-r-settings-block__description { - margin: 0; - @include font(13, 20, 400); - color: $color-gray-800; - - &:not(:last-child) { - padding-bottom: 1em; - } - - a { - color: $color-blueberry; - } - - strong { - color: $color-gray-800; - } - } - - .ppcp-r-settings-block__supplementary-title-label { - @include font(13, 20, 400); - color: $color-text-tertiary; - text-transform: none; - margin-left: 5px; - } - - // Types - &--toggle-content { - &.ppcp-r-settings-block--content-visible { - .ppcp-r-settings-block__toggle-content { - transform: rotate(180deg); - } - } - - .ppcp-r-settings-block__header { - user-select: none; - - &:hover { - cursor: pointer; - } - } - } - - &--sandbox-connected { - .ppcp-r-settings-block__content { - margin-top: 24px; - } - - .ppcp-r-connection-status__data { - margin-bottom: 20px; - } - } - - &--connect-sandbox { - button.components-button { - @include small-button; - } - - .ppcp-r__radio-content-additional { - .ppcp-r-vertical-text-control { - width: 100%; - } - - @include vertical-layout-event-gap(24px); - align-items: flex-start; - - input[type='text'] { - width: 100%; - } - } - } - - &--troubleshooting, - &--settings { - > .ppcp-r-settings-block__content > *:not(:last-child) { - padding-bottom: 32px; - margin-bottom: 32px; - border-bottom: 1px solid $color-gray-500; - } - } - - // Fields - input[type='text'] { - border-color: $color-gray-700; - width: 100%; - max-width: 100%; - color: $color-gray-800; - - &::placeholder { - color: $color-gray-700; - } - } - - // MultiSelect control - .ppcp-r { - &__radio-wrapper { - align-items: flex-start; - gap: 12px; - } - - &__radio-content { - display: flex; - flex-direction: column; - gap: 4px; - - label { - font-weight: 600; - } - } - - &__radio-content-additional { - padding-left: 32px; - } - - // Select control styles - &__control { - border-radius: 2px; - border-color: $color-gray-700; - min-height: auto; - padding: 0; - } - - &__input-container { - padding: 0; - margin: 0; - } - - &__value-container { - padding: 0 0 0 7px; - } - - &__indicator { - padding: 5px; - } - - &__indicator-separator { - display: none; - } - - &__value-container--has-value { - .ppcp-r__single-value { - color: $color-gray-800; - } - } - - &__placeholder, - &__single-value { - @include font(13, 20, 400); - } - - &__option { - &--is-selected { - background-color: $color-gray-200; - } - } - } -} - -// Hooks table -.ppcp-r-table { - &__hooks-url { - width: 70%; - padding-right: 20%; - text-align: left; - vertical-align: top; - } - - &__hooks-events { - vertical-align: top; - text-align: left; - width: 40%; - - span { - display: block; - } - } - - td.ppcp-r-table__hooks-url, - td.ppcp-r-table__hooks-events { - padding-top: 12px; - color: $color-gray-800; - @include font(14, 20, 400); - - span { - color: inherit; - @include font(14, 20, 400); - } - } - - th.ppcp-r-table__hooks-url, - th.ppcp-r-table__hooks-events { - @include font(14, 20, 700); - color: $color-gray-800; - border-bottom: 1px solid $color-gray-600; - padding-bottom: 4px; - } -} - -// Settings specific styles -.ppcp-r-settings-card--common-settings .ppcp-r-settings-card__content, -.ppcp-r-settings-card--expert-settings .ppcp-r-settings-card__content { - > .ppcp-r-settings-block { - &:not(:last-child) { - padding-bottom: 32px; - margin-bottom: 32px; - } - } -} - -.ppcp-r-settings-block { - &--order-intent, - &--save-payment-methods { - @include vertical-layout-event-gap(24px); - - > .ppcp-r-settings-block__content { - @include vertical-layout-event-gap(24px); - } - } -} - -.ppcp-r-settings-block--toggle-content { - .ppcp-r-settings-block__content { - margin-top: 32px; - } -} - -.ppcp-r-settings-block__button { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - gap: 50px; -} diff --git a/modules/ppcp-settings/resources/css/components/screens/settings/_block-accordion.scss b/modules/ppcp-settings/resources/css/components/screens/settings/_block-accordion.scss deleted file mode 100644 index c77a3eb91..000000000 --- a/modules/ppcp-settings/resources/css/components/screens/settings/_block-accordion.scss +++ /dev/null @@ -1,38 +0,0 @@ -.ppcp-r-settings-block__accordion { - > .ppcp-r-accordion { - width: 100%; - - .ppcp-r-accordion__toggler { - width: 100%; - margin: 0; - text-align: unset; - } - } - - &.ppcp-r-settings-block { - gap: 0; - - .ppcp-r-settings-block__title { - @include font(13, 20, 600); - color: $color-text-text; - text-transform: none; - } - - .ppcp-r-settings-block--accordion__title { - @include font(14, 20, 600); - } - - .ppcp-r-settings-block--accordion__description { - color: $color-gray-700; - @include font(13, 20, 400); - } - - .ppcp-r-settings-block:not(:last-child) { - &:not(.ppcp-r__radio-content-additional .ppcp-r-settings-block) { - padding-bottom: 32px; - margin-bottom: 32px; - border-bottom: 1px solid $color-divider; - } - } - } -} diff --git a/modules/ppcp-settings/resources/css/components/screens/settings/_input.scss b/modules/ppcp-settings/resources/css/components/screens/settings/_input.scss new file mode 100644 index 000000000..d71a52150 --- /dev/null +++ b/modules/ppcp-settings/resources/css/components/screens/settings/_input.scss @@ -0,0 +1,77 @@ +// Fields +.ppcp-r { + input[type='text'] { + border-color: $color-gray-700; + width: 100%; + max-width: 100%; + color: $color-gray-800; + + &::placeholder { + color: $color-gray-700; + } + } +} + +// MultiSelect control +.ppcp-r { + &__radio-wrapper { + align-items: flex-start; + gap: 12px; + } + + &__radio-content { + display: flex; + flex-direction: column; + gap: 4px; + + label { + font-weight: 600; + } + } + + &__radio-content-additional { + padding-left: 32px; + } + + // Select control styles + &__control { + border-radius: 2px; + border-color: $color-gray-700; + min-height: auto; + padding: 0; + } + + &__input-container { + padding: 0; + margin: 0; + } + + &__value-container { + padding: 0 0 0 7px; + } + + &__indicator { + padding: 5px; + } + + &__indicator-separator { + display: none; + } + + &__value-container--has-value { + .ppcp-r__single-value { + color: $color-gray-800; + } + } + + &__placeholder, + &__single-value { + @include font(13, 20, 400); + } + + &__option { + &--is-selected { + background-color: $color-gray-200; + } + } +} diff --git a/modules/ppcp-settings/resources/css/components/screens/overview/_tab-styling.scss b/modules/ppcp-settings/resources/css/components/screens/settings/_tab-styling.scss similarity index 100% rename from modules/ppcp-settings/resources/css/components/screens/overview/_tab-styling.scss rename to modules/ppcp-settings/resources/css/components/screens/settings/_tab-styling.scss diff --git a/modules/ppcp-settings/resources/css/style.scss b/modules/ppcp-settings/resources/css/style.scss index 56fe55a62..0875dcad5 100644 --- a/modules/ppcp-settings/resources/css/style.scss +++ b/modules/ppcp-settings/resources/css/style.scss @@ -3,26 +3,9 @@ #ppcp-settings-container { @import './global'; - @import './components/reusable-components/busy-state'; - @import './components/reusable-components/button'; - @import './components/reusable-components/separator'; - @import './components/reusable-components/onboarding-header'; - @import './components/reusable-components/settings-toggle-block'; - @import './components/reusable-components/payment-method-icons'; - @import "./components/reusable-components/payment-method-item"; - @import './components/reusable-components/settings-wrapper'; - @import './components/reusable-components/select-box'; - @import './components/reusable-components/tab-navigation'; - @import './components/reusable-components/navigation'; - @import './components/reusable-components/fields'; - @import './components/reusable-components/title-badge'; - @import './components/reusable-components/accordion-section'; - @import './components/reusable-components/badge-box'; - @import './components/reusable-components/spinner-overlay'; - @import './components/reusable-components/welcome-docs'; + @import './components/reusable'; @import './components/screens/onboarding'; @import './components/screens/settings'; - @import './components/screens/overview/tab-styling'; @import './components/app'; } diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlock.js index 768fa9387..2ded62c11 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlock.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlock.js @@ -1,9 +1,9 @@ -const SettingsBlock = ( { className, children } ) => { - const blockClassName = [ 'ppcp-r-settings-block', className ].filter( - Boolean - ); +import classNames from 'classnames'; - return
{ children }
; +const SettingsBlock = ( { className, children } ) => { + const blockClassName = classNames( 'ppcp-r-settings-block', className ); + + return
{ children }
; }; export default SettingsBlock; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js index a72253301..f209daec1 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js @@ -1,3 +1,5 @@ +import classNames from 'classnames'; + import { Content, ContentWrapper } from './SettingsBlocks'; const SettingsCard = ( { @@ -9,9 +11,7 @@ const SettingsCard = ( { contentItems, contentContainer = true, } ) => { - const className = [ 'ppcp-r-settings-card', extraClassName ] - .filter( Boolean ) - .join( ' ' ); + const className = classNames( 'ppcp-r-settings-card', extraClassName ); const renderContent = () => { // If contentItems array is provided, wrap each item in Content component From 406e8ebc98401c5a15e901fc0fa9f07e023b7211 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Fri, 10 Jan 2025 18:29:54 +0100 Subject: [PATCH 13/16] =?UTF-8?q?=E2=9C=A8=20Add=20generic=20option=20to?= =?UTF-8?q?=20suppress=20separator=20lines?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../css/components/reusable-components/_settings-block.scss | 2 +- .../ReusableComponents/SettingsBlocks/SettingsBlock.js | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss index 829be1977..f65c5c9d5 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss @@ -88,7 +88,7 @@ margin-left: 5px; } - + .ppcp-r-settings-block { + + .ppcp-r-settings-block:not(.no-gap) { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--color-gray-200); diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlock.js index 2ded62c11..e033a69df 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlock.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlock.js @@ -1,7 +1,9 @@ import classNames from 'classnames'; -const SettingsBlock = ( { className, children } ) => { - const blockClassName = classNames( 'ppcp-r-settings-block', className ); +const SettingsBlock = ( { className, children, separatorAndGap = true } ) => { + const blockClassName = classNames( 'ppcp-r-settings-block', className, { + 'no-gap': ! separatorAndGap, + } ); return
{ children }
; }; From 1c33c4250783bc2cf0328e608606f7c360880fef Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Fri, 10 Jan 2025 18:30:11 +0100 Subject: [PATCH 14/16] =?UTF-8?q?=F0=9F=92=84=20Improve=20UI=20of=20webhoo?= =?UTF-8?q?k=20section?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Blocks/Troubleshooting/HooksTableBlock.js | 9 ++++-- .../Troubleshooting/ResubscribeBlock.js | 1 + .../Blocks/Troubleshooting/SimulationBlock.js | 31 +++++++++---------- 3 files changed, 21 insertions(+), 20 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/HooksTableBlock.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/HooksTableBlock.js index 856f1969d..5a057023c 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/HooksTableBlock.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/HooksTableBlock.js @@ -1,6 +1,9 @@ import { __ } from '@wordpress/i18n'; import { CommonHooks } from '../../../../../../data'; -import { Title } from '../../../../../ReusableComponents/SettingsBlocks'; +import { + SettingsBlock, + Title, +} from '../../../../../ReusableComponents/SettingsBlocks'; const HooksTableBlock = () => { const { webhooks } = CommonHooks.useWebhooks(); @@ -11,10 +14,10 @@ const HooksTableBlock = () => { } return ( - <> + - + ); }; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/ResubscribeBlock.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/ResubscribeBlock.js index 373ec57c4..c309681bc 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/ResubscribeBlock.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/ResubscribeBlock.js @@ -56,6 +56,7 @@ const ResubscribeBlock = () => { 'Click to remove the current webhook subscription and subscribe again, for example, if the website domain or URL structure changed.', 'woocommerce-paypal-payments' ) } + separatorAndGap={ false } actionProps={ { buttonType: 'secondary', isBusy: resubscribing, diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/SimulationBlock.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/SimulationBlock.js index 2ae430e76..075113ddf 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/SimulationBlock.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/SimulationBlock.js @@ -107,23 +107,20 @@ const SimulationBlock = () => { }; return ( - <> - startSimulation( 30 ), - value: __( - 'Simulate webhooks', - 'woocommerce-paypal-payments' - ), - } } - /> - + startSimulation( 30 ), + value: __( 'Simulate webhooks', 'woocommerce-paypal-payments' ), + } } + /> ); }; export default SimulationBlock; From ed66f2bc05f423b541ac4dde57ce32285c2b4f90 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Tue, 14 Jan 2025 12:36:03 +0100 Subject: [PATCH 15/16] =?UTF-8?q?=F0=9F=90=9B=20Fix=20incorrect=20componen?= =?UTF-8?q?t=20path?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/js/Components/Screens/SendOnlyMessage.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/SendOnlyMessage.js b/modules/ppcp-settings/resources/js/Components/Screens/SendOnlyMessage.js index 56d780250..676b691eb 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/SendOnlyMessage.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/SendOnlyMessage.js @@ -2,7 +2,7 @@ import { __, sprintf } from '@wordpress/i18n'; import Container from '../ReusableComponents/Container'; import SettingsCard from '../ReusableComponents/SettingsCard'; -import SettingsNavigation from './SettingsNavigation'; +import SettingsNavigation from './Settings/Components/Navigation'; const SendOnlyMessage = () => { const settingsPageUrl = '/wp-admin/admin.php?page=wc-settings'; @@ -38,7 +38,7 @@ const SendOnlyMessage = () => { __html: sprintf( /* translators: 1: URL to the WooCommerce store location settings */ __( - 'To activate PayPal, please update your WooCommerce store location to a supported region and connect a PayPal account eligible for receiving payments.', + 'To activate PayPal, please update your WooCommerce store location to a supported region and connect a PayPal account eligible for receiving payments.', 'woocommerce-paypal-payments' ), settingsPageUrl From ffc8dc8d6b3d0a288a4faa24433fb20f4418e859 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Tue, 14 Jan 2025 12:36:34 +0100 Subject: [PATCH 16/16] =?UTF-8?q?=F0=9F=92=84=20Remove=20the=20gap=20at=20?= =?UTF-8?q?the=20top=20of=20the=20screen?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../js/Components/ReusableComponents/TopNavigation.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js index 60bd19641..ee3ca7aaa 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js @@ -1,4 +1,4 @@ -import { useCallback } from '@wordpress/element'; +import { useCallback, useLayoutEffect } from '@wordpress/element'; import { Button, Icon } from '@wordpress/components'; import { chevronLeft } from '@wordpress/icons'; import classNames from 'classnames'; @@ -34,6 +34,11 @@ const TopNavigation = ( { } }, [ exitOnTitleClick, goToWooCommercePaymentsTab, onTitleClick ] ); + // Removes the excess padding at the top of the navigation bar. + useLayoutEffect( () => { + window.dispatchEvent( new Event( 'resize' ) ); + }, [] ); + return (