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

feat(SW-472): Add EnterDetails SidePeek

Browse Source
This commit is contained in:
Arvid Norlin
2024-10-14 15:36:42 +02:00
parent 3a3491c534
commit 103dcc7f1e
20 changed files with 194 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -36,35 +36,37 @@ export default async function StepPage({
}
return (
<section>
<SectionAccordion
header="Select bed"
step={StepEnum.selectBed}
label={intl.formatMessage({ id: "Request bedtype" })}
>
<BedType />
</SectionAccordion>
<SectionAccordion
header="Food options"
step={StepEnum.breakfast}
label={intl.formatMessage({ id: "Select breakfast options" })}
>
<Breakfast />
</SectionAccordion>
<SectionAccordion
header="Details"
step={StepEnum.details}
label={intl.formatMessage({ id: "Enter your details" })}
>
<Details user={user} />
</SectionAccordion>
<SectionAccordion
header="Payment"
step={StepEnum.payment}
label={intl.formatMessage({ id: "Select payment method" })}
>
<Payment hotel={hotel.data.attributes} />
</SectionAccordion>
</section>
<>
<section>
<SectionAccordion
header="Select bed"
step={StepEnum.selectBed}
label={intl.formatMessage({ id: "Request bedtype" })}
>
<BedType />
</SectionAccordion>
<SectionAccordion
header="Food options"
step={StepEnum.breakfast}
label={intl.formatMessage({ id: "Select breakfast options" })}
>
<Breakfast />
</SectionAccordion>
<SectionAccordion
header="Details"
step={StepEnum.details}
label={intl.formatMessage({ id: "Enter your details" })}
>
<Details user={user} />
</SectionAccordion>
<SectionAccordion
header="Payment"
step={StepEnum.payment}
label={intl.formatMessage({ id: "Select payment method" })}
>
<Payment hotel={hotel.data.attributes} />
</SectionAccordion>
</section>
</>
)
}

4
components/HotelReservation/ReadMore/Contact/contact.module.css → components/HotelReservation/Contact/contact.module.css
View File

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

19
components/HotelReservation/ReadMore/Contact/index.tsx → components/HotelReservation/Contact/index.tsx
View File

@@ -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>{hotel.address.city}</span>
<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>

11
components/HotelReservation/EnterDetails/SidePeek/enterDetailsSidePeek.module.css Normal file
View File

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

42
components/HotelReservation/EnterDetails/SidePeek/index.tsx Normal file
View File

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

35
components/HotelReservation/EnterDetails/Summary/ToggleSidePeek.tsx Normal file
View File

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

21
components/HotelReservation/EnterDetails/Summary/index.tsx
View File

@@ -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}
color="baseButtonTextOnFillNormal"
href="#"
variant="icon"
>
{intl.formatMessage({ id: "See room details" })}
<ChevronRightSmallIcon
color="baseButtonTextOnFillNormal"
height={20}
width={20}
/>
</Link>
<ToggleSidePeek />
</header>
<Divider color="primaryLightSubtle" />
<div className={styles.addOns}>

4
components/HotelReservation/HotelSelectionHeader/HotelDetailSidePeek/hotelDetailSidePeek.module.css
View File

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

58
components/HotelReservation/HotelSelectionHeader/HotelDetailSidePeek/index.tsx
View File

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

3
components/HotelReservation/HotelSelectionHeader/index.tsx
View File

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

2
components/HotelReservation/ReadMore/index.tsx
View File

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

5
i18n/dictionaries/da.json
View File

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

7
i18n/dictionaries/de.json
View File

@@ -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",
@@ -354,4 +359,4 @@
"{amount} {currency}": "{amount} {currency}",
"{difference}{amount} {currency}": "{difference}{amount} {currency}",
"{width} cm × {length} cm": "{width} cm × {length} cm"
}
}

7
i18n/dictionaries/en.json
View File

@@ -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",
@@ -357,4 +362,4 @@
"{amount} {currency}": "{amount} {currency}",
"{difference}{amount} {currency}": "{difference}{amount} {currency}",
"{width} cm × {length} cm": "{width} cm × {length} cm"
}
}

7
i18n/dictionaries/fi.json
View File

@@ -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",
@@ -355,4 +360,4 @@
"{amount} {currency}": "{amount} {currency}",
"{difference}{amount} {currency}": "{difference}{amount} {currency}",
"{width} cm × {length} cm": "{width} cm × {length} cm"
}
}

7
i18n/dictionaries/no.json
View File

@@ -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",
@@ -351,4 +356,4 @@
"{amount} {currency}": "{amount} {currency}",
"{difference}{amount} {currency}": "{difference}{amount} {currency}",
"{width} cm × {length} cm": "{width} cm × {length} cm"
}
}

5
i18n/dictionaries/sv.json
View File

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

7
stores/enter-details.ts
View File

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

9
types/components/enterDetails/sidePeek.ts Normal file
View File

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