From 9234975178f41aee3bb52ed08a96d6978451857c Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Fri, 10 Jan 2025 13:13:49 +0100 Subject: [PATCH 01/31] =?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/31] =?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/31] =?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/31] =?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/31] =?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/31] =?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/31] =?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/31] =?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/31] =?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/31] =?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/31] =?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/31] =?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/31] =?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/31] =?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 e5023b50075b6dc0900b492346683c215fe381b9 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 13 Jan 2025 13:46:04 +0100 Subject: [PATCH 15/31] =?UTF-8?q?=E2=9C=A8=20New=20REST=20endpoint=20to=20?= =?UTF-8?q?disconnect=20merchant?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Endpoint/AuthenticationRestEndpoint.php | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/modules/ppcp-settings/src/Endpoint/AuthenticationRestEndpoint.php b/modules/ppcp-settings/src/Endpoint/AuthenticationRestEndpoint.php index 9d72ff88c..a558f6e71 100644 --- a/modules/ppcp-settings/src/Endpoint/AuthenticationRestEndpoint.php +++ b/modules/ppcp-settings/src/Endpoint/AuthenticationRestEndpoint.php @@ -123,6 +123,15 @@ class AuthenticationRestEndpoint extends RestEndpoint { ), ) ); + register_rest_route( + $this->namespace, + '/' . $this->rest_base . '/disconnect', + array( + 'methods' => WP_REST_Server::EDITABLE, + 'callback' => array( $this, 'disconnect' ), + 'permission_callback' => array( $this, 'check_permission' ), + ) + ); } /** @@ -176,4 +185,15 @@ class AuthenticationRestEndpoint extends RestEndpoint { return $this->return_success( $response ); } + + /** + * Disconnect the merchant and clear the authentication details. + * + * @return WP_REST_Response + */ + public function disconnect() : WP_REST_Response { + $this->authentication_manager->disconnect(); + + return $this->return_success( 'OK' ); + } } From 4f61251ae7ab8c438a007c15335ad6b3c187698f Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 13 Jan 2025 13:56:41 +0100 Subject: [PATCH 16/31] =?UTF-8?q?=F0=9F=92=A1=20Document=20REST=20paths=20?= =?UTF-8?q?in=20source=20code?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Endpoint/AuthenticationRestEndpoint.php | 20 +++++++++++++++++++ .../src/Endpoint/CommonRestEndpoint.php | 12 +++++++++++ .../src/Endpoint/LoginLinkRestEndpoint.php | 7 +++++++ .../src/Endpoint/OnboardingRestEndpoint.php | 9 +++++++++ .../Endpoint/RefreshFeatureStatusEndpoint.php | 3 +++ .../src/Endpoint/WebhookSettingsEndpoint.php | 8 ++++++++ 6 files changed, 59 insertions(+) diff --git a/modules/ppcp-settings/src/Endpoint/AuthenticationRestEndpoint.php b/modules/ppcp-settings/src/Endpoint/AuthenticationRestEndpoint.php index a558f6e71..5ffd48baa 100644 --- a/modules/ppcp-settings/src/Endpoint/AuthenticationRestEndpoint.php +++ b/modules/ppcp-settings/src/Endpoint/AuthenticationRestEndpoint.php @@ -67,6 +67,14 @@ class AuthenticationRestEndpoint extends RestEndpoint { * Configure REST API routes. */ public function register_routes() : void { + /** + * POST /wp-json/wc/v3/wc_paypal/authenticate/direct + * { + * clientId + * clientSecret + * useSandbox + * } + */ register_rest_route( $this->namespace, '/' . $this->rest_base . '/direct', @@ -97,6 +105,14 @@ class AuthenticationRestEndpoint extends RestEndpoint { ) ); + /** + * POST /wp-json/wc/v3/wc_paypal/authenticate/isu + * { + * sharedId + * authCode + * useSandbox + * } + */ register_rest_route( $this->namespace, '/' . $this->rest_base . '/isu', @@ -123,6 +139,10 @@ class AuthenticationRestEndpoint extends RestEndpoint { ), ) ); + + /** + * POST /wp-json/wc/v3/wc_paypal/authenticate/disconnect + */ register_rest_route( $this->namespace, '/' . $this->rest_base . '/disconnect', diff --git a/modules/ppcp-settings/src/Endpoint/CommonRestEndpoint.php b/modules/ppcp-settings/src/Endpoint/CommonRestEndpoint.php index d99204c80..6da060f28 100644 --- a/modules/ppcp-settings/src/Endpoint/CommonRestEndpoint.php +++ b/modules/ppcp-settings/src/Endpoint/CommonRestEndpoint.php @@ -111,6 +111,9 @@ class CommonRestEndpoint extends RestEndpoint { * Configure REST API routes. */ public function register_routes() { + /** + * GET /wp-json/wc/v3/wc_paypal/common + */ register_rest_route( $this->namespace, '/' . $this->rest_base, @@ -121,6 +124,12 @@ class CommonRestEndpoint extends RestEndpoint { ) ); + /** + * POST /wp-json/wc/v3/wc_paypal/common + * { + * // Fields mentioned in $field_map[]['js_name'] + * } + */ register_rest_route( $this->namespace, '/' . $this->rest_base, @@ -131,6 +140,9 @@ class CommonRestEndpoint extends RestEndpoint { ) ); + /** + * GET /wp-json/wc/v3/wc_paypal/common/merchant + */ register_rest_route( $this->namespace, "/$this->rest_base/merchant", diff --git a/modules/ppcp-settings/src/Endpoint/LoginLinkRestEndpoint.php b/modules/ppcp-settings/src/Endpoint/LoginLinkRestEndpoint.php index 7ddee27a5..c2b0e9ff3 100644 --- a/modules/ppcp-settings/src/Endpoint/LoginLinkRestEndpoint.php +++ b/modules/ppcp-settings/src/Endpoint/LoginLinkRestEndpoint.php @@ -52,6 +52,13 @@ class LoginLinkRestEndpoint extends RestEndpoint { * Configure REST API routes. */ public function register_routes() : void { + /** + * POST /wp-json/wc/v3/wc_paypal/login_link + * { + * useSandbox + * products + * } + */ register_rest_route( $this->namespace, '/' . $this->rest_base, diff --git a/modules/ppcp-settings/src/Endpoint/OnboardingRestEndpoint.php b/modules/ppcp-settings/src/Endpoint/OnboardingRestEndpoint.php index 018ab2dc2..19cdcd530 100644 --- a/modules/ppcp-settings/src/Endpoint/OnboardingRestEndpoint.php +++ b/modules/ppcp-settings/src/Endpoint/OnboardingRestEndpoint.php @@ -97,6 +97,9 @@ class OnboardingRestEndpoint extends RestEndpoint { * Configure REST API routes. */ public function register_routes() { + /** + * GET /wp-json/wc/v3/wc_paypal/onboarding + */ register_rest_route( $this->namespace, '/' . $this->rest_base, @@ -107,6 +110,12 @@ class OnboardingRestEndpoint extends RestEndpoint { ) ); + /** + * POST /wp-json/wc/v3/wc_paypal/onboarding + * { + * // Fields mentioned in $field_map[]['js_name'] + * } + */ register_rest_route( $this->namespace, '/' . $this->rest_base, diff --git a/modules/ppcp-settings/src/Endpoint/RefreshFeatureStatusEndpoint.php b/modules/ppcp-settings/src/Endpoint/RefreshFeatureStatusEndpoint.php index dfbfc3a3a..7e8335e00 100644 --- a/modules/ppcp-settings/src/Endpoint/RefreshFeatureStatusEndpoint.php +++ b/modules/ppcp-settings/src/Endpoint/RefreshFeatureStatusEndpoint.php @@ -83,6 +83,9 @@ class RefreshFeatureStatusEndpoint extends RestEndpoint { * Configure REST API routes. */ public function register_routes() { + /** + * POST /wp-json/wc/v3/wc_paypal/refresh-feature-status + */ register_rest_route( $this->namespace, '/' . $this->rest_base, diff --git a/modules/ppcp-settings/src/Endpoint/WebhookSettingsEndpoint.php b/modules/ppcp-settings/src/Endpoint/WebhookSettingsEndpoint.php index df227264a..603496194 100644 --- a/modules/ppcp-settings/src/Endpoint/WebhookSettingsEndpoint.php +++ b/modules/ppcp-settings/src/Endpoint/WebhookSettingsEndpoint.php @@ -77,6 +77,10 @@ class WebhookSettingsEndpoint extends RestEndpoint { * Configure REST API routes. */ public function register_routes() : void { + /** + * GET /wp-json/wc/v3/wc_paypal/webhook_settings + * POST /wp-json/wc/v3/wc_paypal/webhook_settings + */ register_rest_route( $this->namespace, '/' . $this->rest_base, @@ -94,6 +98,10 @@ class WebhookSettingsEndpoint extends RestEndpoint { ) ); + /** + * GET /wp-json/wc/v3/wc_paypal/webhook_simulate + * POST /wp-json/wc/v3/wc_paypal/webhook_simulate + */ register_rest_route( $this->namespace, '/' . $this->rest_simulate_base, From 1bee5f1c46ae0a1c7ddb579f1f1a7baa9313cf5d Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 13 Jan 2025 13:57:42 +0100 Subject: [PATCH 17/31] =?UTF-8?q?=F0=9F=8E=A8=20Minor=20code-style=20chang?= =?UTF-8?q?es?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- modules/ppcp-settings/src/Endpoint/CommonRestEndpoint.php | 2 +- .../ppcp-settings/src/Endpoint/OnboardingRestEndpoint.php | 2 +- .../src/Endpoint/RefreshFeatureStatusEndpoint.php | 2 +- .../ppcp-settings/src/Endpoint/WebhookSettingsEndpoint.php | 6 +++++- 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/modules/ppcp-settings/src/Endpoint/CommonRestEndpoint.php b/modules/ppcp-settings/src/Endpoint/CommonRestEndpoint.php index 6da060f28..35af6c093 100644 --- a/modules/ppcp-settings/src/Endpoint/CommonRestEndpoint.php +++ b/modules/ppcp-settings/src/Endpoint/CommonRestEndpoint.php @@ -110,7 +110,7 @@ class CommonRestEndpoint extends RestEndpoint { /** * Configure REST API routes. */ - public function register_routes() { + public function register_routes() : void { /** * GET /wp-json/wc/v3/wc_paypal/common */ diff --git a/modules/ppcp-settings/src/Endpoint/OnboardingRestEndpoint.php b/modules/ppcp-settings/src/Endpoint/OnboardingRestEndpoint.php index 19cdcd530..54aced7ef 100644 --- a/modules/ppcp-settings/src/Endpoint/OnboardingRestEndpoint.php +++ b/modules/ppcp-settings/src/Endpoint/OnboardingRestEndpoint.php @@ -96,7 +96,7 @@ class OnboardingRestEndpoint extends RestEndpoint { /** * Configure REST API routes. */ - public function register_routes() { + public function register_routes() : void { /** * GET /wp-json/wc/v3/wc_paypal/onboarding */ diff --git a/modules/ppcp-settings/src/Endpoint/RefreshFeatureStatusEndpoint.php b/modules/ppcp-settings/src/Endpoint/RefreshFeatureStatusEndpoint.php index 7e8335e00..7f1d4468c 100644 --- a/modules/ppcp-settings/src/Endpoint/RefreshFeatureStatusEndpoint.php +++ b/modules/ppcp-settings/src/Endpoint/RefreshFeatureStatusEndpoint.php @@ -82,7 +82,7 @@ class RefreshFeatureStatusEndpoint extends RestEndpoint { /** * Configure REST API routes. */ - public function register_routes() { + public function register_routes() : void { /** * POST /wp-json/wc/v3/wc_paypal/refresh-feature-status */ diff --git a/modules/ppcp-settings/src/Endpoint/WebhookSettingsEndpoint.php b/modules/ppcp-settings/src/Endpoint/WebhookSettingsEndpoint.php index 603496194..5e56de9e3 100644 --- a/modules/ppcp-settings/src/Endpoint/WebhookSettingsEndpoint.php +++ b/modules/ppcp-settings/src/Endpoint/WebhookSettingsEndpoint.php @@ -67,7 +67,11 @@ class WebhookSettingsEndpoint extends RestEndpoint { * @param WebhookRegistrar $webhook_registrar A service that allows resubscribing webhooks. * @param WebhookSimulation $webhook_simulation A service that allows webhook simulations. */ - public function __construct( WebhookEndpoint $webhook_endpoint, WebhookRegistrar $webhook_registrar, WebhookSimulation $webhook_simulation ) { + public function __construct( + WebhookEndpoint $webhook_endpoint, + WebhookRegistrar $webhook_registrar, + WebhookSimulation $webhook_simulation + ) { $this->webhook_endpoint = $webhook_endpoint; $this->webhook_registrar = $webhook_registrar; $this->webhook_simulation = $webhook_simulation; From 8f38bac810e84155f87c11ab6c73cb38a7b40a0e Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 13 Jan 2025 14:06:24 +0100 Subject: [PATCH 18/31] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Consolidate=20REST?= =?UTF-8?q?=20endpoints:=20Webhooks?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/js/data/common/constants.js | 8 ++++---- .../src/Endpoint/WebhookSettingsEndpoint.php | 19 ++++++------------- 2 files changed, 10 insertions(+), 17 deletions(-) diff --git a/modules/ppcp-settings/resources/js/data/common/constants.js b/modules/ppcp-settings/resources/js/data/common/constants.js index 49abba6db..40c01b6e3 100644 --- a/modules/ppcp-settings/resources/js/data/common/constants.js +++ b/modules/ppcp-settings/resources/js/data/common/constants.js @@ -66,24 +66,24 @@ export const REST_ISU_AUTHENTICATION_PATH = '/wc/v3/wc_paypal/authenticate/isu'; export const REST_CONNECTION_URL_PATH = '/wc/v3/wc_paypal/login_link'; /** - * REST path to fetch webhooks data or resubscribe webhooks, + * REST path to fetch webhooks data or resubscribe webhooks. * * Used by: Controls * See: WebhookSettingsEndpoint.php * * @type {string} */ -export const REST_WEBHOOKS = '/wc/v3/wc_paypal/webhook_settings'; +export const REST_WEBHOOKS = '/wc/v3/wc_paypal/webhooks'; /** - * REST path to start webhook simulation and observe the state, + * REST path to start webhook simulation and observe the state. * * Used by: Controls * See: WebhookSettingsEndpoint.php * * @type {string} */ -export const REST_WEBHOOKS_SIMULATE = '/wc/v3/wc_paypal/webhook_simulate'; +export const REST_WEBHOOKS_SIMULATE = '/wc/v3/wc_paypal/webhooks/simulate'; /** * REST path to refresh the feature status. diff --git a/modules/ppcp-settings/src/Endpoint/WebhookSettingsEndpoint.php b/modules/ppcp-settings/src/Endpoint/WebhookSettingsEndpoint.php index 5e56de9e3..81e8f4335 100644 --- a/modules/ppcp-settings/src/Endpoint/WebhookSettingsEndpoint.php +++ b/modules/ppcp-settings/src/Endpoint/WebhookSettingsEndpoint.php @@ -29,14 +29,7 @@ class WebhookSettingsEndpoint extends RestEndpoint { * * @var string */ - protected $rest_base = 'webhook_settings'; - - /** - * Endpoint base to start webhook simulation and check the state - * - * @var string - */ - protected string $rest_simulate_base = 'webhook_simulate'; + protected $rest_base = 'webhooks'; /** * Application webhook endpoint @@ -82,8 +75,8 @@ class WebhookSettingsEndpoint extends RestEndpoint { */ public function register_routes() : void { /** - * GET /wp-json/wc/v3/wc_paypal/webhook_settings - * POST /wp-json/wc/v3/wc_paypal/webhook_settings + * GET /wp-json/wc/v3/wc_paypal/webhooks + * POST /wp-json/wc/v3/wc_paypal/webhooks */ register_rest_route( $this->namespace, @@ -103,12 +96,12 @@ class WebhookSettingsEndpoint extends RestEndpoint { ); /** - * GET /wp-json/wc/v3/wc_paypal/webhook_simulate - * POST /wp-json/wc/v3/wc_paypal/webhook_simulate + * GET /wp-json/wc/v3/wc_paypal/webhooks/simulate + * POST /wp-json/wc/v3/wc_paypal/webhooks/simulate */ register_rest_route( $this->namespace, - '/' . $this->rest_simulate_base, + '/' . $this->rest_base . '/simulate', array( array( 'methods' => WP_REST_Server::READABLE, From 53ce535f4a93a9809463b121957c0c49a77ad41f Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 13 Jan 2025 14:08:20 +0100 Subject: [PATCH 19/31] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Shorten=20REST=20end?= =?UTF-8?q?points:=20Features?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- modules/ppcp-settings/resources/js/data/common/constants.js | 3 +-- .../src/Endpoint/RefreshFeatureStatusEndpoint.php | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/modules/ppcp-settings/resources/js/data/common/constants.js b/modules/ppcp-settings/resources/js/data/common/constants.js index 40c01b6e3..6101ed31a 100644 --- a/modules/ppcp-settings/resources/js/data/common/constants.js +++ b/modules/ppcp-settings/resources/js/data/common/constants.js @@ -93,5 +93,4 @@ export const REST_WEBHOOKS_SIMULATE = '/wc/v3/wc_paypal/webhooks/simulate'; * * @type {string} */ -export const REST_REFRESH_FEATURES_PATH = - '/wc/v3/wc_paypal/refresh-feature-status'; +export const REST_REFRESH_FEATURES_PATH = '/wc/v3/wc_paypal/refresh-features'; diff --git a/modules/ppcp-settings/src/Endpoint/RefreshFeatureStatusEndpoint.php b/modules/ppcp-settings/src/Endpoint/RefreshFeatureStatusEndpoint.php index 7f1d4468c..3b17b84ed 100644 --- a/modules/ppcp-settings/src/Endpoint/RefreshFeatureStatusEndpoint.php +++ b/modules/ppcp-settings/src/Endpoint/RefreshFeatureStatusEndpoint.php @@ -25,7 +25,7 @@ class RefreshFeatureStatusEndpoint extends RestEndpoint { * * @var string */ - protected $rest_base = 'refresh-feature-status'; + protected $rest_base = 'refresh-features'; /** * Cache timeout in seconds. @@ -84,7 +84,7 @@ class RefreshFeatureStatusEndpoint extends RestEndpoint { */ public function register_routes() : void { /** - * POST /wp-json/wc/v3/wc_paypal/refresh-feature-status + * POST /wp-json/wc/v3/wc_paypal/refresh-features */ register_rest_route( $this->namespace, From ec029dd4c5cfa547f63a954c635b32c51eb56e4c Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 13 Jan 2025 14:09:04 +0100 Subject: [PATCH 20/31] =?UTF-8?q?=E2=9C=A8=20Flush=20APM=20feature=20cache?= =?UTF-8?q?=20on=20merchant=20disconnect?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/Service/AuthenticationManager.php | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/modules/ppcp-settings/src/Service/AuthenticationManager.php b/modules/ppcp-settings/src/Service/AuthenticationManager.php index 96d7f3bc1..f722ab297 100644 --- a/modules/ppcp-settings/src/Service/AuthenticationManager.php +++ b/modules/ppcp-settings/src/Service/AuthenticationManager.php @@ -122,6 +122,11 @@ class AuthenticationManager { * is no need for it here, it's good house-keeping practice to clean up. */ do_action( 'woocommerce_paypal_payments_flush_api_cache' ); + + /** + * Clear the APM eligibility flags from the default settings object. + */ + do_action( 'woocommerce_paypal_payments_clear_apm_product_status' ); } /** @@ -420,6 +425,11 @@ class AuthenticationManager { */ do_action( 'woocommerce_paypal_payments_authenticated_merchant' ); + /** + * Clear the APM eligibility flags from the default settings object. + */ + do_action( 'woocommerce_paypal_payments_clear_apm_product_status' ); + /** * Subscribe the new merchant to relevant PayPal webhooks. */ From 30ab1bd51f5e1aadf081b009efcbc3a9cc086cd5 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 13 Jan 2025 14:11:24 +0100 Subject: [PATCH 21/31] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Consolidate=20authen?= =?UTF-8?q?tication=20name:=20OAuth,=20not=20ISU?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/js/data/common/constants.js | 5 +++-- .../resources/js/data/common/controls.js | 4 ++-- .../src/Endpoint/AuthenticationRestEndpoint.php | 12 ++++++------ 3 files changed, 11 insertions(+), 10 deletions(-) diff --git a/modules/ppcp-settings/resources/js/data/common/constants.js b/modules/ppcp-settings/resources/js/data/common/constants.js index 6101ed31a..9faa698e5 100644 --- a/modules/ppcp-settings/resources/js/data/common/constants.js +++ b/modules/ppcp-settings/resources/js/data/common/constants.js @@ -46,14 +46,15 @@ export const REST_DIRECT_AUTHENTICATION_PATH = '/wc/v3/wc_paypal/authenticate/direct'; /** - * REST path to perform the ISU authentication check, using shared ID and authCode. + * REST path to perform the OAuth authentication check, using shared ID and authCode. * * Used by: Controls * See: AuthenticateRestEndpoint.php * * @type {string} */ -export const REST_ISU_AUTHENTICATION_PATH = '/wc/v3/wc_paypal/authenticate/isu'; +export const REST_OAUTH_AUTHENTICATION_PATH = + '/wc/v3/wc_paypal/authenticate/oauth'; /** * REST path to generate an ISU URL for the PayPal-login. diff --git a/modules/ppcp-settings/resources/js/data/common/controls.js b/modules/ppcp-settings/resources/js/data/common/controls.js index 62d4a8f84..dc2f04710 100644 --- a/modules/ppcp-settings/resources/js/data/common/controls.js +++ b/modules/ppcp-settings/resources/js/data/common/controls.js @@ -15,7 +15,7 @@ import { REST_CONNECTION_URL_PATH, REST_HYDRATE_MERCHANT_PATH, REST_REFRESH_FEATURES_PATH, - REST_ISU_AUTHENTICATION_PATH, + REST_OAUTH_AUTHENTICATION_PATH, REST_WEBHOOKS, REST_WEBHOOKS_SIMULATE, } from './constants'; @@ -82,7 +82,7 @@ export const controls = { } ) { try { return await apiFetch( { - path: REST_ISU_AUTHENTICATION_PATH, + path: REST_OAUTH_AUTHENTICATION_PATH, method: 'POST', data: { sharedId, diff --git a/modules/ppcp-settings/src/Endpoint/AuthenticationRestEndpoint.php b/modules/ppcp-settings/src/Endpoint/AuthenticationRestEndpoint.php index 5ffd48baa..7ac964b2d 100644 --- a/modules/ppcp-settings/src/Endpoint/AuthenticationRestEndpoint.php +++ b/modules/ppcp-settings/src/Endpoint/AuthenticationRestEndpoint.php @@ -106,7 +106,7 @@ class AuthenticationRestEndpoint extends RestEndpoint { ); /** - * POST /wp-json/wc/v3/wc_paypal/authenticate/isu + * POST /wp-json/wc/v3/wc_paypal/authenticate/oauth * { * sharedId * authCode @@ -115,10 +115,10 @@ class AuthenticationRestEndpoint extends RestEndpoint { */ register_rest_route( $this->namespace, - '/' . $this->rest_base . '/isu', + '/' . $this->rest_base . '/oauth', array( 'methods' => WP_REST_Server::EDITABLE, - 'callback' => array( $this, 'connect_isu' ), + 'callback' => array( $this, 'connect_oauth' ), 'permission_callback' => array( $this, 'check_permission' ), 'args' => array( 'sharedId' => array( @@ -181,14 +181,14 @@ class AuthenticationRestEndpoint extends RestEndpoint { } /** - * ISU login: Retrieves clientId and clientSecret using a sharedId and authCode. + * OAuth login: Retrieves clientId and clientSecret using a sharedId and authCode. * - * This is the final step in the UI-driven login via the ISU popup, which + * This is the final step in the UI-driven login via the OAuth popup, which * is triggered by the LoginLinkRestEndpoint URL. * * @param WP_REST_Request $request Full data about the request. */ - public function connect_isu( WP_REST_Request $request ) : WP_REST_Response { + public function connect_oauth( WP_REST_Request $request ) : WP_REST_Response { $shared_id = $request->get_param( 'sharedId' ); $auth_code = $request->get_param( 'authCode' ); $use_sandbox = $request->get_param( 'useSandbox' ); From bc08aa74da195446a6f85936a2d7651892212c62 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 13 Jan 2025 14:12:57 +0100 Subject: [PATCH 22/31] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Shorten=20action=20n?= =?UTF-8?q?ame?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- modules/ppcp-settings/resources/js/data/common/action-types.js | 3 +-- modules/ppcp-settings/resources/js/data/common/actions.js | 2 +- modules/ppcp-settings/resources/js/data/common/controls.js | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/modules/ppcp-settings/resources/js/data/common/action-types.js b/modules/ppcp-settings/resources/js/data/common/action-types.js index 8ae56b20c..91f350482 100644 --- a/modules/ppcp-settings/resources/js/data/common/action-types.js +++ b/modules/ppcp-settings/resources/js/data/common/action-types.js @@ -26,6 +26,5 @@ export default { DO_REFRESH_FEATURES: 'COMMON:DO_REFRESH_FEATURES', DO_RESUBSCRIBE_WEBHOOKS: 'COMMON:DO_RESUBSCRIBE_WEBHOOKS', DO_START_WEBHOOK_SIMULATION: 'COMMON:DO_START_WEBHOOK_SIMULATION', - DO_CHECK_WEBHOOK_SIMULATION_STATE: - 'COMMON:DO_CHECK_WEBHOOK_SIMULATION_STATE', + DO_CHECK_WEBHOOK_SIMULATION: 'COMMON:DO_CHECK_WEBHOOK_SIMULATION', }; diff --git a/modules/ppcp-settings/resources/js/data/common/actions.js b/modules/ppcp-settings/resources/js/data/common/actions.js index c859fe0be..91652f56e 100644 --- a/modules/ppcp-settings/resources/js/data/common/actions.js +++ b/modules/ppcp-settings/resources/js/data/common/actions.js @@ -288,5 +288,5 @@ export const startWebhookSimulation = function* () { * @return {Action} The action. */ export const checkWebhookSimulationState = function* () { - return yield { type: ACTION_TYPES.DO_CHECK_WEBHOOK_SIMULATION_STATE }; + return yield { type: ACTION_TYPES.DO_CHECK_WEBHOOK_SIMULATION }; }; diff --git a/modules/ppcp-settings/resources/js/data/common/controls.js b/modules/ppcp-settings/resources/js/data/common/controls.js index dc2f04710..a7e53a8da 100644 --- a/modules/ppcp-settings/resources/js/data/common/controls.js +++ b/modules/ppcp-settings/resources/js/data/common/controls.js @@ -138,7 +138,7 @@ export const controls = { } ); }, - async [ ACTION_TYPES.DO_CHECK_WEBHOOK_SIMULATION_STATE ]() { + async [ ACTION_TYPES.DO_CHECK_WEBHOOK_SIMULATION ]() { return await apiFetch( { path: REST_WEBHOOKS_SIMULATE, } ); From 401faf6975bc5d4696b46c86ff0c60c439fc8414 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 13 Jan 2025 14:16:46 +0100 Subject: [PATCH 23/31] =?UTF-8?q?=E2=9C=A8=20New=20Redux=20action=20to=20d?= =?UTF-8?q?isconnect=20merchant?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/js/data/common/action-types.js | 1 + .../ppcp-settings/resources/js/data/common/actions.js | 9 +++++++++ .../resources/js/data/common/constants.js | 11 +++++++++++ .../resources/js/data/common/controls.js | 8 ++++++++ 4 files changed, 29 insertions(+) diff --git a/modules/ppcp-settings/resources/js/data/common/action-types.js b/modules/ppcp-settings/resources/js/data/common/action-types.js index 91f350482..f33e8a9ee 100644 --- a/modules/ppcp-settings/resources/js/data/common/action-types.js +++ b/modules/ppcp-settings/resources/js/data/common/action-types.js @@ -21,6 +21,7 @@ export default { DO_PERSIST_DATA: 'COMMON:DO_PERSIST_DATA', DO_DIRECT_API_AUTHENTICATION: 'COMMON:DO_DIRECT_API_AUTHENTICATION', DO_OAUTH_AUTHENTICATION: 'COMMON:DO_OAUTH_AUTHENTICATION', + DO_DISCONNECT_MERCHANT: 'COMMON:DO_DISCONNECT_MERCHANT', DO_GENERATE_ONBOARDING_URL: 'COMMON:DO_GENERATE_ONBOARDING_URL', DO_REFRESH_MERCHANT: 'COMMON:DO_REFRESH_MERCHANT', DO_REFRESH_FEATURES: 'COMMON:DO_REFRESH_FEATURES', diff --git a/modules/ppcp-settings/resources/js/data/common/actions.js b/modules/ppcp-settings/resources/js/data/common/actions.js index 91652f56e..0c4cb4af1 100644 --- a/modules/ppcp-settings/resources/js/data/common/actions.js +++ b/modules/ppcp-settings/resources/js/data/common/actions.js @@ -212,6 +212,15 @@ export const authenticateWithOAuth = function* ( }; }; +/** + * Side effect. Checks webhook simulation. + * + * @return {Action} The action. + */ +export const disconnectMerchant = function () { + return { type: ACTION_TYPES.DO_DISCONNECT_MERCHANT }; +}; + /** * Side effect. Clears and refreshes the merchant data via a REST request. * diff --git a/modules/ppcp-settings/resources/js/data/common/constants.js b/modules/ppcp-settings/resources/js/data/common/constants.js index 9faa698e5..86bd670db 100644 --- a/modules/ppcp-settings/resources/js/data/common/constants.js +++ b/modules/ppcp-settings/resources/js/data/common/constants.js @@ -56,6 +56,17 @@ export const REST_DIRECT_AUTHENTICATION_PATH = export const REST_OAUTH_AUTHENTICATION_PATH = '/wc/v3/wc_paypal/authenticate/oauth'; +/** + * REST path to disconnect the current merchant from PayPal. + * + * Used by: Controls + * See: AuthenticateRestEndpoint.php + * + * @type {string} + */ +export const REST_DISCONNECT_MERCHANT_PATH = + '/wc/v3/wc_paypal/authenticate/disconnect'; + /** * REST path to generate an ISU URL for the PayPal-login. * diff --git a/modules/ppcp-settings/resources/js/data/common/controls.js b/modules/ppcp-settings/resources/js/data/common/controls.js index a7e53a8da..6a5b4f9bc 100644 --- a/modules/ppcp-settings/resources/js/data/common/controls.js +++ b/modules/ppcp-settings/resources/js/data/common/controls.js @@ -16,6 +16,7 @@ import { REST_HYDRATE_MERCHANT_PATH, REST_REFRESH_FEATURES_PATH, REST_OAUTH_AUTHENTICATION_PATH, + REST_DISCONNECT_MERCHANT_PATH, REST_WEBHOOKS, REST_WEBHOOKS_SIMULATE, } from './constants'; @@ -98,6 +99,13 @@ export const controls = { } }, + async [ ACTION_TYPES.DO_DISCONNECT ]() { + return await apiFetch( { + path: REST_DISCONNECT_MERCHANT_PATH, + method: 'POST', + } ); + }, + async [ ACTION_TYPES.DO_REFRESH_MERCHANT ]() { try { return await apiFetch( { path: REST_HYDRATE_MERCHANT_PATH } ); From 4b83d588ec76d1620a4ebdbcdd2ee810a2c5a467 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 13 Jan 2025 14:21:52 +0100 Subject: [PATCH 24/31] =?UTF-8?q?=F0=9F=90=9B=20Fix=20a=20PHP=20error=20du?= =?UTF-8?q?ring=20disconnect?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- modules/ppcp-settings/src/Service/AuthenticationManager.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/ppcp-settings/src/Service/AuthenticationManager.php b/modules/ppcp-settings/src/Service/AuthenticationManager.php index f722ab297..95acf068b 100644 --- a/modules/ppcp-settings/src/Service/AuthenticationManager.php +++ b/modules/ppcp-settings/src/Service/AuthenticationManager.php @@ -126,7 +126,7 @@ class AuthenticationManager { /** * Clear the APM eligibility flags from the default settings object. */ - do_action( 'woocommerce_paypal_payments_clear_apm_product_status' ); + do_action( 'woocommerce_paypal_payments_clear_apm_product_status', null ); } /** @@ -428,7 +428,7 @@ class AuthenticationManager { /** * Clear the APM eligibility flags from the default settings object. */ - do_action( 'woocommerce_paypal_payments_clear_apm_product_status' ); + do_action( 'woocommerce_paypal_payments_clear_apm_product_status', null ); /** * Subscribe the new merchant to relevant PayPal webhooks. From 364c1b55c5f2d883b2d83c7d7b83bd1473bb8ca2 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 13 Jan 2025 14:41:08 +0100 Subject: [PATCH 25/31] =?UTF-8?q?=F0=9F=90=9B=20Fix=20the=20disconnect=20R?= =?UTF-8?q?edux=20action?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- modules/ppcp-settings/resources/js/data/common/actions.js | 4 ++-- modules/ppcp-settings/resources/js/data/common/controls.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/modules/ppcp-settings/resources/js/data/common/actions.js b/modules/ppcp-settings/resources/js/data/common/actions.js index 0c4cb4af1..8f2b14812 100644 --- a/modules/ppcp-settings/resources/js/data/common/actions.js +++ b/modules/ppcp-settings/resources/js/data/common/actions.js @@ -217,8 +217,8 @@ export const authenticateWithOAuth = function* ( * * @return {Action} The action. */ -export const disconnectMerchant = function () { - return { type: ACTION_TYPES.DO_DISCONNECT_MERCHANT }; +export const disconnectMerchant = function* () { + return yield { type: ACTION_TYPES.DO_DISCONNECT_MERCHANT }; }; /** diff --git a/modules/ppcp-settings/resources/js/data/common/controls.js b/modules/ppcp-settings/resources/js/data/common/controls.js index 6a5b4f9bc..a318e2116 100644 --- a/modules/ppcp-settings/resources/js/data/common/controls.js +++ b/modules/ppcp-settings/resources/js/data/common/controls.js @@ -11,10 +11,10 @@ import apiFetch from '@wordpress/api-fetch'; import { REST_PERSIST_PATH, - REST_DIRECT_AUTHENTICATION_PATH, REST_CONNECTION_URL_PATH, REST_HYDRATE_MERCHANT_PATH, REST_REFRESH_FEATURES_PATH, + REST_DIRECT_AUTHENTICATION_PATH, REST_OAUTH_AUTHENTICATION_PATH, REST_DISCONNECT_MERCHANT_PATH, REST_WEBHOOKS, @@ -99,7 +99,7 @@ export const controls = { } }, - async [ ACTION_TYPES.DO_DISCONNECT ]() { + async [ ACTION_TYPES.DO_DISCONNECT_MERCHANT ]() { return await apiFetch( { path: REST_DISCONNECT_MERCHANT_PATH, method: 'POST', From 5173954776714c3dbcaccdf72a14ad6a72ac391d Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 13 Jan 2025 14:42:05 +0100 Subject: [PATCH 26/31] =?UTF-8?q?=F0=9F=A7=91=E2=80=8D=F0=9F=92=BB=20Add?= =?UTF-8?q?=20debug=20tool=20to=20disconnect=20merchant?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- modules/ppcp-settings/resources/js/data/debug.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/modules/ppcp-settings/resources/js/data/debug.js b/modules/ppcp-settings/resources/js/data/debug.js index 6380c6d6a..a57c62a05 100644 --- a/modules/ppcp-settings/resources/js/data/debug.js +++ b/modules/ppcp-settings/resources/js/data/debug.js @@ -5,6 +5,7 @@ export const addDebugTools = ( context, modules ) => { return; } + // Dump the current state of all our Redux stores. context.dumpStore = async () => { /* eslint-disable no-console */ if ( ! console?.groupCollapsed ) { @@ -43,10 +44,15 @@ export const addDebugTools = ( context, modules ) => { } ); }; - context.startOnboarding = () => { - const onboarding = wp.data.dispatch( OnboardingStoreName ); - onboarding.setCompleted( false ); - onboarding.setStep( 0 ); - onboarding.persist(); + // Disconnect the merchant and display the onboarding wizard. + context.disconnect = () => { + const common = wp.data.dispatch( CommonStoreName ); + + common.disconnectMerchant(); + + // eslint-disable-next-line no-console + console.log( 'Disconnected from PayPal. Reloading the page...' ); + + window.location.reload(); }; }; From 99d93888e1c3caa0ace72cd9db6b3ac567c42c0d Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 13 Jan 2025 14:42:59 +0100 Subject: [PATCH 27/31] =?UTF-8?q?=F0=9F=A7=91=E2=80=8D=F0=9F=92=BB=20Debug?= =?UTF-8?q?=20tool=20=E2=80=9Creset=E2=80=9D=20respects=20onboarding=20sta?= =?UTF-8?q?te?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/js/data/common/reducer.js | 2 ++ .../ppcp-settings/resources/js/data/debug.js | 22 ++++++++++++++++++- 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/modules/ppcp-settings/resources/js/data/common/reducer.js b/modules/ppcp-settings/resources/js/data/common/reducer.js index e9ff90a42..559024728 100644 --- a/modules/ppcp-settings/resources/js/data/common/reducer.js +++ b/modules/ppcp-settings/resources/js/data/common/reducer.js @@ -77,6 +77,8 @@ const commonReducer = createReducer( defaultTransient, defaultPersistent, { // Keep "read-only" details and initialization flags. cleanState.wooSettings = { ...state.wooSettings }; + cleanState.merchant = { ...state.merchant }; + cleanState.features = { ...state.features }; cleanState.isReady = true; return cleanState; diff --git a/modules/ppcp-settings/resources/js/data/debug.js b/modules/ppcp-settings/resources/js/data/debug.js index a57c62a05..861af8de9 100644 --- a/modules/ppcp-settings/resources/js/data/debug.js +++ b/modules/ppcp-settings/resources/js/data/debug.js @@ -33,12 +33,32 @@ export const addDebugTools = ( context, modules ) => { /* eslint-enable no-console */ }; + // Reset all Redux stores to their initial state. context.resetStore = () => { - const stores = [ OnboardingStoreName, CommonStoreName ]; + const stores = []; + const { isConnected } = wp.data.select( CommonStoreName ).merchant(); + + if ( isConnected ) { + // Make sure the Onboarding wizard is "completed". + const onboarding = wp.data.dispatch( OnboardingStoreName ); + onboarding.setCompleted( true ); + onboarding.persist(); + + // Reset all stores, except for the onboarding store. + stores.push( CommonStoreName ); + // TODO: Add other stores here once they are available. + } else { + // Only reset the common & onboarding stores to restart the onboarding wizard. + stores.push( CommonStoreName ); + stores.push( OnboardingStoreName ); + } stores.forEach( ( storeName ) => { const store = wp.data.dispatch( storeName ); + // eslint-disable-next-line no-console + console.log( `Reset store: ${ storeName }...` ); + store.reset(); store.persist(); } ); From 9d494a4a0c4261db2a70cfeed984248c51c0b1a7 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Tue, 14 Jan 2025 11:29:50 +0100 Subject: [PATCH 28/31] =?UTF-8?q?=F0=9F=8C=90=20Use=20new=20wording=20only?= =?UTF-8?q?=20for=20US=20stores?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../WelcomeDocs/AcdcFlow.js | 17 ++++++----------- .../WelcomeDocs/BcdcFlow.js | 8 +++----- .../Screens/Onboarding/StepPaymentMethods.js | 19 +++++++++++++------ 3 files changed, 22 insertions(+), 22 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/AcdcFlow.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/AcdcFlow.js index 87e6b6861..87488ed74 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/AcdcFlow.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/AcdcFlow.js @@ -53,9 +53,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 __( @@ -100,8 +98,7 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => { ) } titleType={ BADGE_BOX_TITLE_BIG } description={ __( - 'Accept debit/credit cards, PayPal, Apple Pay, Google Pay, and more.\n' + - 'Note: Additional application required for more methods', + 'Accept debit/credit cards, PayPal, Apple Pay, Google Pay, and more. Note: Additional application required for more methods', 'woocommerce-paypal-payments' ) } /> @@ -176,13 +173,12 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => {
@@ -251,13 +247,12 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => {
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/BcdcFlow.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/BcdcFlow.js index 7fa58bca4..6856e7caf 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/BcdcFlow.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/BcdcFlow.js @@ -97,8 +97,7 @@ const BcdcFlow = ( { isPayLater, storeCountry } ) => { ) } titleType={ BADGE_BOX_TITLE_BIG } description={ __( - 'Accept debit/credit cards, PayPal, Apple Pay, Google Pay, and more.\n' + - 'Note: Additional application required for more methods', + 'Accept debit/credit cards, PayPal, Apple Pay, Google Pay, and more. Note: Additional application required for more methods', 'woocommerce-paypal-payments' ) } /> @@ -159,13 +158,12 @@ const BcdcFlow = ( { isPayLater, storeCountry } ) => { 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 b6badf36c..5eeb51c5f 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepPaymentMethods.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepPaymentMethods.js @@ -17,14 +17,21 @@ const StepPaymentMethods = ( {} ) => { const { storeCountry, storeCurrency } = CommonHooks.useWooSettings(); + let screenTitle = __( + 'Add optional payment methods to your Checkout', + 'woocommerce-paypal-payments' + ); + + if ( 'US' === storeCountry ) { + screenTitle = __( + 'Add Expanded Checkout for More Ways to Pay', + 'woocommerce-paypal-payments' + ); + } + return (
- +
Date: Tue, 14 Jan 2025 12:04:20 +0100 Subject: [PATCH 29/31] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Slightly=20improve?= =?UTF-8?q?=20the=20BadgeBox=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/ReusableComponents/BadgeBox.js | 58 +++++++++++++------ 1 file changed, 40 insertions(+), 18 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/BadgeBox.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/BadgeBox.js index 24dc36134..337e5626c 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/BadgeBox.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/BadgeBox.js @@ -1,40 +1,62 @@ import data from '../../utils/data'; -const BadgeBox = ( props ) => { - const titleSize = - props.titleType && props.titleType === BADGE_BOX_TITLE_BIG - ? BADGE_BOX_TITLE_BIG - : BADGE_BOX_TITLE_SMALL; +const ImageBadge = ( { images } ) => { + if ( ! images || ! images.length ) { + return null; + } + + return ( + + + { images.map( ( badge ) => data().getImage( badge ) ) } + + + ); +}; + +// If `children` is not empty, it's output and wrapped in spaces. +const BadgeContent = ( { children } ) => { + if ( ! children ) { + return null; + } + return <> { children } ; +}; + +const BadgeBox = ( { + title, + textBadge, + imageBadge = [], + titleType = BADGE_BOX_TITLE_BIG, + description = '', +} ) => { + let titleSize = BADGE_BOX_TITLE_SMALL; + if ( BADGE_BOX_TITLE_BIG === titleType ) { + titleSize = BADGE_BOX_TITLE_BIG; + } const titleTextClassName = 'ppcp-r-badge-box__title-text ' + `ppcp-r-badge-box__title-text--${ titleSize }`; const titleBaseClassName = 'ppcp-r-badge-box__title'; - const titleClassName = props.imageBadge + const titleClassName = imageBadge.length ? `${ titleBaseClassName } ppcp-r-badge-box__title--has-image-badge` : titleBaseClassName; + return (
- { props.title } + { title } - { props.imageBadge && ( - - { props.imageBadge.map( ( badge ) => - data().getImage( badge ) - ) } - - ) } - - { props.textBadge } + + { textBadge }
- { props?.description && ( + { description && (

) } From ed66f2bc05f423b541ac4dde57ce32285c2b4f90 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Tue, 14 Jan 2025 12:36:03 +0100 Subject: [PATCH 30/31] =?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 31/31] =?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 (