fix: hooks order in PhotoGalleryManager for production build

src/components/CannedMessagesPanel.tsx

@@ -89,10 +89,6 @@ export function CannedMessagesPanel({ compact, onSelect }: CannedMessagesPanelPr
     await refresh();
   };
 
-  if (!capabilities.canUseQuickReplies && !compact) {
-    return <GuestUpgradeBanner reason="chat" />;
-  }
-
   if (compact) {
     return (
       <div className="flex flex-wrap gap-1.5 max-h-24 overflow-y-auto">
@@ -114,6 +110,10 @@ export function CannedMessagesPanel({ compact, onSelect }: CannedMessagesPanelPr
     );
   }
 
+  if (!capabilities.canUseQuickReplies) {
+    return <GuestUpgradeBanner reason="chat" />;
+  }
+
   return (
     <Card>
       <CardHeader className="pb-3">

src/components/PhotoGalleryManager.tsx

@@ -42,9 +42,6 @@ export function PhotoGalleryManager({ onVerifyClick }: PhotoGalleryManagerProps)
   const [message, setMessage] = useState("");
   const [loading, setLoading] = useState(true);
   const fileRef = useRef<HTMLInputElement>(null);
-  if (!capabilities.canUploadPhotos) {
-    return <GuestUpgradeBanner reason="media" />;
-  }
 
   useEffect(() => {
     let cancelled = false;
@@ -116,6 +113,10 @@ export function PhotoGalleryManager({ onVerifyClick }: PhotoGalleryManagerProps)
     }
   };
 
+  if (!capabilities.canUploadPhotos) {
+    return <GuestUpgradeBanner reason="media" />;
+  }
+
   if (loading) {
     return <p className="text-sm text-muted-foreground">Loading gallery...</p>;
   }