diff --git a/package-lock.json b/package-lock.json index 814a041..aa58b5d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,8 +21,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" }, @@ -17751,6 +17753,21 @@ "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==", "dev": true }, + "node_modules/react-hook-form": { + "version": "7.46.1", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.46.1.tgz", + "integrity": "sha512-0GfI31LRTBd5tqbXMGXT1Rdsv3rnvy0FjEk8Gn9/4tp6+s77T7DPZuGEpBRXOauL+NhyGT5iaXzdIM2R6F/E+w==", + "engines": { + "node": ">=12.22.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-hook-form" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17 || ^18" + } + }, "node_modules/react-icons": { "version": "4.10.1", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.10.1.tgz", @@ -19531,6 +19548,15 @@ "webpack": ">=2" } }, + "node_modules/sweetalert2": { + "version": "11.7.28", + "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.7.28.tgz", + "integrity": "sha512-9895DVuYTDlV4Hx4IJablFKMdSqzwpy0PKycztbO4cXnOeVMmw55weOq4gcZAh3/tAyunCKjApFDrlSAcswwcA==", + "funding": { + "type": "individual", + "url": "https://github.com/sponsors/limonte" + } + }, "node_modules/synchronous-promise": { "version": "2.0.17", "resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.17.tgz", diff --git a/package.json b/package.json index 68263d5..530975f 100644 --- a/package.json +++ b/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" }, diff --git a/src/app/page.tsx b/src/app/page.tsx index cd7cc11..38bac6c 100644 --- a/src/app/page.tsx +++ b/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(); diff --git a/src/assets/icons/Close.tsx b/src/assets/icons/Close.tsx new file mode 100644 index 0000000..8b51291 --- /dev/null +++ b/src/assets/icons/Close.tsx @@ -0,0 +1,22 @@ +import React from 'react'; + +export default function Close() { + return ( + + + + + + ); +} diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx index f317701..d305876 100644 --- a/src/components/footer/Footer.tsx +++ b/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 = ({}) => { + const [flagState, updateState] = useFlagState(false); + return (
= ({}) => {
+
= ({}) => { height="240" />
+ {flagState &&
}
-

©Copyrigth 2023. Todos los derechos reservados - Desarrollado por: Work Team diff --git a/src/components/footer/Links.tsx b/src/components/footer/Links.tsx index 4e6a0bf..66897d0 100644 --- a/src/components/footer/Links.tsx +++ b/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 = () => { {link.name} - {index !== LinksRoutes.length - 1 && ( -

- )} +
))} diff --git a/src/components/form/Form.tsx b/src/components/form/Form.tsx new file mode 100644 index 0000000..1884a45 --- /dev/null +++ b/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 = ({ updateState }) => { + const { + register, + handleSubmit, + reset, + formState: { errors }, + } = useForm(); + + const handleFormSubmit: SubmitHandler = (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 ( + +
+

+ Contacto +

+

+ ¿Tienes preguntas o necesitas ayuda para tu compra? ¡Contáctanos! + Nuestro equipo está aquí para asistirte. +

+ + {errors.name && ( +

{errors.name.message}

+ )} + + + /^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 && ( +

{errors.phone.message}

+ )} + +