From 6a458b7522aea7bc14eb6074af1accf82306371e Mon Sep 17 00:00:00 2001 From: Alex Beaman Date: Tue, 29 Aug 2023 17:01:01 +0300 Subject: [PATCH 01/31] Allow zIndex to be overridden --- src/components/PopoverWithoutOverlay/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js index 778f65349969..15924d97467c 100644 --- a/src/components/PopoverWithoutOverlay/index.js +++ b/src/components/PopoverWithoutOverlay/index.js @@ -50,7 +50,7 @@ function Popover(props) { return ( From c2aa62fdf2ca857136e2fb23c5897877474595aa Mon Sep 17 00:00:00 2001 From: Alex Beaman Date: Tue, 29 Aug 2023 17:17:02 +0300 Subject: [PATCH 02/31] Allow overriding some modal styles from HeaderWithBackButton --- src/components/AttachmentModal.js | 29 ++++++++++++------- .../headerWithBackButtonPropTypes.js | 3 ++ src/components/HeaderWithBackButton/index.js | 2 ++ src/components/PopoverMenu/index.js | 5 ++++ src/components/ThreeDotsMenu/index.js | 7 ++++- src/styles/styles.js | 8 +++-- 6 files changed, 41 insertions(+), 13 deletions(-) diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index c07a4474a68b..56eb0de7c871 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -18,6 +18,7 @@ import compose from '../libs/compose'; import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; import Button from './Button'; import HeaderWithBackButton from './HeaderWithBackButton'; +import ReceiptAttachmentHeader from './ReceiptAttachmentHeader'; import fileDownload from '../libs/fileDownload'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import ConfirmModal from './ConfirmModal'; @@ -336,16 +337,24 @@ function AttachmentModal(props) { propagateSwipe > {props.isSmallScreenWidth && } - downloadAttachment(source)} - shouldShowCloseButton={!props.isSmallScreenWidth} - shouldShowBackButton={props.isSmallScreenWidth} - onBackButtonPress={closeModal} - onCloseButtonPress={closeModal} - /> + {isAttachmentReceipt ? ( + + ) : ( + downloadAttachment(source)} + shouldShowCloseButton={!props.isSmallScreenWidth} + shouldShowBackButton={props.isSmallScreenWidth} + onBackButtonPress={closeModal} + onCloseButtonPress={closeModal} + /> + )} {!_.isEmpty(props.report) ? ( )} {shouldShowCloseButton && ( diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js index 67b9a0406aef..6484d24f2870 100644 --- a/src/components/PopoverMenu/index.js +++ b/src/components/PopoverMenu/index.js @@ -27,6 +27,9 @@ const propTypes = { /** Ref of the anchor */ anchorRef: refPropTypes, + /** Outer style of popover that passes down to Modal */ + outerStyle: PropTypes.oneOf([PropTypes.array, PropTypes.object]), + /** Where the popover should be positioned relative to the anchor points. */ anchorAlignment: PropTypes.shape({ horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)), @@ -42,6 +45,7 @@ const defaultProps = { horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM, }, + outerStyle: {}, anchorRef: () => {}, withoutOverlay: false, }; @@ -89,6 +93,7 @@ function PopoverMenu(props) { disableAnimation={props.disableAnimation} fromSidebarMediumScreen={props.fromSidebarMediumScreen} withoutOverlay={props.withoutOverlay} + outerStyle={props.outerStyle} > {!_.isEmpty(props.headerText) && {props.headerText}} diff --git a/src/components/ThreeDotsMenu/index.js b/src/components/ThreeDotsMenu/index.js index b5637a4f3879..4d44f9eb6d7f 100644 --- a/src/components/ThreeDotsMenu/index.js +++ b/src/components/ThreeDotsMenu/index.js @@ -29,6 +29,9 @@ const propTypes = { /** Function to call on icon press */ onIconPress: PropTypes.func, + /** Outer styles that get passed down to Modal */ + outerStyle: PropTypes.oneOfType([PropTypes.array, PropTypes.object]), + /** menuItems that'll show up on toggle of the popup menu */ menuItems: ThreeDotsMenuItemPropTypes.isRequired, @@ -53,13 +56,14 @@ const defaultProps = { iconStyles: [], icon: Expensicons.ThreeDots, onIconPress: () => {}, + outerStyle: {}, anchorAlignment: { horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, // we assume that popover menu opens below the button, anchor is at TOP }, }; -function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, menuItems, anchorPosition, anchorAlignment}) { +function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, outerStyle, menuItems, anchorPosition, anchorAlignment}) { const [isPopupMenuVisible, setPopupMenuVisible] = useState(false); const buttonRef = useRef(null); const {translate} = useLocalize(); @@ -108,6 +112,7 @@ function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, me menuItems={menuItems} withoutOverlay anchorRef={buttonRef} + outerStyle={outerStyle} /> ); diff --git a/src/styles/styles.js b/src/styles/styles.js index d6258da62cbc..1eb02a79f955 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2148,6 +2148,10 @@ const styles = { width: '100%', }, + receiptAttachmentHeaderThreeDotsMenuStyles: { + zIndex: variables.popoverModalzIndex, + }, + defaultAttachmentView: { backgroundColor: themeColors.sidebar, borderRadius: variables.componentBorderRadiusNormal, @@ -3102,8 +3106,8 @@ const styles = { flex: 1, }, - threeDotsPopoverOffset: (windowWidth) => ({ - ...getPopOverVerticalOffset(60), + threeDotsPopoverOffset: (windowWidth, isWithinFullScreenModal) => ({ + ...getPopOverVerticalOffset(60 + (isWithinFullScreenModal ? 20 : 0)), horizontal: windowWidth - 60, }), From bfe63488873ea36356412e145e10520c1d461392 Mon Sep 17 00:00:00 2001 From: Alex Beaman Date: Tue, 29 Aug 2023 17:17:28 +0300 Subject: [PATCH 03/31] New attachment view header component --- src/components/ReceiptAttachmentHeader.js | 86 +++++++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 src/components/ReceiptAttachmentHeader.js diff --git a/src/components/ReceiptAttachmentHeader.js b/src/components/ReceiptAttachmentHeader.js new file mode 100644 index 000000000000..11943e7a7fc7 --- /dev/null +++ b/src/components/ReceiptAttachmentHeader.js @@ -0,0 +1,86 @@ +import React, {useState, useCallback} from 'react'; +import {withOnyx} from 'react-native-onyx'; +import {View} from 'react-native'; +import HeaderWithBackButton from './HeaderWithBackButton'; +import iouReportPropTypes from '../pages/iouReportPropTypes'; +import * as Expensicons from './Icon/Expensicons'; +import styles from '../styles/styles'; +import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; +import compose from '../libs/compose'; +import ONYXKEYS from '../ONYXKEYS'; +import ConfirmModal from './ConfirmModal'; +import useLocalize from '../hooks/useLocalize'; + +const propTypes = { + /** The report currently being looked at */ + report: iouReportPropTypes.isRequired, + + /** The expense report or iou report (only will have a value if this is a transaction thread) */ + parentReport: iouReportPropTypes, + + ...windowDimensionsPropTypes, +}; + +const defaultProps = { + parentReport: {}, +}; + +function ReceiptAttachmentHeader(props) { + const {translate} = useLocalize(); + const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false); + + const deleteReceipt = useCallback(() => { + // IOU.deleteMoneyRequest(parentReportAction.originalMessage.IOUTransactionID, parentReportAction, true); + setIsDeleteModalVisible(false); + }, [props.parentReport, setIsDeleteModalVisible]); + + return ( + <> + + setIsDeleteModalVisible(true), + }, + ]} + threeDotsAnchorPosition={styles.threeDotsPopoverOffset(props.windowWidth, true)} + outerThreeDotsMenuStyle={styles.receiptAttachmentHeaderThreeDotsMenuStyles} + shouldShowBackButton={props.isSmallScreenWidth} + onBackButtonPress={props.onBackButtonPress} + onCloseButtonPress={props.onCloseButtonPress} + /> + + setIsDeleteModalVisible(false)} + prompt={translate('receipt.deleteConfirmation')} + confirmText={translate('common.delete')} + cancelText={translate('common.cancel')} + danger + /> + + ); +} + +ReceiptAttachmentHeader.displayName = 'ReceiptAttachmentHeader'; +ReceiptAttachmentHeader.propTypes = propTypes; +ReceiptAttachmentHeader.defaultProps = defaultProps; + +export default compose( + withWindowDimensions, + withOnyx({ + parentReport: { + key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`, + }, + }), +)(ReceiptAttachmentHeader); From 93738713966c5f4d4243dfe7cb62be1a8fb69ea8 Mon Sep 17 00:00:00 2001 From: Alex Beaman Date: Tue, 29 Aug 2023 17:17:45 +0300 Subject: [PATCH 04/31] Forgot to commit new style var --- src/styles/variables.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/variables.ts b/src/styles/variables.ts index f584e657c693..ae4fe6e4ee26 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -82,6 +82,7 @@ export default { sideBarWidth: 375, pdfPageMaxWidth: 992, tooltipzIndex: 10050, + popoverModalzIndex: 9999, gutterWidth: 12, popoverMenuShadow: '0px 4px 12px 0px rgba(0, 0, 0, 0.06)', optionRowHeight: 64, From 73ba5b668e5879eff61ddcc127962806608f0b4d Mon Sep 17 00:00:00 2001 From: Alex Beaman Date: Tue, 29 Aug 2023 18:22:31 +0300 Subject: [PATCH 05/31] Finish transaction-get logic --- src/components/ReceiptAttachmentHeader.js | 30 ++++++++++++----------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/src/components/ReceiptAttachmentHeader.js b/src/components/ReceiptAttachmentHeader.js index 11943e7a7fc7..37532d669095 100644 --- a/src/components/ReceiptAttachmentHeader.js +++ b/src/components/ReceiptAttachmentHeader.js @@ -1,22 +1,24 @@ import React, {useState, useCallback} from 'react'; -import {withOnyx} from 'react-native-onyx'; +import lodashGet from 'lodash/get'; +import PropTypes from 'prop-types'; import {View} from 'react-native'; import HeaderWithBackButton from './HeaderWithBackButton'; -import iouReportPropTypes from '../pages/iouReportPropTypes'; import * as Expensicons from './Icon/Expensicons'; import styles from '../styles/styles'; import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; import compose from '../libs/compose'; -import ONYXKEYS from '../ONYXKEYS'; import ConfirmModal from './ConfirmModal'; import useLocalize from '../hooks/useLocalize'; +import ReceiptActions from '../libs/actions/Receipt'; +import * as ReportActionsUtils from '../libs/ReportActionsUtils'; +import _ from 'lodash'; const propTypes = { /** The report currently being looked at */ - report: iouReportPropTypes.isRequired, - - /** The expense report or iou report (only will have a value if this is a transaction thread) */ - parentReport: iouReportPropTypes, + report: PropTypes.shape({ + parentReportID: PropTypes.string.isRequired, + parentReportActionID: PropTypes.string.isRequired, + }).isRequired, ...windowDimensionsPropTypes, }; @@ -30,9 +32,14 @@ function ReceiptAttachmentHeader(props) { const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false); const deleteReceipt = useCallback(() => { - // IOU.deleteMoneyRequest(parentReportAction.originalMessage.IOUTransactionID, parentReportAction, true); + // Get receipt attachment transaction ID + const parentReportAction = ReportActionsUtils.getParentReportAction(props.report); + const transactionID = lodashGet(parentReportAction, ['originalMessage', 'IOUTransactionID'], 0); + + // Detatch receipt & clear modal open state + ReceiptActions.detachReceipt(transactionID); setIsDeleteModalVisible(false); - }, [props.parentReport, setIsDeleteModalVisible]); + }, [props.receiptTransactions, setIsDeleteModalVisible]); return ( <> @@ -78,9 +85,4 @@ ReceiptAttachmentHeader.defaultProps = defaultProps; export default compose( withWindowDimensions, - withOnyx({ - parentReport: { - key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`, - }, - }), )(ReceiptAttachmentHeader); From fe013075d6fe4aa6bdc39a250ac7c5fdc8db459c Mon Sep 17 00:00:00 2001 From: Alex Beaman Date: Tue, 29 Aug 2023 18:50:25 +0300 Subject: [PATCH 06/31] Add optimistic and failure data --- src/libs/actions/Receipt.js | 44 +++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/src/libs/actions/Receipt.js b/src/libs/actions/Receipt.js index fbe9c22faaa2..dc25e28b22cc 100644 --- a/src/libs/actions/Receipt.js +++ b/src/libs/actions/Receipt.js @@ -1,5 +1,20 @@ import Onyx from 'react-native-onyx'; +import lodashGet from 'lodash/get'; import ONYXKEYS from '../../ONYXKEYS'; +import * as API from '../API'; +import * as CollectionUtils from '../CollectionUtils'; + +const allTransactionData = {}; +Onyx.connect({ + key: ONYXKEYS.COLLECTION.TRANSACTION, + callback: (data, key) => { + if (!key || !data) { + return; + } + const transactionID = CollectionUtils.extractCollectionItemID(key); + allTransactionData[transactionID] = data; + }, +}); /** * Sets the upload receipt error modal content when an invalid receipt is uploaded @@ -27,7 +42,36 @@ function clearUploadReceiptError() { }); } +/** + * Detaches the receipt from a transaction + * + * @param {String} transactionID + */ +function detachReceipt(transactionID) { + API.write('DetachReceipt', {transactionID}, { + optimisticData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, + value: { + receipt: {}, + }, + }, + ], + failureData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, + value: { + receipt: lodashGet(allTransactionData, [transactionID, 'receipt'], {}), + }, + }, + ], + }); +} + export default { setUploadReceiptError, clearUploadReceiptError, + detachReceipt, }; From c0f11989f5f0055822e031fe1f0a92c0558a66b4 Mon Sep 17 00:00:00 2001 From: Alex Beaman Date: Tue, 29 Aug 2023 18:59:15 +0300 Subject: [PATCH 07/31] Fixing up some lint errors --- src/components/ReceiptAttachmentHeader.js | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/src/components/ReceiptAttachmentHeader.js b/src/components/ReceiptAttachmentHeader.js index 37532d669095..e1af8473ff51 100644 --- a/src/components/ReceiptAttachmentHeader.js +++ b/src/components/ReceiptAttachmentHeader.js @@ -11,7 +11,6 @@ import ConfirmModal from './ConfirmModal'; import useLocalize from '../hooks/useLocalize'; import ReceiptActions from '../libs/actions/Receipt'; import * as ReportActionsUtils from '../libs/ReportActionsUtils'; -import _ from 'lodash'; const propTypes = { /** The report currently being looked at */ @@ -23,10 +22,6 @@ const propTypes = { ...windowDimensionsPropTypes, }; -const defaultProps = { - parentReport: {}, -}; - function ReceiptAttachmentHeader(props) { const {translate} = useLocalize(); const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false); @@ -39,7 +34,7 @@ function ReceiptAttachmentHeader(props) { // Detatch receipt & clear modal open state ReceiptActions.detachReceipt(transactionID); setIsDeleteModalVisible(false); - }, [props.receiptTransactions, setIsDeleteModalVisible]); + }, [props.report, setIsDeleteModalVisible]); return ( <> @@ -60,7 +55,6 @@ function ReceiptAttachmentHeader(props) { ]} threeDotsAnchorPosition={styles.threeDotsPopoverOffset(props.windowWidth, true)} outerThreeDotsMenuStyle={styles.receiptAttachmentHeaderThreeDotsMenuStyles} - shouldShowBackButton={props.isSmallScreenWidth} onBackButtonPress={props.onBackButtonPress} onCloseButtonPress={props.onCloseButtonPress} /> @@ -83,6 +77,4 @@ ReceiptAttachmentHeader.displayName = 'ReceiptAttachmentHeader'; ReceiptAttachmentHeader.propTypes = propTypes; ReceiptAttachmentHeader.defaultProps = defaultProps; -export default compose( - withWindowDimensions, -)(ReceiptAttachmentHeader); +export default withWindowDimensions(ReceiptAttachmentHeader); From e46307c6153e86f0fbe3ec892751845c3f7babbb Mon Sep 17 00:00:00 2001 From: Alex Beaman Date: Tue, 29 Aug 2023 19:08:13 +0300 Subject: [PATCH 08/31] Navigate user back to receipt report after detaching --- src/components/ReceiptAttachmentHeader.js | 3 +-- src/libs/actions/Receipt.js | 5 ++++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/ReceiptAttachmentHeader.js b/src/components/ReceiptAttachmentHeader.js index e1af8473ff51..da81aaa514e0 100644 --- a/src/components/ReceiptAttachmentHeader.js +++ b/src/components/ReceiptAttachmentHeader.js @@ -32,7 +32,7 @@ function ReceiptAttachmentHeader(props) { const transactionID = lodashGet(parentReportAction, ['originalMessage', 'IOUTransactionID'], 0); // Detatch receipt & clear modal open state - ReceiptActions.detachReceipt(transactionID); + ReceiptActions.detachReceipt(transactionID, props.report.reportID); setIsDeleteModalVisible(false); }, [props.report, setIsDeleteModalVisible]); @@ -75,6 +75,5 @@ function ReceiptAttachmentHeader(props) { ReceiptAttachmentHeader.displayName = 'ReceiptAttachmentHeader'; ReceiptAttachmentHeader.propTypes = propTypes; -ReceiptAttachmentHeader.defaultProps = defaultProps; export default withWindowDimensions(ReceiptAttachmentHeader); diff --git a/src/libs/actions/Receipt.js b/src/libs/actions/Receipt.js index dc25e28b22cc..db81a67bb521 100644 --- a/src/libs/actions/Receipt.js +++ b/src/libs/actions/Receipt.js @@ -3,6 +3,8 @@ import lodashGet from 'lodash/get'; import ONYXKEYS from '../../ONYXKEYS'; import * as API from '../API'; import * as CollectionUtils from '../CollectionUtils'; +import Navigation from '../Navigation/Navigation'; +import ROUTES from '../../ROUTES'; const allTransactionData = {}; Onyx.connect({ @@ -47,7 +49,7 @@ function clearUploadReceiptError() { * * @param {String} transactionID */ -function detachReceipt(transactionID) { +function detachReceipt(transactionID, reportID) { API.write('DetachReceipt', {transactionID}, { optimisticData: [ { @@ -68,6 +70,7 @@ function detachReceipt(transactionID) { }, ], }); + Navigation.navigate(ROUTES.getReportRoute(reportID)); } export default { From 802af8d1cbc8801cba5104b7040739662739084d Mon Sep 17 00:00:00 2001 From: Alex Beaman Date: Tue, 29 Aug 2023 19:09:08 +0300 Subject: [PATCH 09/31] Add translations --- src/languages/en.js | 3 ++- src/languages/es.js | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/languages/en.js b/src/languages/en.js index fa8ea84c141b..cd01c2680ccd 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -393,6 +393,8 @@ export default { flash: 'flash', shutter: 'shutter', gallery: 'gallery', + deleteReceipt: 'Delete receipt', + deleteConfirmation: 'Are you sure you want to delete this receipt?', }, iou: { amount: 'Amount', @@ -408,7 +410,6 @@ export default { pay: 'Pay', viewDetails: 'View details', pending: 'Pending', - deleteReceipt: 'Delete receipt', receiptScanning: 'Receipt scan in progress…', receiptStatusTitle: 'Scanning…', receiptStatusText: "Only you can see this receipt when it's scanning. Check back later or enter the details now.", diff --git a/src/languages/es.js b/src/languages/es.js index fd6fcd9b767f..6d37b5d0f89b 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -392,6 +392,8 @@ export default { flash: 'flash', shutter: 'obturador', gallery: 'galería', + deleteReceipt: 'Eliminar recibo', + deleteConfirmation: '¿Estás seguro de que quieres borrar este recibo?', }, iou: { amount: 'Importe', @@ -407,7 +409,6 @@ export default { pay: 'Pagar', viewDetails: 'Ver detalles', pending: 'Pendiente', - deleteReceipt: 'Eliminar recibo', receiptScanning: 'Escaneo de recibo en curso…', receiptStatusTitle: 'Escaneando…', receiptStatusText: 'Solo tú puedes ver este recibo cuando se está escaneando. Vuelve más tarde o introduce los detalles ahora.', From 6491074ea5fd5adc3f54fcb0c8ff0813060fea8c Mon Sep 17 00:00:00 2001 From: Alex Beaman Date: Tue, 29 Aug 2023 19:38:18 +0300 Subject: [PATCH 10/31] lint & prettify --- src/components/ReceiptAttachmentHeader.js | 1 - src/libs/actions/Receipt.js | 41 +++++++++++++---------- 2 files changed, 23 insertions(+), 19 deletions(-) diff --git a/src/components/ReceiptAttachmentHeader.js b/src/components/ReceiptAttachmentHeader.js index da81aaa514e0..7e66f784fdd0 100644 --- a/src/components/ReceiptAttachmentHeader.js +++ b/src/components/ReceiptAttachmentHeader.js @@ -6,7 +6,6 @@ import HeaderWithBackButton from './HeaderWithBackButton'; import * as Expensicons from './Icon/Expensicons'; import styles from '../styles/styles'; import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; -import compose from '../libs/compose'; import ConfirmModal from './ConfirmModal'; import useLocalize from '../hooks/useLocalize'; import ReceiptActions from '../libs/actions/Receipt'; diff --git a/src/libs/actions/Receipt.js b/src/libs/actions/Receipt.js index db81a67bb521..2222b8ff9caf 100644 --- a/src/libs/actions/Receipt.js +++ b/src/libs/actions/Receipt.js @@ -48,28 +48,33 @@ function clearUploadReceiptError() { * Detaches the receipt from a transaction * * @param {String} transactionID + * @param {String} reportID */ function detachReceipt(transactionID, reportID) { - API.write('DetachReceipt', {transactionID}, { - optimisticData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, - value: { - receipt: {}, + API.write( + 'DetachReceipt', + {transactionID}, + { + optimisticData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, + value: { + receipt: {}, + }, }, - }, - ], - failureData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, - value: { - receipt: lodashGet(allTransactionData, [transactionID, 'receipt'], {}), + ], + failureData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, + value: { + receipt: lodashGet(allTransactionData, [transactionID, 'receipt'], {}), + }, }, - }, - ], - }); + ], + }, + ); Navigation.navigate(ROUTES.getReportRoute(reportID)); } From 776513ea65d424b2b0d022ac86cd554cd4829d6e Mon Sep 17 00:00:00 2001 From: Alex Beaman Date: Fri, 1 Sep 2023 18:56:05 +0300 Subject: [PATCH 11/31] Prop types fixes --- src/components/PopoverMenu/index.js | 2 +- src/components/ReceiptAttachmentHeader.js | 7 +++++++ src/components/ThreeDotsMenu/index.js | 2 +- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js index 6484d24f2870..3e3fa247fe6e 100644 --- a/src/components/PopoverMenu/index.js +++ b/src/components/PopoverMenu/index.js @@ -28,7 +28,7 @@ const propTypes = { anchorRef: refPropTypes, /** Outer style of popover that passes down to Modal */ - outerStyle: PropTypes.oneOf([PropTypes.array, PropTypes.object]), + outerStyle: PropTypes.object, /** Where the popover should be positioned relative to the anchor points. */ anchorAlignment: PropTypes.shape({ diff --git a/src/components/ReceiptAttachmentHeader.js b/src/components/ReceiptAttachmentHeader.js index 7e66f784fdd0..4927c3fe458e 100644 --- a/src/components/ReceiptAttachmentHeader.js +++ b/src/components/ReceiptAttachmentHeader.js @@ -14,10 +14,17 @@ import * as ReportActionsUtils from '../libs/ReportActionsUtils'; const propTypes = { /** The report currently being looked at */ report: PropTypes.shape({ + reportID: PropTypes.string.isRequired, parentReportID: PropTypes.string.isRequired, parentReportActionID: PropTypes.string.isRequired, }).isRequired, + /** Method to trigger when pressing back button of the header */ + onBackButtonPress: PropTypes.func.isRequired, + + /** Method to trigger when pressing close button of the header */ + onCloseButtonPress: PropTypes.func.isRequired, + ...windowDimensionsPropTypes, }; diff --git a/src/components/ThreeDotsMenu/index.js b/src/components/ThreeDotsMenu/index.js index 4d44f9eb6d7f..93850b08a3bb 100644 --- a/src/components/ThreeDotsMenu/index.js +++ b/src/components/ThreeDotsMenu/index.js @@ -30,7 +30,7 @@ const propTypes = { onIconPress: PropTypes.func, /** Outer styles that get passed down to Modal */ - outerStyle: PropTypes.oneOfType([PropTypes.array, PropTypes.object]), + outerStyle: PropTypes.object, /** menuItems that'll show up on toggle of the popup menu */ menuItems: ThreeDotsMenuItemPropTypes.isRequired, From d0898636d15a3bd685685a7f5d9a7ac89b2205a0 Mon Sep 17 00:00:00 2001 From: Alex Beaman Date: Tue, 19 Sep 2023 13:00:46 +0800 Subject: [PATCH 12/31] Fix types --- src/libs/actions/Receipt.ts | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/libs/actions/Receipt.ts b/src/libs/actions/Receipt.ts index 13553e0b0d7d..2d3c347240e4 100644 --- a/src/libs/actions/Receipt.ts +++ b/src/libs/actions/Receipt.ts @@ -5,8 +5,14 @@ import * as API from '../API'; import * as CollectionUtils from '../CollectionUtils'; import Navigation from '../Navigation/Navigation'; import ROUTES from '../../ROUTES'; +import * as OnyxTypes from '../../types/onyx'; +import CONST from '../../CONST'; -const allTransactionData = {}; +type TransactionMap = { + [key: string]: OnyxTypes.Transaction; +}; + +const allTransactionData: TransactionMap = {}; Onyx.connect({ key: ONYXKEYS.COLLECTION.TRANSACTION, callback: (data, key) => { @@ -42,11 +48,8 @@ function clearUploadReceiptError() { /** * Detaches the receipt from a transaction - * - * @param {String} transactionID - * @param {String} reportID */ -function detachReceipt(transactionID, reportID) { +function detachReceipt(transactionID: string, reportID: string) { API.write( 'DetachReceipt', {transactionID}, @@ -71,7 +74,7 @@ function detachReceipt(transactionID, reportID) { ], }, ); - Navigation.navigate(ROUTES.getReportRoute(reportID)); + Navigation.navigate(ROUTES.getReportRoute(reportID), CONST.NAVIGATION.TYPE.UP); } export default { From f3087eeb74b2c727a229f85d713c5f199880682f Mon Sep 17 00:00:00 2001 From: Alex Beaman Date: Wed, 20 Sep 2023 16:51:39 +0800 Subject: [PATCH 13/31] Remove old version of custom header --- src/components/AttachmentModal.js | 1 - src/components/ReceiptAttachmentHeader.js | 85 ----------------------- src/styles/styles.js | 4 -- 3 files changed, 90 deletions(-) delete mode 100644 src/components/ReceiptAttachmentHeader.js diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index eacf8780b6e2..946b5e2ddec9 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -18,7 +18,6 @@ import compose from '../libs/compose'; import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; import Button from './Button'; import HeaderWithBackButton from './HeaderWithBackButton'; -import ReceiptAttachmentHeader from './ReceiptAttachmentHeader'; import fileDownload from '../libs/fileDownload'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import ConfirmModal from './ConfirmModal'; diff --git a/src/components/ReceiptAttachmentHeader.js b/src/components/ReceiptAttachmentHeader.js deleted file mode 100644 index 4927c3fe458e..000000000000 --- a/src/components/ReceiptAttachmentHeader.js +++ /dev/null @@ -1,85 +0,0 @@ -import React, {useState, useCallback} from 'react'; -import lodashGet from 'lodash/get'; -import PropTypes from 'prop-types'; -import {View} from 'react-native'; -import HeaderWithBackButton from './HeaderWithBackButton'; -import * as Expensicons from './Icon/Expensicons'; -import styles from '../styles/styles'; -import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; -import ConfirmModal from './ConfirmModal'; -import useLocalize from '../hooks/useLocalize'; -import ReceiptActions from '../libs/actions/Receipt'; -import * as ReportActionsUtils from '../libs/ReportActionsUtils'; - -const propTypes = { - /** The report currently being looked at */ - report: PropTypes.shape({ - reportID: PropTypes.string.isRequired, - parentReportID: PropTypes.string.isRequired, - parentReportActionID: PropTypes.string.isRequired, - }).isRequired, - - /** Method to trigger when pressing back button of the header */ - onBackButtonPress: PropTypes.func.isRequired, - - /** Method to trigger when pressing close button of the header */ - onCloseButtonPress: PropTypes.func.isRequired, - - ...windowDimensionsPropTypes, -}; - -function ReceiptAttachmentHeader(props) { - const {translate} = useLocalize(); - const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false); - - const deleteReceipt = useCallback(() => { - // Get receipt attachment transaction ID - const parentReportAction = ReportActionsUtils.getParentReportAction(props.report); - const transactionID = lodashGet(parentReportAction, ['originalMessage', 'IOUTransactionID'], 0); - - // Detatch receipt & clear modal open state - ReceiptActions.detachReceipt(transactionID, props.report.reportID); - setIsDeleteModalVisible(false); - }, [props.report, setIsDeleteModalVisible]); - - return ( - <> - - setIsDeleteModalVisible(true), - }, - ]} - threeDotsAnchorPosition={styles.threeDotsPopoverOffset(props.windowWidth, true)} - outerThreeDotsMenuStyle={styles.receiptAttachmentHeaderThreeDotsMenuStyles} - onBackButtonPress={props.onBackButtonPress} - onCloseButtonPress={props.onCloseButtonPress} - /> - - setIsDeleteModalVisible(false)} - prompt={translate('receipt.deleteConfirmation')} - confirmText={translate('common.delete')} - cancelText={translate('common.cancel')} - danger - /> - - ); -} - -ReceiptAttachmentHeader.displayName = 'ReceiptAttachmentHeader'; -ReceiptAttachmentHeader.propTypes = propTypes; - -export default withWindowDimensions(ReceiptAttachmentHeader); diff --git a/src/styles/styles.js b/src/styles/styles.js index fac4ce864cba..8b5d2b052cc7 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2197,10 +2197,6 @@ const styles = (theme) => ({ width: '100%', }, - receiptAttachmentHeaderThreeDotsMenuStyles: { - zIndex: variables.popoverModalzIndex, - }, - defaultAttachmentView: { backgroundColor: theme.sidebar, borderRadius: variables.componentBorderRadiusNormal, From 7c83e8c7d59cdba6e60542949dbd427d995ead9b Mon Sep 17 00:00:00 2001 From: Alex Beaman Date: Wed, 20 Sep 2023 16:53:57 +0800 Subject: [PATCH 14/31] Revert a few style updates --- .../HeaderWithBackButton/headerWithBackButtonPropTypes.js | 3 --- src/components/HeaderWithBackButton/index.js | 1 - src/components/PopoverMenu/index.js | 5 ----- src/components/ThreeDotsMenu/index.js | 7 +------ src/styles/styles.js | 4 ++-- 5 files changed, 3 insertions(+), 17 deletions(-) diff --git a/src/components/HeaderWithBackButton/headerWithBackButtonPropTypes.js b/src/components/HeaderWithBackButton/headerWithBackButtonPropTypes.js index b3248f2447eb..d2cdc5b29898 100644 --- a/src/components/HeaderWithBackButton/headerWithBackButtonPropTypes.js +++ b/src/components/HeaderWithBackButton/headerWithBackButtonPropTypes.js @@ -48,9 +48,6 @@ const propTypes = { left: PropTypes.number, }), - /** Outer style that gets passed down to Modal */ - outerThreeDotsMenuStyle: PropTypes.oneOfType([PropTypes.array, PropTypes.object]), - /** Whether we should show a close button */ shouldShowCloseButton: PropTypes.bool, diff --git a/src/components/HeaderWithBackButton/index.js b/src/components/HeaderWithBackButton/index.js index 27b4a9f2408b..cf61a4cf4eb7 100755 --- a/src/components/HeaderWithBackButton/index.js +++ b/src/components/HeaderWithBackButton/index.js @@ -46,7 +46,6 @@ function HeaderWithBackButton({ horizontal: 0, }, threeDotsMenuItems = [], - outerThreeDotsMenuStyle = {}, children = null, shouldOverlay = false, }) { diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js index bd913d3f0a9b..5fabf73547ea 100644 --- a/src/components/PopoverMenu/index.js +++ b/src/components/PopoverMenu/index.js @@ -27,9 +27,6 @@ const propTypes = { /** Ref of the anchor */ anchorRef: refPropTypes, - /** Outer style of popover that passes down to Modal */ - outerStyle: PropTypes.object, - /** Where the popover should be positioned relative to the anchor points. */ anchorAlignment: PropTypes.shape({ horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)), @@ -45,7 +42,6 @@ const defaultProps = { horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM, }, - outerStyle: {}, anchorRef: () => {}, withoutOverlay: false, }; @@ -93,7 +89,6 @@ function PopoverMenu(props) { disableAnimation={props.disableAnimation} fromSidebarMediumScreen={props.fromSidebarMediumScreen} withoutOverlay={props.withoutOverlay} - outerStyle={props.outerStyle} > {!_.isEmpty(props.headerText) && {props.headerText}} diff --git a/src/components/ThreeDotsMenu/index.js b/src/components/ThreeDotsMenu/index.js index efef3bb6a8c8..f0cee6fdea2f 100644 --- a/src/components/ThreeDotsMenu/index.js +++ b/src/components/ThreeDotsMenu/index.js @@ -29,9 +29,6 @@ const propTypes = { /** Function to call on icon press */ onIconPress: PropTypes.func, - /** Outer styles that get passed down to Modal */ - outerStyle: PropTypes.object, - /** menuItems that'll show up on toggle of the popup menu */ menuItems: ThreeDotsMenuItemPropTypes.isRequired, @@ -59,7 +56,6 @@ const defaultProps = { iconStyles: [], icon: Expensicons.ThreeDots, onIconPress: () => {}, - outerStyle: {}, anchorAlignment: { horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, // we assume that popover menu opens below the button, anchor is at TOP @@ -67,7 +63,7 @@ const defaultProps = { shouldOverlay: false, }; -function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, outerStyle, menuItems, anchorPosition, anchorAlignment, shouldOverlay}) { +function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, menuItems, anchorPosition, anchorAlignment, shouldOverlay}) { const [isPopupMenuVisible, setPopupMenuVisible] = useState(false); const buttonRef = useRef(null); const {translate} = useLocalize(); @@ -116,7 +112,6 @@ function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, ou menuItems={menuItems} withoutOverlay={!shouldOverlay} anchorRef={buttonRef} - outerStyle={outerStyle} /> ); diff --git a/src/styles/styles.js b/src/styles/styles.js index 8b5d2b052cc7..01689a43952a 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -3177,8 +3177,8 @@ const styles = (theme) => ({ flex: 1, }, - threeDotsPopoverOffset: (windowWidth, isWithinFullScreenModal) => ({ - ...getPopOverVerticalOffset(60 + (isWithinFullScreenModal ? 20 : 0)), + threeDotsPopoverOffset: (windowWidth) => ({ + ...getPopOverVerticalOffset(60), horizontal: windowWidth - 60, }), From eaa6671829478be268f9820185241417806588ae Mon Sep 17 00:00:00 2001 From: Alex Beaman Date: Wed, 20 Sep 2023 16:54:34 +0800 Subject: [PATCH 15/31] Revert unused var --- src/styles/variables.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/styles/variables.ts b/src/styles/variables.ts index 0c1183e00768..6291323cef0b 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -83,7 +83,6 @@ export default { sideBarWidth: 375, pdfPageMaxWidth: 992, tooltipzIndex: 10050, - popoverModalzIndex: 9999, gutterWidth: 12, popoverMenuShadow: '0px 4px 12px 0px rgba(0, 0, 0, 0.06)', optionRowHeight: 64, From ca054cfb9ec65b07f49e8656cc916ee873b35ca4 Mon Sep 17 00:00:00 2001 From: Alex Beaman Date: Wed, 20 Sep 2023 18:04:52 +0800 Subject: [PATCH 16/31] Connect detachReceipt with transactionID --- src/components/AttachmentModal.js | 35 ++++++++++++++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 946b5e2ddec9..68cee61bbc9b 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -1,6 +1,7 @@ import React, {useState, useCallback, useRef} from 'react'; import PropTypes from 'prop-types'; import {View, Animated, Keyboard} from 'react-native'; +import {withOnyx} from 'react-native-onyx'; import Str from 'expensify-common/lib/str'; import lodashGet from 'lodash/get'; import lodashExtend from 'lodash/extend'; @@ -30,6 +31,8 @@ import useWindowDimensions from '../hooks/useWindowDimensions'; import Navigation from '../libs/Navigation/Navigation'; import ROUTES from '../ROUTES'; import useNativeDriver from '../libs/useNativeDriver'; +import Receipt from '../libs/actions/Receipt'; +import ONYXKEYS from '../ONYXKEYS'; /** * Modal render prop component that exposes modal launching triggers that can be used @@ -79,6 +82,13 @@ const propTypes = { /** Denotes whether it is a workspace avatar or not */ isWorkspaceAvatar: PropTypes.bool, + + /* Onyx Props */ + /** The parent report */ + parentReport: reportPropTypes, + + /** The report action this report is tied to from the parent report */ + parentReportAction: PropTypes.shape(reportActionPropTypes), }; const defaultProps = { @@ -95,6 +105,8 @@ const defaultProps = { onModalHide: () => {}, onCarouselAttachmentChange: () => {}, isWorkspaceAvatar: false, + parentReport: {}, + parentReportAction: {}, }; function AttachmentModal(props) { @@ -372,6 +384,14 @@ function AttachmentModal(props) { text: props.translate('common.download'), onSelected: () => downloadAttachment(source), }, + { + icon: Expensicons.Trashcan, + text: props.translate('receipt.deleteReceipt'), + onSelected: () => { + const transactionID = lodashGet(props.parentReportAction, 'originalMessage.IOUTransactionID', ''); + Receipt.detachReceipt(transactionID, props.report.reportID) + }, + }, ]} shouldOverlay /> @@ -441,4 +461,17 @@ function AttachmentModal(props) { AttachmentModal.propTypes = propTypes; AttachmentModal.defaultProps = defaultProps; AttachmentModal.displayName = 'AttachmentModal'; -export default compose(withWindowDimensions, withLocalize)(AttachmentModal); +export default compose( + withWindowDimensions, + withLocalize, + withOnyx({ + parentReport: { + key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`, + }, + parentReportAction: { + key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${(report.parentReportID, report.parentReportActionID)}`, + selector: (reportActions, props) => props && props.parentReport && reportActions && reportActions[props.parentReport.parentReportActionID], + canEvict: false, + }, + }), +)(AttachmentModal); From cf3979a2e6bd9f848a862a6cfb932513a7f45209 Mon Sep 17 00:00:00 2001 From: Alex Beaman Date: Thu, 21 Sep 2023 18:30:52 +0800 Subject: [PATCH 17/31] Fix up logic --- src/components/AttachmentModal.js | 23 +++-------------------- 1 file changed, 3 insertions(+), 20 deletions(-) diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 68cee61bbc9b..ebfcf5f0f3a3 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -1,7 +1,6 @@ import React, {useState, useCallback, useRef} from 'react'; import PropTypes from 'prop-types'; import {View, Animated, Keyboard} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; import Str from 'expensify-common/lib/str'; import lodashGet from 'lodash/get'; import lodashExtend from 'lodash/extend'; @@ -32,7 +31,7 @@ import Navigation from '../libs/Navigation/Navigation'; import ROUTES from '../ROUTES'; import useNativeDriver from '../libs/useNativeDriver'; import Receipt from '../libs/actions/Receipt'; -import ONYXKEYS from '../ONYXKEYS'; +import * as ReportActionsUtils from '../libs/ReportActionsUtils'; /** * Modal render prop component that exposes modal launching triggers that can be used @@ -82,13 +81,6 @@ const propTypes = { /** Denotes whether it is a workspace avatar or not */ isWorkspaceAvatar: PropTypes.bool, - - /* Onyx Props */ - /** The parent report */ - parentReport: reportPropTypes, - - /** The report action this report is tied to from the parent report */ - parentReportAction: PropTypes.shape(reportActionPropTypes), }; const defaultProps = { @@ -388,7 +380,8 @@ function AttachmentModal(props) { icon: Expensicons.Trashcan, text: props.translate('receipt.deleteReceipt'), onSelected: () => { - const transactionID = lodashGet(props.parentReportAction, 'originalMessage.IOUTransactionID', ''); + const parentReportAction = ReportActionsUtils.getReportAction(props.report.parentReportID, props.report.parentReportActionID); + const transactionID = lodashGet(parentReportAction, 'originalMessage.IOUTransactionID', ''); Receipt.detachReceipt(transactionID, props.report.reportID) }, }, @@ -464,14 +457,4 @@ AttachmentModal.displayName = 'AttachmentModal'; export default compose( withWindowDimensions, withLocalize, - withOnyx({ - parentReport: { - key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`, - }, - parentReportAction: { - key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${(report.parentReportID, report.parentReportActionID)}`, - selector: (reportActions, props) => props && props.parentReport && reportActions && reportActions[props.parentReport.parentReportActionID], - canEvict: false, - }, - }), )(AttachmentModal); From 64a4f68e5f9ab3ebe098d2a1d9a1f1657cc8c9f4 Mon Sep 17 00:00:00 2001 From: Alex Beaman Date: Thu, 21 Sep 2023 18:35:49 +0800 Subject: [PATCH 18/31] revert a few old changes --- src/components/AttachmentModal.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index ebfcf5f0f3a3..4fbe0d49d7b8 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -97,8 +97,6 @@ const defaultProps = { onModalHide: () => {}, onCarouselAttachmentChange: () => {}, isWorkspaceAvatar: false, - parentReport: {}, - parentReportAction: {}, }; function AttachmentModal(props) { @@ -454,7 +452,4 @@ function AttachmentModal(props) { AttachmentModal.propTypes = propTypes; AttachmentModal.defaultProps = defaultProps; AttachmentModal.displayName = 'AttachmentModal'; -export default compose( - withWindowDimensions, - withLocalize, -)(AttachmentModal); +export default compose(withWindowDimensions, withLocalize)(AttachmentModal); From 7aed7bc8b454585459834ebdab12add2c1eeb41d Mon Sep 17 00:00:00 2001 From: Alberto Date: Wed, 27 Sep 2023 15:31:08 +0800 Subject: [PATCH 19/31] hide if smartscanning --- src/components/AttachmentModal.js | 75 ++++++++++++++++++++----------- src/libs/actions/IOU.js | 5 ++- 2 files changed, 52 insertions(+), 28 deletions(-) diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 528b8817ec44..84cb554e43f5 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -30,9 +30,13 @@ import useWindowDimensions from '../hooks/useWindowDimensions'; import Navigation from '../libs/Navigation/Navigation'; import ROUTES from '../ROUTES'; import useNativeDriver from '../libs/useNativeDriver'; -import Receipt from '../libs/actions/Receipt'; import * as ReportActionsUtils from '../libs/ReportActionsUtils'; import useNetwork from '../hooks/useNetwork'; +import * as IOU from '../libs/actions/IOU'; +import ONYXKEYS from "../ONYXKEYS"; +import {withOnyx} from "react-native-onyx"; +import transactionPropTypes from "./transactionPropTypes"; +import * as TransactionUtils from "../libs/TransactionUtils"; /** * Modal render prop component that exposes modal launching triggers that can be used @@ -76,6 +80,9 @@ const propTypes = { /** The report that has this attachment */ report: reportPropTypes, + /** The transaction associated with the receipt, if any */ + transaction: transactionPropTypes, + ...withLocalizePropTypes, ...windowDimensionsPropTypes, @@ -94,6 +101,7 @@ const defaultProps = { allowDownload: false, headerTitle: null, report: {}, + transaction: {}, onModalShow: () => {}, onModalHide: () => {}, onCarouselAttachmentChange: () => {}, @@ -328,6 +336,32 @@ function AttachmentModal(props) { const sourceForAttachmentView = props.source || source; + let threeDotMenuItems = [ + { + icon: Expensicons.Camera, + text: props.translate('common.replace'), + onSelected: () => { + onModalHideCallbackRef.current = () => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.RECEIPT)); + closeModal(); + }, + }, + { + icon: Expensicons.Download, + text: props.translate('common.download'), + onSelected: () => downloadAttachment(source), + }, + ]; + + if (TransactionUtils.hasReceipt(transaction) && TransactionUtils.isReceiptBeingScanned(transaction)) { + threeDotMenuItems.push({ + icon: Expensicons.Trashcan, + text: props.traIOUnslate('receipt.deleteReceipt'), + onSelected: () => { + IOU.detachReceipt(transaction.transactionID); + }, + }); + } + return ( <> { - onModalHideCallbackRef.current = () => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.RECEIPT)); - closeModal(); - }, - }, - { - icon: Expensicons.Download, - text: props.translate('common.download'), - onSelected: () => downloadAttachment(source), - }, - { - icon: Expensicons.Trashcan, - text: props.translate('receipt.deleteReceipt'), - onSelected: () => { - const parentReportAction = ReportActionsUtils.getReportAction(props.report.parentReportID, props.report.parentReportActionID); - const transactionID = lodashGet(parentReportAction, 'originalMessage.IOUTransactionID', ''); - Receipt.detachReceipt(transactionID, props.report.reportID) - }, - }, - ]} + threeDotsMenuItems shouldOverlay /> @@ -455,4 +466,16 @@ function AttachmentModal(props) { AttachmentModal.propTypes = propTypes; AttachmentModal.defaultProps = defaultProps; AttachmentModal.displayName = 'AttachmentModal'; -export default compose(withWindowDimensions, withLocalize)(AttachmentModal); +export default compose( + withWindowDimensions, + withLocalize, + withOnyx({ + transaction: { + key: ({report}) => { + const parentReportAction = ReportActionsUtils.getReportAction(report.parentReportID, report.parentReportActionID); + const transactionID = lodashGet(parentReportAction, ['originalMessage', 'IOUTransactionID'], 0); + return `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`; + }, + }, + } + )(AttachmentModal)); diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index 2cf497717340..b755caa962ef 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -1969,7 +1969,7 @@ function payMoneyRequest(paymentType, chatReport, iouReport) { Navigation.dismissModal(chatReport.reportID); } -function detachReceipt(transactionID, reportID) { +function detachReceipt(transactionID) { const transaction = lodashGet(allTransactions, 'transactionID', {}); const oldReceipt = lodashGet(transaction, 'receipt', {}); const optimisticData = [ @@ -1994,7 +1994,7 @@ function detachReceipt(transactionID, reportID) { }, ]; - API.write('DetachReceipt', {transactionID, receipt}, {optimisticData, failureData}); + API.write('DetachReceipt', {transactionID}, {optimisticData, failureData}); } /** @@ -2211,4 +2211,5 @@ export { createEmptyTransaction, navigateToNextPage, replaceReceipt, + detachReceipt, }; From 28bc51e2926e9ba04a7da33945d3b7030817e762 Mon Sep 17 00:00:00 2001 From: Alberto Date: Wed, 27 Sep 2023 15:38:52 +0800 Subject: [PATCH 20/31] remove extras --- src/components/AttachmentModal.js | 8 ++--- src/libs/actions/Receipt.ts | 60 ------------------------------- 2 files changed, 4 insertions(+), 64 deletions(-) delete mode 100644 src/libs/actions/Receipt.ts diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 84cb554e43f5..9d48c49d02df 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -355,7 +355,7 @@ function AttachmentModal(props) { if (TransactionUtils.hasReceipt(transaction) && TransactionUtils.isReceiptBeingScanned(transaction)) { threeDotMenuItems.push({ icon: Expensicons.Trashcan, - text: props.traIOUnslate('receipt.deleteReceipt'), + text: props.translate('receipt.deleteReceipt'), onSelected: () => { IOU.detachReceipt(transaction.transactionID); }, @@ -396,7 +396,7 @@ function AttachmentModal(props) { onCloseButtonPress={closeModal} shouldShowThreeDotsButton={isAttachmentReceipt} threeDotsAnchorPosition={styles.threeDotsPopoverOffsetAttachmentModal(windowWidth)} - threeDotsMenuItems + threeDotsMenuItems={threeDotMenuItems} shouldOverlay /> @@ -477,5 +477,5 @@ export default compose( return `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`; }, }, - } - )(AttachmentModal)); + }), +)(AttachmentModal); diff --git a/src/libs/actions/Receipt.ts b/src/libs/actions/Receipt.ts deleted file mode 100644 index 106606804ae6..000000000000 --- a/src/libs/actions/Receipt.ts +++ /dev/null @@ -1,60 +0,0 @@ -import Onyx from 'react-native-onyx'; -import lodashGet from 'lodash/get'; -import ONYXKEYS from '../../ONYXKEYS'; -import * as API from '../API'; -import * as CollectionUtils from '../CollectionUtils'; -import Navigation from '../Navigation/Navigation'; -import ROUTES from '../../ROUTES'; -import * as OnyxTypes from '../../types/onyx'; -import CONST from '../../CONST'; - -type TransactionMap = { - [key: string]: OnyxTypes.Transaction; -}; - -const allTransactionData: TransactionMap = {}; -Onyx.connect({ - key: ONYXKEYS.COLLECTION.TRANSACTION, - callback: (data, key) => { - if (!key || !data) { - return; - } - const transactionID = CollectionUtils.extractCollectionItemID(key); - allTransactionData[transactionID] = data; - }, -}); - -/** - * Detaches the receipt from a transaction - */ -function detachReceipt(transactionID: string, reportID: string) { - API.write( - 'DetachReceipt', - {transactionID}, - { - optimisticData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, - value: { - receipt: {}, - }, - }, - ], - failureData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, - value: { - receipt: lodashGet(allTransactionData, [transactionID, 'receipt'], {}), - }, - }, - ], - }, - ); - Navigation.navigate(ROUTES.getReportRoute(reportID), CONST.NAVIGATION.TYPE.UP); -} - -export default { - detachReceipt, -}; From 8d6af6ff5ea74aa002432af5fb59b4164c7b1209 Mon Sep 17 00:00:00 2001 From: Alberto Date: Thu, 28 Sep 2023 12:27:15 +0800 Subject: [PATCH 21/31] Better handle optimistic data --- src/components/AttachmentModal.js | 9 ++++++--- src/libs/actions/IOU.js | 20 ++++++++------------ src/pages/EditRequestPage.js | 1 + 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 9d48c49d02df..5d3bd7191cea 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -101,7 +101,7 @@ const defaultProps = { allowDownload: false, headerTitle: null, report: {}, - transaction: {}, + transaction: undefined, onModalShow: () => {}, onModalHide: () => {}, onCarouselAttachmentChange: () => {}, @@ -352,12 +352,12 @@ function AttachmentModal(props) { }, ]; - if (TransactionUtils.hasReceipt(transaction) && TransactionUtils.isReceiptBeingScanned(transaction)) { + if (TransactionUtils.hasReceipt(props.transaction) && !TransactionUtils.isReceiptBeingScanned(props.transaction)) { threeDotMenuItems.push({ icon: Expensicons.Trashcan, text: props.translate('receipt.deleteReceipt'), onSelected: () => { - IOU.detachReceipt(transaction.transactionID); + IOU.detachReceipt(props.transaction.transactionID, props.report.reportID); }, }); } @@ -472,6 +472,9 @@ export default compose( withOnyx({ transaction: { key: ({report}) => { + if (!report) { + return undefined; + } const parentReportAction = ReportActionsUtils.getReportAction(report.parentReportID, report.parentReportActionID); const transactionID = lodashGet(parentReportAction, ['originalMessage', 'IOUTransactionID'], 0); return `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`; diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index b755caa962ef..1e93508c693f 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -1969,17 +1969,15 @@ function payMoneyRequest(paymentType, chatReport, iouReport) { Navigation.dismissModal(chatReport.reportID); } -function detachReceipt(transactionID) { - const transaction = lodashGet(allTransactions, 'transactionID', {}); - const oldReceipt = lodashGet(transaction, 'receipt', {}); +function detachReceipt(transactionID, reportID) { + const transaction = allTransactions[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`]; + let newTransaction = {...transaction, filename: '', receipt: {}}; + const optimisticData = [ { - onyxMethod: Onyx.METHOD.MERGE, + onyxMethod: Onyx.METHOD.SET, key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, - value: { - receipt: null, - filename: null, - }, + value: newTransaction, }, ]; @@ -1987,14 +1985,12 @@ function detachReceipt(transactionID) { { onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, - value: { - receipt: oldReceipt, - filename: transaction.filename, - }, + value: transaction, }, ]; API.write('DetachReceipt', {transactionID}, {optimisticData, failureData}); + Navigation.dismissModal(reportID); } /** diff --git a/src/pages/EditRequestPage.js b/src/pages/EditRequestPage.js index 5e6e0dd3f17b..1c9e19879e3d 100644 --- a/src/pages/EditRequestPage.js +++ b/src/pages/EditRequestPage.js @@ -79,6 +79,7 @@ const defaultProps = { function EditRequestPage({report, route, parentReport, policy, session, policyTags}) { const parentReportAction = ReportActionsUtils.getParentReportAction(report); const transaction = TransactionUtils.getLinkedTransaction(parentReportAction); + console.log(transaction); const { amount: transactionAmount, currency: transactionCurrency, From cc7ff5ab49e2eee155eb1a45b8aac41f36bd1638 Mon Sep 17 00:00:00 2001 From: Alberto Date: Thu, 28 Sep 2023 12:27:51 +0800 Subject: [PATCH 22/31] remove debug lines --- src/pages/EditRequestPage.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/EditRequestPage.js b/src/pages/EditRequestPage.js index 1c9e19879e3d..5e6e0dd3f17b 100644 --- a/src/pages/EditRequestPage.js +++ b/src/pages/EditRequestPage.js @@ -79,7 +79,6 @@ const defaultProps = { function EditRequestPage({report, route, parentReport, policy, session, policyTags}) { const parentReportAction = ReportActionsUtils.getParentReportAction(report); const transaction = TransactionUtils.getLinkedTransaction(parentReportAction); - console.log(transaction); const { amount: transactionAmount, currency: transactionCurrency, From 22e636cf8fad2d0e66e314ff9f6949fc1c2b36fb Mon Sep 17 00:00:00 2001 From: Alberto Date: Thu, 28 Sep 2023 15:08:03 +0800 Subject: [PATCH 23/31] lint --- src/components/AttachmentModal.js | 10 +++++----- src/libs/actions/IOU.js | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 5d3bd7191cea..54299c61261b 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -5,6 +5,7 @@ import Str from 'expensify-common/lib/str'; import lodashGet from 'lodash/get'; import lodashExtend from 'lodash/extend'; import _ from 'underscore'; +import {withOnyx} from 'react-native-onyx'; import CONST from '../CONST'; import Modal from './Modal'; import AttachmentView from './Attachments/AttachmentView'; @@ -33,10 +34,9 @@ import useNativeDriver from '../libs/useNativeDriver'; import * as ReportActionsUtils from '../libs/ReportActionsUtils'; import useNetwork from '../hooks/useNetwork'; import * as IOU from '../libs/actions/IOU'; -import ONYXKEYS from "../ONYXKEYS"; -import {withOnyx} from "react-native-onyx"; -import transactionPropTypes from "./transactionPropTypes"; -import * as TransactionUtils from "../libs/TransactionUtils"; +import ONYXKEYS from '../ONYXKEYS'; +import transactionPropTypes from './transactionPropTypes'; +import * as TransactionUtils from '../libs/TransactionUtils'; /** * Modal render prop component that exposes modal launching triggers that can be used @@ -336,7 +336,7 @@ function AttachmentModal(props) { const sourceForAttachmentView = props.source || source; - let threeDotMenuItems = [ + const threeDotMenuItems = [ { icon: Expensicons.Camera, text: props.translate('common.replace'), diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index 1e93508c693f..d6405994cc66 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -1971,7 +1971,7 @@ function payMoneyRequest(paymentType, chatReport, iouReport) { function detachReceipt(transactionID, reportID) { const transaction = allTransactions[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`]; - let newTransaction = {...transaction, filename: '', receipt: {}}; + const newTransaction = {...transaction, filename: '', receipt: {}}; const optimisticData = [ { From 9c3bff6fef470df960806bc8fdd3f2d43c62fb37 Mon Sep 17 00:00:00 2001 From: Alberto Date: Thu, 28 Sep 2023 16:47:35 +0800 Subject: [PATCH 24/31] add confirm modal --- src/components/AttachmentModal.js | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 54299c61261b..caea67ac4c0e 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -113,6 +113,7 @@ function AttachmentModal(props) { const [isModalOpen, setIsModalOpen] = useState(props.defaultOpen); const [shouldLoadAttachment, setShouldLoadAttachment] = useState(false); const [isAttachmentInvalid, setIsAttachmentInvalid] = useState(false); + const [isDeleteCommentConfirmModalVisible, setIsDeleteCommentConfirmModalVisible] = useState(false); const [isAuthTokenRequired, setIsAuthTokenRequired] = useState(props.isAuthTokenRequired); const [isAttachmentReceipt, setIsAttachmentReceipt] = useState(false); const [attachmentInvalidReasonTitle, setAttachmentInvalidReasonTitle] = useState(''); @@ -214,6 +215,15 @@ function AttachmentModal(props) { */ const closeConfirmModal = useCallback(() => { setIsAttachmentInvalid(false); + setIsDeleteCommentConfirmModalVisible(false); + }, []); + + /** + * Close the confirm modal. + */ + const deleteAndCloseConfirmModal = useCallback(() => { + IOU.detachReceipt(props.transaction.transactionID, props.report.reportID); + setIsDeleteCommentConfirmModalVisible(false); }, []); /** @@ -357,7 +367,7 @@ function AttachmentModal(props) { icon: Expensicons.Trashcan, text: props.translate('receipt.deleteReceipt'), onSelected: () => { - IOU.detachReceipt(props.transaction.transactionID, props.report.reportID); + setIsDeleteCommentConfirmModalVisible(true); }, }); } @@ -453,6 +463,16 @@ function AttachmentModal(props) { confirmText={translate('common.close')} shouldShowCancelButton={false} /> + {props.children && props.children({ From a6de27fcd2cb5c20077dd03543e290ecf434e754 Mon Sep 17 00:00:00 2001 From: Alberto Date: Thu, 28 Sep 2023 17:14:41 +0800 Subject: [PATCH 25/31] hooks stuff --- src/components/AttachmentModal.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index caea67ac4c0e..25d4399a4797 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -119,6 +119,8 @@ function AttachmentModal(props) { const [attachmentInvalidReasonTitle, setAttachmentInvalidReasonTitle] = useState(''); const [attachmentInvalidReason, setAttachmentInvalidReason] = useState(null); const [source, setSource] = useState(props.source); + const [transaction] = useState(props.transaction); + const [report] = useState(props.report); const [modalType, setModalType] = useState(CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE); const [isConfirmButtonDisabled, setIsConfirmButtonDisabled] = useState(false); const [confirmButtonFadeAnimation] = useState(new Animated.Value(1)); @@ -222,9 +224,9 @@ function AttachmentModal(props) { * Close the confirm modal. */ const deleteAndCloseConfirmModal = useCallback(() => { - IOU.detachReceipt(props.transaction.transactionID, props.report.reportID); + IOU.detachReceipt(transaction.transactionID, report.reportID); setIsDeleteCommentConfirmModalVisible(false); - }, []); + }, [transaction, report]); /** * @param {Object} _file From f0d73af0217a3c56fee29f59817645be753d1965 Mon Sep 17 00:00:00 2001 From: Alberto Date: Tue, 3 Oct 2023 22:30:50 +0800 Subject: [PATCH 26/31] bunch of comments --- src/components/AttachmentModal.js | 64 ++++++++++++++++--------------- src/libs/actions/IOU.js | 2 +- 2 files changed, 34 insertions(+), 32 deletions(-) diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 25d4399a4797..a81745f48cbc 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -80,7 +80,7 @@ const propTypes = { /** The report that has this attachment */ report: reportPropTypes, - /** The transaction associated with the receipt, if any */ + /** The transaction associated with the receipt attachment, if any */ transaction: transactionPropTypes, ...withLocalizePropTypes, @@ -101,7 +101,7 @@ const defaultProps = { allowDownload: false, headerTitle: null, report: {}, - transaction: undefined, + transaction: {}, onModalShow: () => {}, onModalHide: () => {}, onCarouselAttachmentChange: () => {}, @@ -113,7 +113,7 @@ function AttachmentModal(props) { const [isModalOpen, setIsModalOpen] = useState(props.defaultOpen); const [shouldLoadAttachment, setShouldLoadAttachment] = useState(false); const [isAttachmentInvalid, setIsAttachmentInvalid] = useState(false); - const [isDeleteCommentConfirmModalVisible, setIsDeleteCommentConfirmModalVisible] = useState(false); + const [isDeleteReceiptConfirmModalVisible, setIsDeleteReceiptConfirmModalVisible] = useState(false); const [isAuthTokenRequired, setIsAuthTokenRequired] = useState(props.isAuthTokenRequired); const [isAttachmentReceipt, setIsAttachmentReceipt] = useState(false); const [attachmentInvalidReasonTitle, setAttachmentInvalidReasonTitle] = useState(''); @@ -213,19 +213,19 @@ function AttachmentModal(props) { }, [isModalOpen, isConfirmButtonDisabled, props.onConfirm, file, source]); /** - * Close the confirm modal. + * Close the confirm modals. */ const closeConfirmModal = useCallback(() => { setIsAttachmentInvalid(false); - setIsDeleteCommentConfirmModalVisible(false); + setIsDeleteReceiptConfirmModalVisible(false); }, []); /** - * Close the confirm modal. + * Detach the receipt and close the confirm modal. */ const deleteAndCloseConfirmModal = useCallback(() => { IOU.detachReceipt(transaction.transactionID, report.reportID); - setIsDeleteCommentConfirmModalVisible(false); + setIsDeleteReceiptConfirmModalVisible(false); }, [transaction, report]); /** @@ -348,7 +348,7 @@ function AttachmentModal(props) { const sourceForAttachmentView = props.source || source; - const threeDotMenuItems = [ + const threeDotsMenuItems = [ { icon: Expensicons.Camera, text: props.translate('common.replace'), @@ -365,11 +365,11 @@ function AttachmentModal(props) { ]; if (TransactionUtils.hasReceipt(props.transaction) && !TransactionUtils.isReceiptBeingScanned(props.transaction)) { - threeDotMenuItems.push({ + threeDotsMenuItems.push({ icon: Expensicons.Trashcan, text: props.translate('receipt.deleteReceipt'), onSelected: () => { - setIsDeleteCommentConfirmModalVisible(true); + setIsDeleteReceiptConfirmModalVisible(true); }, }); } @@ -408,7 +408,7 @@ function AttachmentModal(props) { onCloseButtonPress={closeModal} shouldShowThreeDotsButton={isAttachmentReceipt} threeDotsAnchorPosition={styles.threeDotsPopoverOffsetAttachmentModal(windowWidth)} - threeDotsMenuItems={threeDotMenuItems} + threeDotsMenuItems={threeDotsMenuItems} shouldOverlay /> @@ -455,26 +455,28 @@ function AttachmentModal(props) { )} - - - + {isAttachmentReceipt ? ( + + ) : ( + + )} {props.children && props.children({ diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index b0480a1f0d10..f5c9722b3b30 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -2115,7 +2115,7 @@ function payMoneyRequest(paymentType, chatReport, iouReport) { } function detachReceipt(transactionID, reportID) { - const transaction = allTransactions[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`]; + const transaction = allTransactions[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`] || {}; const newTransaction = {...transaction, filename: '', receipt: {}}; const optimisticData = [ From b592c3c1cef5bce191c4c50e8109634fe1ec7e1d Mon Sep 17 00:00:00 2001 From: Alberto Date: Wed, 4 Oct 2023 14:36:47 +0800 Subject: [PATCH 27/31] remove unneded params --- src/components/AttachmentModal.js | 13 ++++++------- src/libs/actions/IOU.js | 3 +-- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index a81745f48cbc..dda001227253 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -119,8 +119,6 @@ function AttachmentModal(props) { const [attachmentInvalidReasonTitle, setAttachmentInvalidReasonTitle] = useState(''); const [attachmentInvalidReason, setAttachmentInvalidReason] = useState(null); const [source, setSource] = useState(props.source); - const [transaction] = useState(props.transaction); - const [report] = useState(props.report); const [modalType, setModalType] = useState(CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE); const [isConfirmButtonDisabled, setIsConfirmButtonDisabled] = useState(false); const [confirmButtonFadeAnimation] = useState(new Animated.Value(1)); @@ -221,12 +219,13 @@ function AttachmentModal(props) { }, []); /** - * Detach the receipt and close the confirm modal. + * Detach the receipt and close the modal. */ - const deleteAndCloseConfirmModal = useCallback(() => { - IOU.detachReceipt(transaction.transactionID, report.reportID); + const deleteAndCloseModal = useCallback(() => { + IOU.detachReceipt(props.transaction.transactionID, props.report.reportID); setIsDeleteReceiptConfirmModalVisible(false); - }, [transaction, report]); + Navigation.dismissModal(props.report.reportID); + }, [props.transaction, props.report]); /** * @param {Object} _file @@ -459,7 +458,7 @@ function AttachmentModal(props) { Date: Thu, 5 Oct 2023 07:50:49 +0800 Subject: [PATCH 28/31] more conflicts --- src/components/AttachmentModal.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index b5405e14d528..826e4c820a21 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -31,17 +31,12 @@ import useWindowDimensions from '../hooks/useWindowDimensions'; import Navigation from '../libs/Navigation/Navigation'; import ROUTES from '../ROUTES'; import useNativeDriver from '../libs/useNativeDriver'; -<<<<<<< HEAD import * as ReportActionsUtils from '../libs/ReportActionsUtils'; -======= import * as ReportUtils from '../libs/ReportUtils'; -import * as ReportActionsUtils from '../libs/ReportActionsUtils'; import ONYXKEYS from '../ONYXKEYS'; import * as Policy from '../libs/actions/Policy'; ->>>>>>> main import useNetwork from '../hooks/useNetwork'; import * as IOU from '../libs/actions/IOU'; -import ONYXKEYS from '../ONYXKEYS'; import transactionPropTypes from './transactionPropTypes'; import * as TransactionUtils from '../libs/TransactionUtils'; From 4de580d296026c9f35fb0e914646a8174eb4f3b8 Mon Sep 17 00:00:00 2001 From: Alberto Date: Mon, 9 Oct 2023 12:11:19 +0200 Subject: [PATCH 29/31] conflicts --- src/libs/actions/IOU.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index 8466c0095602..4956209bb784 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -2361,5 +2361,4 @@ export { replaceReceipt, detachReceipt, submitReport, ->>>>>>> main }; From dbce3ec92e04dd6c1749c5489d9db988741f7061 Mon Sep 17 00:00:00 2001 From: Alberto Date: Tue, 10 Oct 2023 11:11:38 +0200 Subject: [PATCH 30/31] remove extra export --- src/libs/actions/IOU.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index abed4fdc1290..32a899f8beee 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -2456,6 +2456,5 @@ export { updateDistanceRequest, replaceReceipt, detachReceipt, - submitReport, getIOUReportID, }; From c3e4a26f18113ea6d372c7655860182f8039dc5d Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Wed, 11 Oct 2023 11:07:36 -0600 Subject: [PATCH 31/31] fix confirm modal on ios --- src/components/AttachmentModal.js | 44 +++++++++++++++---------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 6be59ea4e724..b8bfb4c36122 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -469,29 +469,29 @@ function AttachmentModal(props) { )} )} + {isAttachmentReceipt ? ( + + ) : ( + + )} - {isAttachmentReceipt ? ( - - ) : ( - - )} {props.children && props.children({