Merge pull request #88095 from TaduJR/fix-Add-updated-automatic/scan-flow-to-native-share-sheet-creation-flow

[CP Staging] fix: share sheet upload edited receipt and keep Category after upgrade

Author: mountiny

src/components/MoneyRequestConfirmationList.tsx

@@ -323,7 +323,7 @@ function MoneyRequestConfirmationList({
 
     // A flag for showing the categories field
     const shouldShowCategories = isTrackExpense
-        ? !policy || shouldSelectPolicy || hasEnabledOptions(Object.values(policyCategories ?? {}))
+        ? !policy || shouldSelectPolicy || !!iouCategory || hasEnabledOptions(Object.values(policyCategories ?? {}))
         : (isPolicyExpenseChat || isTypeInvoice) && (!!iouCategory || hasEnabledOptions(Object.values(policyCategories ?? {})));
 
     const shouldShowMerchant = (shouldShowSmartScanFields || isTypeSend) && !isDistanceRequest && !isPerDiemRequest && (!isTimeRequest || action !== CONST.IOU.ACTION.CREATE);

src/pages/Share/ShareDetailsPage.tsx

@@ -37,9 +37,9 @@ import type SCREENS from '@src/SCREENS';
 import type {Report as ReportType} from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import KeyboardUtils from '@src/utils/keyboard';
-import getFileSize from './getFileSize';
 import ShareButton from './ShareButton';
 import {showErrorAlert} from './ShareRootPage';
+import useShareFileSizeValidation from './useShareFileSizeValidation';
 
 type ShareDetailsPageProps = StackScreenProps<ShareNavigatorParamList, typeof SCREENS.SHARE.SHARE_DETAILS>;
 
@@ -97,22 +97,7 @@ function ShareDetailsPage({route}: ShareDetailsPageProps) {
         Navigation.navigate(ROUTES.SHARE_DETAILS_ATTACHMENT);
     }, [reportAttachmentsContext, fileSource, validateFileName, icons.FallbackAvatar]);
 
-    useEffect(() => {
-        if (!currentAttachment?.content || errorTitle || !shouldShowAttachment) {
-            return;
-        }
-        getFileSize(currentAttachment?.content).then((size) => {
-            if (size > CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) {
-                setErrorTitle(translate('attachmentPicker.attachmentTooLarge'));
-                setErrorMessage(translate('attachmentPicker.sizeExceeded'));
-            }
-
-            if (size < CONST.API_ATTACHMENT_VALIDATIONS.MIN_SIZE) {
-                setErrorTitle(translate('attachmentPicker.attachmentTooSmall'));
-                setErrorMessage(translate('attachmentPicker.sizeNotMet'));
-            }
-        });
-    }, [currentAttachment?.content, errorTitle, translate, shouldShowAttachment]);
+    useShareFileSizeValidation(currentAttachment?.content, setErrorTitle, setErrorMessage, !errorTitle && shouldShowAttachment);
 
     useEffect(() => {
         if (!errorTitle || !errorMessage) {

src/pages/Share/SubmitDetailsPage.tsx

@@ -1,7 +1,7 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import {hasSeenTourSelector} from '@selectors/Onboarding';
 import {validTransactionDraftsSelector} from '@selectors/TransactionDraft';
-import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
@@ -15,6 +15,7 @@ import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
 import usePermissions from '@hooks/usePermissions';
 import usePersonalPolicy from '@hooks/usePersonalPolicy';
+import usePolicyForTransaction from '@hooks/usePolicyForTransaction';
 import usePrivateIsArchivedMap from '@hooks/usePrivateIsArchivedMap';
 import useReportAttributes from '@hooks/useReportAttributes';
 import useReportIsArchived from '@hooks/useReportIsArchived';
@@ -51,6 +52,7 @@ import type {Report as ReportType} from '@src/types/onyx';
 import type {Participant} from '@src/types/onyx/IOU';
 import type {Receipt} from '@src/types/onyx/Transaction';
 import {showErrorAlert} from './ShareRootPage';
+import useShareFileSizeValidation from './useShareFileSizeValidation';
 
 type ShareDetailsPageProps = StackScreenProps<ShareNavigatorParamList, typeof SCREENS.SHARE.SUBMIT_DETAILS>;
 function SubmitDetailsPage({
@@ -64,8 +66,16 @@ function SubmitDetailsPage({
     const [personalDetails] = useOnyx(`${ONYXKEYS.PERSONAL_DETAILS_LIST}`);
     const report: OnyxEntry<ReportType> = getReportOrDraftReport(reportOrAccountID);
     const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID}`);
-    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`);
     const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${CONST.IOU.OPTIMISTIC_TRANSACTION_ID}`);
+    const iouType = isSelfDM(report) ? CONST.IOU.TYPE.TRACK : CONST.IOU.TYPE.SUBMIT;
+    // Self-DM has a FAKE report policyID — usePolicyForTransaction (same hook MoneyRequestConfirmationList uses) returns the active workspace for self-DM track expense, covering the upgrade-from-free flow.
+    const {policy} = usePolicyForTransaction({
+        transaction,
+        reportPolicyID: getIOURequestPolicyID(transaction, report),
+        action: CONST.IOU.ACTION.CREATE,
+        iouType,
+        isPerDiemRequest: false,
+    });
     const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${getIOURequestPolicyID(transaction, report)}`);
     const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${getIOURequestPolicyID(transaction, report)}`);
     const [lastLocationPermissionPrompt] = useOnyx(ONYXKEYS.NVP_LAST_LOCATION_PERMISSION_PROMPT);
@@ -92,6 +102,10 @@ function SubmitDetailsPage({
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const personalPolicy = usePersonalPolicy();
     const [startLocationPermissionFlow, setStartLocationPermissionFlow] = useState(false);
+    const [selectedParticipantList, setSelectedParticipantList] = useState<Participant[]>([]);
+    const [isConfirming, setIsConfirming] = useState(false);
+    const formHasBeenSubmitted = useRef(false);
+    const [userLocation] = useOnyx(ONYXKEYS.USER_LOCATION);
 
     const [errorTitle, setErrorTitle] = useState<string | undefined>(undefined);
     const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
@@ -128,18 +142,26 @@ function SubmitDetailsPage({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [reportOrAccountID, policy, personalPolicy, report, parentReport, currentDate, currentUserPersonalDetails, hasOnlyPersonalPolicies]);
 
-    // Set receipt on the transaction draft so isScanRequest() returns true and
-    // compact mode, "Automatic" labels, and receipt image rendering all work correctly
-    const receiptSource = currentAttachment?.content ?? fileUri;
-    const receiptFileName = getFileName(currentAttachment?.content ?? '') || fileName;
-    const receiptFileType = currentAttachment?.mimeType ?? fileType;
+    const sharedFileSource = currentAttachment?.content ?? fileUri;
+    const sharedFileName = getFileName(currentAttachment?.content ?? '') || fileName;
+    const sharedFileType = currentAttachment?.mimeType ?? fileType;
 
+    // Seed the transaction draft so isScanRequest() returns true and compact mode / "Automatic" labels / receipt rendering work.
     useEffect(() => {
-        if (!receiptSource) {
+        if (!sharedFileSource) {
             return;
         }
-        setMoneyRequestReceipt(CONST.IOU.OPTIMISTIC_TRANSACTION_ID, receiptSource, receiptFileName, true, receiptFileType);
-    }, [receiptSource, receiptFileName, receiptFileType]);
+        setMoneyRequestReceipt(CONST.IOU.OPTIMISTIC_TRANSACTION_ID, sharedFileSource, sharedFileName, true, sharedFileType);
+    }, [sharedFileSource, sharedFileName, sharedFileType]);
+
+    // The current receipt — prefers the transaction draft (reflects Replace/Crop), falls back to the shared file; used for both display and upload so they stay in sync.
+    const currentReceiptSource = typeof transaction?.receipt?.source === 'string' ? transaction.receipt.source : sharedFileSource;
+    // Strip filesystem path segments without URL-decoding — getFileName() decodes via decodeURIComponent and would throw on raw filenames containing a literal '%' (e.g., "Receipt 100%.jpg").
+    const currentReceiptName = (transaction?.receipt?.filename?.split('/').pop() ?? '') || sharedFileName;
+    const currentReceiptType = transaction?.receipt?.type ?? sharedFileType;
+
+    // Validate the same source that performUpload reads — so Replace/Crop to an oversized file is still caught before submit.
+    useShareFileSizeValidation(currentReceiptSource, setErrorTitle, setErrorMessage, !errorTitle);
 
     const selectedParticipants = unknownUserDetails ? [unknownUserDetails] : getMoneyRequestParticipantsFromReport(report, currentUserPersonalDetails.accountID);
     const participants = selectedParticipants.map((participant) => {
@@ -152,7 +174,6 @@ function SubmitDetailsPage({
     const isPolicyExpenseChat = useMemo(() => participants?.some((participant) => participant.isPolicyExpenseChat), [participants]);
     const policyExpenseChatPolicyID = participants?.find((participant) => participant.isPolicyExpenseChat)?.policyID;
     const senderPolicyID = participants?.find((participant) => !!participant && 'isSender' in participant && participant.isSender)?.policyID;
-    const iouType = isSelfDM(report) ? CONST.IOU.TYPE.TRACK : CONST.IOU.TYPE.SUBMIT;
     const {isOffline} = useNetwork();
     const isCreatingTrackExpense = iouType === CONST.IOU.TYPE.TRACK;
 
@@ -275,51 +296,72 @@ function SubmitDetailsPage({
     const onSuccess = (participant: Participant, file: File, locationPermissionGranted?: boolean) => {
         const receipt: Receipt = file;
         receipt.state = file && CONST.IOU.RECEIPT_STATE.SCAN_READY;
-        if (locationPermissionGranted) {
-            getCurrentPosition(
-                (successData) => {
-                    finishRequestAndNavigate(participant, receipt, {
-                        lat: successData.coords.latitude,
-                        long: successData.coords.longitude,
-                    });
-                },
-                (errorData) => {
-                    Log.info('[SubmitDetailsPage] getCurrentPosition failed', false, errorData);
-                    finishRequestAndNavigate(participant, receipt);
-                },
-            );
+        if (!locationPermissionGranted) {
+            finishRequestAndNavigate(participant, receipt);
+            return;
+        }
+        // Use cached userLocation when available — avoids an extra getCurrentPosition round-trip.
+        if (userLocation) {
+            finishRequestAndNavigate(participant, receipt, {
+                lat: userLocation.latitude,
+                long: userLocation.longitude,
+            });
+            return;
+        }
+        getCurrentPosition(
+            (successData) => {
+                finishRequestAndNavigate(participant, receipt, {
+                    lat: successData.coords.latitude,
+                    long: successData.coords.longitude,
+                });
+            },
+            (errorData) => {
+                Log.info('[SubmitDetailsPage] getCurrentPosition failed', false, errorData);
+                finishRequestAndNavigate(participant, receipt);
+            },
+        );
+    };
+
+    // Extracted from onConfirm — re-entering onConfirm from the permission modal deadlocked when OS permission was pre-granted.
+    const performUpload = (participant: Participant, locationPermissionGranted: boolean) => {
+        if (formHasBeenSubmitted.current || !currentAttachment) {
+            setIsConfirming(false);
             return;
         }
-        finishRequestAndNavigate(participant, receipt);
+        formHasBeenSubmitted.current = true;
+        readFileAsync(
+            currentReceiptSource,
+            currentReceiptName,
+            (file) => onSuccess(participant, file, locationPermissionGranted),
+            () => {
+                // Allow retry after a file-read failure.
+                formHasBeenSubmitted.current = false;
+                setIsConfirming(false);
+            },
+            currentReceiptType,
+        );
     };
 
     const onConfirm = (listOfParticipants?: Participant[], gpsRequired?: boolean) => {
+        setIsConfirming(true);
         const shouldStartLocationPermissionFlow =
             gpsRequired &&
             (!lastLocationPermissionPrompt ||
                 (DateUtils.isValidDateString(lastLocationPermissionPrompt ?? '') &&
                     DateUtils.getDifferenceInDaysFromNow(new Date(lastLocationPermissionPrompt ?? '')) > CONST.IOU.LOCATION_PERMISSION_PROMPT_THRESHOLD_DAYS));
 
         if (shouldStartLocationPermissionFlow) {
+            setSelectedParticipantList(listOfParticipants ?? selectedParticipants);
             setStartLocationPermissionFlow(true);
             return;
         }
-        if (!currentAttachment) {
-            return;
-        }
 
         const participant = listOfParticipants?.at(0) ?? selectedParticipants.at(0);
         if (!participant) {
+            setIsConfirming(false);
             return;
         }
-
-        readFileAsync(
-            receiptSource,
-            receiptFileName,
-            (file) => onSuccess(participant, file, shouldStartLocationPermissionFlow),
-            () => {},
-            receiptFileType,
-        );
+        performUpload(participant, false);
     };
 
     return (
@@ -339,15 +381,30 @@ function SubmitDetailsPage({
                 />
                 <LocationPermissionModal
                     startPermissionFlow={startLocationPermissionFlow}
-                    resetPermissionFlow={() => setStartLocationPermissionFlow(false)}
-                    onGrant={() => onConfirm(undefined, true)}
+                    resetPermissionFlow={() => {
+                        setStartLocationPermissionFlow(false);
+                        setIsConfirming(false);
+                    }}
+                    onGrant={() => {
+                        setStartLocationPermissionFlow(false);
+                        const participant = selectedParticipantList.at(0) ?? selectedParticipants.at(0);
+                        if (!participant) {
+                            setIsConfirming(false);
+                            return;
+                        }
+                        navigateAfterInteraction(() => performUpload(participant, true));
+                    }}
                     onDeny={() => {
                         updateLastLocationPermissionPrompt();
                         setStartLocationPermissionFlow(false);
-                        navigateAfterInteraction(() => {
-                            onConfirm(undefined, false);
-                        });
+                        const participant = selectedParticipantList.at(0) ?? selectedParticipants.at(0);
+                        if (!participant) {
+                            setIsConfirming(false);
+                            return;
+                        }
+                        navigateAfterInteraction(() => performUpload(participant, false));
                     }}
+                    onInitialGetLocationCompleted={() => setIsConfirming(false)}
                 />
                 <View style={[styles.containerWithSpaceBetween, styles.pointerEventsBoxNone]}>
                     <MoneyRequestConfirmationList
@@ -358,9 +415,10 @@ function SubmitDetailsPage({
                         onToggleReimbursable={setReimbursable}
                         isPolicyExpenseChat={isPolicyExpenseChat}
                         policyID={policy?.id}
+                        isConfirming={isConfirming}
                         onConfirm={(updatedParticipants) => onConfirm(updatedParticipants, true)}
-                        receiptPath={receiptSource}
-                        receiptFilename={receiptFileName}
+                        receiptPath={currentReceiptSource}
+                        receiptFilename={currentReceiptName}
                         reportID={reportOrAccountID}
                         shouldShowSmartScanFields={false}
                         shouldDisplayReceipt

src/pages/Share/useShareFileSizeValidation.ts

@@ -0,0 +1,38 @@
+import {useEffect} from 'react';
+import type {Dispatch, SetStateAction} from 'react';
+import useLocalize from '@hooks/useLocalize';
+import CONST from '@src/CONST';
+import getFileSize from './getFileSize';
+
+type SetState = Dispatch<SetStateAction<string | undefined>>;
+
+/** Validate the shared file against API min/max size limits. Pass `enabled: false` to skip (e.g., when an earlier error already took precedence). */
+function useShareFileSizeValidation(content: string | undefined, setErrorTitle: SetState, setErrorMessage: SetState, enabled = true) {
+    const {translate} = useLocalize();
+
+    useEffect(() => {
+        if (!content || !enabled) {
+            return;
+        }
+        let ignore = false;
+        getFileSize(content).then((size) => {
+            if (ignore) {
+                return;
+            }
+            if (size > CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) {
+                setErrorTitle(translate('attachmentPicker.attachmentTooLarge'));
+                setErrorMessage(translate('attachmentPicker.sizeExceeded'));
+            }
+
+            if (size < CONST.API_ATTACHMENT_VALIDATIONS.MIN_SIZE) {
+                setErrorTitle(translate('attachmentPicker.attachmentTooSmall'));
+                setErrorMessage(translate('attachmentPicker.sizeNotMet'));
+            }
+        });
+        return () => {
+            ignore = true;
+        };
+    }, [content, enabled, setErrorTitle, setErrorMessage, translate]);
+}
+
+export default useShareFileSizeValidation;