Display receipts in chat

src/CONST.js

@@ -1019,6 +1019,9 @@ const CONST = {
         AMOUNT_MAX_LENGTH: 10,
         RECEIPT_STATE: {
             SCANREADY: 'SCANREADY',
+            SCANNING: 'SCANNING',
+            SCANCOMPLETE: 'SCANCOMPLETE',
+            SCANFAILED: 'SCANFAILED',
         },
         FILE_TYPES: {
             HTML: 'html',

src/ONYXKEYS.js

@@ -33,7 +33,7 @@ export default {
     // Credentials to authenticate the user
     CREDENTIALS: 'credentials',
 
-    // Contains loading data for the IOU feature (MoneyRequestModal, IOUDetail, & IOUPreview Components)
+    // Contains loading data for the IOU feature (MoneyRequestModal, IOUDetail, & MoneyRequestPreview Components)
     IOU: 'iou',
 
     // Keeps track if there is modal currently visible or not

src/components/AttachmentModal.js

@@ -97,6 +97,7 @@ function AttachmentModal(props) {
     const [shouldLoadAttachment, setShouldLoadAttachment] = useState(false);
     const [isAttachmentInvalid, setIsAttachmentInvalid] = useState(false);
     const [isAuthTokenRequired, setIsAuthTokenRequired] = useState(props.isAuthTokenRequired);
+    const [isAttachmentReceipt, setIsAttachmentReceipt] = useState(false);
     const [attachmentInvalidReasonTitle, setAttachmentInvalidReasonTitle] = useState('');
     const [attachmentInvalidReason, setAttachmentInvalidReason] = useState(null);
     const [source, setSource] = useState(props.source);
@@ -116,12 +117,13 @@ function AttachmentModal(props) {
 
     /**
      * Keeps the attachment source in sync with the attachment displayed currently in the carousel.
-     * @param {{ source: String, isAuthTokenRequired: Boolean, file: { name: string } }} attachment
+     * @param {{ source: String, isAuthTokenRequired: Boolean, file: { name: string }, isReceipt: Boolean }} attachment
      */
     const onNavigate = useCallback(
         (attachment) => {
             setSource(attachment.source);
             setFile(attachment.file);
+            setIsAttachmentReceipt(attachment.isReceipt);
             setIsAuthTokenRequired(attachment.isAuthTokenRequired);
             onCarouselAttachmentChange(attachment);
         },
@@ -302,6 +304,7 @@ function AttachmentModal(props) {
     }, []);
 
     const sourceForAttachmentView = props.source || source;
+
     return (
         <>
             <Modal
@@ -322,7 +325,7 @@ function AttachmentModal(props) {
             >
                 {props.isSmallScreenWidth && <HeaderGap />}
                 <HeaderWithBackButton
-                    title={props.headerTitle || translate('common.attachment')}
+                    title={props.headerTitle || translate(isAttachmentReceipt ? 'common.receipt' : 'common.attachment')}
                     shouldShowBorderBottom
                     shouldShowDownloadButton={props.allowDownload}
                     onDownloadButtonPress={() => downloadAttachment(source)}

src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js

@@ -1,6 +1,8 @@
 import {Parser as HtmlParser} from 'htmlparser2';
 import _ from 'underscore';
 import * as ReportActionsUtils from '../../../libs/ReportActionsUtils';
+import * as TransactionUtils from '../../../libs/TransactionUtils';
+import * as ReceiptUtils from '../../../libs/ReceiptUtils';
 import CONST from '../../../CONST';
 import tryResolveUrlFromApiRoot from '../../../libs/tryResolveUrlFromApiRoot';
 import Navigation from '../../../libs/Navigation/Navigation';
@@ -30,6 +32,7 @@ function extractAttachmentsFromReport(report, reportActions, source) {
                 source: tryResolveUrlFromApiRoot(expensifySource || attribs.src),
                 isAuthTokenRequired: Boolean(expensifySource),
                 file: {name: attribs[CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE]},
+                isReceipt: false,
             });
         },
     });
@@ -38,6 +41,23 @@ function extractAttachmentsFromReport(report, reportActions, source) {
         if (!ReportActionsUtils.shouldReportActionBeVisible(action, key)) {
             return;
         }
+
+        // We're handling receipts differently here because receipt images are not
+        // part of the report action message, the images are constructed client-side
+        if (ReportActionsUtils.isMoneyRequestAction(action)) {
+            const transaction = TransactionUtils.getTransaction(action.originalMessage.IOUTransactionID);
+            if (TransactionUtils.hasReceipt(transaction)) {
+                const {image} = ReceiptUtils.getThumbnailAndImageURIs(transaction.receipt.source, transaction.filename);
+                attachments.unshift({
+                    source: tryResolveUrlFromApiRoot(image),
+                    isAuthTokenRequired: true,
+                    file: {name: transaction.filename},
+                    isReceipt: true,
+                });
+                return;
+            }
+        }
+
         htmlParser.write(_.get(action, ['message', 0, 'html']));
     });
     htmlParser.end();

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js

@@ -48,7 +48,7 @@ const customHTMLElementModels = {
     'mention-here': defaultHTMLElementModels.span.extend({tagName: 'mention-here'}),
 };
 
-const defaultViewProps = {style: [styles.alignItemsStart, styles.userSelectText]};
+const defaultViewProps = {style: [styles.alignItemsStart, styles.userSelectText, styles.w100, styles.h100]};
 
 // We are using the explicit composite architecture for performance gains.
 // Configuration for RenderHTML is handled in a top-level component providing

src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js

@@ -33,29 +33,33 @@ function ImageRenderer(props) {
     //           Concierge responder attachments are uploaded to S3 without any access
     //           control and thus require no authToken to verify access.
     //
-    const isAttachment = Boolean(htmlAttribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE]);
+    const isAttachmentOrReceipt = Boolean(htmlAttribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE]);
 
     // Files created/uploaded/hosted by App should resolve from API ROOT. Other URLs aren't modified
     const previewSource = tryResolveUrlFromApiRoot(htmlAttribs.src);
-    const source = tryResolveUrlFromApiRoot(isAttachment ? htmlAttribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE] : htmlAttribs.src);
+    const source = tryResolveUrlFromApiRoot(isAttachmentOrReceipt ? htmlAttribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE] : htmlAttribs.src);
 
     const imageWidth = htmlAttribs['data-expensify-width'] ? parseInt(htmlAttribs['data-expensify-width'], 10) : undefined;
     const imageHeight = htmlAttribs['data-expensify-height'] ? parseInt(htmlAttribs['data-expensify-height'], 10) : undefined;
     const imagePreviewModalDisabled = htmlAttribs['data-expensify-preview-modal-disabled'] === 'true';
 
+    const shouldFitContainer = htmlAttribs['data-expensify-fit-container'] === 'true';
+    const sizingStyle = shouldFitContainer ? [styles.w100, styles.h100] : [];
+
     return imagePreviewModalDisabled ? (
         <ThumbnailImage
             previewSourceURL={previewSource}
-            style={styles.webViewStyles.tagStyles.img}
-            isAuthTokenRequired={isAttachment}
+            style={shouldFitContainer ? [styles.w100, styles.h100] : styles.webViewStyles.tagStyles.img}
+            isAuthTokenRequired={isAttachmentOrReceipt}
             imageWidth={imageWidth}
             imageHeight={imageHeight}
+            shouldDynamicallyResize={!shouldFitContainer}
         />
     ) : (
         <ShowContextMenuContext.Consumer>
             {({anchor, report, action, checkIfContextMenuActive}) => (
                 <PressableWithoutFocus
-                    style={[styles.noOutline]}
+                    style={[styles.noOutline, ...sizingStyle]}
                     onPress={() => {
                         const route = ROUTES.getReportAttachmentRoute(report.reportID, source);
                         Navigation.navigate(route);
@@ -66,10 +70,11 @@ function ImageRenderer(props) {
                 >
                     <ThumbnailImage
                         previewSourceURL={previewSource}
-                        style={styles.webViewStyles.tagStyles.img}
-                        isAuthTokenRequired={isAttachment}
+                        style={shouldFitContainer ? [styles.w100, styles.h100] : styles.webViewStyles.tagStyles.img}
+                        isAuthTokenRequired={isAttachmentOrReceipt}
                         imageWidth={imageWidth}
                         imageHeight={imageHeight}
+                        shouldDynamicallyResize={!shouldFitContainer}
                     />
                 </PressableWithoutFocus>
             )}

src/components/HeaderWithBackButton/index.js

@@ -47,116 +47,120 @@ function HeaderWithBackButton({
     },
     threeDotsMenuItems = [],
     children = null,
+    statusBar = null,
 }) {
     const [isDownloadButtonActive, temporarilyDisableDownloadButton] = useThrottledButtonState();
     const {translate} = useLocalize();
     const {isKeyboardShown} = useKeyboardState();
     return (
-        <View style={[styles.headerBar, shouldShowBorderBottom && styles.borderBottom, shouldShowBackButton && styles.pl2]}>
-            <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.flexGrow1, styles.justifyContentBetween, styles.overflowHidden]}>
-                {shouldShowBackButton && (
-                    <Tooltip text={translate('common.back')}>
-                        <PressableWithoutFeedback
-                            onPress={() => {
-                                if (isKeyboardShown) {
-                                    Keyboard.dismiss();
-                                }
-                                onBackButtonPress();
-                            }}
-                            style={[styles.touchableButtonImage]}
-                            accessibilityRole="button"
-                            accessibilityLabel={translate('common.back')}
-                        >
-                            <Icon
-                                src={Expensicons.BackArrow}
-                                fill={iconFill}
-                            />
-                        </PressableWithoutFeedback>
-                    </Tooltip>
-                )}
-                {shouldShowAvatarWithDisplay && (
-                    <AvatarWithDisplayName
-                        report={report}
-                        policies={policies}
-                        personalDetails={personalDetails}
-                    />
-                )}
-                {!shouldShowAvatarWithDisplay && (
-                    <Header
-                        title={title}
-                        subtitle={stepCounter ? translate('stepCounter', stepCounter) : subtitle}
-                        textStyles={titleColor ? [StyleUtils.getTextColorStyle(titleColor)] : []}
-                    />
-                )}
-                <View style={[styles.reportOptions, styles.flexRow, styles.pr5, styles.alignItemsCenter]}>
-                    {children}
-                    {shouldShowDownloadButton && (
-                        <Tooltip text={translate('common.download')}>
+        <>
+            <View style={[styles.headerBar, shouldShowBorderBottom && !statusBar && styles.borderBottom, shouldShowBackButton && styles.pl2]}>
+                <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.flexGrow1, styles.justifyContentBetween, styles.overflowHidden]}>
+                    {shouldShowBackButton && (
+                        <Tooltip text={translate('common.back')}>
                             <PressableWithoutFeedback
-                                onPress={(e) => {
-                                    // Blur the pressable in case this button triggers a Growl notification
-                                    // We do not want to overlap Growl with the Tooltip (#15271)
-                                    e.currentTarget.blur();
-
-                                    if (!isDownloadButtonActive) {
-                                        return;
+                                onPress={() => {
+                                    if (isKeyboardShown) {
+                                        Keyboard.dismiss();
                                     }
-
-                                    onDownloadButtonPress();
-                                    temporarilyDisableDownloadButton(true);
+                                    onBackButtonPress();
                                 }}
                                 style={[styles.touchableButtonImage]}
                                 accessibilityRole="button"
-                                accessibilityLabel={translate('common.download')}
-                            >
-                                <Icon
-                                    src={Expensicons.Download}
-                                    fill={iconFill || StyleUtils.getIconFillColor(getButtonState(false, false, !isDownloadButtonActive))}
-                                />
-                            </PressableWithoutFeedback>
-                        </Tooltip>
-                    )}
-                    {shouldShowGetAssistanceButton && (
-                        <Tooltip text={translate('getAssistancePage.questionMarkButtonTooltip')}>
-                            <PressableWithoutFeedback
-                                onPress={() => Navigation.navigate(ROUTES.getGetAssistanceRoute(guidesCallTaskID))}
-                                style={[styles.touchableButtonImage]}
-                                accessibilityRole="button"
-                                accessibilityLabel={translate('getAssistancePage.questionMarkButtonTooltip')}
+                                accessibilityLabel={translate('common.back')}
                             >
                                 <Icon
-                                    src={Expensicons.QuestionMark}
+                                    src={Expensicons.BackArrow}
                                     fill={iconFill}
                                 />
                             </PressableWithoutFeedback>
                         </Tooltip>
                     )}
-                    {shouldShowPinButton && <PinButton report={report} />}
-                    {shouldShowThreeDotsButton && (
-                        <ThreeDotsMenu
-                            menuItems={threeDotsMenuItems}
-                            onIconPress={onThreeDotsButtonPress}
-                            anchorPosition={threeDotsAnchorPosition}
+                    {shouldShowAvatarWithDisplay && (
+                        <AvatarWithDisplayName
+                            report={report}
+                            policies={policies}
+                            personalDetails={personalDetails}
                         />
                     )}
-                    {shouldShowCloseButton && (
-                        <Tooltip text={translate('common.close')}>
-                            <PressableWithoutFeedback
-                                onPress={onCloseButtonPress}
-                                style={[styles.touchableButtonImage]}
-                                accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
-                                accessibilityLabel={translate('common.close')}
-                            >
-                                <Icon
-                                    src={Expensicons.Close}
-                                    fill={iconFill}
-                                />
-                            </PressableWithoutFeedback>
-                        </Tooltip>
+                    {!shouldShowAvatarWithDisplay && (
+                        <Header
+                            title={title}
+                            subtitle={stepCounter ? translate('stepCounter', stepCounter) : subtitle}
+                            textStyles={titleColor ? [StyleUtils.getTextColorStyle(titleColor)] : []}
+                        />
                     )}
+                    <View style={[styles.reportOptions, styles.flexRow, styles.pr5, styles.alignItemsCenter]}>
+                        {children}
+                        {shouldShowDownloadButton && (
+                            <Tooltip text={translate('common.download')}>
+                                <PressableWithoutFeedback
+                                    onPress={(e) => {
+                                        // Blur the pressable in case this button triggers a Growl notification
+                                        // We do not want to overlap Growl with the Tooltip (#15271)
+                                        e.currentTarget.blur();
+
+                                        if (!isDownloadButtonActive) {
+                                            return;
+                                        }
+
+                                        onDownloadButtonPress();
+                                        temporarilyDisableDownloadButton(true);
+                                    }}
+                                    style={[styles.touchableButtonImage]}
+                                    accessibilityRole="button"
+                                    accessibilityLabel={translate('common.download')}
+                                >
+                                    <Icon
+                                        src={Expensicons.Download}
+                                        fill={iconFill || StyleUtils.getIconFillColor(getButtonState(false, false, !isDownloadButtonActive))}
+                                    />
+                                </PressableWithoutFeedback>
+                            </Tooltip>
+                        )}
+                        {shouldShowGetAssistanceButton && (
+                            <Tooltip text={translate('getAssistancePage.questionMarkButtonTooltip')}>
+                                <PressableWithoutFeedback
+                                    onPress={() => Navigation.navigate(ROUTES.getGetAssistanceRoute(guidesCallTaskID))}
+                                    style={[styles.touchableButtonImage]}
+                                    accessibilityRole="button"
+                                    accessibilityLabel={translate('getAssistancePage.questionMarkButtonTooltip')}
+                                >
+                                    <Icon
+                                        src={Expensicons.QuestionMark}
+                                        fill={iconFill}
+                                    />
+                                </PressableWithoutFeedback>
+                            </Tooltip>
+                        )}
+                        {shouldShowPinButton && <PinButton report={report} />}
+                        {shouldShowThreeDotsButton && (
+                            <ThreeDotsMenu
+                                menuItems={threeDotsMenuItems}
+                                onIconPress={onThreeDotsButtonPress}
+                                anchorPosition={threeDotsAnchorPosition}
+                            />
+                        )}
+                        {shouldShowCloseButton && (
+                            <Tooltip text={translate('common.close')}>
+                                <PressableWithoutFeedback
+                                    onPress={onCloseButtonPress}
+                                    style={[styles.touchableButtonImage]}
+                                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                                    accessibilityLabel={translate('common.close')}
+                                >
+                                    <Icon
+                                        src={Expensicons.Close}
+                                        fill={iconFill}
+                                    />
+                                </PressableWithoutFeedback>
+                            </Tooltip>
+                        )}
+                    </View>
                 </View>
             </View>
-        </View>
+            {statusBar}
+        </>
     );
 }