@codesinger0/shared-components 1.1.85 → 1.1.86

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

@@ -1,960 +0,0 @@
-import React, { useState, useEffect, useRef } 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,
-    businessName,
-    paymentLinkCreationURL,
-    scrollContainerRef
-}) => {
-
-    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 localScrollContainerRef = useRef(null);
-    const activeScrollContainerRef = scrollContainerRef || localScrollContainerRef;
-
-    const scrollToAnchor = (fieldName) => {
-        // Small delay to ensure error messages are rendered
-        setTimeout(() => {
-            const element = document.getElementById(`${fieldName}`);
-            const container = activeScrollContainerRef.current;
-
-            if (element && container) {
-                // Get element position relative to container
-                const elementTop = element.offsetTop;
-                const containerHeight = container.clientHeight;
-                const elementHeight = element.offsetHeight;
-
-                // Calculate scroll position to center the element
-                const scrollTo = elementTop - (containerHeight / 2) + (elementHeight / 2);
-
-                // Smooth scroll within the container
-                container.scrollTo({
-                    top: Math.max(0, scrollTo),
-                    behavior: 'smooth'
-                });
-            }
-        }, 100);
-    };
-
-    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) => ({
-            businessName,
-            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(paymentLinkCreationURL, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                businessName: 'confectioneryShop',
-                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 = {};
-        let firstErrorField = null;
-
-        if (!formData.name.trim()) {
-            newErrors.name = 'שם מלא חובה';
-            if (!firstErrorField) firstErrorField = 'name';
-        } else {
-            const words = formData.name.trim().split(/\s+/);
-            if (words.length < 2) {
-                newErrors.name = 'יש להזין שם פרטי ומשפחה';
-                if (!firstErrorField) firstErrorField = 'name';
-            }
-        }
-
-        if (!formData.email.trim()) {
-            newErrors.email = 'כתובת אימייל חובה';
-            if (!firstErrorField) firstErrorField = 'email';
-        } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
-            newErrors.email = 'כתובת אימייל לא תקינה';
-            if (!firstErrorField) firstErrorField = 'email';
-        }
-
-        if (!formData.phone.trim()) {
-            newErrors.phone = 'מספר טלפון חובה';
-            if (!firstErrorField) firstErrorField = 'phone';
-        } else if (!/^(05\d{8}|5\d{8})$/.test(formData.phone.replace(/\D/g, ''))) {
-            newErrors.phone = 'מספר טלפון לא תקין';
-            if (!firstErrorField) firstErrorField = '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 (!firstErrorField) firstErrorField = 'delivery';
-            }
-            if (!formData.deliveryCity) {
-                newErrors.deliveryCity = 'בחירת עיר חובה';
-                if (!firstErrorField) firstErrorField = 'deliveryCity';
-            }
-            if (!formData.deliveryAddress.trim()) {
-                newErrors.deliveryAddress = 'כתובת משלוח חובה';
-                if (!firstErrorField) firstErrorField = 'deliveryAddress';
-            }
-        }
-
-        setErrors(newErrors);
-        return {
-            isValid: Object.keys(newErrors).length === 0,
-            firstErrorField
-        };
-    };
-
-    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) => {
-        if (field === 'deliveryMethod' && value === 'pickup') {
-            setDeliveryError('')
-            setErrors({})
-        }
-        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 = () => {
-        onBack();
-    }
-
-    const handleMembershipComplete = () => {
-        // Component will re-render with updated user data
-    };
-
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        debugger
-        // Validate name before submission
-        const nameValidationError = validateFullName(formData.name);
-        if (nameValidationError) {
-            setNameError(nameValidationError);
-            scrollToAnchor('name-field');
-            return;
-        }
-
-        // Clear previous errors
-        setNameError('');
-        setDeliveryError('');
-
-        const validation = validateForm();
-        if (!validation.isValid) {
-            // Scroll to the first field with an error
-            if (validation.firstErrorField) {
-                scrollToAnchor(`${validation.firstErrorField}-field`);
-            }
-            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
-            ref={scrollContainerRef ? null : localScrollContainerRef}
-            className={scrollContainerRef ? "min-h-screen bg-main py-12 px-4" : "h-screen overflow-y-auto 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 id="name-field">
-                                    <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 id="phone-field">
-                                    <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 id="email-field">
-                                <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-gray-300 bg-opacity-20'
-                                    : 'border-transparent hover:border-gray-100'
-                                    }`}>
-                                    <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-gray-300 bg-opacity-20'
-                                    : 'border-transparent hover:border-gray-100'
-                                    }`}>
-                                    <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 id="deliveryCity-field">
-                                        <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 id="deliveryAddress-field">
-                                        <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;