refactor: zod validation and pr comments

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