diff --git a/components/JsonToHtml/renderOptions.tsx b/components/JsonToHtml/renderOptions.tsx index 1cfd100f8..fc04fadec 100644 --- a/components/JsonToHtml/renderOptions.tsx +++ b/components/JsonToHtml/renderOptions.tsx @@ -253,7 +253,7 @@ export const renderOptions: RenderOptions = { const type = node.attrs.type if (type === RTEItemTypeEnum.asset) { const image = embeds?.[node?.attrs?.["asset-uid"]] - if (image.node.__typename === EmbedEnum.SysAsset) { + if (image?.node.__typename === EmbedEnum.SysAsset) { const alt = image?.node?.title ?? node.attrs.alt const alignment = node.attrs?.style?.["text-align"] ? { diff --git a/components/JsonToHtml/utils.tsx b/components/JsonToHtml/utils.tsx index 2e724738e..f368e380c 100644 --- a/components/JsonToHtml/utils.tsx +++ b/components/JsonToHtml/utils.tsx @@ -14,7 +14,7 @@ import type { RenderOptions } from "@/types/rte/option" export function groupEmbedsByUid(embedsArray: Node[]) { const embedsByUid = embedsArray.reduce((acc, embed) => { - if (embed.node.system.uid) { + if (embed.node.system?.uid) { acc[embed.node.system.uid] = embed } return acc diff --git a/components/Loyalty/Sidebar/JoinLoyalty/Contact/contact.module.css b/components/Loyalty/Sidebar/JoinLoyalty/Contact/contact.module.css index 38dbcdf35..f3e4f78ef 100644 --- a/components/Loyalty/Sidebar/JoinLoyalty/Contact/contact.module.css +++ b/components/Loyalty/Sidebar/JoinLoyalty/Contact/contact.module.css @@ -8,7 +8,7 @@ flex-direction: column; align-items: center; justify-content: center; - border-top: 0.5px solid var(--Base-Border-Disabled); + border-top: 0.5px solid var(--UI-Grey-30); padding: 3.4rem; text-align: center; gap: 6.2rem; diff --git a/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css b/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css index 442cb4dc0..2727e8000 100644 --- a/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css +++ b/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css @@ -46,7 +46,7 @@ .contactContainer { display: block; - border-top: 0.5px solid var(--Base-Border-Disabled); + border-top: 0.5px solid var(--UI-Grey-30); display: flex; justify-content: center; padding: 3.4rem; diff --git a/components/TempDesignSystem/Card/card.module.css b/components/TempDesignSystem/Card/card.module.css index cb90e9735..aa62ab967 100644 --- a/components/TempDesignSystem/Card/card.module.css +++ b/components/TempDesignSystem/Card/card.module.css @@ -7,7 +7,7 @@ width: 100%; margin-right: 1.6rem; border-radius: 1.6rem; - gap: var(--x2, 16px); + gap: var(--Spacing-x2); padding: 0px 3.2rem; text-align: center; @@ -46,11 +46,10 @@ color: var(--script-color); font-family: var(--ff-biro-script-plus); - font-size: var(--Script-1, 2.4rem); - font-style: normal; - font-weight: 400; - line-height: 110%; /* 1.65rem */ - letter-spacing: 0.03rem; + font-size: var(--typography-Script-2-fontSize); + font-weight: var(--typography-Script-2-fontWeight); + line-height: var(--typography-Script-2-lineHeight); + letter-spacing: 0.48px; padding: 1rem; transform: rotate(-3deg); @@ -68,10 +67,9 @@ color: var(--font-color); text-align: center; - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: 150%; + font-size: var(--typography-Body-Regular-fontSize); + font-weight: var(--typography-Body-Regular-fontWeight); + line-height: var(--typography-Body-Regular-lineHeight); letter-spacing: 0.096px; } diff --git a/components/Title/title.module.css b/components/Title/title.module.css index 8c98f86bc..cedb56bbd 100644 --- a/components/Title/title.module.css +++ b/components/Title/title.module.css @@ -2,7 +2,7 @@ /* font-family: var(--ff-brandon-text); */ margin: 0; padding: 0; - color: var(--Brand-Main-Strong); + color: var(--Scandic-Brand-Burgundy); } .uppercase { diff --git a/server/routers/contentstack/loyaltyPage/output.ts b/server/routers/contentstack/loyaltyPage/output.ts index 87d4cc895..73dc9e2c1 100644 --- a/server/routers/contentstack/loyaltyPage/output.ts +++ b/server/routers/contentstack/loyaltyPage/output.ts @@ -21,9 +21,15 @@ const pageLink = z.object({ uid: z.string(), locale: z.nativeEnum(Lang), }), + web: z + .object({ + original_url: z.string().nullable(), + }) + .nullable() + .optional(), url: z.string(), title: z.string(), - __typename: z.string(), + __typename: z.string().optional(), }), }) ), @@ -39,21 +45,7 @@ const loyaltyPageDynamicContent = z.object({ component: z.nativeEnum(LoyaltyComponentEnum), link: z.object({ text: z.string().nullable(), - pageConnection: z.object({ - edges: z.array( - z.object({ - node: z.object({ - system: z.object({ - uid: z.string(), - locale: z.nativeEnum(Lang), - }), - url: z.string(), - title: z.string(), - }), - }) - ), - totalCount: z.number(), - }), + pageConnection: pageLink, }), }), }) @@ -65,27 +57,7 @@ const loyaltyPageShortcuts = z.object({ preamble: z.string().nullable(), shortcuts: z.array( z.object({ - linkConnection: z.object({ - edges: z.array( - z.object({ - node: z.object({ - system: z.object({ - uid: z.string(), - locale: z.nativeEnum(Lang), - }), - url: z.string(), - web: z - .object({ - original_url: z.string().nullable(), - }) - .nullable() - .optional(), - title: z.string(), - }), - }) - ), - totalCount: z.number(), - }), + linkConnection: pageLink, text: z.string().nullable(), open_in_new_tab: z.boolean(), }) @@ -193,7 +165,6 @@ const loyaltyPageJoinLoyaltyContact = z.object({ ), contact: z.object({ display_text: z.string().nullable(), - contact_field: z.string(), }), }) @@ -243,38 +214,29 @@ export interface RteBlockContent extends BlockContentRaw { type CardsGridRaw = z.infer +export type CardsRaw = + CardsGridRaw["cards_grid"]["cardConnection"]["edges"][number]["node"] + export type CardsGrid = Omit & { cards_grid: Omit & { - cards: { - system: { - locale: Lang - uid: string - } - heading: string | null - body_text: string | null - scripted_top_title: string | null + cards: (Omit & { primaryButton: | { - open_in_new_tab: boolean - link: { - title: string - href: string - } + openInNewTab: boolean + title: string + href: string isExternal: boolean } | undefined secondaryButton: | { - open_in_new_tab: boolean - link: { - title: string - href: string - } + openInNewTab: boolean + title: string + href: string isExternal: boolean } | undefined - background_image?: any - }[] + })[] } } diff --git a/server/routers/contentstack/loyaltyPage/query.ts b/server/routers/contentstack/loyaltyPage/query.ts index a0da16d26..9f7e4aafe 100644 --- a/server/routers/contentstack/loyaltyPage/query.ts +++ b/server/routers/contentstack/loyaltyPage/query.ts @@ -5,7 +5,7 @@ import { import { request } from "@/lib/graphql/request" import { _ } from "@/lib/translation" import { internalServerError, notFound } from "@/server/errors/trpc" -import { contentstackProcedure, publicProcedure, router } from "@/server/trpc" +import { contentstackProcedure, router } from "@/server/trpc" import { generateRefsResponseTag, @@ -15,6 +15,7 @@ import { import { removeEmptyObjects } from "../../utils" import { + CardsRaw, type LoyaltyPage, type LoyaltyPageDataRaw, type LoyaltyPageRefsDataRaw, @@ -31,6 +32,26 @@ import { Embeds } from "@/types/requests/embeds" import { Edges } from "@/types/requests/utils/edges" import { RTEDocument } from "@/types/rte/node" +function makeButtonObject( + button: CardsRaw["primary_button" | "secondary_button"] +) { + if (!button) return undefined + return { + openInNewTab: button.open_in_new_tab, + title: + button.cta_text || + (button.is_contentstack_link && button.linkConnection.edges.length + ? button.linkConnection.edges[0].node.title + : button.external_link.title), + href: + button.is_contentstack_link && button.linkConnection.edges.length + ? button.linkConnection.edges[0].node.web?.original_url || + `/${button.linkConnection.edges[0].node.system.locale}${button.linkConnection.edges[0].node.url}` + : button.external_link.href, + isExternal: !button.is_contentstack_link, + } +} + export const loyaltyPageQueryRouter = router({ get: contentstackProcedure.query(async ({ ctx }) => { const { lang, uid } = ctx @@ -121,7 +142,7 @@ export const loyaltyPageQueryRouter = router({ ...block, dynamic_content: { ...block.dynamic_content, - link: block.dynamic_content.link.pageConnection.totalCount + link: block.dynamic_content.link.pageConnection.edges.length ? { text: block.dynamic_content.link.text, href: `/${block.dynamic_content.link.pageConnection.edges[0].node.system.locale}${block.dynamic_content.link.pageConnection.edges[0].node.url}`, @@ -165,58 +186,12 @@ export const loyaltyPageQueryRouter = router({ ...block.cards_grid, cards: block.cards_grid.cardConnection.edges.map( ({ node: card }) => { - const primaryButton = card.primary_button - ? { - open_in_new_tab: - card.primary_button.open_in_new_tab, - link: { - title: - card.primary_button.cta_text || - (card.primary_button.is_contentstack_link && - card.primary_button.linkConnection.edges.length - ? card.primary_button.linkConnection.edges[0] - .node.title - : card.primary_button.external_link.title), - href: - card.primary_button.is_contentstack_link && - card.primary_button.linkConnection.edges.length - ? `/${card.primary_button.linkConnection.edges[0].node.system.locale}${card.primary_button.linkConnection.edges[0].node.url}` - : card.primary_button.external_link.href, - }, - isExternal: - !card.primary_button.is_contentstack_link, - } - : undefined - - const secondaryButton = card.secondary_button - ? { - open_in_new_tab: - card.secondary_button.open_in_new_tab, - link: { - title: - card.secondary_button.cta_text || - (card.secondary_button.is_contentstack_link && - card.secondary_button.linkConnection.edges - .length - ? card.secondary_button.linkConnection - .edges[0].node.title - : card.secondary_button.external_link.title), - href: - card.secondary_button.is_contentstack_link && - card.secondary_button.linkConnection.edges - .length - ? `/${card.secondary_button.linkConnection.edges[0].node.system.locale}${card.secondary_button.linkConnection.edges[0].node.url}` - : card.secondary_button.external_link.title, - }, - isExternal: - !card.secondary_button.is_contentstack_link, - } - : undefined - return { ...card, - primaryButton, - secondaryButton, + primaryButton: makeButtonObject(card.primary_button), + secondaryButton: makeButtonObject( + card.secondary_button + ), } } ),