diff --git a/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx b/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx
index 0e075b594..5f62c69c9 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx
+++ b/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({
+
)
diff --git a/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx
index 8718c8db7..3cbbcdafb 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx
@@ -36,35 +36,37 @@ export default async function StepPage({
}
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ >
)
}
diff --git a/components/HotelReservation/ReadMore/Contact/contact.module.css b/components/HotelReservation/Contact/contact.module.css
similarity index 93%
rename from components/HotelReservation/ReadMore/Contact/contact.module.css
rename to components/HotelReservation/Contact/contact.module.css
index 53f6e01f3..768e01ca2 100644
--- a/components/HotelReservation/ReadMore/Contact/contact.module.css
+++ b/components/HotelReservation/Contact/contact.module.css
@@ -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;
diff --git a/components/HotelReservation/ReadMore/Contact/index.tsx b/components/HotelReservation/Contact/index.tsx
similarity index 83%
rename from components/HotelReservation/ReadMore/Contact/index.tsx
rename to components/HotelReservation/Contact/index.tsx
index 46491fb3d..bcdaeb756 100644
--- a/components/HotelReservation/ReadMore/Contact/index.tsx
+++ b/components/HotelReservation/Contact/index.tsx
@@ -24,20 +24,26 @@ export default function Contact({ hotel }: ContactProps) {
{intl.formatMessage({ id: "Address" })}
- {hotel.address.streetAddress}
- {hotel.address.city}
+
+ {`${hotel.address.streetAddress}, ${hotel.address.city}`}
+
{intl.formatMessage({ id: "Driving directions" })}
- {intl.formatMessage({ id: "Google Maps" })}
+
+ {intl.formatMessage({ id: "Google Maps" })}
+
{intl.formatMessage({ id: "Email" })}
-
+
{hotel.contactInformation.email}
@@ -45,7 +51,10 @@ export default function Contact({ hotel }: ContactProps) {
{intl.formatMessage({ id: "Contact us" })}
-
+
{hotel.contactInformation.phoneNumber}
diff --git a/components/HotelReservation/EnterDetails/SidePeek/enterDetailsSidePeek.module.css b/components/HotelReservation/EnterDetails/SidePeek/enterDetailsSidePeek.module.css
new file mode 100644
index 000000000..5e619bd69
--- /dev/null
+++ b/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);
+}
diff --git a/components/HotelReservation/EnterDetails/SidePeek/index.tsx b/components/HotelReservation/EnterDetails/SidePeek/index.tsx
new file mode 100644
index 000000000..272683732
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ {hotel.hotelContent.texts.descriptions.medium}
+
+ {hotel.hotelContent.texts.facilityInformation}
+
+
+
+ )
+}
diff --git a/components/HotelReservation/EnterDetails/Summary/ToggleSidePeek.tsx b/components/HotelReservation/EnterDetails/Summary/ToggleSidePeek.tsx
new file mode 100644
index 000000000..2f022f857
--- /dev/null
+++ b/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 (
+
+ )
+}
diff --git a/components/HotelReservation/EnterDetails/Summary/index.tsx b/components/HotelReservation/EnterDetails/Summary/index.tsx
index 8efc418a1..18121dad3 100644
--- a/components/HotelReservation/EnterDetails/Summary/index.tsx
+++ b/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() {
{toDate}