fix: refactor use of tokens

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

components/JsonToHtml/utils.tsx

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

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;

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;

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-size: var(--typography-Script-2-fontSize);
-  font-style: normal;
+  font-weight: var(--typography-Script-2-fontWeight);
-  font-weight: 400;
+  line-height: var(--typography-Script-2-lineHeight);
-  line-height: 110%; /* 1.65rem */
+  letter-spacing: 0.48px;
-  letter-spacing: 0.03rem;
   padding: 1rem;
 
   transform: rotate(-3deg);
@@ -68,10 +67,9 @@
   color: var(--font-color);
   text-align: center;
 
-  font-size: 16px;
+  font-size: var(--typography-Body-Regular-fontSize);
-  font-style: normal;
+  font-weight: var(--typography-Body-Regular-fontWeight);
-  font-weight: 400;
+  line-height: var(--typography-Body-Regular-lineHeight);
-  line-height: 150%;
   letter-spacing: 0.096px;
 }
 

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 {

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({
+      pageConnection: pageLink,
-        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(),
-      }),
     }),
   }),
 })
@@ -65,27 +57,7 @@ const loyaltyPageShortcuts = z.object({
     preamble: z.string().nullable(),
     shortcuts: z.array(
       z.object({
-        linkConnection: z.object({
+        linkConnection: pageLink,
-          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(),
-        }),
         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: {
+    cards: (Omit<CardsRaw, "primaryButton" | "secondaryButton"> & {
-      system: {
-        locale: Lang
-        uid: string
-      }
-      heading: string | null
-      body_text: string | null
-      scripted_top_title: string | null
       primaryButton:
         | {
-            open_in_new_tab: boolean
+            openInNewTab: boolean
-            link: {
+            title: string
-              title: string
+            href: string
-              href: string
-            }
             isExternal: boolean
           }
         | undefined
       secondaryButton:
         | {
-            open_in_new_tab: boolean
+            openInNewTab: boolean
-            link: {
+            title: string
-              title: string
+            href: string
-              href: string
-            }
             isExternal: boolean
           }
         | undefined
-      background_image?: any
+    })[]
-    }[]
   }
 }
 

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,
+                        primaryButton: makeButtonObject(card.primary_button),
-                        secondaryButton,
+                        secondaryButton: makeButtonObject(
+                          card.secondary_button
+                        ),
                       }
                     }
                   ),