scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in revert-pr-1925 (pull request #1927)

Browse Source 
Revert "Feat/sw 2323 find booking (pull request #1925)"

Approved-by: Anton Gunnarsson
This commit is contained in:
Linus Flood
2025-05-02 13:05:42 +00:00
parent 87efb72ff2
commit 6979ac0c3b
69 changed files with 883 additions and 1508 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/scandic-web/components/HotelReservation/AddToCalendar/index.tsx
View File

@@ -1,5 +1,4 @@
"use client"
import { createEvent } from "ics"
import { useIntl } from "react-intl"

21
apps/scandic-web/components/HotelReservation/BookingConfirmation/Confirmation/confirmation.module.css Normal file
View File

@@ -0,0 +1,21 @@
.main {
background-color: var(--Base-Surface-Primary-light-Normal);
display: grid;
gap: var(--Spacing-x5);
grid-template-areas: "header" "booking";
margin: 0 auto;
min-height: 100dvh;
padding-top: var(--Spacing-x5);
width: var(--max-width-page);
}
@media screen and (min-width: 1367px) {
.main {
grid-template-areas:
"header receipt"
"booking receipt";
grid-template-columns: 1fr 340px;
grid-template-rows: auto 1fr;
padding-top: var(--Spacing-x9);
}
}

24
apps/scandic-web/components/HotelReservation/BookingConfirmation/Confirmation/index.tsx Normal file
View File

@@ -0,0 +1,24 @@
"use client"
import { useRef } from "react"
import Header from "@/components/HotelReservation/BookingConfirmation/Header"
import styles from "./confirmation.module.css"
import type { ConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
export default function Confirmation({
booking,
hotel,
children,
refId,
}: React.PropsWithChildren<ConfirmationProps>) {
const mainRef = useRef<HTMLElement | null>(null)
return (
<main className={styles.main} ref={mainRef}>
<Header booking={booking} hotel={hotel} mainRef={mainRef} refId={refId} />
{children}
</main>
)
}

9
apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/ManageBooking.tsx
View File

@@ -1,22 +1,15 @@
"use client"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { myStay } from "@/constants/routes/myStay"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import useLang from "@/hooks/useLang"
import type { ManageBookingProps } from "@/types/components/hotelReservation/bookingConfirmation/actions/manageBooking"
export default function ManageBooking({ refId }: ManageBookingProps) {
export default function ManageBooking({ bookingUrl }: ManageBookingProps) {
const intl = useIntl()
const lang = useLang()
const bookingUrl = `${myStay[lang]}?RefId=${refId}`
return (
<Button

12
apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/index.tsx
View File

@@ -1,11 +1,15 @@
"use client"
import { useIntl } from "react-intl"
import { myStay } from "@/constants/routes/myStay"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import useLang from "@/hooks/useLang"
import AddToCalendar from "../../AddToCalendar"
import AddToCalendarButton from "./Actions/AddToCalendarButton"
// import DownloadInvoice from "./Actions/DownloadInvoice"
import { generateDateTime } from "./Actions/helpers"
import ManageBooking from "./Actions/ManageBooking"
@@ -18,9 +22,11 @@ import type { BookingConfirmationHeaderProps } from "@/types/components/hotelRes
export default function Header({
booking,
hotel,
// mainRef,
refId,
}: BookingConfirmationHeaderProps) {
const intl = useIntl()
const lang = useLang()
const text = intl.formatMessage({
defaultMessage:
@@ -46,6 +52,8 @@ export default function Header({
url: hotel.contactInformation.websiteUrl,
}
const bookingUrlPath = `${myStay[lang]}?RefId=${refId}`
return (
<header className={styles.header}>
<hgroup className={styles.hgroup}>
@@ -66,7 +74,9 @@ export default function Header({
hotelName={hotel.name}
renderButton={(onPress) => <AddToCalendarButton onPress={onPress} />}
/>
<ManageBooking refId={refId} />
<ManageBooking bookingUrl={bookingUrlPath} />
{/* Download Invoice will be added later (currently available on My Stay) */}
{/* <DownloadInvoice mainRef={mainRef} /> */}
</div>
</header>
)

18
apps/scandic-web/components/HotelReservation/BookingConfirmation/Promos/index.tsx
View File

@@ -1,8 +1,9 @@
"use client"
import { useIntl } from "react-intl"
import { myStay } from "@/constants/routes/myStay"
import { homeHrefs } from "@/constants/homeHrefs"
import { myBooking } from "@/constants/myBooking"
import { env } from "@/env/client"
import useLang from "@/hooks/useLang"
@@ -12,17 +13,22 @@ import styles from "./promos.module.css"
import type { PromosProps } from "@/types/components/hotelReservation/bookingConfirmation/promos"
export default function Promos({ refId, hotelId }: PromosProps) {
export default function Promos({
confirmationNumber,
hotelId,
lastName,
}: PromosProps) {
const intl = useIntl()
const lang = useLang()
const homeUrl = homeHrefs[env.NEXT_PUBLIC_NODE_ENV][lang]
const myBookingUrl = myBooking[env.NEXT_PUBLIC_NODE_ENV][lang]
return (
<div className={styles.promos}>
<Promo
buttonText={intl.formatMessage({
defaultMessage: "View and buy add-ons",
})}
href={`${myStay[lang]}?RefId=${refId}`}
href={`${myBookingUrl}?bookingId=${confirmationNumber}&lastName=${lastName}`}
text={intl.formatMessage({
defaultMessage:
"Discover the little extra touches to make your upcoming stay even more unforgettable.",
@@ -35,7 +41,7 @@ export default function Promos({ refId, hotelId }: PromosProps) {
buttonText={intl.formatMessage({
defaultMessage: "Book another stay",
})}
href={`/${lang}?hotel=${hotelId}`}
href={`${homeUrl}?hotel=${hotelId}`}
text={intl.formatMessage({
defaultMessage:
"Get inspired and start dreaming beyond your next trip. Explore more Scandic destinations.",

22
apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx
View File

@@ -20,16 +20,14 @@ import { CurrencyEnum } from "@/types/enums/currency"
export function LinkedReservation({
checkInTime,
checkOutTime,
refId,
confirmationNumber,
roomIndex,
}: LinkedReservationProps) {
const lang = useLang()
const { data, refetch, isLoading } = trpc.booking.confirmation.useQuery({
refId,
const { data, refetch, isLoading } = trpc.booking.get.useQuery({
confirmationNumber,
lang,
})
const {
setRoom,
setFormattedTotalCost,
@@ -43,7 +41,6 @@ export function LinkedReservation({
totalBookingPrice: state.totalBookingPrice,
totalBookingCheques: state.totalBookingCheques,
}))
const intl = useIntl()
useEffect(() => {
@@ -82,20 +79,13 @@ export function LinkedReservation({
return <Retry handleRefetch={refetch} />
}
const { booking, room } = data
return (
<Room
checkInDate={booking.checkInDate}
checkOutDate={booking.checkOutDate}
booking={data.booking}
checkInTime={checkInTime}
checkOutTime={checkOutTime}
confirmationNumber={booking.confirmationNumber}
guaranteeInfo={booking.guaranteeInfo}
guest={booking.guest}
img={room.images[0]}
rateDefinition={booking.rateDefinition}
roomName={room.name}
img={data.room.images[0]}
roomName={data.room.name}
/>
)
}

40
apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx
View File

@@ -20,28 +20,24 @@ import styles from "./room.module.css"
import type { RoomProps } from "@/types/components/hotelReservation/bookingConfirmation/rooms/room"
export default function Room({
checkInDate,
checkOutDate,
booking,
checkInTime,
checkOutTime,
confirmationNumber,
guaranteeInfo,
guest,
img,
rateDefinition,
roomName,
}: RoomProps) {
const intl = useIntl()
const lang = useLang()
const guestName = `${guest.firstName} ${guest.lastName}`
const fromDate = dt(checkInDate).locale(lang)
const toDate = dt(checkOutDate).locale(lang)
const guestName = `${booking.guest.firstName} ${booking.guest.lastName}`
const fromDate = dt(booking.checkInDate).locale(lang)
const toDate = dt(booking.checkOutDate).locale(lang)
const isFlexBooking =
rateDefinition.cancellationRule ===
booking.rateDefinition.cancellationRule ===
CancellationRuleEnum.CancellableBefore6PM
const isChangeBooking =
rateDefinition.cancellationRule === CancellationRuleEnum.Changeable
booking.rateDefinition.cancellationRule === CancellationRuleEnum.Changeable
return (
<article className={styles.room}>
<header className={styles.header}>
@@ -51,11 +47,11 @@ export default function Room({
{
defaultMessage: "Booking number {value}",
},
{ value: confirmationNumber }
{ value: booking.confirmationNumber }
)}
</h2>
</Typography>
{rateDefinition.isMemberRate ? (
{booking.rateDefinition.isMemberRate ? (
<div className={styles.benefits}>
<>
<MaterialIcon
@@ -71,7 +67,7 @@ export default function Room({
</>
</div>
) : null}
{guaranteeInfo && (
{booking.guaranteeInfo && (
<div className={styles.benefits}>
<MaterialIcon
icon="check_circle"
@@ -172,7 +168,7 @@ export default function Room({
})}
</Body>
<Body color="uiTextHighContrast">
{rateDefinition.cancellationText}
{booking.rateDefinition.cancellationText}
</Body>
</li>
{isFlexBooking || isChangeBooking ? (
@@ -200,23 +196,25 @@ export default function Room({
})}
</Body>
<Body color="uiTextHighContrast">{guestName}</Body>
{guest.membershipNumber ? (
{booking.guest.membershipNumber ? (
<Body color="uiTextHighContrast">
{intl.formatMessage(
{
defaultMessage: "Friend no. {value}",
},
{
value: guest.membershipNumber,
value: booking.guest.membershipNumber,
}
)}
</Body>
) : null}
{guest.phoneNumber ? (
<Body color="uiTextHighContrast">{guest.phoneNumber}</Body>
{booking.guest.phoneNumber ? (
<Body color="uiTextHighContrast">
{booking.guest.phoneNumber}
</Body>
) : null}
{guest.email ? (
<Body color="uiTextHighContrast">{guest.email}</Body>
{booking.guest.email ? (
<Body color="uiTextHighContrast">{booking.guest.email}</Body>
) : null}
</div>
</div>

53
apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/index.tsx
View File

@@ -9,56 +9,55 @@ import styles from "./rooms.module.css"
import type { BookingConfirmationRoomsProps } from "@/types/components/hotelReservation/bookingConfirmation/rooms"
async function RoomTitle({ nr }: { nr: number }) {
const intl = await getIntl()
return (
<Typography variant="Title/Subtitle/md">
<h2 className={styles.roomTitle}>
{intl.formatMessage(
{
defaultMessage: "Room {roomIndex}",
},
{ roomIndex: nr }
)}
</h2>
</Typography>
)
}
export default async function Rooms({
booking,
checkInTime,
checkOutTime,
mainRoom,
linkedReservations,
}: BookingConfirmationRoomsProps) {
const { linkedReservations } = booking
const intl = await getIntl()
return (
<section className={styles.rooms}>
<div className={styles.room}>
{linkedReservations.length ? <RoomTitle nr={1} /> : null}
{linkedReservations.length ? (
<Typography variant="Title/Subtitle/md">
<h2 className={styles.roomTitle}>
{intl.formatMessage(
{
defaultMessage: "Room {roomIndex}",
},
{ roomIndex: 1 }
)}
</h2>
</Typography>
) : null}
<Room
checkInDate={booking.checkInDate}
checkOutDate={booking.checkOutDate}
booking={booking}
checkInTime={checkInTime}
checkOutTime={checkOutTime}
confirmationNumber={booking.confirmationNumber}
guaranteeInfo={booking.guaranteeInfo}
guest={booking.guest}
img={mainRoom.images[0]}
rateDefinition={booking.rateDefinition}
roomName={mainRoom.name}
/>
</div>
{linkedReservations.map((reservation, idx) => (
<div className={styles.room} key={reservation.confirmationNumber}>
<RoomTitle nr={idx + 2} />
<Typography variant="Title/Subtitle/md">
<h2 className={styles.roomTitle}>
{intl.formatMessage(
{
defaultMessage: "Room {roomIndex}",
},
{ roomIndex: idx + 2 }
)}
</h2>
</Typography>
<LinkedReservation
checkInTime={checkInTime}
checkOutTime={checkOutTime}
refId={reservation.refId}
confirmationNumber={reservation.confirmationNumber}
roomIndex={idx + 1}
/>
</div>

2
apps/scandic-web/components/HotelReservation/BookingConfirmation/Tracking/index.tsx
View File

@@ -27,7 +27,7 @@ export default function Tracking({
getTracking(
lang,
bookingConfirmation.booking,
bookingConfirmation.hotelData.hotel,
bookingConfirmation.hotel,
rooms
)

2
apps/scandic-web/components/HotelReservation/BookingConfirmation/Tracking/tracking.ts
View File

@@ -67,7 +67,7 @@ function mapAncillaryPackage(
export function getTracking(
lang: Lang,
booking: BookingConfirmation["booking"],
hotel: BookingConfirmation["hotelData"]["hotel"],
hotel: BookingConfirmation["hotel"],
rooms: Room[]
) {
const arrivalDate = new Date(booking.checkInDate)

22
apps/scandic-web/components/HotelReservation/BookingConfirmation/bookingConfirmation.module.css Normal file
View File

@@ -0,0 +1,22 @@
.booking {
display: flex;
flex-direction: column;
gap: var(--Spacing-x5);
grid-area: booking;
padding-bottom: var(--Spacing-x9);
}
.aside {
display: none;
}
@media screen and (min-width: 1367px) {
.mobileReceipt {
display: none;
}
.aside {
display: grid;
grid-area: receipt;
}
}

87
apps/scandic-web/components/HotelReservation/BookingConfirmation/index.tsx Normal file
View File

@@ -0,0 +1,87 @@
import { notFound } from "next/navigation"
import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
import { encrypt } from "@/server/routers/utils/encryption"
import HotelDetails from "@/components/HotelReservation/BookingConfirmation/HotelDetails"
import PaymentDetails from "@/components/HotelReservation/BookingConfirmation/PaymentDetails"
import Promos from "@/components/HotelReservation/BookingConfirmation/Promos"
import Receipt from "@/components/HotelReservation/BookingConfirmation/Receipt"
import Rooms from "@/components/HotelReservation/BookingConfirmation/Rooms"
import SidePanel from "@/components/HotelReservation/SidePanel"
import Divider from "@/components/TempDesignSystem/Divider"
import { getIntl } from "@/i18n"
import BookingConfirmationProvider from "@/providers/BookingConfirmationProvider"
import Alerts from "./Alerts"
import Confirmation from "./Confirmation"
import Tracking from "./Tracking"
import { mapRoomState } from "./utils"
import styles from "./bookingConfirmation.module.css"
import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
export default async function BookingConfirmation({
confirmationNumber,
}: BookingConfirmationProps) {
const bookingConfirmation = await getBookingConfirmation(confirmationNumber)
if (!bookingConfirmation) {
return notFound()
}
const { booking, hotel, room } = bookingConfirmation
if (!room) {
return notFound()
}
const refId = encrypt(
`${booking.confirmationNumber},${booking.guest.lastName}`
)
const intl = await getIntl()
return (
<BookingConfirmationProvider
bookingCode={booking.bookingCode}
currencyCode={booking.currencyCode}
fromDate={booking.checkInDate}
toDate={booking.checkOutDate}
rooms={[
mapRoomState(booking, room, intl),
// null represents "known but not yet fetched rooms" and is used to render placeholders correctly
...Array(booking.linkedReservations.length).fill(null),
]}
vat={booking.vatPercentage}
>
<Confirmation booking={booking} hotel={hotel} room={room} refId={refId}>
<div className={styles.booking}>
<Alerts booking={booking} />
<Rooms
booking={booking}
checkInTime={hotel.hotelFacts.checkin.checkInTime}
checkOutTime={hotel.hotelFacts.checkin.checkOutTime}
mainRoom={room}
linkedReservations={booking.linkedReservations}
/>
<PaymentDetails />
<Divider color="primaryLightSubtle" />
<HotelDetails hotel={hotel} />
<Promos
confirmationNumber={booking.confirmationNumber}
hotelId={hotel.operaId}
lastName={booking.guest.lastName}
/>
<div className={styles.mobileReceipt}>
<Receipt />
</div>
</div>
<aside className={styles.aside}>
<SidePanel variant="receipt">
<Receipt />
</SidePanel>
</aside>
</Confirmation>
<Tracking bookingConfirmation={bookingConfirmation} />
</BookingConfirmationProvider>
)
}

4
apps/scandic-web/components/HotelReservation/BookingConfirmation/utils.ts
View File

@@ -5,10 +5,10 @@ import type { IntlShape } from "react-intl"
import type { BookingConfirmationRoom } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
import { BreakfastPackageEnum } from "@/types/enums/breakfast"
import { CurrencyEnum } from "@/types/enums/currency"
import type { BookingSchema } from "@/types/trpc/routers/booking/confirmation"
import type { BookingConfirmationSchema } from "@/types/trpc/routers/booking/confirmation"
export function mapRoomState(
booking: BookingSchema,
booking: BookingConfirmationSchema,
room: BookingConfirmationRoom,
intl: IntlShape
) {

10
apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/HandleSuccessCallback.tsx
View File

@@ -18,12 +18,12 @@ const validBookingStatuses = [
]
interface HandleStatusPollingProps {
refId: string
confirmationNumber: string
successRedirectUrl: string
}
export default function HandleSuccessCallback({
refId,
confirmationNumber,
successRedirectUrl,
}: HandleStatusPollingProps) {
const router = useRouter()
@@ -33,7 +33,7 @@ export default function HandleSuccessCallback({
error,
isTimeout,
} = useHandleBookingStatus({
refId,
confirmationNumber,
expectedStatuses: validBookingStatuses,
maxRetries: 10,
retryInterval: 2000,
@@ -70,9 +70,9 @@ export default function HandleSuccessCallback({
? `&errorCode=${membershipFailedError.errorCode}`
: ""
router.replace(`${successRedirectUrl}?RefId=${refId}${errorParam}`)
router.replace(`${successRedirectUrl}${errorParam}`)
}
}, [bookingStatus, refId, router, successRedirectUrl])
}, [bookingStatus, successRedirectUrl, router])
if (isTimeout || error) {
return <TimeoutSpinner />

75
apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx
View File

@@ -2,7 +2,7 @@
import { zodResolver } from "@hookform/resolvers/zod"
import { usePathname, useRouter, useSearchParams } from "next/navigation"
import { useCallback, useEffect, useRef, useState } from "react"
import { useCallback, useEffect, useState } from "react"
import { Label } from "react-aria-components"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
@@ -10,6 +10,7 @@ import { useIntl } from "react-intl"
import { Typography } from "@scandic-hotels/design-system/Typography"
import {
BOOKING_CONFIRMATION_NUMBER,
BookingStatusEnum,
PAYMENT_METHOD_TITLES,
PaymentMethodEnum,
@@ -29,6 +30,7 @@ import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { useAvailablePaymentOptions } from "@/hooks/booking/useAvailablePaymentOptions"
import { useHandleBookingStatus } from "@/hooks/booking/useHandleBookingStatus"
import useLang from "@/hooks/useLang"
import useStickyPosition from "@/hooks/useStickyPosition"
import { trackPaymentEvent } from "@/utils/tracking"
@@ -99,7 +101,7 @@ export default function PaymentClient({
(state) => state.actions.setIsSubmittingDisabled
)
const [refId, setRefId] = useState<string>("")
const [bookingNumber, setBookingNumber] = useState<string>("")
const [isPollingForBookingStatus, setIsPollingForBookingStatus] =
useState(false)
@@ -144,14 +146,13 @@ export default function PaymentClient({
return
}
const mainRoom = result.rooms[0]
if (result.reservationStatus == BookingStatusEnum.BookingCompleted) {
const confirmationUrl = `${bookingConfirmation(lang)}?RefId=${mainRoom.refId}`
const confirmationUrl = `${bookingConfirmation(lang)}?${BOOKING_CONFIRMATION_NUMBER}=${result.id}`
router.push(confirmationUrl)
return
}
setRefId(mainRoom.refId)
setBookingNumber(result.id)
const hasPriceChange = result.rooms.some((r) => r.priceChangedMetadata)
if (hasPriceChange) {
@@ -173,8 +174,8 @@ export default function PaymentClient({
})
const priceChange = trpc.booking.priceChange.useMutation({
onSuccess: (confirmationNumber) => {
if (confirmationNumber) {
onSuccess: (result) => {
if (result?.id) {
setIsPollingForBookingStatus(true)
} else {
handlePaymentError("No confirmation number")
@@ -188,39 +189,13 @@ export default function PaymentClient({
},
})
// Replaced useHandleBookingStatus with logic specifically used here, since the hook would need
// to handle different parameters based on use case
const retries = useRef(0)
const bookingStatus = trpc.booking.confirmationCompleted.useQuery(
{
refId,
lang,
},
{
enabled: isPollingForBookingStatus,
refetchInterval: (query) => {
retries.current = query.state.dataUpdateCount
if (query.state.error || query.state.dataUpdateCount >= maxRetries) {
return false
}
if (
query.state.data?.reservationStatus ===
BookingStatusEnum.BookingCompleted
) {
return false
}
return retryInterval
},
refetchIntervalInBackground: true,
refetchOnWindowFocus: false,
refetchOnMount: false,
retry: false,
}
)
const bookingStatus = useHandleBookingStatus({
confirmationNumber: bookingNumber,
expectedStatuses: [BookingStatusEnum.BookingCompleted],
maxRetries,
retryInterval,
enabled: isPollingForBookingStatus,
})
const handlePaymentError = useCallback(
(errorMessage: string) => {
@@ -270,12 +245,18 @@ export default function PaymentClient({
)
useEffect(() => {
if (bookingStatus?.data?.redirectUrl) {
router.push(bookingStatus.data.redirectUrl)
} else if (retries.current >= maxRetries) {
if (bookingStatus?.data?.paymentUrl) {
router.push(bookingStatus.data.paymentUrl)
} else if (
bookingStatus?.data?.reservationStatus ===
BookingStatusEnum.BookingCompleted
) {
const confirmationUrl = `${bookingConfirmation(lang)}?${BOOKING_CONFIRMATION_NUMBER}=${bookingStatus?.data?.id}`
router.push(confirmationUrl)
} else if (bookingStatus.isTimeout) {
handlePaymentError("Timeout")
}
}, [bookingStatus, router, handlePaymentError])
}, [bookingStatus, router, intl, lang, handlePaymentError])
useEffect(() => {
setIsSubmittingDisabled(
@@ -477,7 +458,7 @@ export default function PaymentClient({
initiateBooking.isPending ||
(isPollingForBookingStatus &&
!bookingStatus.data?.paymentUrl &&
retries.current < maxRetries)
!bookingStatus.isTimeout)
) {
return <LoadingSpinner />
}
@@ -639,7 +620,9 @@ export default function PaymentClient({
: ""
router.push(`${selectRate(lang)}${allSearchParams}`)
}}
onAccept={() => priceChange.mutate({ refId })}
onAccept={() =>
priceChange.mutate({ confirmationNumber: bookingNumber })
}
/>
) : null}
</section>

6
apps/scandic-web/components/HotelReservation/FindMyBooking/AdditionalInfoForm.tsx
View File

@@ -18,10 +18,10 @@ import {
import styles from "./findMyBooking.module.css"
export default function AdditionalInfoForm({
refId,
confirmationNumber,
lastName,
}: {
refId: string
confirmationNumber: string
lastName: string
}) {
const router = useRouter()
@@ -37,7 +37,7 @@ export default function AdditionalInfoForm({
const values = form.getValues()
const value = new URLSearchParams({
...values,
RefId: refId,
confirmationNumber,
lastName,
}).toString()
document.cookie = `bv=${encodeURIComponent(value)}; Path=/; Max-Age=600; Secure; SameSite=Strict`

8
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx
View File

@@ -145,7 +145,7 @@ export default function AddAncillaryFlowModal({
) {
addAncillary.mutate(
{
refId,
confirmationNumber: booking.confirmationNumber,
ancillaryComment: data.optionalText,
ancillaryDeliveryTime: selectedAncillary?.requiresDeliveryTime
? data.deliveryTime
@@ -175,8 +175,8 @@ export default function AddAncillaryFlowModal({
)
clearAncillarySessionData()
closeModal()
utils.booking.confirmation.invalidate({
refId: booking.refId,
utils.booking.get.invalidate({
confirmationNumber: booking.confirmationNumber,
})
router.refresh()
} else {
@@ -211,7 +211,7 @@ export default function AddAncillaryFlowModal({
}
: undefined
guaranteeBooking.mutate({
refId,
confirmationNumber: booking.confirmationNumber,
language: lang,
...(card && { card }),
success: `${guaranteeRedirectUrl}?status=success&RefId=${encodeURIComponent(refId)}&ancillary=1`,

6
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/RemoveButton.tsx
View File

@@ -10,12 +10,12 @@ import { toast } from "@/components/TempDesignSystem/Toasts"
import useLang from "@/hooks/useLang"
export default function RemoveButton({
refId,
confirmationNumber,
codes,
title,
onSuccess,
}: {
refId: string
confirmationNumber: string
codes: string[]
title?: string
onSuccess: () => void
@@ -51,7 +51,7 @@ export default function RemoveButton({
removePackage.mutate(
{
language: lang,
refId,
confirmationNumber,
codes,
},
{

5
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/index.tsx
View File

@@ -25,7 +25,6 @@ import type {
export function AddedAncillaries({
ancillaries,
booking,
refId,
}: AddedAncillariesProps) {
const intl = useIntl()
const router = useRouter()
@@ -127,7 +126,7 @@ export function AddedAncillaries({
{booking.confirmationNumber && ancillary.code ? (
<div className={styles.actions}>
<RemoveButton
refId={refId}
confirmationNumber={booking.confirmationNumber}
codes={
ancillary.code ===
BreakfastPackageEnum.ANCILLARY_REGULAR_BREAKFAST
@@ -193,7 +192,7 @@ export function AddedAncillaries({
booking.canModifyAncillaries ? (
<div className={styles.actions}>
<RemoveButton
refId={refId}
confirmationNumber={booking.confirmationNumber}
codes={
ancillary.code ===
BreakfastPackageEnum.ANCILLARY_REGULAR_BREAKFAST

6
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/GuaranteeCallback/index.tsx
View File

@@ -20,12 +20,10 @@ import type { Lang } from "@/constants/languages"
export default function GuaranteeAncillaryHandler({
confirmationNumber,
refId,
returnUrl,
lang,
}: {
confirmationNumber: string
refId: string
returnUrl: string
lang: Lang
}) {
@@ -49,7 +47,7 @@ export default function GuaranteeAncillaryHandler({
addAncillary.mutate(
{
refId,
confirmationNumber,
ancillaryComment: formData.optionalText,
ancillaryDeliveryTime: selectedAncillary.requiresDeliveryTime
? formData.deliveryTime
@@ -88,7 +86,7 @@ export default function GuaranteeAncillaryHandler({
},
}
)
}, [confirmationNumber, refId, returnUrl, addAncillary, lang, router])
}, [confirmationNumber, returnUrl, addAncillary, lang, router])
return <LoadingSpinner />
}

6
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/index.tsx
View File

@@ -213,11 +213,7 @@ export function Ancillaries({
</>
)}
<AddedAncillaries
booking={booking}
ancillaries={uniqueAncillaries}
refId={refId}
/>
<AddedAncillaries booking={booking} ancillaries={uniqueAncillaries} />
<AncillaryFlowModalWrapper>
<AddAncillaryFlowModal

10
apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/Details.tsx
View File

@@ -64,10 +64,10 @@ export default function Details({ booking, user }: DetailsProps) {
const updateGuest = trpc.booking.update.useMutation({
onMutate: () => setIsLoading(true),
onSuccess: (refId) => {
if (refId) {
utils.booking.confirmation.invalidate({
refId,
onSuccess: (data) => {
if (data) {
utils.booking.get.invalidate({
confirmationNumber: data.confirmationNumber,
})
toast.success(
@@ -99,7 +99,7 @@ export default function Details({ booking, user }: DetailsProps) {
async function onSubmit(data: ModifyContactSchema) {
updateGuest.mutate({
refId: booking.refId,
confirmationNumber: booking.confirmationNumber,
guest: {
email: data.email,
phoneNumber: data.phoneNumber,

1
apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/index.tsx
View File

@@ -1,5 +1,4 @@
"use client"
import { useMyStayStore } from "@/stores/my-stay"
import Details from "./Details"

168
apps/scandic-web/components/HotelReservation/MyStay/Receipt/index.tsx Normal file
View File

@@ -0,0 +1,168 @@
import { cookies } from "next/headers"
import { notFound } from "next/navigation"
import ScandicLogoIcon from "@scandic-hotels/design-system/Icons/ScandicLogoIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { dt } from "@/lib/dt"
import {
getAncillaryPackages,
getBookingConfirmation,
getProfileSafely,
} from "@/lib/trpc/memoizedRequests"
import { decrypt } from "@/server/routers/utils/encryption"
import { getIntl } from "@/i18n"
import AdditionalInfoForm from "../../FindMyBooking/AdditionalInfoForm"
import accessBooking, {
ACCESS_GRANTED,
ERROR_BAD_REQUEST,
ERROR_UNAUTHORIZED,
} from "../accessBooking"
import Footer from "./Footer"
import Specification from "./Specification"
import Total from "./Total"
import styles from "./receipt.module.css"
import { CurrencyEnum } from "@/types/enums/currency"
export async function Receipt({ refId }: { refId: string }) {
const value = decrypt(refId)
if (!value) {
return notFound()
}
const [confirmationNumber, lastName] = value.split(",")
const bookingConfirmation = await getBookingConfirmation(confirmationNumber)
if (!bookingConfirmation) {
return notFound()
}
const { booking, hotel, room } = bookingConfirmation
const user = await getProfileSafely()
const bv = cookies().get("bv")?.value
const intl = await getIntl()
const access = accessBooking(booking.guest, lastName, user, bv)
if (access === ACCESS_GRANTED) {
const ancillaryPackages = await getAncillaryPackages({
fromDate: dt(booking.checkInDate).format("YYYY-MM-DD"),
hotelId: hotel.operaId,
toDate: dt(booking.checkOutDate).format("YYYY-MM-DD"),
})
const currency =
booking.currencyCode !== CurrencyEnum.POINTS
? booking.currencyCode
: (booking.ancillaries.find((a) => a.currency !== CurrencyEnum.POINTS)
?.currency ??
booking.packages.find((p) => p.currency !== CurrencyEnum.POINTS)
?.currency)
return (
<main className={styles.main}>
<div>
<ScandicLogoIcon width="89px" height="19px" color="Icon/Accent" />
<div className={styles.addresses}>
<div>
<Typography variant="Body/Supporting text (caption)/smRegular">
<div>{hotel.name}</div>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<div>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{`${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city}`}
</div>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<div className={`${styles.tertiary} ${styles.addressMargin}`}>
{hotel.contactInformation.email}
</div>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<div className={styles.tertiary}>
{hotel.contactInformation.phoneNumber}
</div>
</Typography>
</div>
<div className={styles.rightColumn}>
<Typography variant="Body/Supporting text (caption)/smRegular">
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<div>{`${booking.guest.firstName} ${booking.guest.lastName}`}</div>
</Typography>
{booking.guest.membershipNumber && (
<Typography variant="Body/Supporting text (caption)/smRegular">
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<div>{`${intl.formatMessage({
defaultMessage: "Member",
})} ${booking.guest.membershipNumber}`}</div>
</Typography>
)}
<Typography variant="Body/Supporting text (caption)/smRegular">
<div className={`${styles.tertiary} ${styles.addressMargin}`}>
{booking.guest.email}
</div>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<div className={styles.tertiary}>
{booking.guest.phoneNumber}
</div>
</Typography>
</div>
</div>
</div>
<Total booking={booking} currency={currency} />
<Specification
ancillaryPackages={ancillaryPackages}
booking={booking}
currency={currency}
/>
<hr className={styles.divider} />
<Footer booking={booking} room={room} />
</main>
)
}
if (access === ERROR_BAD_REQUEST) {
return (
<main className={styles.main}>
<div className={styles.form}>
<AdditionalInfoForm
confirmationNumber={confirmationNumber}
lastName={lastName}
/>
</div>
</main>
)
}
if (access === ERROR_UNAUTHORIZED) {
return (
<main className={styles.main}>
<div className={styles.logIn}>
<Typography variant="Title/md">
<h1>
{intl.formatMessage({
defaultMessage: "You need to be logged in to view your booking",
})}
</h1>
</Typography>
<Typography variant="Body/Lead text">
<p>
{intl.formatMessage({
defaultMessage:
"And you need to be logged in with the same member account that made the booking.",
})}
</p>
</Typography>
</div>
</main>
)
}
return notFound()
}

45
apps/scandic-web/components/HotelReservation/MyStay/Receipt/receipt.module.css Normal file
View File

@@ -0,0 +1,45 @@
.main {
background-color: var(--Base-Surface-Primary-light-Normal);
display: flex;
padding: var(--Spacing-x5) var(--Spacing-x4);
flex-direction: column;
gap: var(--Spacing-x5);
}
.addresses {
display: flex;
justify-content: space-between;
margin-top: var(--Spacing-x2);
}
.rightColumn {
text-align: right;
}
.addressMargin {
margin-top: var(--Spacing-x-half);
}
.tertiary {
color: var(--Text-Tertiary);
}
.divider {
color: var(--Border-Divider-Accent);
}
.form {
max-width: 640px;
margin-left: auto;
margin-right: auto;
padding: var(--Spacing-x5) 0;
}
.logIn {
padding: var(--Spacing-x9) var(--Spacing-x2);
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
align-items: center;
color: var(--Scandic-Grey-100);
}

19
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/CancelStay/Steps/FinalConfirmation/index.tsx
View File

@@ -57,7 +57,7 @@ export default function FinalConfirmation({
)
} else {
const cancelledRooms = rooms.filter((r) =>
variables.refIds.includes(r.refId)
variables.confirmationNumbers.includes(r.confirmationNumber)
)
for (const cancelledRoom of cancelledRooms) {
toast.success(
@@ -93,16 +93,13 @@ export default function FinalConfirmation({
)
}
utils.booking.confirmation.invalidate({
refId: bookedRoom.refId,
lang,
utils.booking.get.invalidate({
confirmationNumber: bookedRoom.confirmationNumber,
})
utils.booking.linkedReservations.invalidate({
refId: bookedRoom.refId,
lang,
rooms: bookedRoom.linkedReservations,
})
closeModal()
},
onError() {
@@ -116,13 +113,13 @@ export default function FinalConfirmation({
function cancelBooking() {
if (Array.isArray(formRooms)) {
const refIdsToCancel = formRooms
const confirmationNumbersToCancel = formRooms
.filter((r) => r.checked)
.map((r) => r.confirmationNumber)
if (refIdsToCancel.length) {
if (confirmationNumbersToCancel.length) {
cancelBookingsMutation.mutate({
refIds: refIdsToCancel,
lang,
confirmationNumbers: confirmationNumbersToCancel,
language: lang,
})
}
} else {

10
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/ChangeDates/Steps/Confirmation/index.tsx
View File

@@ -54,10 +54,10 @@ export default function Confirmation({
)
const updateBooking = trpc.booking.update.useMutation({
onSuccess: (refId) => {
if (refId) {
utils.booking.confirmation.invalidate({
refId,
onSuccess: (updatedBooking) => {
if (updatedBooking) {
utils.booking.get.invalidate({
confirmationNumber: updatedBooking.confirmationNumber,
})
toast.success(
@@ -86,7 +86,7 @@ export default function Confirmation({
function handleModifyStay() {
updateBooking.mutate({
refId: bookedRoom.refId,
confirmationNumber: bookedRoom.confirmationNumber,
checkInDate,
checkOutDate,
})

4
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx
View File

@@ -60,7 +60,7 @@ export default function Form() {
const guaranteeRedirectUrl = `${env.NEXT_PUBLIC_NODE_ENV === "development" ? `http://localhost:${env.NEXT_PUBLIC_PORT}` : ""}${guaranteeCallback(lang)}`
const { guaranteeBooking, isLoading, handleGuaranteeError } =
useGuaranteeBooking(refId, false, hotelId)
useGuaranteeBooking(confirmationNumber, false, hotelId)
if (isLoading) {
return (
@@ -85,7 +85,7 @@ export default function Form() {
: undefined
writeGlaToSessionStorage("yes", hotelId)
guaranteeBooking.mutate({
refId,
confirmationNumber,
language: lang,
...(card && { card }),
success: `${guaranteeRedirectUrl}?status=success&RefId=${encodeURIComponent(refId)}`,

1
apps/scandic-web/components/HotelReservation/MyStay/utils/mapRoomDetails.ts
View File

@@ -143,7 +143,6 @@ export function mapRoomDetails({
priceType,
rate,
rateDefinition: booking.rateDefinition,
refId: booking.refId,
reservationStatus: booking.reservationStatus,
room,
roomName: room?.name ?? "",