diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index 2718084b93d0..71864582812f 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -333,7 +333,12 @@ type SplitDetailsNavigatorParamList = { [SCREENS.SPLIT_DETAILS.ROOT]: { reportActionID: string; }; - [SCREENS.SPLIT_DETAILS.EDIT_REQUEST]: undefined; + [SCREENS.SPLIT_DETAILS.EDIT_REQUEST]: { + field: string; + reportID: string; + reportActionID: string; + currency: string; + }; [SCREENS.SPLIT_DETAILS.EDIT_CURRENCY]: undefined; }; diff --git a/src/libs/TransactionUtils.ts b/src/libs/TransactionUtils.ts index 454b85cc3152..504b2ac27965 100644 --- a/src/libs/TransactionUtils.ts +++ b/src/libs/TransactionUtils.ts @@ -601,3 +601,5 @@ export { getRecentTransactions, hasViolation, }; + +export type {TransactionChanges}; diff --git a/src/pages/EditRequestMerchantPage.js b/src/pages/EditRequestMerchantPage.js index 420bcbc35630..33c04df39e3e 100644 --- a/src/pages/EditRequestMerchantPage.js +++ b/src/pages/EditRequestMerchantPage.js @@ -21,7 +21,11 @@ const propTypes = { onSubmit: PropTypes.func.isRequired, /** Boolean to enable validation */ - isPolicyExpenseChat: PropTypes.bool.isRequired, + isPolicyExpenseChat: PropTypes.bool, +}; + +const defaultProps = { + isPolicyExpenseChat: false, }; function EditRequestMerchantPage({defaultMerchant, onSubmit, isPolicyExpenseChat}) { @@ -75,6 +79,7 @@ function EditRequestMerchantPage({defaultMerchant, onSubmit, isPolicyExpenseChat } EditRequestMerchantPage.propTypes = propTypes; +EditRequestMerchantPage.defaultProps = defaultProps; EditRequestMerchantPage.displayName = 'EditRequestMerchantPage'; export default EditRequestMerchantPage; diff --git a/src/pages/EditRequestTagPage.js b/src/pages/EditRequestTagPage.js index 8ecc4a953065..b2f576c499a6 100644 --- a/src/pages/EditRequestTagPage.js +++ b/src/pages/EditRequestTagPage.js @@ -16,12 +16,16 @@ const propTypes = { policyID: PropTypes.string.isRequired, /** The tag name to which the default tag belongs to */ - tagName: PropTypes.string.isRequired, + tagName: PropTypes.string, /** Callback to fire when the Save button is pressed */ onSubmit: PropTypes.func.isRequired, }; +const defaultProps = { + tagName: '', +}; + function EditRequestTagPage({defaultTag, policyID, tagName, onSubmit}) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -58,6 +62,7 @@ function EditRequestTagPage({defaultTag, policyID, tagName, onSubmit}) { } EditRequestTagPage.propTypes = propTypes; +EditRequestTagPage.defaultProps = defaultProps; EditRequestTagPage.displayName = 'EditRequestTagPage'; export default EditRequestTagPage; diff --git a/src/pages/EditSplitBillPage.js b/src/pages/EditSplitBillPage.tsx similarity index 50% rename from src/pages/EditSplitBillPage.js rename to src/pages/EditSplitBillPage.tsx index 543ef664568f..c859df7c407a 100644 --- a/src/pages/EditSplitBillPage.js +++ b/src/pages/EditSplitBillPage.tsx @@ -1,57 +1,45 @@ -import lodashGet from 'lodash/get'; -import PropTypes from 'prop-types'; +import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; +import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; -import transactionPropTypes from '@components/transactionPropTypes'; -import compose from '@libs/compose'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {SplitDetailsNavigatorParamList} from '@libs/Navigation/types'; import * as ReportUtils from '@libs/ReportUtils'; +import type {TransactionChanges} from '@libs/TransactionUtils'; import * as IOU from '@userActions/IOU'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; +import type SCREENS from '@src/SCREENS'; +import type {Report, ReportActions, Transaction} from '@src/types/onyx'; +import type {OriginalMessageIOU} from '@src/types/onyx/OriginalMessage'; import EditRequestAmountPage from './EditRequestAmountPage'; import EditRequestCategoryPage from './EditRequestCategoryPage'; import EditRequestMerchantPage from './EditRequestMerchantPage'; import EditRequestTagPage from './EditRequestTagPage'; -import reportPropTypes from './reportPropTypes'; -const propTypes = { - /** Route from navigation */ - route: PropTypes.shape({ - /** Params from the route */ - params: PropTypes.shape({ - /** The transaction field we are editing */ - field: PropTypes.string, - - /** The chat reportID of the split */ - reportID: PropTypes.string, +type EditSplitBillOnyxProps = { + /** The report currently being used */ + report: OnyxEntry; - /** reportActionID of the split action */ - reportActionID: PropTypes.string, - }), - }).isRequired, + /** The report action for currently used report */ + // Used in withOnyx + // eslint-disable-next-line react/no-unused-prop-types + reportActions: OnyxEntry; /** The current transaction */ - transaction: transactionPropTypes.isRequired, + transaction: OnyxEntry; /** The draft transaction that holds data to be persisted on the current transaction */ - draftTransaction: transactionPropTypes, - - /** The report currently being used */ - report: reportPropTypes.isRequired, + draftTransaction: OnyxEntry; }; -const defaultProps = { - draftTransaction: undefined, -}; +type EditSplitBillProps = EditSplitBillOnyxProps & StackScreenProps; -function EditSplitBillPage({route, transaction, draftTransaction, report}) { - const fieldToEdit = lodashGet(route, ['params', 'field'], ''); - const reportID = lodashGet(route, ['params', 'reportID'], ''); - const reportActionID = lodashGet(route, ['params', 'reportActionID'], ''); +function EditSplitBillPage({route, transaction, draftTransaction, report}: EditSplitBillProps) { + const {field: fieldToEdit, reportID, reportActionID, currency} = route.params; const { amount: transactionAmount, @@ -59,26 +47,25 @@ function EditSplitBillPage({route, transaction, draftTransaction, report}) { merchant: transactionMerchant, category: transactionCategory, tag: transactionTag, - } = draftTransaction ? ReportUtils.getTransactionDetails(draftTransaction) : ReportUtils.getTransactionDetails(transaction); - - const defaultCurrency = lodashGet(route, 'params.currency', '') || transactionCurrency; + } = ReportUtils.getTransactionDetails(draftTransaction ?? transaction) ?? {}; + const defaultCurrency = currency ?? transactionCurrency; function navigateBackToSplitDetails() { Navigation.navigate(ROUTES.SPLIT_BILL_DETAILS.getRoute(reportID, reportActionID)); } - const setDraftSplitTransaction = (transactionChanges) => { - IOU.setDraftSplitTransaction(transaction.transactionID, transactionChanges); + const setDraftSplitTransaction = (transactionChanges: TransactionChanges) => { + if (transaction) { + IOU.setDraftSplitTransaction(transaction.transactionID, transactionChanges); + } navigateBackToSplitDetails(); }; if (fieldToEdit === CONST.EDIT_REQUEST_FIELD.AMOUNT) { return ( { const amount = CurrencyUtils.convertToBackendAmount(Number.parseFloat(transactionChanges.amount)); @@ -98,7 +85,7 @@ function EditSplitBillPage({route, transaction, draftTransaction, report}) { if (fieldToEdit === CONST.EDIT_REQUEST_FIELD.MERCHANT) { return ( { setDraftSplitTransaction({merchant: transactionChanges.merchant.trim()}); }} @@ -109,8 +96,8 @@ function EditSplitBillPage({route, transaction, draftTransaction, report}) { if (fieldToEdit === CONST.EDIT_REQUEST_FIELD.CATEGORY) { return ( { setDraftSplitTransaction({category: transactionChanges.category.trim()}); }} @@ -121,8 +108,8 @@ function EditSplitBillPage({route, transaction, draftTransaction, report}) { if (fieldToEdit === CONST.EDIT_REQUEST_FIELD.TAG) { return ( { setDraftSplitTransaction({tag: transactionChanges.tag.trim()}); }} @@ -134,31 +121,27 @@ function EditSplitBillPage({route, transaction, draftTransaction, report}) { } EditSplitBillPage.displayName = 'EditSplitBillPage'; -EditSplitBillPage.propTypes = propTypes; -EditSplitBillPage.defaultProps = defaultProps; -export default compose( - withOnyx({ - reportActions: { - key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${route.params.reportID}`, - canEvict: false, - }, - report: { - key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`, - }, - }), - // eslint-disable-next-line rulesdir/no-multiple-onyx-in-file - withOnyx({ - transaction: { - key: ({route, reportActions}) => { - const reportAction = reportActions[`${route.params.reportActionID.toString()}`]; - return `${ONYXKEYS.COLLECTION.TRANSACTION}${lodashGet(reportAction, 'originalMessage.IOUTransactionID', 0)}`; - }, + +export default withOnyx({ + report: { + key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`, + }, + reportActions: { + key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${route.params.reportID}`, + canEvict: false, + }, + transaction: { + key: ({route, reportActions}: Partial) => { + const reportAction = reportActions?.[`${route?.params.reportActionID.toString()}`]; + const transactionID = (reportAction as OriginalMessageIOU)?.originalMessage.IOUTransactionID ? (reportAction as OriginalMessageIOU).originalMessage.IOUTransactionID : 0; + return `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`; }, - draftTransaction: { - key: ({route, reportActions}) => { - const reportAction = reportActions[`${route.params.reportActionID.toString()}`]; - return `${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${lodashGet(reportAction, 'originalMessage.IOUTransactionID', 0)}`; - }, + }, + draftTransaction: { + key: ({route, reportActions}: Partial) => { + const reportAction = reportActions?.[`${route?.params.reportActionID.toString()}`]; + const transactionID = (reportAction as OriginalMessageIOU)?.originalMessage.IOUTransactionID ? (reportAction as OriginalMessageIOU).originalMessage.IOUTransactionID : 0; + return `${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`; }, - }), -)(EditSplitBillPage); + }, +})(EditSplitBillPage);