[TS Migration] Migrate EReceiptThumbnail.js component to TypeScript

src/components/EReceiptThumbnail.js → src/components/EReceiptThumbnail.tsx

@@ -1,31 +1,28 @@
-import PropTypes from 'prop-types';
 import React, {useMemo, useState} from 'react';
-import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
+import {LayoutChangeEvent, View} from 'react-native';
+import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import * as ReportUtils from '@libs/ReportUtils';
 import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import {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 transactionPropTypes from './transactionPropTypes';
-
-const propTypes = {
-    /* TransactionID of the transaction this EReceipt corresponds to */
-    // eslint-disable-next-line react/no-unused-prop-types
-    transactionID: PropTypes.string.isRequired,
 
+type EReceiptThumbnailOnyxProps = {
     /* Onyx Props */
-    transaction: transactionPropTypes,
+    transaction: OnyxEntry<Transaction>;
 };
 
-const defaultProps = {
-    transaction: {},
+type EReceiptThumbnailProps = EReceiptThumbnailOnyxProps & {
+    /* TransactionID of the transaction this EReceipt corresponds to */
+    // eslint-disable-next-line react/no-unused-prop-types
+    transactionID: string;
 };
 
 const backgroundImages = {
@@ -37,30 +34,47 @@ const backgroundImages = {
     [CONST.ERECEIPT_COLORS.PINK]: eReceiptBGs.EReceiptBG_Pink,
 };
 
-function EReceiptThumbnail({transaction}) {
+function EReceiptThumbnail({transaction}: EReceiptThumbnailProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    // Get receipt colorway, or default to Yellow.
-    const {backgroundColor: primaryColor, color: secondaryColor} = StyleUtils.getEReceiptColorStyles(StyleUtils.getEReceiptColorCode(transaction));
 
     const [containerWidth, setContainerWidth] = useState(0);
     const [containerHeight, setContainerHeight] = useState(0);
 
-    const onContainerLayout = (event) => {
+    const backgroundImage = useMemo(() => {
+        if (!transaction) {
+            return;
+        }
+
+        return backgroundImages[StyleUtils.getEReceiptColorCode(transaction)];
+    }, [StyleUtils, transaction]);
+
+    if (!transaction) {
+        return;
+    }
+
+    // Get receipt colorway, or default to Yellow.
+    // const {backgroundColor: primaryColor, color: secondaryColor} = StyleUtils.getEReceiptColorStyles(StyleUtils.getEReceiptColorCode(transaction));
+    const colorStyles = StyleUtils.getEReceiptColorStyles(StyleUtils.getEReceiptColorCode(transaction));
+    const primaryColor = colorStyles?.backgroundColor;
+    const secondaryColor = colorStyles?.color;
+
+    const onContainerLayout = (event: LayoutChangeEvent) => {
         const {width, height} = event.nativeEvent.layout;
         setContainerWidth(width);
         setContainerHeight(height);
     };
 
-    const {mccGroup: transactionMCCGroup} = ReportUtils.getTransactionDetails(transaction);
-    const MCCIcon = MCCIcons[`${transactionMCCGroup}`];
+    const transactionDetails = ReportUtils.getTransactionDetails(transaction);
+    const transactionMCCGroup = transactionDetails?.mccGroup;
+    const MCCIcon = transactionMCCGroup ? MCCIcons[`${transactionMCCGroup}`] : undefined;
 
     const isSmall = containerWidth && containerWidth < variables.eReceiptThumbnailSmallBreakpoint;
     const isMedium = containerWidth && containerWidth < variables.eReceiptThumbnailMediumBreakpoint;
 
-    let receiptIconWidth = variables.eReceiptIconWidth;
-    let receiptIconHeight = variables.eReceiptIconHeight;
-    let receiptMCCSize = variables.eReceiptMCCHeightWidth;
+    let receiptIconWidth: number = variables.eReceiptIconWidth;
+    let receiptIconHeight: number = variables.eReceiptIconHeight;
+    let receiptMCCSize: number = variables.eReceiptMCCHeightWidth;
 
     if (isSmall) {
         receiptIconWidth = variables.eReceiptIconWidthSmall;
@@ -72,13 +86,11 @@ function EReceiptThumbnail({transaction}) {
         receiptMCCSize = variables.eReceiptMCCHeightWidthMedium;
     }
 
-    const backgroundImage = useMemo(() => backgroundImages[StyleUtils.getEReceiptColorCode(transaction)], [StyleUtils, transaction]);
-
     return (
         <View
             style={[
                 styles.flex1,
-                StyleUtils.getBackgroundColorStyle(primaryColor),
+                primaryColor ? StyleUtils.getBackgroundColorStyle(primaryColor) : {},
                 styles.overflowHidden,
                 styles.alignItemsCenter,
                 containerHeight && containerHeight < variables.eReceiptThumnailCenterReceiptBreakpoint ? styles.justifyContentCenter : {},
@@ -114,11 +126,10 @@ function EReceiptThumbnail({transaction}) {
 }
 
 EReceiptThumbnail.displayName = 'EReceiptThumbnail';
-EReceiptThumbnail.propTypes = propTypes;
-EReceiptThumbnail.defaultProps = defaultProps;
 
-export default withOnyx({
+export default withOnyx<EReceiptThumbnailProps, EReceiptThumbnailOnyxProps>({
     transaction: {
         key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
+        selector: (transaction: OnyxEntry<Transaction>) => transaction,
     },
 })(EReceiptThumbnail);