@codesinger0/shared-components 1.1.85 → 1.1.87

package/dist/components 2/Menu.jsx

@@ -1,268 +0,0 @@
-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

@@ -1,311 +0,0 @@
-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;