feat(WEB-169): get profile data from API

components/MyProfile/Profile/Edit/Form/Content.tsx

@@ -1,6 +1,7 @@
 "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"
@@ -22,6 +23,7 @@ import type { EditFormContentProps } from "@/types/components/myPages/myProfile/
 export default function FormContent({ control }: EditFormContentProps) {
   const { pending } = useFormStatus()
   const setIsPending = useProfileStore((store) => store.setIsPending)
+  const country = useWatch({ name: "address.country" })
 
   useEffect(() => {
     setIsPending(pending)
@@ -30,10 +32,10 @@ export default function FormContent({ control }: EditFormContentProps) {
   return (
     <>
       <Field>
-        <Field.Icon>SE</Field.Icon>
-        <Field.Label htmlFor="country">*{_("Country")}</Field.Label>
+        <Field.Icon>{country}</Field.Icon>
+        <Field.Label htmlFor="address.country">*{_("Country")}</Field.Label>
         <Field.Content>
-          <CountrySelect name="country" />
+          <CountrySelect name="address.country" />
         </Field.Content>
       </Field>
 
@@ -72,9 +74,9 @@ export default function FormContent({ control }: EditFormContentProps) {
         <Field.Icon>
           <PhoneIcon />
         </Field.Icon>
-        <Field.Label htmlFor="phone">*{_("Phone")}</Field.Label>
+        <Field.Label htmlFor="phoneNumber">*{_("Phone")}</Field.Label>
         <Field.Content>
-          <Phone name="phone" />
+          <Phone countrySelectName="address.country" name="phoneNumber" />
         </Field.Content>
       </Field>
 
@@ -82,12 +84,14 @@ export default function FormContent({ control }: EditFormContentProps) {
         <Field.Icon>
           <HouseIcon />
         </Field.Icon>
-        <Field.Label htmlFor="street">*{_("Address")}</Field.Label>
+        <Field.Label htmlFor="address.streetAddress">
+          *{_("Address")}
+        </Field.Label>
         <Field.Content>
           <Input
             aria-label={_("Street")}
             control={control}
-            name="street"
+            name="address.streetAddress"
             placeholder={_("Street 123")}
             registerOptions={{ required: true }}
           />
@@ -98,12 +102,12 @@ export default function FormContent({ control }: EditFormContentProps) {
         <Field.Icon>
           <HouseIcon />
         </Field.Icon>
-        <Field.Label htmlFor="city">*{_("City/State")}</Field.Label>
+        <Field.Label htmlFor="address.city">*{_("City/State")}</Field.Label>
         <Field.Content>
           <Input
             aria-label={_("City")}
             control={control}
-            name="city"
+            name="address.city"
             placeholder={_("City")}
             registerOptions={{ required: true }}
           />
@@ -114,12 +118,12 @@ export default function FormContent({ control }: EditFormContentProps) {
         <Field.Icon>
           <HouseIcon />
         </Field.Icon>
-        <Field.Label htmlFor="zip">*{_("Zip code")}</Field.Label>
+        <Field.Label htmlFor="address.zipCode">*{_("Zip code")}</Field.Label>
         <Field.Content>
           <Input
             aria-label={_("Zip code")}
             control={control}
-            name="zip"
+            name="address.zipCode"
             placeholder={_("Zip code")}
             registerOptions={{ required: true }}
           />

components/MyProfile/Profile/Edit/Form/index.tsx

@@ -30,15 +30,7 @@ export default function Form({ user }: EditFormProps) {
   )
 
   const form = useForm<EditProfileSchema>({
-    defaultValues: {
-      country: user.country,
-      city: user.address.city,
-      dob: user.dob,
-      email: user.email,
-      phone: user.phone,
-      street: user.address.street,
-      zip: user.address.zipcode,
-    },
+    defaultValues: user,
     criteriaMode: "all",
     mode: "onTouched",
     resolver: zodResolver(editProfileSchema),

components/MyProfile/Profile/Edit/Form/schema.ts

@@ -4,26 +4,22 @@ import { _ } from "@/lib/translation"
 import { phoneValidator } from "@/utils/phoneValidator"
 
 export const editProfileSchema = z.object({
-  city: z
-    .string({ required_error: _("City is required") })
-    .min(1, { message: _("City is required") }),
-  country: z
+  "address.country": z
     .string({ required_error: _("Country is required") })
     .min(1, { message: _("Country is required") }),
+  "address.city": z.string().optional(),
+  "address.streetAddress": z.string().optional(),
+  "address.zipCode": z
+    .string({ required_error: _("Zip code is required") })
+    .min(1, { message: _("Zip code is required") }),
   dob: z
     .string({ required_error: _("Date of Birth is required") })
     .min(1, { message: _("Date of Birth is required") }),
   email: z.string().email(),
-  phone: phoneValidator(
+  phoneNumber: phoneValidator(
     _("Phone is required"),
     _("Please enter a valid phone number")
   ),
-  street: z
-    .string({ required_error: _("Address is required") })
-    .min(1, { message: _("Address is required") }),
-  zip: z
-    .string({ required_error: _("Zip code is required") })
-    .min(1, { message: _("Zip code is required") }),
 })
 
 export type EditProfileSchema = z.infer<typeof editProfileSchema>