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

"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 { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
import useLang from "../../../../../hooks/useLang"
import BookingFlowInput from "../../../../BookingFlowInput"
import { getErrorMessage } from "../../../../BookingFlowInput/errors"
import { MembershipNumberInput } from "./MembershipNumberInput"

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

export default function Signup({
  errors,
  name,
  registerOptions,
  refs,
}: {
  errors: FieldErrors
  name: string
  registerOptions?: RegisterOptions
  refs: React.RefObject<Record<string, HTMLElement | null>>
}) {
  const intl = useIntl()
  const lang = useLang()
  const config = useBookingFlowConfig()

  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])

  if (isJoinChecked)
    return (
      <div className={styles.additionalFormData}>
        <div
          ref={(el) => {
            refs.current.zipCode = el
          }}
        >
          <BookingFlowInput
            name="zipCode"
            label={intl.formatMessage({
              id: "common.zipCode",
              defaultMessage: "Zip code",
            })}
            registerOptions={{ required: true, ...registerOptions }}
          />
        </div>
        <div
          className={styles.dateField}
          ref={(el) => {
            refs.current.dateOfBirth = el
          }}
        >
          <header>
            <Caption type="bold">
              <span className={styles.required}>
                {intl.formatMessage({
                  id: "common.birthDate",
                  defaultMessage: "Birth date",
                })}
              </span>
            </Caption>
          </header>
          <DateSelect
            labels={{
              day: intl.formatMessage({
                id: "common.day",
                defaultMessage: "Day",
              }),
              month: intl.formatMessage({
                id: "common.month",
                defaultMessage: "Month",
              }),
              year: intl.formatMessage({
                id: "common.year",
                defaultMessage: "Year",
              }),
              errorMessage: getErrorMessage(
                intl,
                config.variant,
                errors["dateOfBirth"]?.message?.toString()
              ),
            }}
            lang={lang}
            name="dateOfBirth"
            registerOptions={{ required: true, ...registerOptions }}
          />
        </div>
      </div>
    )

  if (config.enterDetailsMembershipIdInputLocation === "join-card") return null

  return (
    <div
      ref={(el) => {
        refs.current.membershipNo = el
      }}
    >
      <MembershipNumberInput registerOptions={registerOptions} />
    </div>
  )
}