diff --git a/cspell.json b/cspell.json index 5efd4621b29e..e25a9dae0da0 100644 --- a/cspell.json +++ b/cspell.json @@ -52,6 +52,7 @@ "autofilled", "automations", "autoplay", + "AUTOREIMBURSED", "autoreleasepool", "AUTOREPORTING", "autoresizesSubviews", diff --git a/src/CONST/index.ts b/src/CONST/index.ts index d29abae629e3..657faeebf661 100755 --- a/src/CONST/index.ts +++ b/src/CONST/index.ts @@ -1347,6 +1347,7 @@ const CONST = { SUBMITTED: 1, APPROVED: 2, BILLING: 3, + AUTOREIMBURSED: 6, }, STATUS_NUM: { OPEN: 0, diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx index 95d9a3c65c43..6a457d450b24 100644 --- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx +++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx @@ -1,8 +1,7 @@ import React, {useCallback, useContext, useDeferredValue, useEffect, useMemo, useRef, useState} from 'react'; import {ActivityIndicator, FlatList, View} from 'react-native'; -import type {LayoutChangeEvent, ListRenderItemInfo, ViewToken} from 'react-native'; +import type {ListRenderItemInfo, ViewToken} from 'react-native'; import Animated, {useAnimatedStyle, useSharedValue, withDelay, withSpring, withTiming} from 'react-native-reanimated'; -import type {LayoutRectangle} from 'react-native/Libraries/Types/CoreEventTypes'; import Button from '@components/Button'; import {getButtonRole} from '@components/Button/utils'; import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu'; @@ -10,6 +9,7 @@ import {DelegateNoAccessContext} from '@components/DelegateNoAccessModalProvider import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import ImageSVG from '@components/ImageSVG'; +import MoneyReportHeaderStatusBarSkeleton from '@components/MoneyReportHeaderStatusBarSkeleton'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import {PressableWithFeedback} from '@components/Pressable'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; @@ -30,8 +30,8 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {openUnreportedExpense} from '@libs/actions/Report'; import ControlSelection from '@libs/ControlSelection'; +import {convertToDisplayString} from '@libs/CurrencyUtils'; import {canUseTouchScreen} from '@libs/DeviceCapabilities'; -import {getTotalAmountForIOUReportPreviewButton} from '@libs/MoneyRequestReportUtils'; import Navigation from '@libs/Navigation/Navigation'; import Performance from '@libs/Performance'; import {getConnectedIntegration} from '@libs/PolicyUtils'; @@ -45,6 +45,7 @@ import { getMoneyRequestSpendBreakdown, getNonHeldAndFullAmount, getPolicyName, + getReportStatusTranslation, getTransactionsWithReceipts, hasHeldExpenses as hasHeldExpensesReportUtils, hasNonReimbursableTransactions as hasNonReimbursableTransactionsReportUtils, @@ -75,17 +76,6 @@ import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; import EmptyMoneyRequestReportPreview from './EmptyMoneyRequestReportPreview'; import type {MoneyRequestReportPreviewContentProps} from './types'; -type WebLayoutNativeEvent = { - layout: LayoutRectangle; - target: Element; -}; - -const checkIfReportNameOverflows = ({nativeEvent}: T) => - 'target' in nativeEvent ? (nativeEvent as WebLayoutNativeEvent).target.scrollHeight > variables.h70 : false; - -// Do not remove this empty view, it is a workaround for the icon padding at the end of the preview text -const FixIconPadding = ; - function MoneyRequestReportPreviewContent({ iouReportID, chatReportID, @@ -129,8 +119,6 @@ function MoneyRequestReportPreviewContent({ const {isOffline} = useNetwork(); const {shouldUseNarrowLayout} = useResponsiveLayout(); - const [doesReportNameOverflow, setDoesReportNameOverflow] = useState(false); - const {areAllRequestsBeingSmartScanned, hasNonReimbursableTransactions} = useMemo( () => ({ areAllRequestsBeingSmartScanned: areAllRequestsBeingSmartScannedReportUtils(iouReportID, action), @@ -293,18 +281,17 @@ function MoneyRequestReportPreviewContent({ * There is an edge case when there is only one distance expense with a pending route and amount = 0. In this case, we don't want to show the merchant or description because it says: "Pending route...", which is already displayed in the amount field. */ - const {supportText} = useMemo(() => { - if (numberOfRequests === 1) { - return { - supportText: '', - }; - } - return { - supportText: translate('iou.expenseCount', { + const expenseCount = useMemo( + () => + translate('iou.expenseCount', { count: numberOfRequests, }), - }; - }, [translate, numberOfRequests]); + [translate, numberOfRequests], + ); + + const reportStatus = useMemo(() => getReportStatusTranslation(iouReport?.stateNum, iouReport?.statusNum), [iouReport?.stateNum, iouReport?.statusNum]); + + const totalAmountStyle = shouldUseNarrowLayout ? [styles.flexColumnReverse, styles.alignItemsStretch] : [styles.flexRow, styles.alignItemsBaseline]; useEffect(() => { if (!isPaidAnimationRunning || isApprovedAnimationRunning) { @@ -388,13 +375,6 @@ function MoneyRequestReportPreviewContent({ carouselRef.current?.scrollToIndex({index, animated: true, viewOffset: 2 * styles.gap2.gap}); }; - const onTextLayoutChange = (e: LayoutChangeEvent) => { - const doesOverflow = checkIfReportNameOverflows(e); - if (doesOverflow !== doesReportNameOverflow) { - setDoesReportNameOverflow(doesOverflow); - } - }; - const renderFlatlistItem = (itemInfo: ListRenderItemInfo) => { if (itemInfo.index > 9) { return ( @@ -417,13 +397,17 @@ function MoneyRequestReportPreviewContent({ ? {maxWidth: reportPreviewStyles.transactionPreviewCarouselStyle.width} : {}; - const approvedOrSettledIcon = (iouSettled || isApproved) && ( + // We also show icons in case of Approved or Paid report for easier identification at glance + const isIconNeeded = useMemo(() => { + return iouSettled || isApproved; + }, [iouSettled, isApproved]); + + const approvedOrSettledIcon = isIconNeeded && ( ); @@ -498,13 +482,13 @@ function MoneyRequestReportPreviewContent({ [CONST.REPORT.REPORT_PREVIEW_ACTIONS.SUBMIT]: (