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

Merged in feat/LOY-261-Remove-Sidebar-From-MyPages (pull request #2380)

Browse Source 
Feat/LOY-261 Remove Sidebar From MyPages

* feat(LOY-261): remove sidebar from my pages

* refactor(LOY-261): move SASLevelUpgradeCheck to my-pages layout and remove unused code

* chore(LOY-261): remove console logs

* fix(LOY-261): remove sidebar and center content in Loyalty Pages when logged in

* fix(LOY-261): better class naming for content width


Approved-by: Christian Andolf
Approved-by: Erik Tiekstra
This commit is contained in:
Chuma Mcphoy (We Ahead)
2025-06-26 14:25:17 +00:00
parent 133f7b3d75
commit 6965effcc2
13 changed files with 38 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx
View File

@@ -8,7 +8,7 @@ import type { LangParams, PageArgs } from "@/types/params"
export default function AllBreadcrumbs({}: PageArgs<LangParams>) {
return (
<Suspense fallback={<BreadcrumbsSkeleton />}>
<Breadcrumbs />
<Breadcrumbs size="contentWidth" />
</Suspense>
)
}

18
apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/layout.module.css
View File

@@ -1,3 +1,7 @@
.container {
background-color: var(--Background-Primary);
}
.layout {
display: grid;
font-family: var(--typography-Body-Regular-fontFamily);
@@ -8,19 +12,11 @@
width: 100%;
}
.container {
background-color: var(--Background-Primary);
}
.content {
display: grid;
padding-bottom: var(--Spacing-x9);
position: relative;
}
@media screen and (min-width: 1367px) {
.content {
gap: var(--Spacing-x5);
grid-template-columns: max(340px) 1fr;
}
max-width: var(--max-width-content);
margin: 0 auto;
width: 100%;
}

19
apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/layout.tsx
View File

@@ -1,8 +1,8 @@
import { Suspense } from "react"
import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
import Sidebar from "@/components/MyPages/Sidebar"
import SidebarNavigationSkeleton from "@/components/MyPages/Sidebar/SidebarNavigationSkeleton"
import { SASLevelUpgradeCheck } from "@/components/MyPages/SASLevelUpgradeCheck"
import Surprises from "@/components/MyPages/Surprises"
import { getEurobonusMembership } from "@/utils/user"
import styles from "./layout.module.css"
@@ -12,18 +12,19 @@ export default async function MyPagesLayout({
}: React.PropsWithChildren<{
breadcrumbs: React.ReactNode
}>) {
const profile = await getProfileSafely()
const eurobonusMembership = profile?.loyalty
? getEurobonusMembership(profile.loyalty)
: null
return (
<div className={styles.container}>
<div className={styles.layout}>
{breadcrumbs}
<div className={styles.content}>
<Suspense fallback={<SidebarNavigationSkeleton />}>
<Sidebar />
</Suspense>
{children}
</div>
<div className={styles.content}>{children}</div>
</div>
{eurobonusMembership && <SASLevelUpgradeCheck />}
<Surprises />
</div>
)

7
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/loyalty_page/[uid]/page.tsx
View File

@@ -2,11 +2,14 @@ import { Suspense } from "react"
import Breadcrumbs from "@/components/Breadcrumbs"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
import { isLoggedInUser } from "@/utils/isLoggedInUser"
export default async function LoyaltyPageBreadcrumbs() {
const isUserLoggedIn = await isLoggedInUser()
export default function LoyaltyPageBreadcrumbs() {
return (
<Suspense fallback={<BreadcrumbsSkeleton />}>
<Breadcrumbs />
<Breadcrumbs {...(isUserLoggedIn && { size: "contentWidth" })} />
</Suspense>
)
}

13
apps/scandic-web/components/ContentType/LoyaltyPage/index.tsx
View File

@@ -1,3 +1,4 @@
import { cx } from "class-variance-authority"
import { Suspense } from "react"
import { serverClient } from "@/lib/trpc/server"
@@ -10,12 +11,14 @@ import SidebarSkeleton from "@/components/Sidebar/SidebarSkeleton"
import Preamble from "@/components/TempDesignSystem/Text/Preamble"
import Title from "@/components/TempDesignSystem/Text/Title"
import TrackingSDK from "@/components/TrackingSDK"
import { isLoggedInUser } from "@/utils/isLoggedInUser"
import styles from "./loyaltyPage.module.css"
export default async function LoyaltyPage() {
const caller = await serverClient()
const loyaltyPageRes = await caller.contentstack.loyaltyPage.get()
const isUserLoggedIn = await isLoggedInUser()
if (!loyaltyPageRes) {
return null
@@ -23,10 +26,16 @@ export default async function LoyaltyPage() {
const { tracking, loyaltyPage } = loyaltyPageRes
const heroImage = loyaltyPage.heroImage
const showSidebar = loyaltyPage.sidebar?.length && !isUserLoggedIn
return (
<>
<section className={styles.content}>
{loyaltyPage.sidebar?.length ? (
<section
className={cx(styles.content, {
[styles.contentWidth]: isUserLoggedIn,
})}
>
{showSidebar ? (
<Suspense fallback={<SidebarSkeleton />}>
<Sidebar blocks={loyaltyPage.sidebar} />
</Suspense>

4
apps/scandic-web/components/ContentType/LoyaltyPage/loyaltyPage.module.css
View File

@@ -26,6 +26,10 @@
gap: var(--Spacing-x4);
}
.contentWidth {
max-width: var(--max-width-content);
}
@media screen and (min-width: 1367px) {
.content:has(> aside) {
grid-template-areas: "sidebar main";

35
apps/scandic-web/components/MyPages/Sidebar/SidebarNavigationSkeleton.tsx
View File

@@ -1,35 +0,0 @@
import { Fragment } from "react"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Link from "@/components/TempDesignSystem/Link"
import styles from "./sidebar.module.css"
export default function SidebarNavigationSkeleton() {
const skeletonWidths = ["8ch", "10ch", "9ch", "12ch", "24ch", "10ch", "8ch"]
return (
<aside className={styles.sidebar}>
<nav className={styles.nav}>
<Typography variant="Title/Subtitle/md">
<SkeletonShimmer width="10ch" />
</Typography>
<Divider />
<ul className={styles.list}>
{skeletonWidths.map((width, index) => (
<Fragment key={index}>
{index === 4 && <Divider />}
<li>
<Link href="" size="regular" variant="sidebar">
<SkeletonShimmer width={width} />
</Link>
</li>
</Fragment>
))}
</ul>
</nav>
</aside>
)
}

108
apps/scandic-web/components/MyPages/Sidebar/index.tsx
View File

@@ -1,108 +0,0 @@
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { logout } from "@/constants/routes/handleAuth"
import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
import { serverClient } from "@/lib/trpc/server"
import { SASLevelUpgradeCheck } from "@/components/MyPages/SASLevelUpgradeCheck"
import Link from "@/components/TempDesignSystem/Link"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import { getEurobonusMembership } from "@/utils/user"
import styles from "./sidebar.module.css"
export default async function SidebarMyPages() {
const intl = await getIntl()
const profile = await getProfileSafely()
const eurobonusMembership = profile?.loyalty
? getEurobonusMembership(profile.loyalty)
: null
return (
<aside className={styles.sidebar}>
<nav className={styles.nav}>
<Typography variant="Title/Subtitle/md">
<h2 className={styles.title}>
{intl.formatMessage({
defaultMessage: "My pages",
})}
</h2>
</Typography>
<PrimaryLinks />
<SecondaryLinks />
</nav>
{eurobonusMembership && <SASLevelUpgradeCheck />}
</aside>
)
}
async function PrimaryLinks() {
const caller = await serverClient()
const nav = await caller.navigation.myPages({})
return (
<>
<Divider />
<ul className={styles.list}>
{nav?.primaryLinks.map((link) => (
<li key={link.href}>
<Link
href={link.href}
partialMatch
prefetch={true}
size="regular"
variant="sidebar"
>
{link.text}
</Link>
</li>
))}
</ul>
</>
)
}
async function SecondaryLinks() {
const lang = await getLang()
const caller = await serverClient()
const nav = await caller.navigation.myPages({})
const intl = await getIntl()
return (
<>
<Divider />
<ul className={styles.list}>
{nav?.secondaryLinks.map((link) => (
<li key={link.href}>
<Link
href={link.href}
partialMatch
prefetch={true}
size="small"
variant="sidebar"
>
{link.text}
</Link>
</li>
))}
<li>
<Link
href={logout[lang]}
partialMatch
prefetch={false}
size="small"
variant="sidebar"
>
{intl.formatMessage({
defaultMessage: "Log out",
})}
</Link>
</li>
</ul>
</>
)
}

28
apps/scandic-web/components/MyPages/Sidebar/sidebar.module.css
View File

@@ -1,28 +0,0 @@
.sidebar {
display: none;
}
.nav {
display: grid;
gap: var(--Space-x2);
}
.title {
color: var(--Text-Interactive-Default);
}
.titleSkeleton {
color: var(--Base-Text-High-contrast);
}
.list {
list-style: none;
}
@media screen and (min-width: 1367px) {
.sidebar {
align-self: flex-start;
display: block;
padding-top: var(--Space-x1);
}
}

18
apps/scandic-web/components/Sidebar/MyPagesNavigation.tsx
View File

@@ -1,18 +0,0 @@
import { Suspense } from "react"
import MyPagesSidebar from "@/components/MyPages/Sidebar"
import { isLoggedInUser } from "@/utils/isLoggedInUser"
import SidebarNavigationSkeleton from "../MyPages/Sidebar/SidebarNavigationSkeleton"
export default async function MyPagesNavigation() {
const isLoggedIn = await isLoggedInUser()
if (!isLoggedIn) {
return null
}
return (
<Suspense fallback={<SidebarNavigationSkeleton />}>
<MyPagesSidebar />
</Suspense>
)
}

3
apps/scandic-web/components/Sidebar/index.tsx
View File

@@ -8,7 +8,6 @@ import ShortcutsList from "../Blocks/ShortcutsList"
import Card from "../TempDesignSystem/Card"
import TeaserCard from "../TempDesignSystem/TeaserCard"
import JoinLoyaltyContact from "./JoinLoyalty"
import MyPagesNavigation from "./MyPagesNavigation"
import styles from "./sidebar.module.css"
@@ -29,8 +28,6 @@ export default function Sidebar({ blocks }: SidebarProps) {
)
case SidebarEnums.blocks.DynamicContent:
switch (block.dynamic_content.component) {
case DynamicContentEnum.Sidebar.components.my_pages_navigation:
return <MyPagesNavigation key={`${block.typename}-${idx}`} />
case DynamicContentEnum.Sidebar.components
.employee_benefits_auth_card:
return (

28
apps/scandic-web/components/TempDesignSystem/Link/link.module.css
View File

@@ -117,34 +117,6 @@
}
}
.sidebar {
display: flex;
align-items: center;
border-radius: var(--Corner-radius-md);
gap: var(--Space-x1);
padding: var(--Space-x1);
&.active {
background-color: var(--Base-Surface-Primary-dark-Hover);
&.regular {
font-family: var(--typography-Body-Bold-fontFamily);
font-size: var(--typography-Body-Bold-fontSize);
font-weight: 500;
letter-spacing: var(--typography-Body-Bold-letterSpacing);
line-height: var(--typography-Body-Bold-lineHeight);
}
&.small {
font-family: var(--typography-Caption-Bold-fontFamily);
font-size: var(--typography-Caption-Bold-fontSize);
font-weight: 500;
letter-spacing: var(--typography-Caption-Bold-letterSpacing);
line-height: var(--typography-Caption-Bold-lineHeight);
}
}
}
.regular {
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);

13
apps/scandic-web/components/TempDesignSystem/Link/variants.ts
View File

@@ -34,7 +34,6 @@ export const linkVariants = cva(styles.link, {
navigation: styles.navigation,
menu: styles.menu,
shortcut: styles.shortcut,
sidebar: styles.sidebar,
languageSwitcher: styles.languageSwitcher,
},
},
@@ -42,16 +41,4 @@ export const linkVariants = cva(styles.link, {
color: "Text/Interactive/Default",
size: "regular",
},
compoundVariants: [
{
active: true,
size: "regular",
variant: "sidebar",
},
{
active: true,
size: "small",
variant: "sidebar",
},
],
})