scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in feat/SW-2782-create-sas-branded-header (pull request #2878)

Browse Source 
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
2025-10-06 08:46:26 +00:00
parent e18bba79c6
commit d3368e9b85
27 changed files with 985 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
apps/partner-sas/components/Header/Header.tsx
View File

@@ -1,78 +1,17 @@
"use client"
import { useSession } from "next-auth/react"
import Image from "@scandic-hotels/design-system/Image"
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 { Menu } from "../Menu"
import { PoweredByScandic } from "../PoweredByScandic/PoweredByScandic"
import styles from "./header.module.css"
export function Header() {
const lang = useLang()
const session = useSession()
const {
data: profileData,
isLoading,
isSuccess,
} = trpc.partner.sas.getEuroBonusProfile.useQuery(undefined, {
enabled: session.status === "authenticated",
})
return (
<>
<header className={styles.header}>
<Image
alt="SAS logotype"
className={styles.logo}
src="/_static/img/sas-logotype-white.svg"
height={32}
width={90}
sizes="100vw"
/>
{session.status === "loading" && (
<SkeletonShimmer width={"12ch"} height={"1ch"} />
)}
{session.status === "unauthenticated" && (
/** For some reason it complains about RSC-payload if using <Link /> */
<a href={`/${lang}/login?redirectTo=${window?.location.href}`}>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{"Login here"}
</a>
)}
{session.status === "authenticated" && (
<div>
<Typography variant="Body/Supporting text (caption)/smBold">
<span>
{session.data?.user && <>{session.data.user.email}</>}
</span>
</Typography>
{isLoading && <SkeletonShimmer width={"6ch"} height={"1ch"} />}
{isSuccess && profileData && (
<Typography variant="Body/Supporting text (caption)/smBold">
<span>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{profileData.points.total} Points
</span>
</Typography>
)}
<Link color={"white"} href={`/${lang}/logout`} prefetch={false}>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{"Logout"}
</Link>
</div>
)}
<Menu />
<div className={styles.poweredBy}>
<PoweredByScandic />
</div>
</header>
<div className={styles.poweredBy}>
<PoweredByScandic />
</div>
</>
)
}