@codesinger0/shared-components 1.1.29 → 1.1.31

package/dist/components/clubMembership/ClubMembershipModal.jsx

@@ -0,0 +1,289 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, Crown, Loader2, CheckCircle } from 'lucide-react';
+import { useToast } from '../components/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/clubMembership/ClubPromoModal.jsx

@@ -0,0 +1,108 @@
+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/index.js

@@ -25,6 +25,8 @@ export { default as FullscreenCarousel } from './components/FullscreenCarousel'
 
 // Modals
 export { default as ItemDetailsModal } from './components/modals/ItemDetailsModal'
+export { default as ClubMembershipModal } from './components/clubMembership/ClubMembershipModal'
+export { default as ClubPromoModal } from './components/clubMembership/ClubPromoModal'
 
 // Context
 export { ItemModalProvider, useItemModal } from './context/ItemModalContext';

package/package.json

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