Merge pull request Expensify#82139 from callstack-internal/update-uploading-receipt-screen

Author: mjasikowski

src/CONST/index.ts

@@ -9745,6 +9745,9 @@ const CONST = {
         SETTINGS_EXIT_SURVEY: {
             GO_TO_CLASSIC: 'SettingsExitSurvey-GoToExpensifyClassic',
         },
+        MESSAGES_ROW: {
+            DISMISS: 'MessagesRow-Dismiss',
+        },
         PROFILE_PAGE: {
             AVATAR: 'ProfilePage-Avatar',
         },

src/components/DotIndicatorMessage.tsx

@@ -3,7 +3,6 @@ import type {ReactElement} from 'react';
 import React from 'react';
 import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {View} from 'react-native';
-import useConfirmModal from '@hooks/useConfirmModal';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -13,12 +12,11 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import {isReceiptError, isTranslationKeyError} from '@libs/ErrorUtils';
 import fileDownload from '@libs/fileDownload';
-import handleRetryPress from '@libs/ReceiptUploadRetryHandler';
 import CONST from '@src/CONST';
 import type {TranslationKeyError} from '@src/types/onyx/OnyxCommon';
 import type {ReceiptError} from '@src/types/onyx/Transaction';
+import Button from './Button';
 import Icon from './Icon';
-import RenderHTML from './RenderHTML';
 import Text from './Text';
 
 type DotIndicatorMessageProps = {
@@ -50,8 +48,8 @@ function DotIndicatorMessage({messages = {}, style, type, textStyles, dismissErr
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
     const expensifyIcons = useMemoizedLazyExpensifyIcons(['DotIndicator']);
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
-    const {showConfirmModal} = useConfirmModal();
+    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
+    const {shouldUseNarrowLayout, isSmallScreenWidth, isInNarrowPaneModal} = useResponsiveLayout();
 
     if (Object.keys(messages).length === 0) {
         return null;
@@ -67,36 +65,12 @@ function DotIndicatorMessage({messages = {}, style, type, textStyles, dismissErr
 
     const isErrorMessage = type === 'error';
     const receiptError = uniqueMessages.find(isReceiptError);
-    const handleLinkPress = (href: string) => {
-        if (!receiptError) {
-            return;
-        }
-
-        if (href.endsWith('retry')) {
-            handleRetryPress(receiptError, dismissError, () => {
-                showConfirmModal({
-                    prompt: translate('common.genericErrorMessage'),
-                    confirmText: translate('common.ok'),
-                    shouldShowCancelButton: false,
-                });
-            });
-        } else if (href.endsWith('download')) {
-            fileDownload(translate, receiptError.source, receiptError.filename).finally(() => dismissError());
-        }
-    };
 
     const isTextSelectable = !canUseTouchScreen() || !shouldUseNarrowLayout;
 
     const renderMessage = (message: string | ReceiptError | ReactElement, index: number) => {
         if (isReceiptError(message)) {
-            return (
-                <View style={[styles.renderHTML, styles.flexRow]}>
-                    <RenderHTML
-                        html={translate('iou.error.receiptFailureMessage')}
-                        onLinkPress={(_evt, href) => handleLinkPress(href)}
-                    />
-                </View>
-            );
+            return null;
         }
 
         const displayMessage = isTranslationKeyError(message) ? translate(message.translationKey) : message;
@@ -114,6 +88,58 @@ function DotIndicatorMessage({messages = {}, style, type, textStyles, dismissErr
         );
     };
 
+    if (receiptError) {
+        const isStackedLayout = !(isInNarrowPaneModal && !isSmallScreenWidth);
+        const messageRow = (
+            <View style={[styles.dotIndicatorMessage, isStackedLayout && styles.alignItemsStart, styles.flex1]}>
+                <View style={styles.offlineFeedbackErrorDot}>
+                    <Icon
+                        src={expensifyIcons.DotIndicator}
+                        fill={isErrorMessage ? theme.danger : theme.success}
+                    />
+                </View>
+                <Text
+                    style={[StyleUtils.getDotIndicatorTextStyles(isErrorMessage), textStyles, styles.flex1]}
+                    accessibilityRole={isErrorMessage ? CONST.ROLE.ALERT : undefined}
+                    accessibilityLiveRegion={isErrorMessage ? 'assertive' : undefined}
+                >
+                    {translate('iou.error.receiptUploadFailedMessage')}
+                </Text>
+            </View>
+        );
+        const buttonsRow = (
+            <View style={[styles.flexRow, styles.gap3]}>
+                <Button
+                    small
+                    text={translate('iou.error.saveReceipt')}
+                    onPress={() => {
+                        fileDownload(translate, receiptError.source, receiptError.filename);
+                    }}
+                />
+                <Button
+                    small
+                    danger
+                    text={translate('iou.deleteExpense', {count: 1})}
+                    onPress={dismissError}
+                />
+            </View>
+        );
+        if (!isStackedLayout) {
+            return (
+                <View style={[styles.flexRow, styles.gap3, styles.alignItemsCenter, style]}>
+                    {messageRow}
+                    {buttonsRow}
+                </View>
+            );
+        }
+        return (
+            <View style={style}>
+                {messageRow}
+                <View style={styles.mt3}>{buttonsRow}</View>
+            </View>
+        );
+    }
+
     return (
         <View style={[styles.dotIndicatorMessage, style]}>
             <View

src/components/MessagesRow.tsx

@@ -5,6 +5,7 @@ import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {isReceiptError} from '@libs/ErrorUtils';
 import CONST from '@src/CONST';
 import type {TranslationKeyError} from '@src/types/onyx/OnyxCommon';
 import type {ReceiptError} from '@src/types/onyx/Transaction';
@@ -40,7 +41,8 @@ function MessagesRow({messages = {}, type, onDismiss, containerStyles, dismissEr
     const {translate} = useLocalize();
     const icons = useMemoizedLazyExpensifyIcons(['Close']);
 
-    const showDismissButton = !!onDismiss;
+    const hasReceiptUploadError = Object.values(messages).some((message) => isReceiptError(message));
+    const showDismissButton = !!onDismiss && !hasReceiptUploadError;
 
     const dismissText = translate('common.dismiss');
 
@@ -63,6 +65,7 @@ function MessagesRow({messages = {}, type, onDismiss, containerStyles, dismissEr
                         onPress={onDismiss}
                         role={CONST.ROLE.BUTTON}
                         accessibilityLabel={dismissText}
+                        sentryLabel={CONST.SENTRY_LABEL.MESSAGES_ROW.DISMISS}
                     >
                         <Icon
                             fill={theme.icon}

src/components/ReceiptAudit.tsx

@@ -14,16 +14,22 @@ type ReceiptAuditProps = {
 
     /** Whether to show audit result or not (e.g.`Verified`, `Issue Found`) */
     shouldShowAuditResult: boolean;
+
+    /** Whether the receipt upload itself failed — forces the "Issue found" label/dot regardless of audit state */
+    hasReceiptUploadError?: boolean;
 };
 
-function ReceiptAudit({notes, shouldShowAuditResult}: ReceiptAuditProps) {
+function ReceiptAudit({notes, shouldShowAuditResult, hasReceiptUploadError = false}: ReceiptAuditProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
     const {translate} = useLocalize();
     const icons = useMemoizedLazyExpensifyIcons(['Checkmark', 'DotIndicator']);
 
+    const hasIssues = hasReceiptUploadError || notes.length > 0;
     let auditText = '';
-    if (notes.length > 0 && shouldShowAuditResult) {
+    if (hasReceiptUploadError) {
+        auditText = translate('iou.receiptIssuesFound', {count: 1});
+    } else if (notes.length > 0 && shouldShowAuditResult) {
         auditText = translate('iou.receiptIssuesFound', {count: notes.length});
     } else if (!notes.length && shouldShowAuditResult) {
         auditText = translate('common.verified');
@@ -39,8 +45,8 @@ function ReceiptAudit({notes, shouldShowAuditResult}: ReceiptAuditProps) {
                         <Icon
                             width={12}
                             height={12}
-                            src={notes.length ? icons.DotIndicator : icons.Checkmark}
-                            fill={notes.length ? theme.danger : theme.success}
+                            src={hasIssues ? icons.DotIndicator : icons.Checkmark}
+                            fill={hasIssues ? theme.danger : theme.success}
                             additionalStyles={styles.ml1}
                         />
                     </>

src/components/ReportActionItem/MoneyRequestReceiptView.tsx

@@ -1,3 +1,4 @@
+import {useRoute} from '@react-navigation/native';
 import {hasSeenTourSelector} from '@selectors/Onboarding';
 import mapValues from 'lodash/mapValues';
 import React, {useEffect, useMemo, useRef, useState} from 'react';
@@ -37,7 +38,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useTransactionViolations from '@hooks/useTransactionViolations';
 import {getBrokenConnectionUrlToFixPersonalCard} from '@libs/CardUtils';
 import {hasHoverSupport} from '@libs/DeviceCapabilities';
-import {getMicroSecondOnyxErrorWithTranslationKey, isReceiptError} from '@libs/ErrorUtils';
+import {getMicroSecondOnyxErrorObject, getMicroSecondOnyxErrorWithTranslationKey, isReceiptError} from '@libs/ErrorUtils';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import {getThumbnailAndImageURIs} from '@libs/ReceiptUtils';
 import {getOriginalMessage, isMoneyRequestAction, wasActionTakenByCurrentUser} from '@libs/ReportActionsUtils';
@@ -64,7 +65,7 @@ import variables from '@styles/variables';
 import {clearAllRelatedReportActionErrors} from '@userActions/ClearReportActionErrors';
 import {cleanUpMoneyRequest} from '@userActions/IOU/DeleteMoneyRequest';
 import {replaceReceipt} from '@userActions/IOU/Receipt';
-import {addAttachmentWithComment, navigateToConciergeChatAndDeleteReport} from '@userActions/Report';
+import {addAttachmentWithComment, navigateToConciergeChatAndDeleteReport, setDeleteTransactionNavigateBackUrl} from '@userActions/Report';
 import {clearError, getLastModifiedExpense, revert} from '@userActions/Transaction';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -125,6 +126,8 @@ function MoneyRequestReceiptView({
     const {environmentURL} = useEnvironment();
     const {shouldUseNarrowLayout, isInNarrowPaneModal} = useResponsiveLayout();
     const {getReportRHPActiveRoute} = useActiveRoute();
+    const route = useRoute();
+    const routeBackTo = (route.params as {backTo?: string} | undefined)?.backTo;
     const parentReportID = report?.parentReportID;
     const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(parentReportID)}`);
     const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(parentReport?.parentReportID)}`);
@@ -297,15 +300,6 @@ function MoneyRequestReceiptView({
     const itemizedReceiptRequiredViolation = transactionViolations?.some((violation) => violation.name === CONST.VIOLATIONS.ITEMIZED_RECEIPT_REQUIRED);
     const customRulesViolation = transactionViolations?.some((violation) => violation.name === CONST.VIOLATIONS.CUSTOM_RULES);
 
-    // Whether to show receipt audit result (e.g.`Verified`, `Issue Found`) and messages (e.g. `Receipt not verified. Please confirm accuracy.`)
-    // `!!(receiptViolations.length || didReceiptScanSucceed)` is for not showing `Verified` when `receiptViolations` is empty and `didReceiptScanSucceed` is false.
-    const shouldShowAuditMessage =
-        !isTransactionScanning &&
-        (hasReceipt || !!receiptRequiredViolation || !!itemizedReceiptRequiredViolation || !!customRulesViolation) &&
-        !!(receiptViolations.length || didReceiptScanSucceed) &&
-        isPaidGroupPolicy(report);
-    const shouldShowReceiptAudit = !isInvoice && (shouldShowReceiptEmptyState || hasReceipt);
-
     const errorsWithoutReportCreation = useMemo(
         () => ({
             ...(transaction?.errorFields?.route ?? transaction?.errorFields?.waypoints ?? transaction?.errors),
@@ -314,7 +308,38 @@ function MoneyRequestReceiptView({
         [transaction?.errorFields?.route, transaction?.errorFields?.waypoints, transaction?.errors, parentReportAction?.errors],
     );
     const reportCreationError = useMemo(() => (getCreationReportErrors(report) ? getMicroSecondOnyxErrorWithTranslationKey('report.genericCreateReportFailureMessage') : {}), [report]);
-    const errors = useMemo(() => ({...errorsWithoutReportCreation, ...reportCreationError}), [errorsWithoutReportCreation, reportCreationError]);
+    const hasReceiptUploadError = Object.values(errorsWithoutReportCreation).some((error) => isReceiptError(error));
+
+    // Whether to show receipt audit result (e.g.`Verified`, `Issue Found`) and messages (e.g. `Receipt not verified. Please confirm accuracy.`)
+    // `!!(receiptViolations.length || didReceiptScanSucceed)` is for not showing `Verified` when `receiptViolations` is empty and `didReceiptScanSucceed` is false.
+    const shouldShowAuditMessage =
+        !isTransactionScanning &&
+        (hasReceipt || !!receiptRequiredViolation || !!itemizedReceiptRequiredViolation || !!customRulesViolation) &&
+        !!(receiptViolations.length || didReceiptScanSucceed) &&
+        isPaidGroupPolicy(report);
+    const shouldShowReceiptAudit = !isInvoice && (shouldShowReceiptEmptyState || hasReceipt || hasReceiptUploadError);
+
+    const fallbackReceiptError = useMemo(() => {
+        if (hasReceiptUploadError || isEmptyObject(reportCreationError) || !hasReceipt || !transaction?.receipt) {
+            return {};
+        }
+
+        return getMicroSecondOnyxErrorObject({
+            error: CONST.IOU.RECEIPT_ERROR,
+            source: transaction.receipt.source?.toString() ?? '',
+            filename: transaction.receipt.filename ?? '',
+        });
+    }, [hasReceiptUploadError, reportCreationError, hasReceipt, transaction]);
+
+    const errors = useMemo(() => {
+        if (hasReceiptUploadError) {
+            return errorsWithoutReportCreation;
+        }
+        if (!isEmptyObject(fallbackReceiptError)) {
+            return {...errorsWithoutReportCreation, ...fallbackReceiptError};
+        }
+        return {...errorsWithoutReportCreation, ...reportCreationError};
+    }, [hasReceiptUploadError, fallbackReceiptError, errorsWithoutReportCreation, reportCreationError]);
     const showReceiptErrorWithEmptyState = shouldShowReceiptEmptyState && !hasReceipt && !isEmptyObject(errors);
 
     const {showConfirmModal} = useConfirmModal();
@@ -372,6 +397,8 @@ function MoneyRequestReceiptView({
                 return;
             }
             if (parentReportAction) {
+                const backToRoute = routeBackTo ?? Navigation.getActiveRoute();
+                setDeleteTransactionNavigateBackUrl(backToRoute);
                 cleanUpMoneyRequest(
                     transaction?.transactionID ?? linkedTransactionID,
                     parentReportAction,
@@ -462,6 +489,7 @@ function MoneyRequestReceiptView({
                     <ReceiptAudit
                         notes={receiptViolations}
                         shouldShowAuditResult={!!shouldShowAuditMessage}
+                        hasReceiptUploadError={hasReceiptUploadError}
                     />
                 </OfflineWithFeedback>
             )}
@@ -620,11 +648,11 @@ function MoneyRequestReceiptView({
                     )}
                     {/* For WideRHP (fillSpace is true), we need to wait for the image to load to get the correct size, then display the violation message to avoid the jumping issue.
                         Otherwise (when fillSpace is false), we use a fixed size, so there's no need to wait for the image to load. */}
-                    {!!shouldShowAuditMessage && hasReceipt && (!isLoading || !fillSpace) && receiptAuditMessagesRow}
+                    {!hasReceiptUploadError && !!shouldShowAuditMessage && hasReceipt && (!isLoading || !fillSpace) && receiptAuditMessagesRow}
                 </OfflineWithFeedback>
             )}
             {!shouldShowReceiptEmptyState && !hasReceipt && <View style={{marginVertical: 6}} />}
-            {!!shouldShowAuditMessage && !hasReceipt && receiptAuditMessagesRow}
+            {!hasReceiptUploadError && !!shouldShowAuditMessage && !hasReceipt && receiptAuditMessagesRow}
             {AttachmentErrorModal}
             {PDFValidationComponent}
         </View>

src/languages/de.ts

@@ -1446,6 +1446,8 @@ const translations: TranslationDeepObject<typeof en> = {
             receiptFailureMessage:
                 '<rbr>Beim Hochladen deiner Quittung ist ein Fehler aufgetreten. Bitte <a href="download">speichere die Quittung</a> und <a href="retry">versuche es später erneut</a>.</rbr>',
             receiptFailureMessageShort: 'Beim Hochladen Ihres Belegs ist ein Fehler aufgetreten.',
+            receiptUploadFailedMessage: 'Beleg-Upload fehlgeschlagen. Speichere den Beleg oder lösche die Ausgabe und verliere sie.',
+            saveReceipt: 'Beleg speichern',
             genericDeleteFailureMessage: 'Unerwarteter Fehler beim Löschen dieses Belegs. Bitte versuche es später erneut.',
             genericEditFailureMessage: 'Unerwarteter Fehler beim Bearbeiten dieser Ausgabe. Bitte versuche es später noch einmal.',
             genericSmartscanFailureMessage: 'Der Transaktion fehlen Felder',

src/languages/en.ts

@@ -1500,6 +1500,8 @@ const translations = {
             receiptDeleteFailureError: 'Unexpected error deleting this receipt. Please try again later.',
             receiptFailureMessage: '<rbr>There was an error uploading your receipt. Please <a href="download">save the receipt</a> and <a href="retry">try again</a> later.</rbr>',
             receiptFailureMessageShort: 'There was an error uploading your receipt.',
+            receiptUploadFailedMessage: 'Receipt upload failed. Save the receipt, or delete the expense and lose it.',
+            saveReceipt: 'Save receipt',
             genericDeleteFailureMessage: 'Unexpected error deleting this expense. Please try again later.',
             genericEditFailureMessage: 'Unexpected error editing this expense. Please try again later.',
             genericSmartscanFailureMessage: 'Transaction is missing fields',

src/languages/es.ts

@@ -1411,6 +1411,8 @@ const translations: TranslationDeepObject<typeof en> = {
             receiptDeleteFailureError: 'Error inesperado al borrar este recibo. Por favor, vuelve a intentarlo más tarde.',
             receiptFailureMessage: '<rbr>Hubo un error al cargar tu recibo. Por favor, <a href="download">guarda el recibo</a> e <a href="retry">inténtalo de nuevo</a> más tarde.</rbr>',
             receiptFailureMessageShort: 'Hubo un error al cargar tu recibo.',
+            receiptUploadFailedMessage: 'Error al subir el recibo. Guarda el recibo, o elimina el gasto y piérdelo.',
+            saveReceipt: 'Guardar recibo',
             genericDeleteFailureMessage: 'Error inesperado al eliminar este gasto. Por favor, inténtalo más tarde.',
             genericEditFailureMessage: 'Error inesperado al editar este gasto. Por favor, inténtalo más tarde.',
             genericSmartscanFailureMessage: 'La transacción tiene campos vacíos',