feat(SW-472): Add EnterDetails SidePeek

2024-10-14 15:36:42 +02:00
parent 3a3491c534
commit 103dcc7f1e
20 changed files with 194 additions and 123 deletions
--- a/components/HotelReservation/EnterDetails/SidePeek/enterDetailsSidePeek.module.css
+++ 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);
+}
--- a/components/HotelReservation/EnterDetails/SidePeek/index.tsx
+++ 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 (
+    <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>
+  )
+}