From 6fe04e7981da7273f58ee1e85409c929ec7e7b16 Mon Sep 17 00:00:00 2001
From: Amanda <almeidafonseca14@gmail.com>
Date: Mon, 16 Jan 2023 23:23:05 -0300
Subject: [PATCH] feat(fixo/footer): Adiciona menu fixo e responsividade do
 footer

---
 .../Main/Subject/Contato/RegistrationForm.tsx |  19 +--
 src/components/footer/Footer.tsx              |   2 +
 .../footer/footer-bottom/autores/autores.tsx  |   9 +-
 .../footer/footer-bottom/footer-bottom.tsx    |   7 +-
 .../footer/footer-bottom/pagamento/imgs.tsx   |   2 +-
 .../footer-top/Fale-conosco/FaleConosco.tsx   |  12 +-
 src/components/footer/footer.module.scss      | 123 ++++++++++++++++--
 .../footer/icon-fixed/assets/Seta.svg         |   3 +
 .../assets/whatsapp.svg}                      |   0
 .../footer/icon-fixed/icon-fixed.tsx          |  21 +++
 .../footer/icon-fixed/link/Link.tsx           |  18 +++
 .../footer/newsletter/Newsletter.tsx          |  44 ++++++-
 .../footer/newsletter/input/Input.tsx         |  19 ---
 .../footer/{footer-bottom => }/text/Text.tsx  |   5 +-
 src/schema/FormSchema.ts                      |  29 +++--
 src/schema/NewsletterSchema.ts                |   7 +
 16 files changed, 238 insertions(+), 82 deletions(-)
 create mode 100644 src/components/footer/icon-fixed/assets/Seta.svg
 rename src/components/footer/{footer-bottom/assets/whatsapp 1.svg => icon-fixed/assets/whatsapp.svg} (100%)
 create mode 100644 src/components/footer/icon-fixed/icon-fixed.tsx
 create mode 100644 src/components/footer/icon-fixed/link/Link.tsx
 delete mode 100644 src/components/footer/newsletter/input/Input.tsx
 rename src/components/footer/{footer-bottom => }/text/Text.tsx (64%)
 create mode 100644 src/schema/NewsletterSchema.ts

diff --git a/src/components/Main/Subject/Contato/RegistrationForm.tsx b/src/components/Main/Subject/Contato/RegistrationForm.tsx
index f024d39..dc9e4fc 100644
--- a/src/components/Main/Subject/Contato/RegistrationForm.tsx
+++ b/src/components/Main/Subject/Contato/RegistrationForm.tsx
@@ -2,7 +2,7 @@ import { useCallback, useState } from "react";
 import styles from "./form.module.scss";
 import stylesInput from "./input.module.scss";
 import stylesCheckbox from "./checkbox.module.scss";
-import FormSchema from "../../../../schema/FormSchema";
+import { FormSchema } from "../../../../schema/FormSchema";
 
 import { Formik, Form, Field, ErrorMessage } from "formik";
 
@@ -28,17 +28,6 @@ const initialValues = {
 
 const RegistrationForm = () => {
   const [isSubmit, setIsSubmit] = useState(false);
-  const handleFormSubmit = (values: FormikValues) => {
-    values.name = "";
-    values.email = "";
-    values.cpf = "";
-    values.data = "";
-    values.tel = "";
-    values.instagram = "";
-    values.acceptTerms = false;
-    setIsSubmit(!isSubmit);
-  };
-
   const handleTel = useCallback((e: React.FormEvent<HTMLInputElement>) => {
     let value = e.currentTarget.value;
     value = value.replace(/\D/g, "");
@@ -68,7 +57,11 @@ const RegistrationForm = () => {
   return (
     <div className={styles["page-main__form"]}>
       <Formik
-        onSubmit={handleFormSubmit}
+        onSubmit={(values: FormikValues, { resetForm }) => {
+          console.log(values);
+          setIsSubmit(!isSubmit);
+          resetForm({ values: initialValues });
+        }}
         initialValues={initialValues}
         validationSchema={FormSchema}
       >
diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
index 4241179..9b96686 100644
--- a/src/components/footer/Footer.tsx
+++ b/src/components/footer/Footer.tsx
@@ -3,6 +3,7 @@ import FooterBottom from "./footer-bottom/footer-bottom";
 import FooterTop from "./footer-top/footerTop";
 
 import styles from "./footer.module.scss";
+import IconFixed from "./icon-fixed/icon-fixed";
 import Newsletter from "./newsletter/Newsletter";
 
 const Footer = () => {
@@ -11,6 +12,7 @@ const Footer = () => {
       <Newsletter />
       <FooterTop />
       <FooterBottom />
+      <IconFixed />
     </footer>
   );
 };
diff --git a/src/components/footer/footer-bottom/autores/autores.tsx b/src/components/footer/footer-bottom/autores/autores.tsx
index 6675c14..bcf6cc6 100644
--- a/src/components/footer/footer-bottom/autores/autores.tsx
+++ b/src/components/footer/footer-bottom/autores/autores.tsx
@@ -2,16 +2,19 @@ import React from "react";
 
 import styles from "../../footer.module.scss";
 import Img from "../img-footer/img";
-import Text from "../text/Text";
+import Text from "../../text/Text";
 import Vtex from "../assets/Vtex.svg";
 import M3 from "../assets/M3.svg";
 
 const Autores = () => {
   return (
     <section className={styles["page-footer__footer-autores"]}>
-      <Text text="Powered by" />
+      <Text className={styles["page-footer__footer-text"]} text="Powered by" />
       <Img className={styles["autores-img"]} img={Vtex} text="vtex" />
-      <Text text="Developed by" />
+      <Text
+        className={styles["page-footer__footer-text"]}
+        text="Developed by"
+      />
       <Img className={styles["autores-img"]} img={M3} text="M3" />
     </section>
   );
diff --git a/src/components/footer/footer-bottom/footer-bottom.tsx b/src/components/footer/footer-bottom/footer-bottom.tsx
index 1ecd355..8462ce9 100644
--- a/src/components/footer/footer-bottom/footer-bottom.tsx
+++ b/src/components/footer/footer-bottom/footer-bottom.tsx
@@ -2,15 +2,16 @@ import React from "react";
 
 import styles from "../footer.module.scss";
 import Autores from "./autores/autores";
-import Text from "./text/Text";
+import Text from "../text/Text";
 import Imgs from "./pagamento/imgs";
 
 const FooterBottom = () => {
   return (
-    <div className={styles["page-footer__footer-bottom"]}>
+    <section className={styles["page-footer__footer-bottom"]}>
       <div className={styles["page-footer__footer-bottom-container"]}>
         <section className={styles["page-footer__container-footer-text"]}>
           <Text
+            className={styles["page-footer__footer-text"]}
             text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
         tempor"
           />
@@ -18,7 +19,7 @@ const FooterBottom = () => {
         <Imgs />
         <Autores />
       </div>
-    </div>
+    </section>
   );
 };
 
diff --git a/src/components/footer/footer-bottom/pagamento/imgs.tsx b/src/components/footer/footer-bottom/pagamento/imgs.tsx
index bb366e4..f00a9e3 100644
--- a/src/components/footer/footer-bottom/pagamento/imgs.tsx
+++ b/src/components/footer/footer-bottom/pagamento/imgs.tsx
@@ -25,7 +25,7 @@ const imgs = () => {
       <Img className={styles["img"]} img={Hiper} text="Cartão hiper" />
       <Img className={styles["img"]} img={Pagseguro} text="Pague Seguro" />
       <Img className={styles["img"]} img={Boleto} text="Pagamento boleto" />
-      <strong></strong>
+      <div></div>
       <Img className={styles["img-grande"]} img={vtex} text="Vtex" />
     </section>
   );
diff --git a/src/components/footer/footer-top/Fale-conosco/FaleConosco.tsx b/src/components/footer/footer-top/Fale-conosco/FaleConosco.tsx
index 5a46b83..0fc3156 100644
--- a/src/components/footer/footer-top/Fale-conosco/FaleConosco.tsx
+++ b/src/components/footer/footer-top/Fale-conosco/FaleConosco.tsx
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import Link from "../../../link/Link";
 
 import styles from "../../footer.module.scss";
+import Text from "../../text/Text";
 import ButtonFooterMobile from "../button/button";
 import Title from "../title/Title";
 
@@ -22,17 +23,12 @@ const FaleConosco = () => {
         />
       </div>
       <div className={isOpen ? styles["active"] : styles["container-link"]}>
-        <Link
-          className={styles["link-negrito"]}
-          link="/"
+        <Text
+          className={styles["text-negrito"]}
           text="Atendimento Ao Consumidor"
         />
         <Link className={styles["link"]} link="/" text="(11) 4159-9504" />
-        <Link
-          className={styles["link-negrito"]}
-          link="/"
-          text="Atendimento Online"
-        />
+        <Text className={styles["text-negrito"]} text="Atendimento Online" />
         <Link
           className={styles["link-underline"]}
           link="/"
diff --git a/src/components/footer/footer.module.scss b/src/components/footer/footer.module.scss
index 8d02474..90a6c5b 100644
--- a/src/components/footer/footer.module.scss
+++ b/src/components/footer/footer.module.scss
@@ -5,6 +5,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    position: relative;
 
     &__newsletter {
         display: flex;
@@ -35,6 +36,7 @@
         .input {
             width: 340px;
             height: 42px;
+            outline: 0;
             border: 1px solid $gray-1020;
             border-radius: 4px;
             font-weight: 400;
@@ -49,9 +51,26 @@
 
         }
 
+        &-form {
+            position: relative;
+
+        }
+
+        &-error {
+            display: flex;
+            position: absolute;
+            top: -13px;
+            right: 3px;
+            color: $red;
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 14px;
+        }
+
         .button {
             width: 126px;
             height: 42px;
+            cursor: pointer;
             background: $black;
             box-shadow: 0px 4px 4px rgba($black, 0.25);
             border-radius: 4px;
@@ -67,12 +86,14 @@
     &__top {
         padding: 50px 0;
         display: flex;
+        width: 84.4%;
         justify-content: space-between;
     }
 
     &__top-container {
         display: flex;
-        gap: 121px;
+        justify-content: space-between;
+        width: 65.5%;
     }
 
     &__container {
@@ -97,7 +118,7 @@
 
     .link,
     .link-underline,
-    .link-negrito {
+    .text-negrito {
         font-weight: 400;
         font-size: 12px;
         line-height: 14px;
@@ -109,7 +130,7 @@
         text-decoration-line: underline;
     }
 
-    .link-negrito {
+    .text-negrito {
         font-weight: 500;
     }
 
@@ -160,7 +181,7 @@
         gap: 12px;
         flex-wrap: wrap;
 
-        strong {
+        div {
             width: 1px;
             background: $gray-900;
             height: 24px;
@@ -200,6 +221,37 @@
         height: 16px;
     }
 
+    &__icon-fixed {
+        position: fixed;
+        z-index: 100;
+        right: 16px;
+        bottom: 10px;
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__button-whatsapp {
+        img {
+            width: 34px;
+        }
+    }
+
+    &__button-top {
+        width: 34px;
+        height: 34px;
+        background: $gray-900;
+        border: 0;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+
+        img {
+            width: 13px;
+        }
+    }
+
     @media screen and (min-width: 2500px) {
         &__newsletter {
             padding: 16px 0;
@@ -228,6 +280,10 @@
             width: 315px;
         }
 
+        &__top {
+            width: 92%;
+        }
+
         .title {
             font-size: 28px;
             line-height: 33px;
@@ -235,7 +291,7 @@
 
         .link,
         .link-underline,
-        .link-negrito {
+        .text-negrito {
             font-size: 24px;
             line-height: 28px;
         }
@@ -248,6 +304,51 @@
                 width: 67.9%;
             }
         }
+
+        &__footer-bottom {
+            padding: 24.5px 0;
+        }
+
+        &__footer-bottom-container {
+            width: 92%;
+        }
+
+        .img {
+            width: 70px;
+        }
+
+        .img-grande {
+            width: 106px;
+        }
+
+        &__footer-autores {
+            gap: 12px;
+        }
+
+        &__container-footer-text {
+            max-width: 467px;
+        }
+
+        &__footer-text {
+            font-size: 20px;
+            line-height: 23px;
+        }
+
+        .autores-img {
+            height: 30px;
+        }
+
+        &__button-whatsapp {
+            img {
+                width: 66px;
+                height: 66px;
+            }
+        }
+
+        &__button-top {
+            width: 66px;
+            height: 66px;
+        }
     }
 
     @media screen and (max-width: 1024px) {
@@ -271,6 +372,10 @@
                 flex-direction: column;
             }
 
+            &-form {
+                width: 100%;
+            }
+
             .input,
             .button {
                 width: 100%;
@@ -290,6 +395,7 @@
         &__top-container {
             flex-direction: column;
             gap: 12px;
+            width: 100%;
         }
 
         &__container {
@@ -332,12 +438,6 @@
             display: none;
         }
 
-        &__rede-sociais {
-            .link {
-                display: none;
-            }
-        }
-
         &__footer-bottom {
             padding: 16px;
             justify-content: flex-start;
@@ -362,7 +462,6 @@
         &__footer-autores {
             order: 3;
         }
-
     }
 
     @media screen and (max-width: 375px) {
diff --git a/src/components/footer/icon-fixed/assets/Seta.svg b/src/components/footer/icon-fixed/assets/Seta.svg
new file mode 100644
index 0000000..e158908
--- /dev/null
+++ b/src/components/footer/icon-fixed/assets/Seta.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="13" viewBox="0 0 25 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.7428 11.3959C23.741 11.6959 23.6177 11.9953 23.373 12.226L23.3728 12.2261C22.8668 12.7035 22.037 12.7035 21.5311 12.2261L21.5232 12.2345L21.5311 12.2261L12.3457 3.5599L12.0712 3.30091L11.7967 3.5599L2.61178 12.2258C2.10549 12.7033 1.27571 12.7032 0.769767 12.2259L0.769708 12.2258C0.525704 11.9957 0.402467 11.6972 0.400037 11.398C0.401876 11.0981 0.525111 10.7986 0.769782 10.5678L0.769785 10.5678L11.1506 0.773762C11.4013 0.537307 11.7333 0.415846 12.0712 0.415846C12.4093 0.415846 12.7415 0.537566 12.9922 0.773969L23.3728 10.568L23.3729 10.5681C23.6171 10.7983 23.7403 11.0968 23.7428 11.3959Z" fill="white" stroke="white" stroke-width="0.8"/>
+</svg>
diff --git a/src/components/footer/footer-bottom/assets/whatsapp 1.svg b/src/components/footer/icon-fixed/assets/whatsapp.svg
similarity index 100%
rename from src/components/footer/footer-bottom/assets/whatsapp 1.svg
rename to src/components/footer/icon-fixed/assets/whatsapp.svg
diff --git a/src/components/footer/icon-fixed/icon-fixed.tsx b/src/components/footer/icon-fixed/icon-fixed.tsx
new file mode 100644
index 0000000..a911daa
--- /dev/null
+++ b/src/components/footer/icon-fixed/icon-fixed.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import LinkTop from "./link/Link";
+import Whatsapp from "./assets/whatsapp.svg";
+import Seta from "./assets/Seta.svg";
+
+import styles from "../../footer/footer.module.scss";
+
+const IconFixed = () => {
+  return (
+    <section className={styles["page-footer__icon-fixed"]}>
+      <LinkTop
+        href="https://api.whatsapp.com/send?phone=5511999999999"
+        className={styles["page-footer__button-whatsapp"]}
+        img={Whatsapp}
+      />
+      <LinkTop className={styles["page-footer__button-top"]} img={Seta} />
+    </section>
+  );
+};
+
+export default IconFixed;
diff --git a/src/components/footer/icon-fixed/link/Link.tsx b/src/components/footer/icon-fixed/link/Link.tsx
new file mode 100644
index 0000000..bed2c96
--- /dev/null
+++ b/src/components/footer/icon-fixed/link/Link.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+interface LinkProps {
+  img: string;
+  className: string;
+  href?: string;
+  onClick?: React.MouseEventHandler;
+}
+
+const LinkTop = (props: LinkProps) => {
+  return (
+    <a onClick={props.onClick} href={props.href} className={props.className}>
+      <img src={props.img} alt="" />
+    </a>
+  );
+};
+
+export default LinkTop;
diff --git a/src/components/footer/newsletter/Newsletter.tsx b/src/components/footer/newsletter/Newsletter.tsx
index 03babf6..282578a 100644
--- a/src/components/footer/newsletter/Newsletter.tsx
+++ b/src/components/footer/newsletter/Newsletter.tsx
@@ -1,20 +1,50 @@
-import React from "react";
+import React, { useState } from "react";
 import Button from "../../button/Button";
-
+import { Formik, Form, Field, ErrorMessage } from "formik";
 import styles from "../footer.module.scss";
-import Input from "./input/Input";
+import { NewsletterSchema } from "../../../schema/NewsletterSchema";
+
+interface FormikValues {
+  email: string;
+}
+
+const initialValues = {
+  email: "",
+};
 
 const Newsletter = () => {
+  const [isSubmit, setIsSubmit] = useState(false);
   return (
     <section className={styles["page-footer__newsletter"]}>
       <div className={styles["page-footer__newsletter-container"]}>
         <h3 className={styles["page-footer__newsletter-title"]}>
           ASSINE NOSSA NEWSLETTER
         </h3>
-        <form className={styles["page-footer__newsletter-section"]}>
-          <Input placeholder="E-mail" />
-          <Button text="ENVIAR" />
-        </form>
+        <Formik
+          onSubmit={(values: FormikValues, { resetForm }) => {
+            console.log(values);
+            setIsSubmit(!isSubmit);
+            resetForm({ values: initialValues });
+          }}
+          initialValues={initialValues}
+          validationSchema={NewsletterSchema}
+        >
+          <Form className={styles["page-footer__newsletter-section"]}>
+            <div className={styles["page-footer__newsletter-form"]}>
+              <Field
+                name="email"
+                className={styles["input"]}
+                placeholder="E-mail"
+              />
+              <ErrorMessage
+                component="span"
+                name="email"
+                className={styles["page-footer__newsletter-error"]}
+              />
+            </div>
+            <Button text="ENVIAR" />
+          </Form>
+        </Formik>
       </div>
     </section>
   );
diff --git a/src/components/footer/newsletter/input/Input.tsx b/src/components/footer/newsletter/input/Input.tsx
deleted file mode 100644
index eeacbab..0000000
--- a/src/components/footer/newsletter/input/Input.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-
-import styles from "../../footer.module.scss";
-
-interface InputProps {
-  placeholder: string;
-}
-
-const Input = (props: InputProps) => {
-  return (
-    <input
-      placeholder={props.placeholder}
-      type="text"
-      className={styles["input"]}
-    />
-  );
-};
-
-export default Input;
diff --git a/src/components/footer/footer-bottom/text/Text.tsx b/src/components/footer/text/Text.tsx
similarity index 64%
rename from src/components/footer/footer-bottom/text/Text.tsx
rename to src/components/footer/text/Text.tsx
index ebd473e..606914d 100644
--- a/src/components/footer/footer-bottom/text/Text.tsx
+++ b/src/components/footer/text/Text.tsx
@@ -3,12 +3,11 @@ import styles from "../../footer.module.scss";
 
 interface TextProps {
   text: string;
+  className: string;
 }
 
 const Text = (props: TextProps) => {
-  return (
-    <strong className={styles["page-footer__footer-text"]}>{props.text}</strong>
-  );
+  return <p className={props.className}>{props.text}</p>;
 };
 
 export default Text;
diff --git a/src/schema/FormSchema.ts b/src/schema/FormSchema.ts
index a40ed58..9e0781b 100644
--- a/src/schema/FormSchema.ts
+++ b/src/schema/FormSchema.ts
@@ -1,15 +1,18 @@
 import * as Yup from "yup";
 
-export default Yup.object().shape({
-  name: Yup.string()
-    .min(3, "mínimo 3 caracteres")
-    .required("*Campo Obrigatório"),
-  email: Yup.string().required("*Campo Obrigatório").email("Email inválido"),
-  cpf: Yup.string().length(14).required("*Campo Obrigatório"),
-  data: Yup.date()
-    .required("*Campo Obrigatório")
-    .max(new Date(), "Não é possível incluir uma data futura"),
-  tel: Yup.string().length(15).required("*Campo Obrigatório"),
-  instagram: Yup.string(),
-  acceptTerms: Yup.bool().oneOf([true], "*"),
-});
+const FormSchema = () =>
+  Yup.object().shape({
+    name: Yup.string()
+      .min(3, "mínimo 3 caracteres")
+      .required("*Campo Obrigatório"),
+    email: Yup.string().required("*Campo Obrigatório").email("Email inválido"),
+    cpf: Yup.string().length(14).required("*Campo Obrigatório"),
+    data: Yup.date()
+      .required("*Campo Obrigatório")
+      .max(new Date(), "Não é possível incluir uma data futura"),
+    tel: Yup.string().length(15).required("*Campo Obrigatório"),
+    instagram: Yup.string(),
+    acceptTerms: Yup.bool().oneOf([true], "*"),
+  });
+
+export { FormSchema };
diff --git a/src/schema/NewsletterSchema.ts b/src/schema/NewsletterSchema.ts
new file mode 100644
index 0000000..88ac26e
--- /dev/null
+++ b/src/schema/NewsletterSchema.ts
@@ -0,0 +1,7 @@
+import * as Yup from "yup";
+
+const NewsletterSchema = () =>
+  Yup.object().shape({
+    email: Yup.string().required("*Campo Obrigatório").email("Email inválido"),
+  });
+export { NewsletterSchema };