feat(WEB-154): my profile view

components/MyPages/Blocks/Challenges/index.tsx

@@ -3,7 +3,7 @@ import Title from "@/components/MyPages/Title"
 
 import styles from "./challenges.module.css"
 
-import type { ChallengesProps } from "@/types/components/myPages/challenges"
+import type { ChallengesProps } from "@/types/components/myPages/myPage/challenges"
 
 export default function Challenges({ journeys, victories }: ChallengesProps) {
   return (

components/MyPages/Blocks/Overview/Friend/index.tsx

@@ -2,7 +2,7 @@ import Image from "@/components/Image"
 
 import styles from "./friend.module.css"
 
-import type { FriendProps } from "@/types/components/myPages/friend"
+import type { FriendProps } from "@/types/components/myPages/myPage/friend"
 
 export default function Friend({ user }: FriendProps) {
   return (

components/MyPages/Blocks/Overview/Stats/QualifyingPoints/index.tsx

@@ -3,7 +3,7 @@ import Image from "@/components/Image"
 
 import styles from "./points.module.css"
 
-import type { QualifyingPointsProps } from "@/types/components/myPages/qualifyingPoints"
+import type { QualifyingPointsProps } from "@/types/components/myPages/myPage/qualifyingPoints"
 
 export default function QualifyingPoints({ user }: QualifyingPointsProps) {
   return (

components/MyPages/Blocks/Overview/Stats/TotalPoints/index.tsx

@@ -3,7 +3,7 @@ import Title from "../Title"
 
 import styles from "./totalPoints.module.css"
 
-import type { TotalPointsProps } from "@/types/components/myPages/totalPoints"
+import type { TotalPointsProps } from "@/types/components/myPages/myPage/totalPoints"
 
 export default function TotalPoints({ user }: TotalPointsProps) {
   return (

components/MyPages/Blocks/Overview/Stats/index.tsx

@@ -3,7 +3,7 @@ import TotalPoints from "./TotalPoints"
 
 import styles from "./stats.module.css"
 
-import type { StatsProps } from "@/types/components/myPages/stats"
+import type { StatsProps } from "@/types/components/myPages/myPage/stats"
 
 export default function Stats({ user }: StatsProps) {
   return (

components/MyPages/Blocks/Overview/index.tsx

@@ -4,7 +4,7 @@ import Title from "@/components/MyPages/Title"
 
 import styles from "./overview.module.css"
 
-import type { OverviewProps } from "@/types/components/myPages/overview"
+import type { OverviewProps } from "@/types/components/myPages/myPage/overview"
 
 export default function Overview({ user }: OverviewProps) {
   return (

components/MyPages/Blocks/Shortcuts/index.tsx

@@ -4,7 +4,7 @@ import Title from "@/components/MyPages/Title"
 
 import styles from "./shortcuts.module.css"
 
-import type { ShortcutsProps } from "@/types/components/myPages/shortcuts"
+import type { ShortcutsProps } from "@/types/components/myPages/myPage/shortcuts"
 
 export default function Shortcuts({
   shortcuts,

components/MyPages/Blocks/UpcomingStays/Stay/index.tsx

@@ -6,7 +6,7 @@ import Title from "@/components/MyPages/Title"
 import styles from "./stay.module.css"
 
 import type { LangParams } from "@/types/params"
-import type { StayProps } from "@/types/components/myPages/stays"
+import type { StayProps } from "@/types/components/myPages/myPage/stays"
 
 export default function Stay({
   dateArrive,

components/MyPages/Blocks/UpcomingStays/index.tsx

@@ -4,7 +4,7 @@ import Title from "@/components/MyPages/Title"
 import styles from "./upcoming.module.css"
 
 import type { LangParams } from "@/types/params"
-import type { StaysProps } from "@/types/components/myPages/stays"
+import type { StaysProps } from "@/types/components/myPages/myPage/stays"
 import Link from "next/link"
 
 export default function UpcomingStays({

components/MyPages/Breadcrumbs/Client.tsx

@@ -0,0 +1,49 @@
+"use client"
+import { Fragment } from "react"
+import { usePathname } from "next/navigation"
+
+import Link from "@/components/TempDesignSystem/Link"
+
+import styles from "./breadcrumbs.module.css"
+
+import type { BreadcrumbsProps } from "@/types/components/myPages/breadcrumbs"
+
+export default function ClientBreadcrumbs({ breadcrumbs, lang }: BreadcrumbsProps) {
+  const pathname = usePathname()
+  /** Temp solution until we can get breadcrumbs from CS */
+  const path = pathname.replace(`/${lang}`, '')
+  const currentBreadcrumbs = breadcrumbs?.[path]
+  if (!currentBreadcrumbs?.length) {
+    return null
+  }
+
+  return (
+    <>
+      <li className={styles.listItem}>
+        <span>/</span>
+      </li>
+      {currentBreadcrumbs.map(breadcrumb => {
+        if (breadcrumb.href) {
+          return (
+            <Fragment key={breadcrumb.title}>
+              <li className={styles.listItem}>
+                <Link className={styles.link} href={breadcrumb.href}>
+                  {breadcrumb.title}
+                </Link>
+              </li>
+              <li className={styles.listItem}>
+                <span>/</span>
+              </li>
+            </Fragment>
+          )
+        }
+
+        return (
+          <li className={styles.listItem} key={breadcrumb.title}>
+            <p className={styles.currentPage}>{breadcrumb.title}</p>
+          </li>
+        )
+      })}
+    </>
+  )
+}

components/MyPages/Breadcrumbs/breadcrumbs.module.css

@@ -0,0 +1,40 @@
+.breadcrumbs {
+  background-color: var(--some-grey-color, #f2f2f2);
+  display: block;
+  padding-bottom: 0.8rem;
+  padding-left: 2rem;
+  padding-top: 3rem;
+  position: sticky;
+  top: var(--header-height);
+  z-index: 999;
+}
+
+.list {
+  align-items: center;
+  display: flex;
+  gap: 0.4rem;
+  justify-content: flex-start;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.listItem,
+.link {
+  color: var(--some-text-color, #000);
+  font-size: 1.4rem;
+  font-weight: 400;
+  line-height: 1.56rem;
+}
+
+.currentPage {
+  margin: 0;
+}
+
+@media screen and (min-width: 950px) {
+  .breadcrumbs {
+    background-color: var(--some-white-color, #fff);
+    padding-left: 2.4rem;
+    padding-top: 2rem;
+  }
+}

components/MyPages/Breadcrumbs/index.tsx

@@ -0,0 +1,21 @@
+import ClientBreadcrumbs from "./Client"
+import Link from "@/components/TempDesignSystem/Link"
+
+import styles from "./breadcrumbs.module.css"
+
+import type { BreadcrumbsProps } from "@/types/components/myPages/breadcrumbs"
+
+export default function Breadcrumbs({ breadcrumbs, lang }: BreadcrumbsProps) {
+  return (
+    <nav className={styles.breadcrumbs}>
+      <ul className={styles.list}>
+        <li className={styles.listItem}>
+          <Link className={styles.link} href="#">
+            Home
+          </Link>
+        </li>
+        <ClientBreadcrumbs breadcrumbs={breadcrumbs} lang={lang} />
+      </ul>
+    </nav>
+  )
+}

components/MyPages/Header/Breadcrumbs/breadcrumbs.module.css

@@ -1,25 +0,0 @@
-.list {
-  align-items: center;
-  display: flex;
-  gap: 0.4rem;
-  justify-content: flex-start;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.listItem,
-.link {
-  color: var(--some-text-color, #000);
-  font-size: 1.4rem;
-  font-weight: 400;
-  line-height: 1.56rem;
-}
-
-.link {
-  text-decoration: none;
-}
-
-.currentPage {
-  margin: 0;
-}

components/MyPages/Header/Breadcrumbs/index.tsx

@@ -1,23 +0,0 @@
-import Link from "next/link"
-
-import styles from "./breadcrumbs.module.css"
-
-export default function Breadcrumbs() {
-  return (
-    <nav className={styles.breadcrumbs}>
-      <ul className={styles.list}>
-        <li className={styles.listItem}>
-          <Link className={styles.link} href="#">
-            Home
-          </Link>
-        </li>
-        <li className={styles.listItem}>
-          <span>/</span>
-        </li>
-        <li className={styles.listItem}>
-          <p className={styles.currentPage}>My Scandic</p>
-        </li>
-      </ul>
-    </nav>
-  )
-}

components/MyPages/Header/header.module.css

@@ -1,9 +1,3 @@
-.container {
-  position: sticky;
-  top: 0;
-  z-index: 999;
-}
-
 .header {
   align-items: center;
   background-color: var(--some-white-color, #fff);
@@ -11,16 +5,12 @@
   display: grid;
   gap: 3rem;
   grid-template-columns: 1fr auto auto;
-  height: 7rem;
-  padding: 0 2rem;
-}
+  height: var(--header-height);
 
-.breadcrumbs {
-  background-color: var(--some-grey-color, #f2f2f2);
-  display: block;
-  padding-bottom: 0.8rem;
-  padding-left: 2rem;
-  padding-top: 3rem;
+  padding: 0 2rem;
+  position: sticky;
+  top: 0;
+  z-index: 999;
 }
 
 @media screen and (min-width: 950px) {
@@ -30,13 +20,6 @@
     box-shadow: none;
     gap: 3.2rem;
     grid-template-columns: 1fr 19rem auto auto;
-    height: 4.5rem;
     padding: 0 2.4rem;
   }
-
-  .breadcrumbs {
-    background-color: var(--some-white-color, #fff);
-    padding-left: 2.4rem;
-    padding-top: 2rem;
-  }
-}
+}

components/MyPages/Header/index.tsx

@@ -1,4 +1,3 @@
-import Breadcrumbs from "./Breadcrumbs"
 import Hamburger from "./Hamburger"
 import LanguageSwitcher from "./LanguageSwitcher"
 import Logo from "./Logo"
@@ -10,16 +9,11 @@ import type { LangParams } from "@/types/params"
 
 export default function Header({ lang }: LangParams) {
   return (
-    <div className={styles.container}>
-      <header className={styles.header}>
-        <Logo lang={lang} />
-        <LanguageSwitcher />
-        <User />
-        <Hamburger />
-      </header>
-      <div className={styles.breadcrumbs}>
-        <Breadcrumbs />
-      </div>
-    </div>
+    <header className={styles.header}>
+      <Logo lang={lang} />
+      <LanguageSwitcher />
+      <User />
+      <Hamburger />
+    </header>
   )
 }

components/MyPages/Sidebar/Client.tsx

@@ -0,0 +1,46 @@
+"use client"
+import { usePathname } from "next/navigation"
+
+import Link from "@/components/TempDesignSystem/Link"
+
+import type { LangParams } from "@/types/params"
+
+export default function ClientSidebar({ lang }: LangParams) {
+  const pathname = usePathname()
+  return (
+    <>
+      <Link
+        currentPath={pathname}
+        href={`/${lang}/my-pages`}
+        variant="sidebar"
+      >
+        My Pages
+      </Link>
+      <Link currentPath={pathname} href="#" variant="sidebar">
+        My Stays
+      </Link>
+      <Link currentPath={pathname} href="#" variant="sidebar">
+        My Points
+      </Link>
+      <Link currentPath={pathname} href="#" variant="sidebar">
+        My Benefits
+      </Link>
+      {/* <Link currentPath={pathname} href="#" variant="sidebar">
+          My Challenges
+        </Link>
+        <Link currentPath={pathname} href="#" variant="sidebar">
+          My Favourites
+        </Link> */}
+      <Link currentPath={pathname} href="#" variant="sidebar">
+        About Scandic Friends
+      </Link>
+      <Link
+        currentPath={pathname}
+        href={`/${lang}/my-pages/profile`}
+        variant="sidebar"
+      >
+        My Profile
+      </Link>
+    </>
+  )
+}

components/MyPages/Sidebar/index.tsx

@@ -1,10 +1,10 @@
-"use client"
+import { Fragment } from "react"
 import { LogOut } from "react-feather"
-import Link from "../../TempDesignSystem/Link"
+import Link from "@/components/TempDesignSystem/Link"
 
 import styles from "./sidebar.module.css"
-import { SidebarProps } from "@/types/requests/myPages/navigation"
-import { Fragment } from "react"
+
+import type { SidebarProps } from "@/types/requests/myPages/navigation"
 
 export default function Sidebar({ menuItems }: SidebarProps) {
   return (
@@ -17,16 +17,16 @@ export default function Sidebar({ menuItems }: SidebarProps) {
             </Link>
             {item.subItems
               ? item.subItems.map((subItem) => {
-                  return (
-                    <Link
-                      key={subItem.uid}
-                      href={subItem.url}
-                      variant={"sidebar"}
-                    >
-                      {subItem.linkText}
-                    </Link>
-                  )
-                })
+                return (
+                  <Link
+                    key={subItem.uid}
+                    href={subItem.url}
+                    variant={"sidebar"}
+                  >
+                    {subItem.linkText}
+                  </Link>
+                )
+              })
               : null}
           </Fragment>
         ))}

components/MyPages/Sidebar/sidebar.module.css

@@ -2,7 +2,7 @@
   align-self: flex-start;
   display: none;
   position: sticky;
-  top: 13.2rem;
+  top: 14.6rem;
 }
 
 .nav {
@@ -13,33 +13,8 @@
   padding-left: 4rem;
 }
 
-.link {
-  align-items: center;
-  color: var(--some-text-color, #111);
-  display: flex;
-  font-size: 1.6rem;
-  font-weight: 400;
-  gap: 0.6rem;
-  line-height: 1.9rem;
-  position: relative;
-  text-decoration: none;
-}
-
-.active {
-  font-weight: 600;
-}
-
-.active::before {
-  bottom: -0.4rem;
-  background-color: var(--some-text-color, #000);
-  content: "";
-  height: 0.2rem;
-  position: absolute;
-  width: 100%;
-}
-
 @media screen and (min-width: 950px) {
   .sidebar {
     display: block;
   }
-}
+}

components/MyPages/Title/index.tsx

@@ -1,41 +1,21 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./title.module.css"
+import { headingVariants } from "./variants"
 
 import type { HeadingProps } from "@/types/components/myPages/title"
 
-const config = {
-  variants: {
-    text: {
-      uppercase: styles.uppercase,
-    },
-    type: {
-      h1: styles.h1,
-      h2: styles.h2,
-      h3: styles.h3,
-      h4: styles.h4,
-      h5: styles.h5,
-    },
-  },
-  defaultVariants: {
-    type: "h1",
-  },
-} as const
-
-const headingStyles = cva(styles.heading, config)
-
 export default function Title({
   as,
   children,
   className = "",
   level = "h1",
   uppercase = false,
+  weight,
 }: HeadingProps) {
   const Hx = level
-  const classNames = headingStyles({
+  const classNames = headingVariants({
     className,
     text: uppercase ? "uppercase" : undefined,
     type: as ?? level,
+    weight,
   })
   return <Hx className={classNames}>{children}</Hx>
 }

components/MyPages/Title/title.module.css

@@ -1,5 +1,5 @@
 .heading {
-  font-weight: 900;
+  /* font-family: var(--ff-brandon-text); */
   margin: 0;
   padding: 0;
 }
@@ -33,6 +33,30 @@
   line-height: var(--typography-Title5-Mobile-lineHeight);
 }
 
+.light {
+  font-weight: 300;
+}
+
+.regular {
+  font-weight: 400;
+}
+
+.medium {
+  font-weight: 500;
+}
+
+.semiBold {
+  font-weight: 600;
+}
+
+.bold {
+  font-weight: 700;
+}
+
+.black {
+  font-weight: 900;
+}
+
 @media screen and (min-width: 950px) {
   .h1 {
     font-size: var(--typography-Title1-Desktop-fontSize);
@@ -58,4 +82,4 @@
     font-size: var(--typography-Title5-Desktop-fontSize);
     line-height: var(--typography-Title5-Desktop-lineHeight);
   }
-}
+}

components/MyPages/Title/variants.ts

@@ -0,0 +1,33 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./title.module.css"
+
+const config = {
+  variants: {
+    text: {
+      uppercase: styles.uppercase,
+    },
+    type: {
+      h1: styles.h1,
+      h2: styles.h2,
+      h3: styles.h3,
+      h4: styles.h4,
+      h5: styles.h5,
+      h6: styles.h6,
+    },
+    weight: {
+      light: styles.light,
+      regular: styles.regular,
+      medium: styles.medium,
+      semiBold: styles.semiBold,
+      bold: styles.bold,
+      black: styles.black,
+    },
+  },
+  defaultVariants: {
+    type: "h1",
+    weight: "black",
+  },
+} as const
+
+export const headingVariants = cva(styles.heading, config)