Skip to content

Commit

Permalink
Add notice and notification in Advanced Fraud Settings page (#8762)
Browse files Browse the repository at this point in the history
  • Loading branch information
@daquinons
daquinons authored May 3, 2024
1 parent d27b16f commit a4c1b31
Show file tree
Hide file tree
Showing 5 changed files with 162 additions and 40 deletions.
4 changes: 4 additions & 0 deletions changelog/fix-6497-advanced-fraud-settings-empty
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: fix

Add notice when no rules are enabled in advanced fraud settings
110 changes: 71 additions & 39 deletions client/settings/fraud-protection/advanced-settings/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 } ) => {
Expand Down Expand Up @@ -154,42 +162,66 @@ 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 ) {
updateProtectionLevel( ProtectionLevel.ADVANCED );
dispatch( 'core/notices' ).createSuccessNotice(
if ( ! validateSettings( protectionSettingsUI ) ) {
window.scrollTo( {
top: 0,
} );
return;
}

if ( ! checkAnyRuleFilterEnabled( protectionSettingsUI ) ) {
if ( ProtectionLevel.BASIC === currentProtectionLevel ) {
dispatch( 'core/notices' ).createErrorNotice(
__(
'Current protection level is set to "advanced".',
'At least one risk filter needs to be enabled for advanced protection.',
'woocommerce-payments'
)
);
return;
}

const settings = writeRuleset( protectionSettingsUI );
updateProtectionLevel( ProtectionLevel.BASIC );
dispatch( 'core/notices' ).createErrorNotice(
__(
'Current protection level is set to "basic". At least one risk filter needs to be enabled for advanced protection.',
'woocommerce-payments'
)
);
} else if ( ProtectionLevel.ADVANCED !== currentProtectionLevel ) {
updateProtectionLevel( ProtectionLevel.ADVANCED );
dispatch( 'core/notices' ).createSuccessNotice(
__(
'Current protection level is set to "advanced".',
'woocommerce-payments'
)
);
}

// Persist the AVS verification setting until the account cache is updated locally.
if (
wcpaySettings?.accountStatus?.fraudProtection
?.declineOnAVSFailure
) {
wcpaySettings.accountStatus.fraudProtection.declineOnAVSFailure = settings.some(
( setting ) => setting.key === 'avs_verification'
);
}
const settings = writeRuleset( protectionSettingsUI );

updateAdvancedFraudProtectionSettings( settings );
// Persist the AVS verification setting until the account cache is updated locally.
if (
wcpaySettings?.accountStatus?.fraudProtection?.declineOnAVSFailure
) {
wcpaySettings.accountStatus.fraudProtection.declineOnAVSFailure = settings.some(
( setting ) => setting.key === 'avs_verification'
);
}

saveSettings();
updateAdvancedFraudProtectionSettings( settings );

recordEvent( 'wcpay_fraud_protection_advanced_settings_saved', {
settings: JSON.stringify( settings ),
} );
} else {
window.scrollTo( {
top: 0,
} );
}
saveSettings();

recordEvent( 'wcpay_fraud_protection_advanced_settings_saved', {
settings: JSON.stringify( settings ),
} );
};

// Hack to make "Payments > Settings" the active selected menu item.
Expand Down
40 changes: 40 additions & 0 deletions client/settings/fraud-protection/advanced-settings/test/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
42 changes: 42 additions & 0 deletions client/settings/fraud-protection/advanced-settings/test/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand Down Expand Up @@ -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' );
} );
} );
6 changes: 5 additions & 1 deletion client/settings/fraud-protection/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
}
&-header-breadcrumb {
margin-top: 0;
margin-bottom: 24px;
margin-bottom: 8px;
@media screen and ( min-width: 961px ) {
margin-top: -16px;
}
Expand Down Expand Up @@ -261,6 +261,10 @@
);
cursor: pointer;
}
&-advanced-settings-notice {
margin-top: 0;
margin-bottom: 16px;
}
}

.components-modal__header {
Expand Down

0 comments on commit a4c1b31

Please sign in to comment.