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

Merged in chore/SW-3397-move-confirmation-component-with (pull request #2759)

Browse Source 
chore(SW-3397) Moved Confirmation component with Header to booking-flow package

* chore(SW-3397) Moved Confirmation component with Header to booking-flow package

* chore(SW-3397): Optimised code


Approved-by: Anton Gunnarsson
This commit is contained in:
Hrishikesh Vaipurkar
2025-09-04 13:07:11 +00:00
parent 6fa301f8e7
commit 55e25d6c75
30 changed files with 101 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,59 +0,0 @@
"use client"
import { createEvent } from "ics"
import { useIntl } from "react-intl"
import { dt } from "@scandic-hotels/common/dt"
import { logger } from "@scandic-hotels/common/logger"
import { toast } from "@scandic-hotels/design-system/Toast"
import useLang from "@/hooks/useLang"
import type { AddToCalendarProps } from "@/types/components/hotelReservation/bookingConfirmation/actions/addToCalendar"
export default function AddToCalendar({
checkInDate,
event,
hotelName,
renderButton,
}: AddToCalendarProps) {
const lang = useLang()
const intl = useIntl()
async function downloadBooking() {
try {
const d = dt(checkInDate).locale(lang).format("YYYY-MM-DD")
const filename = `${hotelName.toLowerCase().split(" ").join("_")}-${d}.ics`
createEvent(event, (error, value) => {
if (error) {
logger.error("ICS Error:", error)
toast.error(
intl.formatMessage({
defaultMessage: "Failed to add to calendar",
})
)
return
}
const file = new File([value], filename, { type: "text/calendar" })
const url = URL.createObjectURL(file)
const anchor = document.createElement("a")
anchor.href = url
anchor.download = filename
document.body.appendChild(anchor)
anchor.click()
document.body.removeChild(anchor)
URL.revokeObjectURL(url)
})
} catch (error) {
logger.error("Download error:", error)
toast.error(
intl.formatMessage({
defaultMessage: "Failed to add to calendar",
})
)
}
}
return renderButton(downloadBooking)
}

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

@@ -1,21 +0,0 @@
.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
View File

@@ -1,24 +0,0 @@
"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,
}: React.PropsWithChildren<ConfirmationProps>) {
const mainRef = useRef<HTMLElement | null>(null)
return (
<main className={styles.main} ref={mainRef}>
<Header booking={booking} hotel={hotel} mainRef={mainRef} />
{children}
</main>
)
}

30
apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/AddToCalendarButton.tsx
View File

@@ -1,30 +0,0 @@
"use client"
import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
export default function AddToCalendarButton({
onPress,
}: {
onPress: () => void
}) {
const intl = useIntl()
return (
<Button
variant="Text"
size="Small"
color="Primary"
wrapping
typography="Body/Supporting text (caption)/smBold"
onPress={onPress}
>
<MaterialIcon size={20} icon="calendar_add_on" color="CurrentColor" />
{intl.formatMessage({
defaultMessage: "Add to calendar",
})}
</Button>
)
}

33
apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/DownloadInvoice.tsx
View File

@@ -1,33 +0,0 @@
"use client"
import { useIntl } from "react-intl"
import { useReactToPrint } from "react-to-print"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import type { DownloadInvoiceProps } from "@/types/components/hotelReservation/bookingConfirmation/actions/downloadInvoice"
export default function DownloadInvoice({ mainRef }: DownloadInvoiceProps) {
const intl = useIntl()
const reactToPrintFn = useReactToPrint({ contentRef: mainRef })
function downloadBooking() {
reactToPrintFn()
}
return (
<Button
intent="text"
onPress={downloadBooking}
size="small"
theme="base"
variant="icon"
wrapping
>
<MaterialIcon icon="download" color="CurrentColor" />
{intl.formatMessage({
defaultMessage: "Download invoice",
})}
</Button>
)
}

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

@@ -1,49 +0,0 @@
"use client"
import { useEffect } from "react"
import { useIntl } from "react-intl"
import { myStay } from "@scandic-hotels/common/constants/routes/myStay"
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import useLang from "@/hooks/useLang"
import type { ManageBookingProps } from "@/types/components/hotelReservation/bookingConfirmation/actions/manageBooking"
import type { AdditionalInfoCookieValue } from "@/components/HotelReservation/FindMyBooking/AdditionalInfoForm"
export default function ManageBooking({ booking }: ManageBookingProps) {
const intl = useIntl()
const lang = useLang()
const { refId, confirmationNumber } = booking
const { email, firstName, lastName } = booking.guest
useEffect(() => {
// Setting the `bv` cookie allows direct access to My stay without prompting for more information.
const value: AdditionalInfoCookieValue = {
email,
firstName,
lastName,
confirmationNumber,
}
document.cookie = `bv=${JSON.stringify(value)}; Path=/; Max-Age=600; Secure; SameSite=Strict`
}, [confirmationNumber, email, firstName, lastName])
const myStayURL = `${myStay[lang]}?RefId=${encodeURIComponent(refId)}`
return (
<ButtonLink
href={myStayURL}
variant="Text"
size="Small"
color="Primary"
typography="Body/Supporting text (caption)/smBold"
wrapping
>
<MaterialIcon size={20} icon="edit_square" color="CurrentColor" />
{intl.formatMessage({
defaultMessage: "Manage booking",
})}
</ButtonLink>
)
}

15
apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/helpers.ts
View File

@@ -1,15 +0,0 @@
import { dt } from "@scandic-hotels/common/dt"
import type { DateTime } from "ics"
export function generateDateTime(d: string): DateTime {
const _d = dt(d).utc()
return [
_d.year(),
// Need to add +1 since month is 0 based
_d.month() + 1,
_d.date(),
_d.hour(),
_d.minute(),
]
}

40
apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/header.module.css
View File

@@ -1,40 +0,0 @@
.header,
.hgroup {
display: flex;
flex-direction: column;
}
.header {
gap: var(--Spacing-x2);
grid-area: header;
}
.hgroup {
gap: var(--Spacing-x-half);
}
.body {
max-width: 720px;
}
.actions {
border-radius: var(--Corner-radius-md);
display: grid;
grid-area: actions;
justify-content: flex-start;
}
@media screen and (min-width: 768px) {
.actions {
gap: var(--Spacing-x3);
grid-auto-columns: auto;
grid-auto-flow: column;
grid-template-columns: auto;
}
}
@media screen and (min-width: 1367px) {
.header {
padding-bottom: var(--Spacing-x4);
}
}

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

@@ -1,77 +0,0 @@
"use client"
import { useIntl } from "react-intl"
import Body from "@scandic-hotels/design-system/Body"
import Title from "@scandic-hotels/design-system/Title"
import AddToCalendar from "../../AddToCalendar"
import AddToCalendarButton from "./Actions/AddToCalendarButton"
// import DownloadInvoice from "./Actions/DownloadInvoice"
import { generateDateTime } from "./Actions/helpers"
import ManageBooking from "./Actions/ManageBooking"
import styles from "./header.module.css"
import type { EventAttributes } from "ics"
import type { BookingConfirmationHeaderProps } from "@/types/components/hotelReservation/bookingConfirmation/header"
export default function Header({
booking,
hotel,
// mainRef,
}: BookingConfirmationHeaderProps) {
const intl = useIntl()
const text = intl.formatMessage({
defaultMessage:
"Thank you for your booking! We look forward to welcoming you and hope you have a pleasant stay.",
})
const event: EventAttributes = {
busyStatus: "FREE",
categories: ["booking", "hotel", "stay"],
created: generateDateTime(booking.createDateTime),
description: hotel.hotelContent.texts.descriptions?.medium,
end: generateDateTime(booking.checkOutDate),
endInputType: "utc",
geo: {
lat: hotel.location.latitude,
lon: hotel.location.longitude,
},
location: `${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city} ${hotel.address.country}`,
start: generateDateTime(booking.checkInDate),
startInputType: "utc",
status: "CONFIRMED",
title: hotel.name,
url: hotel.contactInformation.websiteUrl,
}
return (
<header className={styles.header}>
<hgroup className={styles.hgroup}>
<Title as="h2" color="red" textTransform="uppercase" type="h2">
{intl.formatMessage({
defaultMessage: "Booking confirmation",
})}
</Title>
<Title as="h2" color="burgundy" textTransform="uppercase" type="h1">
{hotel.name}
</Title>
</hgroup>
<Body className={styles.body}>{text}</Body>
<div className={styles.actions}>
<AddToCalendar
checkInDate={booking.checkInDate}
event={event}
hotelName={hotel.name}
renderButton={(onPress) => <AddToCalendarButton onPress={onPress} />}
/>
<ManageBooking booking={booking} />
{/* Download Invoice will be added later (currently available on My Stay) */}
{/* <DownloadInvoice mainRef={mainRef} /> */}
</div>
</header>
)
}

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

@@ -10,8 +10,9 @@ import Promo from "./Promo"
import styles from "./promos.module.css"
import type { AdditionalInfoCookieValue } from "@scandic-hotels/booking-flow/types/components/findMyBooking/additionalInfoCookieValue"
import type { PromosProps } from "@/types/components/hotelReservation/bookingConfirmation/promos"
import type { AdditionalInfoCookieValue } from "../../FindMyBooking/AdditionalInfoForm"
export default function Promos({ booking }: PromosProps) {
const intl = useIntl()

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

@@ -1,5 +1,6 @@
import { notFound } from "next/navigation"
import { Confirmation } from "@scandic-hotels/booking-flow/components/BookingConfirmation/Confirmation"
import BookingConfirmationProvider from "@scandic-hotels/booking-flow/providers/BookingConfirmationProvider"
import { filterOverlappingDates } from "@scandic-hotels/booking-flow/utils/SelectRate"
import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
@@ -17,13 +18,15 @@ import Rooms from "@/components/HotelReservation/BookingConfirmation/Rooms"
import SidePanel from "@/components/HotelReservation/SidePanel"
import { getIntl } from "@/i18n"
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"
type BookingConfirmationProps = {
refId: string
membershipFailedError: boolean
}
export default async function BookingConfirmation({
refId,

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

@@ -4,13 +4,12 @@ import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast"
import type { BookingConfirmationRoom } from "@scandic-hotels/booking-flow/types/components/bookingConfirmation/bookingConfirmation"
import type {
BookingConfirmationSchema,
PackageSchema,
} from "@scandic-hotels/trpc/types/bookingConfirmation"
import type { BookingConfirmationRoom } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
export function mapRoomState(
booking: BookingConfirmationSchema,
room: BookingConfirmationRoom,

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

@@ -18,12 +18,7 @@ import {
import styles from "./findMyBooking.module.css"
export type AdditionalInfoCookieValue = {
firstName: string
email: string
confirmationNumber: string
lastName: string
}
import type { AdditionalInfoCookieValue } from "@scandic-hotels/booking-flow/types/components/findMyBooking/additionalInfoCookieValue"
export default function AdditionalInfoForm({
confirmationNumber,

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

@@ -24,7 +24,7 @@ import { type FindMyBookingFormSchema, findMyBookingFormSchema } from "./schema"
import styles from "./findMyBooking.module.css"
import type { AdditionalInfoCookieValue } from "./AdditionalInfoForm"
import type { AdditionalInfoCookieValue } from "@scandic-hotels/booking-flow/types/components/findMyBooking/additionalInfoCookieValue"
export default function FindMyBooking() {
const router = useRouter()

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

@@ -15,9 +15,7 @@ import {
getProfileSafely,
} from "@/lib/trpc/memoizedRequests"
import AdditionalInfoForm, {
type AdditionalInfoCookieValue,
} from "@/components/HotelReservation/FindMyBooking/AdditionalInfoForm"
import AdditionalInfoForm from "@/components/HotelReservation/FindMyBooking/AdditionalInfoForm"
import { getIntl } from "@/i18n"
import { isLoggedInUser } from "@/utils/isLoggedInUser"
@@ -33,6 +31,7 @@ import Tracking from "./tracking"
import styles from "./receipt.module.css"
import type { AdditionalInfoCookieValue } from "@scandic-hotels/booking-flow/types/components/findMyBooking/additionalInfoCookieValue"
import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConfirmation"
export async function Receipt({ refId }: { refId: string }) {

6
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/AddToCalendar/index.tsx
View File

@@ -2,12 +2,12 @@
import { usePathname } from "next/navigation"
import { AddToCalendar } from "@scandic-hotels/booking-flow/components/AddToCalendar"
import { generateDateTime } from "@scandic-hotels/booking-flow/components/BookingConfirmation/Header/Actions/helpers"
import { isWebview } from "@/constants/routes/webviews"
import { useMyStayStore } from "@/stores/my-stay"
import AddToCalendar from "@/components/HotelReservation/AddToCalendar"
import { generateDateTime } from "@/components/HotelReservation/BookingConfirmation/Header/Actions/helpers"
import { dateHasPassed } from "../utils"
import AddToCalendarButton from "./AddToCalendarButton"

2
apps/scandic-web/components/HotelReservation/MyStay/accessBooking.test.ts
View File

@@ -7,10 +7,10 @@ import accessBooking, {
ERROR_UNAUTHORIZED,
} from "./accessBooking"
import type { AdditionalInfoCookieValue } from "@scandic-hotels/booking-flow/types/components/findMyBooking/additionalInfoCookieValue"
import type { Guest } from "@scandic-hotels/trpc/routers/booking/output"
import type { SafeUser } from "@/types/user"
import type { AdditionalInfoCookieValue } from "../FindMyBooking/AdditionalInfoForm"
describe("Access booking", () => {
describe("for logged in booking", () => {

2
apps/scandic-web/components/HotelReservation/MyStay/accessBooking.ts
View File

@@ -1,7 +1,7 @@
import type { AdditionalInfoCookieValue } from "@scandic-hotels/booking-flow/types/components/findMyBooking/additionalInfoCookieValue"
import type { Guest } from "@scandic-hotels/trpc/routers/booking/output"
import type { SafeUser } from "@/types/user"
import type { AdditionalInfoCookieValue } from "../FindMyBooking/AdditionalInfoForm"
export {
ACCESS_GRANTED,

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

@@ -21,9 +21,7 @@ import {
getSavedPaymentCardsSafely,
} from "@/lib/trpc/memoizedRequests"
import AdditionalInfoForm, {
type AdditionalInfoCookieValue,
} from "@/components/HotelReservation/FindMyBooking/AdditionalInfoForm"
import AdditionalInfoForm from "@/components/HotelReservation/FindMyBooking/AdditionalInfoForm"
import accessBooking, {
ACCESS_GRANTED,
ERROR_BAD_REQUEST,
@@ -42,6 +40,7 @@ import { isLoggedInUser } from "@/utils/isLoggedInUser"
import styles from "./index.module.css"
import type { AdditionalInfoCookieValue } from "@scandic-hotels/booking-flow/types/components/findMyBooking/additionalInfoCookieValue"
import type { Lang } from "@scandic-hotels/common/constants/language"
import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConfirmation"