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;