add: formularios funcionando

src/components/ImageUpload2.jsx

@@ -37,7 +37,7 @@ function ImageUpload({ files, setFiles }) {
     onDrop,
     accept: 'image/jpeg, image/png',
     maxFiles: 5,
-    maxSize: 5000000 // 5MB
+    maxSize: 50000000 // 5MB
   });
 
   return (
@@ -51,7 +51,7 @@ function ImageUpload({ files, setFiles }) {
           <div className="text-center w-full">
             <div className="text-xs text-gray-600">
               <span className="font-medium text-indigo-600" style={{ marginBottom: '0.5rem' }}>
-                Hasta 5 imágenes en formato PNG o JPG
+                Hasta 5 imágenes (máximo 1 MB cada una) en formato PNG o JPG
               </span>
             </div>
             <svg
@@ -81,13 +81,6 @@ function ImageUpload({ files, setFiles }) {
                   alt={file.name}
                   style={{ width: "30%", height: "auto" }} // ajustar tamaño
                 />
-                <img
-                  src={logo}
-                  alt="Watermark"
-                  style={{ width: "3%", height: "auto", objectFit: "contain" , opacity: "0.5", 
-                     bottom: "0", right: "10" }} //poner el logo dentro de la imagen ahora esta afuera}} //poner el logo dentro de la imagen ahora esta afuera
-                  className="absolute2 bottom-0 right-0 w-1/3 h-1/3 opacity-50" // Ajusta la posición y tamaño del logo
-                />
                 <button
                   className="absolute right-0 top-0 rounded-md bg-transparent border border-gray-300 p-1 hover:bg-gray-200"
                   type="button"

src/pages/users/pagar.jsx

@@ -22,6 +22,9 @@ function Pagar({ formData, files }) {
     const [openTermsDialog, setOpenTermsDialog] = useState(false);
     const [openPrivacyDialog, setOpenPrivacyDialog] = useState(false);
     const navigate = useNavigate();
+
+
+    const { subcategoria } = formData;
 
     const handleTermsToggle = () => setOpenTermsDialog(!openTermsDialog);
     const handlePrivacyToggle = () => setOpenPrivacyDialog(!openPrivacyDialog);
@@ -54,6 +57,7 @@ function Pagar({ formData, files }) {
     }
     };
 
+
     const [paymentMethod, setPaymentMethod] = useState(""); // Nueva variable de estado para el método de pago
     const [promoCode, setPromoCode] = useState(""); // Estado para el código promocional
     const [subscriptionPlan, setSubscriptionPlan] = useState(""); // Plan de suscripción seleccionado
@@ -321,16 +325,6 @@ function Pagar({ formData, files }) {
                 <Button className='aceptar' onClick={handlePrivacyToggle}>Ver Políticas de Privacidad</Button>
             </Box>
 
-            <Button 
-                variant="contained" 
-                color="primary" 
-                disabled={!acceptedTerms || !acceptedPrivacy} 
-                onClick={handleSubmit}
-                sx={{ marginTop: 2 }}
-            >
-                Publicar
-            </Button>
-
             {/* Diálogo de Términos y Condiciones */}
             <Dialog open={openTermsDialog} onClose={handleTermsToggle}>
                 <DialogTitle>TÉRMINOS Y CONDICIONES DE USO GEOMAP CONDICIONES GENERALES</DialogTitle>

src/pages/users/publicaciones.jsx

@@ -3,7 +3,6 @@ import { useNavigate } from 'react-router-dom';
 import '../../styles/users/publicaciones.css'; 
 import Navbar from '../../components/Navbar';
 import Footer from '../../components/Footer';
-import MostrarPublicacion from './ymostrar.jsx';
 
 function Publicaciones() {
   const navigate = useNavigate();
@@ -20,7 +19,7 @@ function Publicaciones() {
 
         <div className="publicaciones-list">
           <p>No tienes publicaciones aún. ¡Crea una nueva publicación para empezar!</p>
-          <MostrarPublicacion/>
+
         </div>
         <button className="publication-button" onClick={handleClick}>
           Crear nueva publicación

src/pages/users/publicar.jsx

@@ -5,7 +5,6 @@ import Navbar from '../../components/Navbar';
 import Footer from '../../components/Footer';
 import ImageUpload from '../../components/ImageUpload2';
 import Pagar from './pagar.jsx';
-
 import Notification from './notificaciones.jsx'
 import EventosForm from './zeventos.jsx';
 import HospedajeForm from './zhospedaje.jsx';
@@ -20,14 +19,12 @@ import MascotaForm from './zmascota.jsx';
 import EntretenimientoForm from './zentretenimiento.jsx';
 import OficioForm from './zoficio.jsx';
 import FamiliarForm from './zfamiliar.jsx';
-import Prueba from './zprueba.jsx';
-
 import '../../styles/users/publicar.css';
 
 const steps = ['Tipo de publicación', 'Información', 'Imágenes', 'Publicar y Pagar'];
 const publicationTypes = [
-    { label: 'Propiedad', value: 'propiedad',
-        desc:'Publicar alojamiento en arriendos, cabañas, departamentos, casas, hospedaje y hotelería.' 
+    { label: 'Hospedaje', value: 'propiedad',
+        desc:'Publica tu alojamiento en piezas, cabañas, departamentos, casas y hotelería.' 
      },
     { label: 'Camping', value: 'camping',
         desc:'Publicar alojamiento en camping.'
@@ -40,7 +37,6 @@ const publicationTypes = [
     { label: 'Notificaciones', value: 'notificaciones',
         desc:'Crea notificaciones acá.'
      },
-    //{ label: 'Prueba CRUDS', value: 'prueba' }
 ];
 
 const serviceSubCategories = [
@@ -66,19 +62,11 @@ const serviceSubCategories = [
         desc: 'Con Servicio de Oficio, podrás ofrecer tus habilidades y experiencia en una variedad de áreas profesionales. Si eres plomero, electricista, carpintero o tienes cualquier otro talento útil, esta categoría te permite conectar con clientes que buscan soluciones para sus necesidades domésticas o empresariales. Destaca tus conocimientos y garantiza un servicio de calidad para ganar la confianza de nuevos clientes.' }
   ];
 
-
-
 
 function Publicar() {
     const [activeStep, setActiveStep] = useState(0);
-    const [selectedType, setSelectedType] = useState(publicationTypes[0].value); // Default to the first type
-    const [selectedSubCategory, setSelectedSubCategory] = useState(null); //nuevo
-    const [details, setDetails] = useState({
-        titulo: '',
-        descripcion: '',
-        horarioInicio: '',
-        horarioFin: ''
-    });
+    const [selectedType, setSelectedType] = useState(publicationTypes[0].value);
+    const [selectedSubCategory, setSelectedSubCategory] = useState(null); 
     const [files, setFiles] = useState([]);
     const [error, setError] = useState('');
     const [errors, setErrors] = useState({});
@@ -102,6 +90,34 @@ function Publicar() {
         startDate: '',
         endDate: '',
     });
+
+    const [formDataGastronomia, setFormDataGastronomia] = useState({
+        titulo: '',
+        descripcion: '',
+        ubicacion: '',
+        nombreContacto: '',
+        celularContacto: '',
+        mailContacto: '',
+        instagram: '',
+        facebook: '',
+        paginaWeb: '',
+        aptoVeganos: false,
+        aptoVegetarianos: false,
+        aptoCeliacos: false,
+    });
+
+    const [formDataNegocios, setFormDataNegocios] = useState({
+        titulo: '',
+        descripcion: '',
+        ubicacion: '',
+        nombreContacto: '',
+        celularContacto: '',
+        mailContacto: '',
+        instagram: '',
+        facebook: '',
+        paginaWeb: ''
+    });
+
 
 
     const [formDataCamping, setFormDataCamping] = useState({
@@ -218,7 +234,6 @@ function Publicar() {
         // Retorna true si no hay errores
         return Object.keys(newErrors).length === 0;
     };
-
 
     const handleNext = () => {
         if (activeStep === 0 && !selectedType) {
@@ -229,23 +244,106 @@ function Publicar() {
 
             let isValid = true;
 
+            // Validación según el tipo de publicación
             if (selectedType === 'propiedad') {
                 isValid = validateFormHospedaje();
             } else if (selectedType === 'camping') {
                 isValid = validateFormCamping();
             } else if (selectedType === 'eventos') {
                 isValid = validateFormEventos();
+            } else if (selectedType === 'servicios') {
+                // Validación según la subcategoría de servicios
+                if (selectedSubCategory === 'restaurantes-comida') {
+                    isValid = validateFormGastronomia();
+                } else if (selectedSubCategory === 'negocios-tiendas') {
+                    isValid = validateFormNegocios();
+                }
             }
 
             if (!isValid) {
                 console.log('Errores después de la validación:', errors); // Muestra errores si los hay
                 return; // Detiene el avance si hay errores
             }
         }
-
+        
         // Avanza si todas las validaciones pasaron
         setActiveStep((prevActiveStep) => prevActiveStep + 1);
     };
+
+
+
+
+
+    const validateFormGastronomia = () => {
+        const newErrors = {};
+
+        // Validar que el título sea obligatorio
+        if (!formDataGastronomia.titulo) {
+            newErrors.titulo = 'El título es obligatorio.';
+        }
+
+        // Validar que la descripción sea obligatoria
+        if (!formDataGastronomia.descripcion) {
+            newErrors.descripcion = 'La descripción es obligatoria.';
+        }
+
+        // Validar que la ubicación sea obligatoria
+        if (!formDataGastronomia.ubicacion) {
+            newErrors.ubicacion = 'La ubicación es obligatoria.';
+        }
+
+        // Validar que el nombre de contacto sea obligatorio
+        if (!formDataGastronomia.nombreContacto) {
+            newErrors.nombreContacto = 'El nombre de contacto es obligatorio.';
+        }
+
+        // Validar que el celular de contacto sea obligatorio
+        if (!formDataGastronomia.celularContacto) {
+            newErrors.celularContacto = 'El celular de contacto es obligatorio.';
+        }
+
+        // Actualiza el estado de errores
+        setErrors(newErrors);
+
+        // Retorna true si no hay errores, es decir, si todos los campos obligatorios están completos
+        return Object.keys(newErrors).length === 0;
+    };
+
+    const validateFormNegocios = () => {
+        const newErrors = {};
+
+        // Validar que el título sea obligatorio
+        if (!formDataNegocios.titulo) {
+            newErrors.titulo = 'El título es obligatorio.';
+        }
+
+        // Validar que la descripción sea obligatoria
+        if (!formDataNegocios.descripcion) {
+            newErrors.descripcion = 'La descripción es obligatoria.';
+        }
+
+        // Validar que la ubicación sea obligatoria
+        if (!formDataNegocios.ubicacion) {
+            newErrors.ubicacion = 'La ubicación es obligatoria.';
+        }
+
+        // Validar que el nombre de contacto sea obligatorio
+        if (!formDataNegocios.nombreContacto) {
+            newErrors.nombreContacto = 'El nombre de contacto es obligatorio.';
+        }
+
+        // Validar que el celular de contacto sea obligatorio
+        if (!formDataNegocios.celularContacto) {
+            newErrors.celularContacto = 'El celular de contacto es obligatorio.';
+        }
+
+        // Actualiza el estado de errores
+        setErrors(newErrors);
+
+        // Retorna true si no hay errores, es decir, si todos los campos obligatorios están completos
+        return Object.keys(newErrors).length === 0;
+    };
+
 
     const validateFormCamping = () => {
         const newErrors = {};
@@ -304,6 +402,20 @@ function Publicar() {
         }
     };
 
+    const handleInputChangeGastronomia = (field, value) => {
+        setFormDataGastronomia((prev) => ({ ...prev, [field]: value }));
+        if (errors[field]) {
+            setErrors((prevErrors) => ({ ...prevErrors, [field]: undefined }));
+        }
+    };
+
+    const handleInputChangeNegocios = (field, value) => {
+        setFormDataNegocios((prev) => ({ ...prev, [field]: value }));
+        if (errors[field]) {
+            setErrors((prevErrors) => ({ ...prevErrors, [field]: undefined }));
+        }
+    };
+
     const handleTypeChange = (event, newValue) => {
         setSelectedType(newValue);
         setSelectedSubCategory(null); //nuevo
@@ -408,9 +520,9 @@ function Publicar() {
                     return <CampingForm formData={formDataCamping} errors={errors} onInputChange={handleInputChangeCamping} />;
                 } else if (selectedType === 'servicios') {
                     if(selectedSubCategory === 'negocios-tiendas') {
-                        return <NegociosForm />;
+                        return <NegociosForm formData={formDataNegocios} errors={errors} onInputChange={handleInputChangeNegocios}/>;
                     } else if (selectedSubCategory === 'restaurantes-comida') {
-                        return <GastronomiaForm />;
+                        return <GastronomiaForm formData={formDataGastronomia} errors={errors} onInputChange={handleInputChangeGastronomia}/>;
                     }else if (selectedSubCategory === 'cultura') {
                         return <CulturaForm />;
                     }else if (selectedSubCategory === 'tours-transporte') {
@@ -437,9 +549,21 @@ function Publicar() {
             case 2:
                 return <ImageUpload files={files} setFiles={setFiles} setError={setError} />;
             case 3:
+                let formData;
+                if (selectedType === 'propiedad') {
+                    formData = formDataHospedaje;
+                } else if (selectedType === 'camping') {
+                    formData = formDataCamping;
+                } else if (selectedType === 'eventos') {
+                    formData = eventDetails;
+                } else {
+                    formData = {}; // Evitar undefined
+                }
+
                 return (
                     <Pagar formData={formData} files={files} />
                 );
+
             default:
                 return 'Paso desconocido';
         }
@@ -508,16 +632,6 @@ function Publicar() {
 
     </Box>
 </main>
-<h1>Agregar dropdown para servicios y oficios antes de apretar siguiente</h1>
-<h1>Implementar dropdown antes de entrar al formulario</h1>
-<h1>Eliminar subcategoria de restaurantes y hacer q este en la descripcion</h1>
-
-
-
-
-
-
-
             <Footer />
         </div>
     );