From 9624b3bc4aadc7595737265fbb4bce70df943e08 Mon Sep 17 00:00:00 2001 From: Mateusz Rajski Date: Thu, 7 Mar 2024 16:36:41 +0100 Subject: [PATCH 1/4] Migrate AddPaymentMethodMenu.js to typescriptgpsup --- ...MethodMenu.js => AddPaymentMethodMenu.tsx} | 91 +++++++------------ src/components/KYCWall/BaseKYCWall.tsx | 3 +- 2 files changed, 35 insertions(+), 59 deletions(-) rename src/components/{AddPaymentMethodMenu.js => AddPaymentMethodMenu.tsx} (51%) diff --git a/src/components/AddPaymentMethodMenu.js b/src/components/AddPaymentMethodMenu.tsx similarity index 51% rename from src/components/AddPaymentMethodMenu.js rename to src/components/AddPaymentMethodMenu.tsx index 803b7f2cdabe..6f91c7ea1ec3 100644 --- a/src/components/AddPaymentMethodMenu.js +++ b/src/components/AddPaymentMethodMenu.tsx @@ -1,78 +1,55 @@ -import lodashGet from 'lodash/get'; -import PropTypes from 'prop-types'; +import type {RefObject} from 'react'; import React from 'react'; +import type {View} from 'react-native'; +import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; -import _ from 'underscore'; +import type {ValueOf} from 'type-fest'; import useLocalize from '@hooks/useLocalize'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import * as ReportUtils from '@libs/ReportUtils'; -import iouReportPropTypes from '@pages/iouReportPropTypes'; +import type {AnchorPosition} from '@styles/index'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import type {Report, Session} from '@src/types/onyx'; +import type AnchorAlignment from '@src/types/utils/AnchorAlignment'; import * as Expensicons from './Icon/Expensicons'; import PopoverMenu from './PopoverMenu'; -import refPropTypes from './refPropTypes'; -const propTypes = { - /** Should the component be visible? */ - isVisible: PropTypes.bool.isRequired, - - /** Callback to execute when the component closes. */ - onClose: PropTypes.func.isRequired, - - /** Callback to execute when the payment method is selected. */ - onItemSelected: PropTypes.func.isRequired, - - /** The IOU/Expense report we are paying */ - iouReport: iouReportPropTypes, - - /** Anchor position for the AddPaymentMenu. */ - anchorPosition: PropTypes.shape({ - horizontal: PropTypes.number, - vertical: PropTypes.number, - }), - - /** Where the popover should be positioned relative to the anchor points. */ - anchorAlignment: PropTypes.shape({ - horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)), - vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)), - }), - - /** Popover anchor ref */ - anchorRef: refPropTypes, - - /** Session info for the currently logged in user. */ - session: PropTypes.shape({ - /** Currently logged in user accountID */ - accountID: PropTypes.number, - }), - - /** Whether the personal bank account option should be shown */ - shouldShowPersonalBankAccountOption: PropTypes.bool, +type AddPaymentMethodMenuOnyxProps = { + session: OnyxEntry; }; -const defaultProps = { - iouReport: {}, - anchorPosition: {}, - anchorAlignment: { - horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, - vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM, - }, - anchorRef: () => {}, - session: {}, - shouldShowPersonalBankAccountOption: false, +type AddPaymentMethodMenuProps = AddPaymentMethodMenuOnyxProps & { + isVisible: boolean; + onClose: () => void; + onItemSelected: (paymentMethod: ValueOf) => void; + iouReport?: OnyxEntry; + anchorPosition: AnchorPosition; + anchorAlignment?: AnchorAlignment; + anchorRef: RefObject; + shouldShowPersonalBankAccountOption?: boolean; }; -function AddPaymentMethodMenu({isVisible, onClose, anchorPosition, anchorAlignment, anchorRef, iouReport, onItemSelected, session, shouldShowPersonalBankAccountOption}) { +function AddPaymentMethodMenu({ + isVisible, + onClose, + anchorPosition, + anchorAlignment, + anchorRef, + iouReport, + onItemSelected, + session, + shouldShowPersonalBankAccountOption = false, +}: AddPaymentMethodMenuProps) { const {translate} = useLocalize(); // Users can choose to pay with business bank account in case of Expense reports or in case of P2P IOU report // which then starts a bottom up flow and creates a Collect workspace where the payer is an admin and payee is an employee. + const isIOUReport = ReportUtils.isIOUReport(iouReport ?? {}); const canUseBusinessBankAccount = - ReportUtils.isExpenseReport(iouReport) || - (ReportUtils.isIOUReport(iouReport) && !ReportActionsUtils.hasRequestFromCurrentAccount(lodashGet(iouReport, 'reportID', 0), lodashGet(session, 'accountID', 0))); + ReportUtils.isExpenseReport(iouReport ?? {}) || (isIOUReport && !ReportActionsUtils.hasRequestFromCurrentAccount(iouReport?.reportID ?? '', session?.accountID ?? 0)); - const canUsePersonalBankAccount = shouldShowPersonalBankAccountOption || ReportUtils.isIOUReport(iouReport); + const canUsePersonalBankAccount = shouldShowPersonalBankAccountOption || isIOUReport; return ( ({ session: { key: ONYXKEYS.SESSION, }, diff --git a/src/components/KYCWall/BaseKYCWall.tsx b/src/components/KYCWall/BaseKYCWall.tsx index 33dfd2b920a9..e09e4ee7910a 100644 --- a/src/components/KYCWall/BaseKYCWall.tsx +++ b/src/components/KYCWall/BaseKYCWall.tsx @@ -18,6 +18,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type {BankAccountList, FundList, ReimbursementAccount, UserWallet, WalletTerms} from '@src/types/onyx'; import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; +import {isEmptyObject} from '@src/types/utils/EmptyObject'; import viewRef from '@src/types/utils/viewRef'; import type {AnchorPosition, DomRect, KYCWallProps, PaymentMethod} from './types'; @@ -246,7 +247,7 @@ function KYCWall({ <> setShouldShowAddPaymentMenu(false)} anchorRef={anchorRef} anchorPosition={{ From 8938eb11554847cd5cb24bb83706501bddc1e701 Mon Sep 17 00:00:00 2001 From: war-in Date: Tue, 19 Mar 2024 09:25:18 +0100 Subject: [PATCH 2/4] add jsdoc comments and default values --- src/components/AddPaymentMethodMenu.tsx | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/src/components/AddPaymentMethodMenu.tsx b/src/components/AddPaymentMethodMenu.tsx index 6f91c7ea1ec3..8fce494cea6c 100644 --- a/src/components/AddPaymentMethodMenu.tsx +++ b/src/components/AddPaymentMethodMenu.tsx @@ -7,26 +7,42 @@ import type {ValueOf} from 'type-fest'; import useLocalize from '@hooks/useLocalize'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import * as ReportUtils from '@libs/ReportUtils'; -import type {AnchorPosition} from '@styles/index'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import type {AnchorPosition} from '@src/styles'; import type {Report, Session} from '@src/types/onyx'; import type AnchorAlignment from '@src/types/utils/AnchorAlignment'; import * as Expensicons from './Icon/Expensicons'; import PopoverMenu from './PopoverMenu'; type AddPaymentMethodMenuOnyxProps = { + /** Session info for the currently logged-in user. */ session: OnyxEntry; }; type AddPaymentMethodMenuProps = AddPaymentMethodMenuOnyxProps & { + /** Should the component be visible? */ isVisible: boolean; + + /** Callback to execute when the component closes. */ onClose: () => void; + + /** Callback to execute when the payment method is selected. */ onItemSelected: (paymentMethod: ValueOf) => void; + + /** The IOU/Expense report we are paying */ iouReport?: OnyxEntry; + + /** Anchor position for the AddPaymentMenu. */ anchorPosition: AnchorPosition; + + /** Where the popover should be positioned relative to the anchor points. */ anchorAlignment?: AnchorAlignment; + + /** Popover anchor ref */ anchorRef: RefObject; + + /** Whether the personal bank account option should be shown */ shouldShowPersonalBankAccountOption?: boolean; }; @@ -34,7 +50,10 @@ function AddPaymentMethodMenu({ isVisible, onClose, anchorPosition, - anchorAlignment, + anchorAlignment = { + horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, + vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM, + }, anchorRef, iouReport, onItemSelected, From b2b840c2d576bd7e584f0544ac724ac8b699984c Mon Sep 17 00:00:00 2001 From: war-in Date: Tue, 19 Mar 2024 11:56:57 +0100 Subject: [PATCH 3/4] Rerun From 6d06a30801b063ff4b7dddb8e77b8196d8761b6e Mon Sep 17 00:00:00 2001 From: war-in Date: Tue, 19 Mar 2024 13:36:48 +0100 Subject: [PATCH 4/4] apply suggestions --- src/components/AddPaymentMethodMenu.tsx | 7 ++++--- src/components/KYCWall/BaseKYCWall.tsx | 3 +-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/AddPaymentMethodMenu.tsx b/src/components/AddPaymentMethodMenu.tsx index 8fce494cea6c..ac9657694500 100644 --- a/src/components/AddPaymentMethodMenu.tsx +++ b/src/components/AddPaymentMethodMenu.tsx @@ -3,7 +3,6 @@ import React from 'react'; import type {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; -import type {ValueOf} from 'type-fest'; import useLocalize from '@hooks/useLocalize'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import * as ReportUtils from '@libs/ReportUtils'; @@ -12,7 +11,9 @@ import ONYXKEYS from '@src/ONYXKEYS'; import type {AnchorPosition} from '@src/styles'; import type {Report, Session} from '@src/types/onyx'; import type AnchorAlignment from '@src/types/utils/AnchorAlignment'; +import type {EmptyObject} from '@src/types/utils/EmptyObject'; import * as Expensicons from './Icon/Expensicons'; +import type {PaymentMethod} from './KYCWall/types'; import PopoverMenu from './PopoverMenu'; type AddPaymentMethodMenuOnyxProps = { @@ -28,10 +29,10 @@ type AddPaymentMethodMenuProps = AddPaymentMethodMenuOnyxProps & { onClose: () => void; /** Callback to execute when the payment method is selected. */ - onItemSelected: (paymentMethod: ValueOf) => void; + onItemSelected: (paymentMethod: PaymentMethod) => void; /** The IOU/Expense report we are paying */ - iouReport?: OnyxEntry; + iouReport?: OnyxEntry | EmptyObject; /** Anchor position for the AddPaymentMenu. */ anchorPosition: AnchorPosition; diff --git a/src/components/KYCWall/BaseKYCWall.tsx b/src/components/KYCWall/BaseKYCWall.tsx index c97e66567d23..7d2f99f49593 100644 --- a/src/components/KYCWall/BaseKYCWall.tsx +++ b/src/components/KYCWall/BaseKYCWall.tsx @@ -18,7 +18,6 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type {BankAccountList, FundList, ReimbursementAccount, UserWallet, WalletTerms} from '@src/types/onyx'; import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; -import {isEmptyObject} from '@src/types/utils/EmptyObject'; import viewRef from '@src/types/utils/viewRef'; import type {AnchorPosition, DomRect, KYCWallProps, PaymentMethod} from './types'; @@ -247,7 +246,7 @@ function KYCWall({ <> setShouldShowAddPaymentMenu(false)} anchorRef={anchorRef} anchorPosition={{