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
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user