From 6965effcc20bdb4e36c7e5bf2f9b7dba4546c4de Mon Sep 17 00:00:00 2001 From: "Chuma Mcphoy (We Ahead)" Date: Thu, 26 Jun 2025 14:25:17 +0000 Subject: [PATCH] Merged in feat/LOY-261-Remove-Sidebar-From-MyPages (pull request #2380) 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 --- .../my-pages/@breadcrumbs/[...path]/page.tsx | 2 +- .../(protected)/my-pages/layout.module.css | 18 ++- .../(live)/(protected)/my-pages/layout.tsx | 19 +-- .../@breadcrumbs/loyalty_page/[uid]/page.tsx | 7 +- .../ContentType/LoyaltyPage/index.tsx | 13 ++- .../LoyaltyPage/loyaltyPage.module.css | 4 + .../Sidebar/SidebarNavigationSkeleton.tsx | 35 ------ .../components/MyPages/Sidebar/index.tsx | 108 ------------------ .../MyPages/Sidebar/sidebar.module.css | 28 ----- .../components/Sidebar/MyPagesNavigation.tsx | 18 --- apps/scandic-web/components/Sidebar/index.tsx | 3 - .../TempDesignSystem/Link/link.module.css | 28 ----- .../TempDesignSystem/Link/variants.ts | 13 --- 13 files changed, 38 insertions(+), 258 deletions(-) delete mode 100644 apps/scandic-web/components/MyPages/Sidebar/SidebarNavigationSkeleton.tsx delete mode 100644 apps/scandic-web/components/MyPages/Sidebar/index.tsx delete mode 100644 apps/scandic-web/components/MyPages/Sidebar/sidebar.module.css delete mode 100644 apps/scandic-web/components/Sidebar/MyPagesNavigation.tsx diff --git a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx index 52bdc5a73..56914149c 100644 --- a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx +++ b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx @@ -8,7 +8,7 @@ import type { LangParams, PageArgs } from "@/types/params" export default function AllBreadcrumbs({}: PageArgs) { return ( }> - + ) } diff --git a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/layout.module.css b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/layout.module.css index 80f59d6f4..661e8544d 100644 --- a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/layout.module.css +++ b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/layout.module.css @@ -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%; } diff --git a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/layout.tsx b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/layout.tsx index fe274baf6..9ac929b92 100644 --- a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/layout.tsx +++ b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/layout.tsx @@ -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 (
{breadcrumbs} -
- }> - - - {children} -
+
{children}
+ {eurobonusMembership && }
) diff --git a/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/loyalty_page/[uid]/page.tsx b/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/loyalty_page/[uid]/page.tsx index 7d655fb07..a871de478 100644 --- a/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/loyalty_page/[uid]/page.tsx +++ b/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/loyalty_page/[uid]/page.tsx @@ -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 ( }> - + ) } diff --git a/apps/scandic-web/components/ContentType/LoyaltyPage/index.tsx b/apps/scandic-web/components/ContentType/LoyaltyPage/index.tsx index 2a78f473d..25e71217d 100644 --- a/apps/scandic-web/components/ContentType/LoyaltyPage/index.tsx +++ b/apps/scandic-web/components/ContentType/LoyaltyPage/index.tsx @@ -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 ( <> -
- {loyaltyPage.sidebar?.length ? ( +
+ {showSidebar ? ( }> diff --git a/apps/scandic-web/components/ContentType/LoyaltyPage/loyaltyPage.module.css b/apps/scandic-web/components/ContentType/LoyaltyPage/loyaltyPage.module.css index 0d63965ea..99165231e 100644 --- a/apps/scandic-web/components/ContentType/LoyaltyPage/loyaltyPage.module.css +++ b/apps/scandic-web/components/ContentType/LoyaltyPage/loyaltyPage.module.css @@ -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"; diff --git a/apps/scandic-web/components/MyPages/Sidebar/SidebarNavigationSkeleton.tsx b/apps/scandic-web/components/MyPages/Sidebar/SidebarNavigationSkeleton.tsx deleted file mode 100644 index 53be2b5a4..000000000 --- a/apps/scandic-web/components/MyPages/Sidebar/SidebarNavigationSkeleton.tsx +++ /dev/null @@ -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 ( - - ) -} diff --git a/apps/scandic-web/components/MyPages/Sidebar/index.tsx b/apps/scandic-web/components/MyPages/Sidebar/index.tsx deleted file mode 100644 index 84b0e476d..000000000 --- a/apps/scandic-web/components/MyPages/Sidebar/index.tsx +++ /dev/null @@ -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 ( - - ) -} - -async function PrimaryLinks() { - const caller = await serverClient() - const nav = await caller.navigation.myPages({}) - - return ( - <> - -
    - {nav?.primaryLinks.map((link) => ( -
  • - - {link.text} - -
    • - ))} -
- - ) -} - -async function SecondaryLinks() { - const lang = await getLang() - - const caller = await serverClient() - const nav = await caller.navigation.myPages({}) - const intl = await getIntl() - - return ( - <> - -
    - {nav?.secondaryLinks.map((link) => ( -
  • - - {link.text} - -
    • - ))} -
  • - - {intl.formatMessage({ - defaultMessage: "Log out", - })} - -
    • -
- - ) -} diff --git a/apps/scandic-web/components/MyPages/Sidebar/sidebar.module.css b/apps/scandic-web/components/MyPages/Sidebar/sidebar.module.css deleted file mode 100644 index 5c04b38e3..000000000 --- a/apps/scandic-web/components/MyPages/Sidebar/sidebar.module.css +++ /dev/null @@ -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); - } -} diff --git a/apps/scandic-web/components/Sidebar/MyPagesNavigation.tsx b/apps/scandic-web/components/Sidebar/MyPagesNavigation.tsx deleted file mode 100644 index 860d91839..000000000 --- a/apps/scandic-web/components/Sidebar/MyPagesNavigation.tsx +++ /dev/null @@ -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 ( - }> - - - ) -} diff --git a/apps/scandic-web/components/Sidebar/index.tsx b/apps/scandic-web/components/Sidebar/index.tsx index ca27ba6de..bdc5d9445 100644 --- a/apps/scandic-web/components/Sidebar/index.tsx +++ b/apps/scandic-web/components/Sidebar/index.tsx @@ -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 case DynamicContentEnum.Sidebar.components .employee_benefits_auth_card: return ( diff --git a/apps/scandic-web/components/TempDesignSystem/Link/link.module.css b/apps/scandic-web/components/TempDesignSystem/Link/link.module.css index 7a3817518..5591a3714 100644 --- a/apps/scandic-web/components/TempDesignSystem/Link/link.module.css +++ b/apps/scandic-web/components/TempDesignSystem/Link/link.module.css @@ -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); diff --git a/apps/scandic-web/components/TempDesignSystem/Link/variants.ts b/apps/scandic-web/components/TempDesignSystem/Link/variants.ts index 1516884e8..3874903b9 100644 --- a/apps/scandic-web/components/TempDesignSystem/Link/variants.ts +++ b/apps/scandic-web/components/TempDesignSystem/Link/variants.ts @@ -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", - }, - ], })