Whatsapp unlink and channel display fixes

packages/bridge-ui/components/QRCode.tsx

@@ -29,21 +29,30 @@ export const QRCode: FC<QRCodeProps> = ({
 
   useEffect(() => {
     if (!verified && getValue && refreshInterval) {
-      const interval = setInterval(async () => {
+      // Fetch immediately on mount
+      const fetchQR = async () => {
         const { qr, kind } = await getValue(token);
         setValue(qr);
         setKind(kind);
-      }, refreshInterval * 1000);
+      };
+      fetchQR();
+
+      // Then set up interval for refreshes
+      const interval = setInterval(fetchQR, refreshInterval * 1000);
       return () => clearInterval(interval);
     }
-  }, [getValue, refreshInterval]);
+  }, [getValue, refreshInterval, token, verified]);
 
   return !verified ? (
     <Box sx={{ backgroundColor: white, m: 2 }}>
-      {kind === "data" ? (
-        <QRCodeInternal value={value} />
+      {value ? (
+        kind === "data" ? (
+          <QRCodeInternal value={value} />
+        ) : (
+          <img src={value} alt={name} />
+        )
       ) : (
-        <img src={value} alt={name} />
+        <Box>Loading QR code...</Box>
       )}
       <Box>{helperText}</Box>
     </Box>

packages/bridge-ui/config/whatsapp.ts

@@ -2,11 +2,28 @@ import { ServiceConfig } from "../lib/service";
 // import { generateSelectOneAction } from "../lib/actions";
 
 const getQRCode = async (token: string) => {
-  const url = `/link/api/whatsapp/bots/${token}`;
-  const result = await fetch(url, { cache: "no-store" });
-  const { qr } = await result.json();
+  try {
+    const url = `/link/api/whatsapp/bots/${token}`;
+    const result = await fetch(url, { cache: "no-store" });
 
-  return { qr, kind: "data" };
+    if (!result.ok) {
+      console.error(`Failed to fetch QR code: ${result.status} ${result.statusText}`);
+      return { qr: "", kind: "data" };
+    }
+
+    const data = await result.json();
+    const { qr } = data;
+
+    if (!qr) {
+      console.error("No QR code in response");
+      return { qr: "", kind: "data" };
+    }
+
+    return { qr, kind: "data" };
+  } catch (error) {
+    console.error("Error fetching QR code:", error);
+    return { qr: "", kind: "data" };
+  }
 };
 
 export const whatsappConfig: ServiceConfig = {