From 16588c7f13df0fe5523504ee0b2cbfa711a4783b Mon Sep 17 00:00:00 2001
From: elcharitas <jonathanirhodia@gmail.com>
Date: Tue, 9 Dec 2025 09:24:25 +0100
Subject: [PATCH] feat: Add support for image links

---
 .../frontend/src/api/utils/customDataUtils.tsx  | 14 ++++++++++++++
 .../src/components/image/ImageModule.tsx        |  3 +++
 .../src/components/image/ImageWidget.tsx        | 15 ++++++++++++++-
 .../containers/image/OneColImageContainer.tsx   | 17 +++++------------
 .../containers/image/TwoColImageContainer.tsx   | 17 +++++------------
 5 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/packages/frontend/src/api/utils/customDataUtils.tsx b/packages/frontend/src/api/utils/customDataUtils.tsx
index 319d60979..3a43cf39e 100644
--- a/packages/frontend/src/api/utils/customDataUtils.tsx
+++ b/packages/frontend/src/api/utils/customDataUtils.tsx
@@ -741,3 +741,17 @@ export const customDataAsCardData: (
         return undefined;
     }
 };
+
+export const validateImageCustomData = (
+    customData: TRemoteCustomData | undefined
+): { imageUrl: string | undefined; imageLink: string | undefined } => {
+    let imageUrl = customData?.[0]?.image_url;
+    let imageLink = customData?.[0]?.image_link;
+    if (typeof imageUrl !== "string") {
+        imageUrl = undefined;
+    }
+    if (typeof imageLink !== "string") {
+        imageLink = undefined;
+    }
+    return { imageUrl, imageLink };
+};
diff --git a/packages/frontend/src/components/image/ImageModule.tsx b/packages/frontend/src/components/image/ImageModule.tsx
index e81958b25..7d10cb2e3 100644
--- a/packages/frontend/src/components/image/ImageModule.tsx
+++ b/packages/frontend/src/components/image/ImageModule.tsx
@@ -4,6 +4,7 @@ import ImageWidget from "./ImageWidget";
 
 interface IImageModule {
     imageUrl: string | undefined;
+    imageLink?: string;
     title: string;
     contentHeight?: string;
     isLoading: boolean;
@@ -14,6 +15,7 @@ interface IImageModule {
 
 export const ImageModule: FC<IImageModule> = ({
     imageUrl,
+    imageLink,
     title,
     contentHeight,
     isLoading,
@@ -36,6 +38,7 @@ export const ImageModule: FC<IImageModule> = ({
         >
             <ImageWidget
                 imageUrl={processedImageUrl}
+                imageLink={imageLink}
                 title={title}
                 isLoading={isLoading}
                 onAspectRatioDetected={onAspectRatioDetected}
diff --git a/packages/frontend/src/components/image/ImageWidget.tsx b/packages/frontend/src/components/image/ImageWidget.tsx
index 3627a3ce3..06392cb51 100644
--- a/packages/frontend/src/components/image/ImageWidget.tsx
+++ b/packages/frontend/src/components/image/ImageWidget.tsx
@@ -5,6 +5,7 @@ import globalMessages from "src/globalMessages";
 interface IImageWidget {
     title: string;
     imageUrl: string;
+    imageLink?: string;
     isLoading: boolean;
     showImage: boolean;
     onAspectRatioDetected?: (aspectRatio: number) => void;
@@ -13,6 +14,7 @@ interface IImageWidget {
 const ImageWidget: FC<IImageWidget> = memo(function ImageWidget({
     title,
     imageUrl,
+    imageLink,
     isLoading,
     showImage,
     onAspectRatioDetected,
@@ -55,7 +57,18 @@ const ImageWidget: FC<IImageWidget> = memo(function ImageWidget({
     }
 
     return (
-        <div className="flex items-center justify-center w-full h-full">
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+        <div
+            tabIndex={-1}
+            className="flex items-center justify-center w-full h-full"
+            onClick={() => {
+                if (imageLink) {
+                    window.open(imageLink, "_blank");
+                }
+            }}
+            style={{ cursor: imageLink ? "pointer" : "default" }}
+            role="banner"
+        >
             {imageLoading && <ModuleLoader $height="500px" />}
             <img
                 src={imageUrl}
diff --git a/packages/frontend/src/containers/image/OneColImageContainer.tsx b/packages/frontend/src/containers/image/OneColImageContainer.tsx
index b1a9f649d..8ad098259 100644
--- a/packages/frontend/src/containers/image/OneColImageContainer.tsx
+++ b/packages/frontend/src/containers/image/OneColImageContainer.tsx
@@ -1,22 +1,14 @@
 import { type FC, Suspense, useMemo } from "react";
 import { ModuleLoader } from "@alphaday/ui-kit";
-import { TRemoteCustomData } from "src/api/services";
+import { validateImageCustomData } from "src/api/utils/customDataUtils";
 import CONFIG from "src/config";
 import type { IModuleContainer } from "src/types";
 import { ImageModule } from "../../components/image/ImageModule";
 
-const validateCustomData = (
-    customData: TRemoteCustomData | undefined
-): { imageUrl: string | undefined } => {
-    let imageUrl = customData?.[0]?.image_url;
-    if (typeof imageUrl !== "string") {
-        imageUrl = undefined;
-    }
-    return { imageUrl };
-};
-
 const OneColImageContainer: FC<IModuleContainer> = ({ moduleData }) => {
-    const { imageUrl } = validateCustomData(moduleData.widget.custom_data);
+    const { imageUrl, imageLink } = validateImageCustomData(
+        moduleData.widget.custom_data
+    );
 
     const contentHeight = useMemo(() => {
         return `${CONFIG.WIDGETS.ONE_COL_IMAGE.WIDGET_HEIGHT || 600}px`;
@@ -26,6 +18,7 @@ const OneColImageContainer: FC<IModuleContainer> = ({ moduleData }) => {
         <Suspense fallback={<ModuleLoader $height={contentHeight} />}>
             <ImageModule
                 imageUrl={imageUrl}
+                imageLink={imageLink}
                 title={moduleData.widget.name}
                 isLoading={!moduleData}
                 type="one_col_image"
diff --git a/packages/frontend/src/containers/image/TwoColImageContainer.tsx b/packages/frontend/src/containers/image/TwoColImageContainer.tsx
index 8a08aded9..d156f8671 100644
--- a/packages/frontend/src/containers/image/TwoColImageContainer.tsx
+++ b/packages/frontend/src/containers/image/TwoColImageContainer.tsx
@@ -8,21 +8,11 @@ import {
 } from "react";
 import { ModuleLoader } from "@alphaday/ui-kit";
 import { useTwoColImageWidgetSize } from "src/api/hooks";
-import { TRemoteCustomData } from "src/api/services";
+import { validateImageCustomData } from "src/api/utils/customDataUtils";
 import CONFIG from "src/config";
 import type { IModuleContainer } from "src/types";
 import { ImageModule } from "../../components/image/ImageModule";
 
-const validateCustomData = (
-    customData: TRemoteCustomData | undefined
-): { imageUrl: string | undefined } => {
-    let imageUrl = customData?.[0]?.image_url;
-    if (typeof imageUrl !== "string") {
-        imageUrl = undefined;
-    }
-    return { imageUrl };
-};
-
 const TwoColImageContainer: FC<IModuleContainer> = ({
     moduleData,
     onAspectRatioDetected,
@@ -32,7 +22,9 @@ const TwoColImageContainer: FC<IModuleContainer> = ({
         number | null
     >(null);
 
-    const { imageUrl } = validateCustomData(moduleData.widget.custom_data);
+    const { imageUrl, imageLink } = validateImageCustomData(
+        moduleData.widget.custom_data
+    );
     const previousImageUrl = useRef<string | undefined>(imageUrl);
 
     if (previousImageUrl.current !== imageUrl) {
@@ -75,6 +67,7 @@ const TwoColImageContainer: FC<IModuleContainer> = ({
         <Suspense fallback={<ModuleLoader $height={contentHeight} />}>
             <ImageModule
                 imageUrl={imageUrl}
+                imageLink={imageLink}
                 title={moduleData.widget.name}
                 contentHeight={contentHeight}
                 isLoading={!moduleData}