@codesinger0/shared-components 1.1.28 → 1.1.30

package/dist/components/IntroSection.jsx

@@ -0,0 +1,74 @@
+import { motion } from "framer-motion";
+
+const IntroSection = ({
+    introHeight = '40vh',
+    introTitle,
+    introContent,
+    introImage,
+    classNames = {}
+}) => {
+    const {
+        introTitle: introTitleClass = 'title',
+        introContent: introContentClass = 'subtitle'
+    } = classNames;
+
+    return (
+        <>
+            {/* Introduction Section */}
+            <section className=" py-16 px-4" style={{ minHeight: introHeight }}>
+                <div className="max-w-6xl mx-auto" dir="rtl">
+                    {introImage ? (
+                        /* Layout with image */
+                        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center">
+                            {/* Text Content */}
+                            <div className="text-center lg:text-right order-2 lg:order-1">
+                                <h2 className={introTitleClass + " mb-6"}>
+                                    {introTitle}
+                                </h2>
+                                <p className={introContentClass + " leading-relaxed"} style={{ whiteSpace: 'pre-line' }}>
+                                    {introContent}
+                                </p>
+                            </div>
+
+                            {/* Image */}
+                            <motion.div
+                                key={'image'}
+                                initial={{ opacity: 0, x: 50 }}
+                                whileInView={{ opacity: 1, x: 0 }}
+                                viewport={{ once: true }}
+                                transition={{ delay: 1 * 0.5 }}
+                                className="h-full"
+                            >
+                                <div className="order-1 lg:order-2 flex justify-center lg:justify-end">
+                                    <div className="w-full max-w-md lg:max-w-lg">
+                                        <img
+                                            src={introImage}
+                                            alt={introTitle || "Introduction image"}
+                                            className="w-full h-auto rounded-lg shadow-lg object-cover"
+                                            onError={(e) => {
+                                                e.target.style.display = 'none';
+                                                console.warn('Failed to load intro image:', introImage);
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            </motion.div>
+                        </div>
+                    ) : (
+                        /* Text only layout (original) */
+                        <div className="text-center max-w-4xl mx-auto">
+                            <h2 className="title mb-6">
+                                {introTitle}
+                            </h2>
+                            <p className="subtitle leading-relaxed" style={{ whiteSpace: 'pre-line' }}>
+                                {introContent}
+                            </p>
+                        </div>
+                    )}
+                </div>
+            </section>
+        </>
+    );
+}
+
+export default IntroSection

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 '../../hooks/useToast';
+
+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

@@ -8,6 +8,7 @@ export { default as MasonryItemCard } from './components/MasonryItemCard';
 export { default as TextListCards } from './components/TextListCards';
 export { default as ArticlesList } from './components/ArticlesList';
 export { default as Hero } from './components/Hero'
+export { default as IntroSection } from './components/IntroSection'
 export { default as QAAccordion } from './components/QAAccordion'
 export { default as AdvantagesList } from './components/AdvantagesList'
 export { default as ShoppingCartModal } from './components/cart/ShoppingCartModal'
@@ -24,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';
@@ -35,4 +38,5 @@ export { default as useScrollLock } from './hooks/useScrollLock'
 
 // Utils
 export { default as ScrollToTop } from './utils/ScrollToTop'
-export { useScrollToAnchor } from './utils/ScrollManager'
+export { useScrollToAnchor } from './utils/ScrollManager'
+export { sendEmail } from './integrations/emailService'

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/package.json

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