Merged in feat/LOY-243-change-name-disclaimer (pull request #2311)

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

Approved-by: Chuma Mcphoy (We Ahead)

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,6 +121,7 @@ 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">
@@ -173,7 +175,6 @@ export default function Form({ user }: EditFormProps) {
             })}
           </Button>
         </div>
-
         <form
           /**
            * Ignoring since ts doesn't recognize that tRPC
@@ -189,5 +190,8 @@ export default function Form({ user }: EditFormProps) {
           </FormProvider>
         </form>
       </section>
+
+      <ChangeNameDisclaimer />
+    </>
   )
 }

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;
+}

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 (
+    <div className={styles.changeNameDisclaimer}>
+      <MaterialIcon icon="info" />
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <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 (
+                  <Typography variant="Body/Supporting text (caption)/smBold">
+                    <Link
+                      href={`tel:${str.replaceAll(" ", "")}`}
+                      textDecoration="underline"
+                      size="none"
+                    >
+                      {str}
+                    </Link>
+                  </Typography>
+                )
+              },
+              email(str) {
+                return (
+                  <Typography variant="Body/Supporting text (caption)/smBold">
+                    <Link
+                      href={`mailto:${str}`}
+                      textDecoration="underline"
+                      size="none"
+                    >
+                      {str}
+                    </Link>
+                  </Typography>
+                )
+              },
+            }
+          )}
+        </p>
+      </Typography>
+    </div>
+  )
+}

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() {
           </Typography>
         </div>
       </div>
+
+      <ChangeNameDisclaimer />
+
       <Divider color="burgundy" opacity={8} />
       <CreditCardSlot />
       {/* <MembershipCardSlot /> */}

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);
   }
 }
 

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,