Skip to content

Component cleanup: Icons, paths, links, code style (3928) #3319

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: trunk
Choose a base branch
from
Open

Component cleanup: Icons, paths, links, code style (3928) #3319

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions .eslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"] }]
Expand Down
4 changes: 3 additions & 1 deletion modules/ppcp-settings/resources/js/Components/ReusableComponents/DataStoreControl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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(
(
{
Expand Down
1 change: 1 addition & 0 deletions modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/GenericIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// eslint-disable-next-line import/no-extraneous-dependencies
import React from 'react';

const GenericIcon = ( { imageName, className = '', alt = '' } ) => {
Expand Down
1 change: 1 addition & 0 deletions modules/ppcp-settings/resources/js/Components/ReusableComponents/PricingTitleBadge.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ const PricingTitleBadge = ( { item } ) => {
);

const label = sprintf(
// Translators: %1$s is the percentage, %2$s is the fixed amount.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice 👍

__( 'from %1$s%% + %2$s', 'woocommerce-paypal-payments' ),
percentage,
fixedAmount
Expand Down
1 change: 1 addition & 0 deletions ...p-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
<div
className={ `ppcp-r-todo-item ${
isCompleted ? 'is-completed' : ''
Expand Down
16 changes: 9 additions & 7 deletions modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepPaymentMethods.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,15 @@ const StepPaymentMethods = () => {
description: <OptionalMethodDescription />,
},
{
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,
},
];
Expand Down
9 changes: 8 additions & 1 deletion modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepProducts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable react-hooks/exhaustive-deps */
import { __, sprintf } from '@wordpress/i18n';
import { useEffect, useState } from '@wordpress/element';

Expand Down Expand Up @@ -38,7 +39,13 @@ const StepProducts = () => {
};

initChoices();
}, [ canUseSubscriptions, optionState, products, setProducts ] );
}, [
canUseSubscriptions,
optionState,
isCasualSeller,
products,
setProducts,
] );

const handleChange = ( key, checked ) => {
const getNewValue = () => {
Expand Down
2 changes: 2 additions & 0 deletions modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,9 @@ const filterSteps = ( steps, conditions ) => {
};

export const getSteps = ( flags ) => {
// eslint-disable-next-line react-hooks/rules-of-hooks
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of ignoring the "rules-of-hooks" check:

  • My initial idea was to pass all conditions as arguments, like getSteps( flags, skipPaymentsScreen ), ie keep it a plain helper function without dependencies (would also make it more testable)
  • An alternative would be to change the helper method to become a real hook -- change getSteps(flags) to useSteps() or similar, then we can drop the flags argument and collect all details inside the hook

The current mix of receiving input arguments and collecting other details via hooks is a bit messy

const { ownBrandOnly } = CommonHooks.useWooSettings();
// eslint-disable-next-line react-hooks/rules-of-hooks
const { isCasualSeller } = OnboardingHooks.useBusiness();

const steps = filterSteps( ALL_STEPS, [
Expand Down
21 changes: 14 additions & 7 deletions ...tings/resources/js/Components/Screens/Settings/Components/Overview/pay-later-messaging.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. <a target="_blank" href="%s">More about Pay Later</a>',
'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. <a target="_blank" href="%1$s">More about Pay Later</a>',
'woocommerce-paypal-payments'
),
'https://www.paypal.com/us/business/accept-payments/checkout/installments'
Expand All @@ -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 <strong>no extra cost</strong> and you get paid up front. <a target="_blank" href="%s">More about Pay in 3</a>',
'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 <strong>no extra cost</strong> and you get paid up front. <a target="_blank" href="%1$s">More about Pay in 3</a>',
'woocommerce-paypal-payments'
),
'https://www.paypal.com/uk/business/accept-payments/checkout/installments'
Expand All @@ -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.¹ <strong>There\'s no extra cost on top of your PayPal Checkout rate</strong>, and you get paid up front. <a target="_blank" href="%s">More about Pay in 4x</a>',
'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.¹ <strong>There\'s no extra cost on top of your PayPal Checkout rate</strong>, and you get paid up front. <a target="_blank" href="%1$s">More about Pay in 4x</a>',
'woocommerce-paypal-payments'
),
'https://www.paypal.com/fr/business/accept-payments/checkout/installments'
Expand All @@ -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 <strong>no extra cost</strong> and you get paid up front. <a target="_blank" href="%s">More about Pay in 4</a>',
'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 <strong>no extra cost</strong> and you get paid up front. <a target="_blank" href="%1$s">More about Pay in 4</a>',
'woocommerce-paypal-payments'
),
'https://www.paypal.com/au/business/accept-payments/checkout/installments'
Expand All @@ -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.¹ <strong>There\'s no extra cost on top of your PayPal Checkout rate</strong>, and you get paid up front. <a target="_blank" href="%s">More about Pay in 3 installments</a>',
'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.¹ <strong>There\'s no extra cost on top of your PayPal Checkout rate</strong>, and you get paid up front. <a target="_blank" href="%1$s">More about Pay in 3 installments</a>',
'woocommerce-paypal-payments'
),
'https://www.paypal.com/it/business/accept-payments/checkout/installments'
Expand All @@ -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.¹ <strong>There\'s no extra cost on top of your PayPal Checkout rate</strong>, and you get paid up front. <a target="_blank" href="%s">More about Pay in 3 installments</a>',
'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.¹ <strong>There\'s no extra cost on top of your PayPal Checkout rate</strong>, and you get paid up front. <a target="_blank" href="%1$s">More about Pay in 3 installments</a>',
'woocommerce-paypal-payments'
),
'https://www.paypal.com/es/business/accept-payments/checkout/installments'
Expand All @@ -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.¹ <strong>There\'s no extra cost</strong> and you get paid up front. <a target="_blank" href="%s">More about Pay Later</a>',
'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.¹ <strong>There\'s no extra cost</strong> and you get paid up front. <a target="_blank" href="%1$s">More about Pay Later</a>',
'woocommerce-paypal-payments'
),
'https://www.paypal.com/de/business/accept-payments/checkout/installments'
Expand Down
1 change: 1 addition & 0 deletions ...s/resources/js/Components/Screens/Settings/Components/Payment/PaymentDependencyMessage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ const PaymentDependencyMessage = ( { parentId, parentName } ) => {
{
methodLink: (
<strong>
{ /* eslint-disable-next-line jsx-a11y/anchor-is-valid */ }
<a
href="#"
onClick={ ( e ) => {
Expand Down
1 change: 1 addition & 0 deletions ...s/resources/js/Components/Screens/Settings/Components/Payment/SettingDependencyMessage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ const transformSectionId = ( sectionId ) => {
*/
const SettingLink = ( { settingName, sectionId } ) => (
<strong>
{ /* eslint-disable-next-line jsx-a11y/anchor-is-valid */ }
<a
href="#"
onClick={ ( e ) => {
Expand Down
8 changes: 5 additions & 3 deletions .../resources/js/Components/Screens/Settings/Components/Settings/Blocks/ConnectionDetails.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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, <a target="_blank" href="%s">click here</a>.',
'woocommerce-paypal-payments'
Expand Down Expand Up @@ -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 ),
Expand Down
7 changes: 6 additions & 1 deletion ...ttings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/OrderIntent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -17,7 +18,11 @@ const OrderIntent = () => {
if ( ! authorizeOnly && captureVirtualOnlyOrders ) {
setCaptureVirtualOnlyOrders( false );
}
}, [ authorizeOnly ] );
}, [
authorizeOnly,
captureVirtualOnlyOrders,
setCaptureVirtualOnlyOrders,
] );

return (
<SettingsBlock
Expand Down
1 change: 1 addition & 0 deletions ...gs/resources/js/Components/Screens/Settings/Components/Settings/Blocks/Troubleshooting.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ const Troubleshooting = () => {
<SettingsBlock
title={ __( 'Webhooks', 'woocommerce-paypal-payments' ) }
description={ sprintf(
// Translators: %s is the URL to the Webhook Status documentation.
__(
'The following PayPal webhooks are subscribed. More information about the webhooks is available in the <a href="%s">Webhook Status documentation</a>.',
'woocommerce-paypal-payments'
Expand Down
2 changes: 1 addition & 1 deletion ...gs/resources/js/Components/Screens/Settings/Components/Settings/Parts/DisconnectButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const DisconnectButton = () => {
const handleConfirm = useCallback( async () => {
await disconnectMerchant( resetFlag );
goToPluginSettings();
}, [ disconnectMerchant, resetFlag ] );
}, [ disconnectMerchant, goToPluginSettings, resetFlag ] );

const confirmationTitle = __(
'Disconnect from PayPal?',
Expand Down
15 changes: 12 additions & 3 deletions modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPayLaterMessaging.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const TabPayLaterMessaging = () => {
setProduct,
setShop,
setHome,
setCustom_placement,
setCustomPlacement,
} = PayLaterMessagingHooks.usePayLaterMessaging();
const PcpPayLaterConfigurator =
window.ppcpSettings?.PcpPayLaterConfigurator;
Expand Down Expand Up @@ -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 (
<div
Expand Down
2 changes: 1 addition & 1 deletion modules/ppcp-settings/resources/js/data/common/actions-thunk.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export function refresh() {
*
* @param {string[]} [products=[]] Which products/features to display in the ISU popup.
* @param {Object} [options={}] Options to customize the onboarding workflow.
* @param isSandbox True if is sandbox, otherwise false.
* @param {boolean} isSandbox True if is sandbox, otherwise false.
* @return {Function} The thunk function.
*/
export function onboardingUrl(
Expand Down
1 change: 0 additions & 1 deletion modules/ppcp-settings/resources/js/data/features/resolvers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
* @file
*/

import { __ } from '@wordpress/i18n';
import apiFetch from '@wordpress/api-fetch';

import { REST_PATH } from './constants';
Expand Down
1 change: 1 addition & 0 deletions modules/ppcp-settings/resources/js/data/onboarding/selectors.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// eslint-disable-next-line import/no-extraneous-dependencies
import '@testing-library/jest-dom';

import { PRODUCT_TYPES } from './configuration';
Expand Down
14 changes: 7 additions & 7 deletions modules/ppcp-settings/resources/js/data/pay-later-messaging/hooks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const useHooks = () => {
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 {
Expand All @@ -44,8 +44,8 @@ const useHooks = () => {
setShop,
home,
setHome,
custom_placement,
setCustom_placement,
customPlacement,
setCustomPlacement,
};
};

Expand All @@ -66,8 +66,8 @@ export const usePayLaterMessaging = () => {
setShop,
home,
setHome,
custom_placement,
setCustom_placement,
customPlacement,
setCustomPlacement,
} = useHooks();

return {
Expand All @@ -77,13 +77,13 @@ export const usePayLaterMessaging = () => {
product,
shop,
home,
custom_placement,
customPlacement,
},
setCart,
setCheckout,
setProduct,
setShop,
setHome,
setCustom_placement,
setCustomPlacement,
};
};
2 changes: 1 addition & 1 deletion modules/ppcp-settings/resources/js/data/pay-later-messaging/reducer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const defaultPersistent = Object.freeze( {
product: {},
shop: {},
home: {},
custom_placement: [],
customPlacement: [],
} );

// Reducer logic.
Expand Down
1 change: 0 additions & 1 deletion modules/ppcp-settings/resources/js/data/styling/hooks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import {
STYLING_PAYMENT_METHODS,
STYLING_SHAPES,
} from './configuration';
import { persistentData } from './selectors';

/**
* Single source of truth for access Redux details.
Expand Down
6 changes: 4 additions & 2 deletions modules/ppcp-settings/resources/js/hooks/useHandleConnections.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of ignoring these warnings, I think it would be better to correct the code to call hooks unconditionally:

  const sandboxData = CommonHooks.useSandbox();
  const productionData = CommonHooks.useProduction();
  
  const { onboardingUrl } = isSandbox ? sandboxData : productionData;

const { ownBrandOnly } = CommonHooks.useWooSettings();
const { products, options } =
OnboardingHooks.useDetermineProducts( ownBrandOnly );
Expand Down
2 changes: 1 addition & 1 deletion modules/ppcp-settings/resources/js/hooks/usePaymentGatewayRefresh.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 };
Expand Down
Loading
Loading