Merge pull request Expensify#33255 from neonbhai/ts-migration-MoneyRe…

…portView [TS migration] Migrate 'ReportActionItemMoneyReportView.js' to Typescript
c3024 · Dec 24, 2023 · 7b836cf · 7b836cf
2 parents b74be72 + fab5110
commit 7b836cf
Showing 1 changed file with 26 additions and 24 deletions.
diff --git a/...nents/ReportActionItem/MoneyReportView.js → ...ents/ReportActionItem/MoneyReportView.tsx b/...nents/ReportActionItem/MoneyReportView.js → ...ents/ReportActionItem/MoneyReportView.tsx
@@ -1,51 +1,54 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import {View} from 'react-native';
+import {StyleProp, TextStyle, View} from 'react-native';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import SpacerView from '@components/SpacerView';
 import Text from '@components/Text';
-import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import AnimatedEmptyStateBackground from '@pages/home/report/AnimatedEmptyStateBackground';
-import reportPropTypes from '@pages/reportPropTypes';
 import variables from '@styles/variables';
+import type {Report} from '@src/types/onyx';
 
-const propTypes = {
+type MoneyReportViewProps = {
     /** The report currently being looked at */
-    report: reportPropTypes.isRequired,
+    report: Report;
 
     /** Whether we should display the horizontal rule below the component */
-    shouldShowHorizontalRule: PropTypes.bool.isRequired,
-
-    ...windowDimensionsPropTypes,
+    shouldShowHorizontalRule: boolean;
 };
 
-function MoneyReportView(props) {
+function MoneyReportView({report, shouldShowHorizontalRule}: MoneyReportViewProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
-    const isSettled = ReportUtils.isSettled(props.report.reportID);
+    const {isSmallScreenWidth} = useWindowDimensions();
+    const isSettled = ReportUtils.isSettled(report.reportID);
 
-    const {totalDisplaySpend, nonReimbursableSpend, reimbursableSpend} = ReportUtils.getMoneyRequestSpendBreakdown(props.report);
+    const {totalDisplaySpend, nonReimbursableSpend, reimbursableSpend} = ReportUtils.getMoneyRequestSpendBreakdown(report);
 
     const shouldShowBreakdown = nonReimbursableSpend && reimbursableSpend;
-    const formattedTotalAmount = CurrencyUtils.convertToDisplayString(totalDisplaySpend, props.report.currency, ReportUtils.hasOnlyDistanceRequestTransactions(props.report.reportID));
-    const formattedOutOfPocketAmount = CurrencyUtils.convertToDisplayString(reimbursableSpend, props.report.currency);
-    const formattedCompanySpendAmount = CurrencyUtils.convertToDisplayString(nonReimbursableSpend, props.report.currency);
+    const formattedTotalAmount = CurrencyUtils.convertToDisplayString(totalDisplaySpend, report.currency, ReportUtils.hasOnlyDistanceRequestTransactions(report.reportID));
+    const formattedOutOfPocketAmount = CurrencyUtils.convertToDisplayString(reimbursableSpend, report.currency);
+    const formattedCompanySpendAmount = CurrencyUtils.convertToDisplayString(nonReimbursableSpend, report.currency);
 
-    const subAmountTextStyles = [styles.taskTitleMenuItem, styles.alignSelfCenter, StyleUtils.getFontSizeStyle(variables.fontSizeh1), StyleUtils.getColorStyle(theme.textSupporting)];
+    const subAmountTextStyles: StyleProp<TextStyle> = [
+        styles.taskTitleMenuItem,
+        styles.alignSelfCenter,
+        StyleUtils.getFontSizeStyle(variables.fontSizeh1),
+        StyleUtils.getColorStyle(theme.textSupporting),
+    ];
 
     return (
-        <View style={[StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth, true)]}>
+        <View style={[StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth, true)]}>
             <AnimatedEmptyStateBackground />
-            <View style={[StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth, true)]}>
+            <View style={[StyleUtils.getReportWelcomeTopMarginStyle(isSmallScreenWidth, true)]}>
                 <View style={[styles.flexRow, styles.pointerEventsNone, styles.containerWithSpaceBetween, styles.ph5, styles.pv2]}>
                     <View style={[styles.flex1, styles.justifyContentCenter]}>
                         <Text
@@ -72,7 +75,7 @@ function MoneyReportView(props) {
                         </Text>
                     </View>
                 </View>
-                {shouldShowBreakdown ? (
+                {Boolean(shouldShowBreakdown) && (
                     <>
                         <View style={[styles.flexRow, styles.pointerEventsNone, styles.containerWithSpaceBetween, styles.ph5, styles.pv1]}>
                             <View style={[styles.flex1, styles.justifyContentCenter]}>
@@ -111,17 +114,16 @@ function MoneyReportView(props) {
                             </View>
                         </View>
                     </>
-                ) : undefined}
+                )}
                 <SpacerView
-                    shouldShow={props.shouldShowHorizontalRule}
-                    style={[props.shouldShowHorizontalRule ? styles.reportHorizontalRule : {}]}
+                    shouldShow={shouldShowHorizontalRule}
+                    style={[shouldShowHorizontalRule && styles.reportHorizontalRule]}
                 />
             </View>
         </View>
     );
 }
 
-MoneyReportView.propTypes = propTypes;
 MoneyReportView.displayName = 'MoneyReportView';
 
-export default withWindowDimensions(MoneyReportView);
+export default MoneyReportView;