From 4229e9b11bfb6cfc7f4b97e759a5f1dc0f459b53 Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Mon, 30 Jun 2025 09:08:22 +0000 Subject: [PATCH] feat(SW-2283): Added carousel cards block to campaign overview page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Approved-by: Christian Andolf Approved-by: Matilda Landström --- .../CampaignOverviewPage/Blocks/index.tsx | 21 +++++++++++ .../CampaignOverviewPage/index.tsx | 5 +-- .../ContentType/CampaignPage/index.tsx | 2 +- .../types/components/blocks/index.ts | 2 ++ .../Fragments/Blocks/CarouselCards.graphql | 32 +++++++++++++++++ .../CampaignOverviewPage.graphql | 10 ++++++ .../campaignOverviewPage/output.ts | 35 +++++++++++++++++-- .../campaignOverviewPage/utils.ts | 16 +++++++++ .../trpc/lib/types/campaignOverviewPage.ts | 2 ++ .../lib/types/campaignOverviewPageEnum.ts | 7 ++++ 10 files changed, 127 insertions(+), 5 deletions(-) create mode 100644 apps/scandic-web/components/ContentType/CampaignOverviewPage/Blocks/index.tsx create mode 100644 packages/trpc/lib/types/campaignOverviewPageEnum.ts diff --git a/apps/scandic-web/components/ContentType/CampaignOverviewPage/Blocks/index.tsx b/apps/scandic-web/components/ContentType/CampaignOverviewPage/Blocks/index.tsx new file mode 100644 index 000000000..81e16596e --- /dev/null +++ b/apps/scandic-web/components/ContentType/CampaignOverviewPage/Blocks/index.tsx @@ -0,0 +1,21 @@ +import { BlocksEnums } from "@scandic-hotels/trpc/types/blocks" + +import CarouselCards from "@/components/Blocks/CarouselCards" + +import type { BlocksProps } from "@/types/components/blocks" + +export default function Blocks({ blocks }: BlocksProps) { + return blocks.map(async (block) => { + switch (block.typename) { + case BlocksEnums.block.CarouselCards: + return ( + + ) + default: + return null + } + }) +} diff --git a/apps/scandic-web/components/ContentType/CampaignOverviewPage/index.tsx b/apps/scandic-web/components/ContentType/CampaignOverviewPage/index.tsx index 8ab819481..52989bb17 100644 --- a/apps/scandic-web/components/ContentType/CampaignOverviewPage/index.tsx +++ b/apps/scandic-web/components/ContentType/CampaignOverviewPage/index.tsx @@ -8,6 +8,7 @@ import { getCampaignOverviewPage } from "@/lib/trpc/memoizedRequests" import TopCampaign from "@/components/ContentType/CampaignOverviewPage/TopCampaign" import LinkChips from "@/components/TempDesignSystem/LinkChips" +import Blocks from "./Blocks" import CampaignOverviewPageSkeleton from "./CampaignOverviewPageSkeleton" import styles from "./campaignOverviewPage.module.css" @@ -19,8 +20,7 @@ export default async function CampaignOverviewPage() { notFound() } - const { campaignOverviewPage } = pageData - const { header, topCampaign } = campaignOverviewPage + const { header, topCampaign, blocks } = pageData.campaignOverviewPage return ( <> @@ -48,6 +48,7 @@ export default async function CampaignOverviewPage() {
+ {blocks.length ? : null}
diff --git a/apps/scandic-web/components/ContentType/CampaignPage/index.tsx b/apps/scandic-web/components/ContentType/CampaignPage/index.tsx index 84b8919b1..479b1be39 100644 --- a/apps/scandic-web/components/ContentType/CampaignPage/index.tsx +++ b/apps/scandic-web/components/ContentType/CampaignPage/index.tsx @@ -53,7 +53,7 @@ export default async function CampaignPage() { - {blocks ? : null} + {blocks.length ? : null} {/* */} diff --git a/apps/scandic-web/types/components/blocks/index.ts b/apps/scandic-web/types/components/blocks/index.ts index 8519d0a46..79104db20 100644 --- a/apps/scandic-web/types/components/blocks/index.ts +++ b/apps/scandic-web/types/components/blocks/index.ts @@ -1,5 +1,6 @@ import type { Block as StartPageBlock } from "@scandic-hotels/trpc/routers/contentstack/startPage/query" import type { Block as AccountPageBlock } from "@scandic-hotels/trpc/types/accountPage" +import type { Block as CampaignOverviewPageBlock } from "@scandic-hotels/trpc/types/campaignOverviewPage" import type { Block as CampaignPageBlock } from "@scandic-hotels/trpc/types/campaignPage" import type { Block as CollectionPageBlock } from "@scandic-hotels/trpc/types/collectionPage" import type { Block as ContentPageBlock } from "@scandic-hotels/trpc/types/contentPage" @@ -11,6 +12,7 @@ import type { Block as LoyaltyPageBlock } from "@scandic-hotels/trpc/types/loyal export type Blocks = | AccountPageBlock | CampaignPageBlock + | CampaignOverviewPageBlock | CollectionPageBlock | ContentPageBlock | DestinationCityPageBlock diff --git a/packages/trpc/lib/graphql/Fragments/Blocks/CarouselCards.graphql b/packages/trpc/lib/graphql/Fragments/Blocks/CarouselCards.graphql index afc56c2b6..f59dcc4a8 100644 --- a/packages/trpc/lib/graphql/Fragments/Blocks/CarouselCards.graphql +++ b/packages/trpc/lib/graphql/Fragments/Blocks/CarouselCards.graphql @@ -129,3 +129,35 @@ fragment CarouselCards_CampaignPageRefs on CampaignPageBlocksCarouselCards { } } } + +fragment CarouselCards_CampaignOverviewPage on CampaignOverviewPageBlocksCarouselCards { + carousel_cards { + heading + enable_filters + card_groups { + filter_label + filter_identifier + cardConnection { + edges { + node { + ...ContentCardBlock + } + } + } + } + } +} + +fragment CarouselCards_CampaignOverviewPageRefs on CampaignOverviewPageBlocksCarouselCards { + carousel_cards { + card_groups { + cardConnection { + edges { + node { + ...ContentCardBlockRef + } + } + } + } + } +} diff --git a/packages/trpc/lib/graphql/Query/CampaignOverviewPage/CampaignOverviewPage.graphql b/packages/trpc/lib/graphql/Query/CampaignOverviewPage/CampaignOverviewPage.graphql index be30b77af..1d2b69649 100644 --- a/packages/trpc/lib/graphql/Query/CampaignOverviewPage/CampaignOverviewPage.graphql +++ b/packages/trpc/lib/graphql/Query/CampaignOverviewPage/CampaignOverviewPage.graphql @@ -3,6 +3,8 @@ #import "../../Fragments/CampaignOverviewPage/NavigationLinks.graphql" #import "../../Fragments/CampaignOverviewPage/TopCampaign.graphql" +#import "../../Fragments/Blocks/CarouselCards.graphql" + query GetCampaignOverviewPage($locale: String!, $uid: String!) { campaign_overview_page(uid: $uid, locale: $locale) { title @@ -18,6 +20,10 @@ query GetCampaignOverviewPage($locale: String!, $uid: String!) { } } } + blocks { + __typename + ...CarouselCards_CampaignOverviewPage + } system { ...System created_at @@ -41,6 +47,10 @@ query GetCampaignOverviewPageRefs($locale: String!, $uid: String!) { } } } + blocks { + __typename + ...CarouselCards_CampaignOverviewPageRefs + } system { ...System } diff --git a/packages/trpc/lib/routers/contentstack/campaignOverviewPage/output.ts b/packages/trpc/lib/routers/contentstack/campaignOverviewPage/output.ts index bb1bdcc5e..01dac1549 100644 --- a/packages/trpc/lib/routers/contentstack/campaignOverviewPage/output.ts +++ b/packages/trpc/lib/routers/contentstack/campaignOverviewPage/output.ts @@ -1,5 +1,6 @@ import { z } from "zod" +import { CampaignOverviewPageEnum } from "../../../types/campaignOverviewPageEnum" import { CampaignPageEnum } from "../../../types/campaignPage" import { discriminatedUnionArray } from "../../../utils/discriminatedUnion" import { @@ -7,6 +8,10 @@ import { heroSchema, includedHotelsSchema, } from "../campaignPage/output" +import { + carouselCardsRefsSchema, + carouselCardsSchema, +} from "../schemas/blocks/carouselCards" import { linkAndTitleSchema, linkConnectionRefs, @@ -29,7 +34,7 @@ const navigationLinksSchema = z })) }) -export const blocksSchema = z.discriminatedUnion("__typename", [ +export const campaignPageBlocksSchema = z.discriminatedUnion("__typename", [ campaignPageHotelListing, ]) @@ -38,7 +43,7 @@ const topCampaignSchema = z heading: z.string(), hero: heroSchema, included_hotels: includedHotelsSchema, - blocks: discriminatedUnionArray(blocksSchema.options), + blocks: discriminatedUnionArray(campaignPageBlocksSchema.options), url: z.string(), }) .transform((data) => { @@ -57,6 +62,18 @@ const topCampaignSchema = z } }) +const campaignOverviewPageCarouselCards = z + .object({ + __typename: z.literal( + CampaignOverviewPageEnum.ContentStack.blocks.CarouselCards + ), + }) + .merge(carouselCardsSchema) + +export const blocksSchema = z.discriminatedUnion("__typename", [ + campaignOverviewPageCarouselCards, +]) + export const campaignOverviewPageSchema = z.object({ campaign_overview_page: z .object({ @@ -73,6 +90,7 @@ export const campaignOverviewPageSchema = z.object({ }) ), }), + blocks: discriminatedUnionArray(blocksSchema.options), system: systemSchema.merge( z.object({ created_at: z.string(), @@ -98,6 +116,18 @@ const campaignOverviewPageHeaderRefs = z.object({ navigation_links: z.array(linkConnectionRefs), }) +const campaignOverviewPageCarouselCardsRef = z + .object({ + __typename: z.literal( + CampaignOverviewPageEnum.ContentStack.blocks.CarouselCards + ), + }) + .merge(carouselCardsRefsSchema) + +const blockRefsSchema = z.discriminatedUnion("__typename", [ + campaignOverviewPageCarouselCardsRef, +]) + export const campaignOverviewPageRefsSchema = z.object({ campaign_overview_page: z.object({ header: campaignOverviewPageHeaderRefs, @@ -110,6 +140,7 @@ export const campaignOverviewPageRefsSchema = z.object({ }) ), }), + blocks: discriminatedUnionArray(blockRefsSchema.options).nullable(), system: systemSchema, }), }) diff --git a/packages/trpc/lib/routers/contentstack/campaignOverviewPage/utils.ts b/packages/trpc/lib/routers/contentstack/campaignOverviewPage/utils.ts index 5b09b8413..1098bda21 100644 --- a/packages/trpc/lib/routers/contentstack/campaignOverviewPage/utils.ts +++ b/packages/trpc/lib/routers/contentstack/campaignOverviewPage/utils.ts @@ -3,6 +3,8 @@ import { generateTagsFromSystem, } from "@scandic-hotels/trpc/utils/generateTag" +import { CampaignOverviewPageEnum } from "../../../types/campaignOverviewPageEnum" + import type { Lang } from "@scandic-hotels/common/constants/language" import type { System } from "@scandic-hotels/trpc/routers/contentstack/schemas/system" @@ -36,6 +38,20 @@ export function getConnections({ connections.push(node.system) }) } + if (campaign_overview_page.blocks) { + campaign_overview_page.blocks.forEach((block) => { + switch (block.__typename) { + case CampaignOverviewPageEnum.ContentStack.blocks.CarouselCards: { + block.carousel_cards.card_groups.forEach((group) => { + group.cardConnection.edges.forEach(({ node }) => { + connections.push(node.system) + }) + }) + break + } + } + }) + } return connections } diff --git a/packages/trpc/lib/types/campaignOverviewPage.ts b/packages/trpc/lib/types/campaignOverviewPage.ts index b245c97e6..acca339c1 100644 --- a/packages/trpc/lib/types/campaignOverviewPage.ts +++ b/packages/trpc/lib/types/campaignOverviewPage.ts @@ -17,3 +17,5 @@ export interface GetCampaignOverviewPageRefsData export interface CampaignOverviewPageRefs extends z.output {} + +export type Block = CampaignOverviewPageData["blocks"][number] diff --git a/packages/trpc/lib/types/campaignOverviewPageEnum.ts b/packages/trpc/lib/types/campaignOverviewPageEnum.ts new file mode 100644 index 000000000..7396c4798 --- /dev/null +++ b/packages/trpc/lib/types/campaignOverviewPageEnum.ts @@ -0,0 +1,7 @@ +export namespace CampaignOverviewPageEnum { + export namespace ContentStack { + export const enum blocks { + CarouselCards = "CampaignOverviewPageBlocksCarouselCards", + } + } +}