From 27c562b200ecb8059eec36af4d99f0de05617c19 Mon Sep 17 00:00:00 2001 From: Eduardo Umpierre Date: Tue, 22 Oct 2024 18:03:34 -0300 Subject: [PATCH] Fix settings rendering on the Advanced Fraud Protection page (#9521) --- ...ix-9520-advanced-fraud-protection-settings | 4 + .../allow-countries-notice.tsx | 4 +- .../cards/order-items-threshold.tsx | 61 +++++---------- .../cards/purchase-price-threshold.tsx | 52 ++++--------- .../address-mismatch.test.tsx.snap | 2 + .../international-ip-address.test.tsx.snap | 8 +- .../ip-address-mismatch.test.tsx.snap | 2 + .../order-items-threshold.test.tsx.snap | 2 + .../purchase-price-threshold.test.tsx.snap | 2 + .../cards/test/address-mismatch.test.tsx | 2 - .../cards/test/avs-mismatch.test.tsx | 4 - .../cards/test/cvc-verification.test.tsx | 4 - .../test/international-ip-address.test.tsx | 2 - .../cards/test/ip-address-mismatch.test.tsx | 2 - .../cards/test/order-items-threshold.test.tsx | 2 - .../test/purchase-price-threshold.test.tsx | 2 - .../advanced-settings/context.ts | 2 - .../advanced-settings/index.tsx | 8 +- .../advanced-settings/rule-toggle.tsx | 76 ++++++++----------- .../test/__snapshots__/index.test.tsx.snap | 22 +++--- .../__snapshots__/rule-toggle.test.tsx.snap | 4 + .../test/allow-countries-notice.test.tsx | 2 - .../test/rule-toggle.test.tsx | 26 ++----- .../settings/fraud-protection/interfaces.ts | 4 +- 24 files changed, 111 insertions(+), 188 deletions(-) create mode 100644 changelog/fix-9520-advanced-fraud-protection-settings diff --git a/changelog/fix-9520-advanced-fraud-protection-settings b/changelog/fix-9520-advanced-fraud-protection-settings new file mode 100644 index 00000000000..b08dee60572 --- /dev/null +++ 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 index bd03bea132c..e35671b83f2 100644 --- a/client/settings/fraud-protection/advanced-settings/allow-countries-notice.tsx +++ b/client/settings/fraud-protection/advanced-settings/allow-countries-notice.tsx @@ -45,7 +45,7 @@ interface AllowedCountriesNoticeProps { const AllowedCountriesNotice: React.FC< AllowedCountriesNoticeProps > = ( { setting, } ) => { - const { protectionSettingsUI, protectionSettingsChanged } = useContext( + const { protectionSettingsUI } = useContext( FraudPreventionSettingsContext ); const [ isBlocking, setIsBlocking ] = useState( @@ -53,7 +53,7 @@ const AllowedCountriesNotice: React.FC< AllowedCountriesNoticeProps > = ( { ); 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 index 31b4c7be8b6..7b730a06057 100644 --- 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,33 +40,11 @@ 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 ) && @@ -82,6 +52,17 @@ const OrderItemsThresholdCustomForm: React.FC< OrderItemsThresholdCustomFormProp 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 (
Limits @@ -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 index 5c47153e0fb..e32b2222d2e 100644 --- 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 (
Limits @@ -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/client/settings/fraud-protection/advanced-settings/cards/test/__snapshots__/address-mismatch.test.tsx.snap b/client/settings/fraud-protection/advanced-settings/cards/test/__snapshots__/address-mismatch.test.tsx.snap index ce9560f5875..566772c05f0 100644 --- a/client/settings/fraud-protection/advanced-settings/cards/test/__snapshots__/address-mismatch.test.tsx.snap +++ b/client/settings/fraud-protection/advanced-settings/cards/test/__snapshots__/address-mismatch.test.tsx.snap @@ -158,6 +158,7 @@ exports[`Address mismatch card renders correctly when enabled 1`] = ` > - 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: Canada, United States @@ -232,6 +233,7 @@ exports[`International IP address card renders correctly when enabled and checke > - Orders from the following countries will be blocked by the filter: + Orders from the following countries will be screened by the filter: Canada, United States @@ -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: Canada, United States diff --git a/client/settings/fraud-protection/advanced-settings/cards/test/__snapshots__/ip-address-mismatch.test.tsx.snap b/client/settings/fraud-protection/advanced-settings/cards/test/__snapshots__/ip-address-mismatch.test.tsx.snap index 30b97d21b1a..f5f48430b26 100644 --- a/client/settings/fraud-protection/advanced-settings/cards/test/__snapshots__/ip-address-mismatch.test.tsx.snap +++ b/client/settings/fraud-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`] = > { 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 index b2ae2de8e27..c178672128d 100644 --- 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 index dfbbbc47ad5..9be801f735b 100644 --- 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/client/settings/fraud-protection/advanced-settings/cards/test/international-ip-address.test.tsx b/client/settings/fraud-protection/advanced-settings/cards/test/international-ip-address.test.tsx index 6a36f94b4ee..a8a2a699190 100644 --- a/client/settings/fraud-protection/advanced-settings/cards/test/international-ip-address.test.tsx +++ b/client/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 index b102364ad75..f2eaa32ba8c 100644 --- 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 index 268845ba776..b2832aea03c 100644 --- 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', () => { diff --git a/client/settings/fraud-protection/advanced-settings/cards/test/purchase-price-threshold.test.tsx b/client/settings/fraud-protection/advanced-settings/cards/test/purchase-price-threshold.test.tsx index 23f12a04d51..163cb3d06b8 100644 --- a/client/settings/fraud-protection/advanced-settings/cards/test/purchase-price-threshold.test.tsx +++ b/client/settings/fraud-protection/advanced-settings/cards/test/purchase-price-threshold.test.tsx @@ -65,8 +65,6 @@ describe( 'Purchase price threshold 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/context.ts b/client/settings/fraud-protection/advanced-settings/context.ts index aa708fa36d0..c46b6bad440 100644 --- a/client/settings/fraud-protection/advanced-settings/context.ts +++ b/client/settings/fraud-protection/advanced-settings/context.ts @@ -7,8 +7,6 @@ import { FraudPreventionSettingsContextType } from '../interfaces'; const FraudPreventionSettingsContext = createContext( { protectionSettingsUI: {}, setProtectionSettingsUI: () => null, - protectionSettingsChanged: false, - setProtectionSettingsChanged: () => false, setIsDirty: () => null, } as FraudPreventionSettingsContextType ); diff --git a/client/settings/fraud-protection/advanced-settings/index.tsx b/client/settings/fraud-protection/advanced-settings/index.tsx index 881a09fdb90..74a37e9734a 100644 --- a/client/settings/fraud-protection/advanced-settings/index.tsx +++ b/client/settings/fraud-protection/advanced-settings/index.tsx @@ -122,10 +122,6 @@ const FraudProtectionAdvancedSettingsPage: React.FC = () => { const [ protectionSettingsUI, setProtectionSettingsUI ] = useState< ProtectionSettingsUI >( {} ); - const [ - protectionSettingsChanged, - setProtectionSettingsChanged, - ] = useState( false ); useEffect( () => { setProtectionSettingsUI( @@ -317,7 +313,7 @@ const FraudProtectionAdvancedSettingsPage: React.FC = () => { useEffect( confirmLeaveCallback, [ confirmLeaveCallback, - protectionSettingsChanged, + protectionSettingsUI, advancedFraudProtectionSettings, ] ); @@ -342,8 +338,6 @@ const FraudProtectionAdvancedSettingsPage: React.FC = () => { value={ { protectionSettingsUI, setProtectionSettingsUI, - protectionSettingsChanged, - setProtectionSettingsChanged, setIsDirty, } } > diff --git a/client/settings/fraud-protection/advanced-settings/rule-toggle.tsx b/client/settings/fraud-protection/advanced-settings/rule-toggle.tsx index 85e32790595..c2c49da2f5f 100644 --- a/client/settings/fraud-protection/advanced-settings/rule-toggle.tsx +++ b/client/settings/fraud-protection/advanced-settings/rule-toggle.tsx @@ -1,7 +1,7 @@ /** * External dependencies */ -import React, { useContext, useEffect, useState } from 'react'; +import React, { useContext } from 'react'; import { __ } from '@wordpress/i18n'; import { ToggleControl, RadioControl } from '@wordpress/components'; @@ -10,6 +10,7 @@ import { ToggleControl, RadioControl } from '@wordpress/components'; */ import './../style.scss'; import FraudPreventionSettingsContext from './context'; +import { FraudPreventionSettings } from '../interfaces'; interface FraudProtectionRuleToggleProps { setting: string; @@ -49,6 +50,15 @@ export const getHelpText = ( return helpTextMapping[ filterAction ]; }; +const getFilterAction = ( + settingUI: FraudPreventionSettings, + isFRTReviewFeatureActive: boolean +) => { + if ( ! isFRTReviewFeatureActive ) return filterActions.BLOCK; + + return settingUI.block ? filterActions.BLOCK : filterActions.REVIEW; +}; + const FraudProtectionRuleToggle: React.FC< FraudProtectionRuleToggleProps > = ( { setting, label, @@ -57,51 +67,31 @@ const FraudProtectionRuleToggle: React.FC< FraudProtectionRuleToggleProps > = ( const { protectionSettingsUI, setProtectionSettingsUI, - setProtectionSettingsChanged, setIsDirty, } = useContext( FraudPreventionSettingsContext ); const { isFRTReviewFeatureActive } = wcpaySettings; - const [ toggleState, setToggleState ] = useState( false ); - const [ filterAction, setFilterAction ] = useState( - isFRTReviewFeatureActive ? filterActions.REVIEW : filterActions.BLOCK - ); - const settingUI = protectionSettingsUI?.[ setting ]; + const filterAction = getFilterAction( settingUI, isFRTReviewFeatureActive ); + + const handleToggleChange = ( field: string, value: boolean ) => { + setProtectionSettingsUI( ( settings ) => ( { + ...settings, + [ setting ]: { + ...settings[ setting ], + [ field ]: value, + }, + } ) ); + setIsDirty( true ); + }; - // Set initial states from saved settings. - useEffect( () => { - if ( ! settingUI ) return; - - setToggleState( settingUI.enabled ); - setFilterAction( () => { - if ( ! isFRTReviewFeatureActive ) return filterActions.BLOCK; - - return settingUI.block ? filterActions.BLOCK : filterActions.REVIEW; - } ); - }, [ settingUI, isFRTReviewFeatureActive ] ); - - // Set global object values from input changes. - useEffect( () => { - if ( ! settingUI ) return; - - settingUI.enabled = toggleState; - settingUI.block = filterActions.BLOCK === filterAction; - setProtectionSettingsUI( protectionSettingsUI ); - setProtectionSettingsChanged( ( prev ) => ! prev ); - }, [ - settingUI, - toggleState, - filterAction, - setProtectionSettingsChanged, - protectionSettingsUI, - setProtectionSettingsUI, - ] ); + const handleEnableToggleChange = ( value: boolean ) => { + handleToggleChange( 'enabled', value ); + }; - const handleToggleChange = () => { - setToggleState( ( value ) => ! value ); - setIsDirty( true ); + const handleBlockToggleChange = ( value: string ) => { + handleToggleChange( 'block', filterActions.BLOCK === value ); }; if ( ! protectionSettingsUI ) { @@ -117,13 +107,13 @@ const FraudProtectionRuleToggle: React.FC< FraudProtectionRuleToggleProps > = ( - { toggleState && ( + { settingUI?.enabled && (
{ children } @@ -139,7 +129,7 @@ const FraudProtectionRuleToggle: React.FC< FraudProtectionRuleToggleProps > = (
) } diff --git a/client/settings/fraud-protection/advanced-settings/test/__snapshots__/index.test.tsx.snap b/client/settings/fraud-protection/advanced-settings/test/__snapshots__/index.test.tsx.snap index dddbf129bdb..c550c6f6480 100644 --- a/client/settings/fraud-protection/advanced-settings/test/__snapshots__/index.test.tsx.snap +++ b/client/settings/fraud-protection/advanced-settings/test/__snapshots__/index.test.tsx.snap @@ -340,7 +340,7 @@ exports[`Advanced fraud protection settings doesn't save when there's a validati 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: Canada, United States @@ -1345,7 +1345,7 @@ exports[`Advanced fraud protection settings doesn't save when there's a validati 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: Canada, United States @@ -2119,7 +2119,7 @@ exports[`Advanced fraud protection settings renders an error message when settin id="a11y-speak-polite" style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;" > - Orders from outside of the following countries will be blocked by the filter: Canada, United States + For security, this filter is enabled and cannot be modified. Payments failing CVC verification will be blocked. Learn more
@@ -2415,7 +2415,7 @@ exports[`Advanced fraud protection settings renders an error message when settin 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: Canada, United States @@ -3277,7 +3277,7 @@ exports[`Advanced fraud protection settings renders an error message when settin 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: Canada, United States @@ -3925,7 +3925,7 @@ exports[`Advanced fraud protection settings renders correctly 1`] = ` id="a11y-speak-polite" style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;" > - Orders from outside of the following countries will be blocked by the filter: Canada, United States + For security, this filter is enabled and cannot be modified. Payments failing CVC verification will be blocked. Learn more
- 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: Canada, United States @@ -5012,7 +5012,7 @@ exports[`Advanced fraud protection settings renders correctly 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: Canada, United States @@ -5659,7 +5659,7 @@ exports[`Advanced fraud protection settings saves settings when there are no val id="a11y-speak-polite" style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;" > - Orders from outside of the following countries will be blocked by the filter: Canada, United States + For security, this filter is enabled and cannot be modified. Payments failing CVC verification will be blocked. Learn more
@@ -5938,7 +5938,7 @@ exports[`Advanced fraud protection settings saves settings when there are no val 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: Canada, United States @@ -6863,7 +6863,7 @@ exports[`Advanced fraud protection settings saves settings when there are no val 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: Canada, United States diff --git a/client/settings/fraud-protection/advanced-settings/test/__snapshots__/rule-toggle.test.tsx.snap b/client/settings/fraud-protection/advanced-settings/test/__snapshots__/rule-toggle.test.tsx.snap index daa0f6c642e..daa15a8d239 100644 --- a/client/settings/fraud-protection/advanced-settings/test/__snapshots__/rule-toggle.test.tsx.snap +++ b/client/settings/fraud-protection/advanced-settings/test/__snapshots__/rule-toggle.test.tsx.snap @@ -219,6 +219,7 @@ exports[`Fraud protection rule toggle tests renders correctly when enabled 1`] = > { block: false, }, }, - protectionSettingsChanged: false, setProtectionSettingsUI: jest.fn(), - setProtectionSettingsChanged: jest.fn(), setIsDirty: jest.fn(), }; @@ -55,9 +52,7 @@ describe( 'Fraud protection rule toggle tests', () => { block: false, }, }, - protectionSettingsChanged: false, setProtectionSettingsUI: jest.fn(), - setProtectionSettingsChanged: jest.fn(), setIsDirty: jest.fn(), }; } ); @@ -134,7 +129,9 @@ describe( 'Fraud protection rule toggle tests', () => { expect( container.getByLabelText( 'Test rule toggle' ) ).toBeChecked(); expect( container.queryByText( 'test content' ) ).toBeInTheDocument(); } ); - test( 'sets the value correctly when enabled', () => { + test( 'calls the toggle enable function when clicking in the label', () => { + mockContext.protectionSettingsUI.test_rule.enabled = false; + const container = render( { ); + const activationToggle = container.getByLabelText( 'Test rule toggle' ); - expect( - mockContext.protectionSettingsUI.test_rule.enabled - ).toBeFalsy(); - activationToggle.click(); - expect( - mockContext.protectionSettingsUI.test_rule.enabled - ).toBeTruthy(); - activationToggle.click(); - expect( - mockContext.protectionSettingsUI.test_rule.enabled - ).toBeFalsy(); + userEvent.click( activationToggle ); + + expect( mockContext.setProtectionSettingsUI ).toHaveBeenCalled(); } ); } ); diff --git a/client/settings/fraud-protection/interfaces.ts b/client/settings/fraud-protection/interfaces.ts index 7ad040bad87..a034fb5d6a5 100644 --- a/client/settings/fraud-protection/interfaces.ts +++ b/client/settings/fraud-protection/interfaces.ts @@ -33,9 +33,7 @@ export type ProtectionSettingsUI = Record< string, FraudPreventionSettings >; export interface FraudPreventionSettingsContextType { protectionSettingsUI: ProtectionSettingsUI; - setProtectionSettingsUI: ( settings: ProtectionSettingsUI ) => void; - protectionSettingsChanged: boolean; - setProtectionSettingsChanged: Dispatch< SetStateAction< boolean > >; + setProtectionSettingsUI: Dispatch< SetStateAction< ProtectionSettingsUI > >; setIsDirty: Dispatch< SetStateAction< boolean > >; }