feat(SW-240): refactor booking widget

2024-08-14 18:46:07 +02:00
parent 5a0d1c6d7b
commit 00a5465485
8 changed files with 209 additions and 181 deletions
--- a/components/Forms/BookingWidget/FormContent/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/index.tsx
@@ -0,0 +1,90 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import styles from "./formContent.module.css"
+
+export default function FormContent() {
+  const intl = useIntl()
+
+  const where = intl.formatMessage({ id: "Where to" })
+  const when = intl.formatMessage({ id: "When" })
+  const rooms = intl.formatMessage({ id: "Rooms & Guests" })
+  const vouchers = intl.formatMessage({ id: "Booking codes and vouchers" })
+  const bonus = intl.formatMessage({ id: "Use bonus cheque" })
+  const reward = intl.formatMessage({ id: "Book reward night" })
+  const search = intl.formatMessage({ id: "Find hotels" })
+
+  return (
+    <>
+      <div className={styles.input}>
+        <div className={`${styles.where} ${styles.border}`}>
+          <Body
+            color="red"
+            textTransform="bold"
+            className={styles.bodyFontSize}
+          >
+            {where}
+          </Body>
+        </div>
+        <div className={`${styles.when} ${styles.border}`}>
+          <Body
+            color="red"
+            textTransform="bold"
+            className={styles.bodyFontSize}
+          >
+            {when}
+          </Body>
+        </div>
+        <div className={`${styles.rooms} ${styles.border}`}>
+          <Body
+            color="red"
+            textTransform="bold"
+            className={styles.bodyFontSize}
+          >
+            {rooms}
+          </Body>
+        </div>
+        <div className={`${styles.vouchers} ${styles.border}`}>
+          <Body
+            color="textMediumContrast"
+            textTransform="bold"
+            className={styles.bodyFontSize}
+          >
+            {vouchers}
+          </Body>
+        </div>
+        <div className={styles.options}>
+          <div>
+            <Body color="textMediumContrast" className={styles.bodyFontSize}>
+              {bonus}
+            </Body>
+          </div>
+          <div>
+            <Body color="textMediumContrast" className={styles.bodyFontSize}>
+              {reward}
+            </Body>
+          </div>
+        </div>
+      </div>
+      <Button
+        type="submit"
+        size="small"
+        theme="base"
+        intent="primary"
+        className={styles.button}
+      >
+        <Body
+          color="white"
+          textTransform="bold"
+          className={styles.bodyFontSize}
+        >
+          {search}
+        </Body>
+      </Button>
+    </>
+  )
+}