99 lines
3.4 KiB
TypeScript
99 lines
3.4 KiB
TypeScript
"use client"
|
|
// import { useFormStatus } from "react-dom"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { languageSelect } from "@/constants/languages"
|
|
|
|
import Divider from "@/components/TempDesignSystem/Divider"
|
|
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
|
|
import DateSelect from "@/components/TempDesignSystem/Form/Date"
|
|
import Input from "@/components/TempDesignSystem/Form/Input"
|
|
import NewPassword from "@/components/TempDesignSystem/Form/NewPassword"
|
|
import Phone from "@/components/TempDesignSystem/Form/Phone"
|
|
import Select from "@/components/TempDesignSystem/Form/Select"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
|
|
import styles from "./formContent.module.css"
|
|
|
|
export default function FormContent() {
|
|
const intl = useIntl()
|
|
// const { pending } = useFormStatus()
|
|
|
|
const city = intl.formatMessage({ id: "City" })
|
|
const country = intl.formatMessage({ id: "Country" })
|
|
const email = `${intl.formatMessage({ id: "Email" })} ${intl.formatMessage({ id: "Address" }).toLowerCase()}`
|
|
const street = intl.formatMessage({ id: "Address" })
|
|
const phoneNumber = intl.formatMessage({ id: "Phone number" })
|
|
const currentPassword = intl.formatMessage({ id: "Current password" })
|
|
const retypeNewPassword = intl.formatMessage({ id: "Retype new password" })
|
|
const zipCode = intl.formatMessage({ id: "Zip code" })
|
|
|
|
return (
|
|
<>
|
|
<section className={styles.user}>
|
|
<header>
|
|
<Body textTransform="bold">
|
|
{intl.formatMessage({ id: "User information" })}
|
|
</Body>
|
|
</header>
|
|
<DateSelect name="dateOfBirth" registerOptions={{ required: true }} />
|
|
<Input
|
|
data-hj-suppress
|
|
label={`${street} 1`}
|
|
name="address.streetAddress"
|
|
/>
|
|
<Input data-hj-suppress label={city} name="address.city" />
|
|
<div className={styles.container}>
|
|
<Input
|
|
data-hj-suppress
|
|
label={zipCode}
|
|
name="address.zipCode"
|
|
registerOptions={{ required: true }}
|
|
/>
|
|
<CountrySelect
|
|
label={country}
|
|
name="address.countryCode"
|
|
registerOptions={{ required: true }}
|
|
/>
|
|
</div>
|
|
<Input
|
|
label={email}
|
|
name="email"
|
|
registerOptions={{ required: true }}
|
|
type="email"
|
|
data-hj-suppress
|
|
/>
|
|
<Phone label={phoneNumber} name="phoneNumber" data-hj-suppress />
|
|
<Select
|
|
items={languageSelect}
|
|
label={intl.formatMessage({ id: "Language" })}
|
|
name="language"
|
|
/>
|
|
</section>
|
|
<Divider className={styles.divider} color="subtle" />
|
|
<section className={styles.password}>
|
|
<header>
|
|
<Body textTransform="bold">
|
|
{intl.formatMessage({ id: "Password" })}
|
|
</Body>
|
|
</header>
|
|
<Input
|
|
data-hj-suppress
|
|
label={currentPassword}
|
|
name="password"
|
|
type="password"
|
|
/>
|
|
{/* visibilityToggleable set to false as feature is done for signup first */}
|
|
{/* likely we can remove the prop altogether once signup launches */}
|
|
<NewPassword data-hj-suppress visibilityToggleable={false} />
|
|
<Input
|
|
data-hj-suppress
|
|
label={retypeNewPassword}
|
|
name="retypeNewPassword"
|
|
type="password"
|
|
/>
|
|
</section>
|
|
</>
|
|
)
|
|
}
|