fix: handle unavailable QR on kiosk page

frontend/src/app/kiosk/page.tsx

@@ -7,10 +7,12 @@ import { TriState } from "@/types/state";
 import { Voucher } from "@/types/voucher";
 import { api } from "@/utils/api";
 import { formatCode } from "@/utils/format";
+import { useGlobal } from "@/contexts/GlobalContext";
 
 export default function KioskPage() {
   const [voucher, setVoucher] = useState<Voucher | null>(null);
   const [state, setState] = useState<TriState | null>(null);
+  const { wifiConfig, wifiString } = useGlobal();
 
   const load = useCallback(async () => {
     if (state === "loading") return;
@@ -38,7 +40,7 @@ export default function KioskPage() {
     return () => window.removeEventListener("vouchersUpdated", load);
   }, [load]);
 
-  function renderContent() {
+  const renderContent = useCallback(() => {
     switch (state) {
       case null:
       case "loading":
@@ -50,10 +52,13 @@ export default function KioskPage() {
           </div>
         );
       case "ok":
+        const qrAvailable = wifiConfig && wifiString;
         return (
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
-            <WifiQr className="w-full sm:h-80 md:h-96 " />
-            <div className="text-center md:text-left">
+          <div
+            className={`grid grid-cols-1 ${qrAvailable && "md:grid-cols-2 "} gap-8 items-center`}
+          >
+            {qrAvailable && <WifiQr className="w-full sm:h-80 md:h-96 " />}
+            <div className={`text-center ${qrAvailable && "md:text-left"}`}>
               <h2 className="font-medium mb-4 text-3xl sm:text-4xl md:text-5xl">
                 Voucher Code
               </h2>
@@ -64,7 +69,7 @@ export default function KioskPage() {
           </div>
         );
     }
-  }
+  }, [voucher, state, wifiConfig, wifiString]);
 
   return (
     <main className="flex-center h-screen w-full px-4">{renderContent()}</main>

frontend/src/components/Header.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import ThemeSwitcher from "@/components/utils/ThemeSwitcher";
 import WifiQrModal from "@/components/modals/WifiQrModal";
 import { useGlobal } from "@/contexts/GlobalContext";
@@ -9,8 +9,12 @@ import { useRouter } from "next/navigation";
 export default function Header() {
   const [showWifi, setShowWifi] = useState(false);
   const headerRef = useRef<HTMLElement>(null);
-  const { wifiConfig } = useGlobal();
   const router = useRouter();
+  const { wifiConfig, wifiString } = useGlobal();
+  const qrAvailable: boolean = useMemo(
+    () => !!(wifiConfig && wifiString),
+    [wifiConfig, wifiString],
+  );
 
   useEffect(() => {
     // Set initial height and update on resize
@@ -50,7 +54,7 @@ export default function Header() {
           <button
             onClick={() => setShowWifi(true)}
             className="btn p-1"
-            disabled={!wifiConfig}
+            disabled={!qrAvailable}
             aria-label="Open Wi‑Fi QR code"
             title="Open Wi‑Fi QR code"
           >
@@ -65,7 +69,7 @@ export default function Header() {
           <ThemeSwitcher />
         </div>
       </div>
-      {showWifi && wifiConfig && (
+      {qrAvailable && showWifi && (
         <WifiQrModal onClose={() => setShowWifi(false)} />
       )}
     </header>