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

apps/scandic-web/components/MyPages/Profile/ChangeNameDisclaimer/index.tsx

@@ -0,0 +1,54 @@
+"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 (
+    <div className={styles.changeNameDisclaimer}>
+      <MaterialIcon icon="info" />
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p>
+          {intl.formatMessage(
+            {
+              defaultMessage:
+                "Need to change your name? Please get in touch with member support at <phone>+46 8 517 517 00</phone> or <email>member@scandichotels.com</email>.",
+            },
+            {
+              phone([str]) {
+                return (
+                  <Link
+                    href={`tel:${str.replaceAll(" ", "")}`}
+                    textDecoration="underline"
+                    weight="bold"
+                  >
+                    {str}
+                  </Link>
+                )
+              },
+              email(str) {
+                return (
+                  <Link
+                    href={`mailto:${str}`}
+                    textDecoration="underline"
+                    weight="bold"
+                  >
+                    {str}
+                  </Link>
+                )
+              },
+            }
+          )}
+        </p>
+      </Typography>
+    </div>
+  )
+}