From 1279f0fff70186db9a4c0f4be16afbb990e14d3b Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Mon, 11 Mar 2024 11:55:30 +0100 Subject: [PATCH 001/230] Initial config for TripRoomPreview --- src/CONST.ts | 1 + .../ReportActionItem/TripRoomPreview.tsx | 43 +++++++++++++++++++ src/libs/ReportUtils.ts | 5 +++ src/pages/home/report/ReportActionItem.tsx | 5 +++ src/types/onyx/Transaction.ts | 37 ++++++++++++++++ 5 files changed, 91 insertions(+) create mode 100644 src/components/ReportActionItem/TripRoomPreview.tsx diff --git a/src/CONST.ts b/src/CONST.ts index 70fecab70c39..d0aae5a2dac8 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -574,6 +574,7 @@ const CONST = { ACTIONS: { LIMIT: 50, TYPE: { + ACTION_TRIPPREVIEW: 'ACTION_TRIPPREVIEW', ADDCOMMENT: 'ADDCOMMENT', ACTIONABLEJOINREQUEST: 'ACTIONABLEJOINREQUEST', APPROVED: 'APPROVED', diff --git a/src/components/ReportActionItem/TripRoomPreview.tsx b/src/components/ReportActionItem/TripRoomPreview.tsx new file mode 100644 index 000000000000..3f0b46ac6f77 --- /dev/null +++ b/src/components/ReportActionItem/TripRoomPreview.tsx @@ -0,0 +1,43 @@ +import React, {useMemo} from 'react'; +import {View} from 'react-native'; +import type {StyleProp, ViewStyle} from 'react-native'; +import {withOnyx} from 'react-native-onyx'; +import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; +import Button from '@components/Button'; +import Icon from '@components/Icon'; +import * as Expensicons from '@components/Icon/Expensicons'; +import OfflineWithFeedback from '@components/OfflineWithFeedback'; +import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; +import SettlementButton from '@components/SettlementButton'; +import {showContextMenuForReport} from '@components/ShowContextMenuContext'; +import Text from '@components/Text'; +import useLocalize from '@hooks/useLocalize'; +import usePermissions from '@hooks/usePermissions'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; +import ControlSelection from '@libs/ControlSelection'; +import * as CurrencyUtils from '@libs/CurrencyUtils'; +import * as DeviceCapabilities from '@libs/DeviceCapabilities'; +import Navigation from '@libs/Navigation/Navigation'; +import * as PolicyUtils from '@libs/PolicyUtils'; +import * as ReceiptUtils from '@libs/ReceiptUtils'; +import * as ReportActionUtils from '@libs/ReportActionsUtils'; +import * as ReportUtils from '@libs/ReportUtils'; +import * as TransactionUtils from '@libs/TransactionUtils'; +import type {ContextMenuAnchor} from '@pages/home/report/ContextMenu/ReportActionContextMenu'; +import * as IOU from '@userActions/IOU'; +import CONST from '@src/CONST'; +import type {TranslationPaths} from '@src/languages/types'; +import ONYXKEYS from '@src/ONYXKEYS'; +import ROUTES from '@src/ROUTES'; +import type {Policy, Report, ReportAction, Session, Transaction, TransactionViolations} from '@src/types/onyx'; +import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; +import ReportActionItemImages from './ReportActionItemImages'; + +function TripRoomPreview() { + return null; +} + +// TripRoomPreview.displayName = 'ReportPreview'; + +export default TripRoomPreview; diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index e062a4857e19..eaf610fea7a6 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -5187,6 +5187,10 @@ function shouldCreateNewMoneyRequestReport(existingIOUReport: OnyxEntry return !existingIOUReport || hasIOUWaitingOnCurrentUserBankAccount(chatReport) || !canAddOrDeleteTransactions(existingIOUReport); } +function getTripTransactions(expenseReportID: string) { + return expenseReportID; +} + export { getReportParticipantsTitle, isReportMessageAttachment, @@ -5394,6 +5398,7 @@ export { isJoinRequestInAdminRoom, canAddOrDeleteTransactions, shouldCreateNewMoneyRequestReport, + getTripTransactions, }; export type { diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index a37138b43039..a71aafe5eab4 100644 --- a/src/pages/home/report/ReportActionItem.tsx +++ b/src/pages/home/report/ReportActionItem.tsx @@ -28,6 +28,7 @@ import ReportPreview from '@components/ReportActionItem/ReportPreview'; import TaskAction from '@components/ReportActionItem/TaskAction'; import TaskPreview from '@components/ReportActionItem/TaskPreview'; import TaskView from '@components/ReportActionItem/TaskView'; +import TripRoomPreview from '@components/ReportActionItem/TripRoomPreview'; import {ShowContextMenuContext} from '@components/ShowContextMenuContext'; import Text from '@components/Text'; import UnreadActionIndicator from '@components/UnreadActionIndicator'; @@ -664,6 +665,10 @@ function ReportActionItem({ return {content}; }; + if (action.actionName === CONST.REPORT.ACTIONS.TYPE.ACTION_TRIPPREVIEW) { + return ; + } + if (action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) { const parentReportAction = parentReportActions?.[report.parentReportActionID ?? ''] ?? null; if (ReportActionsUtils.isTransactionThread(parentReportAction)) { diff --git a/src/types/onyx/Transaction.ts b/src/types/onyx/Transaction.ts index 1a7541955720..b48d90b9935b 100644 --- a/src/types/onyx/Transaction.ts +++ b/src/types/onyx/Transaction.ts @@ -95,6 +95,41 @@ type TaxRate = { data?: TaxRateData; }; +type Reservation = { + company: Company; + confirmations: ReservationConfirmation[]; + start: ReservationTimeDetails; + end: ReservationTimeDetails; + numPassengers?: number; + numberOfRooms?: number; + route: { + class: string; + number: string; + }; + type: ReservationType; +}; + +type ReservationTimeDetails = { + address: string; + date: string; + longName: string; + shortName: string; + timezoneOffset: number; +}; + +type Company = { + longName: string; + shortName?: string; + phone?: string; +}; + +type ReservationConfirmation = { + name: string; + value: string; +}; + +type ReservationType = 'flight' | 'hotel'; + type Transaction = OnyxCommon.OnyxValueWithOfflineFeedback< { /** The original transaction amount */ @@ -209,6 +244,8 @@ type Transaction = OnyxCommon.OnyxValueWithOfflineFeedback< /** Indicates transaction loading */ isLoading?: boolean; + + reservationList?: Reservation[]; }, keyof Comment >; From 370d8a85e5a746c1bc4bb956d6c7ec3c55386d7b Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Tue, 12 Mar 2024 15:31:54 +0100 Subject: [PATCH 002/230] Add template of ReservationRow component --- assets/images/bed.svg | 1 + assets/images/car-with-key.svg | 1 + assets/images/plane.svg | 1 + src/components/Icon/Expensicons.ts | 6 + .../ReportActionItem/ReportPreview.tsx | 3 + .../ReportActionItem/TripRoomPreview.tsx | 163 ++++++++++++++---- src/languages/en.ts | 5 + src/types/onyx/Transaction.ts | 2 +- 8 files changed, 152 insertions(+), 30 deletions(-) create mode 100644 assets/images/bed.svg create mode 100644 assets/images/car-with-key.svg create mode 100644 assets/images/plane.svg diff --git a/assets/images/bed.svg b/assets/images/bed.svg new file mode 100644 index 000000000000..fd654c036a7c --- /dev/null +++ b/assets/images/bed.svg @@ -0,0 +1 @@ + diff --git a/assets/images/car-with-key.svg b/assets/images/car-with-key.svg new file mode 100644 index 000000000000..1586c0dfecfa --- /dev/null +++ b/assets/images/car-with-key.svg @@ -0,0 +1 @@ + diff --git a/assets/images/plane.svg b/assets/images/plane.svg new file mode 100644 index 000000000000..bf4d56875239 --- /dev/null +++ b/assets/images/plane.svg @@ -0,0 +1 @@ + diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts index d9f46203a703..0b928b6e939d 100644 --- a/src/components/Icon/Expensicons.ts +++ b/src/components/Icon/Expensicons.ts @@ -16,6 +16,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'; @@ -25,6 +26,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'; @@ -111,6 +113,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'; @@ -310,4 +313,7 @@ export { ChatBubbleUnread, ChatBubbleReply, Lightbulb, + Plane, + Bed, + CarWithKey, }; diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 381302489699..792be5bc7d8f 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -33,6 +33,7 @@ import ROUTES from '@src/ROUTES'; import type {Policy, Report, ReportAction, Session, Transaction, TransactionViolations} from '@src/types/onyx'; import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; import ReportActionItemImages from './ReportActionItemImages'; +import TripRoomPreview from './TripRoomPreview'; type ReportPreviewOnyxProps = { /** The policy tied to the money request report */ @@ -105,6 +106,8 @@ function ReportPreview({ const {translate} = useLocalize(); const {canUseViolations} = usePermissions(); + return ; + const {hasMissingSmartscanFields, areAllRequestsBeingSmartScanned, hasOnlyTransactionsWithPendingRoutes, hasNonReimbursableTransactions} = useMemo( () => ({ hasMissingSmartscanFields: ReportUtils.hasMissingSmartscanFields(iouReportID), diff --git a/src/components/ReportActionItem/TripRoomPreview.tsx b/src/components/ReportActionItem/TripRoomPreview.tsx index 3f0b46ac6f77..8dc363e1fd88 100644 --- a/src/components/ReportActionItem/TripRoomPreview.tsx +++ b/src/components/ReportActionItem/TripRoomPreview.tsx @@ -1,43 +1,148 @@ -import React, {useMemo} from 'react'; +import React from 'react'; import {View} from 'react-native'; -import type {StyleProp, ViewStyle} from 'react-native'; +import {FlatList} from 'react-native'; +import type {OnyxCollection} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; -import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; import Button from '@components/Button'; import Icon from '@components/Icon'; -import * as Expensicons from '@components/Icon/Expensicons'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; -import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; -import SettlementButton from '@components/SettlementButton'; -import {showContextMenuForReport} from '@components/ShowContextMenuContext'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; -import usePermissions from '@hooks/usePermissions'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import ControlSelection from '@libs/ControlSelection'; -import * as CurrencyUtils from '@libs/CurrencyUtils'; -import * as DeviceCapabilities from '@libs/DeviceCapabilities'; -import Navigation from '@libs/Navigation/Navigation'; -import * as PolicyUtils from '@libs/PolicyUtils'; -import * as ReceiptUtils from '@libs/ReceiptUtils'; -import * as ReportActionUtils from '@libs/ReportActionsUtils'; -import * as ReportUtils from '@libs/ReportUtils'; -import * as TransactionUtils from '@libs/TransactionUtils'; -import type {ContextMenuAnchor} from '@pages/home/report/ContextMenu/ReportActionContextMenu'; -import * as IOU from '@userActions/IOU'; -import CONST from '@src/CONST'; -import type {TranslationPaths} from '@src/languages/types'; +import * as Expensicons from '@src/components/Icon/Expensicons'; import ONYXKEYS from '@src/ONYXKEYS'; -import ROUTES from '@src/ROUTES'; -import type {Policy, Report, ReportAction, Session, Transaction, TransactionViolations} from '@src/types/onyx'; -import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; -import ReportActionItemImages from './ReportActionItemImages'; +import type {ReportAction, Transaction} from '@src/types/onyx'; +import type {Reservation} from '@src/types/onyx/Transaction'; -function TripRoomPreview() { - return null; +const reservations: Reservation[] = []; + +type TripRoomPreviewOnyxProps = { + /** All the transactions, used to update ReportPreview label and status */ + transactions: OnyxCollection; +}; + +type TripRoomPreviewProps = TripRoomPreviewOnyxProps & { + /** All the data of the action */ + action: ReportAction; + + // /** The associated chatReport */ + // chatReportID: string; + + // /** The active IOUReport, used for Onyx subscription */ + // iouReportID: string; + + // /** The report's policyID, used for Onyx subscription */ + // policyID: string; + + // /** Extra styles to pass to View wrapper */ + // containerStyles?: StyleProp; + + // /** Popover context menu anchor, used for showing context menu */ + // contextMenuAnchor?: ContextMenuAnchor; + + // /** Callback for updating context menu active state, used for showing context menu */ + // checkIfContextMenuActive?: () => void; + + // /** Whether a message is a whisper */ + // isWhisper?: boolean; + + // /** Whether the corresponding report action item is hovered */ + // isHovered?: boolean; +}; + +type ReservationRowProps = { + reservation: Reservation; +}; + +function ReservationRow({reservation}: ReservationRowProps) { + const theme = useTheme(); + const styles = useThemeStyles(); + const {translate} = useLocalize(); + return ( + + + + + + {translate(`travel.${reservation.type}`)} + {reservation.type === 'flight' ? ( + + {reservation.start.shortName} + + {reservation.end.shortName} + + ) : ( + {reservation.start.address} + )} + + + ); +} + +function TripRoomPreview({action, transactions}: TripRoomPreviewProps) { + const styles = useThemeStyles(); + const {translate} = useLocalize(); + + return ( + + + + + + + Trip • December 15-20 + + + + + + $1234 + + + + + + + Trip to San Francisco + + + + + {reservations.map((reservation) => ( + + ))} +