From 522733fb73d86337cb02d3fa56e595d16bb5c147 Mon Sep 17 00:00:00 2001 From: Andrew Rosiclair Date: Fri, 9 Feb 2024 10:27:15 -0500 Subject: [PATCH] Revert "Merge pull request #35137 from DylanDylann/fix/34609" This reverts commit f88d526fd3a3dfdac0e5b0b9fb76e4e664506afc, reversing changes made to 880e1879ec35c31d4bdf6031c7c58fab8aa1702d. --- src/ROUTES.ts | 10 +- src/SCREENS.ts | 1 + .../MoneyRequestConfirmationList.js | 14 +- ...oraryForRefactorRequestConfirmationList.js | 8 +- .../ReportActionItem/MoneyRequestView.tsx | 12 +- .../AppNavigator/ModalStackNavigators.tsx | 1 + src/libs/Navigation/linkingConfig/config.ts | 1 + src/libs/Navigation/types.ts | 9 +- src/libs/actions/IOU.ts | 12 +- src/pages/EditRequestDescriptionPage.js | 91 ++++++++++ src/pages/EditRequestPage.js | 22 +++ src/pages/EditSplitBillPage.js | 15 ++ src/pages/iou/MoneyRequestDescriptionPage.js | 165 ++++++++++++++++++ .../request/step/IOURequestStepDescription.js | 54 +----- 14 files changed, 334 insertions(+), 81 deletions(-) create mode 100644 src/pages/EditRequestDescriptionPage.js create mode 100644 src/pages/iou/MoneyRequestDescriptionPage.js diff --git a/src/ROUTES.ts b/src/ROUTES.ts index e3a78cbff39d..d3ea41ff08f5 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -280,6 +280,10 @@ const ROUTES = { route: ':iouType/new/currency/:reportID?', getRoute: (iouType: string, reportID: string, currency: string, backTo: string) => `${iouType}/new/currency/${reportID}?currency=${currency}&backTo=${backTo}` as const, }, + MONEY_REQUEST_DESCRIPTION: { + route: ':iouType/new/description/:reportID?', + getRoute: (iouType: string, reportID = '') => `${iouType}/new/description/${reportID}` as const, + }, MONEY_REQUEST_CATEGORY: { route: ':iouType/new/category/:reportID?', getRoute: (iouType: string, reportID = '') => `${iouType}/new/category/${reportID}` as const, @@ -342,9 +346,9 @@ const ROUTES = { getUrlWithBackToParam(`create/${iouType}/date/${transactionID}/${reportID}`, backTo), }, MONEY_REQUEST_STEP_DESCRIPTION: { - route: ':action/:iouType/description/:transactionID/:reportID', - getRoute: (action: ValueOf, iouType: ValueOf, transactionID: string, reportID: string, backTo = '') => - getUrlWithBackToParam(`${action}/${iouType}/description/${transactionID}/${reportID}`, backTo), + route: 'create/:iouType/description/:transactionID/:reportID', + getRoute: (iouType: ValueOf, transactionID: string, reportID: string, backTo = '') => + getUrlWithBackToParam(`create/${iouType}/description/${transactionID}/${reportID}`, backTo), }, MONEY_REQUEST_STEP_DISTANCE: { route: 'create/:iouType/distance/:transactionID/:reportID', diff --git a/src/SCREENS.ts b/src/SCREENS.ts index cd80937a3864..8dcc456a8e60 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -147,6 +147,7 @@ const SCREENS = { CONFIRMATION: 'Money_Request_Confirmation', CURRENCY: 'Money_Request_Currency', DATE: 'Money_Request_Date', + DESCRIPTION: 'Money_Request_Description', CATEGORY: 'Money_Request_Category', MERCHANT: 'Money_Request_Merchant', WAYPOINT: 'Money_Request_Waypoint', diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index 92656a7ad225..18864199600c 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -672,15 +672,11 @@ function MoneyRequestConfirmationList(props) { title={props.iouComment} description={translate('common.description')} onPress={() => { - Navigation.navigate( - ROUTES.MONEY_REQUEST_STEP_DESCRIPTION.getRoute( - CONST.IOU.ACTION.EDIT, - props.iouType, - transaction.transactionID, - props.reportID, - Navigation.getActiveRouteWithoutParams(), - ), - ); + if (props.isEditingSplitBill) { + Navigation.navigate(ROUTES.EDIT_SPLIT_BILL.getRoute(props.reportID, props.reportActionID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION)); + return; + } + Navigation.navigate(ROUTES.MONEY_REQUEST_DESCRIPTION.getRoute(props.iouType, props.reportID)); }} style={[styles.moneyRequestMenuItem]} titleStyle={styles.flex1} diff --git a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js index a2f79d2696b8..9e60205d1331 100755 --- a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js +++ b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js @@ -701,9 +701,11 @@ function MoneyTemporaryForRefactorRequestConfirmationList({ title={iouComment} description={translate('common.description')} onPress={() => { - Navigation.navigate( - ROUTES.MONEY_REQUEST_STEP_DESCRIPTION.getRoute(CONST.IOU.ACTION.CREATE, iouType, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams()), - ); + if (isEditingSplitBill) { + Navigation.navigate(ROUTES.EDIT_SPLIT_BILL.getRoute(reportID, reportActionID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION)); + return; + } + Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_DESCRIPTION.getRoute(iouType, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams())); }} style={[styles.moneyRequestMenuItem]} titleStyle={styles.flex1} diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx index df5be02ca64f..a8f28dab9b54 100644 --- a/src/components/ReportActionItem/MoneyRequestView.tsx +++ b/src/components/ReportActionItem/MoneyRequestView.tsx @@ -264,17 +264,7 @@ function MoneyRequestView({ interactive={canEdit} shouldShowRightIcon={canEdit} titleStyle={styles.flex1} - onPress={() => - Navigation.navigate( - ROUTES.MONEY_REQUEST_STEP_DESCRIPTION.getRoute( - CONST.IOU.ACTION.EDIT, - CONST.IOU.TYPE.REQUEST, - transaction?.transactionID ?? '', - report.reportID, - Navigation.getActiveRouteWithoutParams(), - ), - ) - } + onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION))} wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]} brickRoadIndicator={hasViolations('comment') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} numberOfLinesTitle={0} diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx index c7be135e8b57..f04fad76c40b 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx @@ -100,6 +100,7 @@ const MoneyRequestModalStackNavigator = createModalStackNavigator require('../../../pages/iou/steps/MoneyRequestConfirmPage').default as React.ComponentType, [SCREENS.MONEY_REQUEST.CURRENCY]: () => require('../../../pages/iou/IOUCurrencySelection').default as React.ComponentType, [SCREENS.MONEY_REQUEST.DATE]: () => require('../../../pages/iou/MoneyRequestDatePage').default as React.ComponentType, + [SCREENS.MONEY_REQUEST.DESCRIPTION]: () => require('../../../pages/iou/MoneyRequestDescriptionPage').default as React.ComponentType, [SCREENS.MONEY_REQUEST.CATEGORY]: () => require('../../../pages/iou/MoneyRequestCategoryPage').default as React.ComponentType, [SCREENS.MONEY_REQUEST.MERCHANT]: () => require('../../../pages/iou/MoneyRequestMerchantPage').default as React.ComponentType, [SCREENS.IOU_SEND.ADD_BANK_ACCOUNT]: () => require('../../../pages/AddPersonalBankAccountPage').default as React.ComponentType, diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts index 12577e360784..a3df1780fea8 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -407,6 +407,7 @@ const config: LinkingOptions['config'] = { [SCREENS.MONEY_REQUEST.CONFIRMATION]: ROUTES.MONEY_REQUEST_CONFIRMATION.route, [SCREENS.MONEY_REQUEST.DATE]: ROUTES.MONEY_REQUEST_DATE.route, [SCREENS.MONEY_REQUEST.CURRENCY]: ROUTES.MONEY_REQUEST_CURRENCY.route, + [SCREENS.MONEY_REQUEST.DESCRIPTION]: ROUTES.MONEY_REQUEST_DESCRIPTION.route, [SCREENS.MONEY_REQUEST.CATEGORY]: ROUTES.MONEY_REQUEST_CATEGORY.route, [SCREENS.MONEY_REQUEST.MERCHANT]: ROUTES.MONEY_REQUEST_MERCHANT.route, [SCREENS.MONEY_REQUEST.RECEIPT]: ROUTES.MONEY_REQUEST_RECEIPT.route, diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index d3df217c1342..a7dacbe79696 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -214,12 +214,11 @@ type MoneyRequestNavigatorParamList = { field: string; threadReportID: string; }; - [SCREENS.MONEY_REQUEST.STEP_DESCRIPTION]: { - action: ValueOf; - iouType: ValueOf; - transactionID: string; + [SCREENS.MONEY_REQUEST.DESCRIPTION]: { + iouType: string; reportID: string; - backTo: string; + field: string; + threadReportID: string; }; [SCREENS.MONEY_REQUEST.CATEGORY]: { iouType: string; diff --git a/src/libs/actions/IOU.ts b/src/libs/actions/IOU.ts index e16f879b6913..ce8957822a7a 100644 --- a/src/libs/actions/IOU.ts +++ b/src/libs/actions/IOU.ts @@ -286,8 +286,9 @@ function setMoneyRequestOriginalCurrency_temporaryForRefactor(transactionID: str Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`, {originalCurrency}); } -function setMoneyRequestDescription(transactionID: string, comment: string, isDraft: boolean) { - Onyx.merge(`${isDraft ? ONYXKEYS.COLLECTION.TRANSACTION_DRAFT : ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {comment: {comment: comment.trim()}}); +// eslint-disable-next-line @typescript-eslint/naming-convention +function setMoneyRequestDescription_temporaryForRefactor(transactionID: string, comment: string) { + Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`, {comment: {comment: comment.trim()}}); } // eslint-disable-next-line @typescript-eslint/naming-convention @@ -3591,6 +3592,10 @@ function setMoneyRequestCurrency(currency: string) { Onyx.merge(ONYXKEYS.IOU, {currency}); } +function setMoneyRequestDescription(comment: string) { + Onyx.merge(ONYXKEYS.IOU, {comment: comment.trim()}); +} + function setMoneyRequestMerchant(merchant: string) { Onyx.merge(ONYXKEYS.IOU, {merchant: merchant.trim()}); } @@ -3731,8 +3736,8 @@ export { setMoneyRequestCategory_temporaryForRefactor, setMoneyRequestCreated_temporaryForRefactor, setMoneyRequestCurrency_temporaryForRefactor, - setMoneyRequestDescription, setMoneyRequestOriginalCurrency_temporaryForRefactor, + setMoneyRequestDescription_temporaryForRefactor, setMoneyRequestMerchant_temporaryForRefactor, setMoneyRequestParticipants_temporaryForRefactor, setMoneyRequestPendingFields, @@ -3742,6 +3747,7 @@ export { setMoneyRequestCategory, setMoneyRequestCreated, setMoneyRequestCurrency, + setMoneyRequestDescription, setMoneyRequestId, setMoneyRequestMerchant, setMoneyRequestParticipantsFromReport, diff --git a/src/pages/EditRequestDescriptionPage.js b/src/pages/EditRequestDescriptionPage.js new file mode 100644 index 000000000000..9b2a9e465746 --- /dev/null +++ b/src/pages/EditRequestDescriptionPage.js @@ -0,0 +1,91 @@ +import {useFocusEffect} from '@react-navigation/native'; +import PropTypes from 'prop-types'; +import React, {useCallback, useRef} from 'react'; +import {View} from 'react-native'; +import FormProvider from '@components/Form/FormProvider'; +import InputWrapperWithRef from '@components/Form/InputWrapper'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import ScreenWrapper from '@components/ScreenWrapper'; +import TextInput from '@components/TextInput'; +import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; +import * as Browser from '@libs/Browser'; +import updateMultilineInputRange from '@libs/updateMultilineInputRange'; +import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; + +const propTypes = { + /** Transaction default description value */ + defaultDescription: PropTypes.string.isRequired, + + /** Callback to fire when the Save button is pressed */ + onSubmit: PropTypes.func.isRequired, +}; + +function EditRequestDescriptionPage({defaultDescription, onSubmit}) { + const styles = useThemeStyles(); + const {translate} = useLocalize(); + const descriptionInputRef = useRef(null); + const focusTimeoutRef = useRef(null); + + useFocusEffect( + useCallback(() => { + focusTimeoutRef.current = setTimeout(() => { + if (descriptionInputRef.current) { + descriptionInputRef.current.focus(); + } + return () => { + if (!focusTimeoutRef.current) { + return; + } + clearTimeout(focusTimeoutRef.current); + }; + }, CONST.ANIMATED_TRANSITION); + }, []), + ); + + return ( + + + + + { + if (!el) { + return; + } + descriptionInputRef.current = el; + updateMultilineInputRange(descriptionInputRef.current); + }} + autoGrowHeight + containerStyles={[styles.autoGrowHeightMultilineInput]} + submitOnEnter={!Browser.isMobile()} + /> + + + + ); +} + +EditRequestDescriptionPage.propTypes = propTypes; +EditRequestDescriptionPage.displayName = 'EditRequestDescriptionPage'; + +export default EditRequestDescriptionPage; diff --git a/src/pages/EditRequestPage.js b/src/pages/EditRequestPage.js index 7e1a9f7d9b7b..3eb9d88f1120 100644 --- a/src/pages/EditRequestPage.js +++ b/src/pages/EditRequestPage.js @@ -22,6 +22,7 @@ import ROUTES from '@src/ROUTES'; import EditRequestAmountPage from './EditRequestAmountPage'; import EditRequestCategoryPage from './EditRequestCategoryPage'; import EditRequestCreatedPage from './EditRequestCreatedPage'; +import EditRequestDescriptionPage from './EditRequestDescriptionPage'; import EditRequestDistancePage from './EditRequestDistancePage'; import EditRequestMerchantPage from './EditRequestMerchantPage'; import EditRequestReceiptPage from './EditRequestReceiptPage'; @@ -73,6 +74,7 @@ function EditRequestPage({report, route, policyCategories, policyTags, parentRep const { amount: transactionAmount, currency: transactionCurrency, + comment: transactionDescription, merchant: transactionMerchant, category: transactionCategory, tag: transactionTag, @@ -178,6 +180,26 @@ function EditRequestPage({report, route, policyCategories, policyTags, parentRep [transactionCategory, transaction.transactionID, report.reportID], ); + const saveComment = useCallback( + ({comment: newComment}) => { + // Only update comment if it has changed + if (newComment.trim() !== transactionDescription) { + IOU.updateMoneyRequestDescription(transaction.transactionID, report.reportID, newComment.trim()); + } + Navigation.dismissModal(); + }, + [transactionDescription, transaction.transactionID, report.reportID], + ); + + if (fieldToEdit === CONST.EDIT_REQUEST_FIELD.DESCRIPTION) { + return ( + + ); + } + if (fieldToEdit === CONST.EDIT_REQUEST_FIELD.DATE) { return ( { + setDraftSplitTransaction({ + comment: transactionChanges.comment.trim(), + }); + }} + /> + ); + } + if (fieldToEdit === CONST.EDIT_REQUEST_FIELD.DATE) { return ( { + focusTimeoutRef.current = setTimeout(() => { + if (inputRef.current) { + inputRef.current.focus(); + } + return () => { + if (!focusTimeoutRef.current) { + return; + } + clearTimeout(focusTimeoutRef.current); + }; + }, CONST.ANIMATED_TRANSITION); + }, []), + ); + + useEffect(() => { + const moneyRequestId = `${iouType}${reportID}`; + const shouldReset = iou.id !== moneyRequestId; + if (shouldReset) { + IOU.resetMoneyRequestInfo(moneyRequestId); + } + + if (!isDistanceRequest && (_.isEmpty(iou.participants) || (iou.amount === 0 && !iou.receiptPath) || shouldReset)) { + Navigation.goBack(ROUTES.MONEY_REQUEST.getRoute(iouType, reportID), true); + } + }, [iou.id, iou.participants, iou.amount, iou.receiptPath, iouType, reportID, isDistanceRequest]); + + function navigateBack() { + Navigation.goBack(ROUTES.MONEY_REQUEST_CONFIRMATION.getRoute(iouType, reportID)); + } + + /** + * Sets the money request comment by saving it to Onyx. + * + * @param {Object} value + * @param {String} value.moneyRequestComment + */ + function updateComment(value) { + IOU.setMoneyRequestDescription(value.moneyRequestComment); + navigateBack(); + } + + return ( + + <> + navigateBack()} + /> + updateComment(value)} + submitButtonText={translate('common.save')} + enabledWhenOffline + > + + { + if (!el) { + return; + } + inputRef.current = el; + updateMultilineInputRange(inputRef.current); + }} + autoGrowHeight + containerStyles={[styles.autoGrowHeightMultilineInput]} + submitOnEnter={!Browser.isMobile()} + /> + + + + + ); +} + +MoneyRequestDescriptionPage.propTypes = propTypes; +MoneyRequestDescriptionPage.defaultProps = defaultProps; +MoneyRequestDescriptionPage.displayName = 'MoneyRequestDescriptionPage'; + +export default withOnyx({ + iou: { + key: ONYXKEYS.IOU, + }, + selectedTab: { + key: `${ONYXKEYS.COLLECTION.SELECTED_TAB}${CONST.TAB.RECEIPT_TAB_ID}`, + }, +})(MoneyRequestDescriptionPage); diff --git a/src/pages/iou/request/step/IOURequestStepDescription.js b/src/pages/iou/request/step/IOURequestStepDescription.js index 25477170f505..849f3276667e 100644 --- a/src/pages/iou/request/step/IOURequestStepDescription.js +++ b/src/pages/iou/request/step/IOURequestStepDescription.js @@ -1,9 +1,7 @@ import {useFocusEffect} from '@react-navigation/native'; import lodashGet from 'lodash/get'; -import lodashIsEmpty from 'lodash/isEmpty'; import React, {useCallback, useRef} from 'react'; import {View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; import FormProvider from '@components/Form/FormProvider'; import InputWrapperWithRef from '@components/Form/InputWrapper'; import TextInput from '@components/TextInput'; @@ -30,31 +28,23 @@ const propTypes = { /** Onyx Props */ /** Holds data related to Money Request view state, rather than the underlying Money Request data. */ transaction: transactionPropTypes, - - /** The draft transaction that holds data to be persisted on the current transaction */ - splitDraftTransaction: transactionPropTypes, }; const defaultProps = { transaction: {}, - splitDraftTransaction: {}, }; function IOURequestStepDescription({ route: { - params: {action, iouType, reportID, backTo}, + params: {transactionID, backTo}, }, transaction, - splitDraftTransaction, }) { const styles = useThemeStyles(); const {translate} = useLocalize(); const inputRef = useRef(null); const focusTimeoutRef = useRef(null); - // In the split flow, when editing we use SPLIT_TRANSACTION_DRAFT to save draft value - const isEditingSplitBill = iouType === CONST.IOU.TYPE.SPLIT && action === CONST.IOU.ACTION.EDIT; - const currentDescription = - isEditingSplitBill && !lodashIsEmpty(splitDraftTransaction) ? lodashGet(splitDraftTransaction, 'comment.comment', '') : lodashGet(transaction, 'comment.comment', ''); + useFocusEffect( useCallback(() => { focusTimeoutRef.current = setTimeout(() => { @@ -80,27 +70,7 @@ function IOURequestStepDescription({ * @param {String} value.moneyRequestComment */ const updateComment = (value) => { - const newComment = value.moneyRequestComment.trim(); - - // Only update comment if it has changed - if (newComment === currentDescription) { - navigateBack(); - return; - } - - // In the split flow, when editing we use SPLIT_TRANSACTION_DRAFT to save draft value - if (isEditingSplitBill) { - IOU.setDraftSplitTransaction(transaction.transactionID, {comment: newComment}); - navigateBack(); - return; - } - - IOU.setMoneyRequestDescription(transaction.transactionID, newComment, action === CONST.IOU.ACTION.CREATE); - - if (action === CONST.IOU.ACTION.EDIT) { - IOU.updateMoneyRequestDescription(transaction.transactionID, reportID, newComment); - } - + IOU.setMoneyRequestDescription_temporaryForRefactor(transactionID, value.moneyRequestComment); navigateBack(); }; @@ -123,10 +93,10 @@ function IOURequestStepDescription({ InputComponent={TextInput} inputID="moneyRequestComment" name="moneyRequestComment" - defaultValue={currentDescription} + defaultValue={lodashGet(transaction, 'comment.comment', '')} label={translate('moneyRequestConfirmationList.whatsItFor')} accessibilityLabel={translate('moneyRequestConfirmationList.whatsItFor')} - role={CONST.ROLE.PRESENTATION} + role={CONST.ACCESSIBILITY_ROLE.TEXT} ref={(el) => { if (!el) { return; @@ -136,6 +106,7 @@ function IOURequestStepDescription({ }} autoGrowHeight containerStyles={[styles.autoGrowHeightMultilineInput]} + inputStyle={[styles.verticalAlignTop]} submitOnEnter={!Browser.isMobile()} /> @@ -148,15 +119,4 @@ IOURequestStepDescription.propTypes = propTypes; IOURequestStepDescription.defaultProps = defaultProps; IOURequestStepDescription.displayName = 'IOURequestStepDescription'; -export default compose( - withWritableReportOrNotFound, - withFullTransactionOrNotFound, - withOnyx({ - splitDraftTransaction: { - key: ({route}) => { - const transactionID = lodashGet(route, 'params.transactionID', 0); - return `${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`; - }, - }, - }), -)(IOURequestStepDescription); +export default compose(withWritableReportOrNotFound, withFullTransactionOrNotFound)(IOURequestStepDescription);