From 7daf3ec4dae68a3a5ae3b7fe0cc8f030aaf3bf4d Mon Sep 17 00:00:00 2001
From: Gabriel <aviles.gabriel015@gmail.com>
Date: Fri, 6 Dec 2024 20:45:07 -0400
Subject: [PATCH] refactor

---
 .../AddExperience/AddExperience.tsx           | 22 +++++++++----
 .../PaymentDetails/PaymentDetails.tsx         | 33 +++++++++----------
 src/components/UserProfile/UserProfile.tsx    |  5 +--
 3 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/src/components/AddExperience/AddExperience.tsx b/src/components/AddExperience/AddExperience.tsx
index a931321..9440661 100644
--- a/src/components/AddExperience/AddExperience.tsx
+++ b/src/components/AddExperience/AddExperience.tsx
@@ -40,7 +40,7 @@ const AddExperience = () => {
 
   // Validar texto sin caracteres especiales
   const isValidText = (text: string): boolean => {
-    const regex = /^[a-zA-Z0-9áéíóúÁÉÍÓÚñÑ\s]+$/; // Permite letras, números y espacios
+    const regex = /^[a-zA-Z0-9áéíóúÁÉÍÓÚñÑ.,\s]+$/; // Permite letras, números y espacios
     return regex.test(text);
   };
 
@@ -66,6 +66,12 @@ const AddExperience = () => {
       );
       return false;
     }
+
+    if(Object.keys(availability).length === 0){
+      setErrorMessage("Debe seleccionar al menos una fecha y una hora.");
+      return false;
+    }
+
     if (!price || price <= 0) {
       setErrorMessage("El campo 'Precio' debe ser mayor a 0.");
       return false;
@@ -205,6 +211,7 @@ const AddExperience = () => {
       coords[1]?.toFixed(4),
     ];
 
+
     const payload = {
       title,
       description,
@@ -216,6 +223,9 @@ const AddExperience = () => {
       capacity,
     };
 
+    
+    console.log(payload)
+
     try {
       const response = await experienceServices.addExperience(payload);
       console.log("Respuesta del backend:", response.data);
@@ -267,12 +277,12 @@ const AddExperience = () => {
   return (
     <form onSubmit={handleSubmit} className="mb-5">
       {showModal && (
-        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
-          <div className="bg-white rounded-lg p-4 shadow-lg w-80">
-            <p className="text-primary font-medium mb-4">{errorMessage}</p>
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+          <div className="p-4 bg-white rounded-lg shadow-lg w-80">
+            <p className="mb-4 font-medium text-primary">{errorMessage}</p>
             <button
               onClick={closeModal}
-              className="bg-primary text-white px-4 py-2 rounded-md hover:bg-orange"
+              className="px-4 py-2 text-white rounded-md bg-primary hover:bg-orange"
             >
               Cerrar
             </button>
@@ -499,7 +509,7 @@ const AddExperience = () => {
       {/* Etiquetas (Lista desplegable) */}
 
       <div className="button-container">
-        <button type="submit" className="submit-button">
+        <button onClick={() => console.log(availability)} type="submit" className="submit-button">
           Añadir experiencia
         </button>
       </div>
diff --git a/src/components/PaymentDetails/PaymentDetails.tsx b/src/components/PaymentDetails/PaymentDetails.tsx
index 3b7a225..270b81a 100644
--- a/src/components/PaymentDetails/PaymentDetails.tsx
+++ b/src/components/PaymentDetails/PaymentDetails.tsx
@@ -4,7 +4,6 @@ import mastercardLogo from "../../assets/img/iconomastercard.png";
 import visaLogo from "../../assets/img/iconovisa.png";
 import bookingServices from "../../services/booking.services";
 import { ReservationContext } from "../../contexts/reservation.context";
-import { format, parseISO } from "date-fns";
 
 const PaymentDetails: React.FC = () => {
     const location = useLocation();
@@ -146,18 +145,18 @@ const PaymentDetails: React.FC = () => {
         expiryDate.length === 8;
 
     return (
-        <div className="w-full mx-auto h-dvh flex flex-col items-center p-6 pb-20">
+        <div className="flex flex-col items-center w-full p-6 pb-20 mx-auto h-dvh">
             <div className="w-full max-w-md">
                 <div className="flex items-center mb-6">
                     <button
                         type="button"
                         onClick={() => navigate(-1)}
-                        className="text-2xl flex items-center justify-center bg-transparent hover:bg-transparent border-none"
+                        className="flex items-center justify-center text-2xl bg-transparent border-none hover:bg-transparent"
                         aria-label="Regresar"
                     >
                         <svg
                             xmlns="http://www.w3.org/2000/svg"
-                            className="w-7 h-7 text-black hover:text-primary"
+                            className="text-black w-7 h-7 hover:text-primary"
                             fill="none"
                             viewBox="0 0 24 24"
                             stroke="currentColor"
@@ -170,7 +169,7 @@ const PaymentDetails: React.FC = () => {
                             />
                         </svg>
                     </button>
-                    <h1 className="text-xl font-bold ml-4">Confirmar y pagar</h1>
+                    <h1 className="ml-4 text-xl font-bold">Confirmar y pagar</h1>
                 </div>
 
                 <div className="mb-6">
@@ -179,7 +178,7 @@ const PaymentDetails: React.FC = () => {
                         style={{ height: "180px" }}
                     >
                         <h3 className="text-lg font-bold">MARIA VELLER LOPEZ</h3>
-                        <p className="text-sm my-2">
+                        <p className="my-2 text-sm">
                             {selectedMethod === "mastercard"
                                 ? "MasterCard"
                                 : selectedMethod === "visa"
@@ -197,7 +196,7 @@ const PaymentDetails: React.FC = () => {
                                         : visaLogo
                                 }
                                 alt={selectedMethod}
-                                className="w-17 h-10"
+                                className="h-10 w-17"
                             />
                         </div>
                     </div>
@@ -207,7 +206,7 @@ const PaymentDetails: React.FC = () => {
                     <div>
                         <label
                             htmlFor="cardNumber"
-                            className="block text-sm text-slate-800 font-medium mb-2"
+                            className="block mb-2 text-sm font-medium text-slate-800"
                         >
                             Número de tarjeta
                         </label>
@@ -218,15 +217,15 @@ const PaymentDetails: React.FC = () => {
                             onChange={handleCardNumberChange}
                             placeholder="1234 5678 1234 5678"
                             maxLength={19}
-                            className="w-full px-4 py-3 text-sm ring-1 ring-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-slate-300"
+                            className="w-full px-4 py-3 text-sm rounded-lg ring-1 ring-slate-200 focus:outline-none focus:ring-2 focus:ring-slate-300"
                         />
-                        {cardError && <p className="text-red-500 text-sm">{cardError}</p>}
+                        {cardError && <p className="text-sm text-red-500">{cardError}</p>}
                     </div>
 
                     <div>
                         <label
                             htmlFor="cvv"
-                            className="block text-sm text-slate-800 font-medium mb-2"
+                            className="block mb-2 text-sm font-medium text-slate-800"
                         >
                             CVV
                         </label>
@@ -237,15 +236,15 @@ const PaymentDetails: React.FC = () => {
                             onChange={handleCvvChange}
                             placeholder="123"
                             maxLength={3}
-                            className="w-full px-4 py-3 text-sm ring-1 ring-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-slate-300"
+                            className="w-full px-4 py-3 text-sm rounded-lg ring-1 ring-slate-200 focus:outline-none focus:ring-2 focus:ring-slate-300"
                         />
-                        {cvvError && <p className="text-red-500 text-sm">{cvvError}</p>}
+                        {cvvError && <p className="text-sm text-red-500">{cvvError}</p>}
                     </div>
 
                     <div>
                         <label
                             htmlFor="expiryDate"
-                            className="block text-sm text-slate-800 font-medium mb-2"
+                            className="block mb-2 text-sm font-medium text-slate-800"
                         >
                             Fecha de vencimiento (MM/DD/AA)
                         </label>
@@ -256,15 +255,15 @@ const PaymentDetails: React.FC = () => {
                             onChange={handleExpiryDateChange}
                             placeholder="MM/DD/AA"
                             maxLength={8}
-                            className="w-full px-4 py-3 text-sm ring-1 ring-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-slate-300"
+                            className="w-full px-4 py-3 text-sm rounded-lg ring-1 ring-slate-200 focus:outline-none focus:ring-2 focus:ring-slate-300"
                         />
-                        {expiryError && <p className="text-red-500 text-sm">{expiryError}</p>}
+                        {expiryError && <p className="text-sm text-red-500">{expiryError}</p>}
                     </div>
                 </form>
             </div>
 
             <div className="fixed bottom-0 left-0 w-full p-3 bg-white container-shadow">
-                <div className="flex justify-center items-center space-x-6">
+                <div className="flex items-center justify-center space-x-6">
                     <p className="text-lg font-bold text-orange-500">
                         {reservation?.totalPrice}€
                         {/* Itentar resolver la existencia de reservation de otra manera */}
diff --git a/src/components/UserProfile/UserProfile.tsx b/src/components/UserProfile/UserProfile.tsx
index 18bb9b4..770ff2f 100644
--- a/src/components/UserProfile/UserProfile.tsx
+++ b/src/components/UserProfile/UserProfile.tsx
@@ -35,14 +35,15 @@ const UserProfile: React.FC = () => {
         }
     }, [])
 
-    const {  email, location, name, phone, role } = userInfo
+    const {  email, avatar , location, name, phone, role } = userInfo
+    
 
     return (
         <div className='flex flex-col items-center mt-4'>
             <div className='w-full px-8 mb-12'>
                 <ProfileCard
                     name={name}
-                    avatar={userImage}
+                    avatar={avatar || userImage}
                 />
             </div>
             {role.toUpperCase() === 'PROVIDER' && (