Fix settings rendering on the Advanced Fraud Protection page (#9521)

Automattic · Oct 22, 2024 · 27c562b · 27c562b
1 parent 278acb7
commit 27c562b
Show file tree

Hide file tree

Showing 24 changed files with 111 additions and 188 deletions.
diff --git a/changelog/fix-9520-advanced-fraud-protection-settings b/changelog/fix-9520-advanced-fraud-protection-settings
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix settings display on the advanced fraud protection page.
diff --git a/client/settings/fraud-protection/advanced-settings/allow-countries-notice.tsx b/client/settings/fraud-protection/advanced-settings/allow-countries-notice.tsx
@@ -45,15 +45,15 @@ interface AllowedCountriesNoticeProps {
 const AllowedCountriesNotice: React.FC< AllowedCountriesNoticeProps > = ( {
 	setting,
 } ) => {
-	const { protectionSettingsUI, protectionSettingsChanged } = useContext(
+	const { protectionSettingsUI } = useContext(
 		FraudPreventionSettingsContext
 	);
 	const [ isBlocking, setIsBlocking ] = useState(
 		protectionSettingsUI[ setting ]?.block ?? false
 	);
 	useEffect( () => {
 		setIsBlocking( protectionSettingsUI[ setting ]?.block ?? false );
-	}, [ protectionSettingsUI, setting, protectionSettingsChanged ] );
+	}, [ protectionSettingsUI, setting ] );
 
 	const supportedCountriesType = getSupportedCountriesType();
 	const settingCountries = getSettingCountries();

diff --git a/client/settings/fraud-protection/advanced-settings/cards/order-items-threshold.tsx b/client/settings/fraud-protection/advanced-settings/cards/order-items-threshold.tsx
@@ -1,14 +1,7 @@
 /**
  * External dependencies
  */
-import React, {
-	useContext,
-	useEffect,
-	useState,
-	useMemo,
-	Dispatch,
-	SetStateAction,
-} from 'react';
+import React, { useContext, useMemo, Dispatch, SetStateAction } from 'react';
 import { __ } from '@wordpress/i18n';
 import { TextControl } from '@wordpress/components';
 
@@ -36,7 +29,6 @@ const OrderItemsThresholdCustomForm: React.FC< OrderItemsThresholdCustomFormProp
 	const {
 		protectionSettingsUI,
 		setProtectionSettingsUI,
-		setProtectionSettingsChanged,
 		setIsDirty,
 	} = useContext( FraudPreventionSettingsContext );
 
@@ -48,40 +40,29 @@ const OrderItemsThresholdCustomForm: React.FC< OrderItemsThresholdCustomFormProp
 		[ protectionSettingsUI, setting ]
 	);
 
-	const minItemsTemp = parseInt( settingUI.min_items + '', 10 );
-	const maxItemsTemp = parseInt( settingUI.max_items + '', 10 );
+	const minItems = parseInt( settingUI?.min_items + '', 10 );
+	const maxItems = parseInt( settingUI?.max_items + '', 10 );
 
-	const [ minItemsCount, setMinItemsCount ] = useState(
-		isNaN( minItemsTemp ) ? '' : minItemsTemp
-	);
-	const [ maxItemsCount, setMaxItemsCount ] = useState(
-		isNaN( maxItemsTemp ) ? '' : maxItemsTemp
-	);
-
-	useEffect( () => {
-		settingUI.min_items = minItemsCount
-			? parseInt( minItemsCount + '', 10 )
-			: minItemsCount;
-		settingUI.max_items = maxItemsCount
-			? parseInt( maxItemsCount + '', 10 )
-			: maxItemsCount;
-		setProtectionSettingsUI( protectionSettingsUI );
-		setProtectionSettingsChanged( ( prev ) => ! prev );
-	}, [
-		settingUI,
-		minItemsCount,
-		maxItemsCount,
-		protectionSettingsUI,
-		setProtectionSettingsUI,
-		setProtectionSettingsChanged,
-	] );
+	const minItemsCount = isNaN( minItems ) ? '' : minItems;
+	const maxItemsCount = isNaN( maxItems ) ? '' : maxItems;
 
 	const isItemRangeEmpty =
 		! parseInt( minItemsCount + '', 10 ) &&
 		! parseInt( maxItemsCount + '', 10 );
 	const isMinGreaterThanMax =
 		parseInt( minItemsCount + '', 10 ) > parseInt( maxItemsCount + '', 10 );
 
+	const handleInputChange = ( name: string ) => ( val: string ) => {
+		setProtectionSettingsUI( ( settings ) => ( {
+			...settings,
+			[ setting ]: {
+				...settings[ setting ],
+				[ name ]: val ? parseInt( val + '', 10 ) : val,
+			},
+		} ) );
+		setIsDirty( true );
+	};
+
 	return (
 		<div className="fraud-protection-rule-toggle-children-container">
 			<strong>Limits</strong>
@@ -98,10 +79,7 @@ const OrderItemsThresholdCustomForm: React.FC< OrderItemsThresholdCustomFormProp
 						placeholder={ '0' }
 						value={ minItemsCount }
 						type="number"
-						onChange={ ( value ) => {
-							setMinItemsCount( value );
-							setIsDirty( true );
-						} }
+						onChange={ handleInputChange( 'min_items' ) }
 						onKeyDown={ ( e ) =>
 							/^[+-.,e]$/m.test( e.key ) && e.preventDefault()
 						}
@@ -125,10 +103,7 @@ const OrderItemsThresholdCustomForm: React.FC< OrderItemsThresholdCustomFormProp
 						placeholder={ '0' }
 						type="number"
 						value={ maxItemsCount }
-						onChange={ ( value ) => {
-							setMaxItemsCount( value );
-							setIsDirty( true );
-						} }
+						onChange={ handleInputChange( 'max_items' ) }
 						onKeyDown={ ( e ) =>
 							/^[+-.,e]$/m.test( e.key ) && e.preventDefault()
 						}

diff --git a/client/settings/fraud-protection/advanced-settings/cards/purchase-price-threshold.tsx b/client/settings/fraud-protection/advanced-settings/cards/purchase-price-threshold.tsx
@@ -1,14 +1,7 @@
 /**
  * External dependencies
  */
-import React, {
-	useContext,
-	useEffect,
-	useState,
-	useMemo,
-	SetStateAction,
-	Dispatch,
-} from 'react';
+import React, { useContext, useMemo, SetStateAction, Dispatch } from 'react';
 import { __ } from '@wordpress/i18n';
 import AmountInput from 'wcpay/components/amount-input';
 
@@ -55,7 +48,6 @@ const PurchasePriceThresholdCustomForm: React.FC< PurchasePriceThresholdCustomFo
 	const {
 		protectionSettingsUI,
 		setProtectionSettingsUI,
-		setProtectionSettingsChanged,
 		setIsDirty,
 	} = useContext( FraudPreventionSettingsContext );
 
@@ -67,25 +59,8 @@ const PurchasePriceThresholdCustomForm: React.FC< PurchasePriceThresholdCustomFo
 		[ protectionSettingsUI, setting ]
 	);
 
-	const minAmountTemp = parseFloat( settingUI.min_amount + '' );
-	const maxAmountTemp = parseFloat( settingUI.max_amount + '' );
-
-	const [ minAmount, setMinAmount ] = useState( minAmountTemp ?? '' );
-	const [ maxAmount, setMaxAmount ] = useState( maxAmountTemp ?? '' );
-
-	useEffect( () => {
-		settingUI.min_amount = minAmount ? parseFloat( minAmount + '' ) : null;
-		settingUI.max_amount = maxAmount ? parseFloat( maxAmount + '' ) : null;
-		setProtectionSettingsUI( protectionSettingsUI );
-		setProtectionSettingsChanged( ( prev ) => ! prev );
-	}, [
-		minAmount,
-		maxAmount,
-		protectionSettingsUI,
-		setProtectionSettingsUI,
-		setProtectionSettingsChanged,
-		settingUI,
-	] );
+	const minAmount = parseFloat( settingUI.min_amount + '' );
+	const maxAmount = parseFloat( settingUI.max_amount + '' );
 
 	const areInputsEmpty =
 		! getFloatValue( minAmount + '' ) && ! getFloatValue( maxAmount + '' );
@@ -96,6 +71,17 @@ const PurchasePriceThresholdCustomForm: React.FC< PurchasePriceThresholdCustomFo
 
 	const currencySymbol = getCurrencySymbol();
 
+	const handleAmountInputChange = ( name: string ) => ( val: string ) => {
+		setProtectionSettingsUI( ( settings ) => ( {
+			...settings,
+			[ setting ]: {
+				...settings[ setting ],
+				[ name ]: val ? parseFloat( val + '' ) : null,
+			},
+		} ) );
+		setIsDirty( true );
+	};
+
 	return (
 		<div className="fraud-protection-rule-toggle-children-container">
 			<strong>Limits</strong>
@@ -112,10 +98,7 @@ const PurchasePriceThresholdCustomForm: React.FC< PurchasePriceThresholdCustomFo
 						prefix={ currencySymbol }
 						placeholder={ '0.00' }
 						value={ minAmount.toString() }
-						onChange={ ( val ) => {
-							setMinAmount( Number( val ) );
-							setIsDirty( true );
-						} }
+						onChange={ handleAmountInputChange( 'min_amount' ) }
 						help={ __(
 							'Leave blank for no limit',
 							'woocommerce-payments'
@@ -134,10 +117,7 @@ const PurchasePriceThresholdCustomForm: React.FC< PurchasePriceThresholdCustomFo
 						prefix={ currencySymbol }
 						placeholder={ '0.00' }
 						value={ maxAmount.toString() }
-						onChange={ ( val ) => {
-							setMaxAmount( Number( val ) );
-							setIsDirty( true );
-						} }
+						onChange={ handleAmountInputChange( 'max_amount' ) }
 						help={ __(
 							'Leave blank for no limit',
 							'woocommerce-payments'

diff --git a/...raud-protection/advanced-settings/cards/test/__snapshots__/address-mismatch.test.tsx.snap b/...raud-protection/advanced-settings/cards/test/__snapshots__/address-mismatch.test.tsx.snap
@@ -158,6 +158,7 @@ exports[`Address mismatch card renders correctly when enabled 1`] = `
               >
                 <input
                   aria-describedby="inspector-toggle-control-1__help"
+                  checked=""
                   class="components-form-toggle__input"
                   id="inspector-toggle-control-1"
                   type="checkbox"
@@ -265,6 +266,7 @@ exports[`Address mismatch card renders correctly when enabled and checked 1`] =
               >
                 <input
                   aria-describedby="inspector-toggle-control-2__help"
+                  checked=""
                   class="components-form-toggle__input"
                   id="inspector-toggle-control-2"
                   type="checkbox"

diff --git a/...tection/advanced-settings/cards/test/__snapshots__/international-ip-address.test.tsx.snap b/...tection/advanced-settings/cards/test/__snapshots__/international-ip-address.test.tsx.snap
@@ -66,6 +66,7 @@ exports[`International IP address card renders correctly when enabled 1`] = `
               >
                 <input
                   aria-describedby="inspector-toggle-control-2__help"
+                  checked=""
                   class="components-form-toggle__input"
                   id="inspector-toggle-control-2"
                   type="checkbox"
@@ -137,7 +138,7 @@ exports[`International IP address card renders correctly when enabled 1`] = `
                 data-wp-c16t="true"
                 data-wp-component="FlexItem"
               >
-                Orders from outside of the following countries will be blocked by the filter: 
+                Orders from outside of the following countries will be screened by the filter: 
                 <strong>
                   Canada, United States
                 </strong>
@@ -232,6 +233,7 @@ exports[`International IP address card renders correctly when enabled and checke
               >
                 <input
                   aria-describedby="inspector-toggle-control-3__help"
+                  checked=""
                   class="components-form-toggle__input"
                   id="inspector-toggle-control-3"
                   type="checkbox"
@@ -588,7 +590,7 @@ exports[`International IP address card renders correctly when woocommerce_allowe
                 data-wp-c16t="true"
                 data-wp-component="FlexItem"
               >
-                Orders from the following countries will be blocked by the filter: 
+                Orders from the following countries will be screened by the filter: 
                 <strong>
                   Canada, United States
                 </strong>
@@ -753,7 +755,7 @@ exports[`International IP address card renders correctly when woocommerce_allowe
                 data-wp-c16t="true"
                 data-wp-component="FlexItem"
               >
-                Orders from outside of the following countries will be blocked by the filter: 
+                Orders from outside of the following countries will be screened by the filter: 
                 <strong>
                   Canada, United States
                 </strong>

diff --git a/...d-protection/advanced-settings/cards/test/__snapshots__/ip-address-mismatch.test.tsx.snap b/...d-protection/advanced-settings/cards/test/__snapshots__/ip-address-mismatch.test.tsx.snap
@@ -174,6 +174,7 @@ exports[`International billing address card renders correctly when enabled 1`] =
               >
                 <input
                   aria-describedby="inspector-toggle-control-1__help"
+                  checked=""
                   class="components-form-toggle__input"
                   id="inspector-toggle-control-1"
                   type="checkbox"
@@ -289,6 +290,7 @@ exports[`International billing address card renders correctly when enabled and c
               >
                 <input
                   aria-describedby="inspector-toggle-control-2__help"
+                  checked=""
                   class="components-form-toggle__input"
                   id="inspector-toggle-control-2"
                   type="checkbox"

diff --git a/...protection/advanced-settings/cards/test/__snapshots__/order-items-threshold.test.tsx.snap b/...protection/advanced-settings/cards/test/__snapshots__/order-items-threshold.test.tsx.snap
@@ -158,6 +158,7 @@ exports[`Order items threshold card renders correctly when enabled 1`] = `
               >
                 <input
                   aria-describedby="inspector-toggle-control-1__help"
+                  checked=""
                   class="components-form-toggle__input"
                   id="inspector-toggle-control-1"
                   type="checkbox"
@@ -389,6 +390,7 @@ exports[`Order items threshold card renders correctly when enabled and checked 1
               >
                 <input
                   aria-describedby="inspector-toggle-control-2__help"
+                  checked=""
                   class="components-form-toggle__input"
                   id="inspector-toggle-control-2"
                   type="checkbox"

diff --git a/...tection/advanced-settings/cards/test/__snapshots__/purchase-price-threshold.test.tsx.snap b/...tection/advanced-settings/cards/test/__snapshots__/purchase-price-threshold.test.tsx.snap
@@ -158,6 +158,7 @@ exports[`Purchase price threshold card renders correctly when enabled 1`] = `
               >
                 <input
                   aria-describedby="inspector-toggle-control-1__help"
+                  checked=""
                   class="components-form-toggle__input"
                   id="inspector-toggle-control-1"
                   type="checkbox"
@@ -391,6 +392,7 @@ exports[`Purchase price threshold card renders correctly when enabled and checke
               >
                 <input
                   aria-describedby="inspector-toggle-control-2__help"
+                  checked=""
                   class="components-form-toggle__input"
                   id="inspector-toggle-control-2"
                   type="checkbox"

diff --git a/client/settings/fraud-protection/advanced-settings/cards/test/address-mismatch.test.tsx b/client/settings/fraud-protection/advanced-settings/cards/test/address-mismatch.test.tsx
@@ -32,8 +32,6 @@ describe( 'Address mismatch card', () => {
 	const contextValue = {
 		protectionSettingsUI: settings,
 		setProtectionSettingsUI: setSettings,
-		protectionSettingsChanged: false,
-		setProtectionSettingsChanged: jest.fn(),
 		setIsDirty: jest.fn(),
 	};
 	test( 'renders correctly', () => {

diff --git a/client/settings/fraud-protection/advanced-settings/cards/test/avs-mismatch.test.tsx b/client/settings/fraud-protection/advanced-settings/cards/test/avs-mismatch.test.tsx
@@ -40,8 +40,6 @@ describe( 'AVS mismatch card', () => {
 		const contextValue = {
 			protectionSettingsUI: settings,
 			setProtectionSettingsUI: setSettings,
-			protectionSettingsChanged: false,
-			setProtectionSettingsChanged: jest.fn(),
 			setIsDirty: jest.fn(),
 		};
 		const { container } = render(
@@ -69,8 +67,6 @@ describe( 'AVS mismatch card', () => {
 		const contextValue = {
 			protectionSettingsUI: settings,
 			setProtectionSettingsUI: setSettings,
-			protectionSettingsChanged: false,
-			setProtectionSettingsChanged: jest.fn(),
 			setIsDirty: jest.fn(),
 		};
 		const { container } = render(

diff --git a/client/settings/fraud-protection/advanced-settings/cards/test/cvc-verification.test.tsx b/client/settings/fraud-protection/advanced-settings/cards/test/cvc-verification.test.tsx
@@ -40,8 +40,6 @@ describe( 'CVC verification card', () => {
 		const contextValue = {
 			protectionSettingsUI: settings,
 			setProtectionSettingsUI: setSettings,
-			protectionSettingsChanged: false,
-			setProtectionSettingsChanged: jest.fn(),
 			setIsDirty: jest.fn(),
 		};
 		const { container } = render(
@@ -72,8 +70,6 @@ describe( 'CVC verification card', () => {
 		const contextValue = {
 			protectionSettingsUI: settings,
 			setProtectionSettingsUI: setSettings,
-			protectionSettingsChanged: false,
-			setProtectionSettingsChanged: jest.fn(),
 			setIsDirty: jest.fn(),
 		};
 		const { container } = render(

diff --git a/.../settings/fraud-protection/advanced-settings/cards/test/international-ip-address.test.tsx b/.../settings/fraud-protection/advanced-settings/cards/test/international-ip-address.test.tsx
@@ -41,8 +41,6 @@ describe( 'International IP address card', () => {
 	const contextValue = {
 		protectionSettingsUI: settings,
 		setProtectionSettingsUI: setSettings,
-		protectionSettingsChanged: false,
-		setProtectionSettingsChanged: jest.fn(),
 		isDirty: false,
 		setIsDirty: jest.fn(),
 	};

diff --git a/client/settings/fraud-protection/advanced-settings/cards/test/ip-address-mismatch.test.tsx b/client/settings/fraud-protection/advanced-settings/cards/test/ip-address-mismatch.test.tsx
@@ -38,8 +38,6 @@ describe( 'International billing address card', () => {
 	const contextValue = {
 		protectionSettingsUI: settings,
 		setProtectionSettingsUI: setSettings,
-		protectionSettingsChanged: false,
-		setProtectionSettingsChanged: jest.fn(),
 		setIsDirty: jest.fn(),
 	};
 	global.wcSettings = {

diff --git a/client/settings/fraud-protection/advanced-settings/cards/test/order-items-threshold.test.tsx b/client/settings/fraud-protection/advanced-settings/cards/test/order-items-threshold.test.tsx
@@ -37,8 +37,6 @@ describe( 'Order items threshold card', () => {
 	const contextValue = {
 		protectionSettingsUI: settings,
 		setProtectionSettingsUI: setSettings,
-		protectionSettingsChanged: false,
-		setProtectionSettingsChanged: jest.fn(),
 		setIsDirty: jest.fn(),
 	};
 	test( 'renders correctly', () => {