[HOLD for payment 2025-01-02] [$250] QAB- QAB navigates to last opened expense type rather than summited expense

[IuliiaHerets]

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: v9.0.71-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
Email or phone of affected tester (no customers): testpayment935@gmail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Navigate to https://staging.new.expensify.com
2. Create WS
3. Click FAB> Submit expense> Scan receipt and submit the expense
4. Notice QAB displays Scan receipt option
5. Click FAB > Submit expense
6. Go to distance or manual expense option (do not submit any expense) and navigate back
7. Notice QAB is still Scan receipt - Click QAB

Expected Result:

As scan receipt was the last expense type summited to WS, QAB should navigate to scan receipt option

Actual Result:

QAB navigates to the last navigated tab(in step 6) rater than submitted tab as QAB name on FAB

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6684131_1733307060392.Scan.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021864415280896735708
• Upwork Job ID: 1864415280896735708
• Last Price Increase: 2024-12-04
• Automatic offers:
• FitseTLT | Contributor | 105254767

Issue Owner

Current Issue Owner: @isabelastisser

[melvin-bot]

Triggered auto assignment to @isabelastisser (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.

[github-actions]

Alex Your proposal will be dismissed because you did not follow the proposal template.

[FitseTLT]

Edited by proposal-police: This proposal was edited at 2024-12-04 12:16:14 UTC.

Proposal

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

QAB- QAB navigates to last opened expense type rather than summited expense

What is the root cause of that problem?

We are not explicitly passing the request type here

App/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx

Lines 263 to 266 in 6482913

	case CONST.QUICK_ACTIONS.REQUEST_MANUAL:
	case CONST.QUICK_ACTIONS.REQUEST_SCAN:
	case CONST.QUICK_ACTIONS.REQUEST_DISTANCE:
	selectOption(() => IOU.startMoneyRequest(CONST.IOU.TYPE.SUBMIT, quickActionReportID, undefined, true), true);

so it will fallback to the last request type

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

We should explicitly pass the request type for startMoneyRequest

let requestType;
        if ([CONST.QUICK_ACTIONS.REQUEST_MANUAL, CONST.QUICK_ACTIONS.SPLIT_MANUAL,CONST.QUICK_ACTIONS.TRACK_MANUAL].includes(quickAction?.action)) requestType = CONST.IOU.REQUEST_TYPE.MANUAL;
        else if ([CONST.QUICK_ACTIONS.REQUEST_SCAN, CONST.QUICK_ACTIONS.SPLIT_SCAN, CONST.QUICK_ACTIONS.TRACK_SCAN].includes(quickAction?.action)) requestType = CONST.IOU.REQUEST_TYPE.SCAN;
        else if ([CONST.QUICK_ACTIONS.REQUEST_DISTANCE, CONST.QUICK_ACTIONS.SPLIT_DISTANCE, CONST.QUICK_ACTIONS.TRACK_DISTANCE].includes(quickAction?.action))
            requestType = CONST.IOU.REQUEST_TYPE.DISTANCE;

and pass requestType param for startMoneyRequest in all cases here

App/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx

Lines 266 to 284 in 6482913

	selectOption(() => IOU.startMoneyRequest(CONST.IOU.TYPE.SUBMIT, quickActionReportID, undefined, true), true);
	return;
	case CONST.QUICK_ACTIONS.SPLIT_MANUAL:
	case CONST.QUICK_ACTIONS.SPLIT_SCAN:
	selectOption(() => IOU.startMoneyRequest(CONST.IOU.TYPE.SPLIT, quickActionReportID, undefined, true), true);
	return;
	case CONST.QUICK_ACTIONS.SPLIT_DISTANCE:
	selectOption(() => IOU.startMoneyRequest(CONST.IOU.TYPE.SPLIT, quickActionReportID, undefined, false), true);
	return;
	case CONST.QUICK_ACTIONS.SEND_MONEY:
	selectOption(() => IOU.startMoneyRequest(CONST.IOU.TYPE.PAY, quickActionReportID, undefined, true), false);
	return;
	case CONST.QUICK_ACTIONS.ASSIGN_TASK:
	selectOption(() => Task.startOutCreateTaskQuickAction(isValidReport ? quickActionReportID : '', quickAction.targetAccountID ?? -1), false);
	break;
	case CONST.QUICK_ACTIONS.TRACK_MANUAL:
	case CONST.QUICK_ACTIONS.TRACK_SCAN:
	case CONST.QUICK_ACTIONS.TRACK_DISTANCE:
	selectOption(() => IOU.startMoneyRequest(CONST.IOU.TYPE.TRACK, quickActionReportID, undefined, true), false);

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

We can render our FloatingActionButtonAndPopover populating the necessary data in onyx (including the quick action data) and providing the necessary mocks, then press (fireEvent.press) on the quick action menu item (by querying the menu item via giving test id or any other suitable way) and then we can mock our Navigation.navigate function and assert that it is called with the correct route parameter via toHaveBeenCalledWith(i.e. the correct requestType is included in the path).

What alternative solutions did you explore? (Optional)

[saifelance]

Proposal

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

Emojis sent via markdown in chat messages are clipped at the top.

What is the root cause of that problem?

Due to incorrect vertical alignment, improper container sizing, emoji scaling issues, or line height problems.

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

Solution:

1. Vertical Alignment:

img.emoji {
  vertical-align: middle; /* Aligns emoji in the middle */
}

2. Line Height:

img.emoji {
  line-height: 1; /* Avoids clipping caused by incorrect line height */
}

3. Emoji Size:

img.emoji {
  font-size: 1.5em; /* Adjust size to prevent clipping */
}

4. Container Overflow:

.message-container {
  overflow: visible; /* Prevents cutting off content */
}

Padding/Margin: Remove excessive padding/margins around emojis.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

Alignment: Check emoji alignment in various positions.
Overflow: Ensure no clipping in resized containers.
Size Scaling: Verify correct scaling and no clipping with different emoji sizes.
Cross-Browser/Device: Test emojis across browsers and devices.
Font Scaling: Ensure emojis render correctly with different font sizes.
Edge Cases: Test emojis with different message formats (e.g., bold text, links).

What alternative solutions did you explore? (Optional)

• Use font-based emojis for better scalability.
• Explore custom emoji rendering with SVGs for better alignment.

[melvin-bot]

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

[melvin-bot]

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

[saifelance]

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

Job invite?