Fix - Distance request thumbnail is different in reports preview when created offline

src/components/BlockingViews/BlockingView.tsx

@@ -1,6 +1,6 @@
 import type {ImageContentFit} from 'expo-image';
 import React, {useMemo} from 'react';
-import type {ImageSourcePropType, StyleProp, ViewStyle, WebStyle} from 'react-native';
+import type {ImageSourcePropType, StyleProp, TextStyle, ViewStyle, WebStyle} from 'react-native';
 import {View} from 'react-native';
 import type {SvgProps} from 'react-native-svg';
 import type {MergeExclusive} from 'type-fest';
@@ -23,6 +23,9 @@ type BaseBlockingViewProps = {
     /** Subtitle message below the title */
     subtitle?: string;
 
+    /** The style of the subtitle message */
+    subtitleStyle?: StyleProp<TextStyle>;
+
     /** Link message below the subtitle */
     linkKey?: TranslationPaths;
 
@@ -79,6 +82,7 @@ function BlockingView({
     iconColor,
     title,
     subtitle = '',
+    subtitleStyle,
     linkKey = 'notFound.goBackHome',
     shouldShowLink = false,
     iconWidth = variables.iconSizeSuperLarge,
@@ -98,7 +102,7 @@ function BlockingView({
         () => (
             <>
                 <AutoEmailLink
-                    style={[styles.textAlignCenter]}
+                    style={[styles.textAlignCenter, subtitleStyle]}
                     text={subtitle}
                 />
                 {shouldShowLink ? (
@@ -111,7 +115,7 @@ function BlockingView({
                 ) : null}
             </>
         ),
-        [styles, subtitle, shouldShowLink, linkKey, onLinkPress, translate],
+        [styles, subtitle, shouldShowLink, linkKey, onLinkPress, translate, subtitleStyle],
     );
 
     const subtitleContent = useMemo(() => {

src/components/ConfirmedRoute.tsx

@@ -3,6 +3,7 @@ import type {ReactNode} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import useNetwork from '@hooks/useNetwork';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as TransactionUtils from '@libs/TransactionUtils';
@@ -27,17 +28,28 @@ type ConfirmedRouteProps = ConfirmedRoutePropsOnyxProps & {
     /** Transaction that stores the distance expense data */
     transaction: OnyxEntry<Transaction>;
 
+    /** Whether the size of the route pending icon is smaller. */
+    isSmallerIcon?: boolean;
+
+    /** Whether it should have border radius */
+    shouldHaveBorderRadius?: boolean;
+
+    /** Whether it should display the Mapbox map only when the route/coordinates exist otherwise
+     * it will display pending map icon */
+    requireRouteToDisplayMap?: boolean;
+
     /** Whether the map is interactable or not */
     interactive?: boolean;
 };
 
-function ConfirmedRoute({mapboxAccessToken, transaction, interactive}: ConfirmedRouteProps) {
+function ConfirmedRoute({mapboxAccessToken, transaction, isSmallerIcon, shouldHaveBorderRadius = true, requireRouteToDisplayMap = false, interactive}: ConfirmedRouteProps) {
     const {isOffline} = useNetwork();
     const {route0: route} = transaction?.routes ?? {};
     const waypoints = transaction?.comment?.waypoints ?? {};
     const coordinates = route?.geometry?.coordinates ?? [];
     const theme = useTheme();
     const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
 
     const getMarkerComponent = useCallback(
         (icon: IconAsset): ReactNode => (
@@ -90,7 +102,9 @@ function ConfirmedRoute({mapboxAccessToken, transaction, interactive}: Confirmed
         return MapboxToken.stop;
     }, []);
 
-    return !isOffline && Boolean(mapboxAccessToken?.token) ? (
+    const shouldDisplayMap = !requireRouteToDisplayMap || !!coordinates.length;
+
+    return !isOffline && Boolean(mapboxAccessToken?.token) && shouldDisplayMap ? (
         <DistanceMapView
             interactive={interactive}
             accessToken={mapboxAccessToken?.token ?? ''}
@@ -101,12 +115,15 @@ function ConfirmedRoute({mapboxAccessToken, transaction, interactive}: Confirmed
                 location: waypointMarkers?.[0]?.coordinate ?? (CONST.MAPBOX.DEFAULT_COORDINATE as [number, number]),
             }}
             directionCoordinates={coordinates as Array<[number, number]>}
-            style={[styles.mapView, styles.br4]}
+            style={[styles.mapView, shouldHaveBorderRadius && styles.br4]}
             waypoints={waypointMarkers}
             styleURL={CONST.MAPBOX.STYLE_URL}
         />
     ) : (
-        <PendingMapView />
+        <PendingMapView
+            isSmallerIcon={isSmallerIcon}
+            style={!shouldHaveBorderRadius && StyleUtils.getBorderRadiusStyle(0)}
+        />
     );
 }
 

src/components/DistanceMapView/index.android.tsx

@@ -5,6 +5,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import MapView from '@components/MapView';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type DistanceMapViewProps from './types';
 
@@ -13,6 +14,7 @@ function DistanceMapView({overlayStyle, ...rest}: DistanceMapViewProps) {
     const [isMapReady, setIsMapReady] = useState(false);
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
+    const theme = useTheme();
 
     return (
         <>
@@ -33,6 +35,7 @@ function DistanceMapView({overlayStyle, ...rest}: DistanceMapViewProps) {
                         title={translate('distance.mapPending.title')}
                         subtitle={isOffline ? translate('distance.mapPending.subtitle') : translate('distance.mapPending.onlineSubtitle')}
                         shouldShowLink={false}
+                        iconColor={theme.border}
                     />
                 </View>
             )}

src/components/MapView/MapViewTypes.ts

@@ -38,6 +38,9 @@ type PendingMapViewProps = {
 
     /** Style applied to PendingMapView */
     style?: StyleProp<ViewStyle>;
+
+    /** Whether the size of the route pending icon is smaller. */
+    isSmallerIcon?: boolean;
 };
 
 // Initial state of the map

src/components/MapView/PendingMapView.tsx

@@ -4,28 +4,34 @@ import {View} from 'react-native';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import type {PendingMapViewProps} from './MapViewTypes';
 
-function PendingMapView({title = '', subtitle = '', style}: PendingMapViewProps) {
+function PendingMapView({title = '', subtitle = '', style, isSmallerIcon = false}: PendingMapViewProps) {
     const hasTextContent = !_.isEmpty(title) || !_.isEmpty(subtitle);
     const styles = useThemeStyles();
+    const theme = useTheme();
+    const iconSize = isSmallerIcon ? variables.iconSizeSuperLarge : variables.iconSizeUltraLarge;
     return (
         <View style={[styles.mapPendingView, style]}>
             {hasTextContent ? (
                 <BlockingView
                     icon={Expensicons.EmptyStateRoutePending}
+                    iconColor={theme.border}
                     title={title}
                     subtitle={subtitle}
+                    subtitleStyle={styles.textSupporting}
                     shouldShowLink={false}
                 />
             ) : (
                 <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter, styles.ph10]}>
                     <Icon
                         src={Expensicons.EmptyStateRoutePending}
-                        width={variables.iconSizeUltraLarge}
-                        height={variables.iconSizeUltraLarge}
+                        width={iconSize}
+                        height={iconSize}
+                        fill={theme.border}
                     />
                 </View>
             )}

src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

@@ -3,7 +3,6 @@ import truncate from 'lodash/truncate';
 import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import type {GestureResponderEvent} from 'react-native';
-import ConfirmedRoute from '@components/ConfirmedRoute';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import {ReceiptScan} from '@components/Icon/Expensicons';
@@ -124,10 +123,7 @@ function MoneyRequestPreviewContent({
         merchantOrDescription = description || '';
     }
 
-    const receiptImages = hasReceipt ? [ReceiptUtils.getThumbnailAndImageURIs(transaction)] : [];
-
-    const hasPendingWaypoints = transaction?.pendingFields?.waypoints;
-    const showMapAsImage = isDistanceRequest && hasPendingWaypoints;
+    const receiptImages = hasReceipt ? [{...ReceiptUtils.getThumbnailAndImageURIs(transaction), transaction}] : [];
 
     const getSettledMessage = (): string => {
         if (isCardTransaction) {
@@ -254,15 +250,7 @@ function MoneyRequestPreviewContent({
                         !onPreviewPressed ? [styles.moneyRequestPreviewBox, containerStyles] : {},
                     ]}
                 >
-                    {showMapAsImage && (
-                        <View style={styles.reportActionItemImages}>
-                            <ConfirmedRoute
-                                transaction={transaction}
-                                interactive={false}
-                            />
-                        </View>
-                    )}
-                    {!showMapAsImage && hasReceipt && (
+                    {hasReceipt && (
                         <ReportActionItemImages
                             images={receiptImages}
                             isHovered={isHovered || isScanning}

src/components/ReportActionItem/MoneyRequestView.tsx

@@ -2,7 +2,6 @@ import React, {useCallback, useMemo} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
-import ConfirmedRoute from '@components/ConfirmedRoute';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
@@ -120,8 +119,6 @@ function MoneyRequestView({
     const isEmptyMerchant = transactionMerchant === '' || transactionMerchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT;
     const isDistanceRequest = TransactionUtils.isDistanceRequest(transaction);
     const formattedTransactionAmount = transactionAmount ? CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency) : '';
-    const hasPendingWaypoints = Boolean(transaction?.pendingFields?.waypoints);
-    const showMapAsImage = isDistanceRequest && hasPendingWaypoints;
     const formattedOriginalAmount = transactionOriginalAmount && transactionOriginalCurrency && CurrencyUtils.convertToDisplayString(transactionOriginalAmount, transactionOriginalCurrency);
     const isCardTransaction = TransactionUtils.isCardTransaction(transaction);
     const cardProgramName = isCardTransaction && transactionCardID !== undefined ? CardUtils.getCardDescription(transactionCardID) : '';
@@ -316,7 +313,6 @@ function MoneyRequestView({
         </OfflineWithFeedback>
     );
 
-    const shouldShowMapOrReceipt = showMapAsImage || hasReceipt;
     const isReceiptAllowed = !isPaidReport && !isInvoice;
     const shouldShowReceiptEmptyState =
         isReceiptAllowed && !hasReceipt && !isApproved && !isSettled && (canEditReceipt || isAdmin || isApprover) && (canEditReceipt || ReportUtils.isPaidGroupPolicy(report));
@@ -330,7 +326,7 @@ function MoneyRequestView({
     const receiptViolations =
         transactionViolations?.filter((violation) => receiptViolationNames.includes(violation.name)).map((violation) => ViolationsUtils.getViolationTranslation(violation, translate)) ?? [];
     const shouldShowNotesViolations = !isReceiptBeingScanned && canUseViolations && ReportUtils.isPaidGroupPolicy(report);
-    const shouldShowReceiptHeader = isReceiptAllowed && (shouldShowReceiptEmptyState || shouldShowMapOrReceipt) && canUseViolations && ReportUtils.isPaidGroupPolicy(report);
+    const shouldShowReceiptHeader = isReceiptAllowed && (shouldShowReceiptEmptyState || hasReceipt) && canUseViolations && ReportUtils.isPaidGroupPolicy(report);
 
     const errors = {
         ...(transaction?.errorFields?.route ?? transaction?.errors),
@@ -347,7 +343,7 @@ function MoneyRequestView({
                         shouldShowAuditMessage={Boolean(shouldShowNotesViolations && didRceiptScanSucceed)}
                     />
                 )}
-                {(shouldShowMapOrReceipt || errors) && (
+                {(hasReceipt || errors) && (
                     <OfflineWithFeedback
                         pendingAction={pendingAction}
                         errors={errors}
@@ -360,25 +356,18 @@ function MoneyRequestView({
                             ReportActions.clearAllRelatedReportActionErrors(report.reportID, parentReportAction);
                         }}
                     >
-                        {shouldShowMapOrReceipt && (
+                        {hasReceipt && (
                             <View style={styles.moneyRequestViewImage}>
-                                {showMapAsImage ? (
-                                    <ConfirmedRoute
-                                        transaction={transaction}
-                                        interactive={false}
-                                    />
-                                ) : (
-                                    <ReportActionItemImage
-                                        thumbnail={receiptURIs?.thumbnail}
-                                        fileExtension={receiptURIs?.fileExtension}
-                                        isThumbnail={receiptURIs?.isThumbnail}
-                                        image={receiptURIs?.image}
-                                        isLocalFile={receiptURIs?.isLocalFile}
-                                        filename={receiptURIs?.filename}
-                                        transaction={transaction}
-                                        enablePreviewModal
-                                    />
-                                )}
+                                <ReportActionItemImage
+                                    thumbnail={receiptURIs?.thumbnail}
+                                    fileExtension={receiptURIs?.fileExtension}
+                                    isThumbnail={receiptURIs?.isThumbnail}
+                                    image={receiptURIs?.image}
+                                    isLocalFile={receiptURIs?.isLocalFile}
+                                    filename={receiptURIs?.filename}
+                                    transaction={transaction}
+                                    enablePreviewModal
+                                />
                             </View>
                         )}
                     </OfflineWithFeedback>
@@ -400,7 +389,7 @@ function MoneyRequestView({
                         }
                     />
                 )}
-                {!shouldShowReceiptEmptyState && !shouldShowMapOrReceipt && <View style={{marginVertical: 6}} />}
+                {!shouldShowReceiptEmptyState && !hasReceipt && <View style={{marginVertical: 6}} />}
                 {shouldShowNotesViolations && <ReceiptAuditMessages notes={receiptViolations} />}
                 <OfflineWithFeedback pendingAction={getPendingFieldAction('amount')}>
                     <MenuItemWithTopDescription