Merge pull request #54760 from shubham1206agra/per-diem-6

Implemented BE part of Per Diem Request

Author: Gonals

src/CONST.ts

@@ -2328,6 +2328,8 @@ const CONST = {
 
     IOU: {
         MAX_RECENT_REPORTS_TO_SHOW: 5,
+        // This will guranatee that the quantity input will not exceed 9,007,199,254,740,991 (Number.MAX_SAFE_INTEGER).
+        QUANTITY_MAX_LENGTH: 12,
         // This is the transactionID used when going through the create expense flow so that it mimics a real transaction (like the edit flow)
         OPTIMISTIC_TRANSACTION_ID: '1',
         // Note: These payment types are used when building IOU reportAction message values in the server and should

src/components/Attachments/AttachmentView/index.tsx

@@ -9,6 +9,7 @@ import DistanceEReceipt from '@components/DistanceEReceipt';
 import EReceipt from '@components/EReceipt';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
+import PerDiemEReceipt from '@components/PerDiemEReceipt';
 import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
 import {usePlaybackContext} from '@components/VideoPlayerContexts/PlaybackContext';
@@ -18,10 +19,10 @@ import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as CachedPDFPaths from '@libs/actions/CachedPDFPaths';
+import {add as addCachedPDFPaths} from '@libs/actions/CachedPDFPaths';
 import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
-import * as FileUtils from '@libs/fileDownload/FileUtils';
-import * as TransactionUtils from '@libs/TransactionUtils';
+import {getFileResolution, isHighResolutionImage} from '@libs/fileDownload/FileUtils';
+import {hasEReceipt, hasReceiptSource, isDistanceRequest, isPerDiemRequest} from '@libs/TransactionUtils';
 import type {ColorValue} from '@styles/utils/types';
 import variables from '@styles/variables';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -133,8 +134,8 @@ function AttachmentView({
     const {isOffline} = useNetwork({onReconnect: () => setImageError(false)});
 
     useEffect(() => {
-        FileUtils.getFileResolution(file).then((resolution) => {
-            setIsHighResolution(FileUtils.isHighResolutionImage(resolution));
+        getFileResolution(file).then((resolution) => {
+            setIsHighResolution(isHighResolutionImage(resolution));
         });
     }, [file]);
 
@@ -160,7 +161,11 @@ function AttachmentView({
         );
     }
 
-    if (transaction && !TransactionUtils.hasReceiptSource(transaction) && TransactionUtils.hasEReceipt(transaction)) {
+    if (isPerDiemRequest(transaction) && transaction && !hasReceiptSource(transaction)) {
+        return <PerDiemEReceipt transactionID={transaction.transactionID} />;
+    }
+
+    if (transaction && !hasReceiptSource(transaction) && hasEReceipt(transaction)) {
         return (
             <View style={[styles.flex1, styles.alignItemsCenter]}>
                 <ScrollView
@@ -183,7 +188,7 @@ function AttachmentView({
         const onPDFLoadComplete = (path: string) => {
             const id = (transaction && transaction.transactionID) ?? reportActionID;
             if (path && id) {
-                CachedPDFPaths.add(id, path);
+                addCachedPDFPaths(id, path);
             }
             if (!loadComplete) {
                 setLoadComplete(true);
@@ -215,7 +220,7 @@ function AttachmentView({
         );
     }
 
-    if (TransactionUtils.isDistanceRequest(transaction) && transaction) {
+    if (isDistanceRequest(transaction) && transaction) {
         return <DistanceEReceipt transaction={transaction} />;
     }
 

src/components/EReceiptThumbnail.tsx

@@ -1,32 +1,26 @@
 import React, {useMemo} from 'react';
 import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as ReportUtils from '@libs/ReportUtils';
-import * as TripReservationUtils from '@libs/TripReservationUtils';
+import {getTransactionDetails} from '@libs/ReportUtils';
+import {isPerDiemRequest as isPerDiemRequestTransactionUtils} from '@libs/TransactionUtils';
+import {getTripEReceiptIcon} from '@libs/TripReservationUtils';
 import colors from '@styles/theme/colors';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Transaction} from '@src/types/onyx';
 import Icon from './Icon';
 import * as eReceiptBGs from './Icon/EReceiptBGs';
 import * as Expensicons from './Icon/Expensicons';
 import * as MCCIcons from './Icon/MCCIcons';
 import Image from './Image';
 import Text from './Text';
 
-type EReceiptThumbnailOnyxProps = {
-    transaction: OnyxEntry<Transaction>;
-};
-
 type IconSize = 'x-small' | 'small' | 'medium' | 'large';
 
-type EReceiptThumbnailProps = EReceiptThumbnailOnyxProps & {
-    /** TransactionID of the transaction this EReceipt corresponds to. It's used by withOnyx HOC */
-    // eslint-disable-next-line react/no-unused-prop-types
+type EReceiptThumbnailProps = {
+    /** TransactionID of the transaction this EReceipt corresponds to. */
     transactionID: string;
 
     /** Border radius to be applied on the parent view. */
@@ -54,20 +48,22 @@ const backgroundImages = {
     [CONST.ERECEIPT_COLORS.PINK]: eReceiptBGs.EReceiptBG_Pink,
 };
 
-function EReceiptThumbnail({transaction, borderRadius, fileExtension, isReceiptThumbnail = false, centerIconV = true, iconSize = 'large'}: EReceiptThumbnailProps) {
+function EReceiptThumbnail({transactionID, borderRadius, fileExtension, isReceiptThumbnail = false, centerIconV = true, iconSize = 'large'}: EReceiptThumbnailProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
     const colorCode = isReceiptThumbnail ? StyleUtils.getFileExtensionColorCode(fileExtension) : StyleUtils.getEReceiptColorCode(transaction);
 
     const backgroundImage = useMemo(() => backgroundImages[colorCode], [colorCode]);
 
     const colorStyles = StyleUtils.getEReceiptColorStyles(colorCode);
     const primaryColor = colorStyles?.backgroundColor;
     const secondaryColor = colorStyles?.color;
-    const transactionDetails = ReportUtils.getTransactionDetails(transaction);
+    const transactionDetails = getTransactionDetails(transaction);
     const transactionMCCGroup = transactionDetails?.mccGroup;
     const MCCIcon = transactionMCCGroup ? MCCIcons[`${transactionMCCGroup}`] : undefined;
-    const tripIcon = TripReservationUtils.getTripEReceiptIcon(transaction);
+    const tripIcon = getTripEReceiptIcon(transaction);
+    const isPerDiemRequest = isPerDiemRequestTransactionUtils(transaction);
 
     let receiptIconWidth: number = variables.eReceiptIconWidth;
     let receiptIconHeight: number = variables.eReceiptIconHeight;
@@ -135,15 +131,23 @@ function EReceiptThumbnail({transaction, borderRadius, fileExtension, isReceiptT
                             {fileExtension.toUpperCase()}
                         </Text>
                     )}
-                    {MCCIcon && !isReceiptThumbnail ? (
+                    {isPerDiemRequest ? (
+                        <Icon
+                            src={Expensicons.CalendarSolid}
+                            height={receiptMCCSize}
+                            width={receiptMCCSize}
+                            fill={primaryColor}
+                        />
+                    ) : null}
+                    {!isPerDiemRequest && MCCIcon && !isReceiptThumbnail ? (
                         <Icon
                             src={MCCIcon}
                             height={receiptMCCSize}
                             width={receiptMCCSize}
                             fill={primaryColor}
                         />
                     ) : null}
-                    {!MCCIcon && tripIcon ? (
+                    {!isPerDiemRequest && !MCCIcon && tripIcon ? (
                         <Icon
                             src={tripIcon}
                             height={receiptMCCSize}
@@ -158,9 +162,6 @@ function EReceiptThumbnail({transaction, borderRadius, fileExtension, isReceiptT
 }
 
 EReceiptThumbnail.displayName = 'EReceiptThumbnail';
-export default withOnyx<EReceiptThumbnailProps, EReceiptThumbnailOnyxProps>({
-    transaction: {
-        key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
-    },
-})(EReceiptThumbnail);
-export type {IconSize, EReceiptThumbnailProps, EReceiptThumbnailOnyxProps};
+export default EReceiptThumbnail;
+
+export type {IconSize, EReceiptThumbnailProps};