147 lines
3.9 KiB
TypeScript
147 lines
3.9 KiB
TypeScript
"use client"
|
|
import { useEffect } from "react"
|
|
import { useFormStatus } from "react-dom"
|
|
import { useWatch } from "react-hook-form"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { useProfileStore } from "@/stores/edit-profile"
|
|
|
|
import {
|
|
CalendarIcon,
|
|
EmailIcon,
|
|
HouseIcon,
|
|
PhoneIcon,
|
|
} from "@/components/Icons"
|
|
import Field from "@/components/MyProfile/Field"
|
|
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
|
|
import DateSelect from "@/components/TempDesignSystem/Form/Date"
|
|
import Input from "@/components/TempDesignSystem/Form/Input"
|
|
import Phone from "@/components/TempDesignSystem/Form/Phone"
|
|
|
|
import type { EditFormContentProps } from "@/types/components/myPages/myProfile/edit"
|
|
|
|
export default function FormContent({ control }: EditFormContentProps) {
|
|
const { formatMessage } = useIntl()
|
|
const { pending } = useFormStatus()
|
|
const setIsPending = useProfileStore((store) => store.setIsPending)
|
|
const country = useWatch({ name: "address.country" })
|
|
|
|
useEffect(() => {
|
|
setIsPending(pending)
|
|
}, [pending, setIsPending])
|
|
|
|
const city = formatMessage({ id: "City" })
|
|
const email = formatMessage({ id: "Email" })
|
|
const street = formatMessage({ id: "Street" })
|
|
const zipCode = formatMessage({ id: "Zip code" })
|
|
|
|
return (
|
|
<>
|
|
<Field>
|
|
<Field.Icon>{country}</Field.Icon>
|
|
<Field.Label htmlFor="address.country">
|
|
*{formatMessage({ id: "Country" })}
|
|
</Field.Label>
|
|
<Field.Content>
|
|
<CountrySelect name="address.country" />
|
|
</Field.Content>
|
|
</Field>
|
|
|
|
<Field>
|
|
<Field.Icon>
|
|
<CalendarIcon />
|
|
</Field.Icon>
|
|
<Field.Label htmlFor="dateOfBirth">
|
|
*{formatMessage({ id: "Date of Birth" })}
|
|
</Field.Label>
|
|
<Field.Content>
|
|
<DateSelect
|
|
control={control}
|
|
name="dateOfBirth"
|
|
registerOptions={{ required: true }}
|
|
/>
|
|
</Field.Content>
|
|
</Field>
|
|
|
|
<Field>
|
|
<Field.Icon>
|
|
<EmailIcon />
|
|
</Field.Icon>
|
|
<Field.Label htmlFor="email">*{email}</Field.Label>
|
|
<Field.Content>
|
|
<Input
|
|
aria-label={email}
|
|
control={control}
|
|
name="email"
|
|
placeholder={email}
|
|
registerOptions={{ required: true }}
|
|
type="email"
|
|
/>
|
|
</Field.Content>
|
|
</Field>
|
|
|
|
<Field>
|
|
<Field.Icon>
|
|
<PhoneIcon />
|
|
</Field.Icon>
|
|
<Field.Label htmlFor="phoneNumber">
|
|
*{formatMessage({ id: "Phone" })}
|
|
</Field.Label>
|
|
<Field.Content>
|
|
<Phone countrySelectName="address.country" name="phoneNumber" />
|
|
</Field.Content>
|
|
</Field>
|
|
|
|
<Field>
|
|
<Field.Icon>
|
|
<HouseIcon />
|
|
</Field.Icon>
|
|
<Field.Label htmlFor="address.streetAddress">
|
|
{formatMessage({ id: "Address" })}
|
|
</Field.Label>
|
|
<Field.Content>
|
|
<Input
|
|
aria-label={street}
|
|
control={control}
|
|
name="address.streetAddress"
|
|
placeholder={street}
|
|
/>
|
|
</Field.Content>
|
|
</Field>
|
|
|
|
<Field>
|
|
<Field.Icon>
|
|
<HouseIcon />
|
|
</Field.Icon>
|
|
<Field.Label htmlFor="address.city">
|
|
{formatMessage({ id: "City/State" })}
|
|
</Field.Label>
|
|
<Field.Content>
|
|
<Input
|
|
aria-label={city}
|
|
control={control}
|
|
name="address.city"
|
|
placeholder={city}
|
|
/>
|
|
</Field.Content>
|
|
</Field>
|
|
|
|
<Field>
|
|
<Field.Icon>
|
|
<HouseIcon />
|
|
</Field.Icon>
|
|
<Field.Label htmlFor="address.zipCode">*{zipCode}</Field.Label>
|
|
<Field.Content>
|
|
<Input
|
|
aria-label={zipCode}
|
|
control={control}
|
|
name="address.zipCode"
|
|
placeholder={zipCode}
|
|
registerOptions={{ required: true }}
|
|
/>
|
|
</Field.Content>
|
|
</Field>
|
|
</>
|
|
)
|
|
}
|