feat(LOY-243): add change name disclaimer to profile

apps/scandic-web/components/Forms/Edit/Profile/index.tsx

@@ -17,6 +17,7 @@ import { trpc } from "@/lib/trpc/client"
 
 import { editProfile } from "@/actions/editProfile"
 import Dialog from "@/components/Dialog"
+import ChangeNameDisclaimer from "@/components/MyPages/Profile/ChangeNameDisclaimer"
 import Button from "@/components/TempDesignSystem/Button"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { toast } from "@/components/TempDesignSystem/Toasts"
@@ -120,74 +121,77 @@ export default function Form({ user }: EditFormProps) {
   }, [trigger])
 
   return (
-    <section className={styles.container}>
-      <div className={styles.title}>
-        <Title as="h4" color="red" level="h1" textTransform="capitalize">
-          {intl.formatMessage({
-            defaultMessage: "Welcome",
-          })}
-        </Title>
-        <Title
-          data-hj-suppress
-          as="h4"
-          color="burgundy"
-          level="h2"
-          textTransform="capitalize"
+    <>
+      <section className={styles.container}>
+        <div className={styles.title}>
+          <Title as="h4" color="red" level="h1" textTransform="capitalize">
+            {intl.formatMessage({
+              defaultMessage: "Welcome",
+            })}
+          </Title>
+          <Title
+            data-hj-suppress
+            as="h4"
+            color="burgundy"
+            level="h2"
+            textTransform="capitalize"
+          >
+            {user.name}
+          </Title>
+        </div>
+        <div className={styles.btnContainer}>
+          <Dialog
+            bodyText={intl.formatMessage({
+              defaultMessage: "Any changes you've made will be lost.",
+            })}
+            cancelButtonText={intl.formatMessage({
+              defaultMessage: "Go back to edit",
+            })}
+            proceedHref={profile[lang]}
+            proceedText={intl.formatMessage({
+              defaultMessage: "Yes, discard changes",
+            })}
+            titleText={intl.formatMessage({
+              defaultMessage: "Discard unsaved changes?",
+            })}
+            trigger={
+              <Button intent="secondary" size="small" theme="base">
+                {intl.formatMessage({
+                  defaultMessage: "Discard changes",
+                })}
+              </Button>
+            }
+          />
+          <Button
+            disabled={!isValid || methods.formState.isSubmitting}
+            form={formId}
+            intent="primary"
+            size="small"
+            theme="base"
+            type="submit"
+          >
+            {intl.formatMessage({
+              defaultMessage: "Save",
+            })}
+          </Button>
+        </div>
+        <form
+          /**
+           * Ignoring since ts doesn't recognize that tRPC
+           * parses FormData before reaching the route
+           * @ts-ignore */
+          action={editProfile}
+          className={styles.form}
+          id={formId}
+          onSubmit={methods.handleSubmit(handleSubmit)}
         >
-          {user.name}
-        </Title>
-      </div>
-      <div className={styles.btnContainer}>
-        <Dialog
-          bodyText={intl.formatMessage({
-            defaultMessage: "Any changes you've made will be lost.",
-          })}
-          cancelButtonText={intl.formatMessage({
-            defaultMessage: "Go back to edit",
-          })}
-          proceedHref={profile[lang]}
-          proceedText={intl.formatMessage({
-            defaultMessage: "Yes, discard changes",
-          })}
-          titleText={intl.formatMessage({
-            defaultMessage: "Discard unsaved changes?",
-          })}
-          trigger={
-            <Button intent="secondary" size="small" theme="base">
-              {intl.formatMessage({
-                defaultMessage: "Discard changes",
-              })}
-            </Button>
-          }
-        />
-        <Button
-          disabled={!isValid || methods.formState.isSubmitting}
-          form={formId}
-          intent="primary"
-          size="small"
-          theme="base"
-          type="submit"
-        >
-          {intl.formatMessage({
-            defaultMessage: "Save",
-          })}
-        </Button>
-      </div>
+          <FormProvider {...methods}>
+            <FormContent />
+          </FormProvider>
+        </form>
+      </section>
 
-      <form
-        /**
-         * Ignoring since ts doesn't recognize that tRPC
-         * parses FormData before reaching the route
-         * @ts-ignore */
-        action={editProfile}
-        className={styles.form}
-        id={formId}
-        onSubmit={methods.handleSubmit(handleSubmit)}
-      >
-        <FormProvider {...methods}>
-          <FormContent />
-        </FormProvider>
-      </form>
-    </section>
+      <ChangeNameDisclaimer />
+    </>
   )
 }