@codesinger0/shared-components 1.1.83 → 1.1.85

package/dist/components 2/Menu.jsx

@@ -0,0 +1,268 @@
+import React, { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Link } from 'react-router-dom';
+import { useMediaQuery } from "react-responsive";
+import useScrollLock from '../hooks/useScrollLock';
+
+const Menu = ({
+  // Business info
+  businessInfo = {},
+
+  // Navigation items
+  navigationItems = [],
+
+  // Auth/Action buttons component
+  AuthButtonsComponent = null,
+
+  // User context (for admin check)
+  isAdmin = false,
+
+  // Customization
+  mobileBreakpoint = 900,
+  logoClassName = '',
+  menuItemClassName = '',
+  sidebarWidth = 'w-80',
+
+  // Callbacks
+  onMenuItemClick = () => { },
+
+  // Children to display above menu items
+  children = null,
+}) => {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const isMobile = useMediaQuery({ maxWidth: mobileBreakpoint });
+
+  // Close sidebar when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (isSidebarOpen && !event.target.closest('.sidebar') && !event.target.closest('.hamburger')) {
+        setIsSidebarOpen(false);
+      }
+    };
+
+    if (isSidebarOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isSidebarOpen]);
+
+  useScrollLock(isSidebarOpen && isMobile);
+
+  const toggleSidebar = () => {
+    setIsSidebarOpen(!isSidebarOpen);
+  };
+
+  const handleMenuItemClick = (item) => {
+    setIsSidebarOpen(false);
+    onMenuItemClick(item);
+  };
+
+  const DesktopMenu = () => (
+    <nav className="sticky top-0 z-50 bg-menu border-b-2 border-primary">
+      {/* Parent container with two vertically stacked sections */}
+      <div className="w-full">
+
+        {/* Top section - Logo and Children content */}
+        {children && (<div className="w-full flex items-center py-4 px-6">
+          {/* Logo - takes only required space */}
+          <Link to="/" className={`flex-shrink-0 ${logoClassName}`}>
+            <div className="relative w-24 h-12 lg:w-32 lg:h-16 overflow-hidden flex items-center justify-center">
+              <img
+                src={businessInfo.logo}
+                alt={businessInfo.name}
+                className="relative z-10 w-full h-full object-contain"
+                onError={(e) => {
+                  e.target.style.display = 'none';
+                  e.target.nextElementSibling.style.display = 'flex';
+                }}
+              />
+              {/* Fallback text */}
+              <div
+                className="relative z-10 w-full h-full flex items-center justify-center text-primary text-xs font-bold"
+                style={{ display: 'none' }}
+              >
+                {businessInfo.name?.slice(0, 2) || ''}
+              </div>
+            </div>
+          </Link>
+
+          {/* Children - grows to fill available space */}
+          <div className="flex-grow">
+            {children}
+          </div>
+        </div>
+        )}
+
+        {/* Bottom section - Menu navigation bar */}
+        <div className="w-full px-6 py-4 flex justify-between items-center">
+          {/* Left side - Auth buttons */}
+          <div className="flex items-center">
+            {AuthButtonsComponent && <AuthButtonsComponent />}
+          </div>
+
+          {/* Center / Right side - Menu items */}
+          <div className="flex-1 flex justify-center">
+            <div className="flex items-center space-x-6 space-x-reverse" dir="rtl">
+              {navigationItems.map((item, index) => (
+                item.adminRoute && !isAdmin ? null : (
+                  <Link
+                    key={index}
+                    to={item.href}
+                    onClick={() => handleMenuItemClick(item)}
+                    className={`subtitle font-normal cursor-pointer menu-item-hover px-4 py-2 rounded-md text transition-colors duration-500 ease-in-out hover:text-primary ${menuItemClassName}`}
+                  >
+                    {item.label}
+                  </Link>
+                )
+              ))}
+            </div>
+          </div>
+
+          {/* Right Side Render logo here if no children */}
+          {!children && (
+            <Link to="/" className={`flex-shrink-0 ${logoClassName}`}>
+              <div className="relative w-24 h-12 lg:w-32 lg:h-16 overflow-hidden flex items-center justify-center">
+                <img
+                  src={businessInfo.logo}
+                  alt={businessInfo.name}
+                  className="relative z-10 w-full h-full object-contain"
+                  onError={(e) => {
+                    e.target.style.display = 'none';
+                    e.target.nextElementSibling.style.display = 'flex';
+                  }}
+                />
+                {/* Fallback text */}
+                <div
+                  className="relative z-10 w-full h-full flex items-center justify-center text-primary text-xs font-bold"
+                  style={{ display: 'none' }}
+                >
+                  {businessInfo.name?.slice(0, 2) || ''}
+                </div>
+              </div>
+            </Link>
+          )}
+        </div>
+      </div>
+    </nav>
+  );
+
+  // Mobile Menu Component
+  const MobileMenu = () => (
+    <>
+      <nav className="sticky top-0 z-50 bg-menu px-4 py-2">
+        <div className="flex justify-between items-center">
+          {AuthButtonsComponent && <AuthButtonsComponent isMobile={true} />}
+
+          {/* Mobile Logo */}
+          <Link to="/" className={`text-primary font-bold text-xl ${logoClassName}`}>
+            <div className="text-primary font-bold text-lg">
+              <div className="w-25 h-12 overflow-hidden flex items-center justify-center">
+                <img
+                  src={businessInfo.logo}
+                  alt={businessInfo.name}
+                  className="w-full h-full object-contain"
+                  onError={(e) => {
+                    e.target.style.display = 'none';
+                    e.target.nextElementSibling.style.display = 'flex';
+                  }}
+                />
+                {/* Fallback text */}
+                <div
+                  className="w-full h-full flex items-center justify-center text-primary text-xs font-bold"
+                  style={{ display: 'none' }}
+                >
+                  {businessInfo.name?.slice(0, 2) || ''}
+                </div>
+              </div>
+            </div>
+          </Link>
+
+          {/* Children next to logo */}
+          {children && (
+            <div>
+              {children}
+            </div>
+          )}
+
+          {/* Hamburger button */}
+          <button
+            className="hamburger flex flex-col justify-center items-center w-8 h-8 focus:outline-none text-main"
+            onClick={toggleSidebar}
+            aria-label="תפריט"
+          >
+            <span className={`hamburger-line block w-6 h-0.5 mb-1 ${isSidebarOpen ? 'rotate-45 translate-y-1.5' : ''}`} style={{ backgroundColor: 'var(--text)' }}></span>
+            <span className={`hamburger-line block w-6 h-0.5 mb-1 ${isSidebarOpen ? 'opacity-0' : ''}`} style={{ backgroundColor: 'var(--text)' }}></span>
+            <span className={`hamburger-line block w-6 h-0.5 ${isSidebarOpen ? '-rotate-45 -translate-y-1.5' : ''}`} style={{ backgroundColor: 'var(--text)' }}></span>
+          </button>
+        </div>
+      </nav>
+
+      {/* Overlay + Sidebar (animated) */}
+      <AnimatePresence>
+        {isSidebarOpen && (
+          <>
+            {/* Overlay fade */}
+            <motion.div
+              key="overlay"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 0.5 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.2 }}
+              className="fixed inset-0 bg-black z-40 supports-[height:100dvh]:h-[100dvh]"
+              onClick={() => setIsSidebarOpen(false)}
+              aria-hidden="true"
+            />
+
+            {/* Sidebar spring slide */}
+            <motion.aside
+              key="sidebar"
+              initial={{ x: '100%' }}
+              animate={{ x: 0 }}
+              exit={{ x: '100%' }}
+              transition={{ type: 'spring', stiffness: 320, damping: 28, mass: 0.9 }}
+              className={`sidebar fixed top-0 right-0 h-full ${sidebarWidth} bg-white shadow-lg z-50`}
+              role="dialog"
+              aria-label="תפריט צד"
+            >
+              <div className="p-6">
+                {/* Close button */}
+                <div className="flex justify-start mb-8">
+                  <button
+                    onClick={() => setIsSidebarOpen(false)}
+                    className="text-black hover:text-gray-700 text-2xl"
+                    aria-label="סגור תפריט"
+                  >
+                    ×
+                  </button>
+                </div>
+
+                {/* Menu items */}
+                <div className="flex flex-col space-y-3">
+                  {navigationItems.map((item, index) => (
+                    item.adminRoute && !isAdmin ? null : (
+                      <Link
+                        key={index}
+                        to={item.href}
+                        onClick={() => handleMenuItemClick(item)}
+                        className={`text-lg py-3 px-2 text-black text-right ${menuItemClassName}`}
+                      >
+                        {item.label}
+                      </Link>
+                    )
+                  ))}
+                </div>
+              </div>
+            </motion.aside>
+          </>
+        )}
+      </AnimatePresence>
+    </>
+  );
+
+  return isMobile ? <MobileMenu /> : <DesktopMenu />;
+};
+
+export default Menu;

package/dist/components 2/MyOrdersDisplay.jsx

@@ -0,0 +1,311 @@
+import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import RoundButton from './elements/RoundButton';
+import {
+    ShoppingBag,
+    ChevronDown,
+    ChevronUp,
+    LogIn,
+    Calendar,
+    CreditCard,
+    ExternalLink,
+    Clock,
+    FileText,
+    Package,
+    Truck,
+    MapPin
+} from 'lucide-react';
+
+const statusMap = {
+    link_pending: { label: 'ממתין לתשלום', color: 'bg-yellow-100 text-yellow-800 border-yellow-200' },
+    link_requested: { label: 'ממתין לתשלום', color: 'bg-yellow-100 text-yellow-800 border-yellow-200' },
+    payment_completed: { label: 'הושלמה', color: 'bg-green-100 text-green-800 border-green-200' },
+    payment_failed: { label: 'תשלום נכשל', color: 'bg-red-100 text-red-800 border-red-200' },
+    payment_cancelled: { label: 'בוטלה', color: 'bg-gray-100 text-gray-800 border-gray-200' },
+};
+
+const MyOrdersDisplay = ({
+    // Data
+    orders = [],
+    loading = false,
+    isAuthenticated = false,
+    currentUser = null,
+    
+    // Actions
+    onLoginClick,
+    onProductsClick,
+    onPaymentClick,
+    onInvoiceClick,
+    
+    // Customization
+    formatDate,
+    isPaymentLinkValid,
+    className = '',
+    ...props
+}) => {
+    const [expandedItems, setExpandedItems] = useState(new Set());
+
+    useEffect(() => {
+        if (orders.length > 0) {
+            setExpandedItems(new Set(orders.map(order => order.id)));
+        }
+    }, [orders.length]);
+
+    const toggleItemsExpansion = (orderId) => {
+        const newExpanded = new Set(expandedItems);
+        if (newExpanded.has(orderId)) {
+            newExpanded.delete(orderId);
+        } else {
+            newExpanded.add(orderId);
+        }
+        setExpandedItems(newExpanded);
+    };
+
+    // Default formatDate if not provided
+    const defaultFormatDate = (date) => {
+        if (!date) return 'לא זמין';
+        const dateObj = date.toDate ? date.toDate() : new Date(date);
+        return new Intl.DateTimeFormat('he-IL', {
+            timeZone: 'Asia/Jerusalem',
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        }).format(dateObj);
+    };
+
+    // Default isPaymentLinkValid if not provided
+    const defaultIsPaymentLinkValid = (order) => {
+        if (!order.paymentLink || !order.paymentExpiresAt) return false;
+        return new Date() < new Date(order.paymentExpiresAt);
+    };
+
+    const formatDateFn = formatDate || defaultFormatDate;
+    const isPaymentLinkValidFn = isPaymentLinkValid || defaultIsPaymentLinkValid;
+
+    if (loading) {
+        return (
+            <div className={`space-y-6 ${className}`} {...props}>
+                <div className="glass-card p-8">
+                    <div className="animate-pulse space-y-4">
+                        <div className="h-8 bg-gray-200 rounded w-1/3"></div>
+                        <div className="h-4 bg-gray-200 rounded w-1/2"></div>
+                    </div>
+                </div>
+                <div className="grid gap-4">
+                    {[...Array(3)].map((_, i) => (
+                        <div key={i} className="glass-card p-6 animate-pulse">
+                            <div className="space-y-3">
+                                <div className="h-4 bg-gray-200 rounded w-1/4"></div>
+                                <div className="h-6 bg-gray-200 rounded w-1/6"></div>
+                                <div className="h-4 bg-gray-200 rounded w-1/3"></div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        );
+    }
+
+    if (!isAuthenticated) {
+        return (
+            <div className={`max-w-md mx-auto mt-20 ${className}`} {...props}>
+                <div className="glass-card p-8 text-center">
+                    <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <LogIn className="w-8 h-8 text-blue-600" />
+                    </div>
+                    <h2 className="text-2xl font-bold text-main mb-4">נדרשת התחברות</h2>
+                    <p className="text-main mb-6">
+                        כדי לצפות בהיסטוריית ההזמנות שלך, יש להתחבר לחשבון
+                    </p>
+                    <RoundButton
+                        onClick={onLoginClick}
+                        variant="primary"
+                    >
+                        התחברות לחשבון
+                    </RoundButton>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className={`container mx-auto px-4 py-8 space-y-8 ${className}`} {...props}>
+            {/* Header */}
+            <div className="glass-card p-8 text-center">
+                <div className="w-16 h-16 bg-gradient-to-r from-orange-400 to-pink-400 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <ShoppingBag className="w-8 h-8 text-white" />
+                </div>
+                <h1 className="text-3xl font-bold text-main mb-2">ההזמנות שלי</h1>
+                <p className="text-main">
+                    שלום {currentUser?.firstName || currentUser?.displayName || currentUser?.name}, כאן תוכל לראות את כל ההזמנות שביצעת
+                </p>
+            </div>
+
+            {/* Orders List */}
+            <div className="space-y-4" dir="rtl">
+                {orders.length === 0 ? (
+                    <div className="glass-card p-12 text-center">
+                        <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <ShoppingBag className="w-8 h-8 text-main" />
+                        </div>
+                        <h3 className="text-xl font-bold text-main mb-2">אין הזמנות</h3>
+                        <p className="text-main mb-6">עדיין לא ביצעת הזמנות. בואו נתחיל לקנות!</p>
+                        <RoundButton
+                            onClick={onProductsClick}
+                            variant="primary"
+                        >
+                            לצפייה במוצרים
+                        </RoundButton>
+                    </div>
+                ) : (
+                    orders.map((order) => (
+                        <motion.div
+                            key={order.id}
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            className="glass-card border-0"
+                        >
+                            {/* Order Header */}
+                            <div className="p-6 border-b border-white/20">
+                                <div className="flex justify-between items-start mb-4">
+                                    <div>
+                                        <h3 className="text-primary text-lg font-bold">
+                                            הזמנה #{order.simpleOrderNumber || order.id?.slice(-8)}
+                                        </h3>
+                                        <div className="flex items-center gap-4 mt-2 text-sm text-main">
+                                            <div className="flex items-center gap-1">
+                                                <Calendar className="w-4 h-4" />
+                                                {formatDateFn(order.createdAt)}
+                                            </div>
+                                            <div className="flex items-center gap-1">
+                                                <CreditCard className="w-4 h-4" />
+                                                ₪{order.totalAmount}
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <span className={`px-3 py-1 rounded-full text-xs font-bold border ${statusMap[order.paymentStatus]?.color || 'bg-gray-100 text-main'
+                                        }`}>
+                                        {statusMap[order.paymentStatus]?.label || order.paymentStatus}
+                                    </span>
+                                </div>
+
+                                {/* Delivery Info */}
+                                <div className="text-sm space-y-1">
+                                    <div className="flex items-center gap-2 text-primary">
+                                        {order.deliveryMethod === 'delivery' ? (
+                                            <>
+                                                <Truck className="w-4 h-4" />
+                                                <span><strong>משלוח</strong></span>
+                                            </>
+                                        ) : (
+                                            order.orderType === 'product' && (
+                                                <>
+                                                    <Package className="w-4 h-4" />
+                                                    <span><strong>איסוף עצמי</strong></span>
+                                                </>)
+                                        )}
+                                    </div>
+                                    {order.deliveryMethod === 'delivery' && order.deliveryAddress && (
+                                        <div className="flex items-center gap-2 text-main">
+                                            <MapPin className="w-4 h-4" />
+                                            <span>{order.deliveryCity}, {order.deliveryAddress}</span>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+
+                            {/* Order Items */}
+                            <div className="p-6">
+                                {order.items && order.items.length > 0 && (
+                                    <div className="mb-4">
+                                        <button
+                                            onClick={() => toggleItemsExpansion(order.id)}
+                                            className="flex items-center gap-2 text-sm font-medium text-primary hover:text-primary-dark transition-colors"
+                                        >
+                                            פריטי ההזמנה ({order.items.length})
+                                            {expandedItems.has(order.id) ? (
+                                                <ChevronUp className="w-4 h-4" />
+                                            ) : (
+                                                <ChevronDown className="w-4 h-4" />
+                                            )}
+                                        </button>
+
+                                        {expandedItems.has(order.id) && (
+                                            <div className="mt-3 p-4 bg-white/10 rounded-lg space-y-2">
+                                                {order.items.map((item, index) => (
+                                                    <div key={index} className="flex justify-between items-center text-sm text-main">
+                                                        <div>
+                                                            <span className="font-medium">{item.name || item.product_name}</span>
+                                                            <span className="text-main mr-2">× {item.quantity}</span>
+                                                        </div>
+                                                        <div className="flex items-center gap-2">
+                                                            <span className="text-main">ליח:'</span>
+                                                            <span className="text-price">₪{item.unit_price}</span>
+                                                            <span className="text-main">סה"כ:</span>
+                                                            <span className="font-bold text-price">₪{item.total_price}</span>
+                                                        </div>
+                                                    </div>
+                                                ))}
+                                                {order.deliveryFee > 0 && order.deliveryMethod === "delivery" && (
+                                                    <div className="flex justify-between items-center text-sm text-main">
+                                                        <div>
+                                                            <span className="font-medium">משלוח</span>
+                                                        </div>
+                                                        <div className="flex items-center gap-2">
+                                                            <span className="font-bold text-price">₪{order.deliveryFee}</span>
+                                                        </div>
+                                                    </div>)}
+                                            </div>
+                                        )}
+                                    </div>
+                                )}
+
+                                {/* Payment Actions */}
+                                <div className="flex flex-wrap gap-3">
+                                    {/* Payment Link */}
+                                    {order.paymentStatus === 'pending' && order.paymentLink && (
+                                        <div>
+                                            {isPaymentLinkValidFn(order) ? (
+                                                <RoundButton
+                                                    onClick={() => onPaymentClick(order)}
+                                                    variant="primary"
+                                                    size="small"
+                                                >
+                                                    <ExternalLink className="w-4 h-4 ml-1" />
+                                                    השלמת תשלום
+                                                </RoundButton>
+                                            ) : (
+                                                <div className="text-sm text-red-600 flex items-center gap-2">
+                                                    <Clock className="w-4 h-4" />
+                                                    פג תוקף קישור התשלום
+                                                </div>
+                                            )}
+                                        </div>
+                                    )}
+
+                                    {/* Invoice Link */}
+                                    {order.invoice_url && (
+                                        <RoundButton
+                                            onClick={() => onInvoiceClick(order)}
+                                            variant="outline"
+                                            size="small"
+                                        >
+                                            <div className='flex'>
+                                                <FileText className="w-4 h-4 ml-1" />
+                                                הצג חשבונית
+                                            </div>
+                                        </RoundButton>
+                                    )}
+                                </div>
+                            </div>
+                        </motion.div>
+                    ))
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default MyOrdersDisplay;