feat: merge stores, fix auto navigation, split summary

components/HotelReservation/BookingConfirmation/Actions/actions.module.css

@@ -1,34 +0,0 @@
-.actions {
-  background-color: var(--Base-Surface-Subtle-Normal);
-  border-radius: var(--Corner-radius-Medium);
-  display: grid;
-  grid-area: actions;
-  padding: var(--Spacing-x1) var(--Spacing-x2);
-}
-
-@media screen and (max-width: 767px) {
-  .actions {
-    & > button[class*="btn"][class*="icon"][class*="small"] {
-      border-bottom: 1px solid var(--Base-Border-Subtle);
-      border-radius: 0;
-      justify-content: space-between;
-
-      &:last-of-type {
-        border-bottom: none;
-      }
-
-      & > svg {
-        order: 2;
-      }
-    }
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .actions {
-    gap: var(--Spacing-x1);
-    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
-    justify-content: center;
-    padding: var(--Spacing-x1) var(--Spacing-x3);
-  }
-}

components/HotelReservation/BookingConfirmation/Header/Actions/actions.module.css

@@ -0,0 +1,15 @@
+.actions {
+  border-radius: var(--Corner-radius-Medium);
+  display: grid;
+  grid-area: actions;
+}
+
+@media screen and (min-width: 768px) {
+  .actions {
+    gap: var(--Spacing-x3);
+    grid-auto-columns: auto;
+    grid-auto-flow: column;
+    grid-template-columns: auto;
+    justify-content: flex-start;
+  }
+}

components/HotelReservation/BookingConfirmation/Header/Actions/index.tsx

@@ -1,11 +1,5 @@
-import {
-  CalendarIcon,
-  ContractIcon,
-  DownloadIcon,
-  PrinterIcon,
-} from "@/components/Icons"
+import { CalendarAddIcon, DownloadIcon, EditIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
-import Divider from "@/components/TempDesignSystem/Divider"
 import { getIntl } from "@/i18n"
 
 import styles from "./actions.module.css"
@@ -15,20 +9,13 @@ export default async function Actions() {
   return (
     <div className={styles.actions}>
       <Button intent="text" size="small" theme="base" variant="icon" wrapping>
-        <CalendarIcon />
+        <CalendarAddIcon />
         {intl.formatMessage({ id: "Add to calendar" })}
       </Button>
-      <Divider color="subtle" variant="vertical" />
       <Button intent="text" size="small" theme="base" variant="icon" wrapping>
-        <ContractIcon />
-        {intl.formatMessage({ id: "View terms" })}
+        <EditIcon />
+        {intl.formatMessage({ id: "Manage booking" })}
       </Button>
-      <Divider color="subtle" variant="vertical" />
-      <Button intent="text" size="small" theme="base" variant="icon" wrapping>
-        <PrinterIcon />
-        {intl.formatMessage({ id: "Print confirmation" })}
-      </Button>
-      <Divider color="subtle" variant="vertical" />
       <Button intent="text" size="small" theme="base" variant="icon" wrapping>
         <DownloadIcon />
         {intl.formatMessage({ id: "Download invoice" })}

components/HotelReservation/BookingConfirmation/Header/header.module.css

@@ -1,12 +1,12 @@
 .header,
 .hgroup {
-  align-items: center;
   display: flex;
   flex-direction: column;
 }
 
 .header {
-  gap: var(--Spacing-x3);
+  gap: var(--Spacing-x2);
+  grid-area: header;
 }
 
 .hgroup {
@@ -14,5 +14,5 @@
 }
 
 .body {
-  max-width: 560px;
+  max-width: 720px;
 }

components/HotelReservation/BookingConfirmation/Header/index.tsx

@@ -1,11 +1,12 @@
 import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
 
 import Link from "@/components/TempDesignSystem/Link"
-import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 
+import Actions from "./Actions"
+
 import styles from "./header.module.css"
 
 import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
@@ -30,31 +31,15 @@ export default async function Header({
   return (
     <header className={styles.header}>
       <hgroup className={styles.hgroup}>
-        <BiroScript color="red" tilted="small" type="two">
-          {intl.formatMessage({ id: "See you soon!" })}
-        </BiroScript>
-        <Title
-          as="h4"
-          color="red"
-          textAlign="center"
-          textTransform="regular"
-          type="h2"
-        >
+        <Title as="h2" color="red" textTransform="uppercase" type="h2">
           {intl.formatMessage({ id: "booking.confirmation.title" })}
         </Title>
-        <Title
-          as="h4"
-          color="burgundy"
-          textAlign="center"
-          textTransform="regular"
-          type="h1"
-        >
+        <Title as="h2" color="burgundy" textTransform="uppercase" type="h1">
           {hotel.name}
         </Title>
       </hgroup>
-      <Body className={styles.body} textAlign="center">
-        {text}
-      </Body>
+      <Body className={styles.body}>{text}</Body>
+      <Actions />
     </header>
   )
 }

components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx

@@ -0,0 +1,5 @@
+import styles from "./room.module.css"
+
+export default function Room() {
+  return <article className={styles.room}></article>
+}

components/HotelReservation/BookingConfirmation/Rooms/index.tsx

@@ -0,0 +1,5 @@
+import styles from "./rooms.module.css"
+
+export default function Rooms() {
+  return <section className={styles.rooms}></section>
+}

components/HotelReservation/BookingConfirmation/Rooms/rooms.module.css

@@ -0,0 +1,6 @@
+.rooms {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x9);
+  grid-area: booking;
+}

components/HotelReservation/BookingConfirmation/Summary/index.tsx

@@ -1,154 +1,5 @@
-import { profile } from "@/constants/routes/myPages"
-import { dt } from "@/lib/dt"
-import {
-  getBookingConfirmation,
-  getProfileSafely,
-} from "@/lib/trpc/memoizedRequests"
-
-import { CreditCardAddIcon, EditIcon, PersonIcon } from "@/components/Icons"
-import Divider from "@/components/TempDesignSystem/Divider"
-import Link from "@/components/TempDesignSystem/Link"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-import { getIntl } from "@/i18n"
-import { getLang } from "@/i18n/serverContext"
-
 import styles from "./summary.module.css"
 
-import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
-import { BreakfastPackageEnum } from "@/types/enums/breakfast"
-
-export default async function Summary({
-  confirmationNumber,
-}: BookingConfirmationProps) {
-  const intl = await getIntl()
-  const lang = getLang()
-  const { booking, hotel } = await getBookingConfirmation(confirmationNumber)
-  const user = await getProfileSafely()
-  const { firstName, lastName } = booking.guest
-  const membershipNumber = user?.membership?.membershipNumber
-  const totalNights = dt(booking.checkOutDate.setHours(0, 0, 0)).diff(
-    dt(booking.checkInDate.setHours(0, 0, 0)),
-    "days"
-  )
-
-  const breakfastPackage = booking.packages.find(
-    (pkg) => pkg.code === BreakfastPackageEnum.REGULAR_BREAKFAST
-  )
-  return (
-    <div className={styles.summary}>
-      <div className={styles.container}>
-        <div className={styles.textContainer}>
-          <Body color="uiTextPlaceholder">
-            {intl.formatMessage({ id: "Guest" })}
-          </Body>
-          <Body color="uiTextHighContrast">{`${firstName} ${lastName}`}</Body>
-          {membershipNumber ? (
-            <Body color="uiTextHighContrast">
-              {intl.formatMessage(
-                { id: "membership.no" },
-                { membershipNumber }
-              )}
-            </Body>
-          ) : null}
-          <Body color="uiTextHighContrast">{booking.guest.email}</Body>
-          <Body color="uiTextHighContrast">{booking.guest.phoneNumber}</Body>
-        </div>
-        {user ? (
-          <Link className={styles.link} href={profile[lang]} variant="icon">
-            <PersonIcon color="baseButtonTextOnFillNormal" />
-            <Caption color="burgundy" type="bold">
-              {intl.formatMessage({ id: "Go to profile" })}
-            </Caption>
-          </Link>
-        ) : null}
-      </div>
-      <Divider color="primaryLightSubtle" />
-      <div className={styles.container}>
-        <div className={styles.textContainer}>
-          <Body color="uiTextPlaceholder">
-            {intl.formatMessage({ id: "Payment" })}
-          </Body>
-          <Body color="uiTextHighContrast">
-            {intl.formatMessage(
-              { id: "guest.paid" },
-              {
-                amount: intl.formatNumber(booking.totalPrice),
-                currency: booking.currencyCode,
-              }
-            )}
-          </Body>
-          <Body color="uiTextHighContrast">Date information N/A</Body>
-          <Body color="uiTextHighContrast">Card information N/A</Body>
-        </div>
-        {/* # href until more info */}
-        {user ? (
-          <Link className={styles.link} href="#" variant="icon">
-            <CreditCardAddIcon color="baseButtonTextOnFillNormal" />
-            <Caption color="burgundy" type="bold">
-              {intl.formatMessage({ id: "Save card to profile" })}
-            </Caption>
-          </Link>
-        ) : null}
-      </div>
-      <Divider color="primaryLightSubtle" />
-      <div className={styles.container}>
-        <div className={styles.textContainer}>
-          <Body color="uiTextPlaceholder">
-            {intl.formatMessage({ id: "Booking" })}
-          </Body>
-          <Body color="uiTextHighContrast">
-            N/A, {intl.formatMessage({ id: "booking.nights" }, { totalNights })}
-            ,{" "}
-            {intl.formatMessage(
-              { id: "booking.adults" },
-              { totalAdults: booking.adults }
-            )}
-          </Body>
-          {breakfastPackage ? (
-            <Body color="uiTextHighContrast">
-              {intl.formatMessage({ id: "Breakfast added" })}
-            </Body>
-          ) : null}
-          <Body color="uiTextHighContrast">Bedtype N/A</Body>
-        </div>
-        {/* # href until more info */}
-        <Link className={styles.link} href="#" variant="icon">
-          <EditIcon color="baseButtonTextOnFillNormal" />
-          <Caption color="burgundy" type="bold">
-            {intl.formatMessage({ id: "Manage booking" })}
-          </Caption>
-        </Link>
-      </div>
-      <Divider color="primaryLightSubtle" />
-      <div className={styles.container}>
-        <div className={styles.textContainer}>
-          <Body color="uiTextPlaceholder">
-            {intl.formatMessage({ id: "Hotel" })}
-          </Body>
-          <Body color="uiTextHighContrast">{hotel.name}</Body>
-          <Body color="uiTextHighContrast">
-            {`${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city}`}
-          </Body>
-          <Body color="uiTextHighContrast">
-            {hotel.contactInformation.phoneNumber}
-          </Body>
-          <Caption color="uiTextMediumContrast" className={styles.latLong}>
-            {`${intl.formatMessage({ id: "Longitude" }, { long: hotel.location.longitude })} ∙ ${intl.formatMessage({ id: "Latitude" }, { lat: hotel.location.latitude })}`}
-          </Caption>
-        </div>
-        <div className={styles.hotelLinks}>
-          <Link color="peach80" href={hotel.contactInformation.websiteUrl}>
-            {hotel.contactInformation.websiteUrl}
-          </Link>
-          <Link
-            color="peach80"
-            href={`mailto:${hotel.contactInformation.email}`}
-          >
-            {hotel.contactInformation.email}
-          </Link>
-        </div>
-      </div>
-    </div>
-  )
+export default function Summary() {
+  return <aside className={styles.summary}>SUMMARY</aside>
 }

components/HotelReservation/BookingConfirmation/Summary/summary.module.css

@@ -1,31 +1,4 @@
 .summary {
-  display: grid;
-  gap: var(--Spacing-x3);
-}
-
-.container,
-.textContainer {
-  display: flex;
-  flex-direction: column;
-}
-
-.container {
-  gap: var(--Spacing-x-one-and-half);
-}
-
-.textContainer {
-  gap: var(--Spacing-x-half);
-}
-
-.container .textContainer .latLong {
-  padding-top: var(--Spacing-x1);
-}
-
-.hotelLinks {
-  display: flex;
-  flex-direction: column;
-}
-
-.summary .container .link {
-  gap: var(--Spacing-x1);
+  background-color: hotpink;
+  grid-area: summary;
 }

components/HotelReservation/BookingConfirmation/_Summary/index.tsx

@@ -0,0 +1,154 @@
+import { profile } from "@/constants/routes/myPages"
+import { dt } from "@/lib/dt"
+import {
+  getBookingConfirmation,
+  getProfileSafely,
+} from "@/lib/trpc/memoizedRequests"
+
+import { CreditCardAddIcon, EditIcon, PersonIcon } from "@/components/Icons"
+import Divider from "@/components/TempDesignSystem/Divider"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+
+import styles from "./summary.module.css"
+
+import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
+import { BreakfastPackageEnum } from "@/types/enums/breakfast"
+
+export default async function Summary({
+  confirmationNumber,
+}: BookingConfirmationProps) {
+  const intl = await getIntl()
+  const lang = getLang()
+  const { booking, hotel } = await getBookingConfirmation(confirmationNumber)
+  const user = await getProfileSafely()
+  const { firstName, lastName } = booking.guest
+  const membershipNumber = user?.membership?.membershipNumber
+  const totalNights = dt(booking.checkOutDate.setHours(0, 0, 0)).diff(
+    dt(booking.checkInDate.setHours(0, 0, 0)),
+    "days"
+  )
+
+  const breakfastPackage = booking.packages.find(
+    (pkg) => pkg.code === BreakfastPackageEnum.REGULAR_BREAKFAST
+  )
+  return (
+    <div className={styles.summary}>
+      <div className={styles.container}>
+        <div className={styles.textContainer}>
+          <Body color="uiTextPlaceholder">
+            {intl.formatMessage({ id: "Guest" })}
+          </Body>
+          <Body color="uiTextHighContrast">{`${firstName} ${lastName}`}</Body>
+          {membershipNumber ? (
+            <Body color="uiTextHighContrast">
+              {intl.formatMessage(
+                { id: "membership.no" },
+                { membershipNumber }
+              )}
+            </Body>
+          ) : null}
+          <Body color="uiTextHighContrast">{booking.guest.email}</Body>
+          <Body color="uiTextHighContrast">{booking.guest.phoneNumber}</Body>
+        </div>
+        {user ? (
+          <Link className={styles.link} href={profile[lang]} variant="icon">
+            <PersonIcon color="baseButtonTextOnFillNormal" />
+            <Caption color="burgundy" type="bold">
+              {intl.formatMessage({ id: "Go to profile" })}
+            </Caption>
+          </Link>
+        ) : null}
+      </div>
+      <Divider color="primaryLightSubtle" />
+      <div className={styles.container}>
+        <div className={styles.textContainer}>
+          <Body color="uiTextPlaceholder">
+            {intl.formatMessage({ id: "Payment" })}
+          </Body>
+          <Body color="uiTextHighContrast">
+            {intl.formatMessage(
+              { id: "guest.paid" },
+              {
+                amount: intl.formatNumber(booking.totalPrice),
+                currency: booking.currencyCode,
+              }
+            )}
+          </Body>
+          <Body color="uiTextHighContrast">Date information N/A</Body>
+          <Body color="uiTextHighContrast">Card information N/A</Body>
+        </div>
+        {/* # href until more info */}
+        {user ? (
+          <Link className={styles.link} href="#" variant="icon">
+            <CreditCardAddIcon color="baseButtonTextOnFillNormal" />
+            <Caption color="burgundy" type="bold">
+              {intl.formatMessage({ id: "Save card to profile" })}
+            </Caption>
+          </Link>
+        ) : null}
+      </div>
+      <Divider color="primaryLightSubtle" />
+      <div className={styles.container}>
+        <div className={styles.textContainer}>
+          <Body color="uiTextPlaceholder">
+            {intl.formatMessage({ id: "Booking" })}
+          </Body>
+          <Body color="uiTextHighContrast">
+            N/A, {intl.formatMessage({ id: "booking.nights" }, { totalNights })}
+            ,{" "}
+            {intl.formatMessage(
+              { id: "booking.adults" },
+              { totalAdults: booking.adults }
+            )}
+          </Body>
+          {breakfastPackage ? (
+            <Body color="uiTextHighContrast">
+              {intl.formatMessage({ id: "Breakfast added" })}
+            </Body>
+          ) : null}
+          <Body color="uiTextHighContrast">Bedtype N/A</Body>
+        </div>
+        {/* # href until more info */}
+        <Link className={styles.link} href="#" variant="icon">
+          <EditIcon color="baseButtonTextOnFillNormal" />
+          <Caption color="burgundy" type="bold">
+            {intl.formatMessage({ id: "Manage booking" })}
+          </Caption>
+        </Link>
+      </div>
+      <Divider color="primaryLightSubtle" />
+      <div className={styles.container}>
+        <div className={styles.textContainer}>
+          <Body color="uiTextPlaceholder">
+            {intl.formatMessage({ id: "Hotel" })}
+          </Body>
+          <Body color="uiTextHighContrast">{hotel.name}</Body>
+          <Body color="uiTextHighContrast">
+            {`${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city}`}
+          </Body>
+          <Body color="uiTextHighContrast">
+            {hotel.contactInformation.phoneNumber}
+          </Body>
+          <Caption color="uiTextMediumContrast" className={styles.latLong}>
+            {`${intl.formatMessage({ id: "Longitude" }, { long: hotel.location.longitude })} ∙ ${intl.formatMessage({ id: "Latitude" }, { lat: hotel.location.latitude })}`}
+          </Caption>
+        </div>
+        <div className={styles.hotelLinks}>
+          <Link color="peach80" href={hotel.contactInformation.websiteUrl}>
+            {hotel.contactInformation.websiteUrl}
+          </Link>
+          <Link
+            color="peach80"
+            href={`mailto:${hotel.contactInformation.email}`}
+          >
+            {hotel.contactInformation.email}
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}

components/HotelReservation/BookingConfirmation/_Summary/summary.module.css

@@ -0,0 +1,31 @@
+.summary {
+  display: grid;
+  gap: var(--Spacing-x3);
+}
+
+.container,
+.textContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.container {
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.textContainer {
+  gap: var(--Spacing-x-half);
+}
+
+.container .textContainer .latLong {
+  padding-top: var(--Spacing-x1);
+}
+
+.hotelLinks {
+  display: flex;
+  flex-direction: column;
+}
+
+.summary .container .link {
+  gap: var(--Spacing-x1);
+}

components/HotelReservation/BookingConfirmation/bookingConfirmation.module.css

@@ -1,23 +0,0 @@
-.section {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x9);
-}
-
-.booking {
-  display: grid;
-  gap: var(--Spacing-x-one-and-half);
-  grid-template-areas:
-    "image"
-    "details"
-    "actions";
-}
-
-@media screen and (min-width: 768px) {
-  .booking {
-    grid-template-areas:
-      "details image"
-      "actions actions";
-    grid-template-columns: 1fr minmax(256px, min(256px, 100%));
-  }
-}

components/HotelReservation/BookingConfirmation/index.tsx

@@ -1,31 +0,0 @@
-import Actions from "./Actions"
-import Details from "./Details"
-import Header from "./Header"
-import HotelImage from "./HotelImage"
-import Summary from "./Summary"
-import TotalPrice from "./TotalPrice"
-
-import styles from "./bookingConfirmation.module.css"
-
-import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
-
-export default function BookingConfirmation({
-  confirmationNumber,
-}: BookingConfirmationProps) {
-  return (
-    <>
-      <Header confirmationNumber={confirmationNumber} />
-      <section className={styles.section}>
-        <div className={styles.booking}>
-          <Details confirmationNumber={confirmationNumber} />
-          <HotelImage confirmationNumber={confirmationNumber} />
-          <Actions />
-        </div>
-        {/* Supposed Ancillaries */}
-        <Summary confirmationNumber={confirmationNumber} />
-        <TotalPrice confirmationNumber={confirmationNumber} />
-        {/* Supposed Info Card - Where should it come from?? */}
-      </section>
-    </>
-  )
-}