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
This commit is contained in:
Chuma Mcphoy (We Ahead)
@@ -0,0 +1,128 @@
|
||||
.pageWrapper {
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.backgroundImage {
|
||||
object-fit: cover;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.contentContainer {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.nav {
|
||||
padding: var(--Space-x2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
background-color: var(--Background-Secondary);
|
||||
}
|
||||
|
||||
.navBackText {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.navBackText {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.logoContainer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.mainContent {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: var(--Space-x3);
|
||||
padding-right: var(--Space-x3);
|
||||
}
|
||||
|
||||
.card {
|
||||
max-width: 580px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background: var(--Background-Primary);
|
||||
padding: var(--Spacing-x5);
|
||||
border-radius: var(--Corner-radius-lg);
|
||||
display: grid;
|
||||
gap: var(--Space-x3);
|
||||
}
|
||||
|
||||
.formElements {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Space-x3);
|
||||
}
|
||||
|
||||
.checkboxContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
.checkboxWrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Space-x15);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
min-width: 24px;
|
||||
border: 1px solid var(--UI-Input-Controls-Border-Normal);
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--UI-Input-Controls-Surface-Normal);
|
||||
flex-shrink: 0;
|
||||
forced-color-adjust: none;
|
||||
}
|
||||
|
||||
.checkboxWrapper[data-selected="true"] .checkbox {
|
||||
border-color: var(--UI-Input-Controls-Fill-Selected);
|
||||
background-color: var(--UI-Input-Controls-Fill-Selected);
|
||||
}
|
||||
|
||||
.checkboxWrapper[data-focus-visible="true"] .checkbox {
|
||||
outline: 2px solid var(--UI-Input-Controls-Fill-Selected);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.termsTextFull {
|
||||
padding-left: var(--Space-x5);
|
||||
}
|
||||
|
||||
.link {
|
||||
color: var(--Text-Default);
|
||||
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;
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user