From 6295ae29d3fcc974b43c70add2d42d4f72fa46e0 Mon Sep 17 00:00:00 2001
From: Tatiana_Garcia <151873298+TatiGV@users.noreply.github.com>
Date: Mon, 2 Sep 2024 16:28:48 +0200
Subject: [PATCH] Modified styles of some files, implement validateLinkPage in
 validate file, implement contactEmail and linkPage in registerPetsitterUser
 and updatePetsitter and have the data displayed when you click on the contact
 button in the petsitter #99

---
 .../handlers/registerPetsitterUserHandler.js  |  4 +-
 .../handlers/updatePetsitterUserHandler.js    |  2 +-
 .../app/logic/registerPetsitterUser.js        |  8 +-
 .../project/app/logic/updatePetsitterUser.js  |  8 +-
 staff/tatiana-garcia/project/app/view/App.jsx | 18 +++-
 .../project/app/view/home/Footer.jsx          |  8 +-
 .../project/app/view/petsitters/Review.jsx    | 25 +++---
 .../project/app/view/petsitters/index.jsx     |  4 +-
 .../app/view/petsitters/petsitterDetails.jsx  | 55 ++++++++----
 .../app/view/registerPetssiterUser/index.jsx  |  2 +-
 .../project/app/view/settings/index.jsx       |  2 +
 .../app/view/settings/updatePetsitterUser.jsx | 88 ++++++++++---------
 staff/tatiana-garcia/project/com/validate.js  | 14 ++-
 .../tatiana-garcia/project/cor/data/models.js | 10 ++-
 .../cor/logic/registerPetsitterUser.js        | 10 +--
 .../project/cor/logic/updatePetsitterUser.js  |  6 +-
 16 files changed, 160 insertions(+), 104 deletions(-)

diff --git a/staff/tatiana-garcia/project/api/handlers/registerPetsitterUserHandler.js b/staff/tatiana-garcia/project/api/handlers/registerPetsitterUserHandler.js
index 87903bf54..7e303b0de 100644
--- a/staff/tatiana-garcia/project/api/handlers/registerPetsitterUserHandler.js
+++ b/staff/tatiana-garcia/project/api/handlers/registerPetsitterUserHandler.js
@@ -1,10 +1,10 @@
 import { logic } from '../../cor/index.js'
 
 export default (req, res, next) => {
-    const { image, name, city, description, email, linKPage, contacEmail, phoneNumber, password, passwordRepeat, pets } = req.body
+    const { image, name, city, description, email, linkPage, contactEmail, phoneNumber, password, passwordRepeat, pets } = req.body
 
     try {
-        logic.registerPetsitterUser(image, name, city, description, email, linKPage, contacEmail, phoneNumber, password, passwordRepeat, pets)
+        logic.registerPetsitterUser(image, name, city, description, email, linkPage, contactEmail, phoneNumber, password, passwordRepeat, pets)
             .then(() => res.status(201).send())
             .catch(error => next(error))
     } catch (error) {
diff --git a/staff/tatiana-garcia/project/api/handlers/updatePetsitterUserHandler.js b/staff/tatiana-garcia/project/api/handlers/updatePetsitterUserHandler.js
index 4c91cc03d..998bf7952 100644
--- a/staff/tatiana-garcia/project/api/handlers/updatePetsitterUserHandler.js
+++ b/staff/tatiana-garcia/project/api/handlers/updatePetsitterUserHandler.js
@@ -3,7 +3,7 @@ import { logic } from '../../cor/index.js'
 export default (req, res, next) => {
     const { userId } = req
 
-    const { image: newImage, name: newName, city: newCity, description: newDescription, linKPage: newLinkPage, contacEmail: newContactEmail, phoneNumber: newPhoneNumber, pets: newPets } = req.body
+    const { image: newImage, name: newName, city: newCity, description: newDescription, linkPage: newLinkPage, contactEmail: newContactEmail, phoneNumber: newPhoneNumber, pets: newPets } = req.body
 
     try {
         logic.updatePetsitterUser(userId, newImage, newName, newCity, newDescription, newLinkPage, newContactEmail, newPhoneNumber, newPets)
diff --git a/staff/tatiana-garcia/project/app/logic/registerPetsitterUser.js b/staff/tatiana-garcia/project/app/logic/registerPetsitterUser.js
index d11185f5f..41e5c9aca 100644
--- a/staff/tatiana-garcia/project/app/logic/registerPetsitterUser.js
+++ b/staff/tatiana-garcia/project/app/logic/registerPetsitterUser.js
@@ -2,14 +2,14 @@ import { errors, validate } from '../../com/index.js'
 
 const { SystemError } = errors
 
-export default (image, name, city, description, email, linKPage, contacEmail, phoneNumber, password, passwordRepeat, pets) => {
+export default (image, name, city, description, email, linkPage, contactEmail, phoneNumber, password, passwordRepeat, pets) => {
     validate.image(image, 'image')
     validate.name(name, 'name')
     validate.city(city, 'city')
     validate.description(description, 'description')
     validate.email(email, 'email')
-    validate.image(linKPage, 'linkPage')
-    validate.email(contacEmail, 'contacEmail')
+    validate.linkPage(linkPage, 'linkPage')
+    validate.email(contactEmail, 'contactEmail', true)
     validate.phoneNumber(phoneNumber, 'phoneNumber')
     validate.password(password)
     validate.pets(pets, 'pets')
@@ -19,7 +19,7 @@ export default (image, name, city, description, email, linKPage, contacEmail, ph
         headers: {
             'Content-Type': 'application/json'
         },
-        body: JSON.stringify({ image, name, city, description, email, linKPage, contacEmail, phoneNumber, password, passwordRepeat, pets })
+        body: JSON.stringify({ image, name, city, description, email, linkPage, contactEmail, phoneNumber, password, passwordRepeat, pets })
     })
         .catch(error => { throw new SystemError(error.message) })
         .then(response => {
diff --git a/staff/tatiana-garcia/project/app/logic/updatePetsitterUser.js b/staff/tatiana-garcia/project/app/logic/updatePetsitterUser.js
index 25d6dba71..09617f4cf 100644
--- a/staff/tatiana-garcia/project/app/logic/updatePetsitterUser.js
+++ b/staff/tatiana-garcia/project/app/logic/updatePetsitterUser.js
@@ -3,13 +3,13 @@ import extractPayLoadFromToken from '../util/extractPayLoadFromToken'
 
 const { SystemError } = errors
 
-export default (image, name, city, description, linKPage, contactEmail, phoneNumber, pets) => {
+export default (image, name, city, description, linkPage, contactEmail, phoneNumber, pets) => {
     validate.image(image, 'image')
     validate.name(name, 'name')
     validate.city(city, 'city')
     validate.description(description, 'description')
-    validate.image(linKPage, 'linkPage')
-    validate.email(contactEmail, 'contactEmail')
+    validate.linkPage(linkPage, 'linkPage')
+    validate.email(contactEmail, 'contactEmail', true)
     validate.phoneNumber(phoneNumber, 'phoneNumber')
     validate.pets(pets, 'pets')
 
@@ -21,7 +21,7 @@ export default (image, name, city, description, linKPage, contactEmail, phoneNum
             Authorization: `Bearer ${sessionStorage.token}`,
             'Content-Type': 'application/json'
         },
-        body: JSON.stringify({ image, name, city, description, linKPage, contactEmail, phoneNumber, pets })
+        body: JSON.stringify({ image, name, city, description, linkPage, contactEmail, phoneNumber, pets })
     })
         .catch(error => { throw new SystemError(error.message) })
         .then(response => {
diff --git a/staff/tatiana-garcia/project/app/view/App.jsx b/staff/tatiana-garcia/project/app/view/App.jsx
index 440672eb5..39a2a2d41 100644
--- a/staff/tatiana-garcia/project/app/view/App.jsx
+++ b/staff/tatiana-garcia/project/app/view/App.jsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { Routes, Route, useNavigate, Navigate } from 'react-router-dom'
 import { Context } from './context.js'
 import logic from '../logic/index.js'
@@ -12,8 +12,10 @@ import Alert from './common/Alert.jsx'
 import Petsitters from './petsitters/index.jsx'
 import PetsitterDetails from './petsitters/petsitterDetails.jsx'
 import Settings from './settings/index.jsx'
+import SettingsPetsitter from './settings/updatePetsitterUser.jsx'
 
 export default function App() {
+  const [isPetsitter, setIsPetsitter] = useState(false)
   const navigate = useNavigate()
 
   const [alertMessage, setAlertMessage] = useState(null)
@@ -46,6 +48,18 @@ export default function App() {
 
   const handleAlertAccept = () => setAlertMessage(null)
 
+  useEffect(() => {
+    if (logic.isUserLoggedIn()) {
+      if (logic.getUserRole() === 'petsitter') {
+        setIsPetsitter(true)
+      } else {
+        setIsPetsitter(false)
+      }
+    } else {
+      setIsPetsitter(false)
+    }
+  })
+
   return <Context.Provider value={{ alert: setAlertMessage }}>
     <Routes>
       <Route path='/*' element={<Home onLogout={handleLogout} />} />
@@ -54,7 +68,7 @@ export default function App() {
       <Route path='/contact' element={<Contact onRegisterPetsitterUserClick={handleRegisterPetsitterUserClick} />} />
       <Route path='/registerPetsitter' element={logic.isUserLoggedIn() ? <Navigate to='/' /> : <RegisterPetsitterUser onRegisterPetsitterUser={handleRegisterPetsitterUser} onLoginClick={handleLoginClick} />} />
       <Route path='/petsitters' element={<Petsitters />} />
-      <Route path='/settings' element={<Settings onLogoutClick={handleLogout} />} />
+      <Route path='/settings' element={isPetsitter ? <SettingsPetsitter onLogoutClick={handleLogout} /> : <Settings onLogoutClick={handleLogout} />} />
       <Route path='/petsitters/:petsitterId' element={<PetsitterDetails handleLoginClick={onLoginClicked} />} />
     </Routes>
 
diff --git a/staff/tatiana-garcia/project/app/view/home/Footer.jsx b/staff/tatiana-garcia/project/app/view/home/Footer.jsx
index 2f4239a07..108b0d3e4 100644
--- a/staff/tatiana-garcia/project/app/view/home/Footer.jsx
+++ b/staff/tatiana-garcia/project/app/view/home/Footer.jsx
@@ -2,8 +2,8 @@ import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { FaUser } from 'react-icons/fa'
 import { RiHomeHeartFill } from 'react-icons/ri'
-import { GiPawHeart } from 'react-icons/gi'
-import { MdOutlineMail } from "react-icons/md"
+import { PiPawPrintFill } from "react-icons/pi"
+import { MdEmail } from "react-icons/md"
 
 import Button from '../library/Button'
 import Container from '../library/Container'
@@ -28,11 +28,11 @@ export default function Footer({ defaultTab }) {
             </Button>
 
             <Button onClick={() => onPetsittersClick()} className={`flex justify-center items-center bg-transparent border-transparent rounded-lg p-1 ${activeTab === 'petsitters' ? 'text-purple-500' : 'text-dimgray'}`}>
-                <GiPawHeart size={24} />
+                <PiPawPrintFill size={24} />
             </Button>
 
             <Button onClick={() => onContactClick()} className={`flex justify-center items-center bg-transparent border-transparent rounded-lg p-1 ${activeTab === 'contact' ? 'text-purple-500' : 'text-dimgray'}`}>
-                <MdOutlineMail size={24} />
+                <MdEmail size={24} />
             </Button>
 
             <Button onClick={() => onLoginClick()} className={`flex justify-center items-center bg-transparent border-transparent rounded-lg p-1 ${activeTab === 'login' ? 'text-purple-500' : 'text-dimgray'}`}>
diff --git a/staff/tatiana-garcia/project/app/view/petsitters/Review.jsx b/staff/tatiana-garcia/project/app/view/petsitters/Review.jsx
index 9d6ff5a45..29fe5bf36 100644
--- a/staff/tatiana-garcia/project/app/view/petsitters/Review.jsx
+++ b/staff/tatiana-garcia/project/app/view/petsitters/Review.jsx
@@ -29,19 +29,22 @@ export default function Review({ review, onDelete }) {
     }
 
     return <Container className='flex flex-row items-center border-y border-solid border-gray-400 px-2'>
-        <Container className='flex flex-col w-full h-auto'>
+        <Container className='flex flex-row w-full h-auto'>
             <img src={review.author.image} alt='imagen usuario' className='h-24 w-24 rounded-[15px] mr-4 p-2 ml-3' />
-            <Paragraph className='text-sm my-1 ml-1 font-bold'>{review.author.name}</Paragraph>
-            <Paragraph className='text-sm my-1 ml-1'>{review.comment}</Paragraph>
-            {review.rate > 0 && <Rating
-                name='read-only'
-                value={review.rate}
-                style={{ marginBottom: '12px', marginTop: '6px' }}
-                emptyIcon={<StarIcon style={{ opacity: 1, color: 'white' }} fontSize='inherit' />}
-                readOnly />}
+            <Container className='flex flex-col'>
+                <Paragraph className='text-sm my-1 ml-1 font-bold'>{review.author.name}</Paragraph>
+                <Paragraph className='text-sm my-1 ml-1'>{review.comment}</Paragraph>
+                {review.rate > 0 && <Rating
+                    name='read-only'
+                    value={review.rate}
+                    style={{ marginBottom: '12px', marginTop: '6px' }}
+                    size='small'
+                    emptyIcon={<StarIcon style={{ opacity: 1, color: 'white' }} fontSize='inherit' />}
+                    readOnly />}
+            </Container>
         </Container>
-        {deleteVisibility && <Container className='mr-3'>
-            <Button onClick={handlePetsitterDelete}><DeleteIcon className='w-7 h-7 text-black' /></Button>
+        {deleteVisibility && <Container className='mr-1'>
+            <Button onClick={handlePetsitterDelete}><DeleteIcon className='w-6 h-6 text-slate-800' /></Button>
         </Container>}
     </Container>
 }
diff --git a/staff/tatiana-garcia/project/app/view/petsitters/index.jsx b/staff/tatiana-garcia/project/app/view/petsitters/index.jsx
index 02e4ea2a9..589e2abf1 100644
--- a/staff/tatiana-garcia/project/app/view/petsitters/index.jsx
+++ b/staff/tatiana-garcia/project/app/view/petsitters/index.jsx
@@ -59,7 +59,7 @@ export default function SearchPetsitters() {
 
     return <>
         <Header />
-        <main className='bg-teal-100 h-screen mt-16 mb-12 flex flex-col items-center justify-start gap-4 text-[1.5rem]'>
+        <main className='bg-teal-100 h-screen mt-16 mb-12 flex flex-col items-center justify-start text-[1.5rem]'>
             <Container className='p-2 bg-teal-100 w-full max-w-sm'>
                 <Heading className='text-center mb-4 font-bold'>Guarderías</Heading>
 
@@ -126,7 +126,7 @@ export default function SearchPetsitters() {
                         </select>
                     </Container>
                 </Container>
-                <Container className='mt-4'>
+                <Container className='mt-4 mb-16'>
                     {petsitters.length > 0 ? (
                         petsitters.map(petsitter => (
                             <div key={petsitter.id} className='flex items-start h-28 w-full mr-4 mb-4 rounded-[15px] shadow-md bg-white' onClick={() => onPetsitterDetailsClick(petsitter.id)}>
diff --git a/staff/tatiana-garcia/project/app/view/petsitters/petsitterDetails.jsx b/staff/tatiana-garcia/project/app/view/petsitters/petsitterDetails.jsx
index 1e2a692ca..6ca127398 100644
--- a/staff/tatiana-garcia/project/app/view/petsitters/petsitterDetails.jsx
+++ b/staff/tatiana-garcia/project/app/view/petsitters/petsitterDetails.jsx
@@ -32,6 +32,7 @@ export default function PetsitterDetails({ handleLoginClick }) {
     const [rating, setRating] = useState(0)
     const [value, setValue] = useState(0)
     const [addReviewVisibility, setAddReviewVisibility] = useState(false)
+    const [addAllDetailsVisibility, setAllDetailsVisibility] = useState(false)
 
 
     const onLoginClick = () => handleLoginClick()
@@ -44,6 +45,14 @@ export default function PetsitterDetails({ handleLoginClick }) {
         setAddReviewVisibility(false)
     }
 
+    const onAllDetailsClick = () => {
+        setAllDetailsVisibility(true)
+    }
+
+    const onCancelAllDetailsClick = () => {
+        setAllDetailsVisibility(false)
+    }
+
     const onReviewSubmit = (event) => {
         const { sub: userId } = extractPayloadFromToken(sessionStorage.token)
 
@@ -151,43 +160,43 @@ export default function PetsitterDetails({ handleLoginClick }) {
     return (<>
         <Header />
         <main className='bg-teal-100 h-screen mt-16 mb-12 flex flex-col items-center justify-start gap-4 text-[1.5rem] overflow-y-auto'>
-            <Container className='text-center mb-4'>
+            <Container className='text-center m-6'>
                 <Heading className='text-2xl font-bold'>Guardería</Heading>
             </Container>
             {petsitter != null ? (
-                <Container className='text-lg bg-white p-3 mt-0 rounded-[50px] shadow-lg overflow-y-auto max-h-[80vh]'>
-                    <Container className='flex items-center mb-4'>
-                        <img src={petsitter.image} alt='imagen guarderia' className='h-24 w-24 rounded-[15px] mr-4 p-2 ml-3' />
+                <Container className='text-lg bg-white p-1 rounded-[50px] shadow-lg box-content h-auto'>
+                    <Container className='flex items-center m-4'>
+                        <img src={petsitter.image} alt='imagen guarderia' className='h-24 w-24 rounded-[15px] m-1' />
 
-                        <Container className='flex flex-col'>
-                            <Heading className='text-base font-bold'>{petsitter.name}</Heading>
-                            <Paragraph className='text-sm mt-1 ml-0 font-semibold text-gray-500'>{petsitter.city}</Paragraph>
+                        <Container>
+                            <Heading className='text-base font-bold m-2'>{petsitter.name}</Heading>
+                            <Paragraph className='text-sm font-semibold text-gray-500'>{petsitter.city}</Paragraph>
                             <Container className='flex flex-row items-center'>
                                 <Rating name='read-only' value={rating} precision={0.25} size='small' emptyIcon={<StarIcon style={{ opacity: 1, color: 'white' }} fontSize='inherit' />} readOnly />
-                                <Paragraph className='text-sm mt-1 ml-0 font-semibold text-gray-500'>{rating.toFixed(1)}</Paragraph>
+                                <Paragraph className='text-sm font-semibold text-gray-500'>{rating.toFixed(1)}</Paragraph>
                             </Container>
                         </Container>
                     </Container>
 
                     <Container>
-                        <Paragraph className=' flex flex-col text-sm text-gray-700 mb-4'>{petsitter.description}</Paragraph>
+                        <Paragraph className=' flex flex-col text-lg text-gray-700 m-4'>{petsitter.description}</Paragraph>
                     </Container>
 
                     {
                         userRole === 'regular' ? (
                             <Container className='font-bold text-lg p-1 flex flex-row space-x-2'>
-                                <Button className='w-36 bg-green-100 text-black rounded-full hover:bg-green-200 transition duration-200'>Contáctame</Button>
+                                <Button className='w-36 bg-green-100 text-black rounded-full hover:bg-green-200 transition duration-200' onClick={onAllDetailsClick}>Contáctame</Button>
                                 <Button className='w-36 bg-green-100 text-black rounded-full hover:bg-green-200 transition duration-200' onClick={onAddReviewClick}>Valórame</Button>
                             </Container>
 
                         ) : (
-                            <Link className='text-xs font-bold ' onClick={onLoginClick}>Loguéate para contactar o valorar a tu guardería</Link>
+                            <Link className='text-sm m-4 font-bold' onClick={onLoginClick}>Loguéate para contactar con {petsitter.name}</Link>
                         )
                     }
 
                     <Container>
-                        <Heading className='items-start justify-start flex flex-row text-xl font-bold '>⭐ Reseñas</Heading>
-                        <Container className='flex flex-col max-h-48 space-y-4'>
+                        <Heading className='items-start justify-start m-3 flex flex-row text-lg font-bold '>⭐ Reseñas</Heading>
+                        <Container className='flex flex-col'>
                             {reviews.map(review => (
                                 <Review key={review.id} review={review} onDelete={handleDeletePetsitterReview} />
                             ))}
@@ -206,13 +215,25 @@ export default function PetsitterDetails({ handleLoginClick }) {
                 <Footer defaultTab={'petsitters'} />
             </Container>
 
+            {addAllDetailsVisibility && (
+                <Container className='absolute top-0 left-0 w-screen h-screen bg-black bg-opacity-50 z-20 flex items-center justify-center'>
+                    <Container className='bg-green-100 p-6 border border-black rounded-[25px] flex flex-col items-center w-11/12 max-w-md'>
+                        <Heading className='text-black text-center font-bold mb-4'>Datos de contacto de {petsitter?.name}</Heading>
+                        <a href={`mailto:${petsitter?.contactEmail}`} className='text-black text-center text-lg font-semibold mb-2 underline break-words max-w-full'>{petsitter?.contactEmail}</a>
+                        <a href={petsitter?.linkPage} target="_blank" rel="noopener noreferrer" className='text-black text-center text-sm font-semibold mb-2 underline break-words max-w-full'>{petsitter?.linkPage}</a>
+                        <a href={`tel:${petsitter?.phoneNumber}`} className='text-black text-center text-lg font-semibold mb-2 underline'>{petsitter?.phoneNumber}</a>
+                        <Button className='w-28 bg-red-400 text-white rounded-full hover:bg-red-500 transition duration-200 mt-4' onClick={onCancelAllDetailsClick}>Cancelar</Button>
+                    </Container>
+                </Container>
+            )}
+
             {addReviewVisibility && <>
                 <Container className='absolute top-0 left-0 w-screen h-screen bg-black bg-opacity-50 z-20 flex items-center justify-center'>
 
-                    <Form className='bg-white p-6 border border-black rounded-[25px] flex flex-col items-center w-11/12 max-w-md' onSubmit={onReviewSubmit}>
-                        <Label className='text-black text-center font-bold mb-4'>Da tu opinión sobre {petsitter?.name}</Label>
+                    <Form className='bg-white p-6 border border-black rounded-[50px] flex flex-col items-center w-11/12 max-w-md' onSubmit={onReviewSubmit}>
+                        <Label className='text-black text-center font-bold m-6'>Da tu opinión sobre {petsitter?.name}</Label>
                         <Container className='mb-4 w-full'>
-                            <Input className='bg-gray-200 w-full p-2 rounded' type='text' id='' name='comment-input' placeholder='escribe aquí tu reseña' />
+                            <textarea className='bg-gray-200 w-full h-32 rounded-[25px] px-4 py-2 text-black text-lg placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-teal-500 resize-none' id='comment-input' name='comment-input' placeholder='escribe aquí tu reseña' />
                         </Container>
                         <Container className='flex justify-center'>
                             <Rating name='rating-input'
@@ -223,7 +244,7 @@ export default function PetsitterDetails({ handleLoginClick }) {
                                 size='large'
                                 emptyIcon={<StarIcon style={{ opacity: 1, color: 'grey' }} fontSize='inherit' />} />
                         </Container>
-                        <Container className='flex justify-between mt-4 w-full'>
+                        <Container className='flex justify-around m-4 w-full'>
                             <Button type='button' className='w-28 bg-red-400 text-white rounded-full hover:bg-red-500 transition duration-200' onClick={onCancelReviewClick}>Cancelar</Button>
                             <Button type='submit' className='w-28 bg-green-400 text-white rounded-full hover:bg-green-500 transition duration-200'>Enviar</Button>
                         </Container>
diff --git a/staff/tatiana-garcia/project/app/view/registerPetssiterUser/index.jsx b/staff/tatiana-garcia/project/app/view/registerPetssiterUser/index.jsx
index 51264dc40..78fc1f4be 100644
--- a/staff/tatiana-garcia/project/app/view/registerPetssiterUser/index.jsx
+++ b/staff/tatiana-garcia/project/app/view/registerPetssiterUser/index.jsx
@@ -25,7 +25,7 @@ export default function RegisterPetsitterUser({ onRegisterPetsitterUser, onLogin
         const cityInput = form['city-input']
         const descriptionInput = form['description-input']
         const emailInput = form['email-input']
-        const linkPageInput = form['link-page.input']
+        const linkPageInput = form['link-page-input']
         const contactEmailInput = form['contact-email-input']
         const phoneNumberInput = form['phoneNumber-input']
         const passwordInput = form['password-input']
diff --git a/staff/tatiana-garcia/project/app/view/settings/index.jsx b/staff/tatiana-garcia/project/app/view/settings/index.jsx
index 24cf8b4e7..432a054a5 100644
--- a/staff/tatiana-garcia/project/app/view/settings/index.jsx
+++ b/staff/tatiana-garcia/project/app/view/settings/index.jsx
@@ -44,6 +44,8 @@ export default function Settings({ onLogoutClick }) {
                 .then(() => {
                     loadUser()
 
+                    alert('Cambios guardados')
+
                     navigate('/')
                 })
                 .catch(error => {
diff --git a/staff/tatiana-garcia/project/app/view/settings/updatePetsitterUser.jsx b/staff/tatiana-garcia/project/app/view/settings/updatePetsitterUser.jsx
index 4ec0019b1..cb27ac627 100644
--- a/staff/tatiana-garcia/project/app/view/settings/updatePetsitterUser.jsx
+++ b/staff/tatiana-garcia/project/app/view/settings/updatePetsitterUser.jsx
@@ -1,4 +1,5 @@
 import logic from '../../logic'
+import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import Container from '../library/Container'
@@ -11,7 +12,6 @@ import Header from '../home/Header'
 
 import useContext from '../context'
 import extractPayLoadFromToken from '../../util/extractPayLoadFromToken'
-import { useEffect, useState } from 'react'
 
 export default function SettingsPetsitter({ onLogoutClick }) {
     const { alert } = useContext()
@@ -26,6 +26,35 @@ export default function SettingsPetsitter({ onLogoutClick }) {
         loadPetsitterUser()
     }, [])
 
+    const loadPetsitterUser = () => {
+        try {
+            logic.getUser(userId)
+                .then(petsitter => {
+                    setPetsitter(petsitter)
+                    setSelectedPets(petsitter.pets || [])
+                })
+                .catch(error => {
+                    console.error(error)
+
+                    alert(error.message)
+                })
+        } catch (error) {
+            console.error(error)
+
+            alert(error.message)
+        }
+    }
+
+    const handlePetChange = event => {
+        const { value, checked } = event.target
+
+        if (checked) {
+            setSelectedPets([...selectedPets, value])
+        } else {
+            setSelectedPets(selectedPets.filter(pet => pet !== value))
+        }
+    }
+
     const handleUpdatePetsitterUserSubmit = event => {
         event.preventDefault()
 
@@ -35,7 +64,7 @@ export default function SettingsPetsitter({ onLogoutClick }) {
         const nameInput = form['name-input']
         const cityInput = form['city-input']
         const descriptionInput = form['description-input']
-        const linkPageInput = form['link-page.input']
+        const linkPageInput = form['link-page-input']
         const contactEmailInput = form['contact-email-input']
         const phoneNumberInput = form['phone-number-input']
 
@@ -53,6 +82,8 @@ export default function SettingsPetsitter({ onLogoutClick }) {
                 .then(() => {
                     loadPetsitterUser()
 
+                    alert('Cambios guardados')
+
                     navigate('/')
                 })
                 .catch(error => {
@@ -67,15 +98,6 @@ export default function SettingsPetsitter({ onLogoutClick }) {
         }
     }
 
-    const handlePetChange = event => {
-        const { value, checked } = event.target
-
-        if (checked) {
-            setSelectedPets([...selectedPets, value])
-        } else {
-            setSelectedPets(selectedPets.filter(pet => pet !== value))
-        }
-    }
 
 
     const handleLogoutClick = event => {
@@ -84,27 +106,11 @@ export default function SettingsPetsitter({ onLogoutClick }) {
         onLogoutClick()
     }
 
-    const loadPetsitterUser = () => {
-        try {
-            logic.getUser(userId)
-                .then(petsitter => setUser(petsitter))
-                .catch(error => {
-                    console.error(error)
-
-                    alert(error.message)
-                })
-        } catch (error) {
-            console.error(error)
-
-            alert(error.message)
-        }
-    }
-
     return <>
         <Header />
         <main className='h-screen flex flex-col mb-32'>
             <Container className=' bg-teal-100 pt-8 pb-8 text-start'>
-                <Heading className='text-center mb-6 pt-8 text-2xl font-bold '>Editar usuario</Heading>
+                <Heading className='text-center mb-6 pt-8 text-2xl font-bold '>Editar guardería</Heading>
 
                 {petsitter && <form onSubmit={handleUpdatePetsitterUserSubmit} className='bg-white rounded-[50px] p-6 space-y-2'>
                     <Container>
@@ -193,67 +199,67 @@ export default function SettingsPetsitter({ onLogoutClick }) {
 
                         <input
                             type='checkbox'
-                            defaultValue={petsitter.pets}
                             id='rabbits-input'
                             value='rabbits'
                             name='pets-input'
                             onChange={handlePetChange}
+                            checked={selectedPets.includes('rabbits')}
                         />
-                        <label htmlFor='rabbits-input'>Conejos</label><br />
+                        <label htmlFor='rabbits-input' className='p-2'>Conejos</label><br />
 
                         <input
                             type='checkbox'
-                            defaultValue={petsitter.pets}
                             id='guinea-pig-input'
                             value='guineaPig'
                             name='pets-input'
                             onChange={handlePetChange}
+                            checked={selectedPets.includes('guineaPig')}
                         />
-                        <label htmlFor='guinea-pig-input'>Cobayas</label><br />
+                        <label htmlFor='guinea-pig-input' className='p-2'>Cobayas</label><br />
 
                         <input
                             type='checkbox'
-                            defaultValue={petsitter.pets}
                             id='hamsters-input'
                             value='hamsters'
                             name='pets-input'
                             onChange={handlePetChange}
+                            checked={selectedPets.includes('hamsters')}
                         />
-                        <label htmlFor='hamsters-input'>Hamsters</label><br />
+                        <label htmlFor='hamsters-input' className='p-2'>Hamsters</label><br />
 
                         <input
                             type='checkbox'
-                            defaultValue={petsitter.pets}
                             id='rats-input'
                             value='rats'
                             name='pets-input'
                             onChange={handlePetChange}
+                            checked={selectedPets.includes('rats')}
                         />
-                        <label htmlFor='rats-input'>Ratas</label><br />
+                        <label htmlFor='rats-input' className='p-2'>Ratas</label><br />
 
                         <input
                             type='checkbox'
-                            defaultValue={petsitter.pets}
                             id='birds-input'
                             value='birds'
                             name='pets-input'
                             onChange={handlePetChange}
+                            checked={selectedPets.includes('birds')}
                         />
-                        <label htmlFor='birds-input'>Aves</label><br />
+                        <label htmlFor='birds-input' className='p-2'>Aves</label><br />
 
                         <input
                             type='checkbox'
-                            defaultValue={petsitter.pets}
                             id='reptiles-input'
                             value='reptiles'
                             name='pets-input'
                             onChange={handlePetChange}
+                            checked={selectedPets.includes('reptiles')}
                         />
-                        <label htmlFor='reptiles-input'>Reptiles</label><br /><br />
+                        <label htmlFor='reptiles-input' className='p-2'>Reptiles</label><br /><br />
                     </Container>
 
                     <Container className='text-center'>
-                        <button className='w-32 font-bold bg-green-100 text-black p-2 rounded-full hover:bg-green-200 transition duration-200' type='submit'>{'Guardar cambios'}</button>
+                        <button className='w-36 font-bold bg-green-100 text-black p-2 rounded-full hover:bg-green-200 transition duration-200' type='submit'>{'Guardar cambios'}</button>
                     </Container>
                 </form>}
                 <Container className='text-center  pb-8 pt-2'>
diff --git a/staff/tatiana-garcia/project/com/validate.js b/staff/tatiana-garcia/project/com/validate.js
index 56664233c..7bf40217d 100644
--- a/staff/tatiana-garcia/project/com/validate.js
+++ b/staff/tatiana-garcia/project/com/validate.js
@@ -19,8 +19,11 @@ function validateSurname(surname, explain = 'surname') {
     validateString(surname, 'surname')
     if (!NAME_REGEX.test(surname)) throw new ValidationError(`invalid ${explain}`)
 }
-function validateEmail(email, explain = 'email') {
+function validateEmail(email, explain = 'email', isOptinal = false) {
+    if (isOptinal && (!email || email.trim() === '')) return
+
     validateString(email, 'email')
+
     if (!EMAIL_REGEX.test(email.trim())) throw new ValidationError(`invalid ${explain}`)
 }
 
@@ -42,7 +45,7 @@ function validateDescription(description, explain = 'description') {
 }
 
 function validateImage(image, explain = 'image') {
-    validateString(image, explain)
+    validateString(image, 'image')
     if (!image.startsWith('http')) throw new ValidationError(`invalid ${explain}`)
 }
 
@@ -74,6 +77,10 @@ function validateObject(object, explain = 'object') {
 
 }
 
+function validateLinkPage(linkPage) {
+    if (linkPage && !isValidURL(linkPage)) throw new ValidationError('linkPage no es una URL válida')
+}
+
 const validate = {
     string: validateString,
     name: validateName,
@@ -88,7 +95,8 @@ const validate = {
     phoneNumber: validatePhoneNumber,
     number: validateNumber,
     id: validateId,
-    object: validateObject
+    object: validateObject,
+    linkPage: validateLinkPage
 }
 
 export default validate
\ No newline at end of file
diff --git a/staff/tatiana-garcia/project/cor/data/models.js b/staff/tatiana-garcia/project/cor/data/models.js
index a57ddbb45..a0223c74a 100644
--- a/staff/tatiana-garcia/project/cor/data/models.js
+++ b/staff/tatiana-garcia/project/cor/data/models.js
@@ -15,11 +15,13 @@ const user = new Schema({
         required: true,
         unique: true
     },
-    contacEmail: {
-        type: String
+    contactEmail: {
+        type: String,
+        required: false
     },
-    linKPage: {
-        type: String
+    linkPage: {
+        type: String,
+        required: false
     },
     phoneNumber: {
         type: String
diff --git a/staff/tatiana-garcia/project/cor/logic/registerPetsitterUser.js b/staff/tatiana-garcia/project/cor/logic/registerPetsitterUser.js
index 133053ee2..741ce2280 100644
--- a/staff/tatiana-garcia/project/cor/logic/registerPetsitterUser.js
+++ b/staff/tatiana-garcia/project/cor/logic/registerPetsitterUser.js
@@ -5,14 +5,14 @@ import { validate, errors } from '../../com/index.js'
 
 const { ValidationError, DuplicityError, SystemError } = errors
 
-export default (image, name, city, description, email, linKPage, contacEmail, phoneNumber, password, passwordRepeat, pets) => {
+export default (image, name, city, description, email, linkPage, contactEmail, phoneNumber, password, passwordRepeat, pets) => {
     validate.image(image, 'image')
     validate.name(name, 'name')
     validate.city(city, 'city')
     validate.description(description, 'description')
     validate.email(email, 'email')
-    validate.image(linKPage, 'linkPage')
-    validate.email(contacEmail, 'contacEmail')
+    validate.linkPage(linkPage, 'linkPage')
+    validate.email(contactEmail, 'contactEmail', true)
     validate.phoneNumber(phoneNumber, 'phoneNumber')
     validate.password(password)
     validate.pets(pets, 'pets')
@@ -35,8 +35,8 @@ export default (image, name, city, description, email, linKPage, contacEmail, ph
                 city,
                 description,
                 email,
-                linKPage,
-                contacEmail,
+                linkPage,
+                contactEmail,
                 phoneNumber,
                 password: hash,
                 role: 'petsitter',
diff --git a/staff/tatiana-garcia/project/cor/logic/updatePetsitterUser.js b/staff/tatiana-garcia/project/cor/logic/updatePetsitterUser.js
index 50314618d..8f2031a93 100644
--- a/staff/tatiana-garcia/project/cor/logic/updatePetsitterUser.js
+++ b/staff/tatiana-garcia/project/cor/logic/updatePetsitterUser.js
@@ -9,8 +9,8 @@ export default function (userId, newImage, newName, newCity, newDescription, new
     validate.name(newName, 'newName')
     validate.city(newCity, 'newCity')
     validate.description(newDescription, 'newDescription')
-    validate.image(newLinkPage, 'newLinkPage')
-    validate.email(newContactEmail, 'newContactEmail')
+    validate.linkPage(newLinkPage, 'newLinkPage')
+    validate.email(newContactEmail, 'newContactEmail', true)
     validate.phoneNumber(newPhoneNumber, 'newPhoneNumber')
     validate.pets(newPets, 'newPets')
 
@@ -19,7 +19,7 @@ export default function (userId, newImage, newName, newCity, newDescription, new
         .then(petsitter => {
             if (!petsitter) throw new NotFoundError('petsitter not found')
 
-            return User.findByIdAndUpdate(userId, { image: newImage, name: newName, city: newCity, description: newDescription, linKPage: newLinkPage, contacEmail: newContactEmail, phoneNumber: newPhoneNumber, pets: newPets })
+            return User.findByIdAndUpdate(userId, { image: newImage, name: newName, city: newCity, description: newDescription, linkPage: newLinkPage, contactEmail: newContactEmail, phoneNumber: newPhoneNumber, pets: newPets })
                 .catch(error => { throw new SystemError(error.message) })
         })
         .then(() => { })