From dfec5396d8e94ed4bee1b8e3193b0a657983adad Mon Sep 17 00:00:00 2001
From: dennyscode <43956540+dennyscode@users.noreply.github.com>
Date: Wed, 12 Feb 2025 11:54:33 +0100
Subject: [PATCH] fix: feature card onclick (#1752)

---
 src/components/FeatureCards/FeatureCard.tsx   | 39 +++++++++++++------
 src/hooks/feature-cards/useFeatureCards.tsx   |  4 +-
 .../usePersonalizedFeatureCards.tsx           |  5 ++-
 src/types/strapi.ts                           |  4 +-
 4 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/src/components/FeatureCards/FeatureCard.tsx b/src/components/FeatureCards/FeatureCard.tsx
index 62e299789..044d5bf61 100644
--- a/src/components/FeatureCards/FeatureCard.tsx
+++ b/src/components/FeatureCards/FeatureCard.tsx
@@ -13,6 +13,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { trackSpindl } from 'src/hooks/feature-cards/spindl/trackSpindl';
 import { isSpindlTrackData, type SpindlCardAttributes } from 'src/types/spindl';
+import { openInNewTab } from 'src/utils/openInNewTab';
 import {
   FCard as Card,
   FeatureCardActions,
@@ -48,18 +49,20 @@ export const FeatureCard = ({ data }: FeatureCardProps) => {
     setDisabledFeatureCard,
   ]);
 
+  const mode = data.attributes?.DisplayConditions.mode;
+
   const typographyColor = useMemo(() => {
-    if (data.attributes?.DisplayConditions.mode) {
-      if (data.attributes?.DisplayConditions.mode === 'dark') {
+    if (mode) {
+      if (mode === 'dark') {
         return theme.palette.white.main;
-      } else if (data.attributes?.DisplayConditions.mode === 'light') {
+      } else if (mode === 'light') {
         return theme.palette.black.main;
       }
     } else {
       return theme.palette.text.primary;
     }
   }, [
-    data.attributes?.DisplayConditions.mode,
+    mode,
     theme.palette.black.main,
     theme.palette.text.primary,
     theme.palette.white.main,
@@ -87,18 +90,29 @@ export const FeatureCard = ({ data }: FeatureCardProps) => {
     trackEvent,
   ]);
 
-  const mode = data.attributes?.DisplayConditions.mode || theme.palette.mode;
-
-  const imageUrl =
-    mode === 'dark'
+  const imageUrl = useMemo(() => {
+    const imageMode = mode || theme.palette.mode;
+    if (
+      !data.attributes?.BackgroundImageDark?.data?.attributes?.url ||
+      !data.attributes?.BackgroundImageLight?.data?.attributes?.url
+    ) {
+      return null;
+    }
+    return imageMode === 'dark'
       ? new URL(
-          data.attributes?.BackgroundImageDark.data.attributes?.url,
+          data.attributes?.BackgroundImageDark?.data?.attributes?.url,
           process.env.NEXT_PUBLIC_STRAPI_URL,
         )
       : new URL(
-          data.attributes?.BackgroundImageLight.data.attributes?.url,
+          data.attributes?.BackgroundImageLight?.data?.attributes?.url,
           process.env.NEXT_PUBLIC_STRAPI_URL,
         );
+  }, [
+    data.attributes?.BackgroundImageDark?.data?.attributes?.url,
+    data.attributes?.BackgroundImageLight?.data?.attributes?.url,
+    mode,
+    theme.palette.mode,
+  ]);
 
   const handleSpindl = (
     attributes: SpindlCardAttributes | FeatureCardAttributes,
@@ -142,6 +156,9 @@ export const FeatureCard = ({ data }: FeatureCardProps) => {
     label: string,
   ) => {
     event.stopPropagation();
+    if (data?.attributes?.URL) {
+      openInNewTab(data?.attributes?.URL);
+    }
 
     // Mark feature card as disabled if needed
     if (
@@ -177,7 +194,7 @@ export const FeatureCard = ({ data }: FeatureCardProps) => {
       <Card
         backgroundImageUrl={imageUrl?.href}
         onClick={(e) => handleClick(e, 'click_card')}
-        isDarkCard={data.attributes?.DisplayConditions.mode === 'dark'}
+        isDarkCard={mode === 'dark'}
       >
         <FeatureCardContent>
           <FeatureCardCloseButton
diff --git a/src/hooks/feature-cards/useFeatureCards.tsx b/src/hooks/feature-cards/useFeatureCards.tsx
index c908eabd8..b7849e342 100644
--- a/src/hooks/feature-cards/useFeatureCards.tsx
+++ b/src/hooks/feature-cards/useFeatureCards.tsx
@@ -32,7 +32,9 @@ export const useFeatureCards = () => {
         )
         .slice(0, 1);
     }
-  }, [cards, disabledFeatureCards, excludedFeatureCardsFilter]);
+    // prevent re-loading on card-click
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cards]);
 
   if (slicedFeatureCards?.length === 0 || widgetExpanded) {
     return null;
diff --git a/src/hooks/feature-cards/usePersonalizedFeatureCards.tsx b/src/hooks/feature-cards/usePersonalizedFeatureCards.tsx
index c576bdef9..2ac2a825f 100644
--- a/src/hooks/feature-cards/usePersonalizedFeatureCards.tsx
+++ b/src/hooks/feature-cards/usePersonalizedFeatureCards.tsx
@@ -6,10 +6,13 @@ import { usePersonalizedFeatureOnLevel } from 'src/hooks/feature-cards/usePerson
 import { useLoyaltyPass } from 'src/hooks/useLoyaltyPass';
 import { useSettingsStore } from 'src/stores/settings';
 import { shallow } from 'zustand/shallow';
+import { useWidgetExpanded } from '../useWidgetExpanded';
 
 export const usePersonalizedFeatureCards = () => {
   const { account } = useAccount();
   const { points } = useLoyaltyPass(account?.address);
+  const widgetExpanded = useWidgetExpanded();
+
   const { excludedFeatureCardsFilter } = useFeatureCardsFilter();
   const disabledFeatureCards = useSettingsStore(
     (state) => state.disabledFeatureCards,
@@ -45,7 +48,7 @@ export const usePersonalizedFeatureCards = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [featureCardsToDisplay, featureCardsLevel]);
 
-  if (slicedPersonalizedFeatureCards?.length === 0) {
+  if (slicedPersonalizedFeatureCards?.length === 0 || widgetExpanded) {
     return null;
   }
 
diff --git a/src/types/strapi.ts b/src/types/strapi.ts
index c4de236d3..9a09e233a 100644
--- a/src/types/strapi.ts
+++ b/src/types/strapi.ts
@@ -106,8 +106,8 @@ export interface FeatureCardAttributes {
   publishedAt?: string;
   locale: string;
   uid: string;
-  BackgroundImageLight: ImageData<MediaData>;
-  BackgroundImageDark: ImageData<MediaData>;
+  BackgroundImageLight?: ImageData<MediaData>;
+  BackgroundImageDark?: ImageData<MediaData>;
   featureCardsExclusions?: FeatureCardExclusions;
 
   localizations: {