Merge pull request 'develop' (#11) from develop into main

Reviewed-on: #11

react-project/src/components/FixedIcons/FixedIcons.tsx

@@ -1,9 +1,20 @@
+import { useState, useEffect } from "react";
+
 import icons from "./assets/modules/FixedIcons.module.scss";
 
 import whats from "./assets/svgs/whatsapp.svg";
 import arrow from "./assets/svgs/arrow.svg";
 
 const FixedIcons = () => {
+  const [scrollTop, setScrollTop] = useState(0);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrollTop(window.scrollY);
+    };
+    window.addEventListener("scroll", handleScroll);
+  });
+
   return (
     <div className={icons["icons"]}>
       <a
@@ -15,14 +26,16 @@ const FixedIcons = () => {
           <img src={whats} alt="Ícone WhatsApp" />
         </figure>
       </a>
-      <div
-        onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
-        className={icons["icons__arrow"]}
-      >
-        <figure>
-          <img src={arrow} alt="Ícone subir ao topo" />
-        </figure>
-      </div>
+      {scrollTop > 0 ? (
+        <div
+          onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
+          className={icons["icons__arrow"]}
+        >
+          <figure>
+            <img src={arrow} alt="Ícone subir ao topo" />
+          </figure>
+        </div>
+      ) : undefined}
     </div>
   );
 };

react-project/src/components/FixedIcons/assets/modules/FixedIcons.module.scss

@@ -2,6 +2,7 @@
   position: fixed;
   bottom: 200px;
   right: 16px;
+  z-index: 1;
 
   @media screen and (min-width: 2500px) {
     bottom: 215px;

react-project/src/components/Footer/FooterBottom.tsx

@@ -3,14 +3,14 @@ import footer from "./assets/modules/FooterBottom.module.scss";
 import { Payments } from "./Payments";
 import { Developed } from "./Developed";
 
-import master from "./assets/svgs/master.svg";
-import visa from "./assets/svgs/visa.svg";
-import diners from "./assets/svgs/diners.svg";
-import elo from "./assets/svgs/elo.svg";
-import hiper from "./assets/svgs/hiper.svg";
-import paypal from "./assets/svgs/paypal.svg";
-import boleto from "./assets/svgs/boleto.svg";
-import vtexPci from "./assets/svgs/vtex-pci.svg";
+import master from "./assets/svgs/master.png";
+import visa from "./assets/svgs/visa.png";
+import diners from "./assets/svgs/diners.png";
+import elo from "./assets/svgs/elo.png";
+import hiper from "./assets/svgs/hiper.png";
+import paypal from "./assets/svgs/paypal.png";
+import boleto from "./assets/svgs/boleto.png";
+import vtexPci from "./assets/svgs/vtex-pci.png";
 
 const FooterBottom = () => {
   return (

react-project/src/components/Footer/Newsletter.tsx

@@ -1,7 +1,7 @@
-import newsletter from "./assets/modules/Newsletter.module.scss";
-
 import { Formik, Form, Field, ErrorMessage } from "formik";
+import { useState } from "react";
 
+import newsletter from "./assets/modules/Newsletter.module.scss";
 import NewsletterSchema from "./assets/schemas/NewsletterSchema";
 
 interface IEmailType {
@@ -9,30 +9,44 @@ interface IEmailType {
 }
 
 const Newsletter = () => {
+  const [feedback, setFeedback] = useState(false);
+  const Feedback = () => {
+    setFeedback(!feedback);
+  };
+
   return (
     <div className={newsletter["newsletter"]}>
       <div className={newsletter["newsletter__wrapper"]}>
         <h3>ASSINE NOSSA NEWSLETTER</h3>
         <Formik
           onSubmit={(values: IEmailType, actions) => {
+            Feedback();
             actions.resetForm();
-            const sent = document.querySelector(
-              "#emailsent"
-            ) as HTMLSpanElement;
-            sent.innerHTML = "Email cadastrado com sucesso!";
           }}
           initialValues={{ email: "" }}
           validationSchema={NewsletterSchema}
         >
           <Form>
-            <Field placeholder="E-mail" id="email" name="email" />
+            <Field
+              placeholder="E-mail"
+              id="email"
+              name="email"
+              onBlur={() => {
+                setFeedback(false);
+              }}
+            />
             <ErrorMessage
               component="span"
               name="email"
               className={newsletter["invalid"]}
             />
             <button type="submit">ENVIAR</button>
-            <span id="emailsent" className={newsletter["success"]}></span>
+
+            {feedback ? (
+              <span className={newsletter["success"]}>
+                Email cadastrado com sucesso!
+              </span>
+            ) : undefined}
           </Form>
         </Formik>
       </div>

react-project/src/components/Footer/SitemapAccordion.tsx

@@ -4,6 +4,7 @@ import {
   AccordionHeader,
   AccordionItem,
 } from "react-headless-accordion";
+import { useState } from "react";
 import { Link } from "./Link";
 
 import links from "./assets/modules/SitemapAccordion.module.scss";
@@ -11,12 +12,26 @@ import links from "./assets/modules/SitemapAccordion.module.scss";
 import more from "./assets/svgs/more.svg";
 
 const SitemapAccordion = () => {
+  const [institucional, setInstitucional] = useState(false);
+  const [duvidas, setDuvidas] = useState(false);
+  const [faleConosco, setFaleConosco] = useState(false);
+
+  const changeIcon1 = () => {
+    setInstitucional(!institucional);
+  };
+  const changeIcon2 = () => {
+    setDuvidas(!duvidas);
+  };
+  const changeIcon3 = () => {
+    setFaleConosco(!faleConosco);
+  };
+
   return (
     <Accordion className={links["accordion"]} alwaysOpen={true}>
       <AccordionItem>
-        <AccordionHeader>
+        <AccordionHeader onClick={changeIcon1}>
           <h4>Institucional</h4>
-          <img src={more} alt="Icone de +" />
+          {institucional ? <span>-</span> : <img src={more} alt="Icone de +" />}
         </AccordionHeader>
 
         <AccordionBody>
@@ -30,9 +45,9 @@ const SitemapAccordion = () => {
       </AccordionItem>
 
       <AccordionItem>
-        <AccordionHeader>
+        <AccordionHeader onClick={changeIcon2}>
           <h4>Dúvidas</h4>
-          <img src={more} alt="Icone de +" />
+          {duvidas ? <span>-</span> : <img src={more} alt="Icone de +" />}
         </AccordionHeader>
 
         <AccordionBody>
@@ -46,9 +61,9 @@ const SitemapAccordion = () => {
       </AccordionItem>
 
       <AccordionItem>
-        <AccordionHeader>
+        <AccordionHeader onClick={changeIcon3}>
           <h4>Fale Conosco</h4>
-          <img src={more} alt="Icone de +" />
+          {faleConosco ? <span>-</span> : <img src={more} alt="Icone de +" />}
         </AccordionHeader>
 
         <AccordionBody>

react-project/src/components/Footer/assets/modules/SitemapAccordion.module.scss

@@ -20,6 +20,12 @@
       line-height: 16px;
       color: var(--black-200);
     }
+
+    span {
+      font-size: 21px;
+      font-weight: bold;
+      color: var(--black-200);
+    }
   }
 
   ul {

react-project/src/components/Footer/assets/svgs/divisor.svg

@@ -1,3 +0,0 @@
-<svg width="2" height="24" viewBox="0 0 2 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<line x1="0.908936" y1="2.18557e-08" x2="0.908934" y2="24" stroke="#C4C4C4"/>
-</svg>

react-project/src/components/Footer/assets/svgs/vtex-pci.svg

@@ -1,9 +0,0 @@
-<svg width="56" height="34" viewBox="0 0 56 34" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<rect x="0.408936" width="54.6061" height="34" fill="url(#pattern0)"/>
-<defs>
-<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
-<use xlink:href="#image0_6214_933" transform="translate(0 -0.00590909) scale(0.005 0.0080303)"/>
-</pattern>
-<image id="image0_6214_933" width="200" height="126" xlink:href="data:image/png;base64,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"/>
-</defs>
-</svg>

react-project/src/components/Header/assets/modules/Hamburguer.module.scss

@@ -11,7 +11,7 @@
 .content {
   position: absolute;
   background-color: var(--white);
-  width: 97.4609%;
+  width: 96.4845%;
   height: 585px;
 
   @media screen and (max-width: 599px) {
@@ -69,4 +69,5 @@
   bottom: 0;
   left: 0;
   background: rgba(69, 69, 69, 0.7);
+  z-index: 2;
 }

react-project/src/components/MainInstitucional/Contato.tsx

@@ -1,5 +1,6 @@
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import MaskedInput from "react-text-mask";
+import { useState } from "react";
 
 import FormSchema from "./assets/schemas/FormSchema";
 
@@ -23,10 +24,20 @@ const initialValues = {
   telefone: "",
   instagram: "",
   terms: false,
-  /*sent: false,*/
 };
 
-const dateMask = [/\d/, /\d/, ".", /\d/, /\d/, ".", /\d/, /\d/, /\d/, /\d/];
+const dateMask = [
+  /[0-3]/,
+  /\d/,
+  ".",
+  /[0-1]/,
+  /\d/,
+  ".",
+  /[1-2]/,
+  /\d/,
+  /\d/,
+  /\d/,
+];
 const cpfMask = [
   /\d/,
   /\d/,
@@ -62,16 +73,22 @@ const phoneNumberMask = [
 ];
 
 const Contato = () => {
+  const [feedback, setFeedback] = useState(false);
+  const Feedback = () => {
+    setFeedback(true);
+    setTimeout(() => {
+      setFeedback(false);
+    }, 14000);
+  };
+
   return (
     <div className={contato["forms"]}>
       <h2>Preencha o formulário</h2>
 
       <Formik
         onSubmit={(values: IFormikValues, actions) => {
-          console.log(values);
+          Feedback();
           actions.resetForm();
-          const sent = document.querySelector("#sent") as HTMLSpanElement;
-          sent.innerHTML = "*Formulário enviado com sucesso!";
         }}
         initialValues={initialValues}
         validationSchema={FormSchema}
@@ -183,7 +200,12 @@ const Contato = () => {
             </div>
 
             <button type="submit">CADASTRE-SE</button>
-            <span id="sent" className={contato["forms__success"]}></span>
+
+            {feedback ? (
+              <span className={contato["forms__success"]}>
+                *Formulário enviado com sucesso!
+              </span>
+            ) : undefined}
           </Form>
         )}
       </Formik>

react-project/src/components/MainInstitucional/assets/modules/Breadcrumb.module.scss

@@ -17,7 +17,7 @@
 
     .home {
       @media screen and (min-width: 2500px) {
-        width: 31.25px;
+        width: 31.22px;
         height: 31.25px;
       }
     }

react-project/src/components/MainInstitucional/assets/modules/Contato.module.scss

@@ -50,6 +50,7 @@
       padding: 15px 20px;
 
       @media screen and (min-width: 2500px) {
+        height: 63px;
         font-size: 28px;
         line-height: 33px;
       }
@@ -110,6 +111,7 @@
           width: 36.4px;
           height: 35.15px;
           right: -50px;
+          top: 1px;
         }
       }
     }