[TS Migration] Migrate EReceiptThumbnail.js component to TypeScript

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

@@ -1,31 +1,29 @@
-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 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 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,
-
-    /* Onyx Props */
-    transaction: transactionPropTypes,
+type EReceiptThumbnailOnyxProps = {
+    transaction: OnyxEntry<Transaction>;
 };
 
-const defaultProps = {
-    transaction: {},
+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
+    transactionID: string;
 };
 
 const backgroundImages = {
@@ -37,30 +35,36 @@ 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(() => backgroundImages[StyleUtils.getEReceiptColorCode(transaction)], [StyleUtils, transaction]);
+
+    // Get receipt colorway, or default to Yellow.
+    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 +76,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,10 +116,8 @@ 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}`,
     },

src/styles/utils/index.ts

@@ -1,5 +1,6 @@
 import {CSSProperties} from 'react';
 import {Animated, DimensionValue, ImageStyle, PressableStateCallbackType, StyleProp, TextStyle, ViewStyle} from 'react-native';
+import {OnyxEntry} from 'react-native-onyx';
 import {EdgeInsets} from 'react-native-safe-area-context';
 import {ValueOf} from 'type-fest';
 import * as Browser from '@libs/Browser';
@@ -298,9 +299,9 @@ function getDefaultWorkspaceAvatarColor(workspaceName: string): ViewStyle {
 /**
  * Helper method to return eReceipt color code
  */
-function getEReceiptColorCode(transaction: Transaction): EReceiptColorName {
+function getEReceiptColorCode(transaction: OnyxEntry<Transaction>): EReceiptColorName {
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-    const transactionID = transaction.parentTransactionID || transaction.transactionID || '';
+    const transactionID = transaction?.parentTransactionID || transaction?.transactionID || '';
 
     const colorHash = UserUtils.hashText(transactionID.trim(), eReceiptColors.length);