99 lines
3.1 KiB
TypeScript
99 lines
3.1 KiB
TypeScript
"use client"
|
|
// import { useFormStatus } from "react-dom"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { languageSelect } from "@/constants/languages"
|
|
|
|
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 { formatMessage } = useIntl()
|
|
// const { pending } = useFormStatus()
|
|
|
|
const city = formatMessage({ id: "City" })
|
|
const country = formatMessage({ id: "Country" })
|
|
const email = `${formatMessage({ id: "Email" })} ${formatMessage({ id: "Address" }).toLowerCase()}`
|
|
const street = formatMessage({ id: "Address" })
|
|
const phoneNumber = formatMessage({ id: "Phone number" })
|
|
const password = formatMessage({ id: "Current password" })
|
|
const retypeNewPassword = formatMessage({ id: "Retype new password" })
|
|
const zipCode = formatMessage({ id: "Zip code" })
|
|
|
|
return (
|
|
<>
|
|
<section className={styles.user}>
|
|
<header>
|
|
<Body textTransform="bold">
|
|
{formatMessage({ id: "User information" })}
|
|
</Body>
|
|
</header>
|
|
<DateSelect name="dateOfBirth" registerOptions={{ required: true }} />
|
|
<Input
|
|
label={`${street} 1`}
|
|
name="address.streetAddress"
|
|
placeholder={street}
|
|
/>
|
|
<Input label={city} name="address.city" placeholder={city} />
|
|
<div className={styles.container}>
|
|
<Input
|
|
label={zipCode}
|
|
name="address.zipCode"
|
|
placeholder={zipCode}
|
|
registerOptions={{ required: true }}
|
|
/>
|
|
<CountrySelect
|
|
label={country}
|
|
name="address.countryCode"
|
|
placeholder={country}
|
|
registerOptions={{ required: true }}
|
|
/>
|
|
</div>
|
|
<Input
|
|
label={email}
|
|
name="email"
|
|
placeholder={email}
|
|
registerOptions={{ required: true }}
|
|
type="email"
|
|
/>
|
|
<Phone
|
|
label={phoneNumber}
|
|
name="phoneNumber"
|
|
placeholder={phoneNumber}
|
|
/>
|
|
<Select
|
|
items={languageSelect}
|
|
label={formatMessage({ id: "Language" })}
|
|
name="language"
|
|
placeholder={formatMessage({ id: "Select language" })}
|
|
/>
|
|
</section>
|
|
<section className={styles.password}>
|
|
<header>
|
|
<Body textTransform="bold">{formatMessage({ id: "Password" })}</Body>
|
|
</header>
|
|
<Input
|
|
label={password}
|
|
name="currentPassword"
|
|
placeholder={password}
|
|
type="password"
|
|
/>
|
|
<NewPassword />
|
|
<Input
|
|
label={retypeNewPassword}
|
|
name="retypeNewPassword"
|
|
placeholder={retypeNewPassword}
|
|
type="password"
|
|
/>
|
|
</section>
|
|
</>
|
|
)
|
|
}
|