Merge pull request #88973 from Expensify/claude-spendRuleMerchantDiscardChanges

Add discard changes handling to spend rule merchant pages

Author: JS00001

src/libs/actions/User.ts

@@ -1827,6 +1827,14 @@ function clearDraftSpendRule() {
     Onyx.set(ONYXKEYS.FORMS.SPEND_RULE_FORM, null);
 }
 
+function updateSpendRuleFormDraft(draftData: Partial<SpendRuleForm>) {
+    Onyx.merge(ONYXKEYS.FORMS.SPEND_RULE_FORM_DRAFT, draftData);
+}
+
+function clearSpendRuleFormDraft() {
+    Onyx.set(ONYXKEYS.FORMS.SPEND_RULE_FORM_DRAFT, null);
+}
+
 export {
     closeAccount,
     setServerErrorsOnForm,
@@ -1882,6 +1890,8 @@ export {
     setDraftSpendRule,
     updateDraftSpendRule,
     clearDraftSpendRule,
+    updateSpendRuleFormDraft,
+    clearSpendRuleFormDraft,
     openTroubleshootSettingsPage,
     openMultifactorAuthenticationRevokePage,
 };

src/pages/workspace/rules/SpendRules/SpendRuleMerchantEditPage.tsx

@@ -1,5 +1,5 @@
 import {useNavigation} from '@react-navigation/native';
-import React, {useCallback, useState} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 import {View} from 'react-native';
 import type {ValueOf} from 'type-fest';
 import FormProvider from '@components/Form/FormProvider';
@@ -12,10 +12,11 @@ import type {ListItem} from '@components/SelectionList/ListItem/types';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
+import useDiscardChangesConfirmation from '@hooks/useDiscardChangesConfirmation';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {updateDraftSpendRule} from '@libs/actions/User';
+import {updateSpendRuleFormDraft} from '@libs/actions/User';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
@@ -38,28 +39,46 @@ function SpendRuleMerchantEditPage({route}: SpendRuleMerchantEditPageProps) {
     const styles = useThemeStyles();
     const {inputCallbackRef} = useAutoFocusInput();
     const [spendRuleForm] = useOnyx(ONYXKEYS.FORMS.SPEND_RULE_FORM);
+    const [spendRuleFormDraft] = useOnyx(ONYXKEYS.FORMS.SPEND_RULE_FORM_DRAFT);
 
-    const merchantNames = spendRuleForm?.merchantNames ?? [];
-    const merchantMatchTypes = spendRuleForm?.merchantMatchTypes ?? [];
+    const merchantNames = spendRuleFormDraft?.merchantNames ?? spendRuleForm?.merchantNames ?? [];
+    const merchantMatchTypes = spendRuleFormDraft?.merchantMatchTypes ?? spendRuleForm?.merchantMatchTypes ?? [];
     const isNew = merchantIndex === ROUTES.NEW;
     const index = isNew ? -1 : Number(merchantIndex);
     const existingMerchantName = isNew ? undefined : merchantNames.at(index);
     const existingMerchantMatchType = isNew ? undefined : merchantMatchTypes.at(index);
 
     const [merchantName, setMerchantName] = useState(existingMerchantName ?? '');
     const [matchType, setMatchType] = useState<ValueOf<typeof CONST.SEARCH.SYNTAX_OPERATORS>>(existingMerchantMatchType ?? CONST.SEARCH.SYNTAX_OPERATORS.CONTAINS);
+    const [isSaved, setIsSaved] = useState(false);
 
     const goBack = useCallback(() => navigation.goBack(), [navigation]);
 
+    useEffect(() => {
+        if (!isSaved) {
+            return;
+        }
+        goBack();
+    }, [isSaved, goBack]);
+
+    useDiscardChangesConfirmation({
+        getHasUnsavedChanges: () => {
+            if (isSaved) {
+                return false;
+            }
+            return merchantName !== (existingMerchantName ?? '') || matchType !== (existingMerchantMatchType ?? CONST.SEARCH.SYNTAX_OPERATORS.CONTAINS);
+        },
+    });
+
     const submit = () => {
         const trimmedMerchantName = merchantName.trim();
         if (!trimmedMerchantName) {
             if (!isNew) {
                 const updatedMerchantNames = merchantNames.filter((_, merchantArrayIndex) => merchantArrayIndex !== index);
                 const updatedMerchantMatchTypes = merchantMatchTypes.filter((_, merchantArrayIndex) => merchantArrayIndex !== index);
-                updateDraftSpendRule({merchantNames: updatedMerchantNames, merchantMatchTypes: updatedMerchantMatchTypes});
+                updateSpendRuleFormDraft({merchantNames: updatedMerchantNames, merchantMatchTypes: updatedMerchantMatchTypes});
             }
-            goBack();
+            setIsSaved(true);
             return;
         }
 
@@ -70,8 +89,8 @@ function SpendRuleMerchantEditPage({route}: SpendRuleMerchantEditPageProps) {
         const updatedMerchantMatchTypes = isNew
             ? [...merchantMatchTypes, matchType]
             : merchantMatchTypes.map((type, merchantArrayIndex) => (merchantArrayIndex === index ? matchType : type));
-        updateDraftSpendRule({merchantNames: updatedMerchantNames, merchantMatchTypes: updatedMerchantMatchTypes});
-        goBack();
+        updateSpendRuleFormDraft({merchantNames: updatedMerchantNames, merchantMatchTypes: updatedMerchantMatchTypes});
+        setIsSaved(true);
     };
 
     const matchTypeItems: MatchTypeItem[] = [

src/pages/workspace/rules/SpendRules/SpendRuleMerchantsPage.tsx

@@ -1,6 +1,6 @@
 import type {NavigationProp} from '@react-navigation/native';
 import {useNavigation} from '@react-navigation/native';
-import React from 'react';
+import React, {useEffect} from 'react';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
@@ -12,6 +12,7 @@ import {useMemoizedLazyExpensifyIcons, useMemoizedLazyIllustrations} from '@hook
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {clearSpendRuleFormDraft, updateDraftSpendRule} from '@libs/actions/User';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
@@ -28,12 +29,20 @@ function SpendRuleMerchantsPage({route}: SpendRuleMerchantsPageProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const [spendRuleForm] = useOnyx(ONYXKEYS.FORMS.SPEND_RULE_FORM);
+    const [spendRuleFormDraft] = useOnyx(ONYXKEYS.FORMS.SPEND_RULE_FORM_DRAFT);
     const illustrations = useMemoizedLazyIllustrations(['FoodTruck']);
     const expensifyIcons = useMemoizedLazyExpensifyIcons(['Plus']);
 
     const restrictionAction = spendRuleForm?.restrictionAction ?? CONST.SPEND_RULES.ACTION.ALLOW;
-    const merchantNames = spendRuleForm?.merchantNames ?? [];
-    const merchantMatchTypes = spendRuleForm?.merchantMatchTypes ?? [];
+    const merchantNames = spendRuleFormDraft?.merchantNames ?? spendRuleForm?.merchantNames ?? [];
+    const merchantMatchTypes = spendRuleFormDraft?.merchantMatchTypes ?? spendRuleForm?.merchantMatchTypes ?? [];
+
+    useEffect(
+        () => () => {
+            clearSpendRuleFormDraft();
+        },
+        [],
+    );
 
     const emptyStateTitle =
         restrictionAction === CONST.SPEND_RULES.ACTION.BLOCK ? translate('workspace.rules.spendRules.noBlockedMerchants') : translate('workspace.rules.spendRules.noAllowedMerchants');
@@ -45,6 +54,11 @@ function SpendRuleMerchantsPage({route}: SpendRuleMerchantsPageProps) {
 
     const goBack = () => navigation.goBack();
 
+    const handleSave = () => {
+        updateDraftSpendRule({merchantNames, merchantMatchTypes});
+        goBack();
+    };
+
     const navigateToMerchantEdit = (merchantIndex: string) => {
         navigation.navigate(SCREENS.WORKSPACE.RULES_SPEND_MERCHANT_EDIT, {policyID, ruleID, merchantIndex});
     };
@@ -111,7 +125,7 @@ function SpendRuleMerchantsPage({route}: SpendRuleMerchantsPageProps) {
                     buttonText={translate('common.save')}
                     containerStyles={[styles.m4, styles.mb5]}
                     isAlertVisible={false}
-                    onSubmit={goBack}
+                    onSubmit={handleSave}
                     enabledWhenOffline
                     sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.RULES.SPEND_RULE_SAVE}
                 />