fix: add my pages nav sidebar for logged in users

2024-07-01 11:30:34 +02:00
parent 323df671d8
commit d206d576a7
13 changed files with 101 additions and 52 deletions
--- a/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css
+++ b/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css
@@ -2,6 +2,6 @@
  background-color: var(--Scandic-Brand-Warm-White);
  display: grid;
  font-family: var(--typography-Body-Regular-fontFamily);
-  gap: var(--Spacing-x5);
+  gap: var(--Spacing-x3);
  grid-template-rows: auto 1fr;
 }
--- a/components/ContentType/LoyaltyPage/loyaltyPage.module.css
+++ b/components/ContentType/LoyaltyPage/loyaltyPage.module.css
@@ -15,9 +15,9 @@

@media screen and (min-width: 1367px) {
  .content {
-    gap: var(--Spacing-x3);
-    padding-left: var(--Spacing-x3);
-    padding-right: var(--Spacing-x3);
+    gap: var(--Spacing-x5);
+    padding-left: var(--Spacing-x5);
+    padding-right: var(--Spacing-x5);
  }

  .content:has(> aside) {
--- a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx
+++ b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx
@@ -82,7 +82,7 @@ function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
  }
  return (
    <article className={styles.card}>
-      <section>
+      <header>
        <BiroScript
          type="two"
          color="primaryLightOnSurfaceAccent"
@@ -91,7 +91,7 @@ function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
          {formatMessage({ id: "Level" })} {level.level}
        </BiroScript>
        <Level color="red" />
-      </section>
+      </header>
      <Title textAlign="center" level="h5">
        {qualifications}
      </Title>
--- a/components/Loyalty/Sidebar/JoinLoyalty/index.tsx
+++ b/components/Loyalty/Sidebar/JoinLoyalty/index.tsx
@@ -1,5 +1,6 @@
 import { login } from "@/constants/routes/handleAuth"

+import { auth } from "@/auth"
 import ArrowRight from "@/components/Icons/ArrowRight"
 import { ScandicFriends } from "@/components/Levels"
 import Button from "@/components/TempDesignSystem/Button"
@@ -20,6 +21,11 @@ export default async function JoinLoyaltyContact({
  lang,
 }: JoinLoyaltyContactProps & LangParams) {
  const { formatMessage } = await getIntl()
+  const session = await auth()
+
+  if (session) {
+    return null
+  }
  return (
    <section>
      <article className={styles.wrapper}>
@@ -35,23 +41,21 @@ export default async function JoinLoyaltyContact({
        </Button>
        <section className={styles.loginContainer}>
          <Body>{formatMessage({ id: "Already a friend?" })}</Body>
-          <span className={styles.linkWrapper}>
+          <Link
+            className={styles.link}
+            color="burgundy"
+            href={`/${lang}/login`}
+            variant="icon"
+            size="small"
+          >
            <ArrowRight
              color="burgundy"
              className={styles.icon}
              height="20"
              width="20"
            />
-            <Link
-              className={styles.link}
-              color="burgundy"
-              href={`/${lang}/login`}
-              variant="icon"
-              size="small"
-            >
-              {formatMessage({ id: "Log in here" })}
-            </Link>
-          </span>
+            {formatMessage({ id: "Log in here" })}
+          </Link>
        </section>
      </article>
      {block.contact ? <Contact contactBlock={block.contact} /> : null}
--- a/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css
+++ b/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css
@@ -14,12 +14,6 @@
  width: fit-content;
 }

-.linkWrapper {
-  display: flex;
-  align-items: center;
-  gap: var(--Spacing-x-half);
-}
-
 .link {
  display: flex;
  align-items: center;
--- a/components/Loyalty/Sidebar/MyPagesNavigation/index.tsx
+++ b/components/Loyalty/Sidebar/MyPagesNavigation/index.tsx
@@ -0,0 +1,14 @@
+import { auth } from "@/auth"
+import MyPagesSidebar from "@/components/MyPages/Sidebar"
+
+import { LangParams } from "@/types/params"
+
+export default async function MyPagesNavigation({ lang }: LangParams) {
+  const session = await auth()
+
+  if (!session) {
+    return null
+  }
+
+  return <MyPagesSidebar lang={lang} />
+}
--- a/components/Loyalty/Sidebar/index.tsx
+++ b/components/Loyalty/Sidebar/index.tsx
@@ -1,10 +1,14 @@
 import JsonToHtml from "@/components/JsonToHtml"

 import JoinLoyaltyContact from "./JoinLoyalty"
+import MyPagesNavigation from "./MyPagesNavigation"

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

-import { SidebarTypenameEnum } from "@/types/components/loyalty/enums"
+import {
+  LoyaltySidebarDynamicComponentEnum,
+  SidebarTypenameEnum,
+} from "@/types/components/loyalty/enums"
 import { SidebarProps } from "@/types/components/loyalty/sidebar"
 import { LangParams } from "@/types/params"

@@ -36,6 +40,19 @@ export default function SidebarLoyalty({
                lang={lang}
              />
            )
+          case SidebarTypenameEnum.LoyaltyPageSidebarDynamicContent:
+            switch (block.dynamic_content.component) {
+              case LoyaltySidebarDynamicComponentEnum.my_pages_navigation:
+                return (
+                  <MyPagesNavigation
+                    key={`${block.__typename}-${idx}`}
+                    lang={lang}
+                  />
+                )
+              default:
+                return null
+            }
+
          default:
            return null
        }
--- a/components/TempDesignSystem/Link/link.module.css
+++ b/components/TempDesignSystem/Link/link.module.css
@@ -17,7 +17,7 @@
 .icon {
  align-items: center;
  display: flex;
-  gap: var(--Spacing-x1);
+  gap: var(--Spacing-x-half);
 }

 .myPage {
--- a/components/TempDesignSystem/LoyaltyCard/index.tsx
+++ b/components/TempDesignSystem/LoyaltyCard/index.tsx
@@ -26,15 +26,13 @@ export default function LoyaltyCard({
      })}
    >
      {image ? (
-        <section>
-          <Image
-            src={image.url}
-            width={180}
-            height={160}
-            className={styles.image}
-            alt={image.meta.alt || image.title}
-          />
-        </section>
+        <Image
+          src={image.url}
+          width={180}
+          height={160}
+          className={styles.image}
+          alt={image.meta.alt || image.title}
+        />
      ) : null}
      <Title as="h5" level="h3" textAlign="center">
        {heading}
@@ -46,18 +44,21 @@ export default function LoyaltyCard({
      ) : null}
      <div className={styles.buttonContainer}>
        {link ? (
-          <span className={styles.linkWrapper}>
-            <ArrowRight color="burgundy" className={styles.icon} />
-            <Link
-              className={styles.link}
+          <Link
+            className={styles.link}
+            color="burgundy"
+            href={link.href}
+            target={link.openInNewTab ? "_blank" : undefined}
+            variant="myPage"
+          >
+            <ArrowRight
              color="burgundy"
-              href={link.href}
-              target={link.openInNewTab ? "_blank" : undefined}
-              variant="myPage"
-            >
-              {link.title}
-            </Link>
-          </span>
+              className={styles.icon}
+              height="20"
+              width="20"
+            />
+            {link.title}
+          </Link>
        ) : null}
      </div>
    </article>
--- a/components/TempDesignSystem/LoyaltyCard/loyaltyCard.module.css
+++ b/components/TempDesignSystem/LoyaltyCard/loyaltyCard.module.css
@@ -15,6 +15,7 @@
  object-fit: contain;
  height: 160px;
  width: auto;
+  justify-self: center;
 }

 .white {
@@ -27,12 +28,6 @@
  justify-content: center;
 }

-.linkWrapper {
-  display: flex;
-  align-items: baseline;
-  gap: var(--Spacing-x-half);
-}
-
 .link {
  display: flex;
  align-items: center;
--- a/lib/graphql/Query/LoyaltyPage.graphql
+++ b/lib/graphql/Query/LoyaltyPage.graphql
@@ -100,6 +100,11 @@ query GetLoyaltyPage($locale: String!, $uid: String!) {
    heading
    sidebar {
      __typename
+      ... on LoyaltyPageSidebarDynamicContent {
+        dynamic_content {
+          component
+        }
+      }
      ... on LoyaltyPageSidebarJoinLoyaltyContact {
        join_loyalty_contact {
          title
--- a/server/routers/contentstack/loyaltyPage/output.ts
+++ b/server/routers/contentstack/loyaltyPage/output.ts
@@ -8,6 +8,7 @@ import {
  LoyaltyBlocksTypenameEnum,
  LoyaltyCardsGridEnum,
  LoyaltyComponentEnum,
+  LoyaltySidebarDynamicComponentEnum,
  SidebarTypenameEnum,
 } from "@/types/components/loyalty/enums"
 import { Embeds } from "@/types/requests/embeds"
@@ -166,8 +167,16 @@ const loyaltyPageJoinLoyaltyContact = z.object({
  }),
 })

+const loyaltyPageSidebarDynamicContent = z.object({
+  __typename: z.literal(SidebarTypenameEnum.LoyaltyPageSidebarDynamicContent),
+  dynamic_content: z.object({
+    component: z.nativeEnum(LoyaltySidebarDynamicComponentEnum),
+  }),
+})
+
 const loyaltyPageSidebarItem = z.discriminatedUnion("__typename", [
  loyaltyPageSidebarTextContent,
+  loyaltyPageSidebarDynamicContent,
  loyaltyPageJoinLoyaltyContact,
 ])

@@ -226,8 +235,13 @@ export type RteSidebarContent = Omit<SidebarContentRaw, "content"> & {
    }
  }
 }
+type SideBarDynamicContent = z.infer<typeof loyaltyPageSidebarDynamicContent>
+
 export type JoinLoyaltyContact = z.infer<typeof loyaltyPageJoinLoyaltyContact>
-export type Sidebar = JoinLoyaltyContact | RteSidebarContent
+export type Sidebar =
+  | JoinLoyaltyContact
+  | RteSidebarContent
+  | SideBarDynamicContent
 type LoyaltyPageDataRaw = z.infer<typeof validateLoyaltyPageSchema>

 export type LoyaltyPage = Omit<LoyaltyPageDataRaw, "blocks" | "sidebar"> & {
--- a/types/components/loyalty/enums.ts
+++ b/types/components/loyalty/enums.ts
@@ -13,10 +13,15 @@ export type JoinLoyaltyContactContact = Typename<
 export enum SidebarTypenameEnum {
  LoyaltyPageSidebarJoinLoyaltyContact = "LoyaltyPageSidebarJoinLoyaltyContact",
  LoyaltyPageSidebarContent = "LoyaltyPageSidebarContent",
+  LoyaltyPageSidebarDynamicContent = "LoyaltyPageSidebarDynamicContent",
 }

 export type SidebarTypename = keyof typeof SidebarTypenameEnum

+export enum LoyaltySidebarDynamicComponentEnum {
+  my_pages_navigation = "my_pages_navigation",
+}
+
 export enum LoyaltyComponentEnum {
  loyalty_levels = "loyalty_levels",
  how_it_works = "how_it_works",