feat: add conditional signup values

2024-10-16 12:09:18 +02:00
parent 5870a31275
commit 74c2a9d1e1
18 changed files with 347 additions and 110 deletions
--- a/components/HotelReservation/EnterDetails/Details/Signup/index.tsx
+++ b/components/HotelReservation/EnterDetails/Details/Signup/index.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useWatch } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import { privacyPolicy } from "@/constants/currentWebHrefs"
+
+import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
+import CheckboxCard from "@/components/TempDesignSystem/Form/ChoiceCard/Checkbox"
+import DateSelect from "@/components/TempDesignSystem/Form/Date"
+import Input from "@/components/TempDesignSystem/Form/Input"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import useLang from "@/hooks/useLang"
+
+import styles from "./signup.module.css"
+
+export default function Signup({ name }: { name: string }) {
+  const lang = useLang()
+  const intl = useIntl()
+
+  const [isJoinChecked, setIsJoinChecked] = useState(false)
+
+  const joinValue = useWatch({ name })
+
+  useEffect(() => {
+    // In order to avoid hydration errors the state needs to be set as side effect,
+    // since the join value can come from search params
+    setIsJoinChecked(joinValue)
+  }, [joinValue])
+
+  const list = [
+    { title: intl.formatMessage({ id: "Earn bonus nights & points" }) },
+    { title: intl.formatMessage({ id: "Get member benefits & offers" }) },
+    { title: intl.formatMessage({ id: "Join at no cost" }) },
+  ]
+
+  return (
+    <div className={styles.container}>
+      <CheckboxCard
+        highlightSubtitle
+        list={list}
+        name={name}
+        subtitle={intl.formatMessage(
+          {
+            id: "{difference}{amount} {currency}",
+          },
+          {
+            amount: "491",
+            currency: "SEK",
+            difference: "-",
+          }
+        )}
+        title={intl.formatMessage({ id: "Join Scandic Friends" })}
+      />
+      {isJoinChecked ? (
+        <div className={styles.additionalFormData}>
+          <div className={styles.dateField}>
+            <header>
+              <Caption type="bold">
+                {intl.formatMessage({ id: "Birth date" })} *
+              </Caption>
+            </header>
+            <DateSelect
+              name="dateOfBirth"
+              registerOptions={{ required: true }}
+            />
+            <Input
+              name="zipCode"
+              label={intl.formatMessage({ id: "Zip code" })}
+              registerOptions={{ required: true }}
+            />
+          </div>
+          <div>
+            <Checkbox name="termsAccepted" registerOptions={{ required: true }}>
+              <Body>
+                {intl.formatMessage({
+                  id: "Yes, I accept the Terms and conditions for Scandic Friends and understand that Scandic will process my personal data in accordance with",
+                })}{" "}
+                <Link
+                  variant="underscored"
+                  color="peach80"
+                  target="_blank"
+                  href={privacyPolicy[lang]}
+                >
+                  {intl.formatMessage({ id: "Scandic's Privacy Policy." })}
+                </Link>
+              </Body>
+            </Checkbox>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}
--- a/components/HotelReservation/EnterDetails/Details/Signup/signup.module.css
+++ b/components/HotelReservation/EnterDetails/Details/Signup/signup.module.css
@@ -0,0 +1,15 @@
+.container {
+  display: grid;
+  grid-column: 1/-1;
+  gap: var(--Spacing-x3);
+}
+
+.additionalFormData {
+  display: grid;
+  gap: var(--Spacing-x4);
+}
+
+.dateField {
+  display: grid;
+  gap: var(--Spacing-x1);
+}