diff --git a/components/Content/Blocks/CardsGrid/index.tsx b/components/Content/Blocks/CardsGrid/index.tsx index 32b3c8f7f..a647560f7 100644 --- a/components/Content/Blocks/CardsGrid/index.tsx +++ b/components/Content/Blocks/CardsGrid/index.tsx @@ -1,6 +1,7 @@ import SectionContainer from "@/components/Section/Container" import SectionHeader from "@/components/Section/Header" import Card from "@/components/TempDesignSystem/Card" +import ContentCard from "@/components/TempDesignSystem/ContentCard" import Grids from "@/components/TempDesignSystem/Grids" import LoyaltyCard from "@/components/TempDesignSystem/LoyaltyCard" @@ -22,17 +23,32 @@ export default function CardsGrid({ {cards_grid.cards.map((card) => { switch (card.__typename) { case CardsGridEnum.Card: { - return ( - - ) + if (card.isContentCard) { + return ( + + ) + } else { + return ( + + ) + } } case CardsGridEnum.LoyaltyCard: return ( diff --git a/components/ContentType/HotelPage/index.tsx b/components/ContentType/HotelPage/index.tsx index 9770cfe33..f37750db4 100644 --- a/components/ContentType/HotelPage/index.tsx +++ b/components/ContentType/HotelPage/index.tsx @@ -1,8 +1,6 @@ import { env } from "@/env/server" import { serverClient } from "@/lib/trpc/server" -import ContentCard from "@/components/TempDesignSystem/ContentCard" - import { MOCK_FACILITIES } from "./Facilities/mockData" import { setActivityCard } from "./Facilities/utils" import DynamicMap from "./Map/DynamicMap" @@ -67,35 +65,6 @@ export default async function HotelPage() { - {/* NOTE: These are added here for testing. Remove before PR */} - {/* Example of ContentCard with Button CTA's */} - - - {/* Example of ContentCard with SidePeek */} - {googleMapsApiKey ? ( <> diff --git a/components/TempDesignSystem/ContentCard/index.tsx b/components/TempDesignSystem/ContentCard/index.tsx index 0185ad239..bdde9de6f 100644 --- a/components/TempDesignSystem/ContentCard/index.tsx +++ b/components/TempDesignSystem/ContentCard/index.tsx @@ -16,9 +16,9 @@ import type { ContentCardProps } from "@/types/components/contentCard" export default function ContentCard({ title, description, - primaryCTA, - secondaryCTA, - sidePeekCTA, + primaryButton, + secondaryButton, + sidePeekButton, backgroundImage, style = "default", alwaysStack = false, @@ -31,8 +31,8 @@ export default function ContentCard({ {backgroundImage && (
{description} - {sidePeekCTA ? ( + {!!sidePeekButton ? ( ) : (
- {primaryCTA && ( + {primaryButton && ( )} - {secondaryCTA && ( + {secondaryButton && ( )} diff --git a/lib/graphql/Fragments/Blocks/Card.graphql b/lib/graphql/Fragments/Blocks/Card.graphql index 0fb2e416c..d10ee4d5c 100644 --- a/lib/graphql/Fragments/Blocks/Card.graphql +++ b/lib/graphql/Fragments/Blocks/Card.graphql @@ -1,30 +1,13 @@ fragment CardBlock on Card { + is_content_card heading body_text background_image scripted_top_title title - has_secondary_button - secondary_button { - is_contentstack_link - cta_text - open_in_new_tab - external_link { - title - href - } - linkConnection { - edges { - node { - __typename - ...LoyaltyPageLink - ...ContentPageLink - ...AccountPageLink - } - } - } - } has_primary_button + has_secondary_button + has_sidepeek_button primary_button { is_contentstack_link cta_text @@ -44,6 +27,28 @@ fragment CardBlock on Card { } } } + secondary_button { + is_contentstack_link + cta_text + open_in_new_tab + external_link { + title + href + } + linkConnection { + edges { + node { + __typename + ...LoyaltyPageLink + ...ContentPageLink + ...AccountPageLink + } + } + } + } + sidepeek_button { + call_to_action_text + } system { locale uid diff --git a/server/routers/contentstack/contentPage/output.ts b/server/routers/contentstack/contentPage/output.ts index b6b920a78..1aa324041 100644 --- a/server/routers/contentstack/contentPage/output.ts +++ b/server/routers/contentstack/contentPage/output.ts @@ -68,6 +68,7 @@ export const contentPageDynamicContent = z.object({ export const cardBlock = z.object({ __typename: z.literal(CardsGridEnum.Card), + isContentCard: z.boolean(), heading: z.string().nullable(), body_text: z.string().nullable(), background_image: z.any(), @@ -88,6 +89,11 @@ export const cardBlock = z.object({ isExternal: z.boolean(), }) .optional(), + sidePeekButton: z + .object({ + title: z.string(), + }) + .optional(), system: z.object({ locale: z.nativeEnum(Lang), uid: z.string(), diff --git a/server/routers/contentstack/contentPage/query.ts b/server/routers/contentstack/contentPage/query.ts index c37adbd68..16ff7e7c1 100644 --- a/server/routers/contentstack/contentPage/query.ts +++ b/server/routers/contentstack/contentPage/query.ts @@ -102,6 +102,7 @@ export const contentPageQueryRouter = router({ case CardsGridEnum.Card: return { ...card, + isContentCard: !!card.is_content_card, backgroundImage: makeImageVaultImage( card.background_image ), @@ -111,6 +112,14 @@ export const contentPageQueryRouter = router({ secondaryButton: card.has_secondary_button ? makeButtonObject(card.secondary_button) : undefined, + sidePeekButton: + card.has_sidepeek_button || + !!card.sidepeek_button?.call_to_action_text + ? { + title: + card.sidepeek_button.call_to_action_text, + } + : undefined, } case CardsGridEnum.LoyaltyCard: return { diff --git a/types/components/contentCard.ts b/types/components/contentCard.ts index cc5d27279..8e05bfbdc 100644 --- a/types/components/contentCard.ts +++ b/types/components/contentCard.ts @@ -1,27 +1,21 @@ import { VariantProps } from "class-variance-authority" +import { CardProps } from "@/components/TempDesignSystem/Card/card" import { contentCardVariants } from "@/components/TempDesignSystem/ContentCard/variants" -export interface CTA { - label: string - href: string - openInNewTab?: boolean -} +import { ImageVaultAsset } from "@/types/components/imageVault" -export interface SidePeekCTA { - label: string - // onClick: () => void - // TODO: change back to function. - onClick: boolean +export interface SidePeekButton { + title: string } export interface ContentCardProps extends VariantProps { title: string description: string - primaryCTA?: CTA - secondaryCTA?: CTA - sidePeekCTA?: SidePeekCTA - backgroundImage?: string + primaryButton?: CardProps["primaryButton"] + secondaryButton?: CardProps["secondaryButton"] + sidePeekButton?: SidePeekButton + backgroundImage?: ImageVaultAsset className?: string }