Merge pull request #156 from Actualiza-Tu-Carro/134-formulariodecontacto

134 formulariodecontacto

package.json

@@ -24,8 +24,10 @@
     "postcss": "8.4.27",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.46.1",
     "react-icons": "4.10.1",
     "storybook": "^7.2.2",
+    "sweetalert2": "^11.7.28",
     "tailwindcss": "3.3.3",
     "typescript": "5.1.6"
   },

src/app/page.tsx

@@ -11,6 +11,7 @@ import ReviewsContainer from '~/components/containerCards/containerCardsReviews'
 import reviews from '~/mockData/mockReviwes';
 import Banner from '~/components/Banner';
 import BrandCarrousel from '~/components/carousels/brandCarrousel';
+import Form from '~/components/form/Form';
 
 export default function Home() {
   createIconsTypes();

src/assets/icons/Close.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+export default function Close() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="icon icon-tabler icon-tabler-x"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      strokeWidth="2"
+      stroke="currentColor"
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M18 6l-12 12"></path>
+      <path d="M6 6l12 12"></path>
+    </svg>
+  );
+}

src/components/footer/Footer.tsx

@@ -1,13 +1,19 @@
+'use client';
 import Image from 'next/image';
 import { Images } from '~/assets/img';
 import ImagesList from './ImagesList';
-import React, { FC } from 'react';
-import Link from 'next/link';
+import React, { FC, useState } from 'react';
+import { MainButton } from '~/components/button/button';
 import Links from './Links';
+import Link from 'next/link';
+import { useFlagState } from '~/hooks/useFlagState';
+import Form from '~/components/form/Form';
 
 interface FooterProps {}
 
 const Footer: FC<FooterProps> = ({}) => {
+  const [flagState, updateState] = useFlagState(false);
+
   return (
     <div className="h-[532px] md:h-[362px] bg-[black] p-6 relative">
       <footer
@@ -30,6 +36,7 @@ const Footer: FC<FooterProps> = ({}) => {
         <div className="flex flex-col gap-14 items-center flex-1">
           <div className="flex text-white gap-4 items-center justify-center">
             <Links />
+            <button onClick={() => updateState(true)}>Contacto</button>
           </div>
           <Image
             src="https://i.postimg.cc/7Ymwd4mS/Mercado-Pago.png"
@@ -38,8 +45,8 @@ const Footer: FC<FooterProps> = ({}) => {
             height="240"
           />
         </div>
+        {flagState && <Form updateState={updateState} />}
       </footer>
-
       <p className="text-xs text-white text-center absolute bottom-0 left-0 right-0 pb-4">
         ©Copyrigth 2023. Todos los derechos reservados - Desarrollado por: Work
         Team

src/components/footer/Links.tsx

@@ -6,7 +6,6 @@ interface LinksProps {}
 const LinksRoutes = [
   { name: 'Nosotros', route: '/aboutUs' },
   { name: 'Como comprar', route: '/como-comprar' },
-  { name: 'Contacto', route: '/contact' },
   { name: 'Blog', route: 'https://actualizatucarro.blogspot.com/' },
 ];
 
@@ -18,9 +17,7 @@ const Links: FC<LinksProps> = () => {
           <Link href={link.route} key={link.name}>
             {link.name}
           </Link>
-          {index !== LinksRoutes.length - 1 && (
-            <div className="w-[3px] h-4 bg-primary-lm"></div>
-          )}
+          <div key={link.name + 1} className="w-[3px] h-4 bg-primary-lm"></div>
         </>
       ))}
     </>

src/components/form/Form.tsx

@@ -0,0 +1,143 @@
+'use client';
+import React, { FC } from 'react';
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { InputField } from '../inputs/InputField';
+import { MainButton } from '../button/button';
+import Icon from '~/assets/icons/icon';
+import Swal from 'sweetalert2';
+
+interface FormProp {
+  updateState: (flagState: boolean) => void; // Corregido el tipo de isOpenContact
+}
+
+interface FormProps {
+  name: string;
+  phone: string;
+  message: string;
+}
+
+const Form: FC<FormProp> = ({ updateState }) => {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<FormProps>();
+
+  const handleFormSubmit: SubmitHandler<FormProps> = (data, event) => {
+    event?.preventDefault();
+    if (!errors.name || !errors.phone || !errors.message) {
+      updateState(false);
+      alertSuccess();
+      console.log(data);
+    }
+  };
+
+  const alertSuccess = () => {
+    Swal.fire({
+      toast: true,
+      position: 'top-end',
+      title: 'Enviado!',
+      text: 'El mensaje a sido enviado correctamente',
+      icon: 'success',
+      showConfirmButton: false,
+      timer: 2000,
+    });
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(handleFormSubmit)}
+      className="fixed inset-0 flex items-center justify-center z-50 bg-[rgba(0,0,0,.5)]"
+    >
+      <div className="relative flex p-6 px-14 pt-10 flex-col bg-white xs:w-[440px] gap-4 rounded-xl shadow-xl w-full">
+        <h1 className="text-[40px] font-bold py-1 overflow-hidden text-ellipsis">
+          Contacto
+        </h1>
+        <p className="text-xs">
+          ¿Tienes preguntas o necesitas ayuda para tu compra? ¡Contáctanos!
+          Nuestro equipo está aquí para asistirte.
+        </p>
+        <input
+          placeholder="Nombre"
+          {...register('name', {
+            required: 'Nombre requerido',
+            minLength: {
+              value: 3,
+              message: 'Debe tener minimo 3 caracteres',
+            },
+            pattern: {
+              value: /^[A-Za-z]+$/,
+              message: 'Ingresa solo letras',
+            },
+          })}
+          autoComplete="off"
+          className="bg-input-bg `w-full px-3 outline-none rounded-md text-secondary-dm text-xs py-3"
+        />
+        {errors.name && (
+          <p className="text-primary-lm">{errors.name.message}</p>
+        )}
+
+        <input
+          placeholder={
+            errors.phone
+              ? 'Mobil empieza por 3, longitud minima 10 caracteres'
+              : 'Mobil / Correo'
+          }
+          {...register('phone', {
+            required: 'Telefono o Correo requerido',
+            validate: (value) =>
+              /^3\d{9}$/.test(value) ||
+              /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+                value
+              ) ||
+              'Mobil o Correo invalidos',
+          })}
+          autoComplete="off"
+          className="bg-input-bg `w-full px-3 outline-none rounded-md text-secondary-dm text-xs py-3"
+        />
+        {errors.phone && (
+          <p className="text-primary-lm">{errors.phone.message}</p>
+        )}
+
+        <textarea
+          placeholder="Mensaje"
+          {...register('message', {
+            required: 'Mensaje requerido',
+            maxLength: {
+              value: 200,
+              message: 'Mensaje debe tener maximo 400 caracteres',
+            },
+          })}
+          autoComplete="off"
+          className="bg-input-bg px-3 py-3 rounded-md autocomplete=off outline-none min-h-[100px] text-xs"
+        />
+        {errors.message && (
+          <p className="text-primary-lm">{errors.message.message}</p>
+        )}
+
+        <MainButton
+          variant="tertiary"
+          type="submit"
+          className="bg-primary-lm  text-white py-3 rounded-md"
+        >
+          ENVIAR
+        </MainButton>
+
+        <MainButton
+          type="button"
+          onClick={() => {
+            updateState(false);
+          }}
+          className="absolute top-2 right-2"
+        >
+          <div className="h-6 w-6">
+            <Icon icon="Close" />
+          </div>
+        </MainButton>
+      </div>
+    </form>
+  );
+};
+
+export default Form;

src/components/navBar/MenuMobile.tsx

@@ -1,15 +1,16 @@
 import Link from 'next/link';
 import React, { FC } from 'react';
 
-interface MenuMobileProps {}
+interface MenuMobileProps {
+  updateState: (isOpenContact: boolean) => void;
+}
 
-const MenuMobile: FC<MenuMobileProps> = ({}) => {
+const MenuMobile: FC<MenuMobileProps> = ({ updateState }) => {
   const navItems = [
     { label: 'Productos', url: '/products' },
     { label: 'Como comprar', url: '/how-to-buy' },
     { label: 'Blog', url: '/blog' },
     { label: 'Nosotros', url: '/about-us' },
-    { label: 'Contacto', url: '/contact' },
   ];
 
   return (
@@ -25,6 +26,12 @@ const MenuMobile: FC<MenuMobileProps> = ({}) => {
           </Link>
         </>
       ))}
+      <button
+        className="block p-4 transform  hover:scale-125"
+        onClick={() => updateState(true)}
+      >
+        Contacto
+      </button>
     </div>
   );
 };

src/components/navBar/navBar.tsx

@@ -8,14 +8,17 @@ import MenuMobile from './MenuMobile';
 import { InputField } from '../inputs/InputField';
 import { ThemeModeButton } from '../ThemeMode';
 import { MainButton } from '../button/button';
+import { useFlagState } from '~/hooks/useFlagState';
+import Form from '../form/Form';
 
 interface NavBarProps {}
 
 const NavBar: FC<NavBarProps> = ({}) => {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpenMenu, setIsOpenMenu] = useState(false);
+  const [flagState, updateState] = useFlagState(false);
 
   const toggleNavbar = () => {
-    setIsOpen(!isOpen);
+    setIsOpenMenu(!isOpenMenu);
   };
 
   return (
@@ -27,8 +30,10 @@ const NavBar: FC<NavBarProps> = ({}) => {
             {/* Icono hamburguesa */}
             <div className="flex items-center gap-2">
               <MainButton onClick={toggleNavbar}>
-                <div className={isOpen ? 'h-14 w-14' : 'h-h-14 w-14'}>
-                  <Icon icon={isOpen ? 'HamburguerClose' : 'HamburguerOpen'} />
+                <div className={isOpenMenu ? 'h-14 w-14' : 'h-h-14 w-14'}>
+                  <Icon
+                    icon={isOpenMenu ? 'HamburguerClose' : 'HamburguerOpen'}
+                  />
                 </div>
               </MainButton>
             </div>
@@ -97,15 +102,16 @@ const NavBar: FC<NavBarProps> = ({}) => {
       </div>
       <div>
         {/* Menu */}
-        {isOpen && (
+        {isOpenMenu && (
           <div
             className="fixed top-[108px] md:top-[60px] left-0 w-screen xs:max-w-[303px] backdrop-blur-sm bg-white bg-opacity-70 shadow-sm z-50 flex justify-center items-center"
             onMouseLeave={toggleNavbar}
           >
-            <MenuMobile />
+            <MenuMobile updateState={updateState} />
           </div>
         )}
       </div>
+      {flagState && <Form updateState={updateState} />}
     </div>
   );
 };

src/hooks/useFlagState.ts

@@ -0,0 +1,11 @@
+import { useState } from 'react';
+
+export function useFlagState(initialValue: boolean) {
+  const [flagState, setFlagState] = useState<boolean>(initialValue); // Tipa isOpenContact como boolean.
+
+  const updateState = (newValue: boolean): void => {
+    setFlagState(newValue);
+  };
+
+  return [flagState, updateState] as const; // Tipa la tupla de retorno como constante.
+}

src/types/icons.d.ts

@@ -1 +1 @@
-export type IconTypes = | 'CardCredit' | 'CarShoping' | 'Cash' | 'Facebook' | 'HamburguerClose' | 'HamburguerOpen' | 'Heart' | 'icon' | 'Instagram' | 'Login' | 'MapLocation' | 'Moon' | 'quotationMarks' | 'SearchIcon' | 'Shield' | 'Sun' | 'Truck' | 'warranty' | 'Whatsapp' 
+export type IconTypes = | 'CardCredit' | 'CarShoping' | 'Cash' | 'Close' | 'Facebook' | 'HamburguerClose' | 'HamburguerOpen' | 'Heart' | 'icon' | 'Instagram' | 'Login' | 'MapLocation' | 'Moon' | 'quotationMarks' | 'SearchIcon' | 'Shield' | 'Sun' | 'Truck' | 'warranty' | 'Whatsapp'