@codesinger0/shared-components 1.1.85 → 1.1.87

package/dist/components 2/cart/ShoppingCartModal.jsx

@@ -1,229 +0,0 @@
-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();
-
-    const orderFormScrollContainerRef = useRef(null);
-
-    // 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 ref={orderFormScrollContainerRef} className="h-full overflow-y-auto">
-                                    {CheckoutComponent ? (
-                                        <CheckoutComponent
-                                            onBack={handleBackToCart}
-                                            cartItems={cartItems}
-                                            totalPrice={totalPrice}
-                                            scrollContainerRef={orderFormScrollContainerRef}
-                                        />
-                                    ) : (
-                                        <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/components 2/clubMembership/ClubMembershipModal.jsx

@@ -1,289 +0,0 @@
-import React, { useState } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { X, Crown, Loader2, CheckCircle } from 'lucide-react';
-import { useToast } from '../ToastProvider';
-
-const ClubMembershipModal = ({ 
-  isOpen, 
-  onClose, 
-  onMembershipComplete,
-  userEmail,
-  updateClubMembership
-}) => {
-  const [formData, setFormData] = useState({
-    firstName: '',
-    lastName: '',
-    phone: '',
-    address: '',
-    marketingConsent: false
-  });
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [isCompleted, setIsCompleted] = useState(false);
-  const [errors, setErrors] = useState({});
-  
-  const addToast = useToast();
-
-  const handleInputChange = (field, value) => {
-    setFormData(prev => ({ ...prev, [field]: value }));
-    // Clear field error when user starts typing
-    if (errors[field]) {
-      setErrors(prev => ({ ...prev, [field]: '' }));
-    }
-  };
-
-  const validateForm = () => {
-    const newErrors = {};
-
-    if (!formData.firstName.trim()) {
-      newErrors.firstName = 'שם פרטי חובה';
-    }
-
-    if (!formData.lastName.trim()) {
-      newErrors.lastName = 'שם משפחה חובה';
-    }
-
-    if (!formData.phone.trim()) {
-      newErrors.phone = 'מספר טלפון חובה';
-    } else if (!/^(05\d{8}|5\d{8})$/.test(formData.phone.replace(/\D/g, ''))) {
-      newErrors.phone = 'מספר טלפון לא תקין';
-    }
-
-    if (!formData.address.trim()) {
-      newErrors.address = 'כתובת חובה';
-    }
-
-    if (!formData.marketingConsent) {
-      newErrors.marketingConsent = 'יש לאשר את הסכמתך לקבלת דיוור שיווקי';
-    }
-
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    
-    if (!validateForm()) {
-      return;
-    }
-
-    setIsSubmitting(true);
-
-    try {
-      // Update user with club membership and form data
-      await updateClubMembership({
-        firstName: formData.firstName.trim(),
-        lastName: formData.lastName.trim(),
-        phone: formData.phone.trim(),
-        address: formData.address.trim(),
-        isClubMember: true,
-        marketingConsent: formData.marketingConsent
-      });
-
-      setIsCompleted(true);
-      addToast('הצטרפת בהצלחה למועדון הלקוחות!', 'success');
-
-      // After short delay, notify parent and close
-      setTimeout(() => {
-        if (onMembershipComplete) {
-          onMembershipComplete();
-        }
-        onClose();
-        // Reset form for next time
-        setFormData({
-          firstName: '',
-          lastName: '',
-          phone: '',
-          address: '',
-          marketingConsent: false
-        });
-        setIsCompleted(false);
-      }, 2000);
-
-    } catch (error) {
-      console.error('Error joining club:', error);
-      addToast('שגיאה בהצטרפות למועדון. אנא נסה שנית.', 'error');
-    }
-
-    setIsSubmitting(false);
-  };
-
-  if (!isOpen) return null;
-
-  return (
-    <AnimatePresence>
-      <div className="fixed inset-0 z-50 flex items-center justify-center">
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          className="absolute inset-0 bg-black bg-opacity-50 backdrop-blur-sm"
-          onClick={onClose}
-        />
-
-        <motion.div
-          initial={{ opacity: 0, scale: 0.9, y: 20 }}
-          animate={{ opacity: 1, scale: 1, y: 0 }}
-          exit={{ opacity: 0, scale: 0.9, y: 20 }}
-          className="relative glass-card p-8 max-w-md w-full mx-4 max-h-[90vh] overflow-y-auto"
-        >
-          <button
-            onClick={onClose}
-            className="absolute top-4 left-4 p-2 rounded-full hover:bg-gray-100 transition-colors"
-          >
-            <X className="w-5 h-5" />
-          </button>
-
-          {isCompleted ? (
-            <div className="text-center">
-              <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                <CheckCircle className="w-8 h-8 text-green-600" />
-              </div>
-              <h3 className="text-2xl font-bold text-gray-800 mb-3">
-                ברוכים הבאים למועדון! 🎉
-              </h3>
-              <p className="text-gray-600">
-                הצטרפת בהצלחה למועדון הלקוחות וזכית ב-10% הנחה על ההזמנה הנוכחית!
-              </p>
-            </div>
-          ) : (
-            <>
-              <div className="text-center mb-6">
-                <div className="w-16 h-16 bg-gradient-to-r from-yellow-400 to-orange-400 rounded-full flex items-center justify-center mx-auto mb-4">
-                  <Crown className="w-8 h-8 text-white" />
-                </div>
-                <h3 className="text-2xl font-bold text-gray-800 mb-2">
-                  הצטרפות למועדון הלקוחות
-                </h3>
-                <p className="text-gray-600">
-                  מלא את הפרטים וזכה ב-10% הנחה על כל הזמנה!
-                </p>
-              </div>
-
-              <form onSubmit={handleSubmit} className="space-y-4">
-                <div>
-                  <label htmlFor="firstName" className="block text-sm font-medium text-gray-700 mb-1">
-                    שם פרטי *
-                  </label>
-                  <input
-                    id="firstName"
-                    type="text"
-                    value={formData.firstName}
-                    onChange={(e) => handleInputChange('firstName', e.target.value)}
-                    placeholder="שם פרטי"
-                    className={`w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent ${
-                      errors.firstName ? 'border-red-500' : 'border-gray-300'
-                    }`}
-                  />
-                  {errors.firstName && (
-                    <p className="text-red-600 text-sm mt-1">{errors.firstName}</p>
-                  )}
-                </div>
-
-                <div>
-                  <label htmlFor="lastName" className="block text-sm font-medium text-gray-700 mb-1">
-                    שם משפחה *
-                  </label>
-                  <input
-                    id="lastName"
-                    type="text"
-                    value={formData.lastName}
-                    onChange={(e) => handleInputChange('lastName', e.target.value)}
-                    placeholder="שם משפחה"
-                    className={`w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent ${
-                      errors.lastName ? 'border-red-500' : 'border-gray-300'
-                    }`}
-                  />
-                  {errors.lastName && (
-                    <p className="text-red-600 text-sm mt-1">{errors.lastName}</p>
-                  )}
-                </div>
-
-                <div>
-                  <label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-1">
-                    טלפון *
-                  </label>
-                  <input
-                    id="phone"
-                    type="tel"
-                    value={formData.phone}
-                    onChange={(e) => handleInputChange('phone', e.target.value)}
-                    placeholder="052-1234567"
-                    className={`w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent ${
-                      errors.phone ? 'border-red-500' : 'border-gray-300'
-                    }`}
-                  />
-                  {errors.phone && (
-                    <p className="text-red-600 text-sm mt-1">{errors.phone}</p>
-                  )}
-                </div>
-
-                <div>
-                  <label htmlFor="address" className="block text-sm font-medium text-gray-700 mb-1">
-                    כתובת מלאה *
-                  </label>
-                  <textarea
-                    id="address"
-                    value={formData.address}
-                    onChange={(e) => handleInputChange('address', e.target.value)}
-                    placeholder="רחוב, מספר בית, עיר"
-                    rows={2}
-                    className={`w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent ${
-                      errors.address ? 'border-red-500' : 'border-gray-300'
-                    }`}
-                  />
-                  {errors.address && (
-                    <p className="text-red-600 text-sm mt-1">{errors.address}</p>
-                  )}
-                </div>
-
-                <div className="flex items-start space-x-2 rtl:space-x-reverse">
-                  <input
-                    id="marketingConsent"
-                    type="checkbox"
-                    checked={formData.marketingConsent}
-                    onChange={(e) => handleInputChange('marketingConsent', e.target.checked)}
-                    className="mt-1 w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded"
-                  />
-                  <label htmlFor="marketingConsent" className="text-sm leading-5 text-gray-700">
-                    אני מסכים/מה לקבל דיוור שיווקי ועדכונים על מבצעים מיוחדים. *
-                    <span className="text-gray-500 block mt-1">
-                      (אנחנו מבטיחים לא לחפור ולשלוח רק תוכן איכותי ורלוונטי)
-                    </span>
-                  </label>
-                </div>
-                {errors.marketingConsent && (
-                  <p className="text-red-600 text-sm">{errors.marketingConsent}</p>
-                )}
-
-                <button
-                  type="submit"
-                  disabled={isSubmitting}
-                  className="w-full rounded-full py-3 text-white bg-gradient-to-r from-yellow-500 to-orange-500 border-0 hover:shadow-lg transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
-                >
-                  {isSubmitting ? (
-                    <>
-                      <Loader2 className="w-4 h-4 inline ml-2 animate-spin" />
-                      מצטרף למועדון...
-                    </>
-                  ) : (
-                    <>
-                      <Crown className="w-4 h-4 inline ml-2" />
-                      הצטרף למועדון וקבל 10% הנחה!
-                    </>
-                  )}
-                </button>
-
-                <p className="text-xs text-gray-500 text-center">
-                  * כל השדות הם שדות חובה להצטרפות למועדון
-                </p>
-              </form>
-            </>
-          )}
-        </motion.div>
-      </div>
-    </AnimatePresence>
-  );
-};
-
-export default ClubMembershipModal;

package/dist/components 2/clubMembership/ClubPromoModal.jsx

@@ -1,108 +0,0 @@
-import React from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { X, Crown, Star, Gift, Zap, LogIn } from 'lucide-react';
-
-const ClubPromoModal = ({ isOpen, onClose, onLoginRedirect }) => {
-  const handleJoinClick = () => {
-    onLoginRedirect();
-  };
-
-  if (!isOpen) return null;
-
-  return (
-    <AnimatePresence>
-      <div className="fixed inset-0 z-50 flex items-center justify-center">
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          className="absolute inset-0 bg-black bg-opacity-50 backdrop-blur-sm"
-          onClick={onClose}
-        />
-
-        <motion.div
-          initial={{ opacity: 0, scale: 0.9, y: 20 }}
-          animate={{ opacity: 1, scale: 1, y: 0 }}
-          exit={{ opacity: 0, scale: 0.9, y: 20 }}
-          className="relative glass-card p-8 max-w-lg w-full mx-4"
-        >
-          <button
-            onClick={onClose}
-            className="absolute top-4 left-4 p-2 rounded-full hover:bg-gray-100 transition-colors"
-          >
-            <X className="w-5 h-5" />
-          </button>
-
-          <div className="text-center">
-            <div className="w-20 h-20 bg-gradient-to-r from-yellow-400 to-orange-400 rounded-full flex items-center justify-center mx-auto mb-6">
-              <Crown className="w-10 h-10 text-white" />
-            </div>
-            
-            <h2 className="text-2xl font-bold text-gray-800 mb-4">
-              הצטרפו למועדון הלקוחות של טרופיקל!
-            </h2>
-            
-            <p className="text-gray-600 mb-6">
-              מועדון VIP עם יתרונות בלעדיים שיהפכו כל הזמנה לחגיגה
-            </p>
-
-            <div className="space-y-4 mb-8 text-right">
-              <div className="flex items-start gap-3">
-                <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
-                  <Gift className="w-4 h-4 text-green-600" />
-                </div>
-                <div>
-                  <h3 className="font-semibold text-gray-800">10% הנחה על כל הזמנה</h3>
-                  <p className="text-sm text-gray-600">הנחה קבועה על כל המוצרים בחנות</p>
-                </div>
-              </div>
-
-              <div className="flex items-start gap-3">
-                <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
-                  <Zap className="w-4 h-4 text-blue-600" />
-                </div>
-                <div>
-                  <h3 className="font-semibold text-gray-800">גישה מהירה להזמנות</h3>
-                  <p className="text-sm text-gray-600">פרטים שמורים לתהליך הזמנה מהיר</p>
-                </div>
-              </div>
-
-              <div className="flex items-start gap-3">
-                <div className="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
-                  <Star className="w-4 h-4 text-purple-600" />
-                </div>
-                <div>
-                  <h3 className="font-semibold text-gray-800">מבצעים בלעדיים</h3>
-                  <p className="text-sm text-gray-600">עדכונים ראשונים על מוצרים חדשים ומבצעים</p>
-                </div>
-              </div>
-            </div>
-
-            <div className="space-y-3">
-              <button
-                onClick={handleJoinClick}
-                className="w-full rounded-full py-3 text-white bg-gradient-to-r from-yellow-500 to-orange-500 border-0 text-lg font-semibold hover:shadow-lg transition-all duration-200"
-              >
-                <LogIn className="w-5 h-5 inline ml-2" />
-                התחבר והצטרף למועדון!
-              </button>
-              
-              <button
-                onClick={onClose}
-                className="w-full rounded-full py-2 text-gray-600 hover:text-gray-800 hover:bg-gray-50 transition-colors"
-              >
-                אולי מאוחר יותר
-              </button>
-            </div>
-
-            <p className="text-xs text-gray-500 mt-4">
-              ההצטרפות חינם לחלוטין ואפשר לבטל בכל עת
-            </p>
-          </div>
-        </motion.div>
-      </div>
-    </AnimatePresence>
-  );
-};
-
-export default ClubPromoModal;

package/dist/components 2/elements/CTAButton.jsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-const CTAButton = ({ children, onClick, className = '', ...props }) => {
-  return (
-    <button
-      className={`btn-primary text-big rounded-sm px-6 py-3 transition-all duration-200 hover:brightness-90 inline-flex items-center gap-2 ${className}`}
-      onClick={onClick}
-      dir="rtl"
-      {...props}
-    >
-      {children}
-      <span className="text-xl">←</span>
-    </button>
-  );
-};
-
-export default CTAButton;