From 4d1c37de92bd9a6266714dd62eaf63cce38138bf Mon Sep 17 00:00:00 2001
From: NotII <46204250+NotII@users.noreply.github.com>
Date: Wed, 30 Jul 2025 12:25:46 +0200
Subject: [PATCH] hmm

---
 components/KeepOnline.ts               |   1 -
 components/modals/broadcast-dialog.tsx |  52 +++++++++-
 components/modals/product-selector.tsx | 125 +++++++++++++++++++++++++
 3 files changed, 175 insertions(+), 3 deletions(-)
 create mode 100644 components/modals/product-selector.tsx

diff --git a/components/KeepOnline.ts b/components/KeepOnline.ts
index 457277e..d4939ba 100644
--- a/components/KeepOnline.ts
+++ b/components/KeepOnline.ts
@@ -11,7 +11,6 @@ const KeepOnline = () => {
             clientFetch('/auth/me');
         }
     
-        // Start interval without immediate call
         const interval = setInterval(updateOnlineStatus, 1000*60*1);
         
         return () => clearInterval(interval);
diff --git a/components/modals/broadcast-dialog.tsx b/components/modals/broadcast-dialog.tsx
index f48d598..13e9a0d 100644
--- a/components/modals/broadcast-dialog.tsx
+++ b/components/modals/broadcast-dialog.tsx
@@ -3,12 +3,13 @@
 import { useState, useRef } from "react";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
-import { Send, Bold, Italic, Code, Link as LinkIcon, Image as ImageIcon, X, Eye, EyeOff } from "lucide-react";
+import { Send, Bold, Italic, Code, Link as LinkIcon, Image as ImageIcon, X, Eye, EyeOff, Package } from "lucide-react";
 import { toast } from "sonner";
 import { apiRequest } from "@/lib/api";
 import { cn } from "@/lib/utils/general";
 import { Textarea } from "@/components/ui/textarea";
 import ReactMarkdown from 'react-markdown';
+import ProductSelector from "./product-selector";
 
 interface BroadcastDialogProps {
   open: boolean;
@@ -21,6 +22,8 @@ export default function BroadcastDialog({ open, setOpen }: BroadcastDialogProps)
   const [isSending, setIsSending] = useState(false);
   const [selectedImage, setSelectedImage] = useState<File | null>(null);
   const [imagePreview, setImagePreview] = useState<string | null>(null);
+  const [selectedProducts, setSelectedProducts] = useState<string[]>([]);
+  const [showProductSelector, setShowProductSelector] = useState(false);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -111,6 +114,9 @@ export default function BroadcastDialog({ open, setOpen }: BroadcastDialogProps)
         if (broadcastMessage.trim()) {
           formData.append('message', broadcastMessage);
         }
+        if (selectedProducts.length > 0) {
+          formData.append('productIds', JSON.stringify(selectedProducts));
+        }
         
         const res = await fetch(`/api/storefront/broadcast`, {
           method: 'POST',
@@ -127,7 +133,10 @@ export default function BroadcastDialog({ open, setOpen }: BroadcastDialogProps)
         
         response = await res.json();
       } else {
-        response = await apiRequest("/storefront/broadcast", "POST", { message: broadcastMessage });
+        response = await apiRequest("/storefront/broadcast", "POST", { 
+          message: broadcastMessage,
+          productIds: selectedProducts
+        });
       }
 
       if (response.error) throw new Error(response.error);
@@ -136,6 +145,7 @@ export default function BroadcastDialog({ open, setOpen }: BroadcastDialogProps)
       setBroadcastMessage("");
       setSelectedImage(null);
       setImagePreview(null);
+      setSelectedProducts([]);
       setOpen(false);
     } catch (error) {
       console.error("Broadcast error:", error);
@@ -207,6 +217,16 @@ export default function BroadcastDialog({ open, setOpen }: BroadcastDialogProps)
             >
               <ImageIcon className="h-4 w-4" />
             </Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              onClick={() => setShowProductSelector(!showProductSelector)}
+              title="Add Products"
+              className={selectedProducts.length > 0 ? "bg-blue-100 dark:bg-blue-900" : ""}
+            >
+              <Package className="h-4 w-4" />
+            </Button>
             <div className="ml-auto">
               <Button
                 type="button"
@@ -258,6 +278,34 @@ __italic text__
                 </Button>
               </div>
             )}
+
+            {showProductSelector && (
+              <div className="border rounded-lg p-4">
+                <h4 className="font-medium mb-3">Select Products to Include</h4>
+                <ProductSelector
+                  selectedProducts={selectedProducts}
+                  onSelectionChange={setSelectedProducts}
+                />
+              </div>
+            )}
+
+            {selectedProducts.length > 0 && !showProductSelector && (
+              <div className="border rounded-lg p-3 bg-muted/50">
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-sm font-medium">Selected Products ({selectedProducts.length})</span>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setShowProductSelector(true)}
+                  >
+                    Edit
+                  </Button>
+                </div>
+                <div className="text-sm text-muted-foreground">
+                  Products will be added as interactive buttons in the broadcast message.
+                </div>
+              </div>
+            )}
           </div>
 
           <div className="text-sm text-gray-500">
diff --git a/components/modals/product-selector.tsx b/components/modals/product-selector.tsx
new file mode 100644
index 0000000..ab02adf
--- /dev/null
+++ b/components/modals/product-selector.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Search, Package } from "lucide-react";
+import { apiRequest } from "@/lib/api";
+
+interface Product {
+  _id: string;
+  name: string;
+  description?: string;
+  unitType: string;
+  pricing: Array<{ minQuantity: number; pricePerUnit: number }>;
+  image?: string;
+}
+
+interface ProductSelectorProps {
+  selectedProducts: string[];
+  onSelectionChange: (productIds: string[]) => void;
+}
+
+export default function ProductSelector({ selectedProducts, onSelectionChange }: ProductSelectorProps) {
+  const [products, setProducts] = useState<Product[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState("");
+
+  useEffect(() => {
+    const fetchProducts = async () => {
+      try {
+        const fetchedProducts = await apiRequest('/products/for-selection', 'GET');
+        setProducts(fetchedProducts);
+      } catch (error) {
+        console.error('Error fetching products:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchProducts();
+  }, []);
+
+  const filteredProducts = products.filter(product =>
+    product.name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const handleProductToggle = (productId: string) => {
+    const newSelection = selectedProducts.includes(productId)
+      ? selectedProducts.filter(id => id !== productId)
+      : [...selectedProducts, productId];
+    onSelectionChange(newSelection);
+  };
+
+  const getMinPrice = (product: Product) => {
+    if (!product.pricing || product.pricing.length === 0) return 0;
+    const minTier = product.pricing.reduce((min, tier) => 
+      tier.pricePerUnit < min.pricePerUnit ? tier : min
+    );
+    return minTier.pricePerUnit;
+  };
+
+  if (loading) {
+    return <div className="text-center py-4">Loading products...</div>;
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+        <Input
+          placeholder="Search products..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          className="pl-10"
+        />
+      </div>
+
+      <ScrollArea className="h-64">
+        <div className="space-y-2">
+          {filteredProducts.length === 0 ? (
+            <div className="text-center py-8 text-muted-foreground">
+              <Package className="h-8 w-8 mx-auto mb-2" />
+              {searchTerm ? "No products found" : "No products available"}
+            </div>
+          ) : (
+            filteredProducts.map((product) => (
+              <div
+                key={product._id}
+                className="flex items-center space-x-3 p-3 border rounded-lg hover:bg-muted/50"
+              >
+                <Checkbox
+                  checked={selectedProducts.includes(product._id)}
+                  onCheckedChange={() => handleProductToggle(product._id)}
+                />
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center justify-between">
+                    <div className="flex-1 min-w-0">
+                      <p className="font-medium truncate">{product.name}</p>
+                      {product.description && (
+                        <p className="text-sm text-muted-foreground truncate">
+                          {product.description}
+                        </p>
+                      )}
+                    </div>
+                    <div className="text-sm text-muted-foreground ml-2">
+                      £{getMinPrice(product).toFixed(2)}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      </ScrollArea>
+
+      {selectedProducts.length > 0 && (
+        <div className="text-sm text-muted-foreground">
+          {selectedProducts.length} product(s) selected
+        </div>
+      )}
+    </div>
+  );
+} 
\ No newline at end of file