Merged in feat/SW-2782-create-sas-branded-header (pull request #2878)
feat(SW-2782): Updated header as per design, added language switcher and user menu * feat(SW-2782): Updated header as per design, added language switcher and user menu * feat(SW-2782): Updated UI as per design * feat(SW-2782): Optimised code with use of Popover and modal from RAC Approved-by: Anton Gunnarsson
This commit is contained in:
Hrishikesh Vaipurkar
49
apps/partner-sas/components/Menu/MobileMenu/index.tsx
Normal file
49
apps/partner-sas/components/Menu/MobileMenu/index.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Dialog, Modal } from "react-aria-components"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { Button } from "@scandic-hotels/design-system/Button"
|
||||
|
||||
import { UserMenu } from "../UserMenu"
|
||||
|
||||
import styles from "./mobile-menu.module.css"
|
||||
|
||||
export function MobileMenu({ children }: React.PropsWithChildren) {
|
||||
const intl = useIntl()
|
||||
|
||||
const closeMsg = intl.formatMessage({
|
||||
defaultMessage: "Close menu",
|
||||
})
|
||||
const openMsg = intl.formatMessage({
|
||||
defaultMessage: "Open menu",
|
||||
})
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<div className={styles.mobileMenu}>
|
||||
<UserMenu isMobile={true} />
|
||||
<Button
|
||||
variant={"Text"}
|
||||
type="button"
|
||||
className={`${styles.hamburger} ${isOpen ? styles.isExpanded : ""}`}
|
||||
aria-label={isOpen ? closeMsg : openMsg}
|
||||
onPress={() => setIsOpen(!isOpen)}
|
||||
>
|
||||
<span className={styles.bar} />
|
||||
</Button>
|
||||
<Modal className={styles.modal} isOpen={isOpen}>
|
||||
<Dialog
|
||||
className={styles.dialog}
|
||||
aria-label={intl.formatMessage({
|
||||
defaultMessage: "Menu",
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</Dialog>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
.mobileMenu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
.mobileMenu .avatar {
|
||||
background-color: white;
|
||||
span {
|
||||
color: var(--TEMP-sas-20);
|
||||
}
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
justify-self: flex-start;
|
||||
padding: 19px 8px 18px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.bar,
|
||||
.bar::after,
|
||||
.bar::before {
|
||||
background: white;
|
||||
border-radius: 2.3px;
|
||||
display: block;
|
||||
height: 3px;
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.bar::after,
|
||||
.bar::before {
|
||||
content: "";
|
||||
left: 0;
|
||||
position: absolute;
|
||||
transform-origin: 2.286px center;
|
||||
}
|
||||
|
||||
.bar::after {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
.bar::before {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.isExpanded .bar {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.isExpanded .bar::after,
|
||||
.isExpanded .bar::before {
|
||||
top: 0;
|
||||
transform-origin: 50% 50%;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.isExpanded .bar::after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.isExpanded .bar::before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: calc(var(--main-menu-mobile-height) + var(--sitewide-alert-height));
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: var(--Base-Surface-Primary-light-Normal);
|
||||
transition: right 0.3s;
|
||||
z-index: var(--menu-overlay-z-index);
|
||||
}
|
||||
|
||||
.dialog {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
align-content: space-between;
|
||||
padding: var(--Space-x3) var(--Space-x2) var(--Space-x4);
|
||||
flex-direction: column;
|
||||
gap: var(--Space-x2);
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: var(--Base-Surface-Subtle-Normal);
|
||||
padding: var(--Space-x4) var(--Space-x2);
|
||||
display: grid;
|
||||
gap: var(--Space-x2);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.avatar,
|
||||
.hamburger,
|
||||
.modal {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
48
apps/partner-sas/components/Menu/NavigationMenu/index.tsx
Normal file
48
apps/partner-sas/components/Menu/NavigationMenu/index.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
"use client"
|
||||
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
import Link from "@scandic-hotels/design-system/Link"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import { LanguageSwitcher } from "@/components/LanguageSwitcher"
|
||||
import useLang from "@/hooks/useLang"
|
||||
|
||||
import { UserMenu } from "../UserMenu"
|
||||
|
||||
import styles from "./navigation-menu.module.css"
|
||||
|
||||
export function NavigationMenu({ isMobile = false }: { isMobile?: boolean }) {
|
||||
const intl = useIntl()
|
||||
const lang = useLang()
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`styles.menuItems ${isMobile ? styles.mobileMenu : styles.desktopMenu}`}
|
||||
>
|
||||
<Typography
|
||||
variant={
|
||||
isMobile
|
||||
? "Body/Paragraph/mdRegular"
|
||||
: "Body/Supporting text (caption)/smRegular"
|
||||
}
|
||||
>
|
||||
<Link
|
||||
href="#"
|
||||
color={isMobile ? "none" : "white"}
|
||||
className={`${styles.menuItem} ${styles.contactLink}`}
|
||||
>
|
||||
{isMobile ? null : (
|
||||
<MaterialIcon icon="call" size={16} color={"CurrentColor"} />
|
||||
)}
|
||||
{intl.formatMessage({ defaultMessage: "Contact us" })}
|
||||
</Link>
|
||||
</Typography>
|
||||
|
||||
<LanguageSwitcher currentLanguage={lang} isMobile={isMobile} />
|
||||
|
||||
{!isMobile && <UserMenu isMobile={isMobile} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
.menuItems,
|
||||
.menuItem {
|
||||
display: flex;
|
||||
direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.desktopMenu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menuItem {
|
||||
gap: var(--Space-x1);
|
||||
padding: var(--Space-x1);
|
||||
}
|
||||
|
||||
.menuDivider {
|
||||
margin: var(--Space-x2) 0;
|
||||
}
|
||||
|
||||
.contactLink {
|
||||
color: var(--Text-sas-20);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.menuItems,
|
||||
.menuItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.menuItems {
|
||||
gap: var(--Space-x3);
|
||||
}
|
||||
|
||||
.mobileMenu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.desktopMenu {
|
||||
display: flex;
|
||||
gap: var(--Space-x3);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contactLink {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
201
apps/partner-sas/components/Menu/UserMenu/index.tsx
Normal file
201
apps/partner-sas/components/Menu/UserMenu/index.tsx
Normal file
@@ -0,0 +1,201 @@
|
||||
"use client"
|
||||
|
||||
import { useSession } from "next-auth/react"
|
||||
import { useEffect, useState } from "react"
|
||||
import {
|
||||
Dialog,
|
||||
DialogTrigger,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
Popover,
|
||||
} from "react-aria-components"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { Avatar } from "@scandic-hotels/design-system/Avatar"
|
||||
import { Button } from "@scandic-hotels/design-system/Button"
|
||||
import { Divider } from "@scandic-hotels/design-system/Divider"
|
||||
import { IconButton } from "@scandic-hotels/design-system/IconButton"
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
import Link from "@scandic-hotels/design-system/Link"
|
||||
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
import { trpc } from "@scandic-hotels/trpc/client"
|
||||
|
||||
import useLang from "@/hooks/useLang"
|
||||
|
||||
import { getInitials } from "../utils"
|
||||
|
||||
import styles from "./user-menu.module.css"
|
||||
|
||||
export function UserMenu({ isMobile = false }: { isMobile?: boolean }) {
|
||||
const intl = useIntl()
|
||||
const lang = useLang()
|
||||
const session = useSession()
|
||||
const [loginLink, setLoginLink] = useState(`/${lang}/login`)
|
||||
|
||||
const {
|
||||
data: profileData,
|
||||
isLoading,
|
||||
isSuccess,
|
||||
isError,
|
||||
} = trpc.partner.sas.getEuroBonusProfile.useQuery(undefined, {
|
||||
enabled: session.status === "authenticated",
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
setLoginLink(`/${lang}/login?redirectTo=${window?.location.href}`)
|
||||
}, [lang, setLoginLink])
|
||||
|
||||
const firstName = profileData?.firstName
|
||||
const lastName = profileData?.lastName
|
||||
|
||||
return (
|
||||
<div className={styles.userMenu}>
|
||||
{(session.status === "loading" || isLoading) &&
|
||||
(isMobile ? (
|
||||
<SkeletonShimmer width={"4ch"} height={"4ch"} />
|
||||
) : (
|
||||
<SkeletonShimmer width={"12ch"} height={"1ch"} />
|
||||
))}
|
||||
{(session.status === "unauthenticated" || isError) && (
|
||||
<a href={loginLink} className={styles.loginLink}>
|
||||
<Avatar className={styles.avatar} />
|
||||
{isMobile ? null : (
|
||||
<Typography
|
||||
variant={
|
||||
isMobile
|
||||
? "Body/Paragraph/mdRegular"
|
||||
: "Body/Supporting text (caption)/smRegular"
|
||||
}
|
||||
>
|
||||
<span>{intl.formatMessage({ defaultMessage: "Login" })}</span>
|
||||
</Typography>
|
||||
)}
|
||||
</a>
|
||||
)}
|
||||
{session.status === "authenticated" && isSuccess && profileData && (
|
||||
<div className={styles.loggedInMenu}>
|
||||
<DialogTrigger>
|
||||
<Button className={styles.userName} variant={"Text"}>
|
||||
<Avatar
|
||||
className={styles.avatar}
|
||||
initials={getInitials(
|
||||
firstName ?? session.data?.user?.name ?? "",
|
||||
lastName ?? session.data?.user?.name ?? ""
|
||||
)}
|
||||
/>
|
||||
{isMobile ? null : (
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<span>
|
||||
{firstName ?? session.data?.user?.email}
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
{` ${lastName}`}
|
||||
</span>
|
||||
</Typography>
|
||||
)}
|
||||
</Button>
|
||||
{isMobile ? (
|
||||
<ModalOverlay isDismissable>
|
||||
<Modal className={styles.modal}>
|
||||
<Dialog className={styles.dialog}>
|
||||
{({ close }) => (
|
||||
<>
|
||||
<IconButton
|
||||
className={styles.closeModal}
|
||||
onPress={close}
|
||||
>
|
||||
<MaterialIcon
|
||||
icon={"close"}
|
||||
size={32}
|
||||
color={"CurrentColor"}
|
||||
/>
|
||||
</IconButton>
|
||||
<UserMenuContent
|
||||
firstName={firstName}
|
||||
lastName={lastName}
|
||||
points={profileData.points.total}
|
||||
isMobile={true}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Dialog>
|
||||
</Modal>
|
||||
</ModalOverlay>
|
||||
) : (
|
||||
<Popover className={styles.userDetailsPopover} offset={20}>
|
||||
<Dialog className={styles.userDetailsContainer}>
|
||||
<UserMenuContent
|
||||
firstName={firstName}
|
||||
lastName={lastName}
|
||||
points={profileData.points.total}
|
||||
/>
|
||||
</Dialog>
|
||||
</Popover>
|
||||
)}
|
||||
</DialogTrigger>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function UserMenuContent({
|
||||
firstName,
|
||||
lastName,
|
||||
points,
|
||||
isMobile,
|
||||
}: {
|
||||
firstName?: string
|
||||
lastName?: string
|
||||
points?: number
|
||||
isMobile?: boolean
|
||||
}) {
|
||||
const intl = useIntl()
|
||||
const lang = useLang()
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
{isMobile && (
|
||||
<Typography variant={"Title/Subtitle/md"}>
|
||||
<h3>
|
||||
{intl.formatMessage(
|
||||
{ defaultMessage: `Hi {fName} {lName}!` },
|
||||
{ fName: firstName, lName: lastName }
|
||||
)}
|
||||
</h3>
|
||||
</Typography>
|
||||
)}
|
||||
<p className={styles.pointsDetails}>
|
||||
<Typography variant="Title/Overline/sm">
|
||||
<span>{intl.formatMessage({ defaultMessage: "EB Points" })}</span>
|
||||
</Typography>
|
||||
<Typography variant="Title/Overline/sm">
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
<span>{"·"}</span>
|
||||
</Typography>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<span>
|
||||
{intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "{points} points",
|
||||
},
|
||||
{
|
||||
points: points,
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
</Typography>
|
||||
</p>
|
||||
</div>
|
||||
<Divider className={styles.menuDivider} />
|
||||
<Link
|
||||
href={`/${lang}/logout`}
|
||||
prefetch={false}
|
||||
className={styles.logoutLink}
|
||||
>
|
||||
{intl.formatMessage({ defaultMessage: "Logout" })}
|
||||
</Link>
|
||||
</>
|
||||
)
|
||||
}
|
||||
107
apps/partner-sas/components/Menu/UserMenu/user-menu.module.css
Normal file
107
apps/partner-sas/components/Menu/UserMenu/user-menu.module.css
Normal file
@@ -0,0 +1,107 @@
|
||||
.userMenu {
|
||||
position: relative;
|
||||
|
||||
.userName {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Space-x1);
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.userMenu .avatar {
|
||||
background-color: white;
|
||||
color: var(--TEMP-sas-default);
|
||||
|
||||
span {
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.userDetailsContainer {
|
||||
padding: var(--Space-x1);
|
||||
color: var(--Text-sas-20);
|
||||
}
|
||||
|
||||
.logoutLink,
|
||||
.loginLink {
|
||||
color: var(--Text-sas-20);
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: calc(var(--main-menu-mobile-height) + var(--sitewide-alert-height));
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: var(--Base-Surface-Primary-light-Normal);
|
||||
transition: right 0.3s;
|
||||
z-index: var(--menu-overlay-z-index);
|
||||
}
|
||||
|
||||
.dialog {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
align-content: space-between;
|
||||
padding: var(--Space-x3) var(--Space-x2) var(--Space-x4);
|
||||
flex-direction: column;
|
||||
gap: var(--Space-x2);
|
||||
|
||||
.closeModal {
|
||||
position: fixed;
|
||||
top: var(--Space-x2);
|
||||
right: var(--Space-x2);
|
||||
background-color: var(--TEMP-sas-default);
|
||||
padding: var(--Space-x05);
|
||||
color: white;
|
||||
|
||||
&:hover,
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--TEMP-sas-default);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pointsDetails {
|
||||
display: flex;
|
||||
gap: var(--Space-x1);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.userMenu {
|
||||
padding: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.userDetailsContainer {
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
padding: var(--Space-x2) var(--Space-x3);
|
||||
box-shadow: 0 0 14px 6px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Space-x2);
|
||||
}
|
||||
|
||||
.loginLink {
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Space-x1);
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
45
apps/partner-sas/components/Menu/index.tsx
Normal file
45
apps/partner-sas/components/Menu/index.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import { useMediaQuery } from "usehooks-ts"
|
||||
|
||||
import Image from "@scandic-hotels/design-system/Image"
|
||||
import Link from "@scandic-hotels/design-system/Link"
|
||||
|
||||
import useLang from "@/hooks/useLang"
|
||||
|
||||
import { MobileMenu } from "./MobileMenu"
|
||||
import { NavigationMenu } from "./NavigationMenu"
|
||||
|
||||
import styles from "./menu.module.css"
|
||||
|
||||
export function Menu() {
|
||||
const lang = useLang()
|
||||
const checkIfMobile = useMediaQuery("(max-width: 767px)")
|
||||
const [isMobile, setIsMobile] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
setIsMobile(checkIfMobile)
|
||||
}, [checkIfMobile])
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<Link href={`/${lang}`}>
|
||||
<Image
|
||||
alt="SAS logotype"
|
||||
className={styles.logo}
|
||||
src="/_static/img/sas-logotype-white.svg"
|
||||
height={32}
|
||||
width={90}
|
||||
sizes="100vw"
|
||||
/>
|
||||
</Link>
|
||||
{isMobile ? (
|
||||
<MobileMenu>
|
||||
<NavigationMenu isMobile={true} />
|
||||
</MobileMenu>
|
||||
) : (
|
||||
<NavigationMenu isMobile={false} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
18
apps/partner-sas/components/Menu/menu.module.css
Normal file
18
apps/partner-sas/components/Menu/menu.module.css
Normal file
@@ -0,0 +1,18 @@
|
||||
.container {
|
||||
background-color: var(--TEMP-sas-default);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--Space-x2);
|
||||
justify-content: space-between;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
padding: 20px 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: auto;
|
||||
width: 90px;
|
||||
display: block;
|
||||
}
|
||||
6
apps/partner-sas/components/Menu/utils.ts
Normal file
6
apps/partner-sas/components/Menu/utils.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
export function getInitials(firstName: string, lastName: string) {
|
||||
if (!firstName || !lastName) return null
|
||||
const firstInitial = firstName.charAt(0).toUpperCase()
|
||||
const lastInitial = lastName.charAt(0).toUpperCase()
|
||||
return `${firstInitial}${lastInitial}`
|
||||
}
|
||||
Reference in New Issue
Block a user