Add notice and notification in Advanced Fraud Settings page

changelog/fix-6497-advanced-fraud-settings-empty

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Add notice when no rules are enabled in advanced fraud settings

client/settings/fraud-protection/advanced-settings/index.tsx

@@ -70,20 +70,28 @@ const observerEventMapping: Record< string, string > = {
 };
 
 const Breadcrumb = () => (
-	<h2 className="fraud-protection-header-breadcrumb">
-		<Link
-			type="wp-admin"
-			href={ getAdminUrl( {
-				page: 'wc-settings',
-				tab: 'checkout',
-				section: 'woocommerce_payments',
-			} ) }
-		>
-			{ 'WooPayments' }
-		</Link>
-		&nbsp;&gt;&nbsp;
-		{ __( 'Advanced fraud protection', 'woocommerce-payments' ) }
-	</h2>
+	<>
+		<h2 className="fraud-protection-header-breadcrumb">
+			<Link
+				type="wp-admin"
+				href={ getAdminUrl( {
+					page: 'wc-settings',
+					tab: 'checkout',
+					section: 'woocommerce_payments',
+				} ) }
+			>
+				{ 'WooPayments' }
+			</Link>
+			&nbsp;&gt;&nbsp;
+			{ __( 'Advanced fraud protection', 'woocommerce-payments' ) }
+		</h2>
+		<p className="fraud-protection-advanced-settings-notice">
+			{ __(
+				'At least one risk filter needs to be enabled for advanced protection.',
+				'woocommerce-payments'
+			) }
+		</p>
+	</>
 );
 
 const SaveFraudProtectionSettingsButton: React.FC = ( { children } ) => {
@@ -154,9 +162,31 @@ const FraudProtectionAdvancedSettingsPage: React.FC = () => {
 			.every( Boolean );
 	};
 
+	const checkAnyRuleFilterEnabled = (
+		settings: ProtectionSettingsUI
+	): boolean => {
+		return Object.values( settings ).some( ( setting ) => setting.enabled );
+	};
+
 	const handleSaveSettings = () => {
 		if ( validateSettings( protectionSettingsUI ) ) {
-			if ( ProtectionLevel.ADVANCED !== currentProtectionLevel ) {
+			const settings = writeRuleset( protectionSettingsUI );
+
+			if ( ! checkAnyRuleFilterEnabled( protectionSettingsUI ) ) {
+				if ( ProtectionLevel.BASIC !== currentProtectionLevel ) {
+					updateProtectionLevel( ProtectionLevel.BASIC );
+					updateAdvancedFraudProtectionSettings( settings );
+					saveSettings();
+				}
+				dispatch( 'core/notices' ).createErrorNotice(
+					__(
+						'Protection level set to "basic", at least one risk filter needs to be enabled for advanced protection.',
+						'woocommerce-payments'
+					)
+				);
+
+				return;
+			} else if ( ProtectionLevel.ADVANCED !== currentProtectionLevel ) {
 				updateProtectionLevel( ProtectionLevel.ADVANCED );
 				dispatch( 'core/notices' ).createSuccessNotice(
 					__(
@@ -166,8 +196,6 @@ const FraudProtectionAdvancedSettingsPage: React.FC = () => {
 				);
 			}
 
-			const settings = writeRuleset( protectionSettingsUI );
-
 			// Persist the AVS verification setting until the account cache is updated locally.
 			if (
 				wcpaySettings?.accountStatus?.fraudProtection

client/settings/fraud-protection/advanced-settings/test/__snapshots__/index.test.tsx.snap

@@ -66,6 +66,11 @@ Object {
                > 
               Advanced fraud protection
             </h2>
+            <p
+              class="fraud-protection-advanced-settings-notice"
+            >
+              At least one risk filter needs to be enabled for advanced protection.
+            </p>
             <div
               class="fraud-protection-advanced-settings-error-notice"
             >
@@ -1066,6 +1071,11 @@ Object {
              &gt; 
             Advanced fraud protection
           </h2>
+          <p
+            class="fraud-protection-advanced-settings-notice"
+          >
+            At least one risk filter needs to be enabled for advanced protection.
+          </p>
           <div
             class="fraud-protection-advanced-settings-error-notice"
           >
@@ -2149,6 +2159,11 @@ Object {
                &gt; 
               Advanced fraud protection
             </h2>
+            <p
+              class="fraud-protection-advanced-settings-notice"
+            >
+              At least one risk filter needs to be enabled for advanced protection.
+            </p>
             <div
               class="fraud-protection-advanced-settings-error-notice"
             >
@@ -3006,6 +3021,11 @@ Object {
              &gt; 
             Advanced fraud protection
           </h2>
+          <p
+            class="fraud-protection-advanced-settings-notice"
+          >
+            At least one risk filter needs to be enabled for advanced protection.
+          </p>
           <div
             class="fraud-protection-advanced-settings-error-notice"
           >
@@ -3926,6 +3946,11 @@ Object {
              &gt; 
             Advanced fraud protection
           </h2>
+          <p
+            class="fraud-protection-advanced-settings-notice"
+          >
+            At least one risk filter needs to be enabled for advanced protection.
+          </p>
           <div
             class="components-surface components-card fraud-protection-rule-card css-nsno0f-View-Surface-getBorders-primary-Card-rounded em57xhy0"
             data-wp-c16t="true"
@@ -4746,6 +4771,11 @@ Object {
            &gt; 
           Advanced fraud protection
         </h2>
+        <p
+          class="fraud-protection-advanced-settings-notice"
+        >
+          At least one risk filter needs to be enabled for advanced protection.
+        </p>
         <div
           class="components-surface components-card fraud-protection-rule-card css-nsno0f-View-Surface-getBorders-primary-Card-rounded em57xhy0"
           data-wp-c16t="true"
@@ -5666,6 +5696,11 @@ Object {
                &gt; 
               Advanced fraud protection
             </h2>
+            <p
+              class="fraud-protection-advanced-settings-notice"
+            >
+              At least one risk filter needs to be enabled for advanced protection.
+            </p>
             <div
               class="components-surface components-card fraud-protection-rule-card css-nsno0f-View-Surface-getBorders-primary-Card-rounded em57xhy0"
               data-wp-c16t="true"
@@ -6586,6 +6621,11 @@ Object {
              &gt; 
             Advanced fraud protection
           </h2>
+          <p
+            class="fraud-protection-advanced-settings-notice"
+          >
+            At least one risk filter needs to be enabled for advanced protection.
+          </p>
           <div
             class="components-surface components-card fraud-protection-rule-card css-nsno0f-View-Surface-getBorders-primary-Card-rounded em57xhy0"
             data-wp-c16t="true"

client/settings/fraud-protection/advanced-settings/test/index.test.tsx

@@ -28,6 +28,7 @@ jest.mock( '@wordpress/data', () => ( {
 	dispatch: jest.fn( () => ( {
 		setIsMatching: jest.fn(),
 		createSuccessNotice: jest.fn(),
+		createErrorNotice: jest.fn(),
 		onLoad: jest.fn(),
 	} ) ),
 	registerStore: jest.fn(),
@@ -438,4 +439,45 @@ describe( 'Advanced fraud protection settings', () => {
 		expect( protectionLevelState.updateState.mock.calls.length ).toBe( 0 );
 		expect( protectionLevelState.updateState.mock.calls ).toEqual( [] );
 	} );
+	test( 'does not update protection level to advanced when no risk rules are enabled', async () => {
+		const protectionLevelState = {
+			state: 'standard',
+			updateState: jest.fn( ( level ) => {
+				protectionLevelState.state = level;
+			} ),
+		};
+		mockUseCurrentProtectionLevel.mockReturnValue( [
+			protectionLevelState.state,
+			protectionLevelState.updateState,
+		] );
+		mockUseSettings.mockReturnValue( {
+			settings: {
+				advanced_fraud_protection_settings: defaultSettings,
+			},
+			isSaving: false,
+			saveSettings: jest.fn(),
+			isLoading: false,
+		} );
+		mockUseAdvancedFraudProtectionSettings.mockReturnValue( [
+			defaultSettings,
+			jest.fn(),
+		] );
+		container = render(
+			<div>
+				<div className="woocommerce-layout__header-wrapper">
+					<div className="woocommerce-layout__header-heading"></div>
+				</div>
+				<FraudProtectionAdvancedSettingsPage />
+			</div>
+		);
+		const [ saveButton ] = await container.findAllByText( 'Save Changes' );
+		saveButton.click();
+		await waitFor( () => {
+			expect( mockUseSettings().saveSettings.mock.calls.length ).toBe(
+				1
+			);
+		} );
+
+		expect( protectionLevelState.state ).toBe( 'basic' );
+	} );
 } );

client/settings/fraud-protection/style.scss

@@ -43,7 +43,7 @@
 	}
 	&-header-breadcrumb {
 		margin-top: 0;
-		margin-bottom: 24px;
+		margin-bottom: 8px;
 		@media screen and ( min-width: 961px ) {
 			margin-top: -16px;
 		}
@@ -261,6 +261,10 @@
 		);
 		cursor: pointer;
 	}
+	&-advanced-settings-notice {
+		margin-top: 0;
+		margin-bottom: 16px;
+	}
 }
 
 .components-modal__header {