FAB popover decomposition

src/CONST/index.ts

@@ -1736,6 +1736,17 @@ const CONST = {
             FAB_OUT: 200,
         },
     },
+    FAB_MENU_ITEM_IDS: {
+        QUICK_ACTION: 'quick-action',
+        EXPENSE: 'expense',
+        TRACK_DISTANCE: 'track-distance',
+        CREATE_REPORT: 'create-report',
+        NEW_CHAT: 'new-chat',
+        INVOICE: 'invoice',
+        TRAVEL: 'travel',
+        TEST_DRIVE: 'test-drive',
+        NEW_WORKSPACE: 'new-workspace',
+    },
     TIMING: {
         REPORT_ACTION_ITEM_LAYOUT_DEBOUNCE_TIME: 1500,
         SHOW_LOADING_SPINNER_DEBOUNCE_TIME: 250,

src/components/FloatingCameraButton/BaseFloatingCameraButton.tsx

@@ -1,6 +1,6 @@
-import React, {useCallback, useMemo} from 'react';
+import React, {useState} from 'react';
 import {View} from 'react-native';
-import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
+import type {OnyxCollection} from 'react-native-onyx';
 import Icon from '@components/Icon';
 import {PressableWithoutFeedback} from '@components/Pressable';
 import useLocalize from '@hooks/useLocalize';
@@ -18,13 +18,12 @@ import Tab from '@userActions/Tab';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import {sessionEmailAndAccountIDSelector} from '@src/selectors/Session';
 import {validTransactionDraftIDsSelector} from '@src/selectors/TransactionDraft';
 import type * as OnyxTypes from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type IconAsset from '@src/types/utils/IconAsset';
 
-const sessionSelector = (session: OnyxEntry<OnyxTypes.Session>) => ({email: session?.email, accountID: session?.accountID});
-
 type BaseFloatingCameraButtonProps = {
     icon: IconAsset;
 };
@@ -36,23 +35,20 @@ function BaseFloatingCameraButton({icon}: BaseFloatingCameraButtonProps) {
 
     const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID);
     const [activePolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${activePolicyID}`);
-    const [session] = useOnyx(ONYXKEYS.SESSION, {selector: sessionSelector});
+    const [session] = useOnyx(ONYXKEYS.SESSION, {selector: sessionEmailAndAccountIDSelector});
     const [draftTransactionIDs] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_DRAFT, {selector: validTransactionDraftIDsSelector});
     const [userBillingGraceEndPeriods] = useOnyx(ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_USER_BILLING_GRACE_PERIOD_END);
     const [ownerBillingGraceEndPeriod] = useOnyx(ONYXKEYS.NVP_PRIVATE_OWNER_BILLING_GRACE_PERIOD_END);
-    const reportID = useMemo(() => generateReportID(), []);
+    const [reportID] = useState(() => generateReportID());
 
-    const policyChatForActivePolicySelector = useCallback(
-        (reports: OnyxCollection<OnyxTypes.Report>) => {
-            if (isEmptyObject(activePolicy) || !activePolicy?.isPolicyExpenseChatEnabled) {
-                return undefined;
-            }
-            const policyChatsForActivePolicy = getWorkspaceChats(activePolicyID, [session?.accountID ?? CONST.DEFAULT_NUMBER_ID], reports);
-            return policyChatsForActivePolicy.at(0);
-        },
-        [activePolicy, activePolicyID, session?.accountID],
-    );
-    const [policyChatForActivePolicy] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {selector: policyChatForActivePolicySelector}, [policyChatForActivePolicySelector]);
+    const policyChatForActivePolicySelector = (reports: OnyxCollection<OnyxTypes.Report>) => {
+        if (isEmptyObject(activePolicy) || !activePolicy?.isPolicyExpenseChatEnabled) {
+            return undefined;
+        }
+        const policyChatsForActivePolicy = getWorkspaceChats(activePolicyID, [session?.accountID ?? CONST.DEFAULT_NUMBER_ID], reports);
+        return policyChatsForActivePolicy.at(0);
+    };
+    const [policyChatForActivePolicy] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {selector: policyChatForActivePolicySelector});
 
     const onPress = () => {
         interceptAnonymousUser(() => {

src/components/Navigation/QuickCreationActionsBar/index.tsx

@@ -129,7 +129,7 @@ function QuickCreationActionsBar() {
         [currentUserPersonalDetails, hasViolations, defaultChatEnabledPolicy, isASAPSubmitBetaEnabled, allBetas],
     );
 
-    const {openCreateReportConfirmation, CreateReportConfirmationModal} = useCreateEmptyReportConfirmation({
+    const {openCreateReportConfirmation} = useCreateEmptyReportConfirmation({
         policyID: defaultChatEnabledPolicyID,
         policyName: defaultChatEnabledPolicy?.name ?? '',
         onConfirm: handleCreateWorkspaceReport,
@@ -229,45 +229,42 @@ function QuickCreationActionsBar() {
     );
 
     return (
-        <>
-            {CreateReportConfirmationModal}
-            <View style={[styles.flexRow, styles.gap2, styles.pt1, styles.pb5]}>
+        <View style={[styles.flexRow, styles.gap2, styles.pt1, styles.pb5]}>
+            <Button
+                small
+                icon={icons.ReceiptPlus}
+                text={translate('common.expense')}
+                onPress={handleExpense}
+                style={styles.quickCreationActionsBarButton}
+                textStyles={styles.quickCreationActionsBarButtonText}
+            />
+            <Button
+                small
+                icon={icons.DocumentPlus}
+                text={translate('common.report')}
+                onPress={handleReport}
+                style={styles.quickCreationActionsBarButton}
+                textStyles={styles.quickCreationActionsBarButtonText}
+            />
+            <Button
+                small
+                icon={icons.CarPlus}
+                text={translate('common.distance')}
+                onPress={handleDistance}
+                style={styles.quickCreationActionsBarButton}
+                textStyles={styles.quickCreationActionsBarButtonText}
+            />
+            {shouldShowBookTravel && (
                 <Button
                     small
-                    icon={icons.ReceiptPlus}
-                    text={translate('common.expense')}
-                    onPress={handleExpense}
+                    icon={icons.LuggageWithLines}
+                    text={translate('travel.bookTravel')}
+                    onPress={handleBookTravel}
                     style={styles.quickCreationActionsBarButton}
                     textStyles={styles.quickCreationActionsBarButtonText}
                 />
-                <Button
-                    small
-                    icon={icons.DocumentPlus}
-                    text={translate('common.report')}
-                    onPress={handleReport}
-                    style={styles.quickCreationActionsBarButton}
-                    textStyles={styles.quickCreationActionsBarButtonText}
-                />
-                <Button
-                    small
-                    icon={icons.CarPlus}
-                    text={translate('common.distance')}
-                    onPress={handleDistance}
-                    style={styles.quickCreationActionsBarButton}
-                    textStyles={styles.quickCreationActionsBarButtonText}
-                />
-                {shouldShowBookTravel && (
-                    <Button
-                        small
-                        icon={icons.LuggageWithLines}
-                        text={translate('travel.bookTravel')}
-                        onPress={handleBookTravel}
-                        style={styles.quickCreationActionsBarButton}
-                        textStyles={styles.quickCreationActionsBarButtonText}
-                    />
-                )}
-            </View>
-        </>
+            )}
+        </View>
     );
 }
 

src/components/Search/SearchPageHeader/SearchFiltersBarCreateButton.tsx

@@ -116,7 +116,7 @@ function SearchFiltersBarCreateButton() {
         [currentUserPersonalDetails, hasViolations, defaultChatEnabledPolicy, isASAPSubmitBetaEnabled, allBetas],
     );
 
-    const {openCreateReportConfirmation, CreateReportConfirmationModal} = useCreateEmptyReportConfirmation({
+    const {openCreateReportConfirmation} = useCreateEmptyReportConfirmation({
         policyID: defaultChatEnabledPolicyID,
         policyName: defaultChatEnabledPolicy?.name ?? '',
         onConfirm: handleCreateWorkspaceReport,
@@ -226,7 +226,6 @@ function SearchFiltersBarCreateButton() {
 
     return (
         <View style={[styles.pr5, styles.searchFiltersBarCreateButton]}>
-            {CreateReportConfirmationModal}
             <PopoverMenu
                 onClose={hideCreateMenu}
                 isVisible={isCreateMenuActive}

src/hooks/useConditionalCreateEmptyReportConfirmation.ts

@@ -1,5 +1,4 @@
 import {useCallback, useMemo} from 'react';
-import type {ReactNode} from 'react';
 import ONYXKEYS from '@src/ONYXKEYS';
 import useCreateEmptyReportConfirmation from './useCreateEmptyReportConfirmation';
 import useHasEmptyReportsForPolicy from './useHasEmptyReportsForPolicy';
@@ -23,8 +22,6 @@ type UseConditionalCreateEmptyReportConfirmationResult = {
     handleCreateReport: () => void;
     /** Whether an empty report already exists for the provided policy */
     hasEmptyReport: boolean;
-    /** The confirmation modal React component to render */
-    CreateReportConfirmationModal: ReactNode;
 };
 
 /**
@@ -49,7 +46,7 @@ export default function useConditionalCreateEmptyReportConfirmation({
         [onCreateReport],
     );
 
-    const {openCreateReportConfirmation, CreateReportConfirmationModal} = useCreateEmptyReportConfirmation({
+    const {openCreateReportConfirmation} = useCreateEmptyReportConfirmation({
         policyID,
         policyName,
         onConfirm: handleReportCreationConfirmed,
@@ -68,6 +65,5 @@ export default function useConditionalCreateEmptyReportConfirmation({
     return {
         handleCreateReport,
         hasEmptyReport,
-        CreateReportConfirmationModal,
     };
 }

src/hooks/useCreateEmptyReportConfirmation.tsx

@@ -1,14 +1,14 @@
-import type {ReactNode} from 'react';
-import React, {useCallback, useMemo, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import CheckboxWithLabel from '@components/CheckboxWithLabel';
-import ConfirmModal from '@components/ConfirmModal';
+import {ModalActions} from '@components/Modal/Global/ModalContext';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import Navigation from '@libs/Navigation/Navigation';
 import {buildCannedSearchQuery} from '@libs/SearchQueryUtils';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
+import useConfirmModal from './useConfirmModal';
 import useLocalize from './useLocalize';
 import useThemeStyles from './useThemeStyles';
 
@@ -26,100 +26,76 @@ type UseCreateEmptyReportConfirmationParams = {
 type UseCreateEmptyReportConfirmationResult = {
     /** Function to open the confirmation modal */
     openCreateReportConfirmation: () => void;
-    /** The confirmation modal React component to render */
-    CreateReportConfirmationModal: ReactNode;
 };
 
-/**
- * A React hook that provides a confirmation modal for creating empty reports.
- * When a user attempts to create a new report in a workspace where they already have an empty report,
- * this hook displays a confirmation modal to prevent accidental duplicate empty reports.
- *
- * @param params - Configuration object for the hook
- * @param params.policyName - The display name of the policy/workspace
- * @param params.onConfirm - Callback function to execute when user confirms report creation
- * @returns An object containing:
- *          - openCreateReportConfirmation: Function to open the confirmation modal
- *          - CreateReportConfirmationModal: The confirmation modal React component to render
- *
- * @example
- * const {openCreateReportConfirmation, CreateReportConfirmationModal} = useCreateEmptyReportConfirmation({
- *     policyID: 'policy123',
- *     policyName: 'Engineering Team',
- *     onConfirm: handleCreateReport,
- * });
- *
- */
-export default function useCreateEmptyReportConfirmation({policyName, onConfirm, onCancel}: UseCreateEmptyReportConfirmationParams): UseCreateEmptyReportConfirmationResult {
+function ConfirmationPrompt({workspaceName, checkboxRef, onLinkPress}: {workspaceName: string; checkboxRef: React.RefObject<boolean>; onLinkPress: () => void}) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
-    const workspaceDisplayName = useMemo(() => (policyName?.trim().length ? policyName : translate('report.newReport.genericWorkspaceName')), [policyName, translate]);
-    const [isVisible, setIsVisible] = useState(false);
-    const [modalWorkspaceName, setModalWorkspaceName] = useState(workspaceDisplayName);
-    const [shouldDismissEmptyReportsConfirmation, setShouldDismissEmptyReportsConfirmation] = useState(false);
+    const [isChecked, setIsChecked] = useState(false);
+
+    return (
+        <View style={styles.gap4}>
+            <Text>
+                {translate('report.newReport.emptyReportConfirmationPrompt', {workspaceName})}{' '}
+                <TextLink onPress={onLinkPress}>{translate('report.newReport.emptyReportConfirmationPromptLink')}.</TextLink>
+            </Text>
+            <CheckboxWithLabel
+                accessibilityLabel={translate('report.newReport.emptyReportConfirmationDontShowAgain')}
+                label={translate('report.newReport.emptyReportConfirmationDontShowAgain')}
+                isChecked={isChecked}
+                onInputChange={(value) => {
+                    const checked = !!value;
+                    setIsChecked(checked);
+                    // eslint-disable-next-line no-param-reassign
+                    checkboxRef.current = checked;
+                }}
+            />
+        </View>
+    );
+}
 
-    const handleConfirm = useCallback(() => {
-        onConfirm(shouldDismissEmptyReportsConfirmation);
-        setShouldDismissEmptyReportsConfirmation(false);
-        setIsVisible(false);
-    }, [onConfirm, shouldDismissEmptyReportsConfirmation]);
+export default function useCreateEmptyReportConfirmation({policyName, onConfirm, onCancel}: UseCreateEmptyReportConfirmationParams): UseCreateEmptyReportConfirmationResult {
+    const {translate} = useLocalize();
+    const {showConfirmModal, closeModal} = useConfirmModal();
+    const workspaceDisplayName = policyName?.trim().length ? policyName : translate('report.newReport.genericWorkspaceName');
 
-    const handleCancel = useCallback(() => {
-        onCancel?.();
-        setShouldDismissEmptyReportsConfirmation(false);
-        setIsVisible(false);
-    }, [onCancel]);
+    const onConfirmRef = useRef(onConfirm);
+    const onCancelRef = useRef(onCancel);
+    useEffect(() => {
+        onConfirmRef.current = onConfirm;
+        onCancelRef.current = onCancel;
+    }, [onConfirm, onCancel]);
 
-    const handleReportsLinkPress = useCallback(() => {
-        onCancel?.();
-        setShouldDismissEmptyReportsConfirmation(false);
-        setIsVisible(false);
-        Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: buildCannedSearchQuery({type: CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT})}));
-    }, [onCancel]);
+    const openCreateReportConfirmation = () => {
+        const checkboxRef = {current: false};
 
-    const openCreateReportConfirmation = useCallback(() => {
-        // The caller is responsible for determining if empty report confirmation
-        // should be shown. We simply open the modal when called.
-        setModalWorkspaceName(workspaceDisplayName);
-        setShouldDismissEmptyReportsConfirmation(false);
-        setIsVisible(true);
-    }, [workspaceDisplayName]);
+        const handleLinkPress = () => {
+            closeModal();
+            Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: buildCannedSearchQuery({type: CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT})}));
+        };
 
-    const prompt = useMemo(
-        () => (
-            <View style={styles.gap4}>
-                <Text>
-                    {translate('report.newReport.emptyReportConfirmationPrompt', {workspaceName: modalWorkspaceName})}{' '}
-                    <TextLink onPress={handleReportsLinkPress}>{translate('report.newReport.emptyReportConfirmationPromptLink')}.</TextLink>
-                </Text>
-                <CheckboxWithLabel
-                    accessibilityLabel={translate('report.newReport.emptyReportConfirmationDontShowAgain')}
-                    label={translate('report.newReport.emptyReportConfirmationDontShowAgain')}
-                    isChecked={shouldDismissEmptyReportsConfirmation}
-                    onInputChange={(value) => setShouldDismissEmptyReportsConfirmation(!!value)}
+        showConfirmModal({
+            // Adding a space at the end because of this bug in react-native: https://github.com/facebook/react-native/issues/53286
+            title: `${translate('report.newReport.emptyReportConfirmationTitle')} `,
+            confirmText: translate('report.newReport.createReport'),
+            cancelText: translate('common.cancel'),
+            prompt: (
+                <ConfirmationPrompt
+                    workspaceName={workspaceDisplayName}
+                    checkboxRef={checkboxRef}
+                    onLinkPress={handleLinkPress}
                 />
-            </View>
-        ),
-        [handleReportsLinkPress, modalWorkspaceName, shouldDismissEmptyReportsConfirmation, styles.gap4, translate],
-    );
-
-    const CreateReportConfirmationModal = useMemo(
-        () => (
-            <ConfirmModal
-                confirmText={translate('report.newReport.createReport')}
-                cancelText={translate('common.cancel')}
-                isVisible={isVisible}
-                onConfirm={handleConfirm}
-                onCancel={handleCancel}
-                prompt={prompt}
-                title={`${translate('report.newReport.emptyReportConfirmationTitle')} `} // Adding a space at the end because of this bug in react-native: https://github.com/facebook/react-native/issues/53286
-            />
-        ),
-        [handleCancel, handleConfirm, isVisible, prompt, translate],
-    );
+            ),
+        }).then((result) => {
+            if (result.action === ModalActions.CONFIRM) {
+                onConfirmRef.current(checkboxRef.current);
+            } else {
+                onCancelRef.current?.();
+            }
+        });
+    };
 
     return {
         openCreateReportConfirmation,
-        CreateReportConfirmationModal,
     };
 }

src/hooks/useDragoverDismiss/index.native.ts

@@ -0,0 +1,3 @@
+const useDragoverDismiss: (isActive: boolean, dismiss: () => void) => void = () => {};
+
+export default useDragoverDismiss;