diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.tsx similarity index 78% rename from src/components/ReportActionItem/MoneyReportView.js rename to src/components/ReportActionItem/MoneyReportView.tsx index c12659e94673..36daa037fd78 100644 --- a/src/components/ReportActionItem/MoneyReportView.js +++ b/src/components/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;