feat(SW-472): Add EnterDetails SidePeek

app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx

@@ -4,6 +4,7 @@ import { serverClient } from "@/lib/trpc/server"
 
 import EnterDetailsProvider from "@/components/HotelReservation/EnterDetails/Provider"
 import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
+import SidePeek from "@/components/HotelReservation/EnterDetails/SidePeek"
 import Summary from "@/components/HotelReservation/EnterDetails/Summary"
 import HotelSelectionHeader from "@/components/HotelReservation/HotelSelectionHeader"
 import { setLang } from "@/i18n/serverContext"
@@ -38,6 +39,7 @@ export default async function StepLayout({
             <Summary />
           </aside>
         </div>
+        <SidePeek hotel={hotel.data.attributes} />
       </main>
     </EnterDetailsProvider>
   )

app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx

@@ -36,6 +36,7 @@ export default async function StepPage({
   }
 
   return (
+    <>
       <section>
         <SectionAccordion
           header="Select bed"
@@ -66,5 +67,6 @@ export default async function StepPage({
           <Payment hotel={hotel.data.attributes} />
         </SectionAccordion>
       </section>
+    </>
   )
 }

components/HotelReservation/Contact/contact.module.css

@@ -32,8 +32,8 @@
 }
 
 .ecoLabel {
-  display: grid;
+  display: flex;
-  grid-template-columns: auto 1fr;
+  align-items: center;
   column-gap: var(--Spacing-x-one-and-half);
   grid-column: 2 / 3;
   grid-row: 3 / 4;

components/HotelReservation/Contact/index.tsx

@@ -24,20 +24,26 @@ export default function Contact({ hotel }: ContactProps) {
             <span className={styles.heading}>
               {intl.formatMessage({ id: "Address" })}
             </span>
-            <span>{hotel.address.streetAddress}</span>
+            <span>
-            <span>{hotel.address.city}</span>
+              {`${hotel.address.streetAddress}, ${hotel.address.city}`}
+            </span>
           </li>
           <li>
             <span className={styles.heading}>
               {intl.formatMessage({ id: "Driving directions" })}
             </span>
-            <Link href="#">{intl.formatMessage({ id: "Google Maps" })}</Link>
+            <Link href="#" color="peach80">
+              {intl.formatMessage({ id: "Google Maps" })}
+            </Link>
           </li>
           <li>
             <span className={styles.heading}>
               {intl.formatMessage({ id: "Email" })}
             </span>
-            <Link href={`mailto:${hotel.contactInformation.email}`}>
+            <Link
+              href={`mailto:${hotel.contactInformation.email}`}
+              color="peach80"
+            >
               {hotel.contactInformation.email}
             </Link>
           </li>
@@ -45,7 +51,10 @@ export default function Contact({ hotel }: ContactProps) {
             <span className={styles.heading}>
               {intl.formatMessage({ id: "Contact us" })}
             </span>
-            <Link href={`tel:${hotel.contactInformation.phoneNumber}`}>
+            <Link
+              href={`tel:${hotel.contactInformation.phoneNumber}`}
+              color="peach80"
+            >
               {hotel.contactInformation.phoneNumber}
             </Link>
           </li>

components/HotelReservation/EnterDetails/SidePeek/enterDetailsSidePeek.module.css

@@ -0,0 +1,11 @@
+.article {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}

components/HotelReservation/EnterDetails/SidePeek/index.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { useEnterDetailsStore } from "@/stores/enter-details"
+
+import Contact from "@/components/HotelReservation/Contact"
+import Divider from "@/components/TempDesignSystem/Divider"
+import SidePeek from "@/components/TempDesignSystem/SidePeek"
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import styles from "./enterDetailsSidePeek.module.css"
+
+import {
+  SidePeekEnum,
+  SidePeekProps,
+} from "@/types/components/enterDetails/sidePeek"
+
+export default function EnterDetailsSidePeek({ hotel }: SidePeekProps) {
+  const activeSidePeek = useEnterDetailsStore((state) => state.activeSidePeek)
+  const close = useEnterDetailsStore((state) => state.closeSidePeek)
+
+  const intl = useIntl()
+  return (
+    <SidePeek
+      contentKey={SidePeekEnum.hotelDetails}
+      title={intl.formatMessage({ id: "About the hotel" })}
+      isOpen={activeSidePeek === SidePeekEnum.hotelDetails}
+      handleClose={close}
+    >
+      <article className={styles.article}>
+        <Contact hotel={hotel} />
+        <Divider />
+        <section className={styles.section}>
+          <Body>{hotel.hotelContent.texts.descriptions.medium}</Body>
+
+          <Body>{hotel.hotelContent.texts.facilityInformation}</Body>
+        </section>
+      </article>
+    </SidePeek>
+  )
+}

components/HotelReservation/EnterDetails/Summary/ToggleSidePeek.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { useEnterDetailsStore } from "@/stores/enter-details"
+
+import { ChevronRightSmallIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+
+import { SidePeekEnum } from "@/types/components/enterDetails/sidePeek"
+
+export default function ToggleSidePeek() {
+  const intl = useIntl()
+  const openSidePeek = useEnterDetailsStore((state) => state.openSidePeek)
+
+  return (
+    <Button
+      onClick={() => {
+        openSidePeek(SidePeekEnum.hotelDetails)
+      }}
+      theme="base"
+      size="small"
+      variant="icon"
+      intent="text"
+      wrapping
+    >
+      {intl.formatMessage({ id: "See room details" })}{" "}
+      <ChevronRightSmallIcon
+        color="baseButtonTextOnFillNormal"
+        height={20}
+        width={20}
+      />
+    </Button>
+  )
+}

components/HotelReservation/EnterDetails/Summary/index.tsx

@@ -1,13 +1,14 @@
 import { dt } from "@/lib/dt"
 
-import { ArrowRightIcon, ChevronRightSmallIcon } from "@/components/Icons"
+import { ArrowRightIcon } 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 ToggleSidePeek from "./ToggleSidePeek"
+
 import styles from "./summary.module.css"
 
 // TEMP
@@ -21,7 +22,6 @@ const rooms = [
 export default async function Summary() {
   const intl = await getIntl()
   const lang = getLang()
-
   const fromDate = dt().locale(lang).format("ddd, D MMM")
   const toDate = dt().add(1, "day").locale(lang).format("ddd, D MMM")
   const diff = dt(toDate).diff(fromDate, "days")
@@ -75,19 +75,8 @@ export default async function Summary() {
           <ArrowRightIcon color="uiTextMediumContrast" height={15} width={15} />
           {toDate}
         </Body>
-        <Link
+
-          className={styles.link}
+        <ToggleSidePeek />
-          color="baseButtonTextOnFillNormal"
-          href="#"
-          variant="icon"
-        >
-          {intl.formatMessage({ id: "See room details" })}
-          <ChevronRightSmallIcon
-            color="baseButtonTextOnFillNormal"
-            height={20}
-            width={20}
-          />
-        </Link>
       </header>
       <Divider color="primaryLightSubtle" />
       <div className={styles.addOns}>

components/HotelReservation/HotelSelectionHeader/HotelDetailSidePeek/hotelDetailSidePeek.module.css

@@ -1,4 +0,0 @@
-.buttons {
-  display: flex;
-  gap: var(--Spacing-x3);
-}

components/HotelReservation/HotelSelectionHeader/HotelDetailSidePeek/index.tsx

@@ -1,58 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import { useIntl } from "react-intl"
-
-import ChevronRightSmallIcon from "@/components/Icons/ChevronRightSmall"
-import Button from "@/components/TempDesignSystem/Button"
-import SidePeek from "@/components/TempDesignSystem/SidePeek"
-
-import styles from "./hotelDetailSidePeek.module.css"
-
-export default function HotelDetailSidePeek() {
-  const intl = useIntl()
-  const [isOpen, setIsOpen] = useState(false)
-
-  function toggleSidePeek() {
-    setIsOpen(!isOpen)
-  }
-
-  return (
-    <>
-      <div className={styles.buttons}>
-        <Button
-          variant="icon"
-          theme="base"
-          intent="text"
-          wrapping
-          onClick={toggleSidePeek}
-        >
-          {intl.formatMessage({
-            id: "See hotel details",
-          })}
-          <ChevronRightSmallIcon aria-hidden="true" color="burgundy" />
-        </Button>
-        <Button
-          variant="icon"
-          theme="base"
-          intent="text"
-          wrapping
-          onClick={toggleSidePeek}
-        >
-          {intl.formatMessage({
-            id: "Show all amenities",
-          })}
-          <ChevronRightSmallIcon aria-hidden="true" color="burgundy" />
-        </Button>
-      </div>
-      <SidePeek
-        contentKey="hotel-detail-side-peek"
-        title="Hotel Details"
-        isOpen={isOpen}
-        handleClose={() => setIsOpen(false)}
-      >
-        <div>TBD</div>
-      </SidePeek>
-    </>
-  )
-}

components/HotelReservation/HotelSelectionHeader/index.tsx

@@ -6,8 +6,6 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
-import HotelDetailSidePeek from "./HotelDetailSidePeek"
-
 import styles from "./hotelSelectionHeader.module.css"
 
 import { HotelSelectionHeaderProps } from "@/types/components/hotelReservation/selectRate/hotelSelectionHeader"
@@ -46,7 +44,6 @@ export default function HotelSelectionHeader({
           <Body color="textHighContrast">
             {hotel.hotelContent.texts.descriptions.short}
           </Body>
-          <HotelDetailSidePeek />
         </div>
       </div>
     </header>

components/HotelReservation/ReadMore/index.tsx

@@ -11,7 +11,7 @@ import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
-import Contact from "./Contact"
+import Contact from "../Contact"
 
 import styles from "./readMore.module.css"
 

i18n/dictionaries/da.json

@@ -4,6 +4,7 @@
   "A destination or hotel name is needed to be able to search for a hotel room.": "Et destinations- eller hotelnavn er nødvendigt for at kunne søge efter et hotelværelse.",
   "A photo of the room": "Et foto af værelset",
   "About meetings & conferences": "About meetings & conferences",
+  "About the hotel": "About the hotel",
   "Activities": "Aktiviteter",
   "Add code": "Tilføj kode",
   "Add new card": "Tilføj nyt kort",
@@ -86,6 +87,7 @@
   "Do you want to start the day with Scandics famous breakfast buffé?": "Vil du starte dagen med Scandics berømte morgenbuffet?",
   "Done": "Færdig",
   "Download the Scandic app": "Download Scandic-appen",
+  "Driving directions": "Kørselsanvisning",
   "Earn bonus nights & points": "Optjen bonusnætter og point",
   "Edit": "Redigere",
   "Edit profile": "Rediger profil",
@@ -105,6 +107,7 @@
   "Find hotels": "Find hotel",
   "Firstname": "Fornavn",
   "Flexibility": "Fleksibilitet",
+  "Follow us": "Følg os",
   "Former Scandic Hotel": "Tidligere Scandic Hotel",
   "Free cancellation": "Gratis afbestilling",
   "Free rebooking": "Gratis ombooking",
@@ -113,6 +116,7 @@
   "Get member benefits & offers": "Få medlemsfordele og tilbud",
   "Go back to edit": "Gå tilbage til redigering",
   "Go back to overview": "Gå tilbage til oversigten",
+  "Google Maps": "Google Maps",
   "Guest information": "Gæsteinformation",
   "Guests & Rooms": "Gæster & værelser",
   "Hi": "Hei",
@@ -188,6 +192,7 @@
   "No, keep card": "Nej, behold kortet",
   "Non refundable": "Ikke-refunderbart",
   "Non-refundable": "Ikke-refunderbart",
+  "Nordic Swan Ecolabel": "Svanemærket",
   "Not found": "Ikke fundet",
   "Nr night, nr adult": "{nights, number} nat, {adults, number} voksen",
   "On your journey": "På din rejse",

i18n/dictionaries/de.json

@@ -4,6 +4,7 @@
   "A destination or hotel name is needed to be able to search for a hotel room.": "Ein Reiseziel oder Hotelname wird benötigt, um nach einem Hotelzimmer suchen zu können.",
   "A photo of the room": "Ein Foto des Zimmers",
   "About meetings & conferences": "About meetings & conferences",
+  "About the hotel": "Über das Hotel",
   "Activities": "Aktivitäten",
   "Add code": "Code hinzufügen",
   "Add new card": "Neue Karte hinzufügen",
@@ -86,6 +87,7 @@
   "Do you want to start the day with Scandics famous breakfast buffé?": "Möchten Sie den Tag mit Scandics berühmtem Frühstücksbuffet beginnen?",
   "Done": "Fertig",
   "Download the Scandic app": "Laden Sie die Scandic-App herunter",
+  "Driving directions": "Anfahrtsbeschreibung",
   "Earn bonus nights & points": "Sammeln Sie Bonusnächte und -punkte",
   "Edit": "Bearbeiten",
   "Edit profile": "Profil bearbeiten",
@@ -105,6 +107,7 @@
   "Find hotels": "Hotels finden",
   "Firstname": "Vorname",
   "Flexibility": "Flexibilität",
+  "Follow us": "Folgen Sie uns",
   "Former Scandic Hotel": "Ehemaliges Scandic Hotel",
   "Free cancellation": "Kostenlose Stornierung",
   "Free rebooking": "Kostenlose Umbuchung",
@@ -113,6 +116,7 @@
   "Get member benefits & offers": "Holen Sie sich Vorteile und Angebote für Mitglieder",
   "Go back to edit": "Zurück zum Bearbeiten",
   "Go back to overview": "Zurück zur Übersicht",
+  "Google Maps": "Google Maps",
   "Guest information": "Informationen für Gäste",
   "Guests & Rooms": "Gäste & Zimmer",
   "Hi": "Hallo",
@@ -188,6 +192,7 @@
   "No, keep card": "Nein, Karte behalten",
   "Non refundable": "Nicht erstattungsfähig",
   "Non-refundable": "Nicht erstattungsfähig",
+  "Nordic Swan Ecolabel": "Nordic Swan Ecolabel",
   "Not found": "Nicht gefunden",
   "Nr night, nr adult": "{nights, number} Nacht, {adults, number} Erwachsener",
   "On your journey": "Auf deiner Reise",

i18n/dictionaries/en.json

@@ -4,6 +4,7 @@
   "A destination or hotel name is needed to be able to search for a hotel room.": "A destination or hotel name is needed to be able to search for a hotel room.",
   "A photo of the room": "A photo of the room",
   "About meetings & conferences": "About meetings & conferences",
+  "About the hotel": "About the hotel",
   "Activities": "Activities",
   "Add code": "Add code",
   "Add new card": "Add new card",
@@ -89,6 +90,7 @@
   "Do you want to start the day with Scandics famous breakfast buffé?": "Do you want to start the day with Scandics famous breakfast buffé?",
   "Done": "Done",
   "Download the Scandic app": "Download the Scandic app",
+  "Driving directions": "Driving directions",
   "Earn bonus nights & points": "Earn bonus nights & points",
   "Edit": "Edit",
   "Edit profile": "Edit profile",
@@ -108,6 +110,7 @@
   "Find hotels": "Find hotels",
   "Firstname": "Firstname",
   "Flexibility": "Flexibility",
+  "Follow us": "Follow us",
   "Former Scandic Hotel": "Former Scandic Hotel",
   "Free cancellation": "Free cancellation",
   "Free rebooking": "Free rebooking",
@@ -116,6 +119,7 @@
   "Get member benefits & offers": "Get member benefits & offers",
   "Go back to edit": "Go back to edit",
   "Go back to overview": "Go back to overview",
+  "Google Maps": "Google Maps",
   "Guest information": "Guest information",
   "Guests & Rooms": "Guests & Rooms",
   "Hi": "Hi",
@@ -191,6 +195,7 @@
   "No, keep card": "No, keep card",
   "Non refundable": "Non refundable",
   "Non-refundable": "Non-refundable",
+  "Nordic Swan Ecolabel": "Nordic Swan Ecolabel",
   "Not found": "Not found",
   "Nr night, nr adult": "{nights, number} night, {adults, number} adult",
   "On your journey": "On your journey",

i18n/dictionaries/fi.json

@@ -4,6 +4,7 @@
   "A destination or hotel name is needed to be able to search for a hotel room.": "Kohteen tai hotellin nimi tarvitaan, jotta hotellihuonetta voidaan hakea.",
   "A photo of the room": "Kuva huoneesta",
   "About meetings & conferences": "About meetings & conferences",
+  "About the hotel": "Tietoja hotellista",
   "Activities": "Aktiviteetit",
   "Add code": "Lisää koodi",
   "Add new card": "Lisää uusi kortti",
@@ -86,6 +87,7 @@
   "Do you want to start the day with Scandics famous breakfast buffé?": "Haluatko aloittaa päiväsi Scandicsin kuuluisalla aamiaisbuffella?",
   "Done": "Valmis",
   "Download the Scandic app": "Lataa Scandic-sovellus",
+  "Driving directions": "Ajo-ohjeet",
   "Earn bonus nights & points": "Ansaitse bonusöitä ja -pisteitä",
   "Edit": "Muokata",
   "Edit profile": "Muokkaa profiilia",
@@ -105,6 +107,7 @@
   "Find hotels": "Etsi hotelleja",
   "Firstname": "Etunimi",
   "Flexibility": "Joustavuus",
+  "Follow us": "Seuraa meitä",
   "Former Scandic Hotel": "Entinen Scandic-hotelli",
   "Free cancellation": "Ilmainen peruutus",
   "Free rebooking": "Ilmainen uudelleenvaraus",
@@ -113,6 +116,7 @@
   "Get member benefits & offers": "Hanki jäsenetuja ja -tarjouksia",
   "Go back to edit": "Palaa muokkaamaan",
   "Go back to overview": "Palaa yleiskatsaukseen",
+  "Google Maps": "Google Maps",
   "Guest information": "Vieraan tiedot",
   "Guests & Rooms": "Vieraat & Huoneet",
   "Hi": "Hi",
@@ -188,6 +192,7 @@
   "No, keep card": "Ei, pidä kortti",
   "Non refundable": "Ei palautettavissa",
   "Non-refundable": "Ei palautettavissa",
+  "Nordic Swan Ecolabel": "Ympäristömerkki Miljömärkt",
   "Not found": "Ei löydetty",
   "Nr night, nr adult": "{nights, number} yö, {adults, number} aikuinen",
   "On your journey": "Matkallasi",

i18n/dictionaries/no.json

@@ -4,6 +4,7 @@
   "A destination or hotel name is needed to be able to search for a hotel room.": "Et reisemål eller hotellnavn er nødvendig for å kunne søke etter et hotellrom.",
   "A photo of the room": "Et bilde av rommet",
   "About meetings & conferences": "About meetings & conferences",
+  "About the hotel": "Om hotellet",
   "Activities": "Aktiviteter",
   "Add code": "Legg til kode",
   "Add new card": "Legg til nytt kort",
@@ -85,6 +86,7 @@
   "Do you want to start the day with Scandics famous breakfast buffé?": "Vil du starte dagen med Scandics berømte frokostbuffé?",
   "Done": "Ferdig",
   "Download the Scandic app": "Last ned Scandic-appen",
+  "Driving directions": "Veibeskrivelser",
   "Earn bonus nights & points": "Tjen bonusnetter og poeng",
   "Edit": "Redigere",
   "Edit profile": "Rediger profil",
@@ -104,6 +106,7 @@
   "Find hotels": "Finn hotell",
   "Firstname": "Fornavn",
   "Flexibility": "Fleksibilitet",
+  "Follow us": "Følg oss",
   "Former Scandic Hotel": "Tidligere Scandic-hotell",
   "Free cancellation": "Gratis avbestilling",
   "Free rebooking": "Gratis ombooking",
@@ -112,6 +115,7 @@
   "Get member benefits & offers": "Få medlemsfordeler og tilbud",
   "Go back to edit": "Gå tilbake til redigering",
   "Go back to overview": "Gå tilbake til oversikten",
+  "Google Maps": "Google Maps",
   "Guest information": "Informasjon til gjester",
   "Guests & Rooms": "Gjester & rom",
   "Hi": "Hei",
@@ -186,6 +190,7 @@
   "No, keep card": "Nei, behold kortet",
   "Non refundable": "Ikke-refunderbart",
   "Non-refundable": "Ikke-refunderbart",
+  "Nordic Swan Ecolabel": "Svanemerket",
   "Not found": "Ikke funnet",
   "Nr night, nr adult": "{nights, number} natt, {adults, number} voksen",
   "On your journey": "På reisen din",

i18n/dictionaries/sv.json

@@ -4,6 +4,7 @@
   "A destination or hotel name is needed to be able to search for a hotel room.": "Ett destinations- eller hotellnamn behövs för att kunna söka efter ett hotellrum.",
   "A photo of the room": "Ett foto av rummet",
   "About meetings & conferences": "About meetings & conferences",
+  "About the hotel": "Om hotellet",
   "Activities": "Aktiviteter",
   "Add code": "Lägg till kod",
   "Add new card": "Lägg till nytt kort",
@@ -85,6 +86,7 @@
   "Do you want to start the day with Scandics famous breakfast buffé?": "Vill du starta dagen med Scandics berömda frukostbuffé?",
   "Done": "Klar",
   "Download the Scandic app": "Ladda ner Scandic-appen",
+  "Driving directions": "Vägbeskrivningar",
   "Earn bonus nights & points": "Tjäna bonusnätter och poäng",
   "Edit": "Redigera",
   "Edit profile": "Redigera profil",
@@ -104,6 +106,7 @@
   "Find hotels": "Hitta hotell",
   "Firstname": "Förnamn",
   "Flexibility": "Flexibilitet",
+  "Follow us": "Följ oss",
   "Former Scandic Hotel": "Tidigare Scandichotell",
   "Free cancellation": "Fri avbokning",
   "Free rebooking": "Fri ombokning",
@@ -112,6 +115,7 @@
   "Get member benefits & offers": "Ta del av medlemsförmåner och erbjudanden",
   "Go back to edit": "Gå tillbaka till redigeringen",
   "Go back to overview": "Gå tillbaka till översikten",
+  "Google Maps": "Google Maps",
   "Guest information": "Information till gästerna",
   "Guests & Rooms": "Gäster & rum",
   "Hi": "Hej",
@@ -186,6 +190,7 @@
   "No, keep card": "Nej, behåll kortet",
   "Non refundable": "Ej återbetalningsbar",
   "Non-refundable": "Ej återbetalningsbar",
+  "Nordic Swan Ecolabel": "Svanenmärkt",
   "Not found": "Hittades inte",
   "Nr night, nr adult": "{nights, number} natt, {adults, number} vuxen",
   "On your journey": "På din resa",

stores/enter-details.ts

@@ -7,6 +7,7 @@ import { breakfastSchema } from "@/components/HotelReservation/EnterDetails/Brea
 import { detailsSchema } from "@/components/HotelReservation/EnterDetails/Details/schema"
 
 import { DetailsSchema } from "@/types/components/enterDetails/details"
+import { SidePeekEnum } from "@/types/components/enterDetails/sidePeek"
 import { StepEnum } from "@/types/components/enterDetails/step"
 import { bedTypeEnum } from "@/types/enums/bedType"
 import { breakfastEnum } from "@/types/enums/breakfast"
@@ -18,9 +19,12 @@ interface EnterDetailsState {
   } & DetailsSchema
   steps: StepEnum[]
   currentStep: StepEnum
+  activeSidePeek: SidePeekEnum | null
   isValid: Record<StepEnum, boolean>
   completeStep: (updatedData: Partial<EnterDetailsState["data"]>) => void
   navigate: (step: StepEnum, searchParams?: Record<string, string>) => void
+  openSidePeek: (key: SidePeekEnum.hotelDetails | null) => void
+  closeSidePeek: () => void
 }
 
 export function initEditDetailsState(currentStep: StepEnum) {
@@ -104,7 +108,10 @@ export function initEditDetailsState(currentStep: StepEnum) {
           window.history.pushState({}, "", step + "?" + query.toString())
         })
       ),
+    openSidePeek: (key: SidePeekEnum | null) => set({ activeSidePeek: key }),
+    closeSidePeek: () => set({ activeSidePeek: null }),
     currentStep,
+    activeSidePeek: null,
     isValid,
     completeStep: (updatedData) =>
       set(

types/components/enterDetails/sidePeek.ts

@@ -0,0 +1,9 @@
+import { Hotel } from "@/types/hotel"
+
+export enum SidePeekEnum {
+  hotelDetails = "hotel-detail-side-peek",
+}
+
+export type SidePeekProps = {
+  hotel: Hotel
+}