From 087cbcddeb4ace851c591b571bb62da0b5492ee0 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Wed, 20 Mar 2024 15:09:31 +0300 Subject: [PATCH 01/23] implemented confirmed route for report preview --- .../ReportActionItemImages.tsx | 27 +++++++++++++------ .../ReportActionItem/ReportPreview.tsx | 2 +- 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/src/components/ReportActionItem/ReportActionItemImages.tsx b/src/components/ReportActionItem/ReportActionItemImages.tsx index ffc12957dcb45..dc9ed0d371fb0 100644 --- a/src/components/ReportActionItem/ReportActionItemImages.tsx +++ b/src/components/ReportActionItem/ReportActionItemImages.tsx @@ -2,11 +2,13 @@ import React from 'react'; import {View} from 'react-native'; import {Polygon, Svg} from 'react-native-svg'; +import ConfirmedRoute from '@components/ConfirmedRoute'; import Text from '@components/Text'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import type {ThumbnailAndImageURI} from '@libs/ReceiptUtils'; +import * as TransactionUtils from '@libs/TransactionUtils'; import variables from '@styles/variables'; import ReportActionItemImage from './ReportActionItemImage'; @@ -70,19 +72,28 @@ function ReportActionItemImages({images, size, total, isHovered = false}: Report // 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 : {}; + const isDistanceRequest = TransactionUtils.isDistanceRequest(transaction); + const hasPendingWaypoints = transaction?.pendingFields?.waypoints; + const showMapAsImage = isDistanceRequest && hasPendingWaypoints; return ( - + {showMapAsImage ? ( + + + + ) : ( + + )} {isLastImage && remaining > 0 && ( diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index f1aa1751dd84b..57fa568eb4870 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -135,7 +135,7 @@ function ReportPreview({ const isScanning = hasReceipts && areAllRequestsBeingSmartScanned; const hasErrors = hasMissingSmartscanFields || (canUseViolations && ReportUtils.hasViolations(iouReportID, transactionViolations)); const lastThreeTransactionsWithReceipts = transactionsWithReceipts.slice(-3); - const lastThreeReceipts = lastThreeTransactionsWithReceipts.map((transaction) => ReceiptUtils.getThumbnailAndImageURIs(transaction)); + const lastThreeReceipts = lastThreeTransactionsWithReceipts.map((transaction) => ({...ReceiptUtils.getThumbnailAndImageURIs(transaction), transaction})); let formattedMerchant = numberOfRequests === 1 && hasReceipts ? TransactionUtils.getMerchant(transactionsWithReceipts[0]) : null; if (TransactionUtils.isPartialMerchant(formattedMerchant ?? '')) { From cd70586476cf318c6fc0b6da01d0ec7a12a28356 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Thu, 28 Mar 2024 22:50:35 +0300 Subject: [PATCH 02/23] minor fixes --- src/components/ReportActionItem/ReportActionItemImages.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ReportActionItem/ReportActionItemImages.tsx b/src/components/ReportActionItem/ReportActionItemImages.tsx index 53560307b3141..921bb2271c69a 100644 --- a/src/components/ReportActionItem/ReportActionItemImages.tsx +++ b/src/components/ReportActionItem/ReportActionItemImages.tsx @@ -71,8 +71,8 @@ function ReportActionItemImages({images, size, total, isHovered = false}: Report // 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 : {}; - const isDistanceRequest = TransactionUtils.isDistanceRequest(transaction); - const hasPendingWaypoints = transaction?.pendingFields?.waypoints; + const isDistanceRequest = transaction && TransactionUtils.isDistanceRequest(transaction); + const hasPendingWaypoints = transaction && TransactionUtils.isFetchingWaypointsFromServer(transaction); const showMapAsImage = isDistanceRequest && hasPendingWaypoints; return ( {showMapAsImage ? ( - + ) : ( From 4828b6270f4cc3a13661b272111fc525730c6c37 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Mon, 8 Apr 2024 21:01:55 +0300 Subject: [PATCH 03/23] Changed empty state route pending icon --- assets/images/emptystate__routepending.svg | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/assets/images/emptystate__routepending.svg b/assets/images/emptystate__routepending.svg index 90f3296d37d6e..aba08554d02f7 100644 --- a/assets/images/emptystate__routepending.svg +++ b/assets/images/emptystate__routepending.svg @@ -1 +1,18 @@ - \ No newline at end of file + + + + + + + + + From 77e3ca4cf5c1bdfbf8b60ac3fde93228a374ddf7 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Mon, 8 Apr 2024 21:14:46 +0300 Subject: [PATCH 04/23] add icon fill color --- src/components/DistanceMapView/index.android.tsx | 3 +++ src/components/MapView/PendingMapView.tsx | 4 ++++ 2 files changed, 7 insertions(+) diff --git a/src/components/DistanceMapView/index.android.tsx b/src/components/DistanceMapView/index.android.tsx index 168a480c6100f..629b05d7bccf2 100644 --- a/src/components/DistanceMapView/index.android.tsx +++ b/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} /> )} diff --git a/src/components/MapView/PendingMapView.tsx b/src/components/MapView/PendingMapView.tsx index 32bf42a14b102..e729d03ad4771 100644 --- a/src/components/MapView/PendingMapView.tsx +++ b/src/components/MapView/PendingMapView.tsx @@ -4,6 +4,7 @@ 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'; @@ -11,11 +12,13 @@ import type {PendingMapViewProps} from './MapViewTypes'; function PendingMapView({title = '', subtitle = '', style}: PendingMapViewProps) { const hasTextContent = !_.isEmpty(title) || !_.isEmpty(subtitle); const styles = useThemeStyles(); + const theme = useTheme(); return ( {hasTextContent ? ( )} From 420850de85d9ee701402a027b0692f42814432c7 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Mon, 8 Apr 2024 21:43:23 +0300 Subject: [PATCH 05/23] down sized icon for multiple previews --- src/components/ConfirmedRoute.tsx | 7 +++++-- src/components/MapView/MapViewTypes.ts | 3 +++ src/components/MapView/PendingMapView.tsx | 7 ++++--- src/components/ReportActionItem/ReportActionItemImages.tsx | 5 ++++- 4 files changed, 16 insertions(+), 6 deletions(-) diff --git a/src/components/ConfirmedRoute.tsx b/src/components/ConfirmedRoute.tsx index 17c5097b8154c..596fc74dbbf62 100644 --- a/src/components/ConfirmedRoute.tsx +++ b/src/components/ConfirmedRoute.tsx @@ -26,9 +26,12 @@ type ConfirmedRoutePropsOnyxProps = { type ConfirmedRouteProps = ConfirmedRoutePropsOnyxProps & { /** Transaction that stores the distance request data */ transaction: OnyxEntry; + + /** Whether the size of the route pending icon is small. */ + isSmallIcon?: boolean; }; -function ConfirmedRoute({mapboxAccessToken, transaction}: ConfirmedRouteProps) { +function ConfirmedRoute({mapboxAccessToken, transaction, isSmallIcon}: ConfirmedRouteProps) { const {isOffline} = useNetwork(); const {route0: route} = transaction?.routes ?? {}; const waypoints = transaction?.comment?.waypoints ?? {}; @@ -102,7 +105,7 @@ function ConfirmedRoute({mapboxAccessToken, transaction}: ConfirmedRouteProps) { styleURL={CONST.MAPBOX.STYLE_URL} /> ) : ( - + ); } diff --git a/src/components/MapView/MapViewTypes.ts b/src/components/MapView/MapViewTypes.ts index 3fa52c54339b5..d5c903fdeccb6 100644 --- a/src/components/MapView/MapViewTypes.ts +++ b/src/components/MapView/MapViewTypes.ts @@ -36,6 +36,9 @@ type PendingMapViewProps = { /** Style applied to PendingMapView */ style?: StyleProp; + + /** Whether the size of the route pending icon is small. */ + isSmallIcon?: boolean; }; // Initial state of the map diff --git a/src/components/MapView/PendingMapView.tsx b/src/components/MapView/PendingMapView.tsx index e729d03ad4771..2c79a0446f5e6 100644 --- a/src/components/MapView/PendingMapView.tsx +++ b/src/components/MapView/PendingMapView.tsx @@ -9,10 +9,11 @@ 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, isSmallIcon = false}: PendingMapViewProps) { const hasTextContent = !_.isEmpty(title) || !_.isEmpty(subtitle); const styles = useThemeStyles(); const theme = useTheme(); + const iconSize = isSmallIcon ? variables.iconSizeSuperLarge : variables.iconSizeUltraLarge; return ( {hasTextContent ? ( @@ -27,8 +28,8 @@ function PendingMapView({title = '', subtitle = '', style}: PendingMapViewProps) diff --git a/src/components/ReportActionItem/ReportActionItemImages.tsx b/src/components/ReportActionItem/ReportActionItemImages.tsx index 921bb2271c69a..04f5e5e7fdbb2 100644 --- a/src/components/ReportActionItem/ReportActionItemImages.tsx +++ b/src/components/ReportActionItem/ReportActionItemImages.tsx @@ -81,7 +81,10 @@ function ReportActionItemImages({images, size, total, isHovered = false}: Report > {showMapAsImage ? ( - + ) : ( Date: Tue, 9 Apr 2024 11:12:59 +0300 Subject: [PATCH 06/23] change ultra large icon size --- src/styles/variables.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/variables.ts b/src/styles/variables.ts index 309c90fc631ee..e70d2bf5c5751 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -81,7 +81,7 @@ export default { iconSizeXLarge: 28, iconSizeExtraLarge: 40, iconSizeSuperLarge: 60, - iconSizeUltraLarge: 120, + iconSizeUltraLarge: 80, iconBottomBar: 24, sidebarAvatarSize: 28, iconHeader: 48, From 3a7f04cdbaa1232244d5c1efe4f1c587c81f7d64 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Tue, 9 Apr 2024 13:02:58 +0300 Subject: [PATCH 07/23] changed background color --- src/styles/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index f165974119ff6..d775fa04920a5 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4341,7 +4341,7 @@ const styles = (theme: ThemeColors) => }, mapPendingView: { - backgroundColor: theme.highlightBG, + backgroundColor: theme.hoverComponentBG, ...flex.flex1, borderRadius: variables.componentBorderRadiusLarge, }, From 23d62ea94184a054843ec5c3b20f273ceea6327c Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Thu, 11 Apr 2024 22:42:57 +0300 Subject: [PATCH 08/23] fix border radius --- src/components/ConfirmedRoute.tsx | 7 ++++++- src/styles/utils/index.ts | 8 ++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/src/components/ConfirmedRoute.tsx b/src/components/ConfirmedRoute.tsx index 596fc74dbbf62..fb0b4ddbb5348 100644 --- a/src/components/ConfirmedRoute.tsx +++ b/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'; @@ -38,6 +39,7 @@ function ConfirmedRoute({mapboxAccessToken, transaction, isSmallIcon}: Confirmed const coordinates = route?.geometry?.coordinates ?? []; const theme = useTheme(); const styles = useThemeStyles(); + const StyleUtils = useStyleUtils(); const getMarkerComponent = useCallback( (icon: IconAsset): ReactNode => ( @@ -105,7 +107,10 @@ function ConfirmedRoute({mapboxAccessToken, transaction, isSmallIcon}: Confirmed styleURL={CONST.MAPBOX.STYLE_URL} /> ) : ( - + ); } diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index e9efc84e88079..dd66a72faafad 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -419,6 +419,13 @@ 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 */ @@ -1108,6 +1115,7 @@ const staticStyleUtils = { getAvatarSize, getAvatarWidthStyle, getBackgroundAndBorderStyle, + getBorderRadiusStyle, getBackgroundColorStyle, getBackgroundColorWithOpacityStyle, getPaddingLeft, From bb3c43e0c56b8e57d2fefd4f5fe1d69cb12f8ae6 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Fri, 12 Apr 2024 12:40:11 +0300 Subject: [PATCH 09/23] fixed border radius problem --- src/components/ConfirmedRoute.tsx | 9 ++++++--- .../ReportActionItem/ReportActionItemImages.tsx | 1 + 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/ConfirmedRoute.tsx b/src/components/ConfirmedRoute.tsx index fb0b4ddbb5348..0e3c17f9e44a5 100644 --- a/src/components/ConfirmedRoute.tsx +++ b/src/components/ConfirmedRoute.tsx @@ -30,9 +30,12 @@ type ConfirmedRouteProps = ConfirmedRoutePropsOnyxProps & { /** Whether the size of the route pending icon is small. */ isSmallIcon?: boolean; + + /** Whether it should not have border radius */ + shouldHaveNoBorderRadius?: boolean; }; -function ConfirmedRoute({mapboxAccessToken, transaction, isSmallIcon}: ConfirmedRouteProps) { +function ConfirmedRoute({mapboxAccessToken, transaction, isSmallIcon, shouldHaveNoBorderRadius = false}: ConfirmedRouteProps) { const {isOffline} = useNetwork(); const {route0: route} = transaction?.routes ?? {}; const waypoints = transaction?.comment?.waypoints ?? {}; @@ -102,14 +105,14 @@ function ConfirmedRoute({mapboxAccessToken, transaction, isSmallIcon}: 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, !shouldHaveNoBorderRadius && styles.br4]} waypoints={waypointMarkers} styleURL={CONST.MAPBOX.STYLE_URL} /> ) : ( ); } diff --git a/src/components/ReportActionItem/ReportActionItemImages.tsx b/src/components/ReportActionItem/ReportActionItemImages.tsx index 04f5e5e7fdbb2..79845f2225c25 100644 --- a/src/components/ReportActionItem/ReportActionItemImages.tsx +++ b/src/components/ReportActionItem/ReportActionItemImages.tsx @@ -84,6 +84,7 @@ function ReportActionItemImages({images, size, total, isHovered = false}: Report ) : ( From 649e85d81e20ee447c0752f48764aa89cc754846 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Fri, 19 Apr 2024 11:59:17 +0300 Subject: [PATCH 10/23] centralized map view display inside ReportActionItemImages --- .../MoneyRequestPreviewContent.tsx | 13 +------ .../ReportActionItem/MoneyRequestView.tsx | 25 +++++-------- .../ReportActionItemImage.tsx | 22 +++++++++++ .../ReportActionItemImages.tsx | 37 ++++++------------- 4 files changed, 46 insertions(+), 51 deletions(-) diff --git a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx index 8994d456904a2..16024ecaf263c 100644 --- a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx +++ b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx @@ -4,7 +4,6 @@ import lodashSortBy from 'lodash/sortBy'; import React 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 MoneyRequestSkeletonView from '@components/MoneyRequestSkeletonView'; @@ -116,10 +115,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) { @@ -228,12 +224,7 @@ function MoneyRequestPreviewContent({ !onPreviewPressed ? [styles.moneyRequestPreviewBox, containerStyles] : {}, ]} > - {showMapAsImage && ( - - - - )} - {!showMapAsImage && hasReceipt && ( + {hasReceipt && ( - {showMapAsImage ? ( - - ) : ( - - )} + )} diff --git a/src/components/ReportActionItem/ReportActionItemImage.tsx b/src/components/ReportActionItem/ReportActionItemImage.tsx index 400d61b782b6a..2ac6f836a0d9c 100644 --- a/src/components/ReportActionItem/ReportActionItemImage.tsx +++ b/src/components/ReportActionItem/ReportActionItemImage.tsx @@ -2,7 +2,9 @@ import Str from 'expensify-common/lib/str'; import React from 'react'; import type {ViewStyle} from 'react-native'; +import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; +import ConfirmedRoute from '@components/ConfirmedRoute'; import type {IconSize} from '@components/EReceiptThumbnail'; import * as Expensicons from '@components/Icon/Expensicons'; import PressableWithoutFocus from '@components/Pressable/PressableWithoutFocus'; @@ -46,6 +48,9 @@ type ReportActionItemImageProps = { /** Whether there are other images displayed in the same parent container */ isSingleImage?: boolean; + + /** Whether the map view should not have border radius */ + shouldMapHaveNoBorderRadius?: boolean; }; /** @@ -64,9 +69,26 @@ function ReportActionItemImage({ fileExtension, filename, isSingleImage = true, + shouldMapHaveNoBorderRadius: shouldHaveNoBorderRadius = false, }: ReportActionItemImageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); + const isDistanceRequest = transaction && TransactionUtils.isDistanceRequest(transaction); + const hasPendingWaypoints = transaction && TransactionUtils.isFetchingWaypointsFromServer(transaction); + const showMapAsImage = isDistanceRequest && hasPendingWaypoints; + + if (showMapAsImage) { + return ( + + + + ); + } + const attachmentModalSource = tryResolveUrlFromApiRoot(image ?? ''); const thumbnailSource = tryResolveUrlFromApiRoot(thumbnail ?? ''); const isEReceipt = transaction && TransactionUtils.hasEReceipt(transaction); diff --git a/src/components/ReportActionItem/ReportActionItemImages.tsx b/src/components/ReportActionItem/ReportActionItemImages.tsx index fd67437f04cf9..6449cd65ba7f5 100644 --- a/src/components/ReportActionItem/ReportActionItemImages.tsx +++ b/src/components/ReportActionItem/ReportActionItemImages.tsx @@ -2,13 +2,11 @@ import React from 'react'; import {View} from 'react-native'; import {Polygon, Svg} from 'react-native-svg'; -import ConfirmedRoute from '@components/ConfirmedRoute'; import Text from '@components/Text'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import type {ThumbnailAndImageURI} from '@libs/ReceiptUtils'; -import * as TransactionUtils from '@libs/TransactionUtils'; import variables from '@styles/variables'; import ReportActionItemImage from './ReportActionItemImage'; @@ -71,34 +69,23 @@ function ReportActionItemImages({images, size, total, isHovered = false}: Report // 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 : {}; - const isDistanceRequest = transaction && TransactionUtils.isDistanceRequest(transaction); - const hasPendingWaypoints = transaction && TransactionUtils.isFetchingWaypointsFromServer(transaction); - const showMapAsImage = isDistanceRequest && hasPendingWaypoints; + return ( - {showMapAsImage ? ( - - - - ) : ( - - )} + ); })} From a96484f8649018266ea7f40ab1b183abb9371e45 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Fri, 19 Apr 2024 12:32:45 +0300 Subject: [PATCH 11/23] added pending waypoints case to display map view --- .../MoneyRequestPreview/MoneyRequestPreviewContent.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx index 16024ecaf263c..40ea0f72c365a 100644 --- a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx +++ b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx @@ -116,6 +116,8 @@ function MoneyRequestPreviewContent({ } const receiptImages = hasReceipt ? [{...ReceiptUtils.getThumbnailAndImageURIs(transaction), transaction}] : []; + const hasPendingWaypoints = transaction?.pendingFields?.waypoints; + const showMapAsImage = isDistanceRequest && hasPendingWaypoints; const getSettledMessage = (): string => { if (isCardTransaction) { @@ -224,7 +226,7 @@ function MoneyRequestPreviewContent({ !onPreviewPressed ? [styles.moneyRequestPreviewBox, containerStyles] : {}, ]} > - {hasReceipt && ( + {(hasReceipt || showMapAsImage) && ( Date: Fri, 19 Apr 2024 12:47:32 +0300 Subject: [PATCH 12/23] remove unnecessary condition --- .../MoneyRequestPreview/MoneyRequestPreviewContent.tsx | 4 +--- src/components/ReportActionItem/MoneyRequestView.tsx | 4 +--- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx index 40ea0f72c365a..16024ecaf263c 100644 --- a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx +++ b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx @@ -116,8 +116,6 @@ function MoneyRequestPreviewContent({ } const receiptImages = hasReceipt ? [{...ReceiptUtils.getThumbnailAndImageURIs(transaction), transaction}] : []; - const hasPendingWaypoints = transaction?.pendingFields?.waypoints; - const showMapAsImage = isDistanceRequest && hasPendingWaypoints; const getSettledMessage = (): string => { if (isCardTransaction) { @@ -226,7 +224,7 @@ function MoneyRequestPreviewContent({ !onPreviewPressed ? [styles.moneyRequestPreviewBox, containerStyles] : {}, ]} > - {(hasReceipt || showMapAsImage) && ( + {hasReceipt && ( } {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */} - {(showMapAsImage || hasReceipt) && ( + {hasReceipt && ( Date: Thu, 2 May 2024 12:44:18 +0300 Subject: [PATCH 13/23] disable map interactiveness --- src/components/ReportActionItem/ReportActionItemImage.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/ReportActionItem/ReportActionItemImage.tsx b/src/components/ReportActionItem/ReportActionItemImage.tsx index 1de96f4f1ef97..97d6b0a1aca50 100644 --- a/src/components/ReportActionItem/ReportActionItemImage.tsx +++ b/src/components/ReportActionItem/ReportActionItemImage.tsx @@ -84,6 +84,7 @@ function ReportActionItemImage({ transaction={transaction} isSmallIcon={!isSingleImage} shouldHaveNoBorderRadius={shouldHaveNoBorderRadius} + interactive={false} /> ); From 17dbb4135d64937257ac76514c596b167df5322b Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Thu, 2 May 2024 12:53:27 +0300 Subject: [PATCH 14/23] changed variable name --- src/components/ConfirmedRoute.tsx | 10 +++++----- .../ReportActionItem/ReportActionItemImage.tsx | 8 ++++---- .../ReportActionItem/ReportActionItemImages.tsx | 2 +- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/ConfirmedRoute.tsx b/src/components/ConfirmedRoute.tsx index 16ba301bd2593..192a214388b0c 100644 --- a/src/components/ConfirmedRoute.tsx +++ b/src/components/ConfirmedRoute.tsx @@ -31,14 +31,14 @@ type ConfirmedRouteProps = ConfirmedRoutePropsOnyxProps & { /** Whether the size of the route pending icon is small. */ isSmallIcon?: boolean; - /** Whether it should not have border radius */ - shouldHaveNoBorderRadius?: boolean; + /** Whether it should have border radius */ + shouldHaveBorderRadius?: boolean; /** Whether the map is interactable or not */ interactive?: boolean; }; -function ConfirmedRoute({mapboxAccessToken, transaction, isSmallIcon, shouldHaveNoBorderRadius = false, interactive}: ConfirmedRouteProps) { +function ConfirmedRoute({mapboxAccessToken, transaction, isSmallIcon, shouldHaveBorderRadius = true, interactive}: ConfirmedRouteProps) { const {isOffline} = useNetwork(); const {route0: route} = transaction?.routes ?? {}; const waypoints = transaction?.comment?.waypoints ?? {}; @@ -109,14 +109,14 @@ function ConfirmedRoute({mapboxAccessToken, transaction, isSmallIcon, shouldHave location: waypointMarkers?.[0]?.coordinate ?? (CONST.MAPBOX.DEFAULT_COORDINATE as [number, number]), }} directionCoordinates={coordinates as Array<[number, number]>} - style={[styles.mapView, !shouldHaveNoBorderRadius && styles.br4]} + style={[styles.mapView, shouldHaveBorderRadius && styles.br4]} waypoints={waypointMarkers} styleURL={CONST.MAPBOX.STYLE_URL} /> ) : ( ); } diff --git a/src/components/ReportActionItem/ReportActionItemImage.tsx b/src/components/ReportActionItem/ReportActionItemImage.tsx index 97d6b0a1aca50..3163d41c54438 100644 --- a/src/components/ReportActionItem/ReportActionItemImage.tsx +++ b/src/components/ReportActionItem/ReportActionItemImage.tsx @@ -49,8 +49,8 @@ type ReportActionItemImageProps = { /** Whether there are other images displayed in the same parent container */ isSingleImage?: boolean; - /** Whether the map view should not have border radius */ - shouldMapHaveNoBorderRadius?: boolean; + /** Whether the map view should have border radius */ + shouldMapHaveBorderRadius?: boolean; }; /** @@ -69,7 +69,7 @@ function ReportActionItemImage({ fileExtension, filename, isSingleImage = true, - shouldMapHaveNoBorderRadius: shouldHaveNoBorderRadius = false, + shouldMapHaveBorderRadius, }: ReportActionItemImageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -83,7 +83,7 @@ function ReportActionItemImage({ diff --git a/src/components/ReportActionItem/ReportActionItemImages.tsx b/src/components/ReportActionItem/ReportActionItemImages.tsx index 6449cd65ba7f5..3368af10b6f3a 100644 --- a/src/components/ReportActionItem/ReportActionItemImages.tsx +++ b/src/components/ReportActionItem/ReportActionItemImages.tsx @@ -84,7 +84,7 @@ function ReportActionItemImages({images, size, total, isHovered = false}: Report transaction={transaction} isThumbnail={isThumbnail} isSingleImage={numberOfShownImages === 1} - shouldMapHaveNoBorderRadius + shouldMapHaveBorderRadius={false} /> ); From de71096a4796b454cdd502b7d9e4c0acdbdb98ae Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Thu, 2 May 2024 13:05:26 +0300 Subject: [PATCH 15/23] changed variable name to isSmallerIcon --- src/components/ConfirmedRoute.tsx | 8 ++++---- src/components/MapView/MapViewTypes.ts | 4 ++-- src/components/MapView/PendingMapView.tsx | 4 ++-- src/components/ReportActionItem/ReportActionItemImage.tsx | 2 +- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/ConfirmedRoute.tsx b/src/components/ConfirmedRoute.tsx index 192a214388b0c..bc6abcdf5ac6e 100644 --- a/src/components/ConfirmedRoute.tsx +++ b/src/components/ConfirmedRoute.tsx @@ -28,8 +28,8 @@ type ConfirmedRouteProps = ConfirmedRoutePropsOnyxProps & { /** Transaction that stores the distance expense data */ transaction: OnyxEntry; - /** Whether the size of the route pending icon is small. */ - isSmallIcon?: boolean; + /** Whether the size of the route pending icon is smaller. */ + isSmallerIcon?: boolean; /** Whether it should have border radius */ shouldHaveBorderRadius?: boolean; @@ -38,7 +38,7 @@ type ConfirmedRouteProps = ConfirmedRoutePropsOnyxProps & { interactive?: boolean; }; -function ConfirmedRoute({mapboxAccessToken, transaction, isSmallIcon, shouldHaveBorderRadius = true, interactive}: ConfirmedRouteProps) { +function ConfirmedRoute({mapboxAccessToken, transaction, isSmallerIcon, shouldHaveBorderRadius = true, interactive}: ConfirmedRouteProps) { const {isOffline} = useNetwork(); const {route0: route} = transaction?.routes ?? {}; const waypoints = transaction?.comment?.waypoints ?? {}; @@ -115,7 +115,7 @@ function ConfirmedRoute({mapboxAccessToken, transaction, isSmallIcon, shouldHave /> ) : ( ); diff --git a/src/components/MapView/MapViewTypes.ts b/src/components/MapView/MapViewTypes.ts index cc65cd7909eba..41170694c9d29 100644 --- a/src/components/MapView/MapViewTypes.ts +++ b/src/components/MapView/MapViewTypes.ts @@ -39,8 +39,8 @@ type PendingMapViewProps = { /** Style applied to PendingMapView */ style?: StyleProp; - /** Whether the size of the route pending icon is small. */ - isSmallIcon?: boolean; + /** Whether the size of the route pending icon is smaller. */ + isSmallerIcon?: boolean; }; // Initial state of the map diff --git a/src/components/MapView/PendingMapView.tsx b/src/components/MapView/PendingMapView.tsx index 2c79a0446f5e6..7a9dfa3e4b011 100644 --- a/src/components/MapView/PendingMapView.tsx +++ b/src/components/MapView/PendingMapView.tsx @@ -9,11 +9,11 @@ import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; import type {PendingMapViewProps} from './MapViewTypes'; -function PendingMapView({title = '', subtitle = '', style, isSmallIcon = false}: PendingMapViewProps) { +function PendingMapView({title = '', subtitle = '', style, isSmallerIcon = false}: PendingMapViewProps) { const hasTextContent = !_.isEmpty(title) || !_.isEmpty(subtitle); const styles = useThemeStyles(); const theme = useTheme(); - const iconSize = isSmallIcon ? variables.iconSizeSuperLarge : variables.iconSizeUltraLarge; + const iconSize = isSmallerIcon ? variables.iconSizeSuperLarge : variables.iconSizeUltraLarge; return ( {hasTextContent ? ( diff --git a/src/components/ReportActionItem/ReportActionItemImage.tsx b/src/components/ReportActionItem/ReportActionItemImage.tsx index 3163d41c54438..9fb2d4d2e3bdc 100644 --- a/src/components/ReportActionItem/ReportActionItemImage.tsx +++ b/src/components/ReportActionItem/ReportActionItemImage.tsx @@ -82,7 +82,7 @@ function ReportActionItemImage({ From 4460deb02079c980955e0d09b0fbaeb7d4d0ec12 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Thu, 9 May 2024 21:21:47 +0300 Subject: [PATCH 16/23] remove redundant variable --- src/components/ReportActionItem/ReportActionItemImage.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/ReportActionItem/ReportActionItemImage.tsx b/src/components/ReportActionItem/ReportActionItemImage.tsx index 2e4d05dfadf7f..87225182fb06c 100644 --- a/src/components/ReportActionItem/ReportActionItemImage.tsx +++ b/src/components/ReportActionItem/ReportActionItemImage.tsx @@ -73,7 +73,7 @@ function ReportActionItemImage({ }: ReportActionItemImageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const isDistanceRequest = transaction && TransactionUtils.isDistanceRequest(transaction); + const isDistanceRequest = Boolean(transaction && TransactionUtils.isDistanceRequest(transaction)); const hasPendingWaypoints = transaction && TransactionUtils.isFetchingWaypointsFromServer(transaction); const showMapAsImage = isDistanceRequest && hasPendingWaypoints; @@ -93,7 +93,6 @@ function ReportActionItemImage({ const attachmentModalSource = tryResolveUrlFromApiRoot(image ?? ''); const thumbnailSource = tryResolveUrlFromApiRoot(thumbnail ?? ''); const isEReceipt = transaction && TransactionUtils.hasEReceipt(transaction); - const isDistanceRequest = Boolean(transaction && TransactionUtils.isDistanceRequest(transaction)); let propsObj: ReceiptImageProps; From 95924c6208fc3f6d7f307c6c322455d0ba6735eb Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Thu, 9 May 2024 23:33:43 +0300 Subject: [PATCH 17/23] changed map pending subtitle color to supporting text --- src/components/BlockingViews/BlockingView.tsx | 10 +++++++--- src/components/MapView/PendingMapView.tsx | 1 + 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/BlockingViews/BlockingView.tsx b/src/components/BlockingViews/BlockingView.tsx index 363342778fc0e..0dec2c09c1748 100644 --- a/src/components/BlockingViews/BlockingView.tsx +++ b/src/components/BlockingViews/BlockingView.tsx @@ -1,5 +1,5 @@ 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'; @@ -22,6 +22,9 @@ type BaseBlockingViewProps = { /** Subtitle message below the title */ subtitle?: string; + /** The style of the subtitle message */ + subtitleStyle?: StyleProp; + /** Link message below the subtitle */ linkKey?: TranslationPaths; @@ -72,6 +75,7 @@ function BlockingView({ iconColor, title, subtitle = '', + subtitleStyle, linkKey = 'notFound.goBackHome', shouldShowLink = false, iconWidth = variables.iconSizeSuperLarge, @@ -89,7 +93,7 @@ function BlockingView({ () => ( <> {shouldShowLink ? ( @@ -102,7 +106,7 @@ function BlockingView({ ) : null} ), - [styles, subtitle, shouldShowLink, linkKey, onLinkPress, translate], + [styles, subtitle, shouldShowLink, linkKey, onLinkPress, translate, subtitleStyle], ); const subtitleContent = useMemo(() => { diff --git a/src/components/MapView/PendingMapView.tsx b/src/components/MapView/PendingMapView.tsx index 7a9dfa3e4b011..cc9829517154e 100644 --- a/src/components/MapView/PendingMapView.tsx +++ b/src/components/MapView/PendingMapView.tsx @@ -22,6 +22,7 @@ function PendingMapView({title = '', subtitle = '', style, isSmallerIcon = false iconColor={theme.border} title={title} subtitle={subtitle} + subtitleStyle={styles.textSupporting} shouldShowLink={false} /> ) : ( From b8612b81166721796551d51a93849f94c744f187 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Mon, 13 May 2024 23:16:57 +0300 Subject: [PATCH 18/23] minor fix --- src/components/ReportActionItem/ReportActionItemImage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/ReportActionItemImage.tsx b/src/components/ReportActionItem/ReportActionItemImage.tsx index 87225182fb06c..6edae0a530f06 100644 --- a/src/components/ReportActionItem/ReportActionItemImage.tsx +++ b/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; From 5bd900a6322baf9bd9c6b2c0e97f3a618476afb7 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Wed, 29 May 2024 22:34:56 +0300 Subject: [PATCH 19/23] remove duplicate helper --- src/styles/utils/index.ts | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index ee0f663d8aafa..33e7329a2d32b 100644 --- a/src/styles/utils/index.ts +++ b/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 */ From f488ecbfba673ceb233c9ad0eabc21b7efd9e150 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Wed, 29 May 2024 22:42:40 +0300 Subject: [PATCH 20/23] remove dupe --- src/styles/utils/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 33e7329a2d32b..abd479e6d79dc 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1134,7 +1134,6 @@ const staticStyleUtils = { getAvatarSize, getAvatarWidthStyle, getBackgroundAndBorderStyle, - getBorderRadiusStyle, getBackgroundColorStyle, getBackgroundColorWithOpacityStyle, getPaddingLeft, From aad7ac8d25d526b51918e8e40afe6778f4d0b5f4 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Wed, 29 May 2024 23:02:21 +0300 Subject: [PATCH 21/23] fix displaying map without route --- src/components/ConfirmedRoute.tsx | 10 ++++++++-- .../ReportActionItem/ReportActionItemImage.tsx | 1 + 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/ConfirmedRoute.tsx b/src/components/ConfirmedRoute.tsx index bc6abcdf5ac6e..77724eae58a94 100644 --- a/src/components/ConfirmedRoute.tsx +++ b/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 ? ( ); From a3819eea5fccf427709b7a80e382a66ad8348959 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Mon, 3 Jun 2024 22:37:55 +0300 Subject: [PATCH 22/23] changed variable name --- src/components/ConfirmedRoute.tsx | 6 +++--- src/components/ReportActionItem/ReportActionItemImage.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/ConfirmedRoute.tsx b/src/components/ConfirmedRoute.tsx index 77724eae58a94..745535f3f03fc 100644 --- a/src/components/ConfirmedRoute.tsx +++ b/src/components/ConfirmedRoute.tsx @@ -36,13 +36,13 @@ type ConfirmedRouteProps = ConfirmedRoutePropsOnyxProps & { /** Whether it should display the Mapbox map only when the route/coordinates exist otherwise * it will display pending map icon */ - shouldDisplayMapOnlyIfCoordinatesExist?: boolean; + requireRouteToDisplayMap?: boolean; /** Whether the map is interactable or not */ interactive?: boolean; }; -function ConfirmedRoute({mapboxAccessToken, transaction, isSmallerIcon, shouldHaveBorderRadius = true, shouldDisplayMapOnlyIfCoordinatesExist = false, 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 ?? {}; @@ -102,7 +102,7 @@ function ConfirmedRoute({mapboxAccessToken, transaction, isSmallerIcon, shouldHa return MapboxToken.stop; }, []); - const shouldDisplayMap = !shouldDisplayMapOnlyIfCoordinatesExist || (shouldDisplayMapOnlyIfCoordinatesExist && !!coordinates.length); + const shouldDisplayMap = !requireRouteToDisplayMap || !!coordinates.length; return !isOffline && Boolean(mapboxAccessToken?.token) && shouldDisplayMap ? ( ); From b2887027c351e8f35b3603bfc43e439566f23964 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Mon, 3 Jun 2024 22:54:34 +0300 Subject: [PATCH 23/23] minor fix --- .../ReportActionItem/MoneyRequestView.tsx | 59 +++++++++---------- 1 file changed, 29 insertions(+), 30 deletions(-) diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx index 0ce11a0f3737d..68b573f9a9ecc 100644 --- a/src/components/ReportActionItem/MoneyRequestView.tsx +++ b/src/components/ReportActionItem/MoneyRequestView.tsx @@ -343,36 +343,35 @@ function MoneyRequestView({ shouldShowAuditMessage={Boolean(shouldShowNotesViolations && didRceiptScanSucceed)} /> )} - {hasReceipt || - (errors && ( - { - if (!transaction?.transactionID) { - return; - } - Transaction.clearError(transaction.transactionID); - ReportActions.clearAllRelatedReportActionErrors(report.reportID, parentReportAction); - }} - > - {hasReceipt && ( - - - - )} - - ))} + {(hasReceipt || errors) && ( + { + if (!transaction?.transactionID) { + return; + } + Transaction.clearError(transaction.transactionID); + ReportActions.clearAllRelatedReportActionErrors(report.reportID, parentReportAction); + }} + > + {hasReceipt && ( + + + + )} + + )} {shouldShowReceiptEmptyState && (