function MainComponent() { const [formData, setFormData] = useState({ full_name: "", phone_number: "", email: "", birth_date: "" }); const [errors, setErrors] = useState({}); const [isSubmitting, setIsSubmitting] = useState(false); const [submitSuccess, setSubmitSuccess] = useState(false); const [language, setLanguage] = useState(navigator.language.split("-")[0] || "fr"); const t = translations[language]; const [fromQr, setFromQr] = useState(false); useEffect(()=>{ const params = new URLSearchParams(window.location.search); setFromQr(params.get("source") === "qr"); }, []); const validateForm = ()=>{ const newErrors = {}; if (!formData.full_name.trim()) { newErrors.full_name = "Le nom complet est requis"; } const phoneRegex = /^(?:(?:\+|00)33|0)\s*[1-9](?:[\s.-]*\d{2}){4}$/; if (!phoneRegex.test(formData.phone_number)) { newErrors.phone_number = "Numéro de téléphone invalide"; } const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(formData.email)) { newErrors.email = "Adresse email invalide"; } if (!formData.birth_date) { newErrors.birth_date = "La date de naissance est requise"; } setErrors(newErrors); return Object.keys(newErrors).length === 0; }; const handleSubmit = async (e)=>{ e.preventDefault(); if (!validateForm()) return; setIsSubmitting(true); try { const response = await fetch("/api/create-user-card", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(formData) }); if (!response.ok) { throw new Error("Erreur lors de l'inscription"); } const data = await response.json(); if (data.card && data.card.id) { setSubmitSuccess(true); window.location.href = `/gestion-photos?cardId=${data.card.id}`; } else { throw new Error("Données de carte invalides"); } } catch (error) { setErrors({ submit: "Une erreur est survenue. Veuillez réessayer." }); } finally{ setIsSubmitting(false); } }; const handleChange = (e)=>{ const { name, value } = e.target; setFormData((prev)=>({ ...prev, [name]: value })); }; return /*#__PURE__*/ React.createElement("div", { className: `min-h-screen bg-[#FDF6E9] p-8 ${language === "ar" ? "rtl" : "ltr"}`, __source: { fileName: "", lineNumber: 87, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl bg-white/90 backdrop-blur rounded-xl shadow-lg p-8 relative z-10 my-12", __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }, fromQr && /*#__PURE__*/ React.createElement("div", { className: "text-center mb-4 bg-green-100 p-4 rounded-lg", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-green-800", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, t.welcomeQr)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end items-center mb-4", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setLanguage("fr"), className: `px-2 py-1 rounded ${language === "fr" ? "bg-[#4A7B42] text-white" : "bg-gray-200"}`, __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, "FR"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setLanguage("ar"), className: `px-2 py-1 rounded ${language === "ar" ? "bg-[#4A7B42] text-white" : "bg-gray-200"}`, __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, "عربي"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setLanguage("en"), className: `px-2 py-1 rounded ${language === "en" ? "bg-[#4A7B42] text-white" : "bg-gray-200"}`, __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, "EN"))), /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/6708d472-4d0d-4052-939f-9160ca952840/-/format/auto/", alt: "HAPPY BOBA", className: "w-48 h-auto mx-auto mb-4", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-[#4A7B42] mb-6 font-crimson-text", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, t.title), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 mb-8", __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-[#4A7B42] mb-4", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, t.cardBenefits), /*#__PURE__*/ React.createElement("ul", { className: "text-left space-y-3 mb-6", __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 132, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-[#4A7B42] mr-2", __source: { fileName: "", lineNumber: 133, columnNumber: 17 }, __self: this }), t.benefit1), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 136, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-[#4A7B42] mr-2", __source: { fileName: "", lineNumber: 137, columnNumber: 17 }, __self: this }), t.benefit2), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 140, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-[#4A7B42] mr-2", __source: { fileName: "", lineNumber: 141, columnNumber: 17 }, __self: this }), t.benefit3), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 144, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-[#4A7B42] mr-2", __source: { fileName: "", lineNumber: 145, columnNumber: 17 }, __self: this }), t.benefit4)))), submitSuccess ? /*#__PURE__*/ React.createElement("div", { className: "text-green-600 text-center p-4 bg-green-100 rounded-lg", __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this }, t.success) : /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 157, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 158, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "full_name", value: formData.full_name, onChange: handleChange, placeholder: t.fullName, className: "w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:border-[#4A7B42]", __source: { fileName: "", lineNumber: 159, columnNumber: 15 }, __self: this }), errors.full_name && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm mt-1", __source: { fileName: "", lineNumber: 168, columnNumber: 17 }, __self: this }, t.errors.fullName)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 171, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "tel", name: "phone_number", value: formData.phone_number, onChange: handleChange, placeholder: t.phoneNumber, className: "w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:border-[#4A7B42]", __source: { fileName: "", lineNumber: 172, columnNumber: 15 }, __self: this }), errors.phone_number && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm mt-1", __source: { fileName: "", lineNumber: 181, columnNumber: 17 }, __self: this }, t.errors.phoneNumber)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 186, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: formData.email, onChange: handleChange, placeholder: t.email, className: "w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:border-[#4A7B42]", __source: { fileName: "", lineNumber: 187, columnNumber: 15 }, __self: this }), errors.email && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm mt-1", __source: { fileName: "", lineNumber: 196, columnNumber: 17 }, __self: this }, t.errors.email)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 199, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "date", name: "birth_date", value: formData.birth_date, onChange: handleChange, className: "w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:border-[#4A7B42]", __source: { fileName: "", lineNumber: 200, columnNumber: 15 }, __self: this }), errors.birth_date && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm mt-1", __source: { fileName: "", lineNumber: 208, columnNumber: 17 }, __self: this }, t.errors.birthDate)), errors.submit && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm text-center", __source: { fileName: "", lineNumber: 215, columnNumber: 15 }, __self: this }, errors.submit), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isSubmitting, className: "w-full bg-[#4A7B42] text-white px-6 py-3 rounded-full hover:bg-[#3A6132] transition-colors disabled:opacity-50", __source: { fileName: "", lineNumber: 220, columnNumber: 13 }, __self: this }, isSubmitting ? t.creating : t.createCard), /*#__PURE__*/ React.createElement("p", { className: "text-center text-sm text-gray-600 mt-4", __source: { fileName: "", lineNumber: 227, columnNumber: 13 }, __self: this }, t.terms, " ", /*#__PURE__*/ React.createElement("a", { href: "/conditions", className: "text-[#4A7B42] hover:underline", __source: { fileName: "", lineNumber: 229, columnNumber: 15 }, __self: this }, t.termsLink))))); } const translations = { fr: { title: "Créez votre carte de fidélité", manageLogo: "Gérer le logo", cardBenefits: "Les avantages de votre carte", benefit1: "Cumulez 1 timbre à chaque bubble tea acheté", benefit2: "Votre 10ème bubble tea offert", benefit3: "Un bubble tea offert pour votre anniversaire", benefit4: "Accès aux offres exclusives membres", fullName: "Nom complet", phoneNumber: "Numéro de téléphone", email: "Email", birthDate: "Date de naissance", createCard: "Créer ma carte", creating: "Création en cours...", success: "Inscription réussie ! Redirection en cours...", terms: "En créant votre compte, vous acceptez nos", termsLink: "conditions d'utilisation", welcomeQr: "Bienvenue ! Veuillez remplir le formulaire ci-dessous pour créer votre carte de fidélité.", errors: { fullName: "Le nom complet est requis", phoneNumber: "Numéro de téléphone invalide", email: "Adresse email invalide", birthDate: "La date de naissance est requise", submit: "Une erreur est survenue. Veuillez réessayer." } }, ar: { title: "أنشئ بطاقة الولاء الخاصة بك", manageLogo: "إدارة الشعار", cardBenefits: "مزايا بطاقتك", benefit1: "اجمع طابعًا واحدًا مع كل كأس تشتريه", benefit2: "الكأس العاشر مجاني", benefit3: "كأس مجاني في عيد ميلادك", benefit4: "الوصول إلى العروض الحصرية للأعضاء", fullName: "الاسم الكامل", phoneNumber: "رقم الهاتف", email: "البريد الإلكتروني", birthDate: "تاريخ الميلاد", createCard: "إنشاء بطاقتي", creating: "جاري الإنشاء...", success: "تم التسجيل بنجاح! جاري إعادة التوجيه...", terms: "بإنشاء حسابك، فإنك توافق على", termsLink: "شروط الاستخدام", welcomeQr: "مرحباً! يرجى ملء النموذج أدناه لإنشاء بطاقة الولاء الخاصة بك.", errors: { fullName: "الاسم الكامل مطلوب", phoneNumber: "رقم الهاتف غير صالح", email: "البريد الإلكتروني غير صالح", birthDate: "تاريخ الميلاد مطلوب", submit: "حدث خطأ. يرجى المحاولة مرة أخرى" } }, en: { title: "Create your loyalty card", manageLogo: "Manage logo", cardBenefits: "Card benefits", benefit1: "Collect 1 stamp with each bubble tea purchased", benefit2: "Your 10th bubble tea is free", benefit3: "A free bubble tea on your birthday", benefit4: "Access to exclusive member offers", fullName: "Full name", phoneNumber: "Phone number", email: "Email", birthDate: "Birth date", createCard: "Create my card", creating: "Creating...", success: "Registration successful! Redirecting...", terms: "By creating your account, you agree to our", termsLink: "terms of use", welcomeQr: "Welcome! Please fill out the form below to create your loyalty card.", errors: { fullName: "Full name is required", phoneNumber: "Invalid phone number", email: "Invalid email", birthDate: "Birth date is required", submit: "An error occurred. Please try again" } } };