[HOLD for payment 2024-08-07] [$250] [MEDIUM] ReportPreview is showing the incorrect title on a travel booking

[kevinksullivan]

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

---

In the trip room, the ReportPreview is showing, but it shows as if the person who should pay the report is the approver, and not the workspace (which is what we show in other places)

Version Number:
Reproducible in staging?:
Reproducible in production?:
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:
Slack conversation:

Action Performed:

1. Book travel
2. Navigate to the workspace chat

Expected Result:

The trip report name should show the Trip Name in the reportPreview.

Actual Result:

The report name shows the approver and submitter's names, like an IOU.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Screenshots/Videos

Slack threads

Example 1
Example 2

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a1f88ea93705aa2a
• Upwork Job ID: 1811819895313277706
• Last Price Increase: 2024-07-12
• Automatic offers:
• shubham1206agra | Reviewer | 103127522

Issue Owner

Current Issue Owner: @slafortune

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[kabeer95]

Proposal: Fix Incorrect Title on ReportPreview for Travel Bookings

Problem Statement:

The ReportPreview feature is displaying an incorrect title for travel bookings, which can lead to confusion and errors for users. The root cause of this problem is an incorrect implementation of the title logic in the ReportPreview component.

Root Cause:

The current implementation of the title logic in the ReportPreview component is not correctly handling travel booking types, resulting in an incorrect title being displayed.

Proposed Solution:

To resolve this issue, we recommend the following optimized solution:

Simplify the title logic: Refactor the title logic to use a more concise and efficient approach, reducing the complexity of the code.
Use a switch statement: Implement a switch statement to handle different travel booking types, ensuring that the correct title is displayed for each type.
Remove unnecessary code: Eliminate unnecessary code and variables, improving the overall readability and maintainability of the component.
Code:
typescript

import React from 'eact';

const ReportPreview = ({ travelBooking }) => {
let title;
switch (travelBooking.type) {
case 'flight':
title = Flight from ${travelBooking.origin} to ${travelBooking.destination};
break;
case 'hotel':
title = Hotel stay at ${travelBooking.hotelName};
break;
default:
title = 'Unknown travel booking type';
}

return (

{title}

);
};

export default ReportPreview;
Alternative Solutions:

We explored the following alternative solutions:

Using a template engine: Utilize a template engine such as Handlebars to generate the title for travel bookings. However, this approach would require additional dependencies and complexity.
Implementing a more robust title logic: Develop a more robust title logic that can handle various travel booking types and edge cases. However, this approach would require additional development time and resources.

Please let us know if you would like to discuss this proposal further or proceed with implementation

[tienifr]

Proposal

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

The report name shows the approver and submitter's names, like an IOU.

What is the root cause of that problem?

In

App/src/pages/home/report/ReportActionItemSingle.tsx

Line 250 in fef8ef8

{personArray?.map((fragment, index) => (

, we always show the list of person associated with the report, there's no logic to customize for trips.

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

In

App/src/pages/home/report/ReportActionItemSingle.tsx

Line 250 in fef8ef8

{personArray?.map((fragment, index) => (

, if it's a trip (identified by the tripData?.tripID of the report), we'll put the tripName to ReportActionItemFragment in order to display it. We can add a custom case TRIP for the trip header fragment like in this

The back-end needs to provide the tripName as part of tripData of the report (if not already). Or the back-end should provide other information that can be used to construct the trip name (eg. Destination, ...)

What alternative solutions did you explore? (Optional)

Optionally we can show the trip icon as the left hand icon of the report action item, in place of the participants' icons as it is now.

[wasxxm]

How can I book a travel?

[twisterdotcom]

@rushatgabhane has been helping implement travel, so I am going to assign him and @shubham1206agra who has been reviewing his travel issues! At some point soon, travel will be something anybody can help with but for now as we're racing for a deadline, I'm going to prioritise them.

Appreciate the excitement for it though folks!

[melvin-bot]

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

Offer link
Upwork job

[rushatgabhane]

@twisterdotcom we can assign @tienifr for their proposal #45344 (comment)

🎀👀🎀

[melvin-bot]

Triggered auto assignment to @grgia, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[tienifr]

@rushatgabhane PR is here #46266.

[rushatgabhane]

good to merge! @stitesExpensify

[rushatgabhane]

on staging

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.14-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• show trip name for trip room report preview action #46266

If no regressions arise, payment will be issued on 2024-08-07. 🎊

For reference, here are some details about the assignees on this issue:

• @rushatgabhane requires payment through NewDot Manual Requests
• @shubham1206agra requires payment automatic offer (Reviewer)
• @tienifr requires payment through NewDot Manual Requests

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@rushatgabhane / @shubham1206agra] The PR that introduced the bug has been identified. Link to the PR:
• [@rushatgabhane / @shubham1206agra] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@rushatgabhane / @shubham1206agra] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@rushatgabhane / @shubham1206agra] Determine if we should create a regression test for this bug.
• [@rushatgabhane / @shubham1206agra] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@slafortune] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[slafortune]

@rushatgabhane @shubham1206agra can you please complete the checklist? are you both due payment for the C+role?

[shubham1206agra]

@slafortune I am doing the checklist.

[shubham1206agra]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@rushatgabhane / @shubham1206agra] The PR that introduced the bug has been identified. Link to the PR: [VIP-Travel] Trip room summary #41659
• [@rushatgabhane / @shubham1206agra] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: [VIP-Travel] Trip room summary #41659 (comment)
• [@rushatgabhane / @shubham1206agra] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: Not Required
• [@rushatgabhane / @shubham1206agra] Determine if we should create a regression test for this bug. No
• [@rushatgabhane / @shubham1206agra] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@slafortune] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[rushatgabhane]

are you both due payment for the C+role?

@slafortune i don't know know about that. i had reviewed the proposal and the PR so I'm definitely due for payment 😄

[shubham1206agra]

are you both due payment for the C+role?

Yes, we both reviewed the PR. And I kind of monitored this issue through.

[slafortune]

@shubham1206agra should there be any regression tests?

[shubham1206agra]

@slafortune No, since this was a simple edge case for design, which got missed.

[slafortune]

Upworks
@shubham1206agra C+ Role - requires payment automatic offer $250 Paid ✅

NewDot
@rushatgabhane C+ Role - requires payment through NewDot Manual Requests $250
@tienifr Contributors Role - requires payment through NewDot Manual Requests $250

[JmillsExpensify]

$250 approved for @rushatgabhane