From 7064525df151ce7bfa41f6497c207a849efb1e78 Mon Sep 17 00:00:00 2001
From: ConanGH-S <blandon0207s@gmail.com>
Date: Mon, 27 Mar 2023 16:57:59 -0500
Subject: [PATCH 1/2] new card in services to make custom service

---
 src/components/AboutUs/AboutUs.jsx            |  1 +
 src/components/Services/Services.jsx          | 21 +++++++++++++++++++
 src/components/Utils/Card/Card.css            |  7 +++++++
 src/components/Utils/Card/Card.jsx            | 14 +++++++++++--
 .../Utils/ModalService/ModalService.css       |  4 ++++
 .../Utils/ModalService/ModalService.jsx       | 14 +++++++++++--
 6 files changed, 57 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Utils/ModalService/ModalService.css

diff --git a/src/components/AboutUs/AboutUs.jsx b/src/components/AboutUs/AboutUs.jsx
index 45d0009..35a3c7c 100644
--- a/src/components/AboutUs/AboutUs.jsx
+++ b/src/components/AboutUs/AboutUs.jsx
@@ -100,6 +100,7 @@ const AboutUs = () => {
               <Card src={foto_servicio} title={nombre_servicio} description={resumen_servicio} isButton buttonText={'Detalles'} />
             </Link>
           ))}
+          <Card src={'https://firebasestorage.googleapis.com/v0/b/fademetuserimg.appspot.com/o/pregunta.jpg?alt=media&token=5ae2cb81-22e8-4e53-9b93-4810bf385883'} title={'¿No encuentras lo que buscas?'} description='Puedes pedir tu servicio metalmecánico personalizado' isModal innerClassName={'card__servicio-personalizado'} />
 
           {(memoizedInactiveService && servicesState === 'inactive') && memoizedInactiveService.map(({ id_servicio, foto_servicio, nombre_servicio, resumen_servicio }) => (
             <Link to={`/services/${id_servicio}`} key={id_servicio}>
diff --git a/src/components/Services/Services.jsx b/src/components/Services/Services.jsx
index baf9be3..65c2a81 100644
--- a/src/components/Services/Services.jsx
+++ b/src/components/Services/Services.jsx
@@ -42,6 +42,27 @@ const Services = () => {
       })
       setToastify(false)
     }
+    if (toastify === 'citaAgendada') {
+      toast.success('¡Cita agendada con éxito!', {
+        theme: 'colored'
+      })
+      setToastify(false)
+    }
+    if (toastify === 'citaAgendadaError') {
+      toast.error('¡Hubo un error al crear la cita!', {
+        theme: 'colored'
+      })
+      setToastify(false)
+    }
+    if (toastify === 'citaAgendadaRepetida') {
+      toast.warning(
+        '¡Ya tienes una cita pendiente! Por favor, elimínala si ya no la necesitas o espera a que te demos una respuesta.',
+        {
+          theme: 'colored'
+        }
+      )
+      setToastify(false)
+    }
   }, [toastify])
 
   useEffect(() => {
diff --git a/src/components/Utils/Card/Card.css b/src/components/Utils/Card/Card.css
index 95c49c3..9b3105b 100644
--- a/src/components/Utils/Card/Card.css
+++ b/src/components/Utils/Card/Card.css
@@ -41,6 +41,13 @@ picture {
 .card__button {
   margin: 0.5rem auto;
 }
+.modal__card-button {
+  margin-block: 0.5rem;
+  margin-inline: auto;
+}
+.card__servicio-personalizado {
+  cursor: default;
+}
 
 @media (max-width: 630px) {
   picture {
diff --git a/src/components/Utils/Card/Card.jsx b/src/components/Utils/Card/Card.jsx
index 57d4b73..b1d6120 100644
--- a/src/components/Utils/Card/Card.jsx
+++ b/src/components/Utils/Card/Card.jsx
@@ -6,6 +6,7 @@ import AOS from 'aos'
 import { LazyLoadImage } from 'react-lazy-load-image-component'
 import 'react-lazy-load-image-component/src/effects/blur.css'
 import { Button2 } from '../Button2/Button2'
+import { ModalService } from '../ModalService/ModalService'
 
 const Card = ({
   title,
@@ -16,13 +17,16 @@ const Card = ({
   descriptionFont,
   src,
   isButton = false,
+  isModal = false,
   buttonText,
+  innerOnClick,
+  innerClassName,
   alt = 'Servicio que ofrece Fademet Montajes'
 }) => {
   AOS.init({ duration: 700 })
 
   return (
-    <div className='card' data-aos='fade-right'>
+    <div className={`card ${innerClassName}`} data-aos='fade-right'>
       <picture>
         <LazyLoadImage
           className='card__image'
@@ -41,7 +45,13 @@ const Card = ({
         {description}
       </p>
       {isButton && (
-        <Button2 width={150} text={buttonText} innerClassName='card__button' />
+        <Button2 width={150} text={buttonText} innerClassName='card__button' innerOnClick={innerOnClick} />
+      )}
+      {isModal && (
+        <ModalService innerClassNameButton={'modal__card-button'} innerCenterButton
+          nombre_servicio={'Servicio personalizado'}
+          id_servicio={0}
+        />
       )}
     </div>
   )
diff --git a/src/components/Utils/ModalService/ModalService.css b/src/components/Utils/ModalService/ModalService.css
new file mode 100644
index 0000000..35c8dd4
--- /dev/null
+++ b/src/components/Utils/ModalService/ModalService.css
@@ -0,0 +1,4 @@
+.section__button-grid-center {
+  display: grid;
+  place-items: center;
+}
\ No newline at end of file
diff --git a/src/components/Utils/ModalService/ModalService.jsx b/src/components/Utils/ModalService/ModalService.jsx
index 3b48f60..a3eb1c1 100644
--- a/src/components/Utils/ModalService/ModalService.jsx
+++ b/src/components/Utils/ModalService/ModalService.jsx
@@ -12,6 +12,7 @@ import { Box } from '@mui/system'
 
 // ? Styles
 import { style } from './ModalStyle'
+import './ModalService.css'
 
 // ? Libraries
 import axios from 'axios'
@@ -23,7 +24,7 @@ import emailjs from '@emailjs/browser'
 import { SessionContext } from '../../../context/SessionContext'
 import { ToastifyContext } from '../../../context/ToastifyContext'
 
-const ModalService = ({ nombre_servicio = '', id_servicio = '' }) => {
+const ModalService = ({ nombre_servicio = '', id_servicio = '', innerClassNameButton, innerCenterButton }) => {
   const nombreInputEl = useRef()
   const correoInputEl = useRef()
   const numCelularInputEl = useRef()
@@ -177,7 +178,16 @@ const ModalService = ({ nombre_servicio = '', id_servicio = '' }) => {
 
   return (
     <div>
-      <Button2 innerOnClick={handleModalClick} text='Solicitar' width={220} />
+      {innerCenterButton
+        ? (
+          <section className='section__button-grid-center'>
+            <Button2 innerOnClick={handleModalClick} text='Solicitar' width={220} innerClassName={innerClassNameButton} />
+          </section>
+        )
+        : (
+          <Button2 innerOnClick={handleModalClick} text='Solicitar' width={220} />
+        )
+      }
       <Modal
         open={openModal}
         onClose={handleModalClick}

From ac36609fed6813d2dd18a40dbe4abee9aa1a623b Mon Sep 17 00:00:00 2001
From: ConanGH-S <blandon0207s@gmail.com>
Date: Mon, 27 Mar 2023 16:58:29 -0500
Subject: [PATCH 2/2] v1.3.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f48199b..8af2be3 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "webfam",
   "private": true,
-  "version": "1.2.0",
+  "version": "1.3.0",
   "type": "module",
   "scripts": {
     "dev": "vite --open",