feat(SW-243): add temp data

2024-08-20 14:29:14 +02:00
parent bd14fb5fd2
commit 65509622d2
12 changed files with 203 additions and 114 deletions
--- a/components/HotelReservation/BookingConfirmation/StaySection/index.tsx
+++ b/components/HotelReservation/BookingConfirmation/StaySection/index.tsx
@@ -0,0 +1,79 @@
+import { Stay } from "@/server/routers/user/output"
+
+import { ArrowRightIcon, ScandicLogoIcon } from "@/components/Icons"
+import Image from "@/components/Image"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+
+import styles from "./staySection.module.css"
+
+import { StaySectionProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
+
+export default async function StaySection({ hotel, stay }: StaySectionProps) {
+  const intl = await getIntl()
+  const nights =
+    stay.nights > 1
+      ? intl.formatMessage({ id: "nights" })
+      : intl.formatMessage({ id: "night" })
+
+  return (
+    <>
+      <section className={styles.card}>
+        <div>
+          <Image
+            src={hotel.image}
+            alt=""
+            height={400}
+            width={200}
+            className={styles.image}
+          />
+        </div>
+        <div className={styles.info}>
+          <div className={styles.hotel}>
+            <ScandicLogoIcon color="red" />
+            <Title as="h5" textTransform="capitalize">
+              {hotel.name}
+            </Title>
+            <Caption color="burgundy" className={styles.caption}>
+              <span>{hotel.address}</span>
+              <span>{hotel.phone}</span>
+            </Caption>
+          </div>
+          <div className={styles.width}>
+            <Body className={styles.stay}>
+              <span>{`${stay.nights} ${nights}`}</span>
+              <span className={styles.dates}>
+                <span>{stay.start}</span>
+                <ArrowRightIcon height={15} width={15} />
+                <span>{stay.end}</span>
+              </span>
+            </Body>
+          </div>
+        </div>
+      </section>
+      <section className={styles.table}>
+        <div className={styles.breakfast}>
+          <Body color="burgundy">
+            {intl.formatMessage({ id: "Breakfast" })}
+          </Body>
+          <span>{`Mon-fri ${hotel.breakfast.start}-${hotel.breakfast.end}`}</span>
+          <span>{`Sat-sun ${hotel.breakfast.start}-${hotel.breakfast.end}`}</span>
+        </div>
+        <div className={styles.checkIn}>
+          <Body color="burgundy">{intl.formatMessage({ id: "Check in" })}</Body>
+          <span>From</span>
+          <span>{hotel.checkIn}</span>
+        </div>
+        <div className={styles.checkOut}>
+          <Body color="burgundy">
+            {intl.formatMessage({ id: "Check out" })}
+          </Body>
+          <span>At latest</span>
+          <span>{hotel.checkOut}</span>
+        </div>
+      </section>
+    </>
+  )
+}
--- a/components/HotelReservation/BookingConfirmation/StaySection/staySection.module.css
+++ b/components/HotelReservation/BookingConfirmation/StaySection/staySection.module.css
@@ -0,0 +1,80 @@
+.card {
+  display: flex;
+  width: 100%;
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border-radius: var(--Corner-radius-Small);
+  overflow: hidden;
+}
+
+.image {
+  height: 100%;
+  width: 105px;
+  object-fit: cover;
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: var(--Spacing-x1);
+  padding: var(--Spacing-x2);
+}
+
+.hotel,
+.stay {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-half);
+}
+
+.caption {
+  display: flex;
+  flex-direction: column;
+}
+.dates {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x-half);
+}
+
+.table {
+  display: flex;
+  justify-content: space-between;
+  padding: var(--Spacing-x2);
+  border-radius: var(--Corner-radius-Small);
+  background-color: var(--Base-Surface-Primary-dark-Normal);
+  width: 100%;
+}
+
+.breakfast,
+.checkIn,
+.checkOut {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-half);
+  font-family: var(--typography-Caption-Regular-fontFamily);
+  font-size: var(--typography-Caption-Regular-fontSize);
+}
+
+@media screen and (min-width: 1367px) {
+  .card {
+    flex-direction: column;
+  }
+  .image {
+    width: 100%;
+    height: 100%;
+    max-height: 195px;
+  }
+
+  .info {
+    flex-direction: row;
+    justify-content: space-between;
+    gap: var(--Spacing-x4);
+  }
+
+  .hotel,
+  .width {
+    width: 100%;
+    max-width: 230px;
+  }
+}