Web - App allows user to open request money link of other user and displays amount page twice

src/libs/ReportUtils.js

@@ -3722,6 +3722,21 @@ function getPolicyExpenseChatReportIDByOwner(policyOwner) {
     return expenseChat.reportID;
 }
 
+/**
+ * Check if the report can create the request with type is iouType
+ * @param {Object} report
+ * @param {Array} betas
+ * @param {String} iouType
+ * @returns {Boolean}
+ */
+function canCreateRequest(report, betas, iouType) {
+    const participantAccountIDs = lodashGet(report, 'participantAccountIDs', []);
+    if (shouldDisableWriteActions(report)) {
+        return false;
+    }
+    return getMoneyRequestOptions(report, participantAccountIDs, betas).includes(iouType);
+}
+
 /**
  * @param {String} policyID
  * @param {Array} accountIDs
@@ -4051,6 +4066,7 @@ export {
     getCommentLength,
     getParsedComment,
     getMoneyRequestOptions,
+    canCreateRequest,
     hasIOUWaitingOnCurrentUserBankAccount,
     canRequestMoney,
     getWhisperDisplayNames,

src/pages/ReportDetailsPage.js

@@ -263,7 +263,7 @@ ReportDetailsPage.defaultProps = defaultProps;
 
 export default compose(
     withLocalize,
-    withReportOrNotFound,
+    withReportOrNotFound(),
     withOnyx({
         personalDetails: {
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,

src/pages/ReportParticipantsPage.js

@@ -145,7 +145,7 @@ ReportParticipantsPage.displayName = 'ReportParticipantsPage';
 
 export default compose(
     withLocalize,
-    withReportOrNotFound,
+    withReportOrNotFound(),
     withOnyx({
         personalDetails: {
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,

src/pages/ReportWelcomeMessagePage.js

@@ -123,7 +123,7 @@ ReportWelcomeMessagePage.defaultProps = defaultProps;
 
 export default compose(
     withLocalize,
-    withReportOrNotFound,
+    withReportOrNotFound(),
     withOnyx({
         policy: {
             key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`,

src/pages/RoomInvitePage.js

@@ -250,7 +250,7 @@ RoomInvitePage.defaultProps = defaultProps;
 RoomInvitePage.displayName = 'RoomInvitePage';
 
 export default compose(
-    withReportOrNotFound,
+    withReportOrNotFound(),
     withOnyx({
         personalDetails: {
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,

src/pages/RoomMembersPage.js

@@ -316,7 +316,7 @@ RoomMembersPage.displayName = 'RoomMembersPage';
 export default compose(
     withLocalize,
     withWindowDimensions,
-    withReportOrNotFound,
+    withReportOrNotFound(),
     withOnyx({
         personalDetails: {
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,

src/pages/home/report/ReportDetailsShareCodePage.js

@@ -28,4 +28,4 @@ function ReportDetailsShareCodePage(props) {
 ReportDetailsShareCodePage.propTypes = propTypes;
 ReportDetailsShareCodePage.defaultProps = defaultProps;
 
-export default withReportOrNotFound(ReportDetailsShareCodePage);
+export default withReportOrNotFound()(ReportDetailsShareCodePage);

src/pages/home/report/withReportOrNotFound.js

@@ -9,7 +9,7 @@ import reportPropTypes from '../../reportPropTypes';
 import FullscreenLoadingIndicator from '../../../components/FullscreenLoadingIndicator';
 import * as ReportUtils from '../../../libs/ReportUtils';
 
-export default function (WrappedComponent) {
+export default function (shouldRequireReportID = true) {
     const propTypes = {
         /** The HOC takes an optional ref as a prop and passes it as a ref to the wrapped component.
          * That way, if a ref is passed to a component wrapped in the HOC, the ref is a reference to the wrapped component, not the HOC. */
@@ -29,6 +29,14 @@ export default function (WrappedComponent) {
             }),
         ),
 
+        /** Route params */
+        route: PropTypes.shape({
+            params: PropTypes.shape({
+                /** Report ID passed via route */
+                reportID: PropTypes.string,
+            }),
+        }).isRequired,
+
         /** Beta features list */
         betas: PropTypes.arrayOf(PropTypes.string),
 
@@ -44,67 +52,74 @@ export default function (WrappedComponent) {
         isLoadingReportData: true,
     };
 
-    // eslint-disable-next-line rulesdir/no-negated-variables
-    function WithReportOrNotFound(props) {
-        const contentShown = React.useRef(false);
-
-        const shouldShowFullScreenLoadingIndicator = props.isLoadingReportData && (_.isEmpty(props.report) || !props.report.reportID);
+    return (WrappedComponent) => {
         // eslint-disable-next-line rulesdir/no-negated-variables
-        const shouldShowNotFoundPage = _.isEmpty(props.report) || !props.report.reportID || !ReportUtils.canAccessReport(props.report, props.policies, props.betas);
-
-        // If the content was shown but it's not anymore that means the report was deleted and we are probably navigating out of this screen.
-        // Return null for this case to avoid rendering FullScreenLoadingIndicator or NotFoundPage when animating transition.
-        if (shouldShowNotFoundPage && contentShown.current) {
-            return null;
+        function WithReportOrNotFound(props) {
+            const contentShown = React.useRef(false);
+
+            const isReportIdInParam = !_.isUndefined(props.route.params.reportID);
+
+            // If we should require reportID or we have a reportID in the route, we will check the reportID is valid or not
+            if (shouldRequireReportID || isReportIdInParam) {
+                const shouldShowFullScreenLoadingIndicator = props.isLoadingReportData && (_.isEmpty(props.report) || !props.report.reportID);
+                // eslint-disable-next-line rulesdir/no-negated-variables
+                const shouldShowNotFoundPage = _.isEmpty(props.report) || !props.report.reportID || !ReportUtils.canAccessReport(props.report, props.policies, props.betas);
+
+                // If the content was shown but it's not anymore that means the report was deleted and we are probably navigating out of this screen.
+                // Return null for this case to avoid rendering FullScreenLoadingIndicator or NotFoundPage when animating transition.
+                if (shouldShowNotFoundPage && contentShown.current) {
+                    return null;
+                }
+
+                if (shouldShowFullScreenLoadingIndicator) {
+                    return <FullscreenLoadingIndicator />;
+                }
+
+                if (shouldShowNotFoundPage) {
+                    return <NotFoundPage />;
+                }
+            }
+
+            if (!contentShown.current) {
+                contentShown.current = true;
+            }
+
+            const rest = _.omit(props, ['forwardedRef']);
+            return (
+                <WrappedComponent
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...rest}
+                    ref={props.forwardedRef}
+                />
+            );
         }
 
-        if (shouldShowFullScreenLoadingIndicator) {
-            return <FullscreenLoadingIndicator />;
-        }
+        WithReportOrNotFound.propTypes = propTypes;
+        WithReportOrNotFound.defaultProps = defaultProps;
+        WithReportOrNotFound.displayName = `withReportOrNotFound(${getComponentDisplayName(WrappedComponent)})`;
 
-        if (shouldShowNotFoundPage) {
-            return <NotFoundPage />;
-        }
-
-        if (!contentShown.current) {
-            contentShown.current = true;
-        }
-
-        const rest = _.omit(props, ['forwardedRef']);
-        return (
-            <WrappedComponent
+        // eslint-disable-next-line rulesdir/no-negated-variables
+        const withReportOrNotFound = React.forwardRef((props, ref) => (
+            <WithReportOrNotFound
                 // eslint-disable-next-line react/jsx-props-no-spreading
-                {...rest}
-                ref={props.forwardedRef}
+                {...props}
+                forwardedRef={ref}
             />
-        );
-    }
-
-    WithReportOrNotFound.propTypes = propTypes;
-    WithReportOrNotFound.defaultProps = defaultProps;
-    WithReportOrNotFound.displayName = `withReportOrNotFound(${getComponentDisplayName(WrappedComponent)})`;
-
-    // eslint-disable-next-line rulesdir/no-negated-variables
-    const withReportOrNotFound = React.forwardRef((props, ref) => (
-        <WithReportOrNotFound
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            forwardedRef={ref}
-        />
-    ));
-
-    return withOnyx({
-        report: {
-            key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
-        },
-        isLoadingReportData: {
-            key: ONYXKEYS.IS_LOADING_REPORT_DATA,
-        },
-        betas: {
-            key: ONYXKEYS.BETAS,
-        },
-        policies: {
-            key: ONYXKEYS.COLLECTION.POLICY,
-        },
-    })(withReportOrNotFound);
+        ));
+
+        return withOnyx({
+            report: {
+                key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
+            },
+            isLoadingReportData: {
+                key: ONYXKEYS.IS_LOADING_REPORT_DATA,
+            },
+            betas: {
+                key: ONYXKEYS.BETAS,
+            },
+            policies: {
+                key: ONYXKEYS.COLLECTION.POLICY,
+            },
+        })(withReportOrNotFound);
+    };
 }

src/pages/iou/MoneyRequestSelectorPage.js

@@ -3,6 +3,7 @@ import {View} from 'react-native';
 import React, {useEffect, useState} from 'react';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
+import _ from 'underscore';
 import ONYXKEYS from '../../ONYXKEYS';
 import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
 import ScreenWrapper from '../../components/ScreenWrapper';
@@ -19,6 +20,8 @@ import NewDistanceRequestPage from './NewDistanceRequestPage';
 import DragAndDropProvider from '../../components/DragAndDrop/Provider';
 import OnyxTabNavigator, {TopTab} from '../../libs/Navigation/OnyxTabNavigator';
 import NewRequestAmountPage from './steps/NewRequestAmountPage';
+import withReportOrNotFound from '../home/report/withReportOrNotFound';
+import compose from '../../libs/compose';
 import reportPropTypes from '../reportPropTypes';
 import * as ReportUtils from '../../libs/ReportUtils';
 import usePrevious from '../../hooks/usePrevious';
@@ -41,11 +44,15 @@ const propTypes = {
 
     /** Which tab has been selected */
     selectedTab: PropTypes.string,
+
+    /** Beta features list */
+    betas: PropTypes.arrayOf(PropTypes.string),
 };
 
 const defaultProps = {
     selectedTab: CONST.TAB.SCAN,
     report: {},
+    betas: [],
 };
 
 function MoneyRequestSelectorPage(props) {
@@ -69,6 +76,8 @@ function MoneyRequestSelectorPage(props) {
         IOU.resetMoneyRequestInfo(moneyRequestID);
     };
 
+    // Allow the user to create the request if we are creating the request in global menu or the report can create the request
+    const isAllowedToCreateRequest = _.isEmpty(props.report.reportID) || ReportUtils.canCreateRequest(props.report, props.betas, iouType);
     const prevSelectedTab = usePrevious(props.selectedTab);
 
     useEffect(() => {
@@ -89,7 +98,7 @@ function MoneyRequestSelectorPage(props) {
             testID={MoneyRequestSelectorPage.displayName}
         >
             {({safeAreaPaddingBottomStyle}) => (
-                <FullPageNotFoundView shouldShow={!IOUUtils.isValidMoneyRequestType(iouType)}>
+                <FullPageNotFoundView shouldShow={!IOUUtils.isValidMoneyRequestType(iouType) || !isAllowedToCreateRequest}>
                     <DragAndDropProvider
                         isDisabled={props.selectedTab !== CONST.TAB.SCAN}
                         setIsDraggingOver={setIsDraggingOver}
@@ -144,11 +153,11 @@ MoneyRequestSelectorPage.propTypes = propTypes;
 MoneyRequestSelectorPage.defaultProps = defaultProps;
 MoneyRequestSelectorPage.displayName = 'MoneyRequestSelectorPage';
 
-export default withOnyx({
-    report: {
-        key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
-    },
-    selectedTab: {
-        key: `${ONYXKEYS.COLLECTION.SELECTED_TAB}${CONST.TAB.RECEIPT_TAB_ID}`,
-    },
-})(MoneyRequestSelectorPage);
+export default compose(
+    withReportOrNotFound(false),
+    withOnyx({
+        selectedTab: {
+            key: `${ONYXKEYS.SELECTED_TAB}_${CONST.TAB.RECEIPT_TAB_ID}`,
+        },
+    }),
+)(MoneyRequestSelectorPage);

src/pages/iou/steps/MoneyRequestConfirmPage.js

@@ -130,14 +130,14 @@ function MoneyRequestConfirmPage(props) {
             IOU.resetMoneyRequestInfo(moneyRequestId);
         }
 
-        if (_.isEmpty(props.iou.participants) || (props.iou.amount === 0 && !props.iou.receiptPath && !isDistanceRequest) || shouldReset) {
+        if (_.isEmpty(props.iou.participants) || (props.iou.amount === 0 && !props.iou.receiptPath && !isDistanceRequest) || shouldReset || ReportUtils.isArchivedRoom(props.report)) {
             Navigation.goBack(ROUTES.MONEY_REQUEST.getRoute(iouType.current, reportID.current), true);
         }
 
         return () => {
             prevMoneyRequestId.current = props.iou.id;
         };
-    }, [props.iou.participants, props.iou.amount, props.iou.id, props.iou.receiptPath, isDistanceRequest]);
+    }, [props.iou.participants, props.iou.amount, props.iou.id, props.iou.receiptPath, isDistanceRequest, props.report]);
 
     const navigateBack = () => {
         let fallback;

src/pages/iou/steps/NewRequestAmountPage.js

@@ -8,7 +8,6 @@ import _ from 'underscore';
 import ONYXKEYS from '../../../ONYXKEYS';
 import Navigation from '../../../libs/Navigation/Navigation';
 import ROUTES from '../../../ROUTES';
-import * as ReportUtils from '../../../libs/ReportUtils';
 import * as CurrencyUtils from '../../../libs/CurrencyUtils';
 import reportPropTypes from '../../reportPropTypes';
 import * as IOU from '../../../libs/actions/IOU';
@@ -83,14 +82,6 @@ function NewRequestAmountPage({route, iou, report, selectedTab}) {
         }, []),
     );
 
-    // Check and dismiss modal
-    useEffect(() => {
-        if (!ReportUtils.shouldDisableWriteActions(report)) {
-            return;
-        }
-        Navigation.dismissModal(reportID);
-    }, [report, reportID]);
-
     // Because we use Onyx to store IOU info, when we try to make two different money requests from different tabs,
     // it can result in an IOU sent with improper values. In such cases we want to reset the flow and redirect the user to the first step of the IOU.
     useEffect(() => {

src/pages/settings/Report/NotificationPreferencePage.js

@@ -56,4 +56,4 @@ function NotificationPreferencePage(props) {
 NotificationPreferencePage.displayName = 'NotificationPreferencePage';
 NotificationPreferencePage.propTypes = propTypes;
 
-export default compose(withLocalize, withReportOrNotFound)(NotificationPreferencePage);
+export default compose(withLocalize, withReportOrNotFound())(NotificationPreferencePage);

src/pages/settings/Report/ReportSettingsPage.js

@@ -206,7 +206,7 @@ ReportSettingsPage.propTypes = propTypes;
 ReportSettingsPage.defaultProps = defaultProps;
 ReportSettingsPage.displayName = 'ReportSettingsPage';
 export default compose(
-    withReportOrNotFound,
+    withReportOrNotFound(),
     withOnyx({
         policies: {
             key: ONYXKEYS.COLLECTION.POLICY,

src/pages/settings/Report/RoomNamePage.js

@@ -118,7 +118,7 @@ RoomNamePage.displayName = 'RoomNamePage';
 
 export default compose(
     withLocalize,
-    withReportOrNotFound,
+    withReportOrNotFound(),
     withOnyx({
         reports: {
             key: ONYXKEYS.COLLECTION.REPORT,

src/pages/settings/Report/WriteCapabilityPage.js

@@ -67,7 +67,7 @@ WriteCapabilityPage.defaultProps = defaultProps;
 
 export default compose(
     withLocalize,
-    withReportOrNotFound,
+    withReportOrNotFound(),
     withOnyx({
         policy: {
             key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`,

src/pages/tasks/TaskDescriptionPage.js

@@ -130,7 +130,7 @@ TaskDescriptionPage.displayName = 'TaskDescriptionPage';
 export default compose(
     withLocalize,
     withCurrentUserPersonalDetails,
-    withReportOrNotFound,
+    withReportOrNotFound(),
     withOnyx({
         session: {
             key: ONYXKEYS.SESSION,

src/pages/tasks/TaskTitlePage.js

@@ -125,7 +125,7 @@ TaskTitlePage.displayName = 'TaskTitlePage';
 export default compose(
     withLocalize,
     withCurrentUserPersonalDetails,
-    withReportOrNotFound,
+    withReportOrNotFound(),
     withOnyx({
         session: {
             key: ONYXKEYS.SESSION,