diff --git a/apps/scandic-web/components/Blocks/CampaignHotelListing/Client.tsx b/apps/scandic-web/components/Blocks/CampaignHotelListing/Client.tsx
index 92ad40b3b..d498423f2 100644
--- a/apps/scandic-web/components/Blocks/CampaignHotelListing/Client.tsx
+++ b/apps/scandic-web/components/Blocks/CampaignHotelListing/Client.tsx
@@ -20,6 +20,7 @@ import type { HotelDataWithUrl } from "@scandic-hotels/trpc/types/hotel"
interface CampaignHotelListingClientProps {
heading: string
+ preamble?: string | null
hotels: HotelDataWithUrl[]
visibleCountMobile?: 3 | 6
visibleCountDesktop?: 3 | 6
@@ -27,6 +28,7 @@ interface CampaignHotelListingClientProps {
export default function CampaignHotelListingClient({
heading,
+ preamble,
hotels,
visibleCountMobile = 3,
visibleCountDesktop = 6,
@@ -46,7 +48,7 @@ export default function CampaignHotelListingClient({
)
// Only show the show more/less button if the length of hotels exceeds the threshold count
- const showButton = hotels.length >= thresholdCount
+ const showButton = hotels.length > thresholdCount
// Determine if we are at the stage where the user can click to show all hotels
const canShowAll =
@@ -93,6 +95,11 @@ export default function CampaignHotelListingClient({
{heading}
+ {preamble ? (
+
+ {preamble}
+
+ ) : null}
{hotels.map(({ hotel, url }, index) => (
diff --git a/apps/scandic-web/components/Blocks/CampaignHotelListing/campaignHotelListing.module.css b/apps/scandic-web/components/Blocks/CampaignHotelListing/campaignHotelListing.module.css
index e90fc592e..6faa7cd3a 100644
--- a/apps/scandic-web/components/Blocks/CampaignHotelListing/campaignHotelListing.module.css
+++ b/apps/scandic-web/components/Blocks/CampaignHotelListing/campaignHotelListing.module.css
@@ -8,6 +8,11 @@
scroll-margin-top: var(--scroll-margin-top);
}
+.header {
+ display: grid;
+ gap: var(--Space-x15);
+}
+
.list {
list-style: none;
display: grid;
diff --git a/apps/scandic-web/components/Blocks/CampaignHotelListing/index.tsx b/apps/scandic-web/components/Blocks/CampaignHotelListing/index.tsx
index d0e98f982..3eeaa1b40 100644
--- a/apps/scandic-web/components/Blocks/CampaignHotelListing/index.tsx
+++ b/apps/scandic-web/components/Blocks/CampaignHotelListing/index.tsx
@@ -4,6 +4,7 @@ import CampaignHotelListingClient from "./Client"
interface CampaignHotelListingProps {
heading: string
+ preamble?: string | null
hotelIds: string[]
visibleCountMobile?: 3 | 6
visibleCountDesktop?: 3 | 6
@@ -11,6 +12,7 @@ interface CampaignHotelListingProps {
export default async function CampaignHotelListing({
heading,
+ preamble,
hotelIds,
visibleCountMobile,
visibleCountDesktop,
@@ -24,6 +26,7 @@ export default async function CampaignHotelListing({
return (
)
+ case BlocksEnums.block.CampaignOverviewPageHotelListing:
+ return (
+
+ )
default:
return null
}
diff --git a/packages/trpc/lib/graphql/Fragments/Blocks/HotelListing.graphql b/packages/trpc/lib/graphql/Fragments/Blocks/HotelListing.graphql
index 053d7ab0e..50964ae06 100644
--- a/packages/trpc/lib/graphql/Fragments/Blocks/HotelListing.graphql
+++ b/packages/trpc/lib/graphql/Fragments/Blocks/HotelListing.graphql
@@ -29,3 +29,19 @@ fragment HotelListing_CampaignPage on CampaignPageBlocksHotelListing {
heading
}
}
+
+fragment HotelListing_CampaignOverviewPage on CampaignOverviewPageBlocksHotelListing {
+ hotel_listing {
+ heading
+ preamble
+ included_hotelsConnection {
+ edges {
+ node {
+ ... on HotelPage {
+ hotel_page_id
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/packages/trpc/lib/graphql/Query/CampaignOverviewPage/CampaignOverviewPage.graphql b/packages/trpc/lib/graphql/Query/CampaignOverviewPage/CampaignOverviewPage.graphql
index 1d2b69649..93586dc11 100644
--- a/packages/trpc/lib/graphql/Query/CampaignOverviewPage/CampaignOverviewPage.graphql
+++ b/packages/trpc/lib/graphql/Query/CampaignOverviewPage/CampaignOverviewPage.graphql
@@ -4,6 +4,7 @@
#import "../../Fragments/CampaignOverviewPage/TopCampaign.graphql"
#import "../../Fragments/Blocks/CarouselCards.graphql"
+#import "../../Fragments/Blocks/HotelListing.graphql"
query GetCampaignOverviewPage($locale: String!, $uid: String!) {
campaign_overview_page(uid: $uid, locale: $locale) {
@@ -23,6 +24,7 @@ query GetCampaignOverviewPage($locale: String!, $uid: String!) {
blocks {
__typename
...CarouselCards_CampaignOverviewPage
+ ...HotelListing_CampaignOverviewPage
}
system {
...System
diff --git a/packages/trpc/lib/routers/contentstack/campaignOverviewPage/output.ts b/packages/trpc/lib/routers/contentstack/campaignOverviewPage/output.ts
index 01dac1549..9a5c7bc9c 100644
--- a/packages/trpc/lib/routers/contentstack/campaignOverviewPage/output.ts
+++ b/packages/trpc/lib/routers/contentstack/campaignOverviewPage/output.ts
@@ -12,6 +12,7 @@ import {
carouselCardsRefsSchema,
carouselCardsSchema,
} from "../schemas/blocks/carouselCards"
+import { campaignOverviewPageHotelListingSchema } from "../schemas/blocks/hotelListing"
import {
linkAndTitleSchema,
linkConnectionRefs,
@@ -70,8 +71,17 @@ const campaignOverviewPageCarouselCards = z
})
.merge(carouselCardsSchema)
+export const campaignOverviewPageHotelListing = z
+ .object({
+ __typename: z.literal(
+ CampaignOverviewPageEnum.ContentStack.blocks.HotelListing
+ ),
+ })
+ .merge(campaignOverviewPageHotelListingSchema)
+
export const blocksSchema = z.discriminatedUnion("__typename", [
campaignOverviewPageCarouselCards,
+ campaignOverviewPageHotelListing,
])
export const campaignOverviewPageSchema = z.object({
diff --git a/packages/trpc/lib/routers/contentstack/schemas/blocks/hotelListing.ts b/packages/trpc/lib/routers/contentstack/schemas/blocks/hotelListing.ts
index fc3523bf1..e6d1b7539 100644
--- a/packages/trpc/lib/routers/contentstack/schemas/blocks/hotelListing.ts
+++ b/packages/trpc/lib/routers/contentstack/schemas/blocks/hotelListing.ts
@@ -69,3 +69,34 @@ export const campaignPageHotelListingSchema = z.object({
heading: z.string(),
}),
})
+
+export const campaignOverviewPageHotelListingSchema = z.object({
+ typename: z
+ .literal(BlocksEnums.block.CampaignOverviewPageHotelListing)
+ .default(BlocksEnums.block.CampaignOverviewPageHotelListing),
+ hotel_listing: z
+ .object({
+ heading: z.string(),
+ preamble: z.string().nullish(),
+ included_hotelsConnection: z.object({
+ edges: z.array(
+ z.object({
+ node: z.object({
+ hotel_page_id: z.string(),
+ }),
+ })
+ ),
+ }),
+ })
+ .transform((data) => {
+ const { included_hotelsConnection, ...rest } = data
+ const hotelIds = data.included_hotelsConnection.edges
+ .map(({ node }) => node.hotel_page_id)
+ .filter(Boolean)
+
+ return {
+ ...rest,
+ hotelIds,
+ }
+ }),
+})
diff --git a/packages/trpc/lib/types/blocks.ts b/packages/trpc/lib/types/blocks.ts
index 403df8f42..5807dbb06 100644
--- a/packages/trpc/lib/types/blocks.ts
+++ b/packages/trpc/lib/types/blocks.ts
@@ -7,6 +7,7 @@ export namespace BlocksEnums {
Content = "Content",
DynamicContent = "DynamicContent",
FullWidthCampaign = "FullWidthCampaign",
+ CampaignOverviewPageHotelListing = "CampaignOverviewPageHotelListing",
CampaignPageHotelListing = "CampaignPageHotelListing",
ContentPageHotelListing = "ContentPageHotelListing",
JoinScandicFriends = "JoinScandicFriends",
diff --git a/packages/trpc/lib/types/campaignOverviewPageEnum.ts b/packages/trpc/lib/types/campaignOverviewPageEnum.ts
index 7396c4798..75f442971 100644
--- a/packages/trpc/lib/types/campaignOverviewPageEnum.ts
+++ b/packages/trpc/lib/types/campaignOverviewPageEnum.ts
@@ -2,6 +2,7 @@ export namespace CampaignOverviewPageEnum {
export namespace ContentStack {
export const enum blocks {
CarouselCards = "CampaignOverviewPageBlocksCarouselCards",
+ HotelListing = "CampaignOverviewPageBlocksHotelListing",
}
}
}