feat(WEB-162): final design edit profile page

components/Forms/Edit/Profile/index.tsx

@@ -0,0 +1,94 @@
+"use client"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useFormState as useReactFormState } from "react-dom"
+import { FormProvider, useForm } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import { editProfile } from "@/actions/editProfile"
+import Header from "@/components/Profile/Header"
+import Button from "@/components/TempDesignSystem/Button"
+import Divider from "@/components/TempDesignSystem/Divider"
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import FormContent from "./FormContent"
+import { type EditProfileSchema, editProfileSchema } from "./schema"
+
+import styles from "./form.module.css"
+
+import type {
+  EditFormProps,
+  State,
+} from "@/types/components/myPages/myProfile/edit"
+
+const formId = "edit-profile"
+
+export default function Form({ user }: EditFormProps) {
+  const { formatMessage } = useIntl()
+  /**
+   * like react, react-hook-form also exports a useFormState hook,
+   * we want to clearly keep them separate by naming.
+   */
+  const [state, formAction] = useReactFormState<State, FormData>(
+    editProfile,
+    null
+  )
+
+  const form = useForm<EditProfileSchema>({
+    defaultValues: {
+      "address.city": user.address.city ?? "",
+      "address.countryCode": user.address.countryCode ?? "",
+      "address.streetAddress": user.address.streetAddress ?? "",
+      "address.zipCode": user.address.zipCode ?? "",
+      dateOfBirth: user.dateOfBirth,
+      email: user.email,
+      language: user.language,
+      phoneNumber: user.phoneNumber,
+      currentPassword: "",
+      newPassword: "",
+      retypeNewPassword: "",
+    },
+    mode: "all",
+    resolver: zodResolver(editProfileSchema),
+    reValidateMode: "onChange",
+  })
+
+  return (
+    <FormProvider {...form}>
+      <Header>
+        <hgroup>
+          <Title as="h4" color="peach80" level="h1">
+            {formatMessage({ id: "Edit" })}
+          </Title>
+          <Title as="h4" color="burgundy" level="h2">
+            {user.name}
+          </Title>
+        </hgroup>
+        <div className={styles.btns}>
+          <Button
+            form={formId}
+            intent="primary"
+            size="small"
+            theme="primaryDark"
+            type="reset"
+          >
+            {formatMessage({ id: "Discard changes" })}
+          </Button>
+          <Button
+            disabled={!form.formState.isValid || form.formState.isSubmitting}
+            form={formId}
+            intent="secondary"
+            size="small"
+            theme="base"
+            type="submit"
+          >
+            {formatMessage({ id: "Save" })}
+          </Button>
+        </div>
+      </Header>
+      <Divider color="burgundy" opacity={8} />
+      <form action={formAction} className={styles.form} id={formId}>
+        <FormContent />
+      </form>
+    </FormProvider>
+  )
+}