fix: Fixed issue with duplicate filter_identifiers inside tabFilters

Approved-by: Chuma Mcphoy (We Ahead)

apps/scandic-web/components/TabFilters/index.tsx

@@ -13,6 +13,7 @@ import styles from "./tabFilters.module.css"
 interface Filter {
   identifier: string
   label: string
+  iconIdentifier: string
 }
 
 interface TabFiltersProps {
@@ -50,7 +51,7 @@ export default function TabFilters({
               })}
               type="button"
             >
-              <FilterIcon identifier={category.identifier} />
+              <FilterIcon identifier={category.iconIdentifier} />
               {category.label}
             </button>
           </Typography>

apps/scandic-web/server/routers/contentstack/schemas/blocks/cardGallery.ts

@@ -19,45 +19,58 @@ export const cardGallerySchema = z.object({
     .object({
       heading: z.string().optional(),
       link: buttonSchema.optional(),
-      card_groups: z.array(
+      card_groups: z
-        z.object({
+        .array(
-          filter_identifier: z.string(),
+          z
-          filter_label: z.string(),
+            .object({
-          cardsConnection: z.object({
+              filter_identifier: z.string().nullish(),
-            edges: z.array(z.object({ node: contentCardSchema })),
+              filter_label: z.string().nullish(),
-          }),
+              cardsConnection: z.object({
-        })
+                edges: z.array(z.object({ node: contentCardSchema })),
-      ),
+              }),
+            })
+            .transform((group) => {
+              if (!group.filter_label || !group.cardsConnection.edges.length) {
+                return null
+              }
+
+              const iconIdentifier = group.filter_identifier ?? "favorite"
+              const identifier = `${group.filter_label.toLowerCase()}-${iconIdentifier}`
+              const cards = group.cardsConnection.edges
+                .map((edge) => transformContentCard(edge.node))
+                .filter(
+                  (card): card is NonNullable<typeof card> => card !== null
+                )
+                .map((card) => ({
+                  ...card,
+                  filterId: identifier,
+                }))
+              return {
+                label: group.filter_label,
+                iconIdentifier,
+                identifier,
+                cards,
+              }
+            })
+        )
+        .transform((groups) =>
+          groups.filter(
+            (group): group is NonNullable<typeof group> => group !== null
+          )
+        ),
     })
     .transform((data) => {
-      const filterCategories = data.card_groups.reduce<
+      const filterCategories = data.card_groups.map((group) => ({
-        Array<{ identifier: string; label: string }>
+        identifier: group.identifier,
-      >((acc, group) => {
+        iconIdentifier: group.iconIdentifier,
-        const identifier = group.filter_identifier
+        label: group.label,
-        if (!acc.some((category) => category.identifier === identifier)) {
+      }))
-          acc.push({
-            identifier,
-            label: group.filter_label,
-          })
-        }
-        return acc
-      }, [])
 
       return {
         heading: data.heading,
         filterCategories,
-        cards: data.card_groups.flatMap((group) =>
+        cards: data.card_groups.map((group) => group.cards).flat(),
-          group.cardsConnection.edges
+        defaultFilter: filterCategories[0]?.identifier,
-            .map((edge) => transformContentCard(edge.node))
-            .filter((card): card is NonNullable<typeof card> => card !== null)
-            .map((card) => ({
-              ...card,
-              filterId: group.filter_identifier,
-            }))
-        ),
-        defaultFilter:
-          data.card_groups[0]?.filter_identifier ??
-          filterCategories[0]?.identifier,
         link:
           data.link?.href && data.link.title
             ? { href: data.link.href, text: data.link.title }

apps/scandic-web/server/routers/contentstack/schemas/blocks/carouselCards.ts

@@ -15,32 +15,52 @@ const commonFields = {
   link: buttonSchema.optional(),
 } as const
 
+const carouselCardGroupsSchema = z
+  .array(
+    z
+      .object({
+        filter_identifier: z.string().nullish(),
+        filter_label: z.string().nullish(),
+        cardConnection: z.object({
+          edges: z.array(z.object({ node: contentCardSchema })),
+        }),
+      })
+      .transform((group) => {
+        if (!group.filter_label || !group.cardConnection.edges.length) {
+          return null
+        }
+
+        const iconIdentifier = group.filter_identifier ?? "favorite"
+        const identifier = `${group.filter_label.toLowerCase()}-${iconIdentifier}`
+        const cards = group.cardConnection.edges
+          .map((edge) => transformContentCard(edge.node))
+          .filter((card): card is NonNullable<typeof card> => card !== null)
+          .map((card) => ({
+            ...card,
+            filterId: identifier,
+          }))
+        return {
+          label: group.filter_label,
+          iconIdentifier,
+          identifier,
+          cards,
+        }
+      })
+  )
+  .transform((groups) =>
+    groups.filter((group): group is NonNullable<typeof group> => group !== null)
+  )
+
 const carouselCardsWithFilters = z.object({
   ...commonFields,
   enable_filters: z.literal(true),
-  card_groups: z.array(
+  card_groups: carouselCardGroupsSchema,
-    z.object({
-      filter_identifier: z.string(),
-      filter_label: z.string(),
-      cardConnection: z.object({
-        edges: z.array(z.object({ node: contentCardSchema })),
-      }),
-    })
-  ),
 })
 
 const carouselCardsWithoutFilters = z.object({
   ...commonFields,
   enable_filters: z.literal(false),
-  card_groups: z.array(
+  card_groups: carouselCardGroupsSchema,
-    z.object({
-      filter_identifier: z.null(),
-      filter_label: z.string(),
-      cardConnection: z.object({
-        edges: z.array(z.object({ node: contentCardSchema })),
-      }),
-    })
-  ),
 })
 
 export const carouselCardsSchema = z.object({
@@ -59,13 +79,7 @@ export const carouselCardsSchema = z.object({
           heading: data.heading,
           enableFilters: false,
           filterCategories: [],
-          cards: data.card_groups
+          cards: data.card_groups.map((group) => group.cards).flat(),
-            .flatMap((group) =>
-              group.cardConnection.edges.map((edge) =>
-                transformContentCard(edge.node)
-              )
-            )
-            .filter((card): card is NonNullable<typeof card> => card !== null),
           link:
             data.link?.href && data.link.title
               ? { href: data.link.href, text: data.link.title }
@@ -73,35 +87,18 @@ export const carouselCardsSchema = z.object({
         }
       }
 
-      const filterCategories = data.card_groups.reduce<
+      const filterCategories = data.card_groups.map((group) => ({
-        Array<{ identifier: string; label: string }>
+        identifier: group.identifier,
-      >((acc, group) => {
+        iconIdentifier: group.iconIdentifier,
-        const identifier = group.filter_identifier
+        label: group.label,
-        if (!acc.some((category) => category.identifier === identifier)) {
+      }))
-          acc.push({
-            identifier,
-            label: group.filter_label,
-          })
-        }
-        return acc
-      }, [])
 
       return {
         heading: data.heading,
         enableFilters: true,
         filterCategories,
-        cards: data.card_groups.flatMap((group) =>
+        cards: data.card_groups.map((group) => group.cards).flat(),
-          group.cardConnection.edges
+        defaultFilter: filterCategories[0]?.identifier,
-            .map((edge) => transformContentCard(edge.node))
-            .filter((card): card is NonNullable<typeof card> => card !== null)
-            .map((card) => ({
-              ...card,
-              filterId: group.filter_identifier,
-            }))
-        ),
-        defaultFilter:
-          data.card_groups[0]?.filter_identifier ??
-          filterCategories[0]?.identifier,
         link:
           data.link?.href && data.link.title
             ? { href: data.link.href, text: data.link.title }