diff --git a/src/CONST.ts b/src/CONST.ts index a04e56d0d790..045b99e98c53 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -6227,6 +6227,8 @@ const CONST = { TRAIN: 'train', }, + RESERVATION_ADDRESS_TEST_ID: 'ReservationAddress', + CANCELLATION_POLICY: { UNKNOWN: 'UNKNOWN', NON_REFUNDABLE: 'NON_REFUNDABLE', diff --git a/src/components/ReportActionItem/TripDetailsView.tsx b/src/components/ReportActionItem/TripDetailsView.tsx index 3e4253d848c4..a861161eaeae 100644 --- a/src/components/ReportActionItem/TripDetailsView.tsx +++ b/src/components/ReportActionItem/TripDetailsView.tsx @@ -13,11 +13,12 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import DateUtils from '@libs/DateUtils'; import Navigation from '@libs/Navigation/Navigation'; +import StringUtils from '@libs/StringUtils'; import variables from '@styles/variables'; import * as Expensicons from '@src/components/Icon/Expensicons'; import CONST from '@src/CONST'; import type {ReservationData} from '@src/libs/TripReservationUtils'; -import {getReservationsFromTripTransactions, getTripReservationIcon} from '@src/libs/TripReservationUtils'; +import {getReservationsFromTripTransactions, getTripReservationCode, getTripReservationIcon} from '@src/libs/TripReservationUtils'; import ROUTES from '@src/ROUTES'; import type {Reservation, ReservationTimeDetails} from '@src/types/onyx/Transaction'; import type Transaction from '@src/types/onyx/Transaction'; @@ -61,14 +62,14 @@ function ReservationView({reservation, transactionID, tripRoomReportID, reservat const formattedDate = getFormattedDate(); const bottomDescription = useMemo(() => { - const code = `${reservation.confirmations && reservation.confirmations?.length > 0 ? `${reservation.confirmations.at(0)?.value} • ` : ''}`; + const code = getTripReservationCode(reservation); if (reservation.type === CONST.RESERVATION_TYPE.FLIGHT) { const longName = reservation.company?.longName ? `${reservation.company?.longName} • ` : ''; const shortName = reservation?.company?.shortName ? `${reservation?.company?.shortName} ` : ''; return `${code}${longName}${shortName}${reservation.route?.number}`; } if (reservation.type === CONST.RESERVATION_TYPE.HOTEL) { - return `${code}${reservation.start.address}`; + return `${code}${StringUtils.removeDoubleQuotes(reservation.start.address)}`; } if (reservation.type === CONST.RESERVATION_TYPE.CAR) { const vendor = reservation.vendor ? `${reservation.vendor} • ` : ''; @@ -77,7 +78,7 @@ function ReservationView({reservation, transactionID, tripRoomReportID, reservat if (reservation.type === CONST.RESERVATION_TYPE.TRAIN) { return reservation.route?.name; } - return reservation.start.address ?? reservation.start.location; + return StringUtils.removeDoubleQuotes(reservation.start.address) ?? reservation.start.location; }, [reservation]); const titleComponent = () => { @@ -107,7 +108,14 @@ function ReservationView({reservation, transactionID, tripRoomReportID, reservat > {reservation.type === CONST.RESERVATION_TYPE.CAR ? reservation.carInfo?.name : Str.recapitalize(reservation.start.longName ?? '')} - {!!bottomDescription && {bottomDescription}} + {!!bottomDescription && ( + + {bottomDescription} + + )} ); }; diff --git a/src/libs/StringUtils.ts b/src/libs/StringUtils.ts index 79d9c0aa9d0b..385553563ec3 100644 --- a/src/libs/StringUtils.ts +++ b/src/libs/StringUtils.ts @@ -99,4 +99,11 @@ function getFirstLine(text = '') { return lines.at(0); } -export default {sanitizeString, isEmptyString, removeInvisibleCharacters, normalizeAccents, normalizeCRLF, lineBreaksToSpaces, getFirstLine}; +/** + * Remove double quotes from the string + */ +function removeDoubleQuotes(text = '') { + return text.replace(/"/g, ''); +} + +export default {sanitizeString, isEmptyString, removeInvisibleCharacters, normalizeAccents, normalizeCRLF, lineBreaksToSpaces, getFirstLine, removeDoubleQuotes}; diff --git a/src/libs/TripReservationUtils.ts b/src/libs/TripReservationUtils.ts index 05ed2dad440e..1cc4bee372f2 100644 --- a/src/libs/TripReservationUtils.ts +++ b/src/libs/TripReservationUtils.ts @@ -49,5 +49,12 @@ function getTripEReceiptIcon(transaction?: Transaction): IconAsset | undefined { } } -export {getTripReservationIcon, getReservationsFromTripTransactions, getTripEReceiptIcon}; +/** + * Extracts the confirmation code from a reservation + */ +function getTripReservationCode(reservation: Reservation): string { + return `${reservation.confirmations && reservation.confirmations?.length > 0 ? `${reservation.confirmations.at(0)?.value} • ` : ''}`; +} + +export {getTripReservationIcon, getReservationsFromTripTransactions, getTripEReceiptIcon, getTripReservationCode}; export type {ReservationData}; diff --git a/src/pages/Travel/HotelTripDetails.tsx b/src/pages/Travel/HotelTripDetails.tsx index 4df54faf1fc1..6ad9f0010488 100644 --- a/src/pages/Travel/HotelTripDetails.tsx +++ b/src/pages/Travel/HotelTripDetails.tsx @@ -8,6 +8,7 @@ import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import DateUtils from '@libs/DateUtils'; +import StringUtils from '@libs/StringUtils'; import CONST from '@src/CONST'; import type {PersonalDetails} from '@src/types/onyx'; import type {Reservation} from '@src/types/onyx/Transaction'; @@ -41,9 +42,10 @@ function HotelTripDetails({reservation, personalDetails}: HotelTripDetailsProps) {Str.recapitalize(reservation.start.longName ?? '')} { + it('ReservationView should render the reservation address without double quotes', () => { + render( + , + ); + + const expectedAddress = `${getTripReservationCode(mockReservationData.reservation)}${StringUtils.removeDoubleQuotes(mockReservationData.reservation.start.address)}`; + expect(screen.getByTestId(CONST.RESERVATION_ADDRESS_TEST_ID)).toHaveTextContent(expectedAddress); + }); + + it('HotelTripDetails should render the reservation address without double quotes', () => { + render( + , + ); + + expect(screen.getByTestId(CONST.RESERVATION_ADDRESS_TEST_ID)).toHaveTextContent(StringUtils.removeDoubleQuotes(mockReservationData.reservation.start.address)); + }); +});