Merge pull request #52660 from ishpaul777/feat/52457

fixes issue [Create expense button on empty Search page allows to create expense for non-migrated users]
Expensify · Nov 18, 2024 · 6ac7513 · 6ac7513
2 parents 5df1858 + 7da2510
commit 6ac7513
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 19 deletions.
diff --git a/src/libs/PolicyUtils.ts b/src/libs/PolicyUtils.ts
@@ -1108,6 +1108,14 @@ function isPolicyAccessible(policy: OnyxEntry<Policy>): boolean {
     return !isEmptyObject(policy) && (Object.keys(policy).length !== 1 || isEmptyObject(policy.errors)) && !!policy?.id;
 }
 
+function areAllGroupPoliciesExpenseChatDisabled(policies = allPolicies) {
+    const groupPolicies = Object.values(policies ?? {}).filter((policy) => isPaidGroupPolicy(policy));
+    if (groupPolicies.length === 0) {
+        return false;
+    }
+    return !groupPolicies.some((policy) => !!policy?.isPolicyExpenseChatEnabled);
+}
+
 export {
     canEditTaxRate,
     extractPolicyIDFromPath,
@@ -1228,6 +1236,7 @@ export {
     getAllPoliciesLength,
     getActivePolicy,
     isPolicyAccessible,
+    areAllGroupPoliciesExpenseChatDisabled,
 };
 
 export type {MemberEmailsToAccountIDs};
diff --git a/src/pages/Search/EmptySearchView.tsx b/src/pages/Search/EmptySearchView.tsx
@@ -1,6 +1,8 @@
 import React, {useMemo, useState} from 'react';
 import {Linking, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
+import type {OnyxCollection} from 'react-native-onyx';
+import ConfirmModal from '@components/ConfirmModal';
 import DotIndicatorMessage from '@components/DotIndicatorMessage';
 import EmptyStateComponent from '@components/EmptyStateComponent';
 import type {FeatureListItem} from '@components/FeatureList';
@@ -16,6 +18,7 @@ import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import interceptAnonymousUser from '@libs/interceptAnonymousUser';
+import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import {getNavatticURL} from '@libs/TourUtils';
 import * as TripsResevationUtils from '@libs/TripReservationUtils';
@@ -24,6 +27,7 @@ import * as IOU from '@userActions/IOU';
 import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type * as OnyxTypes from '@src/types/onyx';
 import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
 
 type EmptySearchViewProps = {
@@ -46,6 +50,11 @@ function EmptySearchView({type}: EmptySearchViewProps) {
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+    const [modalVisible, setModalVisible] = useState(false);
+    const [allPolicies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
+    const shouldRedirectToExpensifyClassic = useMemo(() => {
+        return PolicyUtils.areAllGroupPoliciesExpenseChatDisabled((allPolicies as OnyxCollection<OnyxTypes.Policy>) ?? {});
+    }, [allPolicies]);
 
     const [ctaErrorMessage, setCtaErrorMessage] = useState('');
 
@@ -126,7 +135,14 @@ function EmptySearchView({type}: EmptySearchViewProps) {
                         {buttonText: translate('emptySearchView.takeATour'), buttonAction: () => Link.openExternalLink(navatticURL)},
                         {
                             buttonText: translate('iou.createExpense'),
-                            buttonAction: () => interceptAnonymousUser(() => IOU.startMoneyRequest(CONST.IOU.TYPE.CREATE, ReportUtils.generateReportID())),
+                            buttonAction: () =>
+                                interceptAnonymousUser(() => {
+                                    if (shouldRedirectToExpensifyClassic) {
+                                        setModalVisible(true);
+                                        return;
+                                    }
+                                    IOU.startMoneyRequest(CONST.IOU.TYPE.CREATE, ReportUtils.generateReportID());
+                                }),
                             success: true,
                         },
                     ],
@@ -143,21 +159,47 @@ function EmptySearchView({type}: EmptySearchViewProps) {
                     headerContentStyles: styles.emptyStateFolderWebStyles,
                 };
         }
-    }, [type, StyleUtils, translate, theme, styles, subtitleComponent, ctaErrorMessage, navatticURL]);
+    }, [
+        type,
+        StyleUtils,
+        theme.travelBG,
+        theme.emptyFolderBG,
+        translate,
+        styles.textAlignLeft,
+        styles.emptyStateFolderWebStyles,
+        subtitleComponent,
+        ctaErrorMessage,
+        navatticURL,
+        shouldRedirectToExpensifyClassic,
+    ]);
 
     return (
-        <EmptyStateComponent
-            SkeletonComponent={SearchRowSkeleton}
-            headerMediaType={CONST.EMPTY_STATE_MEDIA.ANIMATION}
-            headerMedia={content.headerMedia}
-            headerStyles={[content.headerStyles, styles.emptyStateCardIllustrationContainer]}
-            title={content.title}
-            titleStyles={content.titleStyles}
-            subtitle={content.subtitle}
-            buttons={content.buttons}
-            headerContentStyles={[styles.h100, styles.w100, content.headerContentStyles]}
-            lottieWebViewStyles={styles.emptyStateFolderWebStyles}
-        />
+        <>
+            <EmptyStateComponent
+                SkeletonComponent={SearchRowSkeleton}
+                headerMediaType={CONST.EMPTY_STATE_MEDIA.ANIMATION}
+                headerMedia={content.headerMedia}
+                headerStyles={[content.headerStyles, styles.emptyStateCardIllustrationContainer]}
+                title={content.title}
+                titleStyles={content.titleStyles}
+                subtitle={content.subtitle}
+                buttons={content.buttons}
+                headerContentStyles={[styles.h100, styles.w100, content.headerContentStyles]}
+                lottieWebViewStyles={styles.emptyStateFolderWebStyles}
+            />
+            <ConfirmModal
+                prompt={translate('sidebarScreen.redirectToExpensifyClassicModal.description')}
+                isVisible={modalVisible}
+                onConfirm={() => {
+                    setModalVisible(false);
+                    Link.openOldDotLink(CONST.OLDDOT_URLS.INBOX);
+                }}
+                onCancel={() => setModalVisible(false)}
+                title={translate('sidebarScreen.redirectToExpensifyClassicModal.title')}
+                confirmText={translate('exitSurvey.goToExpensifyClassic')}
+                cancelText={translate('common.cancel')}
+            />
+        </>
     );
 }
 

diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx
@@ -191,11 +191,7 @@ function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu}: Fl
      * 2. none of the group policies they are a member of have isPolicyExpenseChatEnabled=true
      */
     const shouldRedirectToExpensifyClassic = useMemo(() => {
-        const groupPolicies = Object.values(allPolicies ?? {}).filter((policy) => ReportUtils.isGroupPolicy(policy?.type ?? ''));
-        if (groupPolicies.length === 0) {
-            return false;
-        }
-        return !groupPolicies.some((policy) => !!policy?.isPolicyExpenseChatEnabled);
+        return PolicyUtils.areAllGroupPoliciesExpenseChatDisabled((allPolicies as OnyxCollection<OnyxTypes.Policy>) ?? {});
     }, [allPolicies]);
 
     const shouldShowNewWorkspaceButton = Object.values(allPolicies ?? {}).every(