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

apps/scandic-web/components/MyPages/Sidebar/SidebarNavigationSkeleton.tsx

@@ -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>
-  )
-}

apps/scandic-web/components/MyPages/Sidebar/index.tsx

@@ -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>
-    </>
-  )
-}

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

@@ -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);
-  }
-}