portal: Fix fraud protection cannot be turned off #5728

Author: carmenlau

portal/src/hook/useAppConfigForm.ts

@@ -19,6 +19,10 @@ export interface AppConfigFormModel<State> {
   reload: () => void;
   reset: () => void;
   save: (ignoreConflict?: boolean) => Promise<void>;
+  saveWith: (
+    fn: (state: State) => State,
+    ignoreConflict?: boolean
+  ) => Promise<void>;
   setCanSave: (canSave?: boolean) => void;
   effectiveConfig: PortalAPIAppConfig;
 }
@@ -104,25 +108,18 @@ export function useAppConfigForm<State>(
     setIsSubmitted(false);
   }, [isUpdating]);
 
-  const save = useCallback(
-    async (ignoreConflict: boolean = false) => {
-      const allowSave = canSave !== undefined ? canSave : isDirty;
-      if (!rawConfig || !initialState || secretConfig == null) {
-        return;
-      } else if (!allowSave || isUpdating) {
-        return;
-      }
-
-      const err = validate?.(currentState ?? initialState);
+  const performSave = useCallback(
+    async (stateToSave: State, ignoreConflict: boolean) => {
+      const err = validate?.(stateToSave);
       if (err) {
         setUpdateError(err);
         return;
       }
 
       const newConfig = constructConfig(
-        rawConfig,
+        rawConfig!,
         initialState,
-        currentState ?? initialState,
+        stateToSave,
         effectiveConfig
       );
 
@@ -132,7 +129,7 @@ export function useAppConfigForm<State>(
         await updateConfig({
           appConfig: newConfig,
           appConfigChecksum: rawAppConfigChecksum,
-          ignoreConflict: ignoreConflict,
+          ignoreConflict,
         });
         await reload();
         setCurrentState(null);
@@ -144,20 +141,56 @@ export function useAppConfigForm<State>(
         setIsUpdating(false);
       }
     },
+    [
+      validate,
+      constructConfig,
+      rawConfig,
+      initialState,
+      effectiveConfig,
+      updateConfig,
+      rawAppConfigChecksum,
+      reload,
+    ]
+  );
+
+  const save = useCallback(
+    async (ignoreConflict: boolean = false) => {
+      const allowSave = canSave !== undefined ? canSave : isDirty;
+      if (!rawConfig || !initialState || secretConfig == null) {
+        return;
+      } else if (!allowSave || isUpdating) {
+        return;
+      }
+      await performSave(currentState ?? initialState, ignoreConflict);
+    },
     [
       canSave,
       isDirty,
       rawConfig,
       initialState,
       secretConfig,
       isUpdating,
-      validate,
       currentState,
-      constructConfig,
-      effectiveConfig,
-      updateConfig,
-      rawAppConfigChecksum,
-      reload,
+      performSave,
+    ]
+  );
+
+  const saveWith = useCallback(
+    async (fn: (state: State) => State, ignoreConflict: boolean = false) => {
+      if (!rawConfig || !initialState || secretConfig == null || isUpdating) {
+        return;
+      }
+      const newState = fn(currentState ?? initialState);
+      setCurrentState(newState);
+      await performSave(newState, ignoreConflict);
+    },
+    [
+      rawConfig,
+      initialState,
+      secretConfig,
+      isUpdating,
+      currentState,
+      performSave,
     ]
   );
 
@@ -185,6 +218,8 @@ export function useAppConfigForm<State>(
     reload,
     reset,
     save,
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    saveWith,
     effectiveConfig,
   };
 }

portal/src/locale-data/en.json

@@ -1900,6 +1900,10 @@
   "FraudProtectionConfigurationScreen.allowlist.ip.country.description": "Requests from these countries (by IP geolocation) will not be blocked by fraud protection.",
   "FraudProtectionConfigurationScreen.allowlist.phone.country.label": "Allow the following countries based on phone country code",
   "FraudProtectionConfigurationScreen.allowlist.phone.country.description": "Requests from phone numbers registered in these countries will not be blocked by fraud protection.",
+  "FraudProtectionConfigurationScreen.disable.confirmation.title": "Disable Fraud Protection?",
+  "FraudProtectionConfigurationScreen.disable.confirmation.description": "Are you sure you want to disable Fraud Protection? This will stop all fraud detection and protection for your application.",
+  "FraudProtectionConfigurationScreen.disable.confirmation.confirm": "Disable",
+  "FraudProtectionConfigurationScreen.disable.confirmation.cancel": "Cancel",
   "IntegrationsConfigurationScreen.title": "Integrations",
   "IntegrationsConfigurationScreen.add-on": "Add-on",
   "IntegrationsConfigurationScreen.action": "Action",

portal/src/screens/fraud-protection/FraudProtectionConfigurationScreen.tsx

@@ -1,6 +1,14 @@
-import React, { useCallback, useContext } from "react";
+import React, { useCallback, useContext, useState } from "react";
 import { useParams, Navigate } from "react-router-dom";
-import { IChoiceGroupOption, ITag, PivotItem } from "@fluentui/react";
+import {
+  Dialog,
+  DialogFooter,
+  IChoiceGroupOption,
+  ITag,
+  PivotItem,
+} from "@fluentui/react";
+import PrimaryButton from "../../PrimaryButton";
+import DefaultButton from "../../DefaultButton";
 import { Address4, Address6 } from "ip-address";
 import { produce } from "immer";
 import { default as parseLibPhoneNumber } from "libphonenumber-js";
@@ -206,6 +214,7 @@ interface FraudProtectionConfigurationContentProps {
   selectedKey: FraudProtectionTab;
   onLinkClick: (item?: PivotItem) => void;
   onChangeKey: (key: FraudProtectionTab) => void;
+  onToggleEnabledAndSave: (enabled: boolean) => void;
 }
 
 const FraudProtectionConfigurationContent: React.VFC<FraudProtectionConfigurationContentProps> =
@@ -216,6 +225,7 @@ const FraudProtectionConfigurationContent: React.VFC<FraudProtectionConfiguratio
       selectedKey,
       onLinkClick,
       onChangeKey,
+      onToggleEnabledAndSave,
     } = props;
     const { renderToString } = useContext(Context);
     const { state, setState } = form;
@@ -226,12 +236,9 @@ const FraudProtectionConfigurationContent: React.VFC<FraudProtectionConfiguratio
         _event: React.FormEvent<HTMLElement | HTMLInputElement>,
         checked?: boolean
       ) => {
-        setState((current) => ({
-          ...current,
-          enabled: checked ?? false,
-        }));
+        onToggleEnabledAndSave(checked ?? false);
       },
-      [setState]
+      [onToggleEnabledAndSave]
     );
 
     const onEnforcementModeChange = useCallback(
@@ -384,6 +391,9 @@ const FraudProtectionConfigurationContent: React.VFC<FraudProtectionConfiguratio
 const FraudProtectionConfigurationScreen: React.VFC =
   function FraudProtectionConfigurationScreen() {
     const { appID } = useParams() as { appID: string };
+    const { renderToString } = useContext(Context);
+    const [showDisableConfirmation, setShowDisableConfirmation] =
+      useState(false);
     const form = useAppConfigForm({
       appID,
       constructFormState,
@@ -394,6 +404,29 @@ const FraudProtectionConfigurationScreen: React.VFC =
     const { selectedKey, onLinkClick, onChangeKey } =
       usePivotNavigation<FraudProtectionTab>(["overview", "logs", "settings"]);
 
+    const handleToggleEnabledAndSave = useCallback(
+      (enabled: boolean) => {
+        if (!enabled && form.state.enabled) {
+          setShowDisableConfirmation(true);
+        } else if (enabled && !form.state.enabled) {
+          form.saveWith((_current) => ({
+            ...form.initialState,
+            enabled: true,
+          }));
+        }
+      },
+      [form]
+    );
+
+    const handleConfirmDisable = useCallback(() => {
+      setShowDisableConfirmation(false);
+      form.saveWith((_current) => ({ ...form.initialState, enabled: false }));
+    }, [form]);
+
+    const handleCancelDisable = useCallback(() => {
+      setShowDisableConfirmation(false);
+    }, []);
+
     if (form.isLoading || featureConfig.isLoading) {
       return <ShowLoading />;
     }
@@ -435,7 +468,35 @@ const FraudProtectionConfigurationScreen: React.VFC =
           selectedKey={selectedKey}
           onLinkClick={onLinkClick}
           onChangeKey={onChangeKey}
+          onToggleEnabledAndSave={handleToggleEnabledAndSave}
         />
+        <Dialog
+          hidden={!showDisableConfirmation}
+          onDismiss={handleCancelDisable}
+          dialogContentProps={{
+            title: renderToString(
+              "FraudProtectionConfigurationScreen.disable.confirmation.title"
+            ),
+            subText: renderToString(
+              "FraudProtectionConfigurationScreen.disable.confirmation.description"
+            ),
+          }}
+        >
+          <DialogFooter>
+            <DefaultButton
+              onClick={handleCancelDisable}
+              text={renderToString(
+                "FraudProtectionConfigurationScreen.disable.confirmation.cancel"
+              )}
+            />
+            <PrimaryButton
+              onClick={handleConfirmDisable}
+              text={renderToString(
+                "FraudProtectionConfigurationScreen.disable.confirmation.confirm"
+              )}
+            />
+          </DialogFooter>
+        </Dialog>
       </FormContainer>
     );
   };