Enabling Receipt drag and drop inside the confirmation step

src/components/EReceiptThumbnail.tsx

@@ -1,7 +1,7 @@
 import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ReportUtils from '@libs/ReportUtils';
@@ -24,10 +24,9 @@ type EReceiptThumbnailOnyxProps = {
 
 type IconSize = 'x-small' | 'small' | 'medium' | 'large';
 
-type EReceiptThumbnailProps = EReceiptThumbnailOnyxProps & {
+type EReceiptThumbnailProps = {
     /** TransactionID of the transaction this EReceipt corresponds to. It's used by withOnyx HOC */
-    // eslint-disable-next-line react/no-unused-prop-types
-    transactionID: string;
+    transactionID?: string;
 
     /** Border radius to be applied on the parent view. */
     borderRadius?: number;
@@ -54,7 +53,9 @@ const backgroundImages = {
     [CONST.ERECEIPT_COLORS.PINK]: eReceiptBGs.EReceiptBG_Pink,
 };
 
-function EReceiptThumbnail({transaction, borderRadius, fileExtension, isReceiptThumbnail = false, centerIconV = true, iconSize = 'large'}: EReceiptThumbnailProps) {
+function EReceiptThumbnail({transactionID, borderRadius, fileExtension, isReceiptThumbnail = false, centerIconV = true, iconSize = 'large'}: EReceiptThumbnailProps) {
+    const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
+
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const colorCode = isReceiptThumbnail ? StyleUtils.getFileExtensionColorCode(fileExtension) : StyleUtils.getEReceiptColorCode(transaction);
@@ -158,9 +159,5 @@ function EReceiptThumbnail({transaction, borderRadius, fileExtension, isReceiptT
 }
 
 EReceiptThumbnail.displayName = 'EReceiptThumbnail';
-export default withOnyx<EReceiptThumbnailProps, EReceiptThumbnailOnyxProps>({
-    transaction: {
-        key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
-    },
-})(EReceiptThumbnail);
-export type {IconSize, EReceiptThumbnailProps, EReceiptThumbnailOnyxProps};
+export default EReceiptThumbnail;
+export type {EReceiptThumbnailOnyxProps, EReceiptThumbnailProps, IconSize};

src/components/MoneyRequestConfirmationListFooter.tsx

@@ -21,8 +21,8 @@ import * as TagsOptionsListUtils from '@libs/TagsOptionsListUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
 import ToggleSettingOptionRow from '@pages/workspace/workflows/ToggleSettingsOptionRow';
-import CONST from '@src/CONST';
 import type {IOUAction, IOUType} from '@src/CONST';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type * as OnyxTypes from '@src/types/onyx';
@@ -821,6 +821,7 @@ function MoneyRequestConfirmationListFooter({
                     ? receiptThumbnailContent
                     : shouldShowReceiptEmptyState && (
                           <ReceiptEmptyState
+                              transactionID={transactionID}
                               onPress={() => {
                                   if (!transactionID) {
                                       return;
@@ -830,6 +831,7 @@ function MoneyRequestConfirmationListFooter({
                                       ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(CONST.IOU.ACTION.CREATE, iouType, transactionID, reportID, Navigation.getActiveRouteWithoutParams()),
                                   );
                               }}
+                              shouldAllowReceiptDrop
                           />
                       ))}
             {primaryFields}

src/components/ReceiptEmptyState.tsx

@@ -1,11 +1,22 @@
-import React from 'react';
-import {View} from 'react-native';
+import {Str} from 'expensify-common';
+import React, {useState} from 'react';
+import {PixelRatio, View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as FileUtils from '@libs/fileDownload/FileUtils';
+import {validateReceipt} from '@libs/ReceiptUtils';
+import ReceiptDropUI from '@pages/iou/ReceiptDropUI';
 import variables from '@styles/variables';
+import * as IOU from '@userActions/IOU';
+import CONST from '@src/CONST';
+import type {TranslationPaths} from '@src/languages/types';
+import type {FileObject} from './AttachmentModal';
+import ConfirmModal from './ConfirmModal';
+import FullScreenLoadingIndicator from './FullscreenLoadingIndicator';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
+import PDFThumbnail from './PDFThumbnail';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 
 type ReceiptEmptyStateProps = {
@@ -18,13 +29,86 @@ type ReceiptEmptyStateProps = {
     disabled?: boolean;
 
     isThumbnail?: boolean;
+
+    shouldAllowReceiptDrop?: boolean;
+
+    transactionID: string | undefined;
 };
 
 // Returns an SVG icon indicating that the user should attach a receipt
-function ReceiptEmptyState({hasError = false, onPress, disabled = false, isThumbnail = false}: ReceiptEmptyStateProps) {
+function ReceiptEmptyState({hasError = false, onPress, disabled = false, isThumbnail = false, shouldAllowReceiptDrop = false, transactionID}: ReceiptEmptyStateProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const theme = useTheme();
+    const [receiptImageTopPosition, setReceiptImageTopPosition] = useState(0);
+    const [isAttachmentInvalid, setIsAttachmentInvalid] = useState(false);
+    const [attachmentInvalidReasonTitle, setAttachmentInvalidReasonTitle] = useState<TranslationPaths>();
+    const [attachmentInvalidReason, setAttachmentValidReason] = useState<TranslationPaths>();
+    const [pdfFile, setPdfFile] = useState<null | FileObject>(null);
+    const [isLoadingReceipt, setIsLoadingReceipt] = useState(false);
+
+    /**
+     * Sets the upload receipt error modal content when an invalid receipt is uploaded
+     */
+    const setUploadReceiptError = (isInvalid: boolean, title: TranslationPaths, reason: TranslationPaths) => {
+        setIsAttachmentInvalid(isInvalid);
+        setAttachmentInvalidReasonTitle(title);
+        setAttachmentValidReason(reason);
+        setPdfFile(null);
+    };
+
+    const setReceipt = (originalFile: FileObject, isPdfValidated?: boolean) => {
+        validateReceipt(originalFile).then((result) => {
+            if (!result.isValid) {
+                if (result.title && result.reason) {
+                    setUploadReceiptError(true, result.title, result.reason);
+                }
+                return;
+            }
+
+            // If we have a pdf file and if it is not validated then set the pdf file for validation and return
+            if (Str.isPDF(originalFile.name ?? '') && !isPdfValidated) {
+                setPdfFile(originalFile);
+                return;
+            }
+
+            // With the image size > 24MB, we use manipulateAsync to resize the image.
+            // It takes a long time so we should display a loading indicator while the resize image progresses.
+            if (Str.isImage(originalFile.name ?? '') && (originalFile?.size ?? 0) > CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) {
+                setIsLoadingReceipt(true);
+            }
+
+            FileUtils.resizeImageIfNeeded(originalFile).then((file) => {
+                setIsLoadingReceipt(false);
+                const source = URL.createObjectURL(file as Blob);
+                if (transactionID) {
+                    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                    IOU.setMoneyRequestReceipt(transactionID, source, file.name || '', true);
+                }
+            });
+        });
+    };
+
+    const hideRecieptModal = () => {
+        setIsAttachmentInvalid(false);
+    };
+
+    const PDFThumbnailView = pdfFile ? (
+        <PDFThumbnail
+            style={styles.invisiblePDF}
+            previewSourceURL={pdfFile.uri ?? ''}
+            onLoadSuccess={() => {
+                setPdfFile(null);
+                setReceipt(pdfFile, true);
+            }}
+            onPassword={() => {
+                setUploadReceiptError(true, 'attachmentPicker.attachmentError', 'attachmentPicker.protectedPDFNotSupported');
+            }}
+            onLoadError={() => {
+                setUploadReceiptError(true, 'attachmentPicker.attachmentError', 'attachmentPicker.errorWhileSelectingCorruptedAttachment');
+            }}
+        />
+    ) : null;
 
     const Wrapper = onPress ? PressableWithoutFeedback : View;
 
@@ -38,12 +122,35 @@ function ReceiptEmptyState({hasError = false, onPress, disabled = false, isThumb
             style={[
                 styles.alignItemsCenter,
                 styles.justifyContentCenter,
-                styles.moneyRequestViewImage,
+                styles.moneyRequestImage,
                 isThumbnail ? styles.moneyRequestAttachReceiptThumbnail : styles.moneyRequestAttachReceipt,
                 hasError && styles.borderColorDanger,
             ]}
         >
-            <View>
+            {isLoadingReceipt && <FullScreenLoadingIndicator />}
+            {PDFThumbnailView}
+            {shouldAllowReceiptDrop && !disabled && (
+                <ReceiptDropUI
+                    onDrop={(e) => {
+                        const file = e?.dataTransfer?.files[0];
+                        if (file) {
+                            file.uri = URL.createObjectURL(file);
+                            setReceipt(file);
+                        }
+                    }}
+                    receiptImageTopPosition={receiptImageTopPosition}
+                />
+            )}
+            <ConfirmModal
+                title={attachmentInvalidReasonTitle ? translate(attachmentInvalidReasonTitle) : ''}
+                onConfirm={hideRecieptModal}
+                onCancel={hideRecieptModal}
+                isVisible={isAttachmentInvalid}
+                prompt={attachmentInvalidReason ? translate(attachmentInvalidReason) : ''}
+                confirmText={translate('common.close')}
+                shouldShowCancelButton={false}
+            />
+            <View onLayout={({nativeEvent}) => setReceiptImageTopPosition(PixelRatio.roundToNearestPixel((nativeEvent.layout as DOMRect).top))}>
                 <Icon
                     fill={theme.border}
                     src={Expensicons.Receipt}

src/components/ReceiptImage.tsx

@@ -114,6 +114,7 @@ function ReceiptImage({
                 isThumbnail
                 onPress={onPress}
                 disabled={!onPress}
+                transactionID={transactionID}
             />
         );
     }
@@ -132,7 +133,7 @@ function ReceiptImage({
         return (
             <View style={style ?? [styles.w100, styles.h100]}>
                 <EReceiptThumbnail
-                    transactionID={transactionID ?? '-1'}
+                    transactionID={transactionID}
                     iconSize={iconSize}
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...props}