@codesinger0/shared-components 1.1.58 → 1.1.61

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/context/ItemModalContext.jsx

@@ -0,0 +1,40 @@
+// src/context/ItemModalContext.js
+import React, { createContext, useContext, useState } from 'react';
+
+const ItemModalContext = createContext();
+
+export const useItemModal = () => {
+  const context = useContext(ItemModalContext);
+  if (!context) {
+    throw new Error('useItemModal must be used within an ItemModalProvider');
+  }
+  return context;
+};
+
+export const ItemModalProvider = ({ children }) => {
+  const [selectedItem, setSelectedItem] = useState(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const openModal = (item) => {
+    console.log('Opening modal for item:', item);
+    setSelectedItem(item);
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const value = {
+    selectedItem,
+    isModalOpen,
+    openModal,
+    closeModal
+  };
+
+  return (
+    <ItemModalContext.Provider value={value}>
+      {children}
+    </ItemModalContext.Provider>
+  );
+};

package/dist/hooks/useScrollLock.js

@@ -0,0 +1,52 @@
+// src/hooks/useScrollLock.js
+import { useEffect } from 'react';
+
+const useScrollLock = (isOpen) => {
+  useEffect(() => {
+    if (isOpen) {
+      // Store original styles
+      const originalStyle = window.getComputedStyle(document.body);
+      const originalOverflow = originalStyle.overflow;
+      const originalPosition = originalStyle.position;
+      
+      // Get current scroll position
+      const scrollY = window.scrollY;
+      
+      // Apply scroll lock with Mobile Safari fixes
+      document.body.style.overflow = 'hidden';
+      document.body.style.position = 'fixed';
+      document.body.style.top = `-${scrollY}px`;
+      document.body.style.left = '0';
+      document.body.style.right = '0';
+      document.body.style.width = '100%';
+      
+      // Mobile Safari specific: prevent viewport changes
+      const viewport = document.querySelector('meta[name="viewport"]');
+      const originalViewport = viewport?.content;
+      if (viewport) {
+        viewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no';
+      }
+      
+      // Cleanup function
+      return () => {
+        // Restore original styles
+        document.body.style.overflow = originalOverflow;
+        document.body.style.position = originalPosition;
+        document.body.style.top = '';
+        document.body.style.left = '';
+        document.body.style.right = '';
+        document.body.style.width = '';
+        
+        // Restore scroll position
+        window.scrollTo(0, scrollY);
+        
+        // Restore viewport
+        if (viewport && originalViewport) {
+          viewport.content = originalViewport;
+        }
+      };
+    }
+  }, [isOpen]);
+};
+
+export default useScrollLock;

package/dist/integrations/emailService.js

@@ -0,0 +1,167 @@
+// src/services/emailService.js
+import emailjs from '@emailjs/browser';
+
+// EmailJS Configuration
+const EMAILJS_CONFIG = {
+    serviceId: 'service_w3pkjf6',
+    templateId: 'template_lwf20nq',
+    publicKey: 'Sgy1Do0paUmA8QyPR'
+};
+
+// Rate limiting configuration
+const RATE_LIMIT = {
+    maxAttempts: 3,
+    timeWindow: 60000, // 1 minute in milliseconds
+    storageKey: 'emailjs_rate_limit'
+};
+
+// Initialize EmailJS
+emailjs.init(EMAILJS_CONFIG.publicKey);
+
+/**
+ * Check rate limiting
+ * @returns {boolean} - true if rate limit exceeded, false otherwise
+ */
+const checkRateLimit = () => {
+    try {
+        const rateLimitData = localStorage.getItem(RATE_LIMIT.storageKey);
+        
+        if (!rateLimitData) {
+            return false;
+        }
+
+        const { attempts, timestamp } = JSON.parse(rateLimitData);
+        const now = Date.now();
+
+        // Reset if time window has passed
+        if (now - timestamp > RATE_LIMIT.timeWindow) {
+            localStorage.removeItem(RATE_LIMIT.storageKey);
+            return false;
+        }
+
+        // Check if rate limit exceeded
+        if (attempts >= RATE_LIMIT.maxAttempts) {
+            const timeLeft = Math.ceil((RATE_LIMIT.timeWindow - (now - timestamp)) / 1000);
+            throw new Error(`יותר מדי ניסיונות. אנא נסה שוב בעוד ${timeLeft} שניות.`);
+        }
+
+        return false;
+    } catch (error) {
+        if (error.message.includes('יותר מדי ניסיונות')) {
+            throw error;
+        }
+        // If there's an error reading from localStorage, allow the request
+        return false;
+    }
+};
+
+/**
+ * Update rate limit counter
+ */
+const updateRateLimit = () => {
+    try {
+        const rateLimitData = localStorage.getItem(RATE_LIMIT.storageKey);
+        const now = Date.now();
+
+        if (!rateLimitData) {
+            localStorage.setItem(RATE_LIMIT.storageKey, JSON.stringify({
+                attempts: 1,
+                timestamp: now
+            }));
+            return;
+        }
+
+        const { attempts, timestamp } = JSON.parse(rateLimitData);
+
+        // Reset if time window has passed
+        if (now - timestamp > RATE_LIMIT.timeWindow) {
+            localStorage.setItem(RATE_LIMIT.storageKey, JSON.stringify({
+                attempts: 1,
+                timestamp: now
+            }));
+        } else {
+            // Increment attempts
+            localStorage.setItem(RATE_LIMIT.storageKey, JSON.stringify({
+                attempts: attempts + 1,
+                timestamp
+            }));
+        }
+    } catch (error) {
+        console.error('Error updating rate limit:', error);
+    }
+};
+
+/**
+ * Send email using EmailJS
+ * @param {Object} params - Email parameters
+ * @param {string} params.name - Sender's name
+ * @param {string} params.email - Sender's email
+ * @param {string} params.phone - Sender's phone
+ * @param {string} params.message - Email message
+ * @returns {Promise<Object>} - EmailJS response
+ */
+export const sendEmail = async ({ name, email, phone, business, message }) => {
+    try {
+        // Check rate limiting
+        checkRateLimit();
+
+        // Prepare template parameters matching your EmailJS template
+        const templateParams = {
+            from_name: name,
+            from_email: email,
+            from_phone: phone,
+            business: business,
+            message: message,
+            timestamp: new Date().toLocaleString('he-IL', {
+                timeZone: 'Asia/Jerusalem',
+                dateStyle: 'full',
+                timeStyle: 'short'
+            })
+        };
+
+        // Send email using EmailJS
+        const response = await emailjs.send(
+            EMAILJS_CONFIG.serviceId,
+            EMAILJS_CONFIG.templateId,
+            templateParams,
+            EMAILJS_CONFIG.publicKey
+        );
+
+        // Update rate limit counter on successful send
+        updateRateLimit();
+
+        console.log('Email sent successfully:', response);
+        return {
+            success: true,
+            response
+        };
+
+    } catch (error) {
+        console.error('Error sending email:', error);
+        
+        // Handle specific error types
+        if (error.message.includes('יותר מדי ניסיונות')) {
+            throw new Error(error.message);
+        }
+
+        if (error.text) {
+            throw new Error(`שגיאה בשליחת האימייל: ${error.text}`);
+        }
+
+        throw new Error('שגיאה בשליחת האימייל. אנא נסה שוב מאוחר יותר.');
+    }
+};
+
+/**
+ * Clear rate limit (useful for testing or admin purposes)
+ */
+export const clearRateLimit = () => {
+    try {
+        localStorage.removeItem(RATE_LIMIT.storageKey);
+        console.log('Rate limit cleared');
+    } catch (error) {
+        console.error('Error clearing rate limit:', error);
+    }
+};
+
+export default sendEmail;

package/dist/styles/shared-components.css

@@ -0,0 +1,29 @@
+    /* Glass Card - Glassmorphism Effect */
+    .glass-card {
+        @apply rounded-xl backdrop-blur-md;
+        background-color: var(--card-bg);
+        background: color-mix(in srgb, var(--card-bg) 75%, transparent);
+        backdrop-filter: blur(10px);
+        box-shadow: 0 8px 32px 0 color-mix(in srgb, var(--primary) 20%, transparent);
+        border: 1px solid color-mix(in srgb, var(--card-bg) 30%, transparent);
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .glass-button {
+        background: rgba(255, 107, 53, 0.2);
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(255, 107, 53, 0.3);
+        transition: all 0.3s ease;
+    }
+
+    .glass-button:hover {
+        background: rgba(255, 107, 53, 0.3);
+        transform: translateY(-2px);
+        box-shadow: 0 12px 24px rgba(255, 107, 53, 0.2);
+    }
+
+    .glass-card:hover {
+        background: color-mix(in srgb, var(--card-bg) 55%, transparent);
+        box-shadow: 0 12px 40px 0 color-mix(in srgb, var(--primary) 30%, transparent);
+        transform: translateY(-2px);
+    }

package/dist/utils/ScrollManager.jsx

@@ -0,0 +1,85 @@
+import { useCallback } from 'react';
+
+/**
+ * Custom hook for smooth scrolling to anchors
+ * @param {Object} options - Configuration options
+ * @param {string} options.behavior - Scroll behavior ('smooth', 'instant', 'auto')
+ * @param {string} options.block - Vertical alignment ('start', 'center', 'end', 'nearest')
+ * @param {number} options.offset - Additional offset in pixels (useful for fixed headers)
+ * @returns {Function} scrollToAnchor function
+ */
+export const useScrollToAnchor = (options = {}) => {
+  const {
+    behavior = 'smooth',
+    block = 'start',
+    offset = 0
+  } = options;
+
+  const scrollToAnchor = useCallback((anchorId) => {
+    // Remove # if provided
+    const cleanAnchorId = anchorId.replace('#', '');
+    
+    // Find the element
+    const element = document.getElementById(cleanAnchorId);
+    
+    if (!element) {
+      console.warn(`Element with id "${cleanAnchorId}" not found`);
+      return;
+    }
+
+    // If offset is needed, calculate position manually
+    if (offset !== 0) {
+      const elementPosition = element.getBoundingClientRect().top;
+      const offsetPosition = elementPosition + window.pageYOffset - offset;
+
+      window.scrollTo({
+        top: offsetPosition,
+        behavior: behavior
+      });
+    } else {
+      // Use native scrollIntoView
+      element.scrollIntoView({
+        behavior: behavior,
+        block: block,
+        inline: 'nearest'
+      });
+    }
+  }, [behavior, block, offset]);
+
+  return scrollToAnchor;
+};
+
+// Alternative hook that also handles URL hash updates
+export const useScrollToAnchorWithHash = (options = {}) => {
+  const scrollToAnchor = useScrollToAnchor(options);
+
+  const scrollToAnchorWithHash = useCallback((anchorId) => {
+    const cleanAnchorId = anchorId.replace('#', '');
+    
+    // Update URL hash without triggering page reload
+    history.pushState(null, null, `#${cleanAnchorId}`);
+    
+    // Scroll to the element
+    scrollToAnchor(cleanAnchorId);
+  }, [scrollToAnchor]);
+
+  return scrollToAnchorWithHash;
+};
+
+// Hook that automatically scrolls to hash on page load
+export const useScrollToHashOnLoad = (options = {}) => {
+  const scrollToAnchor = useScrollToAnchor(options);
+
+  React.useEffect(() => {
+    // Check if there's a hash in the URL when component mounts
+    const hash = window.location.hash;
+    if (hash) {
+      // Small delay to ensure page is fully loaded
+      setTimeout(() => {
+        scrollToAnchor(hash);
+      }, 100);
+    }
+  }, [scrollToAnchor]);
+
+  return scrollToAnchor;
+};

package/dist/utils/ScrollToTop.jsx

@@ -0,0 +1,14 @@
+// ScrollToTop.jsx
+import { useLayoutEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+export default function ScrollToTop({ behavior = 'auto' }) {
+  const { pathname } = useLocation();
+
+  // useLayoutEffect prevents visible jump because it runs before paint
+  useLayoutEffect(() => {
+    window.scrollTo({ top: 0, left: 0, behavior });
+  }, [pathname, behavior]);
+
+  return null;
+}

package/package.json

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