Merge pull request #33804 from FitseTLT/DistanceEReceipt-ts-migration

[TS migration] Migrate 'DistanceEReceipt.js' component to TypeScript
Expensify · Feb 15, 2024 · 50e07e8 · 50e07e8
2 parents 1b3939d + 94660d4
commit 50e07e8
Showing 1 changed file with 23 additions and 34 deletions.
diff --git a/src/components/DistanceEReceipt.js → src/components/DistanceEReceipt.tsx b/src/components/DistanceEReceipt.js → src/components/DistanceEReceipt.tsx
@@ -1,51 +1,43 @@
-import lodashGet from 'lodash/get';
 import React, {useMemo} from 'react';
 import {ScrollView, View} from 'react-native';
-import _ from 'underscore';
 import EReceiptBackground from '@assets/images/eReceipt_background.svg';
 import useLocalize from '@hooks/useLocalize';
-import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as ReceiptUtils from '@libs/ReceiptUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
+import type {TranslationPaths} from '@src/languages/types';
+import type {Transaction} from '@src/types/onyx';
+import type {WaypointCollection} from '@src/types/onyx/Transaction';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import ImageSVG from './ImageSVG';
 import PendingMapView from './MapView/PendingMapView';
 import Text from './Text';
 import ThumbnailImage from './ThumbnailImage';
-import transactionPropTypes from './transactionPropTypes';
 
-const propTypes = {
+type DistanceEReceiptProps = {
     /** The transaction for the distance request */
-    transaction: transactionPropTypes,
+    transaction: Transaction;
 };
 
-const defaultProps = {
-    transaction: {},
-};
-
-function DistanceEReceipt({transaction}) {
-    const theme = useTheme();
+function DistanceEReceipt({transaction}: DistanceEReceiptProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {thumbnail} = TransactionUtils.hasReceipt(transaction) ? ReceiptUtils.getThumbnailAndImageURIs(transaction) : {};
-    const {amount: transactionAmount, currency: transactionCurrency, merchant: transactionMerchant, created: transactionDate} = ReportUtils.getTransactionDetails(transaction);
+    const thumbnail = TransactionUtils.hasReceipt(transaction) ? ReceiptUtils.getThumbnailAndImageURIs(transaction).thumbnail : null;
+    const {amount: transactionAmount, currency: transactionCurrency, merchant: transactionMerchant, created: transactionDate} = ReportUtils.getTransactionDetails(transaction) ?? {};
     const formattedTransactionAmount = CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency);
-    const thumbnailSource = tryResolveUrlFromApiRoot(thumbnail || '');
-    const waypoints = lodashGet(transaction, 'comment.waypoints', {});
-    const sortedWaypoints = useMemo(
+    const thumbnailSource = tryResolveUrlFromApiRoot((thumbnail as string) || '');
+    const waypoints = useMemo(() => transaction?.comment?.waypoints ?? {}, [transaction?.comment?.waypoints]);
+    const sortedWaypoints = useMemo<WaypointCollection>(
         () =>
             // The waypoint keys are sometimes out of order
-            _.chain(waypoints)
-                .keys()
+            Object.keys(waypoints)
                 .sort((keyA, keyB) => TransactionUtils.getWaypointIndex(keyA) - TransactionUtils.getWaypointIndex(keyB))
                 .map((key) => ({[key]: waypoints[key]}))
-                .reduce((result, obj) => (obj ? _.assign(result, obj) : result), {})
-                .value(),
+                .reduce((result, obj) => (obj ? Object.assign(result, obj) : result), {}),
         [waypoints],
     );
     return (
@@ -78,24 +70,23 @@ function DistanceEReceipt({transaction}) {
                         <Text style={styles.eReceiptMerchant}>{transactionMerchant}</Text>
                     </View>
                     <View style={[styles.mb10, styles.gap5, styles.ph2]}>
-                        {_.map(sortedWaypoints, (waypoint, key) => {
+                        {Object.entries(sortedWaypoints).map(([key, waypoint]) => {
                             const index = TransactionUtils.getWaypointIndex(key);
-                            let descriptionKey = 'distance.waypointDescription.';
+                            let descriptionKey: TranslationPaths = 'distance.waypointDescription.stop';
                             if (index === 0) {
-                                descriptionKey += 'start';
-                            } else if (index === _.size(waypoints) - 1) {
-                                descriptionKey += 'finish';
-                            } else {
-                                descriptionKey += 'stop';
+                                descriptionKey = 'distance.waypointDescription.start';
+                            } else if (index === Object.keys(waypoints).length - 1) {
+                                descriptionKey = 'distance.waypointDescription.finish';
                             }
+
                             return (
                                 <View
                                     style={styles.gap1}
                                     key={key}
                                 >
                                     <Text style={styles.eReceiptWaypointTitle}>{translate(descriptionKey)}</Text>
-                                    {waypoint.name && <Text style={styles.eReceiptWaypointAddress}>{waypoint.name}</Text>}
-                                    {waypoint.address && <Text style={styles.eReceiptGuaranteed}>{waypoint.address}</Text>}
+                                    {!!waypoint?.name && <Text style={styles.eReceiptWaypointAddress}>{waypoint.name}</Text>}
+                                    {!!waypoint?.address && <Text style={styles.eReceiptGuaranteed}>{waypoint.address}</Text>}
                                 </View>
                             );
                         })}
@@ -108,7 +99,6 @@ function DistanceEReceipt({transaction}) {
                         <Icon
                             width={86}
                             height={19.25}
-                            fill={theme.textBrand}
                             src={Expensicons.ExpensifyWordmark}
                         />
 
@@ -120,7 +110,6 @@ function DistanceEReceipt({transaction}) {
     );
 }
 
-export default DistanceEReceipt;
 DistanceEReceipt.displayName = 'DistanceEReceipt';
-DistanceEReceipt.propTypes = propTypes;
-DistanceEReceipt.defaultProps = defaultProps;
+
+export default DistanceEReceipt;