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]/(live)/(public)/dtmc/route.ts

@@ -0,0 +1,45 @@
+import { NextResponse } from "next/server"
+import { AuthError } from "next-auth"
+
+import { dtmcApiCallback } from "@/constants/routes/dtmc"
+import { env } from "@/env/server"
+import { internalServerError, serviceUnavailable } from "@/server/errors/next"
+
+import { signIn } from "@/auth.dtmc"
+
+export async function GET() {
+  try {
+    const redirectUrl = await signIn(
+      "microsoft-entra-id",
+      {
+        redirectTo: `${env.PUBLIC_URL}${dtmcApiCallback}`,
+        redirect: false,
+      },
+      {
+        prompt: "login",
+      }
+    )
+
+    if (redirectUrl) {
+      console.log(`[dtmc] redirecting to: ${redirectUrl}`)
+      return NextResponse.redirect(redirectUrl)
+    } else {
+      console.error(`[dtmc] missing redirectUrl response from signIn()`)
+      return internalServerError(
+        "[dtmc] Missing redirect URL from authentication service"
+      )
+    }
+  } catch (error) {
+    if (error instanceof AuthError) {
+      console.error({ signInAuthError: error })
+      return serviceUnavailable(
+        "[dtmc] Microsoft authentication service unavailable"
+      )
+    } else {
+      console.error({ signInError: error })
+      return internalServerError(
+        "[dtmc] Unexpected error during authentication"
+      )
+    }
+  }
+}

apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment-error/linkEmploymentError.module.css

@@ -20,7 +20,7 @@
 }
 
 .nav {
-  padding: var(--Spacing-x2);
+  padding: var(--Space-x2);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -50,8 +50,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-left: var(--Spacing-x3);
-  padding-right: var(--Spacing-x3);
+  padding-left: var(--Space-x3);
+  padding-right: var(--Space-x3);
 }
 
 .card {
@@ -62,25 +62,25 @@
   padding: var(--Spacing-x5);
   border-radius: var(--Corner-radius-lg);
   display: grid;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
 }
 
 .formElements {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
 }
 
 .checkboxContainer {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 .checkboxWrapper {
   display: flex;
   align-items: center;
-  gap: var(--Spacing-x-one-and-half);
+  gap: var(--Space-x15);
   cursor: pointer;
 }
 
@@ -110,7 +110,7 @@
 }
 
 .termsTextFull {
-  padding-left: var(--Spacing-x5);
+  padding-left: var(--Space-x5);
 }
 
 .link {
@@ -118,3 +118,11 @@
   text-decoration: underline;
   font-weight: var(--Font-weight-Bold);
 }
+
+.contactSection {
+  padding-top: var(--Space-x3);
+  gap: var(--Space-x15);
+  display: flex;
+  flex-direction: column;
+  place-items: center;
+}

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

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

@@ -1,139 +0,0 @@
-"use client"
-
-import Image from "next/image"
-import { useState } from "react"
-import { Checkbox as AriaCheckbox } from "react-aria-components"
-import { useIntl } from "react-intl"
-
-import { Button } from "@scandic-hotels/design-system/Button"
-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 { employeeBenefits } from "@/constants/routes/dtmc"
-
-import ButtonLink from "@/components/ButtonLink"
-import useLang from "@/hooks/useLang"
-
-import styles from "./linkEmploymentPage.module.css"
-
-export default function LinkEmploymentPage() {
-  const lang = useLang()
-  const intl = useIntl()
-  const [isChecked, setIsChecked] = useState(false)
-  const linkMyEmploymentText = intl.formatMessage({
-    defaultMessage: "Link my employment",
-  })
-
-  return (
-    <div className={styles.pageWrapper}>
-      <Image
-        src="/_static/img/Scandic_Computer_Coffee.png"
-        alt=""
-        fill
-        className={styles.backgroundImage}
-        priority
-      />
-
-      <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 className={styles.card}>
-            <Typography variant="Title/Subtitle/lg">
-              <h1 className={styles.heading}>
-                {intl.formatMessage({
-                  defaultMessage: "Link your employment to access benefits",
-                })}
-              </h1>
-            </Typography>
-
-            <div className={styles.formElements}>
-              <div className={styles.checkboxContainer}>
-                <AriaCheckbox
-                  isSelected={isChecked}
-                  onChange={setIsChecked}
-                  className={styles.checkboxWrapper}
-                >
-                  {({ isSelected: isAriaSelected }) => (
-                    <>
-                      <span className={styles.checkbox}>
-                        {isAriaSelected && (
-                          <MaterialIcon icon="check" color="Icon/Inverted" />
-                        )}
-                      </span>
-                      <Typography variant="Body/Paragraph/mdRegular">
-                        <span>
-                          {intl.formatMessage({
-                            defaultMessage: "I accept the terms and conditions",
-                          })}
-                        </span>
-                      </Typography>
-                    </>
-                  )}
-                </AriaCheckbox>
-                <Typography variant="Body/Paragraph/mdRegular">
-                  <p className={styles.termsTextFull}>
-                    {intl.formatMessage(
-                      {
-                        defaultMessage:
-                          "By accepting the {termsLink}, I agree to link my employment to access benefits. The connection will remain active during my employment or until I opt out by sending an email to Scandic's customer service.",
-                      },
-                      {
-                        termsLink: (
-                          // TODO: Update with actual URL for terms and conditions.
-                          <a href={"#"} className={styles.link}>
-                            {intl.formatMessage({
-                              defaultMessage:
-                                "Scandic Family Terms and Conditions",
-                            })}
-                          </a>
-                        ),
-                      }
-                    )}
-                  </p>
-                </Typography>
-              </div>
-
-              {isChecked ? (
-                <ButtonLink
-                  href={"#"} // TODO: Udpate with actual URL for linking employment.
-                >
-                  {linkMyEmploymentText}
-                </ButtonLink>
-              ) : (
-                <Button
-                  variant="Primary"
-                  typography="Body/Paragraph/mdRegular"
-                  isDisabled
-                >
-                  {linkMyEmploymentText}
-                </Button>
-              )}
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
-  )
-}