"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 (