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

src/components/ConfirmedRoute.tsx

@@ -34,11 +34,15 @@ type ConfirmedRouteProps = ConfirmedRoutePropsOnyxProps & {
     /** 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 */
+    shouldDisplayMapOnlyIfCoordinatesExist?: boolean;
+
     /** Whether the map is interactable or not */
     interactive?: boolean;
 };
 
-function ConfirmedRoute({mapboxAccessToken, transaction, isSmallerIcon, shouldHaveBorderRadius = true, interactive}: ConfirmedRouteProps) {
+function ConfirmedRoute({mapboxAccessToken, transaction, isSmallerIcon, shouldHaveBorderRadius = true, shouldDisplayMapOnlyIfCoordinatesExist = false, interactive}: ConfirmedRouteProps) {
     const {isOffline} = useNetwork();
     const {route0: route} = transaction?.routes ?? {};
     const waypoints = transaction?.comment?.waypoints ?? {};
@@ -98,7 +102,9 @@ function ConfirmedRoute({mapboxAccessToken, transaction, isSmallerIcon, shouldHa
         return MapboxToken.stop;
     }, []);
 
-    return !isOffline && Boolean(mapboxAccessToken?.token) ? (
+    const shouldDisplayMap = !shouldDisplayMapOnlyIfCoordinatesExist || (shouldDisplayMapOnlyIfCoordinatesExist && !!coordinates.length);
+
+    return !isOffline && Boolean(mapboxAccessToken?.token) && shouldDisplayMap ? (
         <DistanceMapView
             interactive={interactive}
             accessToken={mapboxAccessToken?.token ?? ''}

src/components/ReportActionItem/MoneyRequestView.tsx

@@ -312,10 +312,20 @@ function MoneyRequestView({
         </OfflineWithFeedback>
     );
 
-    const shouldShowReceiptEmptyState = !hasReceipt && !isInvoice && (canEditReceipt || isAdmin || isApprover);
-    const noticeTypeViolations = transactionViolations?.filter((violation) => violation.type === 'notice').map((v) => ViolationsUtils.getViolationTranslation(v, translate)) ?? [];
+    const isReceiptAllowed = !isPaidReport && !isInvoice;
+    const shouldShowReceiptEmptyState =
+        isReceiptAllowed && !hasReceipt && !isApproved && !isSettled && (canEditReceipt || isAdmin || isApprover) && (canEditReceipt || ReportUtils.isPaidGroupPolicy(report));
+    const receiptViolationNames: OnyxTypes.ViolationName[] = [
+        CONST.VIOLATIONS.RECEIPT_REQUIRED,
+        CONST.VIOLATIONS.RECEIPT_NOT_SMART_SCANNED,
+        CONST.VIOLATIONS.MODIFIED_DATE,
+        CONST.VIOLATIONS.CASH_EXPENSE_WITH_NO_RECEIPT,
+        CONST.VIOLATIONS.SMARTSCAN_FAILED,
+    ];
+    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);
 
     return (
         <View style={styles.pRelative}>
@@ -371,8 +381,7 @@ function MoneyRequestView({
                     />
                 )}
                 {!shouldShowReceiptEmptyState && !hasReceipt && <View style={{marginVertical: 6}} />}
-                {shouldShowNotesViolations && <ReceiptAuditMessages notes={noticeTypeViolations} />}
-                {canUseViolations && <ViolationMessages violations={getViolationsForField('receipt')} />}
+                {shouldShowNotesViolations && <ReceiptAuditMessages notes={receiptViolations} />}
                 <OfflineWithFeedback pendingAction={getPendingFieldAction('amount')}>
                     <MenuItemWithTopDescription
                         title={amountTitle}

src/components/ReportActionItem/ReportActionItemImage.tsx

@@ -73,7 +73,7 @@ function ReportActionItemImage({
 }: ReportActionItemImageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const isDistanceRequest = Boolean(transaction && TransactionUtils.isDistanceRequest(transaction));
+    const isDistanceRequest = !!transaction && TransactionUtils.isDistanceRequest(transaction);
     const hasPendingWaypoints = transaction && TransactionUtils.isFetchingWaypointsFromServer(transaction);
     const showMapAsImage = isDistanceRequest && hasPendingWaypoints;
 
@@ -85,6 +85,7 @@ function ReportActionItemImage({
                     isSmallerIcon={!isSingleImage}
                     shouldHaveBorderRadius={shouldMapHaveBorderRadius}
                     interactive={false}
+                    shouldDisplayMapOnlyIfCoordinatesExist
                 />
             </View>
         );

src/components/ReportActionItem/ReportActionItemImages.tsx

@@ -66,30 +66,31 @@ function ReportActionItemImages({images, size, total, isHovered = false}: Report
     return (
         <View style={styles.reportActionItemImagesContainer}>
             <View style={[styles.reportActionItemImages, hoverStyle, heightStyle]}>
-                {shownImages.map(({thumbnail, isThumbnail, image, transaction, isLocalFile, fileExtension, filename}, index) => {
-                    // Show a border to separate multiple images. Shown to the right for each except the last.
-                    const shouldShowBorder = shownImages.length > 1 && index < shownImages.length - 1;
-                    const borderStyle = shouldShowBorder ? styles.reportActionItemImageBorder : {};
-
-                    return (
-                        <View
-                            key={`${index}-${image}`}
-                            style={[styles.reportActionItemImage, borderStyle, hoverStyle]}
-                        >
-                            <ReportActionItemImage
-                                thumbnail={thumbnail}
-                                fileExtension={fileExtension}
-                                image={image}
-                                isLocalFile={isLocalFile}
-                                filename={filename}
-                                transaction={transaction}
-                                isThumbnail={isThumbnail}
-                                isSingleImage={numberOfShownImages === 1}
-                                shouldMapHaveBorderRadius={false}
-                            />
-                        </View>
-                    );
-                })}
+                <ImageBehaviorContextProvider shouldSetAspectRatioInStyle={false}>
+                    {shownImages.map(({thumbnail, isThumbnail, image, transaction, isLocalFile, fileExtension, filename}, index) => {
+                        // Show a border to separate multiple images. Shown to the right for each except the last.
+                        const shouldShowBorder = shownImages.length > 1 && index < shownImages.length - 1;
+                        const borderStyle = shouldShowBorder ? styles.reportActionItemImageBorder : {};
+                        return (
+                            <View
+                                key={`${index}-${image}`}
+                                style={[styles.reportActionItemImage, borderStyle, hoverStyle]}
+                            >
+                                <ReportActionItemImage
+                                    thumbnail={thumbnail}
+                                    fileExtension={fileExtension}
+                                    image={image}
+                                    isLocalFile={isLocalFile}
+                                    filename={filename}
+                                    transaction={transaction}
+                                    isThumbnail={isThumbnail}
+                                    isSingleImage={numberOfShownImages === 1}
+                                    shouldMapHaveBorderRadius={false}
+                                />
+                            </View>
+                        );
+                    })}
+                </ImageBehaviorContextProvider>
             </View>
             {remaining > 0 && (
                 <View style={[styles.reportActionItemImagesMoreContainer]}>

src/components/ReportActionItem/ReportPreview.tsx

@@ -142,6 +142,9 @@ function ReportPreview({
     const hasErrors = hasMissingSmartscanFields || (canUseViolations && ReportUtils.hasViolations(iouReportID, transactionViolations)) || ReportUtils.hasActionsWithErrors(iouReportID);
     const lastThreeTransactionsWithReceipts = transactionsWithReceipts.slice(-3);
     const lastThreeReceipts = lastThreeTransactionsWithReceipts.map((transaction) => ({...ReceiptUtils.getThumbnailAndImageURIs(transaction), transaction}));
+    const showRTERViolationMessage =
+        numberOfRequests === 1 &&
+        TransactionUtils.hasPendingUI(allTransactions[0], TransactionUtils.getTransactionViolations(allTransactions[0]?.transactionID ?? '', transactionViolations));
 
     let formattedMerchant = numberOfRequests === 1 ? TransactionUtils.getMerchant(allTransactions[0]) : null;
     const formattedDescription = numberOfRequests === 1 ? TransactionUtils.getDescription(allTransactions[0]) : null;

src/styles/utils/index.ts

@@ -428,13 +428,6 @@ function getBackgroundAndBorderStyle(backgroundColor: ColorValue | undefined): V
     };
 }
 
-/**
- * Returns a style with the specified borderRadius
- */
-function getBorderRadiusStyle(borderRadius: number): ViewStyle {
-    return {borderRadius};
-}
-
 /**
  * Returns a style with the specified backgroundColor
  */
@@ -1141,7 +1134,6 @@ const staticStyleUtils = {
     getAvatarSize,
     getAvatarWidthStyle,
     getBackgroundAndBorderStyle,
-    getBorderRadiusStyle,
     getBackgroundColorStyle,
     getBackgroundColorWithOpacityStyle,
     getPaddingLeft,