web/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/Signup/index.tsx

"use client"

import { useEffect, useState } from "react"
import { type RegisterOptions, useWatch } from "react-hook-form"
import { useIntl } from "react-intl"

import Caption from "@scandic-hotels/design-system/Caption"

import DateSelect from "@/components/TempDesignSystem/Form/Date"
import Input from "@/components/TempDesignSystem/Form/Input"

import styles from "./signup.module.css"

export default function Signup({
  name,
  registerOptions,
}: {
  name: string
  registerOptions?: RegisterOptions
}) {
  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])

  return isJoinChecked ? (
    <div className={styles.additionalFormData}>
      <Input
        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
          name="dateOfBirth"
          registerOptions={{ required: true, ...registerOptions }}
        />
      </div>
    </div>
  ) : (
    <Input
      label={intl.formatMessage({
        defaultMessage: "Membership ID",
      })}
      name="membershipNo"
      type="tel"
      registerOptions={registerOptions}
    />
  )
}