refactor: infer types from zod validation

components/Loyalty/Blocks/CardGrid/index.tsx

@@ -35,16 +35,9 @@ export default function CardGrid({ card_grid }: CardGridProps) {
 }
 
 function CardWrapper({ card }: CardProps) {
-  const link = card.referenceConnection.edges.length
-    ? {
-        href: card.referenceConnection.edges[0].node.url,
-        title: _("Read more"),
-      }
-    : undefined
-
   return (
     <div className={styles.cardWrapper}>
-      <Card subtitle={card.subtitle} title={card.title} link={link} />
+      <Card subtitle={card.subtitle} title={card.title} link={card.link} />
     </div>
   )
 }

components/Loyalty/Blocks/DynamicContent/index.tsx

@@ -7,13 +7,13 @@ import OverviewTable from "./OverviewTable"
 
 import styles from "./dynamicContent.module.css"
 
-import { DynamicContentProps } from "@/types/components/loyalty/blocks"
-import {
-  LoyaltyComponent,
-  LoyaltyComponentEnum,
-} from "@/types/requests/loyaltyPage"
+import type {
+  DynamicComponentProps,
+  DynamicContentProps,
+} from "@/types/components/loyalty/blocks"
+import { LoyaltyComponentEnum } from "@/types/requests/loyaltyPage"
 
-function DynamicComponentBlock({ component }: { component: LoyaltyComponent }) {
+function DynamicComponentBlock({ component }: DynamicComponentProps) {
   switch (component) {
     case LoyaltyComponentEnum.how_it_works:
       return <HowItWorks />
@@ -30,9 +30,6 @@ function DynamicComponentBlock({ component }: { component: LoyaltyComponent }) {
 export default function DynamicContent({
   dynamicContent,
 }: DynamicContentProps) {
-  const link = dynamicContent.link.pageConnection.edges.length
-    ? dynamicContent.link.pageConnection.edges[0].node.url
-    : null
   return (
     <section className={styles.container}>
       <header>
@@ -48,11 +45,11 @@ export default function DynamicContent({
               {dynamicContent.title}
             </Title>
           )}
-          {link && (
-            <Link className={styles.link} href={link}>
+          {dynamicContent.link ? (
+            <Link className={styles.link} href={dynamicContent.link.href}>
               {dynamicContent.link.text}
             </Link>
-          )}
+          ) : null}
         </div>
         {dynamicContent.subtitle && (
           <Title

components/Loyalty/Blocks/index.tsx

@@ -3,12 +3,10 @@ import DynamicContentBlock from "@/components/Loyalty/Blocks/DynamicContent"
 
 import CardGrid from "./CardGrid"
 
-import {
-  Blocks as BlocksType,
-  LoyaltyBlocksTypenameEnum,
-} from "@/types/requests/loyaltyPage"
+import type { BlocksProps } from "@/types/components/loyalty/blocks"
+import { LoyaltyBlocksTypenameEnum } from "@/types/requests/loyaltyPage"
 
-export function Blocks({ blocks }: { blocks: BlocksType[] }) {
+export function Blocks({ blocks }: BlocksProps) {
   return blocks.map((block) => {
     switch (block.__typename) {
       case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksCardGrid:
@@ -16,8 +14,8 @@ export function Blocks({ blocks }: { blocks: BlocksType[] }) {
       case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksContent:
         return (
           <JsonToHtml
-            nodes={block.content.json.children}
-            embeds={block.content.embedded_itemsConnection.edges}
+            nodes={block.content.content.json.children}
+            embeds={block.content.content.embedded_itemsConnection.edges}
           />
         )
       case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksDynamicContent:

components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx

@@ -1,9 +1,10 @@
+import { Lang } from "@/constants/languages"
 import { serverClient } from "@/lib/trpc/server"
+
 import { getValueFromContactConfig } from "@/utils/contactConfig"
 
 import styles from "./contactRow.module.css"
 
-import { Lang } from "@/constants/languages"
 import type { ContactFields } from "@/types/requests/contactConfig"
 
 export default async function ContactRow({
@@ -16,6 +17,11 @@ export default async function ContactRow({
   })
 
   const val = getValueFromContactConfig(contact.contact_field, data)
+
+  if (!val) {
+    return null
+  }
+
   return (
     <div className={styles.container}>
       <h4 className={styles.title}>{contact.display_text}</h4>

components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx

@@ -1,20 +1,28 @@
+import { _ } from "@/lib/translation"
+
 import Title from "@/components/Title"
+
 import ContactRow from "./ContactRow"
 
 import styles from "./contact.module.css"
 
-import { JoinLoyaltyContactTypenameEnum } from "@/types/requests/loyaltyPage"
 import type { ContactProps } from "@/types/components/loyalty/sidebar"
+import { JoinLoyaltyContactTypenameEnum } from "@/types/requests/loyaltyPage"
 
 export default async function Contact({ contactBlock }: ContactProps) {
   return (
     <div className={styles.contactContainer}>
-      <Title level="h5">Contact us</Title>
+      <Title level="h5">{_("Contact us")}</Title>
       <section>
-        {contactBlock.map(({ contact, __typename }) => {
+        {contactBlock.map(({ contact, __typename }, i) => {
           switch (__typename) {
             case JoinLoyaltyContactTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContactBlockContactContact:
-              return <ContactRow contact={contact} />
+              return (
+                <ContactRow
+                  key={`${contact.display_text}-i`}
+                  contact={contact}
+                />
+              )
             default:
               return null
           }

components/Loyalty/Sidebar/JoinLoyalty/index.tsx

@@ -9,13 +9,9 @@ import Contact from "./Contact"
 
 import styles from "./joinLoyalty.module.css"
 
-import type { JoinLoyaltyContact } from "@/types/requests/loyaltyPage"
+import type { JoinLoyaltyContactProps } from "@/types/components/loyalty/sidebar"
 
-export default function JoinLoyaltyContact({
-  block,
-}: {
-  block: JoinLoyaltyContact["join_loyalty_contact"]
-}) {
+export default function JoinLoyaltyContact({ block }: JoinLoyaltyContactProps) {
   return (
     <div className={styles.container}>
       <div className={styles.wrapper}>

components/Loyalty/Sidebar/index.tsx

@@ -2,15 +2,16 @@ import JsonToHtml from "@/components/JsonToHtml"
 
 import JoinLoyaltyContact from "./JoinLoyalty"
 
-import { Sidebar, SidebarTypenameEnum } from "@/types/requests/loyaltyPage"
+import { SidebarProps } from "@/types/components/loyalty/sidebar"
+import { SidebarTypenameEnum } from "@/types/requests/loyaltyPage"
 
-export default function SidebarLoyalty({ block }: { block: Sidebar }) {
+export default function SidebarLoyalty({ block }: SidebarProps) {
   switch (block.__typename) {
     case SidebarTypenameEnum.LoyaltyPageSidebarContent:
       return (
         <JsonToHtml
-          embeds={block.content.embedded_itemsConnection.edges}
-          nodes={block.content.json.children}
+          embeds={block.content.content.embedded_itemsConnection.edges}
+          nodes={block.content.content.json.children}
         />
       )
     case SidebarTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContact: