From 674e24da966b5557839c6ded44618b86a6594491 Mon Sep 17 00:00:00 2001 From: Abhas Kumar Date: Tue, 26 Dec 2023 02:33:50 +0530 Subject: [PATCH 01/20] rename file Signed-off-by: Abhas Kumar --- ...yReportHeader.js => MoneyReportHeader.tsx} | 99 +++++++------------ 1 file changed, 35 insertions(+), 64 deletions(-) rename src/components/{MoneyReportHeader.js => MoneyReportHeader.tsx} (81%) diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.tsx similarity index 81% rename from src/components/MoneyReportHeader.js rename to src/components/MoneyReportHeader.tsx index e72f7d3576f5..e78eb7e6389e 100644 --- a/src/components/MoneyReportHeader.js +++ b/src/components/MoneyReportHeader.tsx @@ -1,91 +1,67 @@ -import lodashGet from 'lodash/get'; -import PropTypes from 'prop-types'; import React, {useCallback, useMemo, useState} from 'react'; import {View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; +import {OnyxEntry, withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import GoogleMeetIcon from '@assets/images/google-meet.svg'; import ZoomIcon from '@assets/images/zoom-icon.svg'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; -import compose from '@libs/compose'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import * as HeaderUtils from '@libs/HeaderUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as ReportUtils from '@libs/ReportUtils'; -import iouReportPropTypes from '@pages/iouReportPropTypes'; -import nextStepPropTypes from '@pages/nextStepPropTypes'; -import reportPropTypes from '@pages/reportPropTypes'; import * as IOU from '@userActions/IOU'; import * as Link from '@userActions/Link'; -import * as Session from '@userActions/Session'; +import * as UserSession from '@userActions/Session'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; +import type {PersonalDetails, Policy, Report, ReportNextStep, Session} from '@src/types/onyx'; import Button from './Button'; import ConfirmModal from './ConfirmModal'; import HeaderWithBackButton from './HeaderWithBackButton'; import * as Expensicons from './Icon/Expensicons'; import MoneyReportHeaderStatusBar from './MoneyReportHeaderStatusBar'; -import participantPropTypes from './participantPropTypes'; import SettlementButton from './SettlementButton'; -import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; -const propTypes = { +type MoneyReportHeaderOnyxProps = { + chatReport: OnyxEntry; + nextStep: OnyxEntry; + session: OnyxEntry; +} + +type MoneyReportHeaderProps = MoneyReportHeaderOnyxProps & { /** The report currently being looked at */ - report: iouReportPropTypes.isRequired, + report: Report; /** The policy tied to the money request report */ - policy: PropTypes.shape({ - /** Name of the policy */ - name: PropTypes.string, - - /** Type of the policy */ - type: PropTypes.string, - - /** The role of the current user in the policy */ - role: PropTypes.string, - }), + policy: Policy; /** The chat report this report is linked to */ - chatReport: reportPropTypes, + chatReport: Report; /** The next step for the report */ - nextStep: nextStepPropTypes, + nextStep: ReportNextStep; /** Personal details so we can get the ones for the report participants */ - personalDetails: PropTypes.objectOf(participantPropTypes).isRequired, + personalDetails: PersonalDetails - /** Session info for the currently logged in user. */ - session: PropTypes.shape({ - /** Currently logged in user email */ - email: PropTypes.string, - }), - - ...windowDimensionsPropTypes, + /** UserSession info for the currently logged in user. */ + session: Session; }; -const defaultProps = { - chatReport: {}, - nextStep: {}, - session: { - email: null, - }, - policy: {}, -}; - -function MoneyReportHeader({session, personalDetails, policy, chatReport, nextStep, report: moneyRequestReport, isSmallScreenWidth}) { - const {windowWidth} = useWindowDimensions(); +function MoneyReportHeader({session, personalDetails, policy, chatReport, nextStep, report: moneyRequestReport}: MoneyReportHeaderProps) { + const {windowWidth, isSmallScreenWidth} = useWindowDimensions(); const styles = useThemeStyles(); const {translate} = useLocalize(); const reimbursableTotal = ReportUtils.getMoneyRequestReimbursableTotal(moneyRequestReport); const isApproved = ReportUtils.isReportApproved(moneyRequestReport); const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID); - const policyType = lodashGet(policy, 'type'); - const isPolicyAdmin = policyType !== CONST.POLICY.TYPE.PERSONAL && lodashGet(policy, 'role') === CONST.POLICY.ROLE.ADMIN; + const policyType = policy?.type; + const isPolicyAdmin = policyType !== CONST.POLICY.TYPE.PERSONAL && policy?.role === CONST.POLICY.ROLE.ADMIN; const isGroupPolicy = _.contains([CONST.POLICY.TYPE.CORPORATE, CONST.POLICY.TYPE.TEAM], policyType); - const isManager = ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(session, 'accountID', null) === moneyRequestReport.managerID; + const isManager = ReportUtils.isMoneyRequestReport(moneyRequestReport) && session?.accountID === moneyRequestReport.managerID; const isPayer = isGroupPolicy ? // In a group policy, the admin approver can pay the report directly by skipping the approval step isPolicyAdmin && (isApproved || isManager) @@ -129,14 +105,14 @@ function MoneyReportHeader({session, personalDetails, policy, chatReport, nextSt threeDotsMenuItems.push({ icon: ZoomIcon, text: translate('videoChatButtonAndMenu.zoom'), - onSelected: Session.checkIfActionIsAllowed(() => { + onSelected: UserSession.checkIfActionIsAllowed(() => { Link.openExternalLink(CONST.NEW_ZOOM_MEETING_URL); }), }); threeDotsMenuItems.push({ icon: GoogleMeetIcon, text: translate('videoChatButtonAndMenu.googleMeet'), - onSelected: Session.checkIfActionIsAllowed(() => { + onSelected: UserSession.checkIfActionIsAllowed(() => { Link.openExternalLink(CONST.NEW_GOOGLE_MEET_MEETING_URL); }), }); @@ -237,20 +213,15 @@ function MoneyReportHeader({session, personalDetails, policy, chatReport, nextSt } MoneyReportHeader.displayName = 'MoneyReportHeader'; -MoneyReportHeader.propTypes = propTypes; -MoneyReportHeader.defaultProps = defaultProps; -export default compose( - withWindowDimensions, - withOnyx({ - chatReport: { - key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report.chatReportID}`, - }, - nextStep: { - key: ({report}) => `${ONYXKEYS.COLLECTION.NEXT_STEP}${report.reportID}`, - }, - session: { - key: ONYXKEYS.SESSION, - }, - }), -)(MoneyReportHeader); +export default withOnyx({ + chatReport: { + key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report.chatReportID}`, + }, + nextStep: { + key: ({report}) => `${ONYXKEYS.COLLECTION.NEXT_STEP}${report.reportID}`, + }, + session: { + key: ONYXKEYS.SESSION, + }, +})(MoneyReportHeader); From 883eaaea390c217f2a14dd686ad6bc3f65d2429e Mon Sep 17 00:00:00 2001 From: Abhas Kumar Date: Tue, 26 Dec 2023 02:52:56 +0530 Subject: [PATCH 02/20] add types, remove compose, refactor HOC --- src/components/MoneyReportHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index e78eb7e6389e..9302227f8bd6 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -224,4 +224,4 @@ export default withOnyx({ session: { key: ONYXKEYS.SESSION, }, -})(MoneyReportHeader); +})(MoneyReportHeader); \ No newline at end of file From b5f1a1705cbec55d0b03c71228d7a102feff838d Mon Sep 17 00:00:00 2001 From: Abhas Kumar Date: Tue, 26 Dec 2023 03:05:09 +0530 Subject: [PATCH 03/20] refactor types for intersection --- src/components/MoneyReportHeader.tsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index 9302227f8bd6..b50ac1516400 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -26,8 +26,13 @@ import MoneyReportHeaderStatusBar from './MoneyReportHeaderStatusBar'; import SettlementButton from './SettlementButton'; type MoneyReportHeaderOnyxProps = { + /** The chat report this report is linked to */ chatReport: OnyxEntry; + + /** The next step for the report */ nextStep: OnyxEntry; + + /** UserSession info for the currently logged in user. */ session: OnyxEntry; } @@ -38,17 +43,8 @@ type MoneyReportHeaderProps = MoneyReportHeaderOnyxProps & { /** The policy tied to the money request report */ policy: Policy; - /** The chat report this report is linked to */ - chatReport: Report; - - /** The next step for the report */ - nextStep: ReportNextStep; - /** Personal details so we can get the ones for the report participants */ personalDetails: PersonalDetails - - /** UserSession info for the currently logged in user. */ - session: Session; }; function MoneyReportHeader({session, personalDetails, policy, chatReport, nextStep, report: moneyRequestReport}: MoneyReportHeaderProps) { From 89ed621c9c1ece699f0f1c6b4ebe2549b189b41c Mon Sep 17 00:00:00 2001 From: Abhas Kumar Date: Tue, 26 Dec 2023 03:47:15 +0530 Subject: [PATCH 04/20] improve optional and nullish chaining --- src/components/MoneyReportHeader.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index b50ac1516400..0c60b033bca7 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -87,7 +87,7 @@ function MoneyReportHeader({session, personalDetails, policy, chatReport, nextSt const shouldShowAnyButton = shouldShowSettlementButton || shouldShowApproveButton || shouldShowSubmitButton || shouldShowNextSteps; const bankAccountRoute = ReportUtils.getBankAccountRoute(chatReport); const formattedAmount = CurrencyUtils.convertToDisplayString(reimbursableTotal, moneyRequestReport.currency); - const isMoreContentShown = shouldShowNextSteps || (shouldShowAnyButton && isSmallScreenWidth); + const isMoreContentShown = shouldShowNextSteps ?? (shouldShowAnyButton && isSmallScreenWidth); const threeDotsMenuItems = [HeaderUtils.getPinMenuItem(moneyRequestReport)]; if (isPayer && isSettled) { @@ -136,7 +136,7 @@ function MoneyReportHeader({session, personalDetails, policy, chatReport, nextSt IOU.payMoneyRequest(paymentType, chatReport, moneyRequestReport)} enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS} @@ -152,7 +152,7 @@ function MoneyReportHeader({session, personalDetails, policy, chatReport, nextSt