From 800bf1b7660d802b4358643e2d15f4b039abad2b Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Mon, 14 Apr 2025 14:37:16 +0200 Subject: [PATCH 1/7] Fix js lint some rules suppressed to avoid changing implementation --- .eslintrc | 6 ++++-- .../ReusableComponents/DataStoreControl.js | 4 +++- .../ReusableComponents/Icons/GenericIcon.js | 1 + .../ReusableComponents/PricingTitleBadge.js | 1 + .../SettingsBlocks/TodoSettingsBlock.js | 1 + .../Onboarding/Steps/StepPaymentMethods.js | 16 +++++++------- .../Screens/Onboarding/Steps/StepProducts.js | 9 +++++++- .../Screens/Onboarding/Steps/index.js | 2 ++ .../Overview/pay-later-messaging.js | 21 ++++++++++++------- .../Payment/PaymentDependencyMessage.js | 1 + .../Payment/SettingDependencyMessage.js | 1 + .../Settings/Blocks/ConnectionDetails.js | 8 ++++--- .../Components/Settings/Blocks/OrderIntent.js | 7 ++++++- .../Settings/Blocks/Troubleshooting.js | 1 + .../Settings/Parts/DisconnectButton.js | 2 +- .../Settings/Tabs/TabPayLaterMessaging.js | 15 ++++++++++--- .../resources/js/data/common/actions-thunk.js | 2 +- .../resources/js/data/features/resolvers.js | 1 - .../js/data/onboarding/selectors.test.js | 1 + .../js/data/pay-later-messaging/hooks.js | 14 ++++++------- .../js/data/pay-later-messaging/reducer.js | 2 +- .../resources/js/data/styling/hooks.js | 1 - .../js/hooks/useHandleConnections.js | 6 ++++-- .../js/hooks/usePaymentGatewayRefresh.js | 2 +- .../js/hooks/usePaymentGatewaySync.js | 4 ++-- .../js/hooks/useSettingDependencyState.js | 2 +- modules/ppcp-settings/resources/js/index.js | 2 ++ .../resources/js/switchSettingsUi.js | 2 +- 28 files changed, 91 insertions(+), 44 deletions(-) diff --git a/.eslintrc b/.eslintrc index 947e3acbed..fc74779bfb 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,11 +1,13 @@ { "extends": [ "plugin:@wordpress/eslint-plugin/recommended" ], "env": { - "browser": true + "browser": true, + "jest": true }, "globals": { "wc": true, - "jQuery": "readonly" + "jQuery": "readonly", + "ppcpSwitchSettingsUi": "readonly" }, "rules": { "no-console": ["error", { "allow": ["warn", "error"] }] diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/DataStoreControl.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/DataStoreControl.js index d336d458cc..51edc86b50 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/DataStoreControl.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/DataStoreControl.js @@ -1,3 +1,4 @@ +/* eslint-disable no-undef, jsdoc/no-undefined-types */ import { useCallback, useEffect, useRef, useState } from '@wordpress/element'; import { debounce } from '../../../../../ppcp-blocks/resources/js/Helper/debounce'; @@ -7,11 +8,12 @@ import { debounce } from '../../../../../ppcp-blocks/resources/js/Helper/debounc * A generic wrapper that adds debounced store updates to any controlled component. * * @param {Object} props - * @param {React.ComponentType} props.control The controlled component to render + * @param {React.ComponentType} props.control The controlled component to render // eslint-disable-line jsdoc/no-undefined-types * @param {string|number} props.value The controlled value * @param {Function} props.onChange Change handler * @param {number} [props.delay=300] Debounce delay in milliseconds */ + const DataStoreControl = React.forwardRef( ( { diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/GenericIcon.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/GenericIcon.js index 1b5e0a1840..65331f77c8 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/GenericIcon.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/GenericIcon.js @@ -1,3 +1,4 @@ +// eslint-disable-next-line import/no-extraneous-dependencies import React from 'react'; const GenericIcon = ( { imageName, className = '', alt = '' } ) => { diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/PricingTitleBadge.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/PricingTitleBadge.js index 1e5aba37c7..5fc60aebfa 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/PricingTitleBadge.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/PricingTitleBadge.js @@ -36,6 +36,7 @@ const PricingTitleBadge = ( { item } ) => { ); const label = sprintf( + // Translators: %1$s is the percentage, %2$s is the fixed amount. __( 'from %1$s%% + %2$s', 'woocommerce-paypal-payments' ), percentage, fixedAmount diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js index 806216f56a..0425f3b5d9 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js @@ -97,6 +97,7 @@ const TodoItem = ( { onDismiss, } ) => { return ( + // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
{ description: , }, { - title: ownBrandOnly ? __( - 'No thanks, I prefer to use a different provider for local payment methods', - 'woocommerce-paypal-payments' - ) : __( - 'No thanks, I prefer to use a different provider for processing credit cards, digital wallets, and local payment methods', - 'woocommerce-paypal-payments' - ), + title: ownBrandOnly + ? __( + 'No thanks, I prefer to use a different provider for local payment methods', + 'woocommerce-paypal-payments' + ) + : __( + 'No thanks, I prefer to use a different provider for processing credit cards, digital wallets, and local payment methods', + 'woocommerce-paypal-payments' + ), value: false, }, ]; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepProducts.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepProducts.js index 5497787fb1..7512e5304f 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepProducts.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepProducts.js @@ -1,3 +1,4 @@ +/* eslint-disable react-hooks/exhaustive-deps */ import { __, sprintf } from '@wordpress/i18n'; import { useEffect, useState } from '@wordpress/element'; @@ -38,7 +39,13 @@ const StepProducts = () => { }; initChoices(); - }, [ canUseSubscriptions, optionState, products, setProducts ] ); + }, [ + canUseSubscriptions, + optionState, + isCasualSeller, + products, + setProducts, + ] ); const handleChange = ( key, checked ) => { const getNewValue = () => { diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/index.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/index.js index 5d0790cf62..af167b3946 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/index.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/index.js @@ -57,7 +57,9 @@ const filterSteps = ( steps, conditions ) => { }; export const getSteps = ( flags ) => { + // eslint-disable-next-line react-hooks/rules-of-hooks const { ownBrandOnly } = CommonHooks.useWooSettings(); + // eslint-disable-next-line react-hooks/rules-of-hooks const { isCasualSeller } = OnboardingHooks.useBusiness(); const steps = filterSteps( ALL_STEPS, [ diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Overview/pay-later-messaging.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Overview/pay-later-messaging.js index 1354f9c576..10a35344cb 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Overview/pay-later-messaging.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Overview/pay-later-messaging.js @@ -3,8 +3,9 @@ import { __, sprintf } from '@wordpress/i18n'; export const payLaterMessaging = { US: { description: sprintf( + // Translators: %1$s: URL for more information. __( - 'Your customers can already buy now and pay later with PayPal — add messaging to your site to let them know. PayPal’s Pay Later helps boost merchants\' conversion rates and increases cart sizes by 39%%.¹ You get paid in full up front. More about Pay Later', + 'Your customers can already buy now and pay later with PayPal — add messaging to your site to let them know. PayPal’s Pay Later helps boost merchants\' conversion rates and increases cart sizes by 39%%.¹ You get paid in full up front. More about Pay Later', 'woocommerce-paypal-payments' ), 'https://www.paypal.com/us/business/accept-payments/checkout/installments' @@ -15,8 +16,9 @@ export const payLaterMessaging = { }, GB: { description: sprintf( + // Translators: %1$s: URL for more information. __( - 'Your customers can already buy now and pay later with PayPal — add messaging to your site to let them know. Pay in 3 gets a 216%% higher Average Order Value than a standard PayPal transaction.¹ There’s no extra cost and you get paid up front. More about Pay in 3', + 'Your customers can already buy now and pay later with PayPal — add messaging to your site to let them know. Pay in 3 gets a 216%% higher Average Order Value than a standard PayPal transaction.¹ There’s no extra cost and you get paid up front. More about Pay in 3', 'woocommerce-paypal-payments' ), 'https://www.paypal.com/uk/business/accept-payments/checkout/installments' @@ -30,8 +32,9 @@ export const payLaterMessaging = { }, FR: { description: sprintf( + // Translators: %1$s: URL for more information. __( - 'Your customers can already buy now and pay later with PayPal — add messaging to your site to let them know. Pay in 4x gets a 65%% higher Average Order Value than a standard PayPal transaction.¹ There\'s no extra cost on top of your PayPal Checkout rate, and you get paid up front. More about Pay in 4x', + 'Your customers can already buy now and pay later with PayPal — add messaging to your site to let them know. Pay in 4x gets a 65%% higher Average Order Value than a standard PayPal transaction.¹ There\'s no extra cost on top of your PayPal Checkout rate, and you get paid up front. More about Pay in 4x', 'woocommerce-paypal-payments' ), 'https://www.paypal.com/fr/business/accept-payments/checkout/installments' @@ -45,8 +48,9 @@ export const payLaterMessaging = { }, AU: { description: sprintf( + // Translators: %1$s: URL for more information. __( - 'Your customers can already buy now and pay later with PayPal — add messaging to your site to let them know. Pay in 4 gets more than a 100%% higher Average Order Value than a standard PayPal transaction.¹ There’s no extra cost and you get paid up front. More about Pay in 4', + 'Your customers can already buy now and pay later with PayPal — add messaging to your site to let them know. Pay in 4 gets more than a 100%% higher Average Order Value than a standard PayPal transaction.¹ There’s no extra cost and you get paid up front. More about Pay in 4', 'woocommerce-paypal-payments' ), 'https://www.paypal.com/au/business/accept-payments/checkout/installments' @@ -60,8 +64,9 @@ export const payLaterMessaging = { }, IT: { description: sprintf( + // Translators: %1$s: URL for more information. __( - 'Your customers can already buy now and pay later with PayPal — add messaging to your site to let them know. Pay in 3 installments gets about a 275%% higher Average Order Value than a standard PayPal transaction.¹ There\'s no extra cost on top of your PayPal Checkout rate, and you get paid up front. More about Pay in 3 installments', + 'Your customers can already buy now and pay later with PayPal — add messaging to your site to let them know. Pay in 3 installments gets about a 275%% higher Average Order Value than a standard PayPal transaction.¹ There\'s no extra cost on top of your PayPal Checkout rate, and you get paid up front. More about Pay in 3 installments', 'woocommerce-paypal-payments' ), 'https://www.paypal.com/it/business/accept-payments/checkout/installments' @@ -75,8 +80,9 @@ export const payLaterMessaging = { }, ES: { description: sprintf( + // Translators: %1$s: URL for more information. __( - 'Your customers can already buy now and pay later with PayPal — add messaging to your site to let them know. Pay in 3 installments gets about a 275%% higher Average Order Value than a standard PayPal transaction.¹ There\'s no extra cost on top of your PayPal Checkout rate, and you get paid up front. More about Pay in 3 installments', + 'Your customers can already buy now and pay later with PayPal — add messaging to your site to let them know. Pay in 3 installments gets about a 275%% higher Average Order Value than a standard PayPal transaction.¹ There\'s no extra cost on top of your PayPal Checkout rate, and you get paid up front. More about Pay in 3 installments', 'woocommerce-paypal-payments' ), 'https://www.paypal.com/es/business/accept-payments/checkout/installments' @@ -90,8 +96,9 @@ export const payLaterMessaging = { }, DE: { description: sprintf( + // Translators: %1$s: URL for more information. __( - 'Your customers can already buy now and pay later with PayPal — add messaging to your site to let them know. When you offer your customers Pay Later options, 57%% will be more likely to buy from you again.¹ There\'s no extra cost and you get paid up front. More about Pay Later', + 'Your customers can already buy now and pay later with PayPal — add messaging to your site to let them know. When you offer your customers Pay Later options, 57%% will be more likely to buy from you again.¹ There\'s no extra cost and you get paid up front. More about Pay Later', 'woocommerce-paypal-payments' ), 'https://www.paypal.com/de/business/accept-payments/checkout/installments' diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/PaymentDependencyMessage.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/PaymentDependencyMessage.js index ef835569bd..7fd26b1130 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/PaymentDependencyMessage.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/PaymentDependencyMessage.js @@ -22,6 +22,7 @@ const PaymentDependencyMessage = ( { parentId, parentName } ) => { { methodLink: ( + { /* eslint-disable-next-line jsx-a11y/anchor-is-valid */ } { diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/SettingDependencyMessage.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/SettingDependencyMessage.js index e824031e7f..72dc8d074f 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/SettingDependencyMessage.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/SettingDependencyMessage.js @@ -36,6 +36,7 @@ const transformSectionId = ( sectionId ) => { */ const SettingLink = ( { settingName, sectionId } ) => ( + { /* eslint-disable-next-line jsx-a11y/anchor-is-valid */ } { diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/ConnectionDetails.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/ConnectionDetails.js index 351c061136..d36ee5eb86 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/ConnectionDetails.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/ConnectionDetails.js @@ -73,6 +73,7 @@ const generateOptions = ( config, settings, updateFormValue ) => [ value: 'manual_connect', label: __( 'Manual Connect', 'woocommerce-paypal-payments' ), description: sprintf( + // translators: %s: Link to PayPal REST application documentation. __( 'For advanced users: Connect a custom PayPal REST app for full control over your integration. For more information on creating a PayPal REST application, click here.', 'woocommerce-paypal-payments' @@ -128,9 +129,10 @@ const generateOptions = ( config, settings, updateFormValue ) => [ const generateModeData = ( config, settings, updateFormValue ) => ( { title: config.title, description: config.description, - connectTitle: __( - `Connect ${ config.label } Account`, // TODO: Avoid variables inside __() translation literal. - 'woocommerce-paypal-payments' + connectTitle: sprintf( + /* translators: %s: Account type (e.g., Sandbox, Live) */ + __( 'Connect %s Account', 'woocommerce-paypal-payments' ), + config.label ), connectDescription: config.connectDescription, options: generateOptions( config, settings, updateFormValue ), diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/OrderIntent.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/OrderIntent.js index c67c8a768e..7837c2bb66 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/OrderIntent.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/OrderIntent.js @@ -1,4 +1,5 @@ import { __ } from '@wordpress/i18n'; +// eslint-disable-next-line import/no-extraneous-dependencies import { useEffect } from 'react'; import { ControlToggleButton } from '../../../../../ReusableComponents/Controls'; @@ -17,7 +18,11 @@ const OrderIntent = () => { if ( ! authorizeOnly && captureVirtualOnlyOrders ) { setCaptureVirtualOnlyOrders( false ); } - }, [ authorizeOnly ] ); + }, [ + authorizeOnly, + captureVirtualOnlyOrders, + setCaptureVirtualOnlyOrders, + ] ); return ( { Webhook Status documentation.', 'woocommerce-paypal-payments' diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Parts/DisconnectButton.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Parts/DisconnectButton.js index 83e014b841..9ad25bcf7a 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Parts/DisconnectButton.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Parts/DisconnectButton.js @@ -24,7 +24,7 @@ const DisconnectButton = () => { const handleConfirm = useCallback( async () => { await disconnectMerchant( resetFlag ); goToPluginSettings(); - }, [ disconnectMerchant, resetFlag ] ); + }, [ disconnectMerchant, goToPluginSettings, resetFlag ] ); const confirmationTitle = __( 'Disconnect from PayPal?', diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPayLaterMessaging.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPayLaterMessaging.js index 1a8a2c6249..f323623368 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPayLaterMessaging.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPayLaterMessaging.js @@ -9,7 +9,7 @@ const TabPayLaterMessaging = () => { setProduct, setShop, setHome, - setCustom_placement, + setCustomPlacement, } = PayLaterMessagingHooks.usePayLaterMessaging(); const PcpPayLaterConfigurator = window.ppcpSettings?.PcpPayLaterConfigurator; @@ -41,11 +41,20 @@ const TabPayLaterMessaging = () => { setProduct( data.config.product ); setShop( data.config.shop ); setHome( data.config.home ); - setCustom_placement( data.config.custom_placement ); + setCustomPlacement( data.config.custom_placement ); }, } ); } - }, [ PcpPayLaterConfigurator, config ] ); + }, [ + PcpPayLaterConfigurator, + config, + setCart, + setCheckout, + setCustomPlacement, + setHome, + setProduct, + setShop, + ] ); return (
{ const [ product, setProduct ] = usePersistent( 'product' ); const [ shop, setShop ] = usePersistent( 'shop' ); const [ home, setHome ] = usePersistent( 'home' ); - const [ custom_placement, setCustom_placement ] = + const [ customPlacement, setCustomPlacement ] = usePersistent( 'custom_placement' ); return { @@ -44,8 +44,8 @@ const useHooks = () => { setShop, home, setHome, - custom_placement, - setCustom_placement, + customPlacement, + setCustomPlacement, }; }; @@ -66,8 +66,8 @@ export const usePayLaterMessaging = () => { setShop, home, setHome, - custom_placement, - setCustom_placement, + customPlacement, + setCustomPlacement, } = useHooks(); return { @@ -77,13 +77,13 @@ export const usePayLaterMessaging = () => { product, shop, home, - custom_placement, + customPlacement, }, setCart, setCheckout, setProduct, setShop, setHome, - setCustom_placement, + setCustomPlacement, }; }; diff --git a/modules/ppcp-settings/resources/js/data/pay-later-messaging/reducer.js b/modules/ppcp-settings/resources/js/data/pay-later-messaging/reducer.js index 5843ef4005..ef1c3ad04e 100644 --- a/modules/ppcp-settings/resources/js/data/pay-later-messaging/reducer.js +++ b/modules/ppcp-settings/resources/js/data/pay-later-messaging/reducer.js @@ -24,7 +24,7 @@ const defaultPersistent = Object.freeze( { product: {}, shop: {}, home: {}, - custom_placement: [], + customPlacement: [], } ); // Reducer logic. diff --git a/modules/ppcp-settings/resources/js/data/styling/hooks.js b/modules/ppcp-settings/resources/js/data/styling/hooks.js index ecf999eaf5..092f8fc3b2 100644 --- a/modules/ppcp-settings/resources/js/data/styling/hooks.js +++ b/modules/ppcp-settings/resources/js/data/styling/hooks.js @@ -20,7 +20,6 @@ import { STYLING_PAYMENT_METHODS, STYLING_SHAPES, } from './configuration'; -import { persistentData } from './selectors'; /** * Single source of truth for access Redux details. diff --git a/modules/ppcp-settings/resources/js/hooks/useHandleConnections.js b/modules/ppcp-settings/resources/js/hooks/useHandleConnections.js index d174c26a73..861a2b332c 100644 --- a/modules/ppcp-settings/resources/js/hooks/useHandleConnections.js +++ b/modules/ppcp-settings/resources/js/hooks/useHandleConnections.js @@ -29,8 +29,10 @@ const ACTIVITIES = { export const useHandleOnboardingButton = ( isSandbox ) => { const { onboardingUrl } = isSandbox - ? CommonHooks.useSandbox() - : CommonHooks.useProduction(); + ? // eslint-disable-next-line react-hooks/rules-of-hooks + CommonHooks.useSandbox() + : // eslint-disable-next-line react-hooks/rules-of-hooks + CommonHooks.useProduction(); const { ownBrandOnly } = CommonHooks.useWooSettings(); const { products, options } = OnboardingHooks.useDetermineProducts( ownBrandOnly ); diff --git a/modules/ppcp-settings/resources/js/hooks/usePaymentGatewayRefresh.js b/modules/ppcp-settings/resources/js/hooks/usePaymentGatewayRefresh.js index a14d395e79..3037d409e5 100644 --- a/modules/ppcp-settings/resources/js/hooks/usePaymentGatewayRefresh.js +++ b/modules/ppcp-settings/resources/js/hooks/usePaymentGatewayRefresh.js @@ -70,7 +70,7 @@ export const usePaymentGatewayRefresh = () => { } // Update Redux state to mark gateways as refreshed. - const result = await refreshGateways(); + await refreshGateways(); setRefreshCompleted( true ); return { success: true }; diff --git a/modules/ppcp-settings/resources/js/hooks/usePaymentGatewaySync.js b/modules/ppcp-settings/resources/js/hooks/usePaymentGatewaySync.js index 69c64a07fe..4cd46399c1 100644 --- a/modules/ppcp-settings/resources/js/hooks/usePaymentGatewaySync.js +++ b/modules/ppcp-settings/resources/js/hooks/usePaymentGatewaySync.js @@ -19,8 +19,8 @@ export const usePaymentGatewaySync = () => { const { isReady: merchantIsReady } = CommonHooks.useStore(); const [ isSyncing, setIsSyncing ] = useState( false ); - const [ syncCompleted, setSyncCompleted ] = useState( false ); - const [ syncError, setSyncError ] = useState( null ); + const [ , setSyncCompleted ] = useState( false ); + const [ , setSyncError ] = useState( null ); // Use a ref to track if we've initiated a sync during this session. const syncAttemptedRef = useRef( false ); diff --git a/modules/ppcp-settings/resources/js/hooks/useSettingDependencyState.js b/modules/ppcp-settings/resources/js/hooks/useSettingDependencyState.js index f7e57bb6c1..b8d1f8b109 100644 --- a/modules/ppcp-settings/resources/js/hooks/useSettingDependencyState.js +++ b/modules/ppcp-settings/resources/js/hooks/useSettingDependencyState.js @@ -32,7 +32,7 @@ const useSettingDependencyState = ( methods ) => { if ( method.depends_on_settings.settings ) { const settingsObj = method.depends_on_settings.settings; - for ( const [ settingId, settingData ] of Object.entries( + for ( const [ , settingData ] of Object.entries( settingsObj ) ) { const requiredId = settingData.id; diff --git a/modules/ppcp-settings/resources/js/index.js b/modules/ppcp-settings/resources/js/index.js index f044642ba9..0bc2e8e9b2 100644 --- a/modules/ppcp-settings/resources/js/index.js +++ b/modules/ppcp-settings/resources/js/index.js @@ -1,4 +1,6 @@ +// eslint-disable-next-line import/no-extraneous-dependencies import React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies import { createRoot } from 'react-dom/client'; import App from './Components/App'; diff --git a/modules/ppcp-settings/resources/js/switchSettingsUi.js b/modules/ppcp-settings/resources/js/switchSettingsUi.js index 9304ceb30e..ffb99bbb3f 100644 --- a/modules/ppcp-settings/resources/js/switchSettingsUi.js +++ b/modules/ppcp-settings/resources/js/switchSettingsUi.js @@ -24,7 +24,7 @@ document.addEventListener( 'DOMContentLoaded', () => { } return response.json(); } ) - .then( ( data ) => { + .then( () => { window.location.reload(); } ) .catch( ( error ) => { From d8f3cd879c4eb06cd82d65fe9e45d91a33a40102 Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Tue, 10 Jun 2025 09:53:33 +0200 Subject: [PATCH 2/7] remove utils/data.js and refactor --- .../ReusableComponents/PaymentMethodIcon.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodIcon.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodIcon.js index 59066cd392..203bbd7ce4 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodIcon.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodIcon.js @@ -1,11 +1,17 @@ import { Icon } from '@wordpress/components'; -import data from '../../utils/data'; + +const imageUrl = ( name ) => { + const filename = `icon-button-${ name }.svg`; + const pathToImages = global.ppcpSettings.assets.imagesUrl; + const className = ''; + + return ( + + ); +}; const PaymentMethodIcon = ( { type } ) => ( - + ); export default PaymentMethodIcon; From b57566d9ac737b1cbcf8d8fa1bd61350757aac27 Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Tue, 10 Jun 2025 09:58:40 +0200 Subject: [PATCH 3/7] remove unnused states --- .../resources/js/hooks/usePaymentGatewaySync.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/modules/ppcp-settings/resources/js/hooks/usePaymentGatewaySync.js b/modules/ppcp-settings/resources/js/hooks/usePaymentGatewaySync.js index 4cd46399c1..c847d2e8f7 100644 --- a/modules/ppcp-settings/resources/js/hooks/usePaymentGatewaySync.js +++ b/modules/ppcp-settings/resources/js/hooks/usePaymentGatewaySync.js @@ -19,8 +19,6 @@ export const usePaymentGatewaySync = () => { const { isReady: merchantIsReady } = CommonHooks.useStore(); const [ isSyncing, setIsSyncing ] = useState( false ); - const [ , setSyncCompleted ] = useState( false ); - const [ , setSyncError ] = useState( null ); // Use a ref to track if we've initiated a sync during this session. const syncAttemptedRef = useRef( false ); @@ -36,7 +34,6 @@ export const usePaymentGatewaySync = () => { } setIsSyncing( true ); - setSyncError( null ); try { const result = await syncGateways(); @@ -44,13 +41,11 @@ export const usePaymentGatewaySync = () => { if ( result.success ) { // Add a small delay to ensure UI updates properly. await new Promise( ( resolve ) => setTimeout( resolve, 1000 ) ); - setSyncCompleted( true ); return { success: true }; } throw new Error( result.message || 'Failed to sync gateways' ); } catch ( error ) { - setSyncError( error ); // After an error, allow retry after 5 seconds. setTimeout( () => { syncAttemptedRef.current = false; From d1d792e82b6148abb33570ead855da20bc333d7e Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Tue, 10 Jun 2025 11:23:25 +0200 Subject: [PATCH 4/7] do not use hooks unconditionally --- .../resources/js/hooks/useHandleConnections.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/ppcp-settings/resources/js/hooks/useHandleConnections.js b/modules/ppcp-settings/resources/js/hooks/useHandleConnections.js index cdfbc58461..795b396471 100644 --- a/modules/ppcp-settings/resources/js/hooks/useHandleConnections.js +++ b/modules/ppcp-settings/resources/js/hooks/useHandleConnections.js @@ -28,9 +28,9 @@ const ACTIVITIES = { }; export const useHandleOnboardingButton = ( isSandbox ) => { - const { onboardingUrl } = isSandbox - ? CommonHooks.useSandbox() - : CommonHooks.useProduction(); + const sandboxData = CommonHooks.useSandbox(); + const productionData = CommonHooks.useProduction(); + const { onboardingUrl } = isSandbox ? sandboxData : productionData; const { ownBrandOnly, storeCountry } = CommonHooks.useWooSettings(); const { products, options } = OnboardingHooks.useDetermineProducts( ownBrandOnly, From fcf6b56c485450d51d5017502e3a3b7bd5fb1849 Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Tue, 10 Jun 2025 12:59:07 +0200 Subject: [PATCH 5/7] Refactored getSteps() to be a pure utility function without hook dependencies --- .../Screens/Onboarding/Steps/index.js | 19 +++++++---------- .../js/Components/Screens/Onboarding/index.js | 21 +++++++++++++++---- 2 files changed, 25 insertions(+), 15 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/index.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/index.js index af167b3946..77f0daa447 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/index.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/index.js @@ -1,6 +1,5 @@ import { __ } from '@wordpress/i18n'; -import { CommonHooks, OnboardingHooks } from '../../../../data'; import StepWelcome from './StepWelcome'; import StepBusiness from './StepBusiness'; import StepProducts from './StepProducts'; @@ -56,20 +55,18 @@ const filterSteps = ( steps, conditions ) => { ); }; -export const getSteps = ( flags ) => { - // eslint-disable-next-line react-hooks/rules-of-hooks - const { ownBrandOnly } = CommonHooks.useWooSettings(); - // eslint-disable-next-line react-hooks/rules-of-hooks - const { isCasualSeller } = OnboardingHooks.useBusiness(); +export const getSteps = ( flags, skipConditions = {} ) => { + const { canUseCasualSelling = false } = flags; + const { + skipBusinessStep = ! canUseCasualSelling, + skipPaymentMethodsStep = false, + } = skipConditions; const steps = filterSteps( ALL_STEPS, [ // Casual selling: Unlock the "Personal Account" choice. - ( step ) => flags.canUseCasualSelling || step.id !== 'business', + ( step ) => ! skipBusinessStep || step.id !== 'business', // Skip payment methods screen. - ( step ) => - step.id !== 'methods' || - ( ! flags.shouldSkipPaymentMethods && - ! ( ownBrandOnly && isCasualSeller ) ), + ( step ) => step.id !== 'methods' || ! skipPaymentMethodsStep, ] ); const totalStepsCount = steps.length; 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 875eef258b..15680d16a7 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/index.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/index.js @@ -1,13 +1,26 @@ -import Container from '../../ReusableComponents/Container'; -import { OnboardingHooks } from '../../../data'; - import { getSteps, getCurrentStep } from './Steps'; +import { OnboardingHooks, CommonHooks } from '../../../data'; import OnboardingNavigation from './Components/Navigation'; +import Container from '../../ReusableComponents/Container'; const OnboardingScreen = () => { const { step, setStep, flags } = OnboardingHooks.useSteps(); + const { ownBrandOnly } = CommonHooks.useWooSettings(); + const { isCasualSeller } = OnboardingHooks.useBusiness(); + + const shouldSkipPaymentMethods = flags?.shouldSkipPaymentMethods || false; + const canUseCasualSelling = flags?.canUseCasualSelling || false; + + // Determine if payment methods screen should be skipped + const skipPaymentMethodsStep = + shouldSkipPaymentMethods || ( ownBrandOnly && isCasualSeller ); + + // Pass all conditions as arguments + const Steps = getSteps( flags, { + skipBusinessStep: ! canUseCasualSelling, + skipPaymentMethodsStep, + } ); - const Steps = getSteps( flags ); const currentStep = getCurrentStep( step, Steps ); if ( ! currentStep?.StepComponent ) { From e348ff46533403e8dfe05e6d736301ca7111de08 Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Tue, 10 Jun 2025 14:46:00 +0200 Subject: [PATCH 6/7] Fix new lint errors after merge --- .../js/Components/Screens/Onboarding/Steps/StepWelcome.js | 1 - .../Components/Payment/PaymentMethodValueDependencyMessage.js | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepWelcome.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepWelcome.js index 47b846889b..184a14e274 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepWelcome.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepWelcome.js @@ -14,7 +14,6 @@ import { usePaymentConfig } from '../hooks/usePaymentConfig'; const StepWelcome = ( { setStep, currentStep } ) => { const { storeCountry, ownBrandOnly } = CommonHooks.useWooSettings(); const { canUseCardPayments, canUseFastlane } = OnboardingHooks.useFlags(); - const { isCasualSeller } = OnboardingHooks.useBusiness(); const { icons } = usePaymentConfig( storeCountry, diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/PaymentMethodValueDependencyMessage.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/PaymentMethodValueDependencyMessage.js index 899e163385..e839ccd4b6 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/PaymentMethodValueDependencyMessage.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/PaymentMethodValueDependencyMessage.js @@ -32,6 +32,7 @@ const PaymentMethodValueDependencyMessage = ( { return createInterpolateElement( template, { methodLink: ( + { /* eslint-disable-next-line jsx-a11y/anchor-is-valid */ }{ ' ' } { From f980dd289baed17ee72600c94697a5186747fb5f Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Tue, 10 Jun 2025 15:14:34 +0200 Subject: [PATCH 7/7] fix cs --- modules/ppcp-card-fields/services.php | 2 +- .../src/Settings/Fields/connection-tab-fields.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/ppcp-card-fields/services.php b/modules/ppcp-card-fields/services.php index 78405a3e2b..4933ce1934 100644 --- a/modules/ppcp-card-fields/services.php +++ b/modules/ppcp-card-fields/services.php @@ -78,7 +78,7 @@ 'RE', 'GP', 'GF', - 'MQ' + 'MQ', ) ); }, diff --git a/modules/ppcp-wc-gateway/src/Settings/Fields/connection-tab-fields.php b/modules/ppcp-wc-gateway/src/Settings/Fields/connection-tab-fields.php index a897f78ba8..8fd27887cc 100644 --- a/modules/ppcp-wc-gateway/src/Settings/Fields/connection-tab-fields.php +++ b/modules/ppcp-wc-gateway/src/Settings/Fields/connection-tab-fields.php @@ -539,7 +539,7 @@ 'requirements' => array(), 'gateway' => Settings::CONNECTION_TAB_ID, ), - 'stay_updated' => array( + 'stay_updated' => array( 'title' => __( 'Stay Updated', 'woocommerce-paypal-payments' ), 'type' => 'checkbox', 'desc_tip' => true,