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/IntroSection/index.tsx
+++ b/components/HotelReservation/BookingConfirmation/IntroSection/index.tsx
@@ -0,0 +1,51 @@
+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 "./introSection.module.css"
+
+import { IntroSectionProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
+
+export default async function IntroSection({ email }: IntroSectionProps) {
+  const intl = await getIntl()
+
+  return (
+    <section className={styles.section}>
+      <div>
+        <Title textAlign="center" as="h2">
+          {intl.formatMessage({ id: "Thank you" })}
+        </Title>
+        <Title textAlign="center" as="h3">
+          {intl.formatMessage({ id: "We look forward to your visit!" })}
+        </Title>
+      </div>
+      <Body color="burgundy" textAlign="center">
+        {intl.formatMessage({
+          id: "We have sent a detailed confirmation of your booking to your email: ",
+        })}
+        {email}
+      </Body>
+      <div className={styles.buttons}>
+        <Button
+          size="small"
+          theme="base"
+          intent="secondary"
+          className={styles.button}
+        >
+          Download the Scandic app
+        </Button>
+        <Button
+          size="small"
+          theme="base"
+          intent="secondary"
+          className={styles.button}
+        >
+          View your booking
+        </Button>
+      </div>
+    </section>
+  )
+}
--- a/components/HotelReservation/BookingConfirmation/IntroSection/introSection.module.css
+++ b/components/HotelReservation/BookingConfirmation/IntroSection/introSection.module.css
@@ -0,0 +1,26 @@
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x3);
+  width: 100%;
+}
+
+.buttons {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--Spacing-x2);
+}
+
+.button {
+  width: 100%;
+  max-width: 240px;
+  justify-content: center;
+}
+
+@media screen and (min-width: 1367px) {
+  .buttons {
+    flex-direction: row;
+    justify-content: space-around;
+  }
+}