Merged in feat/LOY-419-highlight-promo-campaigns (pull request #3308)

feat(LOY-419): add promo campaigns to Campaign Overview Page * feat(LOY-419): add promo campaigns as top campaign and all campaigns * refactor(LOY-419) Approved-by: Chuma Mcphoy (We Ahead)
2025-12-10 12:29:23 +00:00
parent fde77a06ce
commit 5bcbc23732
9 changed files with 181 additions and 47 deletions
--- a/apps/scandic-web/components/ContentType/CampaignOverviewPage/TopCampaign/index.tsx
+++ b/apps/scandic-web/components/ContentType/CampaignOverviewPage/TopCampaign/index.tsx
@@ -1,4 +1,5 @@
 import { Typography } from "@scandic-hotels/design-system/Typography"
+import { ContentEnum } from "@scandic-hotels/trpc/types/content"

 import CampaignHotelListing from "@/components/Blocks/CampaignHotelListing"
 import CampaignHero from "@/components/ContentType/CampaignPage/Hero"
@@ -13,10 +14,12 @@ interface TopCampaignProps {
  topCampaign: CampaignOverviewPageData["topCampaign"]
 }

-export default async function TopCampaign({ topCampaign }: TopCampaignProps) {
+export async function TopCampaign({ topCampaign }: TopCampaignProps) {
  const lang = await getLang()
  const intl = await getIntl()
+
  const { campaign, heading } = topCampaign
+
  const buttonData = {
    cta: intl.formatMessage({
      id: "campaign.exploreTheOffer",
@@ -25,13 +28,11 @@ export default async function TopCampaign({ topCampaign }: TopCampaignProps) {
    url: `/${lang}${campaign.url}`,
  }

+  function CampaignContent() {
+    switch (campaign.typename) {
+      case ContentEnum.blocks.CampaignPage:
        return (
-    <section className={styles.topCampaign}>
-      {heading ? (
-        <Typography variant="Title/md">
-          <h2 className={styles.heading}>{heading}</h2>
-        </Typography>
-      ) : null}
+          <>
            <CampaignHero {...campaign.hero} button={buttonData} />
            <CampaignHotelListing
              heading={
@@ -45,6 +46,31 @@ export default async function TopCampaign({ topCampaign }: TopCampaignProps) {
              visibleCountMobile={3}
              visibleCountDesktop={3}
            />
+          </>
+        )
+      case ContentEnum.blocks.PromoCampaignPage:
+        if (!campaign.hero) return null
+        return (
+          <CampaignHero
+            {...campaign.hero}
+            button={buttonData}
+            rate_text={null}
+            campaign_text={null}
+          />
+        )
+      default:
+        return null
+    }
+  }
+
+  return (
+    <section className={styles.topCampaign}>
+      {heading ? (
+        <Typography variant="Title/md">
+          <h2 className={styles.heading}>{heading}</h2>
+        </Typography>
+      ) : null}
+      <CampaignContent />
    </section>
  )
 }
--- a/apps/scandic-web/components/ContentType/CampaignOverviewPage/index.tsx
+++ b/apps/scandic-web/components/ContentType/CampaignOverviewPage/index.tsx
@@ -6,7 +6,7 @@ import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"

 import { getCampaignOverviewPage } from "@/lib/trpc/memoizedRequests"

-import TopCampaign from "@/components/ContentType/CampaignOverviewPage/TopCampaign"
+import { TopCampaign } from "@/components/ContentType/CampaignOverviewPage/TopCampaign"
 import LinkChips from "@/components/TempDesignSystem/LinkChips"

 import Blocks from "./Blocks"
@@ -23,7 +23,6 @@ export default async function CampaignOverviewPage() {

  const { campaign_overview_page, tracking } = pageData
  const { header, topCampaign, blocks } = campaign_overview_page
-
  return (
    <>
      <Suspense fallback={<CampaignOverviewPageSkeleton />}>
--- a/apps/scandic-web/components/ContentType/CampaignPage/Hero/variants.ts
+++ b/apps/scandic-web/components/ContentType/CampaignPage/Hero/variants.ts
@@ -10,7 +10,7 @@ const config = {
    },
  },
  defaultVariants: {
-    theme: "Peach",
+    theme: "Burgundy",
  },
 } as const

--- a/packages/trpc/lib/graphql/Fragments/Blocks/AllCampaigns.graphql.ts
+++ b/packages/trpc/lib/graphql/Fragments/Blocks/AllCampaigns.graphql.ts
@@ -1,6 +1,7 @@
 import { gql } from "graphql-tag"

 import { CampaignPageRef } from "../CampaignPage/Ref.graphql"
+import { PromoCampaignPageRef } from "../PromoCampaignPage/Ref.graphql"

 export const AllCampaigns = gql`
  fragment AllCampaigns on CampaignOverviewPageBlocksAllCampaigns {
@@ -21,6 +22,17 @@ export const AllCampaigns = gql`
                locale
              }
            }
+            ... on PromoCampaignPage {
+              url
+              card_content {
+                heading
+                image
+                text
+              }
+              system {
+                locale
+              }
+            }
          }
        }
      }
@@ -36,10 +48,12 @@ export const AllCampaignsRefs = gql`
          node {
            __typename
            ...CampaignPageRef
+            ...PromoCampaignPageRef
          }
        }
      }
    }
  }
  ${CampaignPageRef}
+  ${PromoCampaignPageRef}
 `
--- a/packages/trpc/lib/graphql/Fragments/CampaignOverviewPage/TopCampaign.graphql.ts
+++ b/packages/trpc/lib/graphql/Fragments/CampaignOverviewPage/TopCampaign.graphql.ts
@@ -30,3 +30,23 @@ export const TopCampaignRef = gql`
  }
  ${System}
 `
+
+export const TopPromoCampaign = gql`
+  fragment TopPromoCampaign on PromoCampaignPage {
+    url
+    promo_hero {
+      image
+      heading
+      benefits
+    }
+  }
+`
+
+export const TopPromoCampaignRef = gql`
+  fragment TopPromoCampaignRef on PromoCampaignPage {
+    system {
+      ...System
+    }
+  }
+  ${System}
+`
--- a/packages/trpc/lib/graphql/Query/CampaignOverviewPage/CampaignOverviewPage.graphql.ts
+++ b/packages/trpc/lib/graphql/Query/CampaignOverviewPage/CampaignOverviewPage.graphql.ts
@@ -16,6 +16,8 @@ import {
 import {
  TopCampaign,
  TopCampaignRef,
+  TopPromoCampaign,
+  TopPromoCampaignRef,
 } from "../../Fragments/CampaignOverviewPage/TopCampaign.graphql"
 import { System } from "../../Fragments/System.graphql"

@@ -33,7 +35,9 @@ export const GetCampaignOverviewPage = gql`
        campaignConnection {
          edges {
            node {
+              __typename
              ...TopCampaign
+              ...TopPromoCampaign
            }
          }
        }
@@ -57,6 +61,7 @@ export const GetCampaignOverviewPage = gql`
  ${System}
  ${NavigationLinks_CampaignOverviewPage}
  ${TopCampaign}
+  ${TopPromoCampaign}
  ${AllCampaigns}
  ${CarouselCards_CampaignOverviewPage}
  ${HotelListing_CampaignOverviewPage}
@@ -73,6 +78,7 @@ export const GetCampaignOverviewPageRefs = gql`
          edges {
            node {
              ...TopCampaignRef
+              ...TopPromoCampaignRef
            }
          }
        }
@@ -90,6 +96,7 @@ export const GetCampaignOverviewPageRefs = gql`
  ${System}
  ${NavigationLinksRef_CampaignOverviewPage}
  ${TopCampaignRef}
+  ${TopPromoCampaignRef}
  ${CarouselCards_CampaignOverviewPageRefs}
  ${AllCampaignsRefs}
 `
--- a/packages/trpc/lib/routers/contentstack/campaignOverviewPage/output.ts
+++ b/packages/trpc/lib/routers/contentstack/campaignOverviewPage/output.ts
@@ -2,12 +2,14 @@ import { z } from "zod"

 import { CampaignOverviewPageEnum } from "../../../types/campaignOverviewPageEnum"
 import { CampaignPageEnum } from "../../../types/campaignPage"
+import { ContentEnum } from "../../../types/content"
 import { discriminatedUnionArray } from "../../../utils/discriminatedUnion"
 import {
  campaignPageHotelListing,
  heroSchema,
  includedHotelsSchema,
 } from "../campaignPage/output"
+import { promoHeroSchema } from "../promoCampaignPage/output"
 import {
  allCampaignsRefsSchema,
  allCampaignsSchema,
@@ -43,29 +45,70 @@ export const campaignPageBlocksSchema = z.discriminatedUnion("__typename", [
  campaignPageHotelListing,
 ])

-const topCampaignSchema = z
-  .object({
+const topCampaign = z.object({
+  typename: z
+    .literal(ContentEnum.blocks.CampaignPage)
+    .optional()
+    .default(ContentEnum.blocks.CampaignPage),
  hero: heroSchema,
  included_hotels: includedHotelsSchema,
  blocks: discriminatedUnionArray(campaignPageBlocksSchema.options),
  url: z.string(),
 })
-  .transform((data) => {
+
+const topCampaignSchema = z
+  .object({
+    __typename: z.literal(ContentEnum.blocks.CampaignPage),
+  })
+  .merge(topCampaign)
+
+export const transformTopCampaign = (data: z.infer<typeof topCampaign>) => {
  const { blocks, included_hotels, ...rest } = data
-    const hotelListingBlock = blocks.find(
+  const hotelListingBlock = blocks?.find(
    (block) =>
      block.__typename === CampaignPageEnum.ContentStack.blocks.HotelListing
  )
-
  return {
    ...rest,
+    __typename: ContentEnum.blocks.CampaignPage,
    hotel_listing: {
      heading: hotelListingBlock?.hotel_listing.heading || "",
      hotelIds: included_hotels,
    },
  }
+}
+export const transformedTopCampaign =
+  topCampaignSchema.transform(transformTopCampaign)
+
+const topPromoCampaign = z.object({
+  typename: z
+    .literal(ContentEnum.blocks.PromoCampaignPage)
+    .optional()
+    .default(ContentEnum.blocks.PromoCampaignPage),
+  promo_hero: promoHeroSchema.nullish(),
+  url: z.string(),
 })

+const topPromoCampaignSchema = z
+  .object({
+    __typename: z.literal(ContentEnum.blocks.PromoCampaignPage),
+  })
+  .merge(topPromoCampaign)
+
+export const transformTopPromoCampaign = (
+  data: z.infer<typeof topPromoCampaign>
+) => {
+  const { promo_hero, ...rest } = data
+  return {
+    ...rest,
+    __typename: ContentEnum.blocks.PromoCampaignPage,
+    hero: promo_hero,
+  }
+}
+export const transformedTopPromoCampaign = topPromoCampaignSchema.transform(
+  transformTopPromoCampaign
+)
+
 const campaignOverviewPageCarouselCards = z
  .object({
    __typename: z.literal(
@@ -109,8 +152,22 @@ export const campaignOverviewPageSchema = z.object({
        heading: z.string().nullish(),
        campaignConnection: z.object({
          edges: z.array(
-            z.object({
-              node: topCampaignSchema,
+            z
+              .object({
+                node: z.discriminatedUnion("__typename", [
+                  topCampaignSchema,
+                  topPromoCampaignSchema,
+                ]),
+              })
+              .transform((data) => {
+                if (data.node.__typename === ContentEnum.blocks.CampaignPage) {
+                  return {
+                    node: transformTopCampaign(data.node),
+                  }
+                }
+                return {
+                  node: transformTopPromoCampaign(data.node),
+                }
              })
          ),
        }),
--- a/packages/trpc/lib/routers/contentstack/schemas/blocks/allCampaigns.ts
+++ b/packages/trpc/lib/routers/contentstack/schemas/blocks/allCampaigns.ts
@@ -4,7 +4,7 @@ import { transformedImageVaultAssetSchema } from "@scandic-hotels/common/utils/i
 import { removeMultipleSlashes } from "@scandic-hotels/common/utils/url"

 import { BlocksEnums } from "../../../../types/blocksEnum"
-import { campaignPageRefSchema } from "../pageLinks"
+import { campaignPageRefSchema, promoCampaignPageRefSchema } from "../pageLinks"

 export const campaignPageCardSchema = z.object({
  image: transformedImageVaultAssetSchema,
@@ -72,7 +72,10 @@ export const allCampaignsRefsSchema = z.object({
    campaignsConnection: z.object({
      edges: z.array(
        z.object({
-          node: campaignPageRefSchema,
+          node: z.discriminatedUnion("__typename", [
+            campaignPageRefSchema,
+            promoCampaignPageRefSchema,
+          ]),
        })
      ),
    }),
--- a/packages/trpc/lib/types/campaignOverviewPage.ts
+++ b/packages/trpc/lib/types/campaignOverviewPage.ts
@@ -3,19 +3,27 @@ import type { z } from "zod"
 import type {
  campaignOverviewPageRefsSchema,
  campaignOverviewPageSchema,
+  transformedTopCampaign,
+  transformedTopPromoCampaign,
 } from "../routers/contentstack/campaignOverviewPage/output"

-export interface GetCampaignOverviewPageData
-  extends z.input<typeof campaignOverviewPageSchema> {}
-export interface CampaignOverviewPage
-  extends z.output<typeof campaignOverviewPageSchema> {}
+export interface GetCampaignOverviewPageData extends z.input<
+  typeof campaignOverviewPageSchema
+> {}
+export interface CampaignOverviewPage extends z.output<
+  typeof campaignOverviewPageSchema
+> {}
 export type CampaignOverviewPageData =
  CampaignOverviewPage["campaign_overview_page"]

-export interface GetCampaignOverviewPageRefsData
-  extends z.input<typeof campaignOverviewPageRefsSchema> {}
+export type TopCampaign = z.output<typeof transformedTopCampaign>
+export type TopPromoCampaign = z.output<typeof transformedTopPromoCampaign>
+export interface GetCampaignOverviewPageRefsData extends z.input<
+  typeof campaignOverviewPageRefsSchema
+> {}

-export interface CampaignOverviewPageRefs
-  extends z.output<typeof campaignOverviewPageRefsSchema> {}
+export interface CampaignOverviewPageRefs extends z.output<
+  typeof campaignOverviewPageRefsSchema
+> {}

 export type Block = CampaignOverviewPageData["blocks"][number]