From 8c9af63d490894cf34b16a6f95c96d7aca393f3e Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Tue, 27 Feb 2024 21:15:50 +0100 Subject: [PATCH 1/2] feat: move scan tab to separate component --- .../step/IOURequestStepConfirmation.js | 7 +++ src/pages/share/ScanTab.tsx | 47 ++++++++++++++++++ src/pages/share/ShareRootPage.tsx | 49 ++----------------- src/pages/share/ShareTab.tsx | 0 4 files changed, 59 insertions(+), 44 deletions(-) create mode 100644 src/pages/share/ScanTab.tsx create mode 100644 src/pages/share/ShareTab.tsx diff --git a/src/pages/iou/request/step/IOURequestStepConfirmation.js b/src/pages/iou/request/step/IOURequestStepConfirmation.js index 0744fbd600a7..5213ba1485f4 100644 --- a/src/pages/iou/request/step/IOURequestStepConfirmation.js +++ b/src/pages/iou/request/step/IOURequestStepConfirmation.js @@ -85,6 +85,13 @@ function IOURequestStepConfirmation({ }, transaction, }) { + console.log('%%%%%\n', 'currentUserPersonalDetails', currentUserPersonalDetails); + console.log('%%%%%\n', 'personalDetails', personalDetails); + console.log('%%%%%\n', 'policy', policy); + console.log('%%%%%\n', 'policyTags', policyTags); + console.log('%%%%%\n', 'policyCategories', policyCategories); + console.log('%%%%%\n', 'report', report); + console.log('%%%%%\n', 'transaction', transaction); const styles = useThemeStyles(); const {translate} = useLocalize(); const {windowWidth} = useWindowDimensions(); diff --git a/src/pages/share/ScanTab.tsx b/src/pages/share/ScanTab.tsx new file mode 100644 index 000000000000..80152fc64e5a --- /dev/null +++ b/src/pages/share/ScanTab.tsx @@ -0,0 +1,47 @@ +import React, {useCallback, useRef} from 'react'; +import type {OnyxEntry} from 'react-native-onyx'; +import type {ValueOf} from 'type-fest'; +import * as IOU from '@libs/actions/IOU'; +import Navigation from '@libs/Navigation/Navigation'; +import * as ReportUtils from '@libs/ReportUtils'; +import MoneyRequestParticipantsSelector from '@pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector'; +import CONST from '@src/CONST'; +import ROUTES from '@src/ROUTES'; +import type {Report} from '@src/types/onyx'; + +type ScanTabProps = { + iou?: OnyxEntry; +}; + +// eslint-disable-next-line rulesdir/no-negated-variables +function ScanTab({iou}: ScanTabProps) { + const transactionID = CONST.IOU.OPTIMISTIC_TRANSACTION_ID; + const optimisticReportID = ReportUtils.generateReportID(); + const selectedReportID = useRef(optimisticReportID); + + const goToNextStep = useCallback( + (iouType: ValueOf) => { + // const nextStepIOUType = numberOfParticipants.current === 1 ? CONST.IOU.TYPE.REQUEST : CONST.IOU.TYPE.SPLIT; + IOU.initMoneyRequest(optimisticReportID, false, CONST.IOU.REQUEST_TYPE.SCAN); + IOU.setMoneyRequestTag(transactionID, ''); + IOU.setMoneyRequestCategory(transactionID, ''); + Navigation.navigate(ROUTES.SHARE_SCAN_CONFIRM.getRoute(iouType, transactionID, selectedReportID.current || optimisticReportID)); + }, + [transactionID, optimisticReportID], + ); + + return ( + goToNextStep(CONST.IOU.TYPE.REQUEST)} + navigateToSplit={() => goToNextStep(CONST.IOU.TYPE.SPLIT)} + iouType={CONST.IOU.TYPE.REQUEST} + iouRequestType={CONST.IOU.REQUEST_TYPE.SCAN} + isScanRequest + /> + ); +} + +export default ScanTab; diff --git a/src/pages/share/ShareRootPage.tsx b/src/pages/share/ShareRootPage.tsx index b482d15a1030..7a13a2767057 100644 --- a/src/pages/share/ShareRootPage.tsx +++ b/src/pages/share/ShareRootPage.tsx @@ -1,4 +1,4 @@ -import React, {useCallback, useEffect, useRef} from 'react'; +import React, {useEffect, useRef} from 'react'; import type {AppStateStatus} from 'react-native'; import {AppState, View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; @@ -6,19 +6,17 @@ import {withOnyx} from 'react-native-onyx'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import TabSelector from '@components/TabSelector/TabSelector'; +import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import * as IOU from '@libs/actions/IOU'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; -import * as ReportUtils from '@libs/ReportUtils'; import Navigation from '@navigation/Navigation'; import OnyxTabNavigator, {TopTab} from '@navigation/OnyxTabNavigator'; -import MoneyRequestParticipantsSelector from '@pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector'; import CONST from '@src/CONST'; import ShareExtensionHandlerModule from '@src/modules/ShareExtensionHandlerModule'; import ONYXKEYS from '@src/ONYXKEYS'; -import ROUTES from '@src/ROUTES'; import type {Report} from '@src/types/onyx'; +import ScanTab from './ScanTab'; type ShareRootPageOnyxProps = { selectedTab: OnyxEntry; @@ -29,12 +27,9 @@ type ShareRootPageOnyxProps = { type ShareRootPageProps = ShareRootPageOnyxProps; function ShareRootPage({selectedTab, iou}: ShareRootPageProps) { - const transactionID = CONST.IOU.OPTIMISTIC_TRANSACTION_ID; const styles = useThemeStyles(); const {translate} = useLocalize(); const fileIsScannable = false; - const optimisticReportID = ReportUtils.generateReportID(); - const selectedReportID = useRef(optimisticReportID); const appState = useRef(AppState.currentState); const handleAppStateChange = (nextAppState: AppStateStatus) => { @@ -62,15 +57,6 @@ function ShareRootPage({selectedTab, iou}: ShareRootPageProps) { Navigation.dismissModal(); }; - const goToNextStep = useCallback(() => { - // const nextStepIOUType = numberOfParticipants.current === 1 ? CONST.IOU.TYPE.REQUEST : CONST.IOU.TYPE.SPLIT; - const nextStepIOUType = CONST.IOU.TYPE.REQUEST; - IOU.startMoneyRequest_temporaryForRefactor(optimisticReportID, false, CONST.IOU.REQUEST_TYPE.SCAN); - IOU.setMoneyRequestTag(transactionID, ''); - IOU.resetMoneyRequestCategory_temporaryForRefactor(transactionID); - Navigation.navigate(ROUTES.SHARE_SCAN_CONFIRM.getRoute(nextStepIOUType, transactionID, selectedReportID.current || optimisticReportID)); - }, [transactionID, optimisticReportID]); - return ( )} > - - {() => ( - - )} - - - {() => ( - - )} - + {() => test} + {() => } diff --git a/src/pages/share/ShareTab.tsx b/src/pages/share/ShareTab.tsx new file mode 100644 index 000000000000..e69de29bb2d1 From 6953e260881c10e405b97e1d736a0e3cd1a5d4bd Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Tue, 27 Feb 2024 22:10:43 +0100 Subject: [PATCH 2/2] feat: add support for split requests --- .../step/IOURequestStepConfirmation.js | 7 -- src/pages/share/ScanTab.tsx | 64 +++++++++++++------ src/pages/share/ShareRootPage.tsx | 11 +--- 3 files changed, 46 insertions(+), 36 deletions(-) diff --git a/src/pages/iou/request/step/IOURequestStepConfirmation.js b/src/pages/iou/request/step/IOURequestStepConfirmation.js index 5213ba1485f4..0744fbd600a7 100644 --- a/src/pages/iou/request/step/IOURequestStepConfirmation.js +++ b/src/pages/iou/request/step/IOURequestStepConfirmation.js @@ -85,13 +85,6 @@ function IOURequestStepConfirmation({ }, transaction, }) { - console.log('%%%%%\n', 'currentUserPersonalDetails', currentUserPersonalDetails); - console.log('%%%%%\n', 'personalDetails', personalDetails); - console.log('%%%%%\n', 'policy', policy); - console.log('%%%%%\n', 'policyTags', policyTags); - console.log('%%%%%\n', 'policyCategories', policyCategories); - console.log('%%%%%\n', 'report', report); - console.log('%%%%%\n', 'transaction', transaction); const styles = useThemeStyles(); const {translate} = useLocalize(); const {windowWidth} = useWindowDimensions(); diff --git a/src/pages/share/ScanTab.tsx b/src/pages/share/ScanTab.tsx index 80152fc64e5a..412e3b795841 100644 --- a/src/pages/share/ScanTab.tsx +++ b/src/pages/share/ScanTab.tsx @@ -1,47 +1,71 @@ import React, {useCallback, useRef} from 'react'; +import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; -import type {ValueOf} from 'type-fest'; import * as IOU from '@libs/actions/IOU'; import Navigation from '@libs/Navigation/Navigation'; import * as ReportUtils from '@libs/ReportUtils'; import MoneyRequestParticipantsSelector from '@pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector'; import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import type {Report} from '@src/types/onyx'; +import type {Transaction} from '@src/types/onyx'; +import type {Participant} from '@src/types/onyx/IOU'; -type ScanTabProps = { - iou?: OnyxEntry; +type ScanTabOnyxProps = { + transaction?: OnyxEntry; }; +type ScanTabProps = ScanTabOnyxProps; + // eslint-disable-next-line rulesdir/no-negated-variables -function ScanTab({iou}: ScanTabProps) { +function ScanTab({transaction}: ScanTabProps) { const transactionID = CONST.IOU.OPTIMISTIC_TRANSACTION_ID; const optimisticReportID = ReportUtils.generateReportID(); const selectedReportID = useRef(optimisticReportID); + const numberOfParticipants = useRef(transaction?.participants?.length); + + const goToNextStep = useCallback(() => { + const nextStepIOUType = numberOfParticipants.current === 1 ? CONST.IOU.TYPE.REQUEST : CONST.IOU.TYPE.SPLIT; + IOU.initMoneyRequest(optimisticReportID, false, CONST.IOU.REQUEST_TYPE.SCAN); + IOU.setMoneyRequestTag(transactionID, ''); + IOU.setMoneyRequestCategory(transactionID, ''); + IOU.setMoneyRequestParticipants_temporaryForRefactor(transactionID, transaction?.participants ?? []); + Navigation.navigate(ROUTES.SHARE_SCAN_CONFIRM.getRoute(nextStepIOUType, transactionID, selectedReportID.current || optimisticReportID)); + }, [transactionID, optimisticReportID]); + + const addParticipant = useCallback( + (val: Participant[]) => { + IOU.setMoneyRequestParticipants_temporaryForRefactor(transactionID, val); + numberOfParticipants.current = val.length; + + // When multiple participants are selected, the reportID is generated at the end of the confirmation step. + // So we are resetting selectedReportID ref to the reportID coming from params. + if (val.length !== 1) { + selectedReportID.current = optimisticReportID; + return; + } - const goToNextStep = useCallback( - (iouType: ValueOf) => { - // const nextStepIOUType = numberOfParticipants.current === 1 ? CONST.IOU.TYPE.REQUEST : CONST.IOU.TYPE.SPLIT; - IOU.initMoneyRequest(optimisticReportID, false, CONST.IOU.REQUEST_TYPE.SCAN); - IOU.setMoneyRequestTag(transactionID, ''); - IOU.setMoneyRequestCategory(transactionID, ''); - Navigation.navigate(ROUTES.SHARE_SCAN_CONFIRM.getRoute(iouType, transactionID, selectedReportID.current || optimisticReportID)); + // When a participant is selected, the reportID needs to be saved because that's the reportID that will be used in the confirmation step. + selectedReportID.current = val?.[0].reportID ?? optimisticReportID; }, - [transactionID, optimisticReportID], + [optimisticReportID, transactionID], ); return ( goToNextStep(CONST.IOU.TYPE.REQUEST)} - navigateToSplit={() => goToNextStep(CONST.IOU.TYPE.SPLIT)} + participants={transaction?.participants ?? []} + onAddParticipants={addParticipant} + navigateToRequest={goToNextStep} + navigateToSplit={goToNextStep} iouType={CONST.IOU.TYPE.REQUEST} - iouRequestType={CONST.IOU.REQUEST_TYPE.SCAN} isScanRequest /> ); } -export default ScanTab; +export default withOnyx({ + // @ts-expect-error to fix + transaction: { + key: `${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${CONST.IOU.OPTIMISTIC_TRANSACTION_ID}`, + }, +})(ScanTab); diff --git a/src/pages/share/ShareRootPage.tsx b/src/pages/share/ShareRootPage.tsx index 7a13a2767057..1fdbb1a5a43f 100644 --- a/src/pages/share/ShareRootPage.tsx +++ b/src/pages/share/ShareRootPage.tsx @@ -15,18 +15,15 @@ import OnyxTabNavigator, {TopTab} from '@navigation/OnyxTabNavigator'; import CONST from '@src/CONST'; import ShareExtensionHandlerModule from '@src/modules/ShareExtensionHandlerModule'; import ONYXKEYS from '@src/ONYXKEYS'; -import type {Report} from '@src/types/onyx'; import ScanTab from './ScanTab'; type ShareRootPageOnyxProps = { selectedTab: OnyxEntry; - - iou: OnyxEntry; }; type ShareRootPageProps = ShareRootPageOnyxProps; -function ShareRootPage({selectedTab, iou}: ShareRootPageProps) { +function ShareRootPage({selectedTab}: ShareRootPageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const fileIsScannable = false; @@ -84,7 +81,7 @@ function ShareRootPage({selectedTab, iou}: ShareRootPageProps) { )} > {() => test} - {() => } + {() => } @@ -97,8 +94,4 @@ export default withOnyx({ selectedTab: { key: `${ONYXKEYS.COLLECTION.SELECTED_TAB}${CONST.TAB.RECEIPT_TAB_ID}`, }, - // @ts-expect-error To fix - iou: { - key: ONYXKEYS.IOU, - }, })(ShareRootPage);