[VIP-Travel] Create Trip Room Preview by WojtekBoman · Pull Request #38808 · Expensify/App

WojtekBoman · 2024-03-22T15:05:06Z

Details

This PR introduces a new component TripRoomPreview. It's available for testing only for accounts with the spotnanaTravel beta

Designs: https://www.figma.com/file/rOyUSHbLLyp64emz6WeoPW/Travel?type=design&node-id=154-14373&mode=design&t=xqcJ31MMIiDxsY0J-4

Fixed Issues

$ #37826
PROPOSAL: N/A

Tests

Verify that no errors appear in the JS console

Log in to OldDot with an account with access to Travel.
Go to https://staging.expensify.com/travel.
Click on travel.
Accept the terms and set an address again on your account.
You'll be redirected to Spotnana (if redirect doesn't work use this link: https://staging.travel.expensify.com).
Book a new travel (so on the selector to "select trip" you should create a new one).
Log in to NewDot and open your default workspace chat.
Verify whether the TripRoomPreview component is displayed correctly.

If some data is not loaded, please open the linked report first, this problem will be fixed on the backend side.

Offline tests

QA Steps

Verify that no errors appear in the JS console

Same as tests

PR Author Checklist

Screenshots/Videos

Android: Native

Screen.Recording.2024-05-29.at.17.35.27.mov

Android: mWeb Chrome

Screen.Recording.2024-05-29.at.17.49.04.mov

iOS: Native

Screen.Recording.2024-05-29.at.17.58.26.mov

iOS: mWeb Safari

Screen.Recording.2024-05-29.at.18.03.22.mov

MacOS: Chrome / Safari

Screen.Recording.2024-05-29.at.17.36.32.mov

MacOS: Desktop

Screen.Recording.2024-05-29.at.17.29.22.mov

kosmydel · 2024-03-26T15:43:54Z

src/CONST.ts

            LIMIT: 50,
            // OldDot Actions render getMessage from Web-Expensify/lib/Report/Action PHP files via getMessageOfOldDotReportAction in ReportActionsUtils.ts
            TYPE: {
+                ACTION_TRIPPREVIEW: 'ACTION_TRIPPREVIEW',


NAB

Suggested change

ACTION_TRIPPREVIEW: 'ACTION_TRIPPREVIEW',

ACTION_TRIP_PREVIEW: 'ACTION_TRIP_PREVIEW',

I'll adjust it once the backend is ready to be sure that this value is correct

kosmydel · 2024-03-26T15:54:48Z

src/components/ReportActionItem/TripRoomPreview.tsx

+
+    const dateInfo = DateUtils.getFormattedDateRange(new Date(basicTripInfo.startDate.iso8601), new Date(basicTripInfo.endDate.iso8601));
+
+    const getDisplayAmount = (): string => {


I would use useMemo here.

kosmydel · 2024-03-26T15:56:24Z

src/components/ReportActionItem/TripRoomPreview.tsx

+            // pendingAction={iouReport?.pendingFields?.preview}
+            shouldDisableOpacity={!!(action.pendingAction ?? action.isOptimisticAction)}


Why the pendingAction is commented out here?

kosmydel · 2024-03-26T15:58:07Z

src/components/ReportActionItem/TripRoomPreview.tsx

+                    onLongPress={(event) => showContextMenuForReport(event, contextMenuAnchor, chatReportID, action, checkIfContextMenuActive)}
+                    shouldUseHapticsOnLongPress
+                    style={[styles.flexRow, styles.justifyContentBetween, styles.reportPreviewBox, styles.cursorDefault]}
+                    role="button"


Suggested change

role="button"

role={CONST.ROLE.BUTTON}

kosmydel · 2024-03-26T16:00:18Z

src/components/ReportActionItem/TripRoomPreview.tsx

+
+    const reservations: Reservation[] = TripReservationUtils.getReservationsFromTripTransactions(tripTransactions);
+
+    const dateInfo = DateUtils.getFormattedDateRange(new Date(basicTripInfo.startDate.iso8601), new Date(basicTripInfo.endDate.iso8601));


It might be worth putting into useMemo.

kosmydel · 2024-03-26T16:04:40Z

src/styles/index.ts

+        tripDescriptionMargin: {
+            marginBottom: 2,
+        },


Is this value valid? We usually have multiples of 4.
NAB: Do we need to create a new style with only one value? Shouldn't we just use styles.mb1 or something like this?

Following this design, I've created a new style where the gap value is 2

I think I would be fine using a gap of 4px since that technically adheres to the system better. And then this way we don't need to write a super specific style.

kosmydel · 2024-03-26T16:05:54Z

src/types/onyx/Transaction.ts


        /** Indicates transaction loading */
        isLoading?: boolean;
+


Missing comment

kosmydel · 2024-03-26T16:15:44Z

In designs here is a 12px margin between the icon and the text

kosmydel · 2024-03-26T16:18:22Z

src/libs/DateUtils.ts

+    }
+    if (isSameMonth(date1, date2)) {
+        // Dates in the same month and year, differ by days
+        return `${format(date1, 'MMM d')} - ${format(date2, 'd')}`;


In designs, we don't have spaces between the days. We should confirm the other formats as well.

Suggested change

return `${format(date1, 'MMM d')} - ${format(date2, 'd')}`;

return `${format(date1, 'MMM d')}-${format(date2, 'd')}`;

stitesExpensify

Looks great! Think that we can remove the TODO-related code and then this is ready to go

stitesExpensify · 2024-06-14T16:33:55Z

src/libs/ReportActionsUtils.ts

+    // @TODO: isTripRoomPreview condition has been added to make the TripRoomPreview component visible.
+    // Remove it when the reportAction.message array is not empty for this type, then !isDeleted will be true.


I think that it should always be visible

WojtekBoman · 2024-06-14T17:12:33Z

Looks great! Think that we can remove the TODO-related code and then this is ready to go

Done :)

stitesExpensify

LGTM!

stitesExpensify · 2024-06-14T18:20:58Z

@WojtekBoman is it possible for our team to QA this? I noticed that section is not filled out

WojtekBoman · 2024-06-17T06:44:00Z

@WojtekBoman is it possible for our team to QA this? I noticed that section is not filled out

QA steps are the same as Tests

grgia

Changes LGTM

grgia · 2024-06-18T14:03:39Z

@shubham1206agra could you please take a quick look / retest since there's been commits since your final review

shubham1206agra · 2024-06-18T14:20:57Z

@grgia You are good to merge here.

OSBotify · 2024-06-18T14:40:20Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify · 2024-06-19T21:51:52Z

🚀 Deployed to staging by https://github.com/grgia in version: 1.4.86-0 🚀

platform	result
🤖 android 🤖	failure ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

OSBotify · 2024-06-19T22:16:34Z

🚀 Deployed to staging by https://github.com/grgia in version: 1.4.86-0 🚀

platform	result
🤖 android 🤖	failure ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

OSBotify · 2024-06-19T22:50:33Z

🚀 Deployed to staging by https://github.com/grgia in version: 1.4.86-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

kbecciv · 2024-06-20T20:20:20Z

@grgia The QA team is encountering issues with this PR. Should we log the issue for the error message?

Recording.6251.mp4

kavimuru · 2024-06-21T13:21:38Z

@AndrewGable @stitesExpensify we tried with travel beta account and see the same issue we had in this PR

Recording.1999.mp4

OSBotify · 2024-06-21T21:21:11Z

🚀 Deployed to production by https://github.com/AndrewGable in version: 9.0.0-9 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

jayeshmangwani · 2025-04-02T10:19:45Z

src/components/ReportActionItem/TripRoomPreview.tsx

+
+    const tripTransactions = ReportUtils.getTripTransactions(chatReport?.iouReportID, 'reportID');
+    const reservations: Reservation[] = TripReservationUtils.getReservationsFromTripTransactions(tripTransactions);
+    const dateInfo = chatReport?.tripData ? DateUtils.getFormattedDateRange(new Date(chatReport.tripData.startDate), new Date(chatReport.tripData.endDate)) : '';


We are accessing startDate and endDate, but these values may sometimes be null. So, before using them, we should check if they exist in the tripData object. Otherwise, it may lead to a crash, like in this issue: #58022.

For more context, see this comment: #58022 (comment)

WojtekBoman added 21 commits March 11, 2024 11:55

Initial config for TripRoomPreview

1279f0f

Add template of ReservationRow component

370d8a8

Add car to ReservationType, add utility functions for trip transactions

102ffb8

Merge branch 'main' into travel/trip-room-preview

489720b

Refactor TripRoomPreview styles

5d16a01

Get reservations from trip transactions

7036238

Merge branch 'main' into travel/trip-room-preview

20caa2f

Handle showing context menu in TripRoomPreview

b8b20ee

Add OriginalMessageTripRoomPreview type

a9c5370

Add type TripDetails

b4b3730

Add getFormattedDateRange method to DateUtils

71419d4

Merge branch 'main' into travel/trip-room-preview

8b25ebc

Handle new reservation types, add ui fixes, add docs

18c8503

Add canUseSpotnanaTravel

9eb79a2

Merge branch 'main' into travel/trip-room-preview

56e19f7

Add TripReservationUtils

993f684

Use MenuItemWithTopDescription to display reservations

f88bec0

Merge branch 'main' into travel/trip-room-preview

3cbb84c

Remove luggage with lines icon

c53d977

Adjust MenuItem to display titleComponent

f8d3f34

Use translateLocal in getFormattedDateRange

e8390c5

kosmydel reviewed Mar 26, 2024

View reviewed changes

WojtekBoman added 6 commits March 29, 2024 12:28

Add fixes to TripRoomPreview

6eef035

Refactor getDisplayAmount in TripRoomPreview

01a7e2d

Merge branch 'main' into travel/trip-room-preview

3a85f3d

Merge branch 'main' into travel/trip-room-preview

05a7613

Add template of SpotnanaPayload type

fd6418c

Merge branch 'main' into travel/trip-room-preview

8219de2

melvin-bot bot requested a review from grgia June 14, 2024 15:25

stitesExpensify reviewed Jun 14, 2024

View reviewed changes

WojtekBoman added 2 commits June 14, 2024 18:49

Merge branch 'main' into travel/trip-room-preview

4b60448

Add isTripPreview check in shouldReportActionBeVisible

42b5f3f

stitesExpensify previously approved these changes Jun 14, 2024

View reviewed changes

Merge branch 'main' into travel/trip-room-preview

46f7bbe

WojtekBoman dismissed stitesExpensify’s stale review via 46f7bbe June 18, 2024 08:13

stitesExpensify approved these changes Jun 18, 2024

View reviewed changes

grgia approved these changes Jun 18, 2024

View reviewed changes

grgia requested a review from shubham1206agra June 18, 2024 14:03

shubham1206agra approved these changes Jun 18, 2024

View reviewed changes

melvin-bot bot requested a review from stitesExpensify June 18, 2024 14:20

grgia merged commit f6085d2 into Expensify:main Jun 18, 2024

This was referenced Jun 18, 2024

[HOLD for payment 2024-06-28] Investigate workflow job failing on main: e2ePerformanceTests / Run E2E tests in AWS device farm #43928

Closed

Deploy Checklist: New Expensify 2024-06-19 #44047

Closed

shubham1206agra mentioned this pull request Sep 5, 2024

[$500] [Medium] TRIPPREVIEW is not showing the preview/info #45348

Closed

jayeshmangwani reviewed Apr 2, 2025

View reviewed changes

jayeshmangwani mentioned this pull request Apr 2, 2025

[Due for payment 2025-04-02] [$250] Travel - App crashes when user books travel #58022

Closed

8 tasks

	ACTION_TRIPPREVIEW: 'ACTION_TRIPPREVIEW',
	ACTION_TRIP_PREVIEW: 'ACTION_TRIP_PREVIEW',


		const dateInfo = DateUtils.getFormattedDateRange(new Date(basicTripInfo.startDate.iso8601), new Date(basicTripInfo.endDate.iso8601));

		const getDisplayAmount = (): string => {

		// pendingAction={iouReport?.pendingFields?.preview}
		shouldDisableOpacity={!!(action.pendingAction ?? action.isOptimisticAction)}


		const reservations: Reservation[] = TripReservationUtils.getReservationsFromTripTransactions(tripTransactions);

		const dateInfo = DateUtils.getFormattedDateRange(new Date(basicTripInfo.startDate.iso8601), new Date(basicTripInfo.endDate.iso8601));

	return `${format(date1, 'MMM d')} - ${format(date2, 'd')}`;
	return `${format(date1, 'MMM d')}-${format(date2, 'd')}`;

		// @TODO: isTripRoomPreview condition has been added to make the TripRoomPreview component visible.
		// Remove it when the reportAction.message array is not empty for this type, then !isDeleted will be true.

Conversation

WojtekBoman commented Mar 22, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Details

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

Choose a reason for hiding this comment

Uh oh!

WojtekBoman Mar 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kosmydel commented Mar 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

stitesExpensify left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

WojtekBoman commented Jun 14, 2024

Uh oh!

stitesExpensify left a comment

Choose a reason for hiding this comment

Uh oh!

stitesExpensify commented Jun 14, 2024

Uh oh!

WojtekBoman commented Jun 17, 2024

Uh oh!

grgia left a comment

Choose a reason for hiding this comment

Uh oh!

grgia commented Jun 18, 2024

Uh oh!

shubham1206agra commented Jun 18, 2024

Uh oh!

OSBotify commented Jun 18, 2024

Uh oh!

OSBotify commented Jun 19, 2024

Uh oh!

OSBotify commented Jun 19, 2024

Uh oh!

OSBotify commented Jun 19, 2024

Uh oh!

kbecciv commented Jun 20, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kavimuru commented Jun 21, 2024

Uh oh!

OSBotify commented Jun 21, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

WojtekBoman commented Mar 22, 2024 •

edited

Loading

WojtekBoman Mar 29, 2024 •

edited

Loading

kosmydel commented Mar 26, 2024 •

edited

Loading

kbecciv commented Jun 20, 2024 •

edited

Loading