From 29347fc70fb6abdeb8cabe97ffb74889f09b969f Mon Sep 17 00:00:00 2001
From: Peter Szerzo <szerzo.peter@gmail.com>
Date: Wed, 31 Jul 2024 16:12:10 +0200
Subject: [PATCH] Fail-safe icon url

---
 .../src/ui/components/index.tsx               | 38 ++++++++++++++-----
 packages/journey-manager/src/ui/style.css     |  6 +++
 2 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/packages/journey-manager/src/ui/components/index.tsx b/packages/journey-manager/src/ui/components/index.tsx
index 1b6146e9..0aed4a66 100644
--- a/packages/journey-manager/src/ui/components/index.tsx
+++ b/packages/journey-manager/src/ui/components/index.tsx
@@ -284,6 +284,34 @@ const retrieveNudgeState = (conversationId: string): NudgeState => {
   return "hidden";
 };
 
+const PinIcon: FC<{ iconUrl?: string }> = ({ iconUrl }) => {
+  const [isIconUrlValid, setIsIconUrlValid] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    if (iconUrl == null) {
+      return;
+    }
+    const image = new Image();
+    image.onload = () => {
+      setIsIconUrlValid(true);
+    };
+    image.onerror = () => {
+      setIsIconUrlValid(false);
+    };
+    image.src = iconUrl;
+  }, [iconUrl, setIsIconUrlValid]);
+
+  if (iconUrl == null || isIconUrlValid === false) {
+    return <MultimodalIcon />;
+  }
+
+  if (isIconUrlValid == null) {
+    return null;
+  }
+
+  return <img src={iconUrl} role="presentation" />;
+};
+
 export const ControlCenter: FC<{
   config: UiConfig;
   conversationId: string;
@@ -384,15 +412,7 @@ export const ControlCenter: FC<{
           setIsOpen((prev) => !prev);
         }}
       >
-        {config.iconUrl != null ? (
-          <img
-            src={config.iconUrl}
-            role="presentation"
-            className="block w-full h-full"
-          />
-        ) : (
-          <MultimodalIcon />
-        )}
+        <PinIcon iconUrl={config.iconUrl} />
       </button>
       <div
         className={`drawer ${isOpen ? "drawer-open" : ""} `}
diff --git a/packages/journey-manager/src/ui/style.css b/packages/journey-manager/src/ui/style.css
index eec34200..851ed885 100644
--- a/packages/journey-manager/src/ui/style.css
+++ b/packages/journey-manager/src/ui/style.css
@@ -58,6 +58,12 @@ button {
   background-color: var(--primary-hover);
 }
 
+.pin img {
+  display: block;
+  width: 32px;
+  height: 32px;
+}
+
 .pin-bubble-content {
   line-height: 1.4;
   padding: 4px 6px;