Merged in chore/move-enter-details (pull request #2778)

Chore/move enter details

Approved-by: Anton Gunnarsson

packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/Signup/index.tsx

@@ -0,0 +1,87 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import {
+  type FieldErrors,
+  type RegisterOptions,
+  useWatch,
+} from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import Caption from "@scandic-hotels/design-system/Caption"
+import DateSelect from "@scandic-hotels/design-system/Form/Date"
+
+import useLang from "../../../../../hooks/useLang"
+import BookingFlowInput from "../../../../BookingFlowInput"
+import { getErrorMessage } from "../../../../BookingFlowInput/errors"
+
+import styles from "./signup.module.css"
+
+export default function Signup({
+  errors,
+  name,
+  registerOptions,
+}: {
+  errors: FieldErrors
+  name: string
+  registerOptions?: RegisterOptions
+}) {
+  const intl = useIntl()
+  const lang = useLang()
+
+  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])
+
+  return isJoinChecked ? (
+    <div className={styles.additionalFormData}>
+      <BookingFlowInput
+        name="zipCode"
+        label={intl.formatMessage({
+          defaultMessage: "Zip code",
+        })}
+        registerOptions={{ required: true, ...registerOptions }}
+      />
+      <div className={styles.dateField}>
+        <header>
+          <Caption type="bold">
+            <span className={styles.required}>
+              {intl.formatMessage({
+                defaultMessage: "Birth date",
+              })}
+            </span>
+          </Caption>
+        </header>
+        <DateSelect
+          labels={{
+            day: intl.formatMessage({ defaultMessage: "Day" }),
+            month: intl.formatMessage({ defaultMessage: "Month" }),
+            year: intl.formatMessage({ defaultMessage: "Year" }),
+            errorMessage: getErrorMessage(
+              intl,
+              errors["dateOfBirth"]?.message?.toString()
+            ),
+          }}
+          lang={lang}
+          name="dateOfBirth"
+          registerOptions={{ required: true, ...registerOptions }}
+        />
+      </div>
+    </div>
+  ) : (
+    <BookingFlowInput
+      label={intl.formatMessage({
+        defaultMessage: "Membership ID",
+      })}
+      name="membershipNo"
+      type="tel"
+      registerOptions={registerOptions}
+    />
+  )
+}

packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/Signup/signup.module.css

@@ -0,0 +1,19 @@
+.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);
+}
+
+.required:after {
+  content: " *";
+}