scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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)
This commit is contained in:
Matilda Landström
2025-12-10 12:29:23 +00:00
parent fde77a06ce
commit 5bcbc23732
9 changed files with 181 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
apps/scandic-web/components/ContentType/CampaignOverviewPage/TopCampaign/index.tsx
View File

@@ -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} />
<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}
/>
<CampaignContent />
</section>
)
}

3
apps/scandic-web/components/ContentType/CampaignOverviewPage/index.tsx
View File

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

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

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

14
packages/trpc/lib/graphql/Fragments/Blocks/AllCampaigns.graphql.ts
View File

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

20
packages/trpc/lib/graphql/Fragments/CampaignOverviewPage/TopCampaign.graphql.ts
View File

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

7
packages/trpc/lib/graphql/Query/CampaignOverviewPage/CampaignOverviewPage.graphql.ts
View File

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

97
packages/trpc/lib/routers/contentstack/campaignOverviewPage/output.ts
View File

@@ -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,
included_hotels: includedHotelsSchema,
blocks: discriminatedUnionArray(campaignPageBlocksSchema.options),
url: z.string(),
__typename: z.literal(ContentEnum.blocks.CampaignPage),
})
.transform((data) => {
const { blocks, included_hotels, ...rest } = data
const hotelListingBlock = blocks.find(
(block) =>
block.__typename === CampaignPageEnum.ContentStack.blocks.HotelListing
)
.merge(topCampaign)
return {
...rest,
hotel_listing: {
heading: hotelListingBlock?.hotel_listing.heading || "",
hotelIds: included_hotels,
},
}
export const transformTopCampaign = (data: z.infer<typeof topCampaign>) => {
const { blocks, included_hotels, ...rest } = data
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({
@@ -109,9 +152,23 @@ 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),
}
})
),
}),
}),

7
packages/trpc/lib/routers/contentstack/schemas/blocks/allCampaigns.ts
View File

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

24
packages/trpc/lib/types/campaignOverviewPage.ts
View File

@@ -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]