Skip to content
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 73 commits into from
Jun 4, 2024
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 May 5, 2024
48d51c4
add isTripRoom
rushatgabhane May 5, 2024
37b5a9d
add isTripRoom
rushatgabhane May 5, 2024
dc2aba9
show trip details in report action item
rushatgabhane May 5, 2024
942c068
pass chatreport id to trip details
rushatgabhane May 5, 2024
770d39e
add styles and copy trip details view
rushatgabhane May 5, 2024
0079ccc
add dateutils and lang
rushatgabhane May 6, 2024
0d7db37
add reservation type
rushatgabhane May 6, 2024
26c0c88
add assets
rushatgabhane May 6, 2024
5497a13
add assets
rushatgabhane May 6, 2024
3adc309
add title style to menu item
rushatgabhane May 6, 2024
5865634
Merge branch 'main' into trip-room-2
rushatgabhane May 9, 2024
dda9361
Merge branch 'main' into trip-room-2
rushatgabhane May 12, 2024
5c93faa
fix margin and gap for trip summary
rushatgabhane May 13, 2024
724c980
fix empty div when no title present
rushatgabhane May 13, 2024
b0e6022
add 4px gap
rushatgabhane May 13, 2024
b3c8abb
update const chat type
rushatgabhane May 15, 2024
bc7a0f8
merge main
rushatgabhane May 15, 2024
686d386
Merge branch 'main' of github.com:rushatgabhane/exfy into trip-room-2
rushatgabhane May 15, 2024
9318abb
merge main
rushatgabhane May 15, 2024
e6b5296
update trip report type
rushatgabhane May 15, 2024
548f81d
show trip preview and check for trip room
rushatgabhane May 15, 2024
d78fe79
onyx add trip preview type
rushatgabhane May 15, 2024
c155df8
rm console log
rushatgabhane May 15, 2024
3e4d438
add trip header and trip transactins
rushatgabhane May 16, 2024
1d15129
working report
rushatgabhane May 17, 2024
da2b2f4
get trip transactions
rushatgabhane May 20, 2024
1812e1b
get trip reservations method
rushatgabhane May 20, 2024
0229a52
rm console
rushatgabhane May 20, 2024
876c403
add reservation to receipt
rushatgabhane May 20, 2024
658ba4b
add reservation to receipt
rushatgabhane May 20, 2024
854ac5b
add reservation details
rushatgabhane May 20, 2024
97b1d61
hide horizontal rule
rushatgabhane May 20, 2024
e498fb0
Merge branch 'main' of github.com:rushatgabhane/exfy into trip-room-2
rushatgabhane May 20, 2024
0a24259
Merge branch 'main' of github.com:rushatgabhane/exfy into trip-room-2
rushatgabhane May 23, 2024
fdbc3d3
add trip transaction util
rushatgabhane May 25, 2024
9721904
type for address
rushatgabhane May 25, 2024
f2ea7f5
get trip from backend
rushatgabhane May 25, 2024
c381f99
show reservation code for hotel booking and hotel name
rushatgabhane May 25, 2024
d855793
show car info
rushatgabhane May 25, 2024
25caa28
rm console
rushatgabhane May 25, 2024
2a07889
fix transaction type
rushatgabhane May 25, 2024
f4bfc63
use flatmap
rushatgabhane May 25, 2024
e4ba89e
Merge branch 'main' of github.com:rushatgabhane/exfy into trip-room-2
rushatgabhane May 25, 2024
06f36fb
rm flat
rushatgabhane May 25, 2024
d4e2562
fix original message type
rushatgabhane May 27, 2024
788b765
has reservation list fix type
rushatgabhane May 27, 2024
fcd5684
rm original msg
rushatgabhane May 27, 2024
3822694
rm original msg
rushatgabhane May 27, 2024
5ed20ab
Revert "rm original msg"
rushatgabhane May 27, 2024
d1ded81
Revert "rm original msg"
rushatgabhane May 27, 2024
844c7e1
add type for trip room original msg
rushatgabhane May 27, 2024
95ca8cf
rm train svg
rushatgabhane May 28, 2024
2e48b57
rm train and misc from reservation type
rushatgabhane May 28, 2024
90d2a0c
rm train svg
rushatgabhane May 28, 2024
48bdd41
add comment
rushatgabhane May 28, 2024
29a670f
rm type rail from lang
rushatgabhane May 28, 2024
7df2a56
Update src/libs/DateUtils.ts
rushatgabhane May 30, 2024
880db45
Merge branch 'main' of github.com:rushatgabhane/exfy into trip-room-2
rushatgabhane May 30, 2024
d3708b7
show year only if not this year
rushatgabhane May 30, 2024
41fb546
simplify comment
rushatgabhane May 30, 2024
dee1f1c
rm type
rushatgabhane May 30, 2024
b9b96a8
rm type
rushatgabhane May 30, 2024
89c3597
fix spacing when values are not present
rushatgabhane May 30, 2024
415e62a
use empty state bg
rushatgabhane May 30, 2024
e5a6960
rm animated state bg
rushatgabhane May 30, 2024
a6fc886
show paranthesis only when both short and long name are present
rushatgabhane May 30, 2024
56ed4e1
handle text overflow on native
rushatgabhane May 30, 2024
c4b5df5
use font size small
rushatgabhane May 30, 2024
22c472e
use existing styles
rushatgabhane May 30, 2024
5eba1aa
Merge branch 'main' of github.com:rushatgabhane/exfy into trip-room-2
rushatgabhane Jun 2, 2024
80cd508
add hover style
rushatgabhane Jun 2, 2024
f23f0c1
prettier
rushatgabhane Jun 3, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions assets/images/bed.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/images/car-with-key.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/images/plane.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/images/train.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions src/CONST.ts
Original file line number Diff line number Diff line change
@@ -50,6 +50,7 @@ const KEYBOARD_SHORTCUT_NAVIGATION_TYPE = 'NAVIGATION_SHORTCUT';
const chatTypes = {
POLICY_ANNOUNCE: 'policyAnnounce',
POLICY_ADMINS: 'policyAdmins',
POLICY_TRIP_ROOM: 'policyTripRoom',
GROUP: 'group',
DOMAIN_ALL: 'domainAll',
POLICY_ROOM: 'policyRoom',
@@ -4681,6 +4682,14 @@ const CONST = {
INITIAL_URL: 'INITIAL_URL',
},

RESERVATION_TYPE: {
CAR: 'car',
HOTEL: 'hotel',
FLIGHT: 'flight',
RAIL: 'rail',
MISC: 'misc',
},

DOT_SEPARATOR: '•',

DEFAULT_TAX: {
8 changes: 8 additions & 0 deletions src/components/Icon/Expensicons.ts
Original file line number Diff line number Diff line change
@@ -17,6 +17,7 @@ import NotificationsAvatar from '@assets/images/avatars/notifications-avatar.svg
import ActiveRoomAvatar from '@assets/images/avatars/room.svg';
import BackArrow from '@assets/images/back-left.svg';
import Bank from '@assets/images/bank.svg';
import Bed from '@assets/images/bed.svg';
import Bell from '@assets/images/bell.svg';
import BellSlash from '@assets/images/bellSlash.svg';
import Bill from '@assets/images/bill.svg';
@@ -26,6 +27,7 @@ import Bug from '@assets/images/bug.svg';
import Building from '@assets/images/building.svg';
import Calendar from '@assets/images/calendar.svg';
import Camera from '@assets/images/camera.svg';
import CarWithKey from '@assets/images/car-with-key.svg';
import Car from '@assets/images/car.svg';
import CardsAndDomains from '@assets/images/cards-and-domains.svg';
import Cash from '@assets/images/cash.svg';
@@ -120,6 +122,7 @@ import Paycheck from '@assets/images/paycheck.svg';
import Pencil from '@assets/images/pencil.svg';
import Phone from '@assets/images/phone.svg';
import Pin from '@assets/images/pin.svg';
import Plane from '@assets/images/plane.svg';
import Play from '@assets/images/play.svg';
import Plus from '@assets/images/plus.svg';
import Printer from '@assets/images/printer.svg';
@@ -151,6 +154,7 @@ import Task from '@assets/images/task.svg';
import Thread from '@assets/images/thread.svg';
import ThreeDots from '@assets/images/three-dots.svg';
import ThumbsUp from '@assets/images/thumbs-up.svg';
import Train from '@assets/images/train.svg';
import Transfer from '@assets/images/transfer.svg';
import Trashcan from '@assets/images/trashcan.svg';
import Unlock from '@assets/images/unlock.svg';
@@ -334,6 +338,10 @@ export {
ChatBubbleUnread,
ChatBubbleReply,
Lightbulb,
Plane,
Bed,
CarWithKey,
DocumentPlus,
Train,
Clear,
};
22 changes: 20 additions & 2 deletions src/components/MenuItem.tsx
Original file line number Diff line number Diff line change
@@ -105,6 +105,8 @@
/** The fill color to pass into the secondary icon. */
secondaryIconFill?: string;

isSecondaryIconHoverable?: boolean;

/** Icon Width */
iconWidth?: number;

@@ -170,6 +172,12 @@
/** Text to display for the item */
title?: string;

/** Component to display as the title */
titleComponent?: ReactElement;

Check failure on line 176 in src/components/MenuItem.tsx

GitHub Actions / typecheck

Cannot find name 'ReactElement'. Did you mean 'SVGRectElement'?

/** Any additional styles to apply to the container for title components */
titleContainerStyle?: StyleProp<ViewStyle>;

/** A right-aligned subtitle for this menu option */
subtitle?: string | number;

@@ -285,6 +293,7 @@
secondaryIcon,
secondaryIconFill,
iconType = CONST.ICON_TYPE_ICON,
isSecondaryIconHoverable = false,
iconWidth,
iconHeight,
iconStyles,
@@ -302,6 +311,8 @@
focused = false,
disabled = false,
title,
titleComponent,
titleContainerStyle,
subtitle,
shouldShowBasicTitle,
label,
@@ -528,7 +539,13 @@
</View>
)}
{secondaryIcon && (
<View style={[styles.popoverMenuIcon, iconStyles]}>
<View
style={[
styles.popoverMenuIcon,
iconStyles,
isSecondaryIconHoverable && StyleUtils.getBackgroundAndBorderStyle(focused || isHovered ? theme.hoverComponentBG : theme.overlay),
]}
>
<Icon
contentFit={contentFit}
src={secondaryIcon}
@@ -540,7 +557,7 @@
/>
</View>
)}
<View style={[styles.justifyContentCenter, styles.flex1, StyleUtils.getMenuItemTextContainerStyle(isSmallAvatarSubscriptMenu)]}>
<View style={[styles.justifyContentCenter, styles.flex1, StyleUtils.getMenuItemTextContainerStyle(isSmallAvatarSubscriptMenu), titleContainerStyle]}>
{!!description && shouldShowDescriptionOnTop && (
<Text
style={descriptionTextStyles}
@@ -604,6 +621,7 @@
</Text>
</View>
)}
{titleComponent}
</View>
</View>
</View>
225 changes: 225 additions & 0 deletions src/components/ReportActionItem/TripDetailsView.tsx
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';

Check failure on line 18 in src/components/ReportActionItem/TripDetailsView.tsx

GitHub Actions / Run ESLint

'ReportUtils' is defined but never used
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[] = [
Copy link
Contributor

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?

Copy link
Contributor

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?

{
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.confirmations.length' is possibly 'undefined'.

Check failure on line 127 in src/components/ReportActionItem/TripDetailsView.tsx

GitHub Actions / typecheck

'reservation.confirmations' is possibly 'undefined'.
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) {

Check failure on line 181 in src/components/ReportActionItem/TripDetailsView.tsx

GitHub Actions / Run ESLint

'iouReportID' is defined but never used
const StyleUtils = useStyleUtils();
const {isSmallScreenWidth} = useWindowDimensions();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should use {shouldUseNarrowLayout} = useResponsiveLayout() now per https://expensify.slack.com/archives/C02NK2DQWUX/p1717010005094209

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;
10 changes: 10 additions & 0 deletions src/languages/en.ts
Original file line number Diff line number Diff line change
@@ -224,6 +224,7 @@ export default {
tomorrowAt: 'Tomorrow at',
yesterdayAt: 'Yesterday at',
conjunctionAt: 'at',
conjunctionTo: 'to',
genericErrorMessage: 'Oops... something went wrong and your request could not be completed. Please try again later.',
error: {
invalidAmount: 'Invalid amount.',
@@ -1860,6 +1861,15 @@ export default {
agree: 'I agree to the travel ',
error: 'You must accept the Terms & Conditions for travel to continue',
},
flight: 'Flight',
hotel: 'Hotel',
car: 'Car',
misc: 'Miscellaneous',
rail: 'Rail',
viewTrip: 'View trip',
trip: 'Trip',
tripSummary: 'Trip summary',
departs: 'Departs',
},
workspace: {
common: {
Loading
Loading