diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.module.css b/app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.module.css
index 22f01c255..32b75c7b8 100644
--- a/app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.module.css
+++ b/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);
}
}
diff --git a/components/Forms/Edit/Profile/form.module.css b/components/Forms/Edit/Profile/form.module.css
index 2ccbaa268..4925d8537 100644
--- a/components/Forms/Edit/Profile/form.module.css
+++ b/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;
+ }
}
diff --git a/components/Forms/Edit/Profile/index.tsx b/components/Forms/Edit/Profile/index.tsx
index 768c5b412..80ca6d710 100644
--- a/components/Forms/Edit/Profile/index.tsx
+++ b/components/Forms/Edit/Profile/index.tsx
@@ -61,41 +61,47 @@ export default function Form({ user }: EditFormProps) {
})
return (
- <>
-
+
+
+
+ {formatMessage({ id: "Welcome" })}
+
+
+ {user.name}
+
+
+
+
+
+
+
- >
+
)
}
diff --git a/components/TempDesignSystem/Form/Date/index.tsx b/components/TempDesignSystem/Form/Date/index.tsx
index 6596f88e3..a04ec82bf 100644
--- a/components/TempDesignSystem/Form/Date/index.tsx
+++ b/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)}
>
diff --git a/components/TempDesignSystem/Form/Phone/index.tsx b/components/TempDesignSystem/Form/Phone/index.tsx
index b3e734547..561d1bba0 100644
--- a/components/TempDesignSystem/Form/Phone/index.tsx
+++ b/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,
diff --git a/utils/phoneValidator.ts b/utils/phoneValidator.ts
index 94639ca9b..2f2d72d3b 100644
--- a/utils/phoneValidator.ts
+++ b/utils/phoneValidator.ts
@@ -1,6 +1,6 @@
import {
- ParseError,
isPossiblePhoneNumber,
+ ParseError,
parsePhoneNumber,
validatePhoneNumberLength,
} from "libphonenumber-js"