From dabdd597e23702b0df8f25e8832735cffdb3b26e Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Mon, 4 Nov 2024 11:15:25 +0100
Subject: [PATCH] fix(SW-391): fixed issues with sidepeek functionality inside
 teaser cards

---
 components/TempDesignSystem/SidePeek/index.tsx  |  2 +-
 .../SidePeek/sidePeek.module.css                |  8 +++++++-
 .../TeaserCard/Sidepeek/index.tsx               |  4 ++--
 hooks/useStickyPosition.ts                      |  1 -
 .../contentstack/schemas/blocks/cardsGrid.ts    | 17 ++++++++++++++++-
 5 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/components/TempDesignSystem/SidePeek/index.tsx b/components/TempDesignSystem/SidePeek/index.tsx
index 9afe22c1f..76aea7dcf 100644
--- a/components/TempDesignSystem/SidePeek/index.tsx
+++ b/components/TempDesignSystem/SidePeek/index.tsx
@@ -41,7 +41,7 @@ function SidePeek({
 
   if (isSSR) {
     return (
-      <div>
+      <div className={styles.visuallyHidden}>
         <h2>{title}</h2>
         {children}
       </div>
diff --git a/components/TempDesignSystem/SidePeek/sidePeek.module.css b/components/TempDesignSystem/SidePeek/sidePeek.module.css
index 4c2bb9187..68f588ab3 100644
--- a/components/TempDesignSystem/SidePeek/sidePeek.module.css
+++ b/components/TempDesignSystem/SidePeek/sidePeek.module.css
@@ -21,6 +21,12 @@
   }
 }
 
+.visuallyHidden {
+  position: absolute;
+  opacity: 0;
+  visibility: hidden;
+}
+
 .overlay {
   position: fixed;
   top: 0;
@@ -40,7 +46,7 @@
   height: 100vh;
   background-color: var(--Base-Background-Primary-Normal);
   z-index: var(--sidepeek-z-index);
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.85);
+  outline: none;
 }
 
 .modal[data-entering] {
diff --git a/components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx b/components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx
index ee3c6be79..cc90086ce 100644
--- a/components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx
+++ b/components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx
@@ -21,7 +21,7 @@ export default function TeaserCardSidepeek({
   const { heading, content, primary_button, secondary_button } = sidePeekContent
 
   return (
-    <>
+    <div>
       <Button
         onPress={() => setSidePeekIsOpen(true)}
         theme="base"
@@ -77,6 +77,6 @@ export default function TeaserCardSidepeek({
           )}
         </div>
       </SidePeek>
-    </>
+    </div>
   )
 }
diff --git a/hooks/useStickyPosition.ts b/hooks/useStickyPosition.ts
index 923f56c73..2c7fdf6ea 100644
--- a/hooks/useStickyPosition.ts
+++ b/hooks/useStickyPosition.ts
@@ -95,7 +95,6 @@ export default function useStickyPosition({
       }, 100)
 
       resizeObserver = new ResizeObserver(debouncedResizeHandler)
-      console.log("Initialized ResizeObserver")
     }
 
     resizeObserver.observe(document.body)
diff --git a/server/routers/contentstack/schemas/blocks/cardsGrid.ts b/server/routers/contentstack/schemas/blocks/cardsGrid.ts
index a9de83854..a5d75f02c 100644
--- a/server/routers/contentstack/schemas/blocks/cardsGrid.ts
+++ b/server/routers/contentstack/schemas/blocks/cardsGrid.ts
@@ -91,7 +91,22 @@ export const teaserCardBlockSchema = z.object({
       has_secondary_button: z.boolean().default(false),
       secondary_button: buttonSchema,
     })
-    .optional(),
+    .optional()
+    .transform((data) => {
+      if (!data) {
+        return undefined
+      }
+
+      return {
+        ...data,
+        primary_button: data.has_primary_button
+          ? data.primary_button
+          : undefined,
+        secondary_button: data.has_secondary_button
+          ? data.secondary_button
+          : undefined,
+      }
+    }),
   system: systemSchema,
 })