@codesinger0/shared-components 1.1.34 → 1.1.35

package/dist/components/cart/OrderForm.jsx

@@ -0,0 +1,900 @@
+import React, { useState, useEffect } from 'react';
+import ClubMembershipModal from '../clubMembership/ClubMembershipModal'
+import ClubPromoModal from '../clubMembership/ClubPromoModal'
+import { ArrowRight, Truck, Store, Crown, AlertCircle, Loader2, Calendar } from 'lucide-react';
+import { BookOpen } from 'lucide-react';
+
+const AVAILABLE_CITIES = [
+    'פתח תקווה',
+    'רמת גן',
+    'גבעתיים',
+    'בני ברק',
+    'תל אביב',
+    'ראש העין',
+    'קרית אונו',
+    'אור יהודה',
+    'יהוד מונסון'
+];
+
+const validateFullName = (name) => {
+    if (!name || !name.trim()) {
+        return 'שם מלא חובה';
+    }
+
+    const words = name.trim().split(/\s+/);
+    if (words.length < 2) {
+        return 'יש להזין שם פרטי ומשפחה';
+    }
+
+    return null;
+};
+
+const OrderForm = ({
+    onBack,
+    courseData,
+    workshopData,
+    PaymentModalComponent,
+    isAuthenticated, // useAuth hook provides this
+    currentUserData, updateUserProfile, updateClubMembership, //useUserContext provides this
+    createOrder, updateOrder, // useOrders hook provides this
+    settings, settingsLoading, // useSettings hook provides this
+    onNavigateToLogin,
+    addToast, // Inject toast function
+    cartItems,
+    totalPrice,
+}) => {
+
+    const [nameError, setNameError] = useState('');
+    const [deliveryError, setDeliveryError] = useState('');
+    const [clubPromoModalOpen, setClubPromoModalOpen] = useState(false);
+    const [clubMembershipModalOpen, setClubMembershipModalOpen] = useState(false);
+    const [clubInfoVisible, setClubInfoVisible] = useState(false);
+
+    // Course and Workshop detection
+    const isCoursePurchase = !!courseData;
+    const isWorkshopPurchase = !!workshopData;
+    const isDigitalPurchase = isCoursePurchase; // Only courses are digital
+    const isUserClubMember = currentUserData?.isClubMember || false;
+    const shouldShowClubMembership = !isUserClubMember;
+    const clubDiscountPercentage = settings?.clubDiscountPercentage || 10;
+
+    const items = isCoursePurchase ? [courseData] : isWorkshopPurchase ? [workshopData] : cartItems;
+    const itemsTotal = isCoursePurchase
+        ? (courseData.discountPrice || courseData.price)
+        : isWorkshopPurchase
+            ? (workshopData.discountPrice || workshopData.price)
+            : totalPrice;
+
+
+    const [paymentModalOpen, setPaymentModalOpen] = useState(false);
+    const [paymentData, setPaymentData] = useState(null);
+    const [createdOrderId, setCreatedOrderId] = useState(null);
+    const [submitError, setSubmitError] = useState('');
+    const [formData, setFormData] = useState({
+        name: '',
+        email: '',
+        phone: '',
+        deliveryMethod: isDigitalPurchase || isWorkshopPurchase ? 'digital' : 'delivery',
+        deliveryCity: '',
+        deliveryAddress: ''
+    });
+
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [errors, setErrors] = useState({});
+
+    const minDeliveryAmount = settings.minDeliveryAmount;
+    const deliveryFee = settings.deliveryFee;
+
+    useEffect(() => {
+        if (currentUserData) {
+            setFormData(prev => ({
+                ...prev,
+                name: currentUserData.getFullName() || '',
+                email: currentUserData.email || '',
+                phone: currentUserData.phone || '',
+                deliveryCity: currentUserData.address ? '' : prev.deliveryCity,
+                deliveryMethod: isCoursePurchase ? 'digital' : prev.deliveryMethod
+            }));
+        }
+    }, [currentUserData, isCoursePurchase]);
+
+
+    const generateSimpleOrderNumber = () => {
+        return Math.floor(Math.random() * 9000000) + 1000000; // 7-digit number
+    };
+
+    const createPaymentLink = async (orderData) => {
+        const finalTotal = orderData.totalAmount;
+
+        // Map cart items to products data format
+        const productsData = orderData.items.map((item) => ({
+            catalogNumber: item.id,
+            name: item.name,
+            price: isUserClubMember ? item.price * (1 - clubDiscountPercentage / 100) : item.price,
+            quantity: item.quantity,
+            minQuantity: item.quantity,
+            ...(item.image_url && { url: encodeURIComponent(item.image_url) })
+        }));
+
+        // Add delivery fee as separate product if applicable
+        if (orderData.deliveryMethod === 'delivery' && deliveryFee > 0) {
+            productsData.push({
+                catalogNumber: 'delivery_fee',
+                name: 'דמי משלוח',
+                price: orderData.deliveryFee,
+                quantity: 1,
+                minQuantity: 1
+            });
+        }
+
+        const response = await fetch('https://us-central1-beauty-salon-b2e61.cloudfunctions.net/confectioneryShopPayment', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                operation: 'createPaymentLink',
+                customerName: orderData.customerName,
+                customerPhone: orderData.customerPhone,
+                price: finalTotal,
+                orderNumber: orderData.simpleOrderNumber,
+                products: {
+                    data: productsData
+                }
+            })
+        });
+
+        const result = await response.json();
+
+        if (result.success) {
+            return {
+                success: true,
+                data: {
+                    paymentUrl: result.data.paymentUrl,
+                    paymentId: result.data.paymentId,
+                    expiresAt: result.data.expiresAt,
+                    simpleOrderNumber: orderData.simpleOrderNumber
+                }
+            };
+        } else {
+            return {
+                success: false,
+                error: result.error || 'שגיאה ביצירת קישור התשלום'
+            };
+        }
+    };
+
+    const simulatePaymentLinkCreation = async (simpleOrderNumber) => {
+        // 50/50 success/failure simulation
+        const isSuccess = Math.random() > 0.01;
+
+        // Simulate API delay
+        await new Promise(resolve => setTimeout(resolve, 2000));
+
+        if (isSuccess) {
+            return {
+                success: true,
+                data: {
+                    paymentLink: `https://mock-payment-link.com/pay/${simpleOrderNumber}`,
+                    paymentId: `pay_${Date.now()}`,
+                    simpleOrderNumber,
+                    expiresAt: new Date(Date.now() + 5 * 60 * 1000) // 5 minutes
+                }
+            };
+        } else {
+            const errors = [
+                "שגיאת רשת - אנא נסו שוב",
+                "פרטי התשלום לא תקינים",
+                "השרת אינו זמין כרגע",
+                "שגיאה באימות הנתונים",
+                "תקלה זמנית - אנא נסו שוב מאוחר יותר"
+            ];
+            return {
+                success: false,
+                error: errors[Math.floor(Math.random() * errors.length)]
+            };
+        }
+    };
+
+    const validateForm = () => {
+        const newErrors = {};
+
+        if (!formData.name.trim()) {
+            newErrors.name = 'שם מלא חובה';
+        } else {
+            const words = formData.name.trim().split(/\s+/);
+            if (words.length < 2) {
+                newErrors.name = 'יש להזין שם פרטי ומשפחה';
+            }
+        }
+
+        if (!formData.email.trim()) {
+            newErrors.email = 'כתובת אימייל חובה';
+        } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+            newErrors.email = 'כתובת אימייל לא תקינה';
+        }
+
+        if (!formData.phone.trim()) {
+            newErrors.phone = 'מספר טלפון חובה';
+        } else if (!/^(05\d{8}|5\d{8})$/.test(formData.phone.replace(/\D/g, ''))) {
+            newErrors.phone = 'מספר טלפון לא תקין';
+        }
+
+        // Only validate delivery for physical delivery method
+        if (formData.deliveryMethod === 'delivery') {
+            const subtotal = (isCoursePurchase || isWorkshopPurchase) ? itemsTotal : totalPrice;
+            const clubDiscount = isUserClubMember ? (subtotal * (clubDiscountPercentage / 100)) : 0;
+            const currentTotal = subtotal - clubDiscount;
+
+            if (currentTotal < minDeliveryAmount) {
+                newErrors.delivery = `מינימום הזמנה למשלוח הוא ₪${minDeliveryAmount}`;
+            }
+            if (!formData.deliveryCity) {
+                newErrors.deliveryCity = 'בחירת עיר חובה';
+            }
+            if (!formData.deliveryAddress.trim()) {
+                newErrors.deliveryAddress = 'כתובת משלוח חובה';
+            }
+        }
+
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    };
+
+    const grantCourseAccess = async (userId, courseIds) => {
+        try {
+            if (!currentUserData) return false;
+            const existingAccess = currentUserData.coursesAccess || [];
+            const newAccess = [...new Set([...existingAccess, ...courseIds])];
+            await updateUserProfile(currentUserData, { coursesAccess: newAccess });
+            return true;
+        } catch (error) {
+            console.error('Error granting course access:', error);
+            return false;
+        }
+    };
+
+    const handleInputChange = (field, value) => {
+        setFormData(prev => ({ ...prev, [field]: value }));
+        if (errors[field]) {
+            setErrors(prev => ({ ...prev, [field]: '' }));
+        }
+    };
+
+    const handleClubButtonClick = () => {
+        if (!isAuthenticated()) {
+            setClubInfoVisible(true);
+            setClubPromoModalOpen(true);
+            addToast('יש להתחבר כדי להצטרף למועדון הלקוחות', 'info');
+        } else if (!isUserClubMember) {
+            setClubMembershipModalOpen(true);
+        }
+    };
+
+    const handleLoginRedirect = () => {
+        setClubPromoModalOpen(false);
+        setClubMembershipModalOpen(false);
+        setClubInfoVisible(false);
+        if (onBack) {
+            onBack(true)
+        }
+
+        onNavigateToLogin();
+    };
+
+    const handleOnBack =() => {
+        debugger
+        onBack();
+    }
+
+    const handleMembershipComplete = () => {
+        // Component will re-render with updated user data
+    };
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+
+        // Validate name before submission
+        const nameValidationError = validateFullName(formData.name);
+        if (nameValidationError) {
+            setNameError(nameValidationError);
+            return;
+        }
+
+        // Clear previous errors
+        setNameError('');
+        setDeliveryError('');
+
+        if (!validateForm()) return;
+
+        const subtotal = (isCoursePurchase || isWorkshopPurchase) ? itemsTotal : totalPrice;
+        const clubDiscount = isUserClubMember ? (subtotal * (clubDiscountPercentage / 100)) : 0;
+        const currentTotal = subtotal - clubDiscount;
+
+        // Check minimum delivery amount
+        if (formData.deliveryMethod === 'delivery') {
+            if (currentTotal < minDeliveryAmount) {
+                setDeliveryError(`מינימום הזמנה למשלוח הוא ₪${minDeliveryAmount}`);
+                return;
+            }
+        }
+
+        setIsSubmitting(true);
+        setSubmitError('');
+
+        // Calculate delivery cost - only charge if order meets minimum
+        const discountedSubtotal = subtotal - clubDiscount;
+        const deliveryCost = formData.deliveryMethod === 'delivery' && discountedSubtotal >= minDeliveryAmount ? deliveryFee : 0;
+        const grandTotal = discountedSubtotal + deliveryCost;
+
+        try {
+            const orderItems = isCoursePurchase || isWorkshopPurchase ? items : cartItems.map(item => ({
+                id: item.id,
+                name: item.name || item.title,
+                price: item.price,
+                quantity: item.quantity,
+                totalPrice: item.price * item.quantity,
+            }));
+
+            // Create order with payment_pending status
+            const orderData = {
+                simpleOrderNumber: generateSimpleOrderNumber(),
+                customerName: formData.name,
+                customerEmail: formData.email,
+                customerPhone: formData.phone,
+                deliveryMethod: formData.deliveryMethod,
+                deliveryCity: formData.deliveryMethod === 'delivery' ? formData.deliveryCity : null,
+                deliveryAddress: formData.deliveryMethod === 'delivery' ? formData.deliveryAddress : null,
+                items: isCoursePurchase ? [{
+                    id: courseData.id,
+                    name: courseData.title,
+                    price: courseData.discountPrice || courseData.price,
+                    quantity: 1,
+                    totalPrice: courseData.discountPrice || courseData.price,
+                    type: 'course'
+                }] : isWorkshopPurchase ? [{
+                    id: workshopData.id,
+                    name: workshopData.title,
+                    price: workshopData.discountPrice || workshopData.price,
+                    quantity: 1,
+                    totalPrice: workshopData.discountPrice || workshopData.price,
+                    type: 'workshop',
+                    date: workshopData.date,
+                    time: workshopData.time,
+                    duration: workshopData.duration
+                }] : orderItems,
+                deliveryFee: formData.deliveryMethod === 'delivery' ? deliveryFee : 0,
+                totalAmount: grandTotal,
+                paymentStatus: 'payment_pending',
+                orderType: isCoursePurchase ? 'course' : isWorkshopPurchase ? 'workshop' : 'product'
+            };
+
+            // Create payment link
+            // const paymentResponse = await createPaymentLink(orderData);
+              const paymentResponse = await simulatePaymentLinkCreation(orderData);
+
+            if (paymentResponse.success) {
+                // Create order items in the format expected by the database
+                const orderItemsForDB = orderData.items.map((item) => ({
+                    product_id: item.id,
+                    product_name: item.name,
+                    quantity: item.quantity,
+                    unit_price: item.price,
+                    total_price: item.price * item.quantity
+                }));
+
+                // Add complete order data with payment info
+                const completeOrderData = {
+                    ...orderData,
+                    items: orderItemsForDB,
+                    paymentId: paymentResponse.data.paymentId,
+                    paymentLink: paymentResponse.data.paymentUrl,
+                    paymentExpiresAt: paymentResponse.data.expiresAt,
+                    paymentStatus: 'link_created'
+                };
+
+                const newOrder = await createOrder(completeOrderData);
+                setCreatedOrderId(newOrder.id);
+
+                setPaymentData({
+                    paymentLink: paymentResponse.data.paymentUrl,
+                    paymentId: paymentResponse.data.paymentId,
+                    expiresAt: paymentResponse.data.expiresAt,
+                    simpleOrderNumber: paymentResponse.data.simpleOrderNumber
+                });
+
+                setPaymentModalOpen(true);
+
+                // Add course access for authenticated users
+                if (isCoursePurchase && isAuthenticated()) {
+                    await grantCourseAccess(currentUserData.id, [courseData.id]);
+                }
+            } else {
+                setSubmitError(paymentResponse.error);
+            }
+        } catch (error) {
+            console.error('Order submission error:', error);
+            setSubmitError('שגיאה ביצירת ההזמנה או קישור התשלום. אנא נסו שוב.');
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    if ((!cartItems || cartItems.length === 0) && !isCoursePurchase && !isWorkshopPurchase) {
+        return (
+            <div className="text-center py-12">
+                <h2 className="title mb-4">העגלה ריקה</h2>
+                <p className="subtitle">אין פריטים בעגלת הקניות</p>
+            </div>
+        );
+    }
+
+    if (settingsLoading) {
+        return (
+            <div className="min-h-screen bg-main flex items-center justify-center">
+                <div className="text-center">
+                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+                    <p className="content-text">טוען הגדרות...</p>
+                </div>
+            </div>
+        );
+    }
+
+    const subtotal = (isCoursePurchase || isWorkshopPurchase) ? itemsTotal : totalPrice;
+    const clubDiscount = isUserClubMember ? (subtotal * (clubDiscountPercentage / 100)) : 0;
+    const discountedSubtotal = subtotal - clubDiscount;
+    const deliveryCost = formData.deliveryMethod === 'delivery' ?
+        (discountedSubtotal >= minDeliveryAmount ? deliveryFee : 0) : 0;
+    const grandTotal = discountedSubtotal + deliveryCost;
+
+    return (
+        <div className="min-h-screen bg-main py-12 px-4" dir="rtl">
+            <div className="max-w-2xl mx-auto">
+
+                {/* Back Button */}
+                <button
+                    onClick={handleOnBack}
+                    className="flex items-center gap-2 mb-6 content-text hover:text-primary transition-colors duration-200"
+                >
+                    <ArrowRight className="w-4 h-4" />
+                    חזור לעגלה
+                </button>
+
+                <div className="glass-card p-8">
+                    <h1 className="title text-center mb-8">
+                        {isCoursePurchase ? 'רכישת קורס' : isWorkshopPurchase ? 'הרשמה לסדנה' : 'פרטים להזמנה'}
+                    </h1>
+
+                    {isCoursePurchase && (
+                        <div className="glass-card p-4 border border-blue-200 mb-6">
+                            <div className="flex items-center gap-2 text-blue-800">
+                                <BookOpen className="w-5 h-5" />
+                                <p className="content-text font-medium">
+                                    אתם רוכשים גישה דיגיטלית לקורס. לאחר השלמת התשלום תוכלו לגשת לקורס מיד.
+                                </p>
+                            </div>
+                        </div>
+                    )}
+
+                    {isWorkshopPurchase && (
+                        <div className="glass-card p-4 border border-green-200 mb-6">
+                            <div className="flex items-center gap-2 text-green-800">
+                                <Calendar className="w-5 h-5" />
+                                <p className="content-text font-medium">
+                                    אתם נרשמים לסדנה פיזית. פרטי הסדנה יישלחו אליכם לאחר אישור ההרשמה.
+                                </p>
+                            </div>
+                        </div>
+                    )}
+
+                    <div className={`space-y-6 ${isSubmitting ? 'pointer-events-none opacity-60' : ''}`}>
+
+                        {/* Customer Details */}
+                        <div className="space-y-4">
+                            <h2 className="subtitle font-semibold">פרטים אישיים</h2>
+
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <div>
+                                    <label className="block subtitle font-medium mb-2">שם מלא *</label>
+                                    <input
+                                        type="text"
+                                        value={formData.name}
+                                        onChange={(e) => handleInputChange('name', e.target.value)}
+                                        className={`w-full p-3 border rounded-lg focus:ring-2 focus:ring-primary transition-colors duration-200 ${errors.name ? 'border-red-500' : 'border-gray-300 focus:border-primary'
+                                            }`}
+                                        placeholder="שם פרטי ומשפחה"
+                                    />
+                                    {errors.name && (
+                                        <div className="flex items-center gap-2 mt-2 text-sm text-red-600">
+                                            <AlertCircle className="w-4 h-4" />
+                                            <span>{errors.name}</span>
+                                        </div>
+                                    )}
+                                    {nameError && (
+                                        <div className="flex items-center gap-2 mt-2 p-2 bg-red-50 border border-red-200 rounded">
+                                            <AlertCircle className="w-4 h-4 text-red-600" />
+                                            <span className="content-text text-red-700">{nameError}</span>
+                                        </div>
+                                    )}
+                                </div>
+
+                                <div>
+                                    <label className="block subtitle font-medium mb-2">טלפון *</label>
+                                    <input
+                                        type="tel"
+                                        value={formData.phone}
+                                        onChange={(e) => handleInputChange('phone', e.target.value)}
+                                        className={`w-full p-3 border rounded-lg focus:ring-2 focus:ring-primary transition-colors duration-200 ${errors.phone ? 'border-red-500' : 'border-gray-300 focus:border-primary'
+                                            }`}
+                                        placeholder="050-1234567"
+                                        dir="ltr"
+                                    />
+                                    {errors.phone && (
+                                        <div className="flex items-center gap-2 mt-2 text-sm text-red-600">
+                                            <AlertCircle className="w-4 h-4" />
+                                            <span>{errors.phone}</span>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+
+                            <div>
+                                <label className="block subtitle font-medium mb-2">אימייל *</label>
+                                <input
+                                    type="email"
+                                    value={formData.email}
+                                    onChange={(e) => handleInputChange('email', e.target.value)}
+                                    disabled={!!currentUserData?.email}
+                                    className={`w-full p-3 border rounded-lg focus:ring-2 focus:ring-primary transition-colors duration-200 ${errors.email ? 'border-red-500' : 'border-gray-300 focus:border-primary'
+                                        } ${currentUserData?.email ? 'bg-gray-100' : ''}`}
+                                    placeholder="example@email.com"
+                                    dir="ltr"
+                                />
+                                {errors.email && (
+                                    <div className="flex items-center gap-2 mt-2 text-sm text-red-600">
+                                        <AlertCircle className="w-4 h-4" />
+                                        <span>{errors.email}</span>
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+
+                        {/* Delivery Method */}
+                        {!isCoursePurchase && !isWorkshopPurchase && (<div className="space-y-4">
+                            <h2 className="subtitle font-semibold">שיטת קבלת ההזמנה</h2>
+
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <label className={`glass-card p-4 cursor-pointer border-2 transition-colors duration-200 ${formData.deliveryMethod === 'delivery'
+                                    ? 'border-primary bg-opacity-20'
+                                    : 'border-transparent hover:border-gray-300'
+                                    }`}>
+                                    <input
+                                        type="radio"
+                                        name="deliveryMethod"
+                                        value="delivery"
+                                        checked={formData.deliveryMethod === 'delivery'}
+                                        onChange={(e) => handleInputChange('deliveryMethod', e.target.value)}
+                                        className="sr-only"
+                                    />
+                                    <div className="flex items-center gap-3">
+                                        <Truck className="w-5 h-5 text-primary" />
+                                        <div>
+                                            <div className="subtitle font-medium">משלוח עד הבית</div>
+                                            <div className="content-text">מינימום ₪{minDeliveryAmount} • דמי משלוח ₪{deliveryFee}</div>
+                                        </div>
+                                    </div>
+                                </label>
+
+                                <label className={`glass-card p-4 cursor-pointer border-2 transition-colors duration-200 ${formData.deliveryMethod === 'pickup'
+                                    ? 'border-primary bg-opacity-20'
+                                    : 'border-transparent hover:border-gray-300'
+                                    }`}>
+                                    <input
+                                        type="radio"
+                                        name="deliveryMethod"
+                                        value="pickup"
+                                        checked={formData.deliveryMethod === 'pickup'}
+                                        onChange={(e) => handleInputChange('deliveryMethod', e.target.value)}
+                                        className="sr-only"
+                                    />
+                                    <div className="flex items-center gap-3">
+                                        <Store className="w-5 h-5 text-primary" />
+                                        <div>
+                                            <div className="subtitle font-medium">איסוף עצמי</div>
+                                            <div className="content-text">ללא דמי משלוח</div>
+                                        </div>
+                                    </div>
+                                </label>
+                            </div>
+
+                            {errors.delivery && (
+                                <div className="flex items-center gap-2 text-sm text-red-600">
+                                    <AlertCircle className="w-4 h-4" />
+                                    <span>{errors.delivery}</span>
+                                </div>
+                            )}
+                            {deliveryError && (
+                                <div className="flex items-center gap-2 mt-2 p-2 bg-red-50 border border-red-200 rounded">
+                                    <AlertCircle className="w-4 h-4 text-red-600" />
+                                    <span className="content-text text-red-700">{deliveryError}</span>
+                                </div>
+                            )}
+                        </div>)}
+
+                        {/* Address */}
+                        {(formData.deliveryMethod === 'delivery' || isCoursePurchase || isWorkshopPurchase) && (
+                            <div className="space-y-4 border-t border-gray-200 pt-6">
+                                <h2 className="subtitle font-semibold">כתובת</h2>
+
+                                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                    <div>
+                                        <label className="block subtitle font-medium mb-2">עיר *</label>
+                                        {(isCoursePurchase || isWorkshopPurchase) ? (
+                                            <input
+                                                type="text"
+                                                value={formData.deliveryCity}
+                                                onChange={(e) => handleInputChange('deliveryCity', e.target.value)}
+                                                className={`w-full p-3 border rounded-lg focus:ring-2 focus:ring-primary transition-colors duration-200 ${errors.deliveryCity ? 'border-red-500' : 'border-gray-300 focus:border-primary'
+                                                    }`}
+                                                placeholder="הזן עיר"
+                                            />
+                                        ) : (
+                                            <select
+                                                value={formData.deliveryCity}
+                                                onChange={(e) => handleInputChange('deliveryCity', e.target.value)}
+                                                className={`w-full p-3 border rounded-lg focus:ring-2 focus:ring-primary transition-colors duration-200 ${errors.deliveryCity ? 'border-red-500' : 'border-gray-300 focus:border-primary'
+                                                    }`}
+                                            >
+                                                <option value="">בחר עיר</option>
+                                                {AVAILABLE_CITIES.map((city) => (
+                                                    <option key={city} value={city}>{city}</option>
+                                                ))}
+                                            </select>
+                                        )}
+                                        {errors.deliveryCity && (
+                                            <div className="flex items-center gap-2 mt-2 text-sm text-red-600">
+                                                <AlertCircle className="w-4 h-4" />
+                                                <span>{errors.deliveryCity}</span>
+                                            </div>
+                                        )}
+                                    </div>
+
+                                    <div>
+                                        <label className="block subtitle font-medium mb-2">רחוב ומספר בית *</label>
+                                        <input
+                                            type="text"
+                                            value={formData.deliveryAddress}
+                                            onChange={(e) => handleInputChange('deliveryAddress', e.target.value)}
+                                            className={`w-full p-3 border rounded-lg focus:ring-2 focus:ring-primary transition-colors duration-200 ${errors.deliveryAddress ? 'border-red-500' : 'border-gray-300 focus:border-primary'
+                                                }`}
+                                            placeholder="רחוב 123, דירה 4"
+                                        />
+                                        {errors.deliveryAddress && (
+                                            <div className="flex items-center gap-2 mt-2 text-sm text-red-600">
+                                                <AlertCircle className="w-4 h-4" />
+                                                <span>{errors.deliveryAddress}</span>
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+
+                                {formData.deliveryMethod === 'delivery' && (
+                                    <div className="glass-card p-4 bg-yellow-50 border border-yellow-200">
+                                        <p className="content-text text-yellow-800">
+                                            <strong>שים לב:</strong> אנחנו מבצעים משלוחים רק לערים המופיעות ברשימה.
+                                        </p>
+                                    </div>
+                                )}
+                            </div>
+                        )}
+
+                        {/* Order Summary */}
+                        <div className="glass-card p-6 bg-opacity-50 border-t border-gray-200">
+                            <h2 className="subtitle font-semibold mb-4">סיכום ההזמנה</h2>
+
+                            <div className="space-y-3 mb-4">
+                                {isCoursePurchase ? (
+                                    // Course Purchase Summary
+                                    <div className="flex justify-between items-start content-text py-3 border-b border-gray-200">
+                                        <div className="flex-1">
+                                            <div className="flex items-center gap-2 mb-1">
+                                                <BookOpen className="w-4 h-4 text-primary" />
+                                                <span className="content-text font-medium">{courseData.title}</span>
+                                            </div>
+                                            <p className="text-xs mt-1 line-clamp-2">
+                                                {courseData.description}
+                                            </p>
+                                            <div className="text-xs text-primary mt-2 bg-blue-50 px-2 py-1 rounded inline-block">
+                                                גישה דיגיטלית מיידית
+                                            </div>
+                                        </div>
+                                        <div className="text-left ml-4">
+                                            {courseData.discountPrice && courseData.discountPrice < courseData.price ? (
+                                                <div>
+                                                    <div className="text-sm line-through">
+                                                        ₪{courseData.price.toFixed(2)}
+                                                    </div>
+                                                    <div className="font-medium text-primary">
+                                                        ₪{courseData.discountPrice.toFixed(2)}
+                                                    </div>
+                                                </div>
+                                            ) : (
+                                                <div className="font-medium">₪{courseData.price.toFixed(2)}</div>
+                                            )}
+                                        </div>
+                                    </div>
+                                ) : isWorkshopPurchase ? (
+                                    // Workshop Purchase Summary
+                                    <div className="flex justify-between items-start content-text py-3 border-b border-gray-200">
+                                        <div className="flex-1">
+                                            <div className="flex items-center gap-2 mb-1">
+                                                <Calendar className="w-4 h-4 text-primary" />
+                                                <span className="content-text font-medium">{workshopData.title}</span>
+                                            </div>
+                                            <p className="text-xs mt-1 line-clamp-2">
+                                                {workshopData.description}
+                                            </p>
+                                            <div className="flex items-center gap-4 mt-2 text-xs">
+                                                <div className="flex items-center gap-1">
+                                                    <Calendar className="w-3 h-3" />
+                                                    <span>{workshopData.date}</span>
+                                                </div>
+                                                <div className="flex items-center gap-1">
+                                                    <span>{workshopData.time}</span>
+                                                </div>
+                                                <div className="flex items-center gap-1">
+                                                    <span>({workshopData.duration})</span>
+                                                </div>
+                                            </div>
+                                            {workshopData.location && (
+                                                <div className="flex items-center gap-1 mt-1 text-xs">
+                                                    <MapPin className="w-3 h-3" />
+                                                    <span>{workshopData.location}</span>
+                                                </div>
+                                            )}
+                                        </div>
+                                        <div className="text-left ml-4">
+                                            {workshopData.discountPrice && workshopData.discountPrice < workshopData.price ? (
+                                                <div>
+                                                    <div className="text-sm line-through">
+                                                        ₪{workshopData.price.toFixed(2)}
+                                                    </div>
+                                                    <div className="font-medium text-primary">
+                                                        ₪{workshopData.discountPrice.toFixed(2)}
+                                                    </div>
+                                                </div>
+                                            ) : (
+                                                <div className="font-medium">₪{workshopData.price.toFixed(2)}</div>
+                                            )}
+                                        </div>
+                                    </div>
+                                ) : (
+                                    // Regular Cart Items Summary
+                                    cartItems.map((item) => (
+                                        <div key={item.id} className="flex justify-between items-center content-text py-2 border-b border-gray-200 last:border-b-0">
+                                            <div className="flex items-center gap-2">
+                                                <span className="content-text font-medium">{item.name}</span>
+                                                <span className="content-text">× {item.quantity}</span>
+                                            </div>
+                                            <span className="font-medium">₪{(item.price * item.quantity).toFixed(2)}</span>
+                                        </div>
+                                    ))
+                                )}
+                            </div>
+
+                            <div className="p-4 rounded-lg space-y-2">
+                                <div className="flex justify-between content-text">
+                                    <span>סה״כ מוצרים:</span>
+                                    <span>₪{subtotal.toFixed(2)}</span>
+                                </div>
+
+                                {clubDiscount > 0 && (
+                                    <div className="flex justify-between content-text text-green-600">
+                                        <span>הנחת מועדון לקוחות ({clubDiscountPercentage}%):</span>
+                                        <span>-₪{clubDiscount.toFixed(2)}</span>
+                                    </div>
+                                )}
+
+                                {formData.deliveryMethod === 'delivery' && (
+                                    <div className="flex justify-between content-text">
+                                        <span>דמי משלוח:</span>
+                                        <span>₪{deliveryCost.toFixed(2)}</span>
+                                    </div>
+                                )}
+
+                                <div className="flex justify-between subtitle font-semibold text-lg border-t pt-2">
+                                    <span>סה״כ לתשלום:</span>
+                                    <span className="text-primary">₪{grandTotal.toFixed(2)}</span>
+                                </div>
+                            </div>
+                        </div>
+
+                        {shouldShowClubMembership && (
+                            <>
+                                <div className="glass-card p-4 bg-gradient-to-r from-primary/10 to-primary-dark/20 border border-primary/30">
+                                    <div className="flex items-center gap-3 mb-3">
+                                        <Crown className="w-6 h-6 text-yellow-600" />
+                                        <h3 className="subtitle font-bold">הצטרף למועדון הלקוחות וחסוך {clubDiscountPercentage}%!</h3>
+                                    </div>
+                                    <p className="content-text mb-3">
+                                        חברי מועדון הלקוחות זוכים ב-{clubDiscountPercentage}% הנחה על כל הזמנה + עדכונים על מבצעים מיוחדים
+                                    </p>
+                                    <button
+                                        type="button"
+                                        className="btn-secondary w-full flex items-center justify-center gap-2"
+                                        onClick={handleClubButtonClick}
+                                    >
+                                        <Crown className="w-4 h-4" />
+                                        {!isAuthenticated() ? 'התחבר והירשם למועדון' : 'הירשם למועדון הלקוחות'}
+                                    </button>
+                                </div>
+                                {clubInfoVisible && !isAuthenticated() && (
+                                    <div className="mt-2 p-2 bg-blue-50 border border-blue-200 rounded text-sm text-blue-700">
+                                        יש להתחבר כדי להצטרף למועדון הלקוחות
+                                    </div>
+                                )}
+                            </>
+                        )}
+
+                        {/* Submit Button */}
+                        <button
+                            type="button"
+                            onClick={handleSubmit}
+                            disabled={isSubmitting || Object.keys(errors).some(key => errors[key])}
+                            className="w-full btn-primary py-4 text-big font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                            {isSubmitting ? (
+                                <div className="flex items-center justify-center gap-2">
+                                    <Loader2 className="w-5 h-5 animate-spin" />
+                                    יוצר הזמנה...
+                                </div>
+                            ) : (
+                                isSubmitting ? 'יוצר קישור תשלום...' : 'שלח הזמנה'
+                            )}
+                        </button>
+
+                        {submitError && (
+                            <div className="flex items-center gap-2 mt-4 p-3 bg-red-50 border border-red-200 rounded-lg">
+                                <AlertCircle className="w-5 h-5 text-red-600" />
+                                <span className="content-text text-red-700">{submitError}</span>
+                            </div>
+                        )}
+
+                        {!isDigitalPurchase && (<p className="content-text text-center text-gray-500">
+                            {isWorkshopPurchase
+                                ? 'לאחר שליחת ההרשמה נחזור אליכם לאישור ההשתתפות ופרטי הסדנה'
+                                : 'לאחר שליחת ההזמנה נחזור אליכם תוך 24 שעות לאישור הזמינות ותיאום המשלוח/איסוף'
+                            }
+                        </p>)}
+                    </div>
+                </div>
+            </div>
+
+            <PaymentModalComponent
+                isOpen={paymentModalOpen}
+                onClose={() => setPaymentModalOpen(false)}
+                paymentUrl={paymentData?.paymentLink}
+                paymentId={paymentData?.paymentId}
+                orderId={createdOrderId}
+                simpleOrderNumber={paymentData?.simpleOrderNumber}
+                updateOrder={updateOrder}
+            />
+
+            <ClubPromoModal
+                isOpen={clubPromoModalOpen}
+                onClose={() => setClubPromoModalOpen(false)}
+                onLoginRedirect={handleLoginRedirect}
+            />
+
+            <ClubMembershipModal
+                isOpen={clubMembershipModalOpen}
+                onClose={() => setClubMembershipModalOpen(false)}
+                onMembershipComplete={handleMembershipComplete}
+                userEmail={currentUserData?.email}
+                updateClubMembership={updateClubMembership}
+            />
+        </div>
+    );
+};
+
+export default OrderForm;

package/dist/index.js

@@ -27,6 +27,7 @@ export { default as FullscreenCarousel } from './components/FullscreenCarousel'
 export { default as ItemDetailsModal } from './components/modals/ItemDetailsModal'
 export { default as ClubMembershipModal } from './components/clubMembership/ClubMembershipModal'
 export { default as ClubPromoModal } from './components/clubMembership/ClubPromoModal'
+export { default as OrderForm } from './components/cart/OrderForm'
 
 // Context
 export { ItemModalProvider, useItemModal } from './context/ItemModalContext';

package/package.json

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