handle unlimited requested api call and add fallbackIcon props

src/components/Icon/Expensicons.js

@@ -125,6 +125,7 @@ import Instagram from '../../../assets/images/social-instagram.svg';
 import AddReaction from '../../../assets/images/add-reaction.svg';
 import Task from '../../../assets/images/task.svg';
 import EReceiptIcon from '../../../assets/images/eReceiptIcon.svg';
+import ReceiptPlaceholderImage from '../../../assets/images/receipt-placeholder.svg';
 
 export {
     ActiveRoomAvatar,
@@ -229,6 +230,7 @@ export {
     QrCode,
     QuestionMark,
     Receipt,
+    ReceiptPlaceholderImage,
     ReceiptSearch,
     Rotate,
     RotateLeft,

src/components/ImageWithSizeCalculation.js

@@ -1,11 +1,20 @@
 import _ from 'underscore';
-import React, {useState, useRef, useEffect} from 'react';
+import React, {useState, useEffect, useMemo} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import Log from '../libs/Log';
 import styles from '../styles/styles';
 import FullscreenLoadingIndicator from './FullscreenLoadingIndicator';
 import Image from './Image';
+import useNetwork from '../hooks/useNetwork';
+
+// Define constants for load states
+const LoadState = {
+    INITIAL: 'initial',
+    LOADING: 'loading',
+    LOADED: 'loaded',
+    ERRORED: 'errored',
+};
 
 const propTypes = {
     /** Url for image to display */
@@ -39,16 +48,18 @@ const defaultProps = {
  *
  */
 function ImageWithSizeCalculation(props) {
-    const isLoadedRef = useRef(null);
+    const [loadState, setLoadState] = useState(LoadState.INITIAL);
     const [isImageCached, setIsImageCached] = useState(true);
-    const [isLoading, setIsLoading] = useState(false);
-
+    const source = useMemo(() => ({ uri: props.url }), [props.url]);
+    useNetwork({onReconnect: () => setLoadState(LoadState.LOADING)});
+
     const onError = () => {
         Log.hmmm('Unable to fetch image to calculate size', {url: props.url});
+        setLoadState(LoadState.ERRORED);
     };
 
     const imageLoadedSuccessfully = (event) => {
-        isLoadedRef.current = true;
+        setLoadState(LoadState.LOADED);
         props.onMeasure({
             width: event.nativeEvent.width,
             height: event.nativeEvent.height,
@@ -57,39 +68,42 @@ function ImageWithSizeCalculation(props) {
 
     /** Delay the loader to detect whether the image is being loaded from the cache or the internet. */
     useEffect(() => {
-        if (isLoadedRef.current || !isLoading) {
+        if (loadState !== LoadState.LOADING) {
             return;
         }
         const timeout = _.delay(() => {
-            if (!isLoading || isLoadedRef.current) {
+            if (loadState !== LoadState.LOADING) {
                 return;
             }
             setIsImageCached(false);
         }, 200);
         return () => clearTimeout(timeout);
-    }, [isLoading]);
+    }, [loadState]);
 
     return (
         <View style={[styles.w100, styles.h100, props.style]}>
             <Image
                 style={[styles.w100, styles.h100]}
-                source={{uri: props.url}}
+                source={source}
                 isAuthTokenRequired={props.isAuthTokenRequired}
                 resizeMode={Image.resizeMode.cover}
                 onLoadStart={() => {
-                    if (isLoadedRef.current || isLoading) {
+                    if (loadState === LoadState.LOADED || loadState === LoadState.ERRORED) {
                         return;
+                    } else {
+                        setLoadState(LoadState.LOADING);
                     }
-                    setIsLoading(true);
                 }}
                 onLoadEnd={() => {
-                    setIsLoading(false);
                     setIsImageCached(true);
                 }}
                 onError={onError}
-                onLoad={imageLoadedSuccessfully}
+                onLoad={()=>{
+                    imageLoadedSuccessfully;
+                    setLoadState(LoadState.LOADED);
+                }}
             />
-            {isLoading && !isImageCached && <FullscreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />}
+            {loadState === LoadState.LOADING && !isImageCached && <FullscreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />}
         </View>
     );
 }

src/components/ReportActionItem/ReportActionItemImage.js

@@ -1,15 +1,25 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import styles from '../../styles/styles';
-import Image from '../Image';
-import ThumbnailImage from '../ThumbnailImage';
-import tryResolveUrlFromApiRoot from '../../libs/tryResolveUrlFromApiRoot';
-import ROUTES from '../../ROUTES';
-import CONST from '../../CONST';
-import {ShowContextMenuContext} from '../ShowContextMenuContext';
-import Navigation from '../../libs/Navigation/Navigation';
-import PressableWithoutFocus from '../Pressable/PressableWithoutFocus';
+import React from 'react';
+import {View} from 'react-native';
+import _ from 'underscore';
+import EReceiptThumbnail from '../../components/EReceiptThumbnail';
+import Image from '../../components/Image';
+import PressableWithoutFocus from '../../components/Pressable/PressableWithoutFocus';
+import {ShowContextMenuContext} from '../../components/ShowContextMenuContext';
+import ThumbnailImage from '../../components/ThumbnailImage';
+import transactionPropTypes from '../../components/transactionPropTypes';
 import useLocalize from '../../hooks/useLocalize';
+import Navigation from '../../libs/Navigation/Navigation';
+import * as TransactionUtils from '../../libs/TransactionUtils';
+import tryResolveUrlFromApiRoot from '../../libs/tryResolveUrlFromApiRoot';
+import styles from '../../styles/styles';
+import CONST from '../../../src/CONST';
+import ROUTES from '../../../src/ROUTES';
+import Icon from '../../components/Icon';
+import variables from '../../styles/variables';
+import * as Expensicons from '../../components/Icon/Expensicons';
+import colors from '../../styles/colors'; 
+import useNetwork from '../../hooks/useNetwork';
 
 const propTypes = {
     /** thumbnail URI for the image */
@@ -20,11 +30,23 @@ const propTypes = {
 
     /** whether or not to enable the image preview modal */
     enablePreviewModal: PropTypes.bool,
+
+    /* The transaction associated with this image, if any. Passed for handling eReceipts. */
+    transaction: transactionPropTypes,
+
+    /** Icon to use as a fallback when offline */
+    fallbackIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+
+    /** The fill color to pass into the icon. */
+    iconFill: PropTypes.string,
 };
 
 const defaultProps = {
     thumbnail: null,
+    transaction: {},
     enablePreviewModal: false,
+    iconFill: colors.green700,
+    fallbackIcon: Expensicons.ReceiptPlaceholderImage, // Default fallback icon
 };
 
 /**
@@ -33,24 +55,47 @@ const defaultProps = {
  * and optional preview modal as well.
  */
 
-function ReportActionItemImage({thumbnail, image, enablePreviewModal}) {
+function ReportActionItemImage({ thumbnail, image, enablePreviewModal, transaction, iconFill, fallbackIcon }) {
     const {translate} = useLocalize();
     const imageSource = tryResolveUrlFromApiRoot(image || '');
     const thumbnailSource = tryResolveUrlFromApiRoot(thumbnail || '');
+    const isEReceipt = !_.isEmpty(transaction) && TransactionUtils.hasEReceipt(transaction);
+    const {isOffline} = useNetwork();
 
-    const receiptImageComponent = thumbnail ? (
-        <ThumbnailImage
-            previewSourceURL={thumbnailSource}
-            style={[styles.w100, styles.h100]}
-            isAuthTokenRequired
-            shouldDynamicallyResize={false}
-        />
-    ) : (
-        <Image
-            source={{uri: image}}
-            style={[styles.w100, styles.h100]}
-        />
-    );
+    let receiptImageComponent;
+
+    if (isOffline) {
+        receiptImageComponent = (
+            <Icon
+                src={fallbackIcon}
+                fill={iconFill}
+                height={variables.eReceiptIconHeightMedium}
+                width={variables.eReceiptIconWidthMedium}
+            />
+        );
+    } else if (isEReceipt) {
+        receiptImageComponent = (
+            <View style={[styles.w100, styles.h100]}>
+                <EReceiptThumbnail transactionID={transaction.transactionID} />
+            </View>
+        );
+    } else if (thumbnail) {
+        receiptImageComponent = (
+            <ThumbnailImage
+                previewSourceURL={thumbnailSource}
+                style={[styles.w100, styles.h100]}
+                isAuthTokenRequired
+                shouldDynamicallyResize={false}
+            />
+        );
+    } else {
+        receiptImageComponent = (
+            <Image
+                source={{uri: image}}
+                style={[styles.w100, styles.h100]}
+            />
+        );
+    }
 
     if (enablePreviewModal) {
         return (
@@ -79,4 +124,4 @@ ReportActionItemImage.propTypes = propTypes;
 ReportActionItemImage.defaultProps = defaultProps;
 ReportActionItemImage.displayName = 'ReportActionItemImage';
 
-export default ReportActionItemImage;
+export default ReportActionItemImage;

src/components/ThumbnailImage.js

@@ -91,9 +91,9 @@ function ThumbnailImage(props) {
     );
 
     const sizeStyles = props.shouldDynamicallyResize ? [StyleUtils.getWidthAndHeightStyle(imageWidth, imageHeight)] : [styles.w100, styles.h100];
-
+    
     return (
-        <View style={[props.style, styles.overflowHidden]}>
+        <View style={[props.style, styles.overflowHidden,styles.thumbnailBgColor]}>
             <View style={[...sizeStyles, styles.alignItemsCenter, styles.justifyContentCenter]}>
                 <ImageWithSizeCalculation
                     url={props.previewSourceURL}

src/styles/styles.js

@@ -3899,6 +3899,16 @@ const styles = (theme) => ({
     checkboxWithLabelCheckboxStyle: {
         marginLeft: -2,
     },
+
+    receiptPlaceholder: {
+        position: 'absolute',
+        alignItems:'center',
+        justifyContent:'center'
+    },
+
+    thumbnailBgColor: {
+        backgroundColor: colors.green800 
+    },
 });
 
 // For now we need to export the styles function that takes the theme as an argument

src/styles/variables.ts

@@ -185,5 +185,5 @@ export default {
 
     cardPreviewHeight: 148,
     cardPreviewWidth: 235,
-    cardNameWidth: 156,
+    cardNameWidth: 156
 } as const;