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,74 +121,77 @@ export default function Form({ user }: EditFormProps) {
   }, [trigger])
 
   return (
-    <section className={styles.container}>
+    <>
-      <div className={styles.title}>
+      <section className={styles.container}>
-        <Title as="h4" color="red" level="h1" textTransform="capitalize">
+        <div className={styles.title}>
-          {intl.formatMessage({
+          <Title as="h4" color="red" level="h1" textTransform="capitalize">
-            defaultMessage: "Welcome",
+            {intl.formatMessage({
-          })}
+              defaultMessage: "Welcome",
-        </Title>
+            })}
-        <Title
+          </Title>
-          data-hj-suppress
+          <Title
-          as="h4"
+            data-hj-suppress
-          color="burgundy"
+            as="h4"
-          level="h2"
+            color="burgundy"
-          textTransform="capitalize"
+            level="h2"
+            textTransform="capitalize"
+          >
+            {user.name}
+          </Title>
+        </div>
+        <div className={styles.btnContainer}>
+          <Dialog
+            bodyText={intl.formatMessage({
+              defaultMessage: "Any changes you've made will be lost.",
+            })}
+            cancelButtonText={intl.formatMessage({
+              defaultMessage: "Go back to edit",
+            })}
+            proceedHref={profile[lang]}
+            proceedText={intl.formatMessage({
+              defaultMessage: "Yes, discard changes",
+            })}
+            titleText={intl.formatMessage({
+              defaultMessage: "Discard unsaved changes?",
+            })}
+            trigger={
+              <Button intent="secondary" size="small" theme="base">
+                {intl.formatMessage({
+                  defaultMessage: "Discard changes",
+                })}
+              </Button>
+            }
+          />
+          <Button
+            disabled={!isValid || methods.formState.isSubmitting}
+            form={formId}
+            intent="primary"
+            size="small"
+            theme="base"
+            type="submit"
+          >
+            {intl.formatMessage({
+              defaultMessage: "Save",
+            })}
+          </Button>
+        </div>
+        <form
+          /**
+           * Ignoring since ts doesn't recognize that tRPC
+           * parses FormData before reaching the route
+           * @ts-ignore */
+          action={editProfile}
+          className={styles.form}
+          id={formId}
+          onSubmit={methods.handleSubmit(handleSubmit)}
         >
-          {user.name}
+          <FormProvider {...methods}>
-        </Title>
+            <FormContent />
-      </div>
+          </FormProvider>
-      <div className={styles.btnContainer}>
+        </form>
-        <Dialog
+      </section>
-          bodyText={intl.formatMessage({
-            defaultMessage: "Any changes you've made will be lost.",
-          })}
-          cancelButtonText={intl.formatMessage({
-            defaultMessage: "Go back to edit",
-          })}
-          proceedHref={profile[lang]}
-          proceedText={intl.formatMessage({
-            defaultMessage: "Yes, discard changes",
-          })}
-          titleText={intl.formatMessage({
-            defaultMessage: "Discard unsaved changes?",
-          })}
-          trigger={
-            <Button intent="secondary" size="small" theme="base">
-              {intl.formatMessage({
-                defaultMessage: "Discard changes",
-              })}
-            </Button>
-          }
-        />
-        <Button
-          disabled={!isValid || methods.formState.isSubmitting}
-          form={formId}
-          intent="primary"
-          size="small"
-          theme="base"
-          type="submit"
-        >
-          {intl.formatMessage({
-            defaultMessage: "Save",
-          })}
-        </Button>
-      </div>
 
-      <form
+      <ChangeNameDisclaimer />
-        /**
+    </>
-         * Ignoring since ts doesn't recognize that tRPC
-         * parses FormData before reaching the route
-         * @ts-ignore */
-        action={editProfile}
-        className={styles.form}
-        id={formId}
-        onSubmit={methods.handleSubmit(handleSubmit)}
-      >
-        <FormProvider {...methods}>
-          <FormContent />
-        </FormProvider>
-      </form>
-    </section>
   )
 }

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,