135 lines
3.7 KiB
TypeScript
135 lines
3.7 KiB
TypeScript
"use client"
|
|
import { useEffect } from "react"
|
|
import { useFormStatus } from "react-dom"
|
|
import { useWatch } from "react-hook-form"
|
|
|
|
import { _ } from "@/lib/translation"
|
|
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 { pending } = useFormStatus()
|
|
const setIsPending = useProfileStore((store) => store.setIsPending)
|
|
const country = useWatch({ name: "address.country" })
|
|
|
|
useEffect(() => {
|
|
setIsPending(pending)
|
|
}, [pending, setIsPending])
|
|
|
|
return (
|
|
<>
|
|
<Field>
|
|
<Field.Icon>{country}</Field.Icon>
|
|
<Field.Label htmlFor="address.country">*{_("Country")}</Field.Label>
|
|
<Field.Content>
|
|
<CountrySelect name="address.country" />
|
|
</Field.Content>
|
|
</Field>
|
|
|
|
<Field>
|
|
<Field.Icon>
|
|
<CalendarIcon />
|
|
</Field.Icon>
|
|
<Field.Label htmlFor="dateOfBirth">*{_("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">*{_("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">
|
|
*{_("Address")}
|
|
</Field.Label>
|
|
<Field.Content>
|
|
<Input
|
|
aria-label={_("Street")}
|
|
control={control}
|
|
name="address.streetAddress"
|
|
placeholder={_("Street 123")}
|
|
registerOptions={{ required: true }}
|
|
/>
|
|
</Field.Content>
|
|
</Field>
|
|
|
|
<Field>
|
|
<Field.Icon>
|
|
<HouseIcon />
|
|
</Field.Icon>
|
|
<Field.Label htmlFor="address.city">*{_("City/State")}</Field.Label>
|
|
<Field.Content>
|
|
<Input
|
|
aria-label={_("City")}
|
|
control={control}
|
|
name="address.city"
|
|
placeholder={_("City")}
|
|
registerOptions={{ required: true }}
|
|
/>
|
|
</Field.Content>
|
|
</Field>
|
|
|
|
<Field>
|
|
<Field.Icon>
|
|
<HouseIcon />
|
|
</Field.Icon>
|
|
<Field.Label htmlFor="address.zipCode">*{_("Zip code")}</Field.Label>
|
|
<Field.Content>
|
|
<Input
|
|
aria-label={_("Zip code")}
|
|
control={control}
|
|
name="address.zipCode"
|
|
placeholder={_("Zip code")}
|
|
registerOptions={{ required: true }}
|
|
/>
|
|
</Field.Content>
|
|
</Field>
|
|
</>
|
|
)
|
|
}
|