feat(SW-190): added hero to loyalty pages

components/ContentType/LoyaltyPage/LoyaltyPage.tsx

@@ -3,12 +3,16 @@ import { serverClient } from "@/lib/trpc/server"
 import { Blocks } from "@/components/Loyalty/Blocks"
 import Sidebar from "@/components/Loyalty/Sidebar"
 import MaxWidth from "@/components/MaxWidth"
+import Hero from "@/components/TempDesignSystem/Hero"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import TrackingSDK from "@/components/TrackingSDK"
 
 import styles from "./loyaltyPage.module.css"
 
-export default async function LoyaltyPage() {
+import { ImageVaultAsset } from "@/types/components/imageVaultImage"
+import type { LangParams } from "@/types/params"
+
+export default async function LoyaltyPage({ lang }: LangParams) {
   const loyaltyPageRes = await serverClient().contentstack.loyaltyPage.get()
 
   if (!loyaltyPageRes) {
@@ -16,7 +20,7 @@ export default async function LoyaltyPage() {
   }
 
   const { tracking, loyaltyPage } = loyaltyPageRes
-
+  const heroImage: ImageVaultAsset = loyaltyPage.header?.hero_image
   return (
     <>
       <section className={styles.content}>
@@ -25,7 +29,15 @@ export default async function LoyaltyPage() {
         ) : null}
 
         <MaxWidth className={styles.blocks} tag="main">
-          <Title>{loyaltyPage.heading}</Title>
+          <header className={styles.header}>
+            <Title>{loyaltyPage.heading}</Title>
+            {heroImage ? (
+              <Hero
+                alt={heroImage.meta.alt || heroImage.meta.caption || ""}
+                src={heroImage.url}
+              />
+            ) : null}
+          </header>
           {loyaltyPage.blocks ? <Blocks blocks={loyaltyPage.blocks} /> : null}
         </MaxWidth>
       </section>

components/ContentType/LoyaltyPage/loyaltyPage.module.css

@@ -15,6 +15,11 @@
   padding-right: var(--Spacing-x2);
 }
 
+.header {
+  display: grid;
+  gap: var(--Spacing-x4);
+}
+
 @media screen and (min-width: 1367px) {
   .content {
     gap: var(--Spacing-x5);

components/TempDesignSystem/Hero/hero.module.css

@@ -0,0 +1,8 @@
+.hero {
+  height: 480px;
+  margin-bottom: var(--Spacing-x2);
+  max-width: 100%;
+  object-fit: cover;
+  border-radius: var(--Corner-radius-Medium);
+  margin: 0;
+}

components/TempDesignSystem/Hero/hero.ts

@@ -0,0 +1,4 @@
+export interface HeroProps {
+  alt: string
+  src: string
+}

components/TempDesignSystem/Hero/index.tsx

@@ -0,0 +1,17 @@
+import Image from "@/components/Image"
+
+import { HeroProps } from "./hero"
+
+import styles from "./hero.module.css"
+
+export default async function Hero({ alt, src }: HeroProps) {
+  return (
+    <Image
+      className={styles.hero}
+      alt={alt}
+      height={480}
+      width={1196}
+      src={src}
+    />
+  )
+}

lib/graphql/Query/LoyaltyPage.graphql

@@ -107,6 +107,9 @@ query GetLoyaltyPage($locale: String!, $uid: String!) {
     }
     title
     heading
+    header {
+      hero_image
+    }
     sidebar {
       __typename
       ... on LoyaltyPageSidebarDynamicContent {

server/routers/contentstack/loyaltyPage/output.ts

@@ -191,6 +191,11 @@ const loyaltyPageSidebarItem = z.discriminatedUnion("__typename", [
 
 export const validateLoyaltyPageSchema = z.object({
   heading: z.string().nullable(),
+  header: z
+    .object({
+      hero_image: z.any(),
+    })
+    .nullable(),
   blocks: z.array(loyaltyPageBlockItem).nullable(),
   sidebar: z.array(loyaltyPageSidebarItem).nullable(),
   system: z.object({

server/routers/contentstack/loyaltyPage/query.ts

@@ -208,8 +208,17 @@ export const loyaltyPageQueryRouter = router({
         })
       : null
 
+    const header = response.data.loyalty_page.header
+      ? {
+          hero_image: makeImageVaultImage(
+            response.data.loyalty_page.header.hero_image
+          ),
+        }
+      : null
+
     const loyaltyPage = {
       heading: response.data.loyalty_page.heading,
+      header,
       system: response.data.loyalty_page.system,
       blocks,
       sidebar,