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

.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"] }]

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(
 	(
 		{

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 = '' } ) => {

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 (
+		<img className={ className } alt="" src={ pathToImages + filename } />
+	);
+};
 
 const PaymentMethodIcon = ( { type } ) => (
-	<Icon
-		icon={ data().getImage( `icon-button-${ type }.svg` ) }
-		className="ppcp--method-icon"
-	/>
+	<Icon icon={ imageUrl( type ) } className="ppcp--method-icon" />
 );
 
 export default PaymentMethodIcon;

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

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
 		<div
 			className={ `ppcp-r-todo-item ${
 				isCompleted ? 'is-completed' : ''

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';
 

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,18 +55,18 @@ const filterSteps = ( steps, conditions ) => {
 	);
 };
 
-export const getSteps = ( flags ) => {
-	const { ownBrandOnly } = CommonHooks.useWooSettings();
-	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;

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 ) {

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. <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'
@@ -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'
@@ -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'
@@ -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'
@@ -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'
@@ -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'
@@ -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'

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/PaymentDependencyMessage.js

@@ -22,6 +22,7 @@ const PaymentDependencyMessage = ( { parentId, parentName } ) => {
 		{
 			methodLink: (
 				<strong>
+					{ /* eslint-disable-next-line jsx-a11y/anchor-is-valid */ }
 					<a
 						href="#"
 						onClick={ ( e ) => {

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/PaymentMethodValueDependencyMessage.js

@@ -32,6 +32,7 @@ const PaymentMethodValueDependencyMessage = ( {
 	return createInterpolateElement( template, {
 		methodLink: (
 			<strong>
+				{ /* eslint-disable-next-line jsx-a11y/anchor-is-valid */ }{ ' ' }
 				<a
 					href="#"
 					onClick={ ( e ) => {

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/SettingDependencyMessage.js

@@ -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 ) => {

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, <a target="_blank" href="%s">click here</a>.',
 				'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 ),

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 (
 		<SettingsBlock

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/Troubleshooting.js

@@ -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'

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?',

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 (
 		<div

modules/ppcp-settings/resources/js/data/common/actions-thunk.js

@@ -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(

modules/ppcp-settings/resources/js/data/features/resolvers.js

@@ -8,7 +8,6 @@
  * @file
  */
 
-import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
 
 import { REST_PATH } from './constants';

modules/ppcp-settings/resources/js/data/onboarding/selectors.test.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 import '@testing-library/jest-dom';
 
 import { PRODUCT_TYPES } from './configuration';