fix: mobile form ui and parse phone number bug

app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.module.css

@@ -27,6 +27,6 @@
 
 @media screen and (min-width: 768px) {
   .container {
-    gap: var(--Spacing-x2);
+    gap: var(--Spacing-x3);
   }
 }

components/Forms/Edit/Profile/form.module.css

@@ -1,10 +1,48 @@
+.container {
+  display: grid;
+  gap: var(--Spacing-x3);
+  grid-template-areas:
+    "title"
+    "form"
+    "buttons";
+}
+
+.title {
+  grid-area: title;
+}
+
 .form {
   display: grid;
   gap: var(--Spacing-x5);
-  grid-template-columns: 1fr 1fr;
+  grid-area: form;
 }
 
-.btns {
+.btnContainer {
   display: flex;
-  gap: var(--Spacing-x2);
+  flex-direction: column-reverse;
+  gap: var(--Spacing-x1);
+  grid-area: buttons;
+}
+
+.btn {
+  justify-content: center;
+}
+
+@media screen and (min-width: 768px) {
+  .container {
+    grid-template-areas:
+      "title buttons"
+      "form form";
+  }
+
+  .form {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .btnContainer {
+    flex-direction: row;
+    gap: var(--Spacing-x2);
+    justify-self: flex-end;
+    align-self: center;
+  }
 }

components/Forms/Edit/Profile/index.tsx

@@ -61,41 +61,47 @@ export default function Form({ user }: EditFormProps) {
   })
 
   return (
-    <>
-      <Header>
-        <hgroup>
-          <Title as="h4" color="red" level="h1" textTransform="capitalize">
-            {formatMessage({ id: "Welcome" })}
-          </Title>
-          <Title as="h4" color="burgundy" level="h2" textTransform="capitalize">
-            {user.name}
-          </Title>
-        </hgroup>
-        <div className={styles.btns}>
-          <Button asChild intent="secondary" size="small" theme="base">
-            <Link href={profile[lang]}>
-              {formatMessage({ id: "Discard changes" })}
-            </Link>
-          </Button>
-          <Button
-            disabled={
-              !methods.formState.isValid || methods.formState.isSubmitting
-            }
-            form={formId}
-            intent="primary"
-            size="small"
-            theme="base"
-            type="submit"
-          >
-            {formatMessage({ id: "Save" })}
-          </Button>
-        </div>
-      </Header>
+    <section className={styles.container}>
+      <hgroup className={styles.title}>
+        <Title as="h4" color="red" level="h1" textTransform="capitalize">
+          {formatMessage({ id: "Welcome" })}
+        </Title>
+        <Title as="h4" color="burgundy" level="h2" textTransform="capitalize">
+          {user.name}
+        </Title>
+      </hgroup>
+      <div className={styles.btnContainer}>
+        <Button
+          asChild
+          intent="secondary"
+          size="small"
+          theme="base"
+          className={styles.btn}
+        >
+          <Link href={profile[lang]}>
+            {formatMessage({ id: "Discard changes" })}
+          </Link>
+        </Button>
+        <Button
+          disabled={
+            !methods.formState.isValid || methods.formState.isSubmitting
+          }
+          className={styles.btn}
+          form={formId}
+          intent="primary"
+          size="small"
+          theme="base"
+          type="submit"
+        >
+          {formatMessage({ id: "Save" })}
+        </Button>
+      </div>
+
       <form action={formAction} className={styles.form} id={formId}>
         <FormProvider {...methods}>
           <FormContent />
         </FormProvider>
       </form>
-    </>
+    </section>
   )
 }

components/TempDesignSystem/Form/Date/index.tsx

@@ -61,7 +61,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
       isRequired={!!registerOptions.required}
       name={name}
       ref={field.ref}
-      value={parseDate(d)}
+      value={isNaN(d) ? undefined : parseDate(d)}
     >
       <Group>
         <DateInput className={styles.container}>

components/TempDesignSystem/Form/Phone/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 import "react-international-phone/style.css"
 
-import { parsePhoneNumber } from "libphonenumber-js"
+import { isValidPhoneNumber, parsePhoneNumber } from "libphonenumber-js"
 import {
   Input as AriaInput,
   Label as AriaLabel,
@@ -50,10 +50,11 @@ export default function Phone({
 
   const { country, handlePhoneValueChange, inputValue, setCountry } =
     usePhoneInput({
-      defaultCountry:
-        parsePhoneNumber(
-          formState.defaultValues?.phoneNumber
-        ).country?.toLowerCase() ?? "sv",
+      defaultCountry: isValidPhoneNumber(formState.defaultValues?.phoneNumber)
+        ? parsePhoneNumber(
+            formState.defaultValues?.phoneNumber
+          ).country?.toLowerCase()
+        : "sv",
       disableCountryGuess: true,
       forceDialCode: true,
       value: phone,

utils/phoneValidator.ts

@@ -1,6 +1,6 @@
 import {
-  ParseError,
   isPossiblePhoneNumber,
+  ParseError,
   parsePhoneNumber,
   validatePhoneNumberLength,
 } from "libphonenumber-js"