refactor: zod validation and pr comments

components/Loyalty/Blocks/CardGrid/index.tsx

@@ -5,7 +5,7 @@ import Title from "@/components/Title"
 
 import styles from "./cardGrid.module.css"
 
-import { CardGridProps, CardProps } from "@/types/components/loyalty/blocks"
+import { CardGridProps } from "@/types/components/loyalty/blocks"
 
 export default function CardGrid({ card_grid }: CardGridProps) {
   return (
@@ -27,17 +27,15 @@ export default function CardGrid({ card_grid }: CardGridProps) {
       </header>
       <div className={styles.cardContainer}>
         {card_grid.cards.map((card, i) => (
-          <CardWrapper key={`${card.title}+${i}`} card={card} />
+          <div className={styles.cardWrapper} key={`${card.title}+${i}`}>
+            <Card
+              subtitle={card.subtitle}
+              title={card.title}
+              link={card.link}
+            />
+          </div>
         ))}
       </div>
     </section>
   )
 }
-
-function CardWrapper({ card }: CardProps) {
-  return (
-    <div className={styles.cardWrapper}>
-      <Card subtitle={card.subtitle} title={card.title} link={card.link} />
-    </div>
-  )
-}

components/Loyalty/Blocks/DynamicContent/HowItWorks/index.tsx

@@ -4,10 +4,10 @@ import styles from "./howItWorks.module.css"
 
 export default function HowItWorks() {
   return (
-    <div className={styles.container}>
+    <section className={styles.container}>
       <Title level="h3" uppercase>
         How it works Placeholder
       </Title>
-    </div>
+    </section>
   )
 }

components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx

@@ -33,7 +33,7 @@ export default async function LoyaltyLevels() {
 
 function LevelCard({ level }: LevelCardProps) {
   return (
-    <div className={styles.card}>
+    <article className={styles.card}>
       <Title level="h4">{level.tier}</Title>
       <Image src={level.logo} alt={level.name} width={140} height={54} />
       <p className={styles.qualifications}>
@@ -45,6 +45,6 @@ function LevelCard({ level }: LevelCardProps) {
           {benefit}
         </p>
       ))}
-    </div>
+    </article>
   )
 }

components/Loyalty/Blocks/DynamicContent/dynamicContent.module.css

@@ -8,7 +8,7 @@
 
 .titleContainer {
   display: grid;
-  grid-template-areas: "title link";
+  grid-template-areas: "title link" "subtitle subtitle";
   grid-template-columns: 1fr max-content;
   padding-bottom: 0.8rem;
 }
@@ -25,4 +25,5 @@
 
 .subtitle {
   margin: 0;
+  grid-area: subtitle;
 }

components/Loyalty/Blocks/DynamicContent/index.tsx

@@ -32,25 +32,23 @@ export default function DynamicContent({
 }: DynamicContentProps) {
   return (
     <section className={styles.container}>
-      <header>
-        <div className={styles.titleContainer}>
-          {dynamicContent.title && (
-            <Title
-              as="h3"
-              level="h2"
-              className={styles.title}
-              weight="semiBold"
-              uppercase
-            >
-              {dynamicContent.title}
-            </Title>
-          )}
-          {dynamicContent.link ? (
-            <Link className={styles.link} href={dynamicContent.link.href}>
-              {dynamicContent.link.text}
-            </Link>
-          ) : null}
-        </div>
+      <header className={styles.titleContainer}>
+        {dynamicContent.title && (
+          <Title
+            as="h3"
+            level="h2"
+            className={styles.title}
+            weight="semiBold"
+            uppercase
+          >
+            {dynamicContent.title}
+          </Title>
+        )}
+        {dynamicContent.link ? (
+          <Link className={styles.link} href={dynamicContent.link.href}>
+            {dynamicContent.link.text}
+          </Link>
+        ) : null}
         {dynamicContent.subtitle && (
           <Title
             as="h5"

components/Loyalty/Blocks/index.tsx

@@ -13,10 +13,12 @@ export function Blocks({ blocks }: BlocksProps) {
         return <CardGrid card_grid={block.card_grid} />
       case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksContent:
         return (
-          <JsonToHtml
-            nodes={block.content.content.json.children}
-            embeds={block.content.content.embedded_itemsConnection.edges}
-          />
+          <section>
+            <JsonToHtml
+              nodes={block.content.content.json.children}
+              embeds={block.content.content.embedded_itemsConnection.edges}
+            />
+          </section>
         )
       case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksDynamicContent:
         return <DynamicContentBlock dynamicContent={block.dynamic_content} />

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

@@ -5,13 +5,9 @@ import { getValueFromContactConfig } from "@/utils/contactConfig"
 
 import styles from "./contactRow.module.css"
 
-import type { ContactFields } from "@/types/requests/contactConfig"
+import type { ContactRowProps } from "@/types/components/loyalty/sidebar"
 
-export default async function ContactRow({
-  contact,
-}: {
-  contact: ContactFields
-}) {
+export default async function ContactRow({ contact }: ContactRowProps) {
   const data = await serverClient().contentstack.contactConfig.get({
     lang: Lang.en,
   })

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

@@ -19,7 +19,7 @@ export default async function Contact({ contactBlock }: ContactProps) {
             case JoinLoyaltyContactTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContactBlockContactContact:
               return (
                 <ContactRow
-                  key={`${contact.display_text}-i`}
+                  key={`${contact.display_text}-${i}`}
                   contact={contact}
                 />
               )

components/Loyalty/Sidebar/JoinLoyalty/index.tsx

@@ -28,7 +28,7 @@ export default function JoinLoyaltyContact({ block }: JoinLoyaltyContactProps) {
           <span>{_("Join Scandic Friends")}</span>
         </Button>
         <div className={styles.linkContainer}>
-          <Link href="/login" className={styles.logoutLink}>
+          <Link href="/login" className={styles.loginLink}>
             {_("Already a friend?")} <br />
             {_("Click here to log in")}
           </Link>

components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css

@@ -21,7 +21,7 @@
   margin: 0;
 }
 
-.logoutLink {
+.loginLink {
   text-decoration: none;
   color: var(--some-black-color, #2e2e2e);
   font-size: 1.2rem;

components/Loyalty/Sidebar/index.tsx

@@ -7,20 +7,26 @@ import styles from "./sidebar.module.css"
 import { SidebarProps } from "@/types/components/loyalty/sidebar"
 import { SidebarTypenameEnum } from "@/types/requests/loyaltyPage"
 
-export default function SidebarLoyalty({ block }: SidebarProps) {
-  switch (block.__typename) {
-    case SidebarTypenameEnum.LoyaltyPageSidebarContent:
-      return (
-        <section className={styles.content}>
-          <JsonToHtml
-            embeds={block.content.content.embedded_itemsConnection.edges}
-            nodes={block.content.content.json.children}
-          />
-        </section>
-      )
-    case SidebarTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContact:
-      return <JoinLoyaltyContact block={block.join_loyalty_contact} />
-    default:
-      return null
-  }
+export default function SidebarLoyalty({ blocks }: SidebarProps) {
+  return (
+    <aside>
+      {blocks.map((block) => {
+        switch (block.__typename) {
+          case SidebarTypenameEnum.LoyaltyPageSidebarContent:
+            return (
+              <section className={styles.content}>
+                <JsonToHtml
+                  embeds={block.content.content.embedded_itemsConnection.edges}
+                  nodes={block.content.content.json.children}
+                />
+              </section>
+            )
+          case SidebarTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContact:
+            return <JoinLoyaltyContact block={block.join_loyalty_contact} />
+          default:
+            return null
+        }
+      })}
+    </aside>
+  )
 }

components/Loyalty/Sidebar/sidebar.module.css

@@ -1,9 +1,5 @@
-.content {
-  padding: 0 1.6rem;
-}
-
-@media screen and (min-width: 950px) {
+@media screen and (max-width: 950px) {
   .content {
-    padding: 0;
+    padding: 0 1.6rem;
   }
 }

components/TempDesignSystem/Card/index.tsx

@@ -15,7 +15,7 @@ export default function Card({
   openInNewTab = false,
 }: CardProps) {
   return (
-    <div className={styles.linkCard}>
+    <article className={styles.linkCard}>
       {title ? (
         <Title level="h3" weight="semiBold">
           {title}
@@ -33,6 +33,6 @@ export default function Card({
           </Link>
         </Button>
       ) : null}
-    </div>
+    </article>
   )
 }