feat: improve structure and error handling

components/ContentType/ContentPage.tsx

@@ -0,0 +1,3 @@
+export default async function ContentPage() {
+  return null
+}

components/ContentType/LoyaltyPage.tsx

@@ -0,0 +1,21 @@
+import { serverClient } from "@/lib/trpc/server"
+
+import { Blocks } from "@/components/Loyalty/Blocks"
+import Sidebar from "@/components/Loyalty/Sidebar"
+import MaxWidth from "@/components/MaxWidth"
+
+import styles from "./loyaltyPage.module.css"
+
+export default async function LoyaltyPage() {
+  const loyaltyPage = await serverClient().contentstack.loyaltyPage.get()
+
+  return (
+    <section className={styles.content}>
+      {loyaltyPage.sidebar ? <Sidebar blocks={loyaltyPage.sidebar} /> : null}
+
+      <MaxWidth className={styles.blocks} tag="main">
+        {loyaltyPage.blocks ? <Blocks blocks={loyaltyPage.blocks} /> : null}
+      </MaxWidth>
+    </section>
+  )
+}

components/ContentType/loyaltyPage.module.css

@@ -0,0 +1,31 @@
+.content {
+  display: grid;
+  padding-bottom: 7.7rem;
+  padding-left: 0;
+  padding-right: 0;
+  position: relative;
+}
+
+.blocks {
+  display: grid;
+  gap: 4.2rem;
+  padding: 1.6rem;
+}
+
+@media screen and (min-width: 950px) {
+  .content {
+    gap: 2.7rem;
+    grid-template-columns: 30rem 1fr;
+    padding-bottom: 17.5rem;
+    padding-left: 2.4rem;
+    padding-right: 2.4rem;
+    padding-top: 5.8rem;
+  }
+
+  .blocks {
+    gap: 6.4rem;
+    padding-left: 0;
+    padding-right: 0;
+    grid-column: 2 / -1;
+  }
+}

components/Header/Logo/index.tsx

@@ -0,0 +1,15 @@
+import Link from "next/link"
+
+import Image from "@/components/Image"
+
+import styles from "./logo.module.css"
+
+import { LogoProps } from "@/types/components/header/logo"
+
+export default async function Logo({ title, height, width, src }: LogoProps) {
+  return (
+    <Link className={styles.link} href="#">
+      <Image alt={title} height={height} src={src} width={width} />
+    </Link>
+  )
+}

components/Header/index.tsx

@@ -0,0 +1,35 @@
+import { GetHeader } from "@/lib/graphql/Query/Header.graphql"
+import { request } from "@/lib/graphql/request"
+
+import Logo from "./Logo"
+
+import styles from "./header.module.css"
+
+import type { LangParams } from "@/types/params"
+import { HeaderQueryData } from "@/types/requests/header"
+
+export default async function Header({ lang }: LangParams) {
+  const { data } = await request<HeaderQueryData>(GetHeader, {
+    locale: lang,
+  })
+
+  if (
+    !data.all_header.items.length ||
+    !data.all_header.items?.[0].logoConnection.totalCount
+  ) {
+    return null
+  }
+
+  const logo = data.all_header.items[0].logoConnection.edges[0]
+
+  return (
+    <header className={styles.header}>
+      <Logo
+        title={logo.node.title}
+        height={logo.node.dimension.height}
+        width={logo.node.dimension.width}
+        src={logo.node.url}
+      />
+    </header>
+  )
+}

components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx

@@ -8,9 +8,7 @@ import styles from "./contactRow.module.css"
 import type { ContactRowProps } from "@/types/components/loyalty/sidebar"
 
 export default async function ContactRow({ contact }: ContactRowProps) {
-  const data = await serverClient().contentstack.contactConfig.get({
-    lang: Lang.en,
-  })
+  const data = await serverClient().contentstack.contactConfig.get()
 
   const val = getValueFromContactConfig(contact.contact_field, data)
 

components/MaxWidth/index.tsx

@@ -1,9 +1,6 @@
 "use client"
 import { cva } from "class-variance-authority"
 
-import { Lang } from "@/constants/languages"
-import { trpc } from "@/lib/trpc/client"
-
 import styles from "./maxWidth.module.css"
 
 import type { MaxWidthProps } from "@/types/components/max-width"
@@ -15,10 +12,6 @@ export default function MaxWidth({
   tag = "section",
   ...props
 }: MaxWidthProps) {
-  const d = trpc.contentstack.breadcrumbs.get.useQuery({
-    locale: Lang.en,
-    href: "/my-pages/overview",
-  })
   const Cmp = tag
   return <Cmp className={maxWidthVariants({ className })} {...props} />
 }

components/MyPages/Breadcrumbs/index.tsx

@@ -1,13 +1,14 @@
 import { _ } from "@/lib/translation"
+import { serverClient } from "@/lib/trpc/server"
 
 import Breadcrumb from "./Breadcrumb"
 import BreadcrumbsWithLink from "./BreadcrumbWithLink"
 
 import styles from "./breadcrumbs.module.css"
 
-import type { BreadcrumbsProps } from "@/types/components/myPages/breadcrumbs"
+export default async function Breadcrumbs() {
+  const breadcrumbs = await serverClient().contentstack.breadcrumbs.get()
 
-export default function Breadcrumbs({ breadcrumbs }: BreadcrumbsProps) {
   return (
     <nav className={styles.breadcrumbs}>
       <ul className={styles.list}>

components/MyPages/Header/Logo/index.tsx

@@ -1,34 +0,0 @@
-import Link from "next/link"
-
-import { GetMyPagesLogo } from "@/lib/graphql/Query/Logo.graphql"
-import { request } from "@/lib/graphql/request"
-
-import Image from "@/components/Image"
-
-import styles from "./logo.module.css"
-
-import type { LangParams } from "@/types/params"
-import type { LogoQueryData } from "@/types/requests/myPages/logo"
-
-export default async function Logo({ lang }: LangParams) {
-  const { data } = await request<LogoQueryData>(GetMyPagesLogo, {
-    locale: lang,
-  })
-  if (
-    !data.all_header.items.length ||
-    !data.all_header.items?.[0].logoConnection.totalCount
-  ) {
-    return null
-  }
-  const logo = data.all_header.items[0].logoConnection.edges[0]
-  return (
-    <Link className={styles.link} href="#">
-      <Image
-        alt={logo.node.title}
-        height={logo.node.dimension.height}
-        src={logo.node.url}
-        width={logo.node.dimension.width}
-      />
-    </Link>
-  )
-}

components/MyPages/Header/index.tsx

@@ -1,19 +0,0 @@
-import Hamburger from "./Hamburger"
-import LanguageSwitcher from "./LanguageSwitcher"
-import Logo from "./Logo"
-import User from "./User"
-
-import styles from "./header.module.css"
-
-import type { LangParams } from "@/types/params"
-
-export default function Header({ lang }: LangParams) {
-  return (
-    <header className={styles.header}>
-      <Logo lang={lang} />
-      <LanguageSwitcher />
-      <User />
-      <Hamburger />
-    </header>
-  )
-}

components/MyPages/Sidebar/index.tsx

@@ -8,11 +8,9 @@ import Title from "@/components/Title"
 
 import styles from "./sidebar.module.css"
 
-import type { SidebarProps } from "@/types/requests/myPages/navigation"
+export default async function Sidebar() {
+  const navigation = await serverClient().contentstack.myPages.navigation.get()
 
-export default async function Sidebar({ lang }: SidebarProps) {
-  const navigation =
-    await serverClient().contentstack.myPages.navigation.get(lang)
   return (
     <aside className={styles.sidebar}>
       <nav className={styles.nav}>