diff --git a/apps/scandic-web/components/Forms/Edit/Profile/index.tsx b/apps/scandic-web/components/Forms/Edit/Profile/index.tsx
index 671fee147..a36267ffa 100644
--- a/apps/scandic-web/components/Forms/Edit/Profile/index.tsx
+++ b/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 (
-
-
-
- {intl.formatMessage({
- defaultMessage: "Welcome",
- })}
-
-
+
+
+
+ {intl.formatMessage({
+ defaultMessage: "Welcome",
+ })}
+
+
+ {user.name}
+
+
+
+
+
-
-
-
+
+
+
+
+
-
-
+
+ >
)
}
diff --git a/apps/scandic-web/components/MyPages/Profile/ChangeNameDisclaimer/changeNameDisclaimer.module.css b/apps/scandic-web/components/MyPages/Profile/ChangeNameDisclaimer/changeNameDisclaimer.module.css
new file mode 100644
index 000000000..f4e33d6cf
--- /dev/null
+++ b/apps/scandic-web/components/MyPages/Profile/ChangeNameDisclaimer/changeNameDisclaimer.module.css
@@ -0,0 +1,6 @@
+.changeNameDisclaimer {
+ display: flex;
+ gap: var(--Space-x1);
+ color: var(--Text-Secondary);
+ align-items: center;
+}
diff --git a/apps/scandic-web/components/MyPages/Profile/ChangeNameDisclaimer/index.tsx b/apps/scandic-web/components/MyPages/Profile/ChangeNameDisclaimer/index.tsx
new file mode 100644
index 000000000..3b4ce78fb
--- /dev/null
+++ b/apps/scandic-web/components/MyPages/Profile/ChangeNameDisclaimer/index.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import Link from "@/components/TempDesignSystem/Link"
+
+import styles from "./changeNameDisclaimer.module.css"
+
+export default function ChangeNameDisclaimer() {
+ const intl = useIntl()
+
+ return (
+
+
+
+
+ {intl.formatMessage(
+ {
+ defaultMessage:
+ "Need to change your name? Please get in touch with member support at +46 8 517 517 00 or member@scandichotels.com.",
+ },
+ {
+ phone([str]) {
+ return (
+
+
+ {str}
+
+
+ )
+ },
+ email(str) {
+ return (
+
+
+ {str}
+
+
+ )
+ },
+ }
+ )}
+
+
+
+ )
+}
diff --git a/apps/scandic-web/components/MyPages/Profile/index.tsx b/apps/scandic-web/components/MyPages/Profile/index.tsx
index 23a7eded4..0d32e1430 100644
--- a/apps/scandic-web/components/MyPages/Profile/index.tsx
+++ b/apps/scandic-web/components/MyPages/Profile/index.tsx
@@ -16,6 +16,8 @@ import { getLang } from "@/i18n/serverContext"
import { isValidCountry } from "@/utils/countries"
import { isValidLang } from "@/utils/languages"
+import ChangeNameDisclaimer from "./ChangeNameDisclaimer"
+
import styles from "./profile.module.css"
export default async function Profile() {
@@ -173,6 +175,9 @@ export default async function Profile() {
+
+
+
{/* */}
diff --git a/apps/scandic-web/components/MyPages/Profile/profile.module.css b/apps/scandic-web/components/MyPages/Profile/profile.module.css
index e6754f6ee..0db913ac8 100644
--- a/apps/scandic-web/components/MyPages/Profile/profile.module.css
+++ b/apps/scandic-web/components/MyPages/Profile/profile.module.css
@@ -2,9 +2,8 @@
background-color: var(--Main-Grey-White);
border-radius: var(--Corner-radius-lg);
display: grid;
- gap: var(--Space-x3);
+ gap: var(--Space-x4);
padding: var(--Space-x2) var(--Space-x2) var(--Space-x4);
- color: var(--Text-Default);
}
.title {
@@ -48,6 +47,7 @@
.container {
padding: var(--Space-x3) var(--Space-x3) var(--Space-x4);
+ gap: var(--Space-x3);
}
}
diff --git a/apps/scandic-web/components/TempDesignSystem/Link/variants.ts b/apps/scandic-web/components/TempDesignSystem/Link/variants.ts
index c6cebddca..476b33fe9 100644
--- a/apps/scandic-web/components/TempDesignSystem/Link/variants.ts
+++ b/apps/scandic-web/components/TempDesignSystem/Link/variants.ts
@@ -19,6 +19,7 @@ export const linkVariants = cva(styles.link, {
small: styles.small,
regular: styles.regular,
tiny: styles.tiny,
+ none: "",
},
textDecoration: {
underline: styles.underline,