@codesinger0/shared-components 1.0.43 → 1.0.45

package/dist/components/cart/CartItem.jsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { X, Plus, Minus } from 'lucide-react';
+
+const CartItem = ({ item, onUpdateQuantity, onRemoveItem }) => {
+  const handleQuantityChange = (newQuantity) => {
+    if (newQuantity <= 0) {
+      onRemoveItem(item.id);
+    } else {
+      onUpdateQuantity(item.id, newQuantity);
+    }
+  };
+
+  const itemTotal = (item.price * item.quantity).toFixed(2);
+
+  return (
+    <motion.div
+      layout
+      initial={{ opacity: 0, scale: 0.8 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={{ opacity: 0, scale: 0.8 }}
+      transition={{ type: "spring", stiffness: 300, damping: 25 }}
+      className="glass-card p-4 mb-3"
+      dir="rtl"
+    >
+      <div className="flex items-start gap-3">
+        {/* Product Image */}
+        <div className="w-16 h-16 rounded-lg overflow-hidden bg-gray-100 flex-shrink-0">
+          {item.imageUrl ? (
+            <img
+              src={item.imageUrl}
+              alt={item.name}
+              className="w-full h-full object-cover"
+              onError={(e) => {
+                e.target.style.display = 'none';
+                e.target.nextElementSibling.style.display = 'flex';
+              }}
+            />
+          ) : null}
+          <div
+            className="w-full h-full flex items-center justify-center content-text text-xs"
+            style={{ display: item.imageUrl ? 'none' : 'flex' }}
+          >
+            🍰
+          </div>
+        </div>
+
+        {/* Product Info */}
+        <div className="flex-1">
+          <div className="flex justify-between items-start mb-2">
+            <div>
+              <h3 className="content-text font-medium line-clamp-2">{item.name}</h3>
+              <p className="text-sm text-price">₪{item.price} ליחידה</p>
+            </div>
+            
+            {/* Remove Button */}
+            <button
+              onClick={() => onRemoveItem(item.id)}
+              className="text-red-500 hover:bg-red-50 p-1 rounded-md transition-colors duration-200"
+              title="הסר מהעגלה"
+            >
+              <X size={16} />
+            </button>
+          </div>
+
+          {/* Quantity Controls and Total */}
+          <div className="flex justify-between items-center">
+            {/* Quantity Controls */}
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => handleQuantityChange(item.quantity - 1)}
+                disabled={item.quantity <= 1}
+                className="bg-gray-200 hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed w-7 h-7 rounded-md flex items-center justify-center transition-colors duration-200"
+              >
+                <Minus size={14} />
+              </button>
+              
+              <span className="w-8 text-center content-text font-medium">
+                {item.quantity}
+              </span>
+              
+              <button
+                onClick={() => handleQuantityChange(item.quantity + 1)}
+                className="bg-gray-200 hover:bg-gray-300 w-7 h-7 rounded-md flex items-center justify-center transition-colors duration-200"
+              >
+                <Plus size={14} />
+              </button>
+            </div>
+
+            {/* Item Total */}
+            <div className="content-text font-bold text-price">
+              ₪{itemTotal}
+            </div>
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+};
+
+export default CartItem;

package/dist/components/cart/FloatingCartButton.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ShoppingCart } from 'lucide-react';
+import { useCart } from '../../context/CartContext';
+
+const FloatingCartButton = () => {
+  const { totalItems, toggleCart } = useCart();
+
+  return (
+    <div className="fixed bottom-6 right-6 z-30">
+      <motion.button
+        onClick={toggleCart}
+        className="relative bg-orange-500 text-white p-4 rounded-full shadow-lg hover:brightness-90 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50"
+        style={{
+          transform: 'translate3d(0, 0, 0)',
+          WebkitTransform: 'translate3d(0, 0, 0)',
+          WebkitBackfaceVisibility: 'hidden'
+        }} whileHover={{ scale: 1.05 }}
+        whileTap={{ scale: 0.95 }}
+        initial={{ scale: 0 }}
+        animate={{ scale: 1 }}
+        transition={{ type: "spring", stiffness: 300, damping: 25 }}
+      >
+        <ShoppingCart size={26} />
+        {/* Badge */}
+        <AnimatePresence>
+          {totalItems > 0 && (
+            <motion.div
+              initial={{ scale: 0, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              exit={{ scale: 0, opacity: 0 }}
+              transition={{ type: "spring", stiffness: 400, damping: 25 }}
+              className="absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold rounded-full min-w-[1.5rem] h-6 flex items-center justify-center px-1"
+            >
+              {totalItems > 99 ? '99+' : totalItems}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </motion.button>
+    </div>
+  );
+};
+
+export default FloatingCartButton;

package/dist/components/cart/ShoppingCartModal.jsx

@@ -0,0 +1,226 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, ShoppingBag } from 'lucide-react';
+import { useCart } from '../../context/CartContext';
+import CartItem from './CartItem';
+import useScrollLock from '../../hooks/useScrollLock'
+
+const ShoppingCartModal = ({ CheckoutComponent }) => {
+    const {
+        cartItems,
+        totalItems,
+        totalPrice,
+        isCartOpen,      // context state
+        closeCart,       // context function that flips isCartOpen -> false
+        updateQuantity,
+        removeFromCart
+    } = useCart();
+
+    // local visible state that controls AnimatePresence mounting
+    const [localOpen, setLocalOpen] = useState(Boolean(isCartOpen));
+    const [showOrderForm, setShowOrderForm] = useState(false);
+
+    // track whether the close was requested from inside this component
+    const closingRequestedRef = useRef(false);
+
+    // when context opens the cart, immediately open locally so it animates in
+    useEffect(() => {
+        if (isCartOpen) {
+            setLocalOpen(true);
+            setShowOrderForm(false); // Reset to cart view when opening
+            closingRequestedRef.current = false;
+        } else {
+            setLocalOpen(false);
+            setShowOrderForm(false); // Reset when closing
+        }
+    }, [isCartOpen]);
+
+    useScrollLock(isCartOpen);
+
+    // called by close buttons / backdrop clicks inside this component
+    const requestClose = () => {
+        // mark we requested a close so we call context close only after exit
+        closingRequestedRef.current = true;
+        // trigger AnimatePresence exit by setting localOpen -> false
+        setLocalOpen(false);
+    };
+
+    const handleBackToCart = (closeCart = false) => {
+        setShowOrderForm(false);
+        if (closeCart === true) {
+            requestClose()
+        }
+    };
+
+    // onExitComplete runs after all children finish exiting
+    const handleExitComplete = () => {
+        if (closingRequestedRef.current) {
+            closeCart();
+            closingRequestedRef.current = false;
+        }
+        setShowOrderForm(false); // Reset form view when modal closes
+    };
+
+    return (
+        // wrapper ignores clicks when closed so it doesn't block the app
+        <div className={`fixed inset-0 z-50 flex ${isCartOpen ? '' : 'pointer-events-none'} supports-[height:100dvh]:h-[100dvh]`}>
+            <AnimatePresence initial={false} mode="wait" onExitComplete={handleExitComplete}>
+                {localOpen && (
+                    <>
+                        {/* Backdrop */}
+                        <motion.div
+                            key="backdrop"
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            exit={{ opacity: 0 }}
+                            transition={{ duration: 0.18 }}
+                            className="absolute inset-0 bg-black bg-opacity-30 backdrop-blur-sm pointer-events-auto"
+                            onClick={!showOrderForm ? requestClose : undefined}
+                            aria-hidden="true"
+                        />
+
+                        {/* Cart Panel */}
+                        <motion.aside
+                            key="cart-panel"
+                            initial={{ x: '-100%' }}
+                            animate={{ x: 0 }}
+                            exit={{ x: 0 }}
+                            transition={{
+                                type: "tween",
+                                duration: 0.1,
+                            }}
+                            className={`relative ${showOrderForm ? 'w-full max-w-4xl' : 'w-full max-w-md'} h-full glass-card rounded-none overflow-hidden pointer-events-auto transition-all duration-300`}
+                            dir="rtl"
+                            role="dialog"
+                            aria-modal="true"
+                            onClick={(e) => e.stopPropagation()}
+                        >
+                            {showOrderForm ? (
+                                // Order Form View
+                                <div className="h-full overflow-y-auto">
+                                    {CheckoutComponent ? (
+                                        <CheckoutComponent
+                                            onBack={handleBackToCart}
+                                            cartItems={cartItems}
+                                            totalPrice={totalPrice}
+                                        />
+                                    ) : (
+                                        <div className="p-6">
+                                            <p className="content-text">No checkout component provided</p>
+                                        </div>
+                                    )}                                </div>
+                            ) : (
+                                <div className="flex flex-col h-full">
+                                    {/* Header */}
+                                    <div className="flex justify-between items-center p-6 border-b border-white/20">
+                                        <div className="flex items-center gap-3">
+                                            <ShoppingBag className="w-6 h-6 text-primary" />
+                                            <h2 className="subtitle font-bold">עגלת קניות</h2>
+                                            {totalItems > 0 && (
+                                                <motion.div
+                                                    initial={{ scale: 0 }}
+                                                    animate={{ scale: 1 }}
+                                                    transition={{ type: 'spring', stiffness: 600, damping: 20 }}
+                                                    className="bg-primary text-white text-xs font-bold rounded-full min-w-[1.5rem] h-6 flex items-center justify-center px-2"
+                                                >
+                                                    {totalItems}
+                                                </motion.div>
+                                            )}
+                                        </div>
+                                        <button
+                                            onClick={requestClose} // use local requestClose
+                                            className="content-text hover:text-primary hover:bg-gray-100 p-2 rounded-md transition-colors duration-200"
+                                            aria-label="Close cart"
+                                        >
+                                            <X size={20} />
+                                        </button>
+                                    </div>
+
+                                    {/* Cart Items */}
+                                    <div className="flex-1 overflow-y-auto p-6">
+                                        <AnimatePresence>
+                                            {cartItems.length === 0 ? (
+                                                <motion.div
+                                                    key="empty"
+                                                    initial={{ opacity: 0, y: 20 }}
+                                                    animate={{ opacity: 1, y: 0 }}
+                                                    exit={{ opacity: 0, y: 10 }}
+                                                    className="text-center py-12"
+                                                >
+                                                    <ShoppingBag className="w-16 h-16 mx-auto mb-4 text-gray-300" />
+                                                    <h3 className="subtitle font-medium text-gray-500 mb-2">
+                                                        העגלה ריקה
+                                                    </h3>
+                                                    <p className="content-text text-gray-400">
+                                                        הוסף מוצרים כדי להתחיל לקנות
+                                                    </p>
+                                                </motion.div>
+                                            ) : (
+                                                <motion.div
+                                                    key="items"
+                                                    initial={{ opacity: 0 }}
+                                                    animate={{ opacity: 1 }}
+                                                    exit={{ opacity: 0 }}
+                                                    className="space-y-3"
+                                                >
+                                                    {cartItems.map((item) => (
+                                                        <CartItem
+                                                            key={item.id}
+                                                            item={item}
+                                                            onUpdateQuantity={updateQuantity}
+                                                            onRemoveItem={removeFromCart}
+                                                        />
+                                                    ))}
+                                                </motion.div>
+                                            )}
+                                        </AnimatePresence>
+                                    </div>
+
+                                    {/* Footer */}
+                                    <motion.div
+                                        initial={{ opacity: 0, y: 20 }}
+                                        animate={{ opacity: 1, y: 0 }}
+                                        exit={{ opacity: 0, y: 10 }}
+                                        transition={{ duration: 0.18 }}
+                                        className="p-6 border-t border-white/20 space-y-4"
+                                    >
+                                        {cartItems.length > 0 && (
+                                            <>
+                                                {/* Total */}
+                                                <div className="flex justify-between items-center">
+                                                    <span className="subtitle font-bold">סה״כ:</span>
+                                                    <span className="text-xl font-bold text-price">
+                                                        ₪{totalPrice.toFixed(2)}
+                                                    </span>
+                                                </div>
+
+                                                {/* Checkout Button */}
+                                                <button
+                                                    onClick={() => setShowOrderForm(true)}
+                                                    className="w-full btn-primary text-center py-3 rounded-lg font-medium transition-all duration-200 hover:brightness-90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50"
+                                                >
+                                                    המשך לתשלום
+                                                </button>
+
+
+                                            </>
+                                        )}
+                                        {/* Continue Shopping */}
+                                        <button
+                                            onClick={requestClose}
+                                            className="w-full text-center py-2 content-text hover:text-primary transition-colors duration-200"
+                                        >
+                                            המשך קנייה
+                                        </button>
+                                    </motion.div>
+                                </div>
+                            )}
+                        </motion.aside>
+                    </>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+};
+
+export default ShoppingCartModal;

package/dist/context/CartContext.jsx

@@ -0,0 +1,165 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { useToast } from '../components/ToastProvider';
+
+const CART_STORAGE_KEY = 'digishop_shopping_cart';
+
+const CartContext = createContext();
+
+export const useCart = () => {
+  const context = useContext(CartContext);
+  if (!context) {
+    throw new Error('useCart must be used within a CartProvider');
+  }
+  return context;
+};
+
+export const CartProvider = ({ children, user = null }) => {
+  const [cartItems, setCartItems] = useState([]);
+  const [isCartOpen, setIsCartOpen] = useState(false);
+  const [previousUser, setPreviousUser] = useState(null);
+
+  const addToast = useToast();
+
+  const totalItems = cartItems.reduce((sum, item) => sum + item.quantity, 0);
+  const totalPrice = cartItems.reduce((sum, item) => sum + (item.price * item.quantity), 0);
+
+  useEffect(() => {
+    // If we had a user before and now we don't = logout happened
+    if (previousUser && !user) {
+      clearCart(); // Auto-clear cart on logout
+    }
+    setPreviousUser(user);
+  }, [user, previousUser]);
+
+  useEffect(() => {
+    const savedCart = loadCartFromStorage();
+    if (savedCart.length > 0) {
+      setCartItems(savedCart);
+    }
+  }, []);
+
+  useEffect(() => {
+    saveCartToStorage(cartItems);
+  }, [cartItems]);
+
+  const saveCartToStorage = (cartItems) => {
+    try {
+      localStorage.setItem(CART_STORAGE_KEY, JSON.stringify(cartItems));
+    } catch (error) {
+      console.error('Failed to save cart to localStorage:', error);
+    }
+  };
+
+  const loadCartFromStorage = () => {
+    try {
+      const stored = localStorage.getItem(CART_STORAGE_KEY);
+      return stored ? JSON.parse(stored) : [];
+    } catch (error) {
+      console.error('Failed to load cart from localStorage:', error);
+      return [];
+    }
+  };
+
+  const clearCartFromStorage = () => {
+    try {
+      localStorage.removeItem(CART_STORAGE_KEY);
+    } catch (error) {
+      console.error('Failed to clear cart from localStorage:', error);
+    }
+  };
+
+  const addToCart = (product) => {
+    setCartItems(prevItems => {
+      const existingItem = prevItems.find(item => item.id === product.id);
+
+      if (existingItem) {
+        return prevItems.map(item =>
+          item.id === product.id
+            ? { ...item, quantity: item.quantity + 1 }
+            : item
+        );
+      } else {
+        return [...prevItems, {
+          id: product.id,
+          name: product.name || product.title,
+          price: product.discountPrice || product.price,
+          quantity: 1,
+          imageUrl: product.imageUrl || ''
+        }];
+      }
+    });
+    addToast("המוצר נוסף לעגלה", "success");
+  };
+
+  const removeFromCart = (itemId) => {
+    setCartItems(prevItems => prevItems.filter(item => item.id !== itemId));
+  };
+
+  // Update item quantity
+  const updateQuantity = (itemId, quantity) => {
+    if (quantity <= 0) {
+      removeFromCart(itemId);
+      return;
+    }
+
+    setCartItems(prevItems =>
+      prevItems.map(item =>
+        item.id === itemId
+          ? { ...item, quantity }
+          : item
+      )
+    );
+  };
+
+  const clearCart = () => {
+    setCartItems([]);
+    clearCartFromStorage();
+  };
+
+  const clearCartOnLogout = () => {
+    setCartItems([]);
+    clearCartFromStorage();
+  };
+
+  // Toggle cart visibility
+  const toggleCart = () => {
+    setIsCartOpen(prev => !prev);
+  };
+
+  const openCart = () => setIsCartOpen(true);
+  const closeCart = () => setIsCartOpen(false);
+
+  // Checkout handler
+  const handleCheckout = () => {
+    // TODO: Implement checkout logic
+    console.log('Proceeding to checkout with items:', cartItems);
+    console.log('Total:', totalPrice);
+    // For now, just close cart
+    closeCart();
+  };
+
+  const value = {
+    // State
+    cartItems,
+    totalItems,
+    totalPrice,
+    isCartOpen,
+
+    // Actions
+    addToCart,
+    removeFromCart,
+    updateQuantity,
+    clearCart,
+    clearCartOnLogout,
+    toggleCart,
+    openCart,
+    closeCart,
+    handleCheckout
+  };
+
+  return (
+    <CartContext.Provider value={value}>
+      {children}
+    </CartContext.Provider>
+  );
+};

package/dist/index.js

@@ -7,6 +7,8 @@ export { default as SmallItemCard } from './components/SmallItemCard';
 export { default as Hero } from './components/Hero'
 export { default as QAAccordion } from './components/QAAccordion'
 export { default as AdvantagesList } from './components/AdvantagesList'
+export { default as ShoppingCartModal } from './components/cart/ShoppingCartModal'
+export { default as FloatingCartButton } from './components/cart/FloatingCartButton'
 
 // Modals
 export { default as ItemDetailsModal } from './components/modals/ItemDetailsModal'
@@ -14,6 +16,7 @@ export { default as ItemDetailsModal } from './components/modals/ItemDetailsModa
 // Context
 export { ItemModalProvider, useItemModal } from './context/ItemModalContext';
 export { ToastProvider, useToast } from './components/ToastProvider'
+export { CartProvider, useCart } from './context/CartContext'
 
 // Hooks
 export { default as useScrollLock } from './hooks/useScrollLock'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codesinger0/shared-components",
-  "version": "1.0.43",
+  "version": "1.0.45",
   "description": "Shared React components for customer projects",
   "main": "dist/index.js",
   "files": [