Merge pull request #112 from KrlosPK/conanDev

v1.3.0
KrlosPK · Mar 27, 2023 · 391cc29 · 391cc29
2 parents 20c98c9 + 8094e9b
commit 391cc29
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "webfam",
   "private": true,
-  "version": "1.2.1",
+  "version": "1.3.0",
   "type": "module",
   "scripts": {
     "dev": "vite --open",

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,4 @@
+.section__button-grid-center {
+  display: grid;
+  place-items: center;
+}
diff --git 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}