Merged in feat/LOY-230-Microsoft-Entra-ID-Auth (pull request #2113)

Feat(LOY-230): DTMC Routes with Entra ID Auth & Error Page Handling

* feat(LOY-230): Link Scandic Friends and Azure accounts

* fix(LOY-230): remove employee id param setting

* fix(LOY-230): return token in jwt callback for auth.dtmc.ts


Approved-by: Michael Zetterberg
Approved-by: Christian Andolf

apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment-error/page.tsx

@@ -0,0 +1,146 @@
+"use client"
+
+import Image from "next/image"
+import { useSearchParams } from "next/navigation"
+import { type IntlShape, useIntl } from "react-intl"
+
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import ScandicLogoIcon from "@scandic-hotels/design-system/Icons/ScandicLogoIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { supportEmail, supportPhone } from "@/constants/contactSupport"
+import { employeeBenefits } from "@/constants/routes/dtmc"
+
+import ButtonLink from "@/components/ButtonLink"
+import Link from "@/components/TempDesignSystem/Link"
+import useLang from "@/hooks/useLang"
+import background from "@/public/_static/img/Scandic_Computer_Coffee.png"
+
+import styles from "./linkEmploymentError.module.css"
+
+export default function LinkEmploymentErrorPage() {
+  const lang = useLang()
+  const intl = useIntl()
+  const searchParams = useSearchParams()
+
+  const error = searchParams.get("error")
+  const errorContent = getErrorContent(error, intl)
+
+  return (
+    <div className={styles.pageWrapper}>
+      <Image
+        src={background}
+        alt=""
+        fill
+        className={styles.backgroundImage}
+        priority
+        sizes="100vw"
+      />
+
+      <div className={styles.contentContainer}>
+        <nav className={styles.nav}>
+          <ButtonLink href={employeeBenefits[lang]} variant="Text">
+            <MaterialIcon
+              icon="chevron_left"
+              size={20}
+              className={styles.backArrow}
+            />
+            <span className={styles.navBackText}>
+              {intl.formatMessage({
+                defaultMessage: "Go back",
+              })}
+            </span>
+          </ButtonLink>
+          <div className={styles.logoContainer}>
+            <ScandicLogoIcon
+              color="Icon/Interactive/Accent"
+              height="20px"
+              width="94px"
+            />
+          </div>
+        </nav>
+
+        <main className={styles.mainContent}>
+          <div style={{ textAlign: "center" }} className={styles.card}>
+            <Typography variant="Title/Subtitle/lg">
+              <h1>{errorContent.heading}</h1>
+            </Typography>
+
+            <Typography variant="Body/Paragraph/mdRegular">
+              <p>{errorContent.message}</p>
+            </Typography>
+            <div className={styles.contactSection}>
+              <Typography variant="Title/Subtitle/md">
+                <h3>
+                  {intl.formatMessage({
+                    defaultMessage: "Contact our member service",
+                  })}
+                </h3>
+              </Typography>
+              <Typography variant="Link/sm">
+                <Link
+                  color="Text/Interactive/Secondary"
+                  href={`tel:${supportPhone[lang].replaceAll(" ", "")}`}
+                  textDecoration="underline"
+                >
+                  {supportPhone[lang]}
+                </Link>
+              </Typography>
+              <Typography variant="Link/sm">
+                <Link
+                  href={`mailto:${supportEmail[lang]}`}
+                  color="Text/Interactive/Secondary"
+                  textDecoration="underline"
+                >
+                  {supportEmail[lang]}
+                </Link>
+              </Typography>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+  )
+}
+
+const getErrorContent = (error: string | null, intl: IntlShape) => {
+  const defaultErrorContent = {
+    heading: intl.formatMessage({
+      defaultMessage: "Your account could not be connected",
+    }),
+    message: intl.formatMessage({
+      defaultMessage:
+        "We could not connect your accounts to give you access. Please contact us and we'll help you resolve this issue.",
+    }),
+  }
+
+  switch (error) {
+    case "unable_to_verify_employee_id":
+      return {
+        heading: intl.formatMessage({
+          defaultMessage: "You're not eligible for employee benefits",
+        }),
+        message: intl.formatMessage({
+          defaultMessage:
+            "This may be because your employment has not yet started, has ended, or you are a consultant. If you believe this is an error, please contact us for assistance.",
+        }),
+      }
+    case "employee_id_already_linked":
+      return {
+        heading: intl.formatMessage({
+          defaultMessage:
+            "Employee number already linked to another Scandic Friends membership.",
+        }),
+        message: intl.formatMessage({
+          defaultMessage:
+            "If you believe this is an error, please contact us for assistance.",
+        }),
+      }
+    case "missing_employee_id_profile":
+    case "missing_employee_id":
+    case "no_session":
+      return defaultErrorContent
+    default:
+      return defaultErrorContent
+  }
+}