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

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

apps/scandic-web/components/HotelReservation/BookingConfirmation/Confirmation/index.tsx

@@ -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>
-  )
-}

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

@@ -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()

apps/scandic-web/components/HotelReservation/BookingConfirmation/index.tsx

@@ -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,

apps/scandic-web/components/HotelReservation/BookingConfirmation/utils.ts

@@ -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,

apps/scandic-web/components/HotelReservation/FindMyBooking/AdditionalInfoForm.tsx

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

apps/scandic-web/components/HotelReservation/FindMyBooking/index.tsx

@@ -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()

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

@@ -15,9 +15,7 @@ import {
   getProfileSafely,
 } from "@/lib/trpc/memoizedRequests"
 
-import AdditionalInfoForm, {
+import AdditionalInfoForm from "@/components/HotelReservation/FindMyBooking/AdditionalInfoForm"
-  type AdditionalInfoCookieValue,
-} 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 }) {

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

@@ -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"
 

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

@@ -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", () => {

apps/scandic-web/components/HotelReservation/MyStay/accessBooking.ts

@@ -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,

apps/scandic-web/components/HotelReservation/MyStay/index.tsx

@@ -21,9 +21,7 @@ import {
   getSavedPaymentCardsSafely,
 } from "@/lib/trpc/memoizedRequests"
 
-import AdditionalInfoForm, {
+import AdditionalInfoForm from "@/components/HotelReservation/FindMyBooking/AdditionalInfoForm"
-  type AdditionalInfoCookieValue,
-} 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"
 

apps/scandic-web/package.json

@@ -93,7 +93,6 @@
     "react-hook-form": "^7.56.2",
     "react-international-phone": "^4.5.0",
     "react-intl": "^7.1.11",
-    "react-to-print": "^3.1.0",
     "server-only": "^0.0.1",
     "supercluster": "^8.0.1",
     "usehooks-ts": "3.1.1",

apps/scandic-web/types/components/hotelReservation/bookingConfirmation/actions/addToCalendar.ts

@@ -1,11 +0,0 @@
-import type { RouterOutput } from "@scandic-hotels/trpc/client"
-import type { EventAttributes } from "ics"
-
-export interface AddToCalendarProps {
-  checkInDate: NonNullable<
-    RouterOutput["booking"]["get"]
-  >["booking"]["checkInDate"]
-  event: EventAttributes
-  hotelName: NonNullable<RouterOutput["booking"]["get"]>["hotel"]["name"]
-  renderButton: (onPress: () => Promise<void>) => React.ReactNode
-}

apps/scandic-web/types/components/hotelReservation/bookingConfirmation/actions/manageBooking.ts

@@ -1,4 +0,0 @@
-import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConfirmation"
-
-export interface ManageBookingProps
-  extends Pick<BookingConfirmation, "booking"> {}

apps/scandic-web/types/components/hotelReservation/bookingConfirmation/bookingConfirmation.ts

@@ -1,23 +0,0 @@
-import type {
-  BookingConfirmation,
-  BookingConfirmationSchema,
-} from "@scandic-hotels/trpc/types/bookingConfirmation"
-import type { Room } from "@scandic-hotels/trpc/types/hotel"
-
-export interface BookingConfirmationProps {
-  refId: string
-  membershipFailedError: boolean
-}
-
-export interface BookingConfirmationRoom extends Room {
-  bedType: Room["roomTypes"][number]
-}
-
-export interface ConfirmationProps
-  extends Pick<BookingConfirmation, "booking" | "hotel"> {
-  room: BookingConfirmationRoom
-}
-
-export interface BookingConfirmationAlertsProps {
-  booking: BookingConfirmationSchema
-}

apps/scandic-web/types/components/hotelReservation/bookingConfirmation/header.ts

@@ -1,7 +0,0 @@
-import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConfirmation"
-import type { MutableRefObject } from "react"
-
-export interface BookingConfirmationHeaderProps
-  extends Pick<BookingConfirmation, "booking" | "hotel"> {
-  mainRef: MutableRefObject<HTMLElement | null>
-}

packages/booking-flow/lib/components/AddToCalendar/index.tsx

@@ -1,16 +1,25 @@
 "use client"
-import { createEvent } from "ics"
+import { createEvent, type EventAttributes } 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 useLang from "../../hooks/useLang"
 
-import type { AddToCalendarProps } from "@/types/components/hotelReservation/bookingConfirmation/actions/addToCalendar"
+import type { RouterOutput } from "@scandic-hotels/trpc/client"
 
-export default function AddToCalendar({
+type AddToCalendarProps = {
+  checkInDate: NonNullable<
+    RouterOutput["booking"]["get"]
+  >["booking"]["checkInDate"]
+  event: EventAttributes
+  hotelName: NonNullable<RouterOutput["booking"]["get"]>["hotel"]["name"]
+  renderButton: (onPress: () => Promise<void>) => React.ReactNode
+}
+
+export function AddToCalendar({
   checkInDate,
   event,
   hotelName,

packages/booking-flow/lib/components/BookingConfirmation/Confirmation/index.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { useRef } from "react"
+
+import { Header } from "../Header"
+
+import styles from "./confirmation.module.css"
+
+import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConfirmation"
+
+import type { BookingConfirmationRoom } from "../../../types/components/bookingConfirmation/bookingConfirmation"
+
+interface ConfirmationProps
+  extends Pick<BookingConfirmation, "booking" | "hotel"> {
+  room: BookingConfirmationRoom
+}
+
+export 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>
+  )
+}

packages/booking-flow/lib/components/BookingConfirmation/Header/Actions/AddToCalendarButton.tsx

@@ -4,11 +4,7 @@ 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({
+export function AddToCalendarButton({ onPress }: { onPress: () => void }) {
-  onPress,
-}: {
-  onPress: () => void
-}) {
   const intl = useIntl()
 
   return (

packages/booking-flow/lib/components/BookingConfirmation/Header/Actions/DownloadInvoice.tsx

@@ -5,7 +5,7 @@ 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"
+import type { DownloadInvoiceProps } from "../../../../types/components/bookingConfirmation/actions/downloadInvoice"
 
 export default function DownloadInvoice({ mainRef }: DownloadInvoiceProps) {
   const intl = useIntl()

packages/booking-flow/lib/components/BookingConfirmation/Header/Actions/ManageBooking.tsx

@@ -7,10 +7,13 @@ 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 useLang from "../../../../hooks/useLang"
 
-import type { ManageBookingProps } from "@/types/components/hotelReservation/bookingConfirmation/actions/manageBooking"
+import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConfirmation"
-import type { AdditionalInfoCookieValue } from "@/components/HotelReservation/FindMyBooking/AdditionalInfoForm"
+
+import type { AdditionalInfoCookieValue } from "../../../../types/components/findMyBooking/additionalInfoCookieValue"
+
+interface ManageBookingProps extends Pick<BookingConfirmation, "booking"> {}
 
 export default function ManageBooking({ booking }: ManageBookingProps) {
   const intl = useIntl()

packages/booking-flow/lib/components/BookingConfirmation/Header/index.tsx

@@ -5,19 +5,24 @@ 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 { AddToCalendar } from "../../AddToCalendar"
-import AddToCalendarButton from "./Actions/AddToCalendarButton"
+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 { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConfirmation"
 import type { EventAttributes } from "ics"
+import type { MutableRefObject } from "react"
 
-import type { BookingConfirmationHeaderProps } from "@/types/components/hotelReservation/bookingConfirmation/header"
+export interface BookingConfirmationHeaderProps
+  extends Pick<BookingConfirmation, "booking" | "hotel"> {
+  mainRef: MutableRefObject<HTMLElement | null>
+}
 
-export default function Header({
+export function Header({
   booking,
   hotel,
   // mainRef,

packages/booking-flow/lib/types/components/bookingConfirmation/bookingConfirmation.ts

@@ -0,0 +1,5 @@
+import type { Room } from "@scandic-hotels/trpc/types/hotel"
+
+export interface BookingConfirmationRoom extends Room {
+  bedType: Room["roomTypes"][number]
+}

packages/booking-flow/lib/types/components/findMyBooking/additionalInfoCookieValue.ts

@@ -0,0 +1,6 @@
+export type AdditionalInfoCookieValue = {
+  firstName: string
+  email: string
+  confirmationNumber: string
+  lastName: string
+}

packages/booking-flow/package.json

@@ -20,6 +20,10 @@
     "./BookingWidget/FloatingBookingWidget": "./lib/components/BookingWidget/FloatingBookingWidget/index.tsx",
     "./BookingWidget/Skeleton": "./lib/components/BookingWidget/Skeleton.tsx",
     "./components/AdditionalAmenities": "./lib/components/AdditionalAmenities/index.tsx",
+    "./components/AddToCalendar": "./lib/components/AddToCalendar/index.tsx",
+    "./components/BookingConfirmation/Confirmation": "./lib/components/BookingConfirmation/Confirmation/index.tsx",
+    "./components/BookingConfirmation/Header/Actions/downloadInvoice": "./lib/components/BookingConfirmation/Header/Actions/downloadInvoice.ts",
+    "./components/BookingConfirmation/Header/Actions/helpers": "./lib/components/BookingConfirmation/Header/Actions/helpers.ts",
     "./components/Contact": "./lib/components/Contact/index.tsx",
     "./components/FnFNotAllowedAlert": "./lib/components/FnFNotAllowedAlert/index.tsx",
     "./components/HotelDetailsSidePeek": "./lib/components/HotelDetailsSidePeek/index.tsx",
@@ -51,6 +55,8 @@
     "./stores/hotels-map": "./lib/stores/hotels-map.ts",
     "./stores/booking-confirmation": "./lib/stores/booking-confirmation/index.ts",
     "./types/components/selectRate/selectRate": "./lib/types/components/selectRate/selectRate.ts",
+    "./types/components/bookingConfirmation/bookingConfirmation": "./lib/types/components/bookingConfirmation/bookingConfirmation.ts",
+    "./types/components/findMyBooking/additionalInfoCookieValue": "./lib/types/components/findMyBooking/additionalInfoCookieValue.ts",
     "./types/stores/rates": "./lib/types/stores/rates.ts",
     "./types/stores/booking-confirmation": "./lib/types/stores/booking-confirmation.ts",
     "./utils/isSameBooking": "./lib/utils/isSameBooking.ts",
@@ -71,6 +77,7 @@
     "dayjs": "^1.11.13",
     "downshift": "^9.0.9",
     "fast-deep-equal": "^3.1.0",
+    "ics": "^3.8.1",
     "json-stable-stringify-without-jsonify": "^1.0.1",
     "motion": "^12.10.0",
     "nuqs": "^2.4.3",
@@ -78,6 +85,7 @@
     "react-day-picker": "^9.6.7",
     "react-hook-form": "^7.56.2",
     "react-intl": "^7.1.11",
+    "react-to-print": "^3.1.0",
     "usehooks-ts": "3.1.1",
     "zustand": "^4.5.2"
   },

yarn.lock

@@ -6063,6 +6063,7 @@ __metadata:
     eslint-plugin-import: "npm:^2.31.0"
     eslint-plugin-simple-import-sort: "npm:^12.1.1"
     fast-deep-equal: "npm:^3.1.0"
+    ics: "npm:^3.8.1"
     json-stable-stringify-without-jsonify: "npm:^1.0.1"
     motion: "npm:^12.10.0"
     nuqs: "npm:^2.4.3"
@@ -6070,6 +6071,7 @@ __metadata:
     react-day-picker: "npm:^9.6.7"
     react-hook-form: "npm:^7.56.2"
     react-intl: "npm:^7.1.11"
+    react-to-print: "npm:^3.1.0"
     typescript: "npm:5.8.3"
     usehooks-ts: "npm:3.1.1"
     vitest: "npm:^3.2.4"
@@ -6366,7 +6368,6 @@ __metadata:
     react-hook-form: "npm:^7.56.2"
     react-international-phone: "npm:^4.5.0"
     react-intl: "npm:^7.1.11"
-    react-to-print: "npm:^3.1.0"
     schema-dts: "npm:^1.1.5"
     server-only: "npm:^0.0.1"
     start-server-and-test: "npm:^2.0.11"