From 65509622d2c3168fbbb22edb9bc4eca5cefddd32 Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Tue, 20 Aug 2024 14:29:14 +0200
Subject: [PATCH] feat(SW-243): add temp data

---
 .../booking-confirmation/page.tsx             | 45 +++++++++--
 .../ConfirmationCard/index.tsx                | 45 -----------
 .../confirmationTimes.module.css              | 18 -----
 .../ConfirmationTimes/index.tsx               | 29 -------
 .../index.tsx                                 | 19 +++--
 .../introSection.module.css}                  |  0
 .../BookingConfirmation/StaySection/index.tsx | 79 +++++++++++++++++++
 .../staySection.module.css}                   | 23 +++++-
 .../index.tsx                                 | 14 ++--
 .../summarySection.module.css}                |  0
 i18n/dictionaries/en.json                     |  5 ++
 .../bookingConfirmation.ts                    | 40 ++++++++++
 12 files changed, 203 insertions(+), 114 deletions(-)
 delete mode 100644 components/HotelReservation/BookingConfirmation/ConfirmationCard/index.tsx
 delete mode 100644 components/HotelReservation/BookingConfirmation/ConfirmationTimes/confirmationTimes.module.css
 delete mode 100644 components/HotelReservation/BookingConfirmation/ConfirmationTimes/index.tsx
 rename components/HotelReservation/BookingConfirmation/{ConfirmationHead => IntroSection}/index.tsx (61%)
 rename components/HotelReservation/BookingConfirmation/{ConfirmationHead/confirmationHead.module.css => IntroSection/introSection.module.css} (100%)
 create mode 100644 components/HotelReservation/BookingConfirmation/StaySection/index.tsx
 rename components/HotelReservation/BookingConfirmation/{ConfirmationCard/confirmationCard.module.css => StaySection/staySection.module.css} (66%)
 rename components/HotelReservation/BookingConfirmation/{ConfirmationSummary => SummarySection}/index.tsx (57%)
 rename components/HotelReservation/BookingConfirmation/{ConfirmationSummary/confirmationSummary.module.css => SummarySection/summarySection.module.css} (100%)
 create mode 100644 types/components/hotelReservation/bookingConfirmation/bookingConfirmation.ts

diff --git a/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.tsx
index eee6e513d..baf0a2fdd 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.tsx
@@ -1,18 +1,47 @@
-import ConfirmationCard from "@/components/HotelReservation/BookingConfirmation/ConfirmationCard"
-import ConfirmationHead from "@/components/HotelReservation/BookingConfirmation/ConfirmationHead"
-import ConfirmationSummary from "@/components/HotelReservation/BookingConfirmation/ConfirmationSummary"
-import ConfirmationTimes from "@/components/HotelReservation/BookingConfirmation/ConfirmationTimes"
+import IntroSection from "@/components/HotelReservation/BookingConfirmation/IntroSection"
+import StaySection from "@/components/HotelReservation/BookingConfirmation/StaySection"
+import SummarySection from "@/components/HotelReservation/BookingConfirmation/SummarySection"
 
 import styles from "./page.module.css"
 
+import { BookingConfirmation } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
+
 export default function BookingConfirmationPage() {
+  const confirmationData: BookingConfirmation = {
+    email: "lisa.andersson@outlook.com",
+    hotel: {
+      name: "Helsinki Hub",
+      address: "Kaisaniemenkatu 7, Helsinki",
+      location: "Helsinki",
+      phone: "+358 300 870680",
+      image:
+        "https://test3.scandichotels.com/imagevault/publishedmedia/i11isd60bh119s9486b7/downtown-camper-by-scandic-lobby-reception-desk-ch.jpg?w=640",
+      checkIn: "15.00",
+      checkOut: "12.00",
+      breakfast: { start: "06:30", end: "10:00" },
+    },
+    stay: {
+      nights: 1,
+      start: "2024.03.09",
+      end: "2024.03.10",
+    },
+    summary: {
+      roomType: "Standard Room",
+      bedType: "King size",
+      breakfast: "Yes",
+      flexibility: "Yes",
+    },
+  }
+
   return (
     <main className={styles.main}>
       <section className={styles.section}>
-        <ConfirmationHead />
-        <ConfirmationCard />
-        <ConfirmationTimes />
-        <ConfirmationSummary />
+        <IntroSection email={confirmationData.email} />
+        <StaySection
+          hotel={confirmationData.hotel}
+          stay={confirmationData.stay}
+        />
+        <SummarySection summary={confirmationData.summary} />
       </section>
     </main>
   )
diff --git a/components/HotelReservation/BookingConfirmation/ConfirmationCard/index.tsx b/components/HotelReservation/BookingConfirmation/ConfirmationCard/index.tsx
deleted file mode 100644
index 3921c9da6..000000000
--- a/components/HotelReservation/BookingConfirmation/ConfirmationCard/index.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-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 styles from "./confirmationCard.module.css"
-
-export default function ConfirmationCard() {
-  return (
-    <section className={styles.section}>
-      <div>
-        <Image
-          src="https://test3.scandichotels.com/imagevault/publishedmedia/i11isd60bh119s9486b7/downtown-camper-by-scandic-lobby-reception-desk-ch.jpg?w=640"
-          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">
-            Helsinki Hub
-          </Title>
-          <Caption color="burgundy" className={styles.caption}>
-            <span>Kaisaniemenkatu 7, Helsinki</span>
-            <span>Call us at +358 300 870680</span>
-          </Caption>
-        </div>
-        <div className={styles.width}>
-          <Body className={styles.stay}>
-            <span>1 night</span>
-            <span className={styles.dates}>
-              <span>2024.03.09</span>
-              <ArrowRightIcon height={15} width={15} />
-              <span>2024.03.10</span>
-            </span>
-          </Body>
-        </div>
-      </div>
-    </section>
-  )
-}
diff --git a/components/HotelReservation/BookingConfirmation/ConfirmationTimes/confirmationTimes.module.css b/components/HotelReservation/BookingConfirmation/ConfirmationTimes/confirmationTimes.module.css
deleted file mode 100644
index 2b905c7c5..000000000
--- a/components/HotelReservation/BookingConfirmation/ConfirmationTimes/confirmationTimes.module.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.section {
-  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);
-}
diff --git a/components/HotelReservation/BookingConfirmation/ConfirmationTimes/index.tsx b/components/HotelReservation/BookingConfirmation/ConfirmationTimes/index.tsx
deleted file mode 100644
index 19bb0d71f..000000000
--- a/components/HotelReservation/BookingConfirmation/ConfirmationTimes/index.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react"
-
-import Body from "@/components/TempDesignSystem/Text/Body"
-import { getIntl } from "@/i18n"
-
-import styles from "./confirmationTimes.module.css"
-
-export default async function ConfirmationTimes() {
-  const intl = await getIntl()
-  return (
-    <section className={styles.section}>
-      <div className={styles.breakfast}>
-        <Body color="burgundy">{intl.formatMessage({ id: "Breakfast" })}</Body>
-        <span>Mon-Fri 06:30-10:00</span>
-        <span>Mon-Fri 06:30-10:00</span>
-      </div>
-      <div className={styles.checkIn}>
-        <Body color="burgundy">{intl.formatMessage({ id: "Check in" })}</Body>
-        <span>From</span>
-        <span>15:00</span>
-      </div>
-      <div className={styles.checkOut}>
-        <Body color="burgundy">{intl.formatMessage({ id: "Check out" })}</Body>
-        <span>At latest</span>
-        <span>12:00</span>
-      </div>
-    </section>
-  )
-}
diff --git a/components/HotelReservation/BookingConfirmation/ConfirmationHead/index.tsx b/components/HotelReservation/BookingConfirmation/IntroSection/index.tsx
similarity index 61%
rename from components/HotelReservation/BookingConfirmation/ConfirmationHead/index.tsx
rename to components/HotelReservation/BookingConfirmation/IntroSection/index.tsx
index bc227c7cc..5ae2ae7f8 100644
--- a/components/HotelReservation/BookingConfirmation/ConfirmationHead/index.tsx
+++ b/components/HotelReservation/BookingConfirmation/IntroSection/index.tsx
@@ -3,23 +3,30 @@ import React from "react"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
 
-import styles from "./confirmationHead.module.css"
+import styles from "./introSection.module.css"
+
+import { IntroSectionProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
+
+export default async function IntroSection({ email }: IntroSectionProps) {
+  const intl = await getIntl()
 
-export default function ConfirmationHead() {
   return (
     <section className={styles.section}>
       <div>
         <Title textAlign="center" as="h2">
-          Thank you
+          {intl.formatMessage({ id: "Thank you" })}
         </Title>
         <Title textAlign="center" as="h3">
-          We look forward to your visit!
+          {intl.formatMessage({ id: "We look forward to your visit!" })}
         </Title>
       </div>
       <Body color="burgundy" textAlign="center">
-        We have sent a detailed confirmation of your booking to your email:
-        lisa.andersson@gmail.com.
+        {intl.formatMessage({
+          id: "We have sent a detailed confirmation of your booking to your email: ",
+        })}
+        {email}
       </Body>
       <div className={styles.buttons}>
         <Button
diff --git a/components/HotelReservation/BookingConfirmation/ConfirmationHead/confirmationHead.module.css b/components/HotelReservation/BookingConfirmation/IntroSection/introSection.module.css
similarity index 100%
rename from components/HotelReservation/BookingConfirmation/ConfirmationHead/confirmationHead.module.css
rename to components/HotelReservation/BookingConfirmation/IntroSection/introSection.module.css
diff --git a/components/HotelReservation/BookingConfirmation/StaySection/index.tsx b/components/HotelReservation/BookingConfirmation/StaySection/index.tsx
new file mode 100644
index 000000000..8d0db033c
--- /dev/null
+++ 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>
+    </>
+  )
+}
diff --git a/components/HotelReservation/BookingConfirmation/ConfirmationCard/confirmationCard.module.css b/components/HotelReservation/BookingConfirmation/StaySection/staySection.module.css
similarity index 66%
rename from components/HotelReservation/BookingConfirmation/ConfirmationCard/confirmationCard.module.css
rename to components/HotelReservation/BookingConfirmation/StaySection/staySection.module.css
index a28c612a0..5da503b8d 100644
--- a/components/HotelReservation/BookingConfirmation/ConfirmationCard/confirmationCard.module.css
+++ b/components/HotelReservation/BookingConfirmation/StaySection/staySection.module.css
@@ -1,4 +1,4 @@
-.section {
+.card {
   display: flex;
   width: 100%;
   background-color: var(--Base-Surface-Primary-light-Normal);
@@ -37,8 +37,27 @@
   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) {
-  .section {
+  .card {
     flex-direction: column;
   }
   .image {
diff --git a/components/HotelReservation/BookingConfirmation/ConfirmationSummary/index.tsx b/components/HotelReservation/BookingConfirmation/SummarySection/index.tsx
similarity index 57%
rename from components/HotelReservation/BookingConfirmation/ConfirmationSummary/index.tsx
rename to components/HotelReservation/BookingConfirmation/SummarySection/index.tsx
index 3acf67fa5..5f4fcedf5 100644
--- a/components/HotelReservation/BookingConfirmation/ConfirmationSummary/index.tsx
+++ b/components/HotelReservation/BookingConfirmation/SummarySection/index.tsx
@@ -3,9 +3,11 @@ import React from "react"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 
-import styles from "./confirmationSummary.module.css"
+import styles from "./summarySection.module.css"
 
-export default async function ConfirmationSummary() {
+import { SummarySectionProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
+
+export default async function SummarySection({ summary }: SummarySectionProps) {
   const intl = await getIntl()
   return (
     <section className={styles.section}>
@@ -13,19 +15,19 @@ export default async function ConfirmationSummary() {
         {intl.formatMessage({ id: "Summary" })}
       </Title>
       <div className={styles.summary}>
-        <span>Type of room: Standard Room</span>
+        <span>{`Type of room: ${summary.roomType}`}</span>
         <span>1648 SEK</span>
       </div>
       <div className={styles.summary}>
-        <span>Type of bed: King Bed</span>
+        <span>{`Type of bed: ${summary.bedType}`}</span>
         <span>0 SEK</span>
       </div>
       <div className={styles.summary}>
-        <span>Breakfast: Breakfast Buffé</span>
+        <span>{`Breakfast: ${summary.breakfast}`}</span>
         <span>198 SEK</span>
       </div>
       <div className={styles.summary}>
-        <span>Flexibility: Free Rebooking</span>
+        <span>{`Flexibility: ${summary.flexibility}`}</span>
         <span>200 SEK</span>
       </div>
     </section>
diff --git a/components/HotelReservation/BookingConfirmation/ConfirmationSummary/confirmationSummary.module.css b/components/HotelReservation/BookingConfirmation/SummarySection/summarySection.module.css
similarity index 100%
rename from components/HotelReservation/BookingConfirmation/ConfirmationSummary/confirmationSummary.module.css
rename to components/HotelReservation/BookingConfirmation/SummarySection/summarySection.module.css
diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json
index 5900321bb..752aaffcb 100644
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -152,6 +152,11 @@
   "Check in": "Check in",
   "Check out": "Check out",
   "Summary": "Summary",
+  "Thank you": "Thank you",
+  "We look forward to your visit!": "We look forward to your visit!",
+  "We have sent a detailed confirmation of your booking to your email: ": "We have sent a detailed confirmation of your booking to your email: ",
+  "Download the Scandic app": "Download the Scandic app",
+  "View your booking": "View your booking",
   "Where to": "Where to",
   "When": "When",
   "Rooms & Guests": "Rooms & Guests",
diff --git a/types/components/hotelReservation/bookingConfirmation/bookingConfirmation.ts b/types/components/hotelReservation/bookingConfirmation/bookingConfirmation.ts
new file mode 100644
index 000000000..8d81b458d
--- /dev/null
+++ b/types/components/hotelReservation/bookingConfirmation/bookingConfirmation.ts
@@ -0,0 +1,40 @@
+export type BookingConfirmation = {
+  email: string
+  hotel: {
+    name: string
+    address: string
+    location: string
+    phone: string
+    image: string
+    checkIn: string
+    checkOut: string
+    breakfast: {
+      start: string
+      end: string
+    }
+  }
+  stay: {
+    nights: number
+    start: string
+    end: string
+  }
+  summary: {
+    roomType: string
+    bedType: string
+    breakfast: string
+    flexibility: string
+  }
+}
+
+export type IntroSectionProps = {
+  email: BookingConfirmation["email"]
+}
+
+export type StaySectionProps = {
+  hotel: BookingConfirmation["hotel"]
+  stay: BookingConfirmation["stay"]
+}
+
+export type SummarySectionProps = {
+  summary: BookingConfirmation["summary"]
+}