fix: refactor use of tokens

This commit is contained in:
Christel Westerberg
2024-05-21 15:17:12 +02:00
parent ad343aa666
commit a19b0687bb
8 changed files with 60 additions and 125 deletions

View File

@@ -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"]
? {

View File

@@ -14,7 +14,7 @@ import type { RenderOptions } from "@/types/rte/option"
export function groupEmbedsByUid(embedsArray: Node<Embeds>[]) {
const embedsByUid = embedsArray.reduce<EmbedByUid>((acc, embed) => {
if (embed.node.system.uid) {
if (embed.node.system?.uid) {
acc[embed.node.system.uid] = embed
}
return acc

View File

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

View File

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

View File

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

View File

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

View File

@@ -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<typeof loyaltyPageCards>
export type CardsRaw =
CardsGridRaw["cards_grid"]["cardConnection"]["edges"][number]["node"]
export type CardsGrid = Omit<CardsGridRaw, "cards_grid"> & {
cards_grid: Omit<CardsGridRaw["cards_grid"], "cardConnection"> & {
cards: {
system: {
locale: Lang
uid: string
}
heading: string | null
body_text: string | null
scripted_top_title: string | null
cards: (Omit<CardsRaw, "primaryButton" | "secondaryButton"> & {
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
}[]
})[]
}
}

View File

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