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)

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,6 +28,41 @@ export default async function TopCampaign({ topCampaign }: TopCampaignProps) {
     url: `/${lang}${campaign.url}`,
   }
 
+  function CampaignContent() {
+    switch (campaign.typename) {
+      case ContentEnum.blocks.CampaignPage:
+        return (
+          <>
+            <CampaignHero {...campaign.hero} button={buttonData} />
+            <CampaignHotelListing
+              heading={
+                campaign.hotel_listing.heading ||
+                intl.formatMessage({
+                  id: "campaignPage.hotelsIncludedInOffer",
+                  defaultMessage: "Hotels included in this offer",
+                })
+              }
+              hotelIds={campaign.hotel_listing.hotelIds}
+              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 ? (
@@ -32,19 +70,7 @@ export default async function TopCampaign({ topCampaign }: TopCampaignProps) {
           <h2 className={styles.heading}>{heading}</h2>
         </Typography>
       ) : null}
-      <CampaignHero {...campaign.hero} button={buttonData} />
+      <CampaignContent />
-      <CampaignHotelListing
-        heading={
-          campaign.hotel_listing.heading ||
-          intl.formatMessage({
-            id: "campaignPage.hotelsIncludedInOffer",
-            defaultMessage: "Hotels included in this offer",
-          })
-        }
-        hotelIds={campaign.hotel_listing.hotelIds}
-        visibleCountMobile={3}
-        visibleCountDesktop={3}
-      />
     </section>
   )
 }

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 />}>

apps/scandic-web/components/ContentType/CampaignPage/Hero/variants.ts

@@ -10,7 +10,7 @@ const config = {
     },
   },
   defaultVariants: {
-    theme: "Peach",
+    theme: "Burgundy",
   },
 } as const
 

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}
 `

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}
+`

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}
 `

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,28 +45,69 @@ export const campaignPageBlocksSchema = z.discriminatedUnion("__typename", [
   campaignPageHotelListing,
 ])
 
+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(),
+})
+
 const topCampaignSchema = z
   .object({
-    hero: heroSchema,
+    __typename: z.literal(ContentEnum.blocks.CampaignPage),
-    included_hotels: includedHotelsSchema,
-    blocks: discriminatedUnionArray(campaignPageBlocksSchema.options),
-    url: z.string(),
   })
-  .transform((data) => {
+  .merge(topCampaign)
-    const { blocks, included_hotels, ...rest } = data
-    const hotelListingBlock = blocks.find(
-      (block) =>
-        block.__typename === CampaignPageEnum.ContentStack.blocks.HotelListing
-    )
 
-    return {
+export const transformTopCampaign = (data: z.infer<typeof topCampaign>) => {
-      ...rest,
+  const { blocks, included_hotels, ...rest } = data
-      hotel_listing: {
+  const hotelListingBlock = blocks?.find(
-        heading: hotelListingBlock?.hotel_listing.heading || "",
+    (block) =>
-        hotelIds: included_hotels,
+      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({
@@ -109,9 +152,23 @@ export const campaignOverviewPageSchema = z.object({
         heading: z.string().nullish(),
         campaignConnection: z.object({
           edges: z.array(
-            z.object({
+            z
-              node: topCampaignSchema,
+              .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),
+                }
+              })
           ),
         }),
       }),

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,
+          ]),
         })
       ),
     }),

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
+export interface GetCampaignOverviewPageData extends z.input<
-  extends z.input<typeof campaignOverviewPageSchema> {}
+  typeof campaignOverviewPageSchema
-export interface CampaignOverviewPage
+> {}
-  extends z.output<typeof campaignOverviewPageSchema> {}
+export interface CampaignOverviewPage extends z.output<
+  typeof campaignOverviewPageSchema
+> {}
 export type CampaignOverviewPageData =
   CampaignOverviewPage["campaign_overview_page"]
 
-export interface GetCampaignOverviewPageRefsData
+export type TopCampaign = z.output<typeof transformedTopCampaign>
-  extends z.input<typeof campaignOverviewPageRefsSchema> {}
+export type TopPromoCampaign = z.output<typeof transformedTopPromoCampaign>
+export interface GetCampaignOverviewPageRefsData extends z.input<
+  typeof campaignOverviewPageRefsSchema
+> {}
 
-export interface CampaignOverviewPageRefs
+export interface CampaignOverviewPageRefs extends z.output<
-  extends z.output<typeof campaignOverviewPageRefsSchema> {}
+  typeof campaignOverviewPageRefsSchema
+> {}
 
 export type Block = CampaignOverviewPageData["blocks"][number]