Merged in feat/SW-1276-implement-design (pull request #1348)

Feat/SW-1276 implement design * feat(SW-1276) UI implementation Desktop part 1 for MyStay * feat(SW-1276) UI implementation Desktop part 2 for MyStay * feat(SW-1276) UI implementation Mobile part 1 for MyStay * refactor: move files from MyStay/MyStay to MyStay * feat(SW-1276) Sidepeek implementation * feat(SW-1276): Refactoring * feat(SW-1276) UI implementation Mobile part 2 for MyStay * feat(SW-1276): translations * feat(SW-1276) fixed skeleton * feat(SW-1276): Added missing translations * feat(SW-1276): Removed console log * feat(SW-1276) fixed translations * feat(SW-1276): Added translations * feat(SW-1276) fix dynamic ID:s * feat(SW-1276) removed createElement * feat(SW-1276): Fixed build errors * feat(SW-1276): Updated label * feat(SW-1276): Rewrite SummaryCard Approved-by: Niclas Edenvin
2025-02-18 14:20:54 +00:00
parent 90fee1b0c4
commit 8616e4ab76
56 changed files with 4163 additions and 227 deletions
--- a/components/HotelReservation/MyStay/index.tsx
+++ b/components/HotelReservation/MyStay/index.tsx
@@ -0,0 +1,71 @@
+import { homeHrefs } from "@/constants/homeHrefs"
+import { env } from "@/env/server"
+import { dt } from "@/lib/dt"
+import {
+  getAncillaryPackages,
+  getBookingConfirmation,
+  getProfileSafely,
+} from "@/lib/trpc/memoizedRequests"
+
+import Image from "@/components/Image"
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+
+import { Ancillaries } from "./Ancillaries"
+import BookingSummary from "./BookingSummary"
+import { Header } from "./Header"
+import Promo from "./Promo"
+import { ReferenceCard } from "./ReferenceCard"
+import { Room } from "./Room"
+
+import styles from "./myStay.module.css"
+
+export async function MyStay({ reservationId }: { reservationId: string }) {
+  const { booking, hotel, room } = await getBookingConfirmation(reservationId)
+  const userResponse = await getProfileSafely()
+  const user = userResponse && !("error" in userResponse) ? userResponse : null
+  const intl = await getIntl()
+  const lang = getLang()
+  const homeUrl = homeHrefs[env.NODE_ENV][lang]
+  const fromDate = dt(booking.checkInDate).format("YYYY-MM-DD")
+  const toDate = dt(booking.checkOutDate).format("YYYY-MM-DD")
+  const hotelId = hotel.operaId
+  const ancillaryInput = { fromDate, hotelId, toDate }
+  void getAncillaryPackages(ancillaryInput)
+  const ancillaryPackages = await getAncillaryPackages(ancillaryInput)
+
+  return (
+    <main className={styles.main}>
+      <div className={styles.imageContainer}>
+        <div className={styles.blurOverlay} />
+        {hotel.gallery?.heroImages[0].imageSizes.large && (
+          <Image
+            className={styles.image}
+            src={hotel.gallery.heroImages[0].imageSizes.large}
+            alt={hotel.name}
+            fill
+          />
+        )}
+      </div>
+      <div className={styles.content}>
+        <div className={styles.headerContainer}>
+          <Header hotel={hotel} />
+          <ReferenceCard booking={booking} hotel={hotel} />
+        </div>
+        {booking.showAncillaries && (
+          <Ancillaries ancillaries={ancillaryPackages} />
+        )}
+        <Room booking={booking} room={room} hotel={hotel} user={user} />
+        <BookingSummary booking={booking} hotel={hotel} />
+        <Promo
+          buttonText={intl.formatMessage({ id: "Book another stay" })}
+          href={`${homeUrl}?hotel=${hotel.operaId}`}
+          text={intl.formatMessage({
+            id: "Get inspired and start dreaming beyond your next trip. Explore more Scandic destinations.",
+          })}
+          title={intl.formatMessage({ id: "Book your next stay" })}
+        />
+      </div>
+    </main>
+  )
+}