@codesinger0/shared-components 1.1.38 → 1.1.40

package/dist/components/cart/OrderForm.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+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';
@@ -42,7 +42,8 @@ const OrderForm = ({
     addToast, // Inject toast function
     cartItems,
     totalPrice,
-    paymentLinkCreationURL
+    paymentLinkCreationURL,
+    scrollContainerRef
 }) => {
 
     const [nameError, setNameError] = useState('');
@@ -83,6 +84,33 @@ const OrderForm = ({
     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;
 
@@ -199,26 +227,33 @@ const OrderForm = ({
 
     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
@@ -229,17 +264,23 @@ const OrderForm = ({
 
             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 Object.keys(newErrors).length === 0;
+        return {
+            isValid: Object.keys(newErrors).length === 0,
+            firstErrorField
+        };
     };
 
     const grantCourseAccess = async (userId, courseIds) => {
@@ -297,11 +338,12 @@ const OrderForm = ({
 
     const handleSubmit = async (e) => {
         e.preventDefault();
-
+        debugger
         // Validate name before submission
         const nameValidationError = validateFullName(formData.name);
         if (nameValidationError) {
             setNameError(nameValidationError);
+            scrollToAnchor('name-field');
             return;
         }
 
@@ -309,7 +351,14 @@ const OrderForm = ({
         setNameError('');
         setDeliveryError('');
 
-        if (!validateForm()) return;
+        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;
@@ -452,7 +501,11 @@ const OrderForm = ({
     const grandTotal = discountedSubtotal + deliveryCost;
 
     return (
-        <div className="min-h-screen bg-main py-12 px-4" dir="rtl">
+        <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 */}
@@ -498,7 +551,7 @@ const OrderForm = ({
                             <h2 className="subtitle font-semibold">פרטים אישיים</h2>
 
                             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                <div>
+                                <div id="name-field">
                                     <label className="block subtitle font-medium mb-2">שם מלא *</label>
                                     <input
                                         type="text"
@@ -522,7 +575,7 @@ const OrderForm = ({
                                     )}
                                 </div>
 
-                                <div>
+                                <div id="phone-field">
                                     <label className="block subtitle font-medium mb-2">טלפון *</label>
                                     <input
                                         type="tel"
@@ -542,7 +595,7 @@ const OrderForm = ({
                                 </div>
                             </div>
 
-                            <div>
+                            <div id="email-field">
                                 <label className="block subtitle font-medium mb-2">אימייל *</label>
                                 <input
                                     type="email"
@@ -631,7 +684,7 @@ const OrderForm = ({
                                 <h2 className="subtitle font-semibold">כתובת</h2>
 
                                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                    <div>
+                                    <div id="deliveryCity-field">
                                         <label className="block subtitle font-medium mb-2">עיר *</label>
                                         {(isCoursePurchase || isWorkshopPurchase) ? (
                                             <input
@@ -663,7 +716,7 @@ const OrderForm = ({
                                         )}
                                     </div>
 
-                                    <div>
+                                    <div id="deliveryAddress-field">
                                         <label className="block subtitle font-medium mb-2">רחוב ומספר בית *</label>
                                         <input
                                             type="text"

package/dist/components/cart/ShoppingCartModal.jsx

@@ -16,6 +16,8 @@ const ShoppingCartModal = ({ CheckoutComponent }) => {
         removeFromCart
     } = useCart();
 
+    const orderFormScrollContainerRef = useRef(null);
+
     // local visible state that controls AnimatePresence mounting
     const [localOpen, setLocalOpen] = useState(Boolean(isCartOpen));
     const [showOrderForm, setShowOrderForm] = useState(false);
@@ -97,12 +99,13 @@ const ShoppingCartModal = ({ CheckoutComponent }) => {
                         >
                             {showOrderForm ? (
                                 // Order Form View
-                                <div className="h-full overflow-y-auto">
+                                <div ref={orderFormScrollContainerRef} className="h-full overflow-y-auto">
                                     {CheckoutComponent ? (
                                         <CheckoutComponent
                                             onBack={handleBackToCart}
                                             cartItems={cartItems}
                                             totalPrice={totalPrice}
+                                            scrollContainerRef={orderFormScrollContainerRef}
                                         />
                                     ) : (
                                         <div className="p-6">

package/package.json

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