feat(WEB-170): edit profile view

2024-04-11 18:51:38 +02:00
parent 82e4d40203
commit 9396b2c3d5
114 changed files with 3642 additions and 2171 deletions
--- a/components/MyProfile/Profile/Edit/Form/Content.tsx
+++ b/components/MyProfile/Profile/Edit/Form/Content.tsx
@@ -0,0 +1,126 @@
+"use client"
+import { useEffect } from "react"
+import { useFormStatus } from "react-dom"
+
+import { _ } from "@/lib/translation"
+import { useProfileStore } from "@/stores/edit-profile"
+
+import {
+  CalendarIcon,
+  EmailIcon,
+  HouseIcon,
+  PhoneIcon,
+} from "@/components/Icons"
+import CountrySelect from "@/components/TempDesignSystem/Form/Country"
+import DateSelect from "@/components/TempDesignSystem/Form/Date"
+import Field from "@/components/MyProfile/Field"
+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)
+
+  useEffect(() => {
+    setIsPending(pending)
+  }, [pending])
+
+  return (
+    <>
+      <Field>
+        <Field.Icon>SE</Field.Icon>
+        <Field.Label htmlFor="country">*{_("Country")}</Field.Label>
+        <Field.Content>
+          <CountrySelect name="country" />
+        </Field.Content>
+      </Field>
+
+      <Field>
+        <Field.Icon>
+          <CalendarIcon />
+        </Field.Icon>
+        <Field.Label htmlFor="dob">*{_("Date of Birth")}</Field.Label>
+        <Field.Content>
+          <DateSelect
+            control={control}
+            name="dob"
+            registerOptions={{ required: true }}
+          />
+        </Field.Content>
+      </Field>
+
+      <Field>
+        <Field.Icon>
+          <EmailIcon />
+        </Field.Icon>
+        <Field.Label htmlFor="email">*{_("Email")}</Field.Label>
+        <Field.Content>
+          <Input
+            control={control}
+            name="email"
+            placeholder={_("Email")}
+            registerOptions={{ required: true }}
+            type="email"
+          />
+        </Field.Content>
+      </Field>
+
+      <Field>
+        <Field.Icon>
+          <PhoneIcon />
+        </Field.Icon>
+        <Field.Label htmlFor="phone">*{_("Phone")}</Field.Label>
+        <Field.Content>
+          <Phone name="phone" />
+        </Field.Content>
+      </Field>
+
+      <Field>
+        <Field.Icon>
+          <HouseIcon />
+        </Field.Icon>
+        <Field.Label htmlFor="street">*{_("Address")}</Field.Label>
+        <Field.Content>
+          <Input
+            control={control}
+            name="street"
+            placeholder={_("Street 123")}
+            registerOptions={{ required: true }}
+          />
+        </Field.Content>
+      </Field>
+
+      <Field>
+        <Field.Icon>
+          <HouseIcon />
+        </Field.Icon>
+        <Field.Label htmlFor="city">*{_("City/State")}</Field.Label>
+        <Field.Content>
+          <Input
+            control={control}
+            name="city"
+            placeholder={_("City")}
+            registerOptions={{ required: true }}
+          />
+        </Field.Content>
+      </Field>
+
+      <Field>
+        <Field.Icon>
+          <HouseIcon />
+        </Field.Icon>
+        <Field.Label htmlFor="zip">*{_("Zip code")}</Field.Label>
+        <Field.Content>
+          <Input
+            control={control}
+            name="zip"
+            placeholder={_("Zip code")}
+            registerOptions={{ required: true }}
+          />
+        </Field.Content>
+      </Field>
+    </>
+  )
+}