-
Notifications
You must be signed in to change notification settings - Fork 3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[VIP-Travel] Trip room summary #41659
Merged
Merged
Changes from 11 commits
Commits
Show all changes
73 commits
Select commit
Hold shift + click to select a range
7d069ac
add new chat type
rushatgabhane 48d51c4
add isTripRoom
rushatgabhane 37b5a9d
add isTripRoom
rushatgabhane dc2aba9
show trip details in report action item
rushatgabhane 942c068
pass chatreport id to trip details
rushatgabhane 770d39e
add styles and copy trip details view
rushatgabhane 0079ccc
add dateutils and lang
rushatgabhane 0d7db37
add reservation type
rushatgabhane 26c0c88
add assets
rushatgabhane 5497a13
add assets
rushatgabhane 3adc309
add title style to menu item
rushatgabhane 5865634
Merge branch 'main' into trip-room-2
rushatgabhane dda9361
Merge branch 'main' into trip-room-2
rushatgabhane 5c93faa
fix margin and gap for trip summary
rushatgabhane 724c980
fix empty div when no title present
rushatgabhane b0e6022
add 4px gap
rushatgabhane b3c8abb
update const chat type
rushatgabhane bc7a0f8
merge main
rushatgabhane 686d386
Merge branch 'main' of github.com:rushatgabhane/exfy into trip-room-2
rushatgabhane 9318abb
merge main
rushatgabhane e6b5296
update trip report type
rushatgabhane 548f81d
show trip preview and check for trip room
rushatgabhane d78fe79
onyx add trip preview type
rushatgabhane c155df8
rm console log
rushatgabhane 3e4d438
add trip header and trip transactins
rushatgabhane 1d15129
working report
rushatgabhane da2b2f4
get trip transactions
rushatgabhane 1812e1b
get trip reservations method
rushatgabhane 0229a52
rm console
rushatgabhane 876c403
add reservation to receipt
rushatgabhane 658ba4b
add reservation to receipt
rushatgabhane 854ac5b
add reservation details
rushatgabhane 97b1d61
hide horizontal rule
rushatgabhane e498fb0
Merge branch 'main' of github.com:rushatgabhane/exfy into trip-room-2
rushatgabhane 0a24259
Merge branch 'main' of github.com:rushatgabhane/exfy into trip-room-2
rushatgabhane fdbc3d3
add trip transaction util
rushatgabhane 9721904
type for address
rushatgabhane f2ea7f5
get trip from backend
rushatgabhane c381f99
show reservation code for hotel booking and hotel name
rushatgabhane d855793
show car info
rushatgabhane 25caa28
rm console
rushatgabhane 2a07889
fix transaction type
rushatgabhane f4bfc63
use flatmap
rushatgabhane e4ba89e
Merge branch 'main' of github.com:rushatgabhane/exfy into trip-room-2
rushatgabhane 06f36fb
rm flat
rushatgabhane d4e2562
fix original message type
rushatgabhane 788b765
has reservation list fix type
rushatgabhane fcd5684
rm original msg
rushatgabhane 3822694
rm original msg
rushatgabhane 5ed20ab
Revert "rm original msg"
rushatgabhane d1ded81
Revert "rm original msg"
rushatgabhane 844c7e1
add type for trip room original msg
rushatgabhane 95ca8cf
rm train svg
rushatgabhane 2e48b57
rm train and misc from reservation type
rushatgabhane 90d2a0c
rm train svg
rushatgabhane 48bdd41
add comment
rushatgabhane 29a670f
rm type rail from lang
rushatgabhane 7df2a56
Update src/libs/DateUtils.ts
rushatgabhane 880db45
Merge branch 'main' of github.com:rushatgabhane/exfy into trip-room-2
rushatgabhane d3708b7
show year only if not this year
rushatgabhane 41fb546
simplify comment
rushatgabhane dee1f1c
rm type
rushatgabhane b9b96a8
rm type
rushatgabhane 89c3597
fix spacing when values are not present
rushatgabhane 415e62a
use empty state bg
rushatgabhane e5a6960
rm animated state bg
rushatgabhane a6fc886
show paranthesis only when both short and long name are present
rushatgabhane 56ed4e1
handle text overflow on native
rushatgabhane c4b5df5
use font size small
rushatgabhane 22c472e
use existing styles
rushatgabhane 5eba1aa
Merge branch 'main' of github.com:rushatgabhane/exfy into trip-room-2
rushatgabhane 80cd508
add hover style
rushatgabhane f23f0c1
prettier
rushatgabhane File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,225 @@ | ||
import React from 'react'; | ||
import {View} from 'react-native'; | ||
import Icon from '@components/Icon'; | ||
import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; | ||
import OfflineWithFeedback from '@components/OfflineWithFeedback'; | ||
import SpacerView from '@components/SpacerView'; | ||
import Text from '@components/Text'; | ||
import useLocalize from '@hooks/useLocalize'; | ||
import useStyleUtils from '@hooks/useStyleUtils'; | ||
import useTheme from '@hooks/useTheme'; | ||
import useThemeStyles from '@hooks/useThemeStyles'; | ||
import useWindowDimensions from '@hooks/useWindowDimensions'; | ||
import DateUtils from '@libs/DateUtils'; | ||
import AnimatedEmptyStateBackground from '@pages/home/report/AnimatedEmptyStateBackground'; | ||
import variables from '@styles/variables'; | ||
import * as Expensicons from '@src/components/Icon/Expensicons'; | ||
import CONST from '@src/CONST'; | ||
import * as ReportUtils from '@src/libs/ReportUtils'; | ||
import * as TripReservationUtils from '@src/libs/TripReservationUtils'; | ||
import type {Reservation, ReservationTimeDetails} from '@src/types/onyx/Transaction'; | ||
|
||
// TODO: to be removed once backend is ready | ||
const testReservationsList: Reservation[] = [ | ||
{ | ||
company: { | ||
longName: 'American Airlines', | ||
shortName: 'AA', | ||
}, | ||
confirmations: [ | ||
{ | ||
name: 'Confirmation Number', | ||
value: 'DDPNOF', | ||
}, | ||
], | ||
start: { | ||
address: 'AA Address', | ||
date: '2022-08-21 21:36', | ||
longName: 'Philadelphia', | ||
shortName: 'PHL', | ||
timezoneOffset: -360, | ||
}, | ||
end: { | ||
address: 'BB Address', | ||
date: '2022-11-10 12:36', | ||
longName: 'San Francisco', | ||
shortName: 'SFO', | ||
timezoneOffset: -360, | ||
}, | ||
numPassengers: 2, | ||
route: { | ||
class: '', | ||
number: '2579', | ||
}, | ||
type: CONST.RESERVATION_TYPE.FLIGHT, | ||
}, | ||
{ | ||
company: { | ||
longName: 'W San Francisco', | ||
}, | ||
confirmations: [ | ||
{ | ||
name: 'Booking Number', | ||
value: 'SUDMBE', | ||
}, | ||
{ | ||
name: 'Confirmation Number', | ||
value: 'GGGGGGG-HHHHHH-IIIIII', | ||
}, | ||
], | ||
start: { | ||
address: '181 3rd St, San Francisco, CA 94103', | ||
date: '2023-01-22 21:40', | ||
longName: 'SFO123', | ||
shortName: 'SFO', | ||
timezoneOffset: -420, | ||
}, | ||
end: { | ||
address: 'DD Address', | ||
date: '2023-02-10 12:00', | ||
longName: 'Denver-Denver Intl', | ||
shortName: 'DEN', | ||
timezoneOffset: -420, | ||
}, | ||
numberOfRooms: 3, | ||
route: { | ||
class: '', | ||
number: '46564', | ||
}, | ||
type: CONST.RESERVATION_TYPE.HOTEL, | ||
}, | ||
]; | ||
|
||
type TripDetailsViewProps = { | ||
/** The active IOUReport, used for Onyx subscription */ | ||
iouReportID?: string; | ||
|
||
/** Whether we should display the horizontal rule below the component */ | ||
shouldShowHorizontalRule: boolean; | ||
}; | ||
|
||
type ReservationViewProps = { | ||
reservation: Reservation; | ||
}; | ||
|
||
function ReservationView({reservation}: ReservationViewProps) { | ||
const theme = useTheme(); | ||
const styles = useThemeStyles(); | ||
|
||
const reservationIcon = TripReservationUtils.getTripReservationIcon(reservation.type); | ||
|
||
const formatAirportInfo = (reservationTimeDetails: ReservationTimeDetails) => `${reservationTimeDetails.longName} (${reservationTimeDetails.shortName})`; | ||
|
||
const getFormattedDate = () => { | ||
switch (reservation.type) { | ||
case CONST.RESERVATION_TYPE.FLIGHT: | ||
case CONST.RESERVATION_TYPE.RAIL: | ||
return DateUtils.getFormattedTransportDate(new Date(reservation.start.date)); | ||
case CONST.RESERVATION_TYPE.HOTEL: | ||
return DateUtils.getFormattedReservationRangeDate(new Date(reservation.start.date), new Date(reservation.end.date)); | ||
default: | ||
return DateUtils.formatToLongDateWithWeekday(new Date(reservation.start.date)); | ||
} | ||
}; | ||
|
||
const formattedDate = getFormattedDate(); | ||
|
||
const bottomDescription = `${reservation.confirmations?.length > 0 ? `${reservation.confirmations[0].value} • ` : ''}${ | ||
Check failure on line 127 in src/components/ReportActionItem/TripDetailsView.tsx GitHub Actions / typecheck
|
||
reservation.type === CONST.RESERVATION_TYPE.FLIGHT | ||
? `${reservation.company?.longName} • ${reservation?.company?.shortName ?? ''} ${reservation.route?.number}` | ||
: reservation.start.address | ||
}`; | ||
|
||
const titleComponent = ( | ||
<View style={styles.gap2}> | ||
{reservation.type === CONST.RESERVATION_TYPE.FLIGHT ? ( | ||
<View style={[styles.flexRow, styles.alignItemsCenter, styles.gap2]}> | ||
<Text style={[styles.textNormalBold, styles.lh20]}>{formatAirportInfo(reservation.start)}</Text> | ||
<Icon | ||
src={Expensicons.ArrowRightLong} | ||
width={variables.iconSizeSmall} | ||
height={variables.iconSizeSmall} | ||
fill={theme.icon} | ||
/> | ||
<Text style={[styles.textNormalBold, styles.lh20]}>{formatAirportInfo(reservation.end)}</Text> | ||
</View> | ||
) : ( | ||
<Text | ||
numberOfLines={1} | ||
style={[styles.textNormalBold, styles.lh20]} | ||
> | ||
{reservation.company?.longName} | ||
</Text> | ||
)} | ||
<Text style={[styles.textSupportingSmallSize, styles.lh14]}>{bottomDescription}</Text> | ||
</View> | ||
); | ||
|
||
return ( | ||
<MenuItemWithTopDescription | ||
description={formattedDate} | ||
descriptionTextStyle={[styles.textLabelSupporting, styles.lh16]} | ||
titleComponent={titleComponent} | ||
titleContainerStyle={styles.justifyContentStart} | ||
secondaryIcon={reservationIcon} | ||
isSecondaryIconHoverable | ||
shouldShowRightIcon | ||
wrapperStyle={[styles.taskDescriptionMenuItem]} | ||
shouldGreyOutWhenDisabled={false} | ||
numberOfLinesTitle={0} | ||
interactive | ||
shouldStackHorizontally={false} | ||
onSecondaryInteraction={() => {}} | ||
iconHeight={20} | ||
iconWidth={20} | ||
iconStyles={[styles.tripReservationIconContainer(true), styles.mr2]} | ||
secondaryIconFill={theme.icon} | ||
/> | ||
); | ||
} | ||
|
||
function TripDetailsView({iouReportID, shouldShowHorizontalRule}: TripDetailsViewProps) { | ||
const StyleUtils = useStyleUtils(); | ||
const {isSmallScreenWidth} = useWindowDimensions(); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We should use |
||
const styles = useThemeStyles(); | ||
const {translate} = useLocalize(); | ||
|
||
// TODO: once backend is ready uncomment lines below and remove test data | ||
const reservations = testReservationsList; | ||
// const tripTransactions = ReportUtils.getTripTransactions(iouReportID); | ||
|
||
// const reservations: Reservation[] = TripReservationUtils.getReservationsFromTripTransactions(tripTransactions); | ||
|
||
return ( | ||
<View style={[StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth, true)]}> | ||
<AnimatedEmptyStateBackground /> | ||
<View style={[StyleUtils.getReportWelcomeTopMarginStyle(isSmallScreenWidth, true)]}> | ||
<View style={[styles.flexRow, styles.pointerEventsNone, styles.containerWithSpaceBetween, styles.ph5, styles.pv2]}> | ||
<View style={[styles.flex1, styles.justifyContentCenter]}> | ||
<Text | ||
style={[styles.textLabelSupporting]} | ||
numberOfLines={1} | ||
> | ||
{translate('travel.tripSummary')} | ||
</Text> | ||
</View> | ||
</View> | ||
<> | ||
{reservations.map((reservation) => ( | ||
<OfflineWithFeedback> | ||
<ReservationView reservation={reservation} /> | ||
</OfflineWithFeedback> | ||
))} | ||
<SpacerView | ||
shouldShow={shouldShowHorizontalRule} | ||
style={[shouldShowHorizontalRule && styles.reportHorizontalRule]} | ||
/> | ||
</> | ||
</View> | ||
</View> | ||
); | ||
} | ||
|
||
TripDetailsView.displayName = 'TripDetailsView'; | ||
|
||
export default TripDetailsView; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you expand this test to cover all modes, i.e, car, rail, misc?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@rushatgabhane Can you confirm me whether you are working on this or not?