[$250] [P2P Distance] Split - Participants amount displayed 0.00 briefly on confirmation screen

[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: 9.0.18.3
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): applausetester+0808pm@applause.expensifail.com
Issue reported by: Applause - Internal Team

Issue found when executing PR #42302

Action Performed:

1. Open the app and log in
2. Tap FAB > Split expense > Distance
3. Tap + > Split expense > Distance
4. Enter the start and finish viewpoints
5. Select a few participants and proceed to the confirmation screen

Expected Result:

The correct participants amounts are displayed

Actual Result:

0.00 is briefly displayed instead of the correct amount

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

Add any screenshot/video evidence

Bug6565894_1723139401565.video_2024-08-08_13-48-49.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0170f1a1791408f62b
• Upwork Job ID: 1821642103848571473
• Last Price Increase: 2024-08-08
• Automatic offers:
• Krishna2323 | Contributor | 103497363

Issue Owner

Current Issue Owner: @parasharrajat

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @jasperhuangg (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[lanitochka17]

We think that this bug might be related to #vip-split

[neil-marcellini]

Not a blocker, it's behind the distance split beta.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0170f1a1791408f62b

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @garrettmknight (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[Krishna2323]

Proposal

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

Split distance - Participants amount displayed 0.00 briefly on confirmation screen

What is the root cause of that problem?

• The amount and split amount for each user are calculated as a side effect after the component is rendered on the IOURequestStepConfirmation page. Initially, the amount is 0, which causes 0.00 to be displayed briefly. The calculation occurs on the second render due to the isFirstUpdatedDistanceAmount check.
  

  App/src/components/MoneyRequestConfirmationList.tsx

  Lines 322 to 349 in e14fc68

  	const isFirstUpdatedDistanceAmount = useRef(false);
  	useEffect(() => {
  	if (isFirstUpdatedDistanceAmount.current) {
  	return;
  	}
  	if (!isDistanceRequest) {
  	return;
  	}
  	const amount = DistanceRequestUtils.getDistanceRequestAmount(distance, unit ?? CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES, rate ?? 0);
  	IOU.setMoneyRequestAmount(transactionID, amount, currency ?? '');
  	isFirstUpdatedDistanceAmount.current = true;
  	}, [distance, rate, unit, transactionID, currency, isDistanceRequest]);
  	useEffect(() => {
  	if (!shouldCalculateDistanceAmount) {
  	return;
  	}
  	const amount = distanceRequestAmount;
  	IOU.setMoneyRequestAmount(transactionID, amount, currency ?? '');
  	// If it's a split request among individuals, set the split shares
  	const participantAccountIDs: number[] = selectedParticipantsProp.map((participant) => participant.accountID ?? -1);
  	if (isTypeSplit && !isPolicyExpenseChat && amount && transaction?.currency) {
  	IOU.setSplitShares(transaction, amount, currency, participantAccountIDs);
  	}
  	}, [shouldCalculateDistanceAmount, distanceRequestAmount, transactionID, currency, isTypeSplit, isPolicyExpenseChat, selectedParticipantsProp, transaction]);

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

• We should update the amount and splitShare before moving to IOURequestStepConfirmation from IOURequestStepParticipants.
• We can calculate the amount and split shares inside goToNextStep function in IOURequestStepParticipants.

        if (isDistanceRequest) {
            let reportUpdated = report;
            if (isPolicyExpenseChat && transaction?.participants?.[0]) {
                reportUpdated = ReportUtils.getReport(transaction?.participants?.[0].reportID ?? '') ?? report;
            }
            const policyID = IOU.getIOURequestPolicyID(transaction, reportUpdated);
            const policy = PolicyUtils.getPolicy(report?.policyID ?? policyID);
            const policyCurrency = policy?.outputCurrency ?? PolicyUtils.getPersonalPolicy()?.outputCurrency ?? CONST.CURRENCY.USD;
            const customUnitRateID = TransactionUtils.getRateID(transaction) ?? '-1';
            const mileageRates = DistanceRequestUtils.getMileageRates(policy);
            const defaultMileageRate = DistanceRequestUtils.getDefaultMileageRate(policy);
            const mileageRate = TransactionUtils.isCustomUnitRateIDForP2P(transaction)
                ? DistanceRequestUtils.getRateForP2P(policyCurrency)
                : mileageRates?.[customUnitRateID] ?? defaultMileageRate;
            const {unit, rate} = mileageRate ?? {};
            const distance = TransactionUtils.getDistanceInMeters(transaction, unit);
            const currency = (mileageRate as MileageRate)?.currency ?? policyCurrency;
            const amount = DistanceRequestUtils.getDistanceRequestAmount(distance, unit ?? CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES, rate ?? 0);
            IOU.setMoneyRequestAmount(transactionID, amount, currency ?? '');

            const participantsMap =
                transaction?.participants?.map((participant) => {
                    if (participant.isSender && iouType === CONST.IOU.TYPE.INVOICE) {
                        return participant;
                    }
                    return participant.accountID ? OptionsListUtils.getParticipantsOption(participant, personalDetails) : OptionsListUtils.getReportOption(participant);
                }) ?? [];
            const participantAccountIDs: number[] = participantsMap.map((participant) => participant.accountID ?? -1);
            if (isTypeSplit && !isPolicyExpenseChat && amount && transaction?.currency) {
                IOU.setSplitShares(transaction, amount, currency, participantAccountIDs);
            }
        }

Note

The code above is not perfect, it is just pseudocode and can be improved. It might also have some flaws, but these can be addressed after thorough testing.

What alternative solutions did you explore? (Optional)

[daledah]

Edited by proposal-police: This proposal was edited at 2024-08-09 01:17:59 UTC.

Proposal

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

• The issue is that 0.00 is briefly displayed instead of the correct amount.

What is the root cause of that problem?

• The participant's amount is calculated and displayed based on this logic:
  

  App/src/components/MoneyRequestConfirmationList.tsx

  Line 494 in 31c301e

  amount={transaction?.splitShares?.[participantOption.accountID ?? -1]?.amount}

  
  If the value transaction?.splitShares?.[participantOption.accountID ?? -1]?.amount is undefined, the default amount shown is 0.00.

• In step 5, when the user navigates to the confirmation page for the first time, transaction?.splitShares is undefined, which results in an initial display of 0.00 for a brief moment.

• Once the transaction?.splitShares data is fetched and updated via:

App/src/components/MoneyRequestConfirmationList.tsx

Line 347 in 31c301e

IOU.setSplitShares(transaction, amount, currency, participantAccountIDs);

the correct amount is displayed afterward.

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

• To address this, we can add a loading indicator to the input where the participant's amount is displayed. This will indicate that the amount is being calculated. Thus, the following code:

App/src/components/MoneyRequestConfirmationList.tsx

Line 491 in 31c301e

rightElement: (

will be:

rightElement: transaction?.splitShares?.[participantOption.accountID ?? -1]?.amount !== undefined ? (
    <MoneyRequestAmountInput />
) : (
    <ActivityIndicator color={!true ? theme.textLight : theme.text} />
)

[garrettmknight]

@parasharrajat can you give these proposals a look when you get a chance?

[melvin-bot]

@garrettmknight, @parasharrajat, @jasperhuangg Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

📣 @Krishna2323 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[jasperhuangg]

@Krishna2323's approach seems to be the simplest approach to fixing the issue, assigning them!

FYI I will be going OOO for the rest of the week, so we might need to bring in another internal engineer to help with PR reviews once the PR is done. cc @garrettmknight

[parasharrajat]

Sure, let's go with that approach.

[Krishna2323]

Draft PR is up, just need to test all cases and add recordings, will be completed by EOD.

[Krishna2323]

@parasharrajat PR ready for review.

[melvin-bot]

This issue has not been updated in over 15 days. @garrettmknight, @parasharrajat, @jasperhuangg, @Krishna2323 eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!