fix(SW-184): added membership level and points to menu

2024-08-29 14:59:21 +02:00
parent e03e954387
commit 79b4c3fe12
14 changed files with 58 additions and 20 deletions
--- a/app/globals.css
+++ b/app/globals.css
@@ -102,7 +102,7 @@
  --max-width: 94.5rem;
  --max-width-content: 74.75rem;
  --max-width-text-block: 49.5rem;
-  --mobile-site-header-height: 70.047px;
+  --current-mobile-site-header-height: 70.047px;
  --max-width-navigation: 89.5rem;

  --main-menu-mobile-height: 75px;
--- a/components/Current/Header/MainMenu/mainMenu.module.css
+++ b/components/Current/Header/MainMenu/mainMenu.module.css
@@ -8,7 +8,7 @@
  top: 0;
  width: 100%;
  z-index: 99999;
-  height: var(--mobile-site-header-height);
+  height: var(--current-mobile-site-header-height);
 }

 .container {
--- a/components/Current/Header/header.module.css
+++ b/components/Current/Header/header.module.css
@@ -4,6 +4,6 @@

@media screen and (max-width: 1366px) {
  .header {
-    height: var(--mobile-site-header-height);
+    height: var(--current-mobile-site-header-height);
  }
 }
--- a/components/Header/MainMenu/MyPagesMenu/index.tsx
+++ b/components/Header/MainMenu/MyPagesMenu/index.tsx
@@ -18,7 +18,11 @@ import styles from "./myPagesMenu.module.css"

 import type { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"

-export default function MyPagesMenu({ navigation, user }: MyPagesMenuProps) {
+export default function MyPagesMenu({
+  membership,
+  navigation,
+  user,
+}: MyPagesMenuProps) {
  const intl = useIntl()
  const lang = useLang()
  const { toggleMyPagesMenu, isMyPagesMenuOpen } = useDropdownStore()
@@ -46,6 +50,7 @@ export default function MyPagesMenu({ navigation, user }: MyPagesMenuProps) {
          <MyPagesMenuContent
            navigation={navigation}
            user={user}
+            membership={membership}
            toggleOpenStateFn={toggleMyPagesMenu}
          />
        </div>
--- a/components/Header/MainMenu/MyPagesMenuContent/index.tsx
+++ b/components/Header/MainMenu/MyPagesMenuContent/index.tsx
@@ -3,6 +3,7 @@
 import Link from "next/link"
 import { useIntl } from "react-intl"

+import { MembershipLevelEnum } from "@/constants/membershipLevels"
 import { logout } from "@/constants/routes/handleAuth"

 import { ArrowRightIcon } from "@/components/Icons"
@@ -11,12 +12,14 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 import { useTrapFocus } from "@/hooks/useTrapFocus"
+import { getMembershipLevelObject } from "@/utils/membershipLevel"

 import styles from "./myPagesMenuContent.module.css"

 import type { MyPagesMenuContentProps } from "@/types/components/header/myPagesMenu"

 export default function MyPagesMenuContent({
+  membership,
  navigation,
  toggleOpenStateFn,
  user,
@@ -25,20 +28,35 @@ export default function MyPagesMenuContent({
  const lang = useLang()
  const myPagesMenuContentRef = useTrapFocus()

+  const membershipLevel = membership?.membershipLevel
+    ? getMembershipLevelObject(
+        membership.membershipLevel as MembershipLevelEnum,
+        lang
+      )
+    : null
+  const membershipPoints = membership?.currentPoints
+  const introClassName =
+    membershipLevel && membershipPoints
+      ? `${styles.intro}`
+      : `${styles.intro} ${styles.noMembership}`
  if (!navigation) {
    return null
  }

  return (
    <nav className={styles.myPagesMenuContent} ref={myPagesMenuContentRef}>
-      <div className={styles.intro}>
+      <div className={introClassName}>
        <Subtitle type="two" className={styles.userName}>
          {intl.formatMessage({ id: "Hi" })} {user.firstName}!
        </Subtitle>
-        <Caption className={styles.friendTypeWrapper}>
-          <span className={styles.friendType}>Loyal friend</span>
-          <span className={styles.friendPoints}>12 350 points</span>
-        </Caption>
+        {membershipLevel && membershipPoints ? (
+          <Caption className={styles.friendTypeWrapper}>
+            <span className={styles.friendType}>{membershipLevel.name}</span>
+            <span className={styles.friendPoints}>
+              {membershipPoints} {intl.formatMessage({ id: "points" })}
+            </span>
+          </Caption>
+        ) : null}
      </div>

      <ul className={styles.groups}>
--- a/components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css
+++ b/components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css
@@ -68,6 +68,7 @@
  .myPagesMenuContent {
    padding: var(--Spacing-x2) var(--Spacing-x4);
  }
+  .intro.noMembership,
  .userName {
    display: none;
  }
--- a/components/Header/MainMenu/MyPagesMobileMenu/index.tsx
+++ b/components/Header/MainMenu/MyPagesMobileMenu/index.tsx
@@ -17,6 +17,7 @@ import styles from "./myPagesMobileMenu.module.css"
 import type { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"

 export default function MyPagesMobileMenu({
+  membership,
  navigation,
  user,
 }: MyPagesMenuProps) {
@@ -45,6 +46,7 @@ export default function MyPagesMobileMenu({
          aria-label={intl.formatMessage({ id: "My pages menu" })}
        >
          <MyPagesMenuContent
+            membership={membership}
            navigation={navigation}
            user={user}
            toggleOpenStateFn={toggleMyPagesMobileMenu}
--- a/components/Header/MainMenu/index.tsx
+++ b/components/Header/MainMenu/index.tsx
@@ -26,6 +26,7 @@ export default async function MainMenu({ languageUrls }: MainMenuProps) {
    await serverClient().contentstack.myPages.navigation.get()

  const user = await serverClient().user.name()
+  const membership = await serverClient().user.membershipLevel()

  return (
    <div className={styles.mainMenu}>
@@ -46,8 +47,16 @@ export default async function MainMenu({ languageUrls }: MainMenuProps) {
          <NavigationMenu items={navigationMenuItems} />
          {user ? (
            <>
-              <MyPagesMenu navigation={myPagesNavigation} user={user} />
-              <MyPagesMobileMenu navigation={myPagesNavigation} user={user} />
+              <MyPagesMenu
+                membership={membership}
+                navigation={myPagesNavigation}
+                user={user}
+              />
+              <MyPagesMobileMenu
+                membership={membership}
+                navigation={myPagesNavigation}
+                user={user}
+              />
            </>
          ) : (
            <Link
--- a/components/Lightbox/Lightbox.module.css
+++ b/components/Lightbox/Lightbox.module.css
@@ -3,7 +3,7 @@
 }

 .mobileGallery {
-  margin-top: var(--mobile-site-header-height);
+  margin-top: var(--current-mobile-site-header-height);
  height: 100%;
  position: relative;
  display: flex;
@@ -112,7 +112,7 @@
 }

 .fullViewContainer {
-  margin-top: var(--mobile-site-header-height);
+  margin-top: var(--current-mobile-site-header-height);
  background-color: var(--UI-Text-High-contrast);
  height: 100%;
  padding: var(--Spacing-x2);
--- a/components/TempDesignSystem/SidePeek/sidePeek.module.css
+++ b/components/TempDesignSystem/SidePeek/sidePeek.module.css
@@ -1,10 +1,10 @@
 .sidePeek {
  position: fixed;
-  top: var(--mobile-site-header-height);
+  top: var(--current-mobile-site-header-height);
  right: auto;
  bottom: 0;
  width: 100%;
-  height: calc(100vh - var(--mobile-site-header-height));
+  height: calc(100vh - var(--current-mobile-site-header-height));
  background-color: var(--Base-Background-Primary-Normal);
  z-index: 100;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.85);
@@ -24,7 +24,7 @@

 .overlay {
  position: absolute;
-  top: var(--mobile-site-header-height);
+  top: var(--current-mobile-site-header-height);
  bottom: 0;
  left: 0;
  right: 0;
@@ -46,7 +46,7 @@
  }

  to {
-    top: var(--mobile-site-header-height);
+    top: var(--current-mobile-site-header-height);
  }
 }

--- a/i18n/dictionaries/da.json
+++ b/i18n/dictionaries/da.json
@@ -137,7 +137,7 @@
  "Phone number": "Telefonnummer",
  "Please enter a valid phone number": "Indtast venligst et gyldigt telefonnummer",
  "Points": "Point",
-  "points": "Point",
+  "points": "point",
  "Points being calculated": "Point udregnes",
  "Points earned prior to May 1, 2021": "Point optjent inden 1. maj 2021",
  "Points may take up to 10 days to be displayed.": "Det kan tage op til 10 dage at få vist point.",
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -142,7 +142,7 @@
  "Phone number": "Phone number",
  "Please enter a valid phone number": "Please enter a valid phone number",
  "Points": "Points",
-  "points": "Points",
+  "points": "points",
  "Points being calculated": "Points being calculated",
  "Points earned prior to May 1, 2021": "Points earned prior to May 1, 2021",
  "Points may take up to 10 days to be displayed.": "Points may take up to 10 days to be displayed.",
--- a/i18n/dictionaries/no.json
+++ b/i18n/dictionaries/no.json
@@ -136,7 +136,7 @@
  "Phone is required": "Telefon kreves",
  "Phone number": "Telefonnummer",
  "Please enter a valid phone number": "Vennligst oppgi et gyldig telefonnummer",
-  "points": "Poeng",
+  "points": "poeng",
  "Points": "Poeng",
  "Points being calculated": "Poeng beregnes",
  "Points earned prior to May 1, 2021": "Opptjente poeng før 1. mai 2021",
--- a/types/components/header/myPagesMenu.ts
+++ b/types/components/header/myPagesMenu.ts
@@ -1,5 +1,7 @@
 import { navigationQueryRouter } from "@/server/routers/contentstack/myPages/navigation/query"

+import { MembershipLevel } from "@/utils/user"
+
 import type { User } from "@/types/user"

 type MyPagesNavigation = Awaited<
@@ -9,6 +11,7 @@ type MyPagesNavigation = Awaited<
 export interface MyPagesMenuProps {
  navigation: MyPagesNavigation
  user: Pick<User, "firstName" | "lastName">
+  membership: MembershipLevel | null | undefined
 }

 export interface MyPagesMenuContentProps extends MyPagesMenuProps {