[HOLD App # 28618] Request & send money - User is redirected to Amount page from Amount page from deep link

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 1.3.87-1

Reproducible in staging?: Yes

Reproducible in production?: Yes

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

Issue found when executing PR #29655

Action Performed:

1. Go to staging.new.expensify.com
2. Paste Request money link (https://staging.new.expensify.com/request/new
   ) to any chat,
   3, Click on the link above.
3. Enter amount and click Next.
4. Repeat Step 2-4 with Send money link (https://staging.new.expensify.com/send/new
   ).

Expected Result:

User will be redirected to the next step of the Request money/Send money process

Actual Result:

The process is looped. Instead of proceeding to the next step, user lands on the enter amount page again

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

Bug6242961_1697721243249.20231019_195657.mp4

MacOS: Desktop

View all open jobs on GitHub

[melvin-bot]

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.

[melvin-bot]

Triggered auto assignment to @joekaufmanexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @Ollyws (External)

[barros001]

Proposal

Please re-state the problem that we are trying to solve in this issue.

If a user clicks on a link to request money (eg: https://staging.new.expensify.com/request/new), enter an amount, click next and then proceed to click on a link to send money (eg: https://staging.new.expensify.com/send/new), the amount will be pre-populated but after clicking next, it will render the amount screen again. The same happens if you invert the order of the links (send money first and then request money)

What is the root cause of that problem?

The problem is that a single IOU object is used for both send and request money screens. When sending money, the id is send and when requesting money the id is request. When you are in, say, the money screen, enter an amount and click Next, the IOU will be persisted with id = "send". If you then click the request money link, that IOU will be loaded and will still have id = "send". When you click next, the following method will be executed:

IOU.navigateToNextPage(iou, iouType, report);

In this case, iou.id = 'send' and iouType = 'request'.

The first thing this method does is check if the ID of the stored IOU is different than the current IOU being created/edit, and if it is, it will reset the the stored IOU, triggering a screen re-render, which will re-render the amount screen:

    const moneyRequestID = `${iouType}${report.reportID || ''}`;
    const shouldReset = iou.id !== moneyRequestID;

    // If the money request ID in Onyx does not match the ID from params, we want to start a new request
    // with the ID from params. We need to clear the participants in case the new request is initiated from FAB.
    if (shouldReset) {
        resetMoneyRequestInfo(moneyRequestID);
    }

What changes do you think we should make in order to solve the problem?

This problem does not happen when you use the FAB to initiate Send or Receive money. That's because each of these buttons will first call resetMoneyRequestInfo before loading the screen.

function startMoneyRequest(iouType, reportID = '') {
    resetMoneyRequestInfo(`${iouType}${reportID}`);
    Navigation.navigate(ROUTES.MONEY_REQUEST.getRoute(iouType, reportID));
}

This will stop this issue from happening. When clicking on links, we don't have the opportunity to reset before it loads, causing this problem.

My proposal is to call resetMoneyRequestInfo when the screen is first mounted, on src/pages/iou/MoneyRequestSelectorPage.js, but ONLY if there's a divergence between iou currently in Onyx and the url parameters, as follows:

    // reset money request info when screen is first loaded
    // but only if there's a divergence between current iou and url parameters
    useEffect(() => {
        if (iou.id === `${iouType}${reportID}`) {
            return;
        }

        resetMoneyRequestInfo();
    }, []);

This will resolve the inconsistence while still allowing user to reload the screen and continue right where it was left off (we will not reset because the url parameters still match current IOU.

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[FitseTLT]

Proposal

Please re-state the problem that we are trying to solve in this issue.

User redirected from amount page to amount page (instead of participants page) when using deep link

What is the root cause of that problem?

The problem occurs when there is a mismatch between iouType (which is found from route params) and iou.id which is found from the IOU value saved in ONYX. So if the value of the iou was 'request' and we are creating 'send' iou or vice versa navigateToNextPage resets the iou value. Because of this line

App/src/libs/actions/IOU.js

Lines 2863 to 2871 in eb5fec2

	function navigateToNextPage(iou, iouType, report, path = '') {
	const moneyRequestID = `${iouType}${report.reportID || ''}`;
	const shouldReset = iou.id !== moneyRequestID;
	// If the money request ID in Onyx does not match the ID from params, we want to start a new request
	// with the ID from params. We need to clear the participants in case the new request is initiated from FAB.
	if (shouldReset) {
	resetMoneyRequestInfo(moneyRequestID);
	}

But the resetMoneyRequestInfo function resets all the iou properties including iou.amount (to 0). So in the MoneyRequestParticipantsPage this lines of code will navigate it back because iou.amount is 0.

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js

Lines 97 to 99 in eb5fec2

	if (!isDistanceRequest && ((iou.amount === 0 && !iou.receiptPath) || shouldReset)) {
	navigateBack(true);
	}

What changes do you think we should make in order to solve the problem?

We need to update resetMoneyRequestInfo to have the option not to reset the amount if needed. Like this,

function resetMoneyRequestInfo(id = '', donResetAmount = false) { const created = currentDate || format(new Date(), CONST.DATE.FNS_FORMAT_STRING); Onyx.merge(ONYXKEYS.IOU, { id, ...(!donResetAmount && {amount: 0}), currency: lodashGet(currentUserPersonalDetails, 'localCurrencyCode', CONST.CURRENCY.USD), comment: '', participants: [], merchant: CONST.TRANSACTION.DEFAULT_MERCHANT, category: '', tag: '', created, receiptPath: '', receiptFilename: '', transactionID: '', billable: null, }); }
and replace

App/src/libs/actions/IOU.js

Lines 2863 to 2871 in eb5fec2

	function navigateToNextPage(iou, iouType, report, path = '') {
	const moneyRequestID = `${iouType}${report.reportID || ''}`;
	const shouldReset = iou.id !== moneyRequestID;
	// If the money request ID in Onyx does not match the ID from params, we want to start a new request
	// with the ID from params. We need to clear the participants in case the new request is initiated from FAB.
	if (shouldReset) {
	resetMoneyRequestInfo(moneyRequestID);
	}

to

function navigateToNextPage(iou, iouType, report, path = '') { const moneyRequestID =${iouType}${report.reportID || ''}`;
const shouldReset = iou.id !== moneyRequestID;

// If the money request ID in Onyx does not match the ID from params, we want to start a new request
// with the ID from params. We need to clear the participants in case the new request is initiated from FAB.
if (shouldReset) {
    resetMoneyRequestInfo(moneyRequestID, true);
}

`
Result

6.New.Expensify.mp4

What alternative solutions did you explore? (Optional)

[cooldev900]

Proposal

from: @cooldev900

Please re-state the problem that we are trying to solve in this issue.

If a user clicks on a link to request money (eg: https://staging.new.expensify.com/request/new), enter an amount, click next and then proceed to click on a link to send money (eg: https://staging.new.expensify.com/send/new), the amount will be pre-populated but after clicking next, it will render the amount screen again.

What is the root cause of that problem?

The problem is that a single IOU object is used for both send and request money screens, and the id of IOU object will become "" after new request is handled because both sendMoney(send) and createTransaction(request) in MoneyRequestConfirmPage calls resetMoneyRequestInfo function without id.

App/src/libs/actions/IOU.js

Lines 124 to 141 in 8dba113

	function resetMoneyRequestInfo(id = '') {
	const created = currentDate || format(new Date(), CONST.DATE.FNS_FORMAT_STRING);
	Onyx.merge(ONYXKEYS.IOU, {
	id,
	amount: 0,
	currency: lodashGet(currentUserPersonalDetails, 'localCurrencyCode', CONST.CURRENCY.USD),
	comment: '',
	participants: [],
	merchant: CONST.TRANSACTION.DEFAULT_MERCHANT,
	category: '',
	tag: '',
	created,
	receiptPath: '',
	receiptFilename: '',
	transactionID: '',
	billable: null,
	});
	}

App/src/pages/iou/steps/MoneyRequestConfirmPage.js

Lines 295 to 311 in 302cebf

	const sendMoney = useCallback(
	(paymentMethodType) => {
	const currency = props.iou.currency;
	const trimmedComment = props.iou.comment.trim();
	const participant = participants[0];
	if (paymentMethodType === CONST.IOU.PAYMENT_TYPE.ELSEWHERE) {
	IOU.sendMoneyElsewhere(props.report, props.iou.amount, currency, trimmedComment, props.currentUserPersonalDetails.accountID, participant);
	return;
	}
	if (paymentMethodType === CONST.IOU.PAYMENT_TYPE.EXPENSIFY) {
	IOU.sendMoneyWithWallet(props.report, props.iou.amount, currency, trimmedComment, props.currentUserPersonalDetails.accountID, participant);
	}
	},
	[props.iou.amount, props.iou.comment, participants, props.iou.currency, props.currentUserPersonalDetails.accountID, props.report],
	);

App/src/pages/iou/steps/MoneyRequestConfirmPage.js

Lines 295 to 311 in 302cebf

	const sendMoney = useCallback(
	(paymentMethodType) => {
	const currency = props.iou.currency;
	const trimmedComment = props.iou.comment.trim();
	const participant = participants[0];
	if (paymentMethodType === CONST.IOU.PAYMENT_TYPE.ELSEWHERE) {
	IOU.sendMoneyElsewhere(props.report, props.iou.amount, currency, trimmedComment, props.currentUserPersonalDetails.accountID, participant);
	return;
	}
	if (paymentMethodType === CONST.IOU.PAYMENT_TYPE.EXPENSIFY) {
	IOU.sendMoneyWithWallet(props.report, props.iou.amount, currency, trimmedComment, props.currentUserPersonalDetails.accountID, participant);
	}
	},
	[props.iou.amount, props.iou.comment, participants, props.iou.currency, props.currentUserPersonalDetails.accountID, props.report],
	);

App/src/libs/actions/IOU.js

Lines 1259 to 1279 in 8dba113

	function splitBillAndOpenReport(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, category) {
	const {splitData, splits, onyxData} = createSplitsAndOnyxData(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, category);
	API.write(
	'SplitBillAndOpenReport',
	{
	reportID: splitData.chatReportID,
	amount,
	splits: JSON.stringify(splits),
	currency,
	comment,
	category,
	transactionID: splitData.transactionID,
	reportActionID: splitData.reportActionID,
	createdReportActionID: splitData.createdReportActionID,
	policyID: splitData.policyID,
	},
	onyxData,
	);
	resetMoneyRequestInfo();

App/src/libs/actions/IOU.js

Lines 2513 to 2519 in 8dba113

	function sendMoneyElsewhere(report, amount, currency, comment, managerID, recipient) {
	const {params, optimisticData, successData, failureData} = getSendMoneyParams(report, amount, currency, comment, CONST.IOU.PAYMENT_TYPE.ELSEWHERE, managerID, recipient);
	API.write('SendMoneyElsewhere', params, {optimisticData, successData, failureData});
	resetMoneyRequestInfo();
	Navigation.dismissModal(params.chatReportID);

After clicking request button in MoneyRequestConfirmPage, the id of IOU object will be empty so shouldReset becomes true due to "" !== "request" or "send" and then !isDistanceRequest && ((iou.amount === 0 && !iou.receiptPath) || shouldReset) turns to true so that navigateBack function lets the user to get back to amount page again.
And

if (shouldReset) {
      IOU.resetMoneyRequestInfo(moneyRequestId);
  }

could be another reason in next refresh.

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js

Lines 92 to 99 in 302cebf

	const moneyRequestId = `${iouType.current}${reportID.current}`;
	const shouldReset = iou.id !== moneyRequestId;
	if (shouldReset) {
	IOU.resetMoneyRequestInfo(moneyRequestId);
	}
	if (!isDistanceRequest && ((iou.amount === 0 && !iou.receiptPath) || shouldReset)) {
	navigateBack(true);
	}

What changes do you think we should make in order to solve the problem?

Calling the resetMoneyRequestInfo in IOU.js let a user get back to report page automatically but when we visit request/new page directly, we need to take an account if the iou.id is set or not to avoid getting back to amount page again.
in NewRequestAmountPage.js

useEffect(() => {
        if (!iou.id && (lodashGet(route, 'params.iouType', '') === CONST.IOU.TYPE.REQUEST || lodashGet(route, 'params.iouType', '') === CONST.IOU.TYPE.SEND)) {
            IOU.resetMoneyRequestInfo(lodashGet(route, 'params.iouType', ''));
        }
    }, [iou.id, route.params])

What alternative solutions did you explore? (Optional)

N/A

[barros001]

Proposal

Updated

[maxconnectAbhi]

Proposal

Please re-state the problem that we are trying to solve in this issue

If a user clicks on a link to request money (eg: https://staging.new.expensify.com/request/new), enter an amount, click next and then proceed to click on a link to send money (eg: https://staging.new.expensify.com/send/new), the amount will be pre-populated but after clicking next, it will render the amount screen again.

What is the root cause of that problem?

The issue here is that the same IOU object

{
amount:0
category:""
comment:""
created:"2023-10-19"
currency:"INR"
id:"request"
merchant:"Request"
participants:[]
receiptFilename:""
receiptPath:""
tag:""
transactionID:"8311076577222983710"
}

is used for both sending and requesting money but with opposite id's i.e, When you send money, it's labeled with the "receive" ID, and when you request money, it's labeled "send".

Which results : iou.id = 'send' and iouType = 'request'.
This is handled in navigateToNextPage function

App/src/libs/actions/IOU.js

Lines 2863 to 2871 in 18acd82

	function navigateToNextPage(iou, iouType, report, path = '') {
	const moneyRequestID = `${iouType}${report.reportID || ''}`;
	const shouldReset = iou.id !== moneyRequestID;
	// If the money request ID in Onyx does not match the ID from params, we want to start a new request
	// with the ID from params. We need to clear the participants in case the new request is initiated from FAB.
	if (shouldReset) {
	resetMoneyRequestInfo(moneyRequestID);
	}

which creates the new request

What changes do you think we should make in order to solve the problem?

We need to reset the IOU if id is not matched through resetMoneyRequestInfo(moneyRequestID) in else case here

App/src/pages/iou/steps/NewRequestAmountPage.js

Lines 96 to 121 in 18acd82

	useEffect(() => {
	if (isEditing) {
	// ID in Onyx could change by initiating a new request in a separate browser tab or completing a request
	if (prevMoneyRequestID.current !== iou.id) {
	// The ID is cleared on completing a request. In that case, we will do nothing.
	if (!iou.id) {
	return;
	}
	Navigation.goBack(ROUTES.MONEY_REQUEST.getRoute(iouType, reportID), true);
	return;
	}
	const moneyRequestID = `${iouType}${reportID}`;
	const shouldReset = iou.id !== moneyRequestID;
	if (shouldReset) {
	IOU.resetMoneyRequestInfo(moneyRequestID);
	}
	if (!isDistanceRequestTab && (_.isEmpty(iou.participants) || iou.amount === 0 || shouldReset)) {
	Navigation.goBack(ROUTES.MONEY_REQUEST.getRoute(iouType, reportID), true);
	}
	}
	return () => {
	prevMoneyRequestID.current = iou.id;
	};
	}, [iou.participants, iou.amount, iou.id, isEditing, iouType, reportID, isDistanceRequestTab]);

like

else{
            const moneyRequestID = `${iouType}${reportID}`;
            const shouldReset = iou.id !== moneyRequestID;
            if (shouldReset) {
                IOU.resetMoneyRequestInfo(moneyRequestID);
            }

What alternative solutions did you explore? (Optional)

NA

POC

POC.mov