Merge branch 'feature/institucional-main' into development

src/components/CustomInput/CustomInput.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-import { useField } from "formik";
-import InputMask from "react-input-mask";
-
-interface InputProps {
-  mask?: string;
-  id: string;
-  name: string;
-  placeholder: string;
-}
-
-const CustomInput = (props: InputProps) => {
-  const { mask } = props;
-  const [field] = useField(props);
-
-  return (
-    <>
-      <InputMask mask={mask!} {...field} />
-    </>
-  );
-};
-
-export { CustomInput };

src/components/MainLayout/About/About.module.scss

@@ -1,20 +1,24 @@
 .section-container {
   margin-left: 30px;
-  padding: 10px 0;
+  padding: 10px 0 26.56px;
+
+  @media screen and (width >= 2500px) {
+    padding-bottom: 40px;
+  }
 
   @media screen and (width <= 1024px) {
-    padding: 0;
+    padding: 0 0 26px;
     margin: 0;
   }
 
   .section-title {
+    margin: 0 0 12px;
     font-family: "Roboto";
     font-style: normal;
     font-weight: 700;
     font-size: 24px;
     line-height: 28px;
-    color: #292929; // #000000 ??
-    margin: 0 0 12px;
+    color: #292929;
 
     @media screen and (width >= 2500px) {
       font-size: 48px;
@@ -30,16 +34,17 @@
     height: 223px;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    gap: 21.5px;
+    overflow: auto;
 
     @media screen and (width >= 2500px) {
       height: 376px;
+      gap: 23px;
     }
 
     @media screen and (width <= 1024px) {
       height: 142px;
       gap: 20px;
-      overflow: scroll;
     }
 
     @media screen and (width <= 480px) {
@@ -47,14 +52,14 @@
     }
 
     .section-content {
+      margin: 0;
+      padding-right: 2px;
       font-family: "Roboto";
       font-style: normal;
       font-weight: 400;
       font-size: 13px;
       line-height: 15px;
       color: #7d7d7d;
-      margin: 0;
-      padding-right: 2px;
 
       @media screen and (width >= 2500px) {
         font-size: 26px;
@@ -62,10 +67,10 @@
       }
 
       @media screen and (width <= 1024px) {
+        padding-right: 1px;
         font-size: 12px;
         line-height: 18px;
         text-align: justify;
-        padding-right: 1px;
       }
     }
   }

src/components/MainLayout/Breadcrumbs/Breadcrumbs.module.scss

@@ -1,8 +1,8 @@
 .breadcrumbs {
-  display: flex;
-  gap: 9.72px;
-  align-items: center;
   margin-bottom: 80px;
+  display: flex;
+  align-items: center;
+  gap: 9.72px;
 
   @media screen and (width >= 2500px) {
     gap: 12px;
@@ -35,15 +35,15 @@
   }
 
   .current-location {
+    margin: 0;
     font-family: "Roboto";
     font-style: normal;
     font-weight: 400;
     font-size: 12px;
-    text-transform: uppercase;
     color: #c4c4c4;
-    margin: 0;
-    // padding: 0;
-
+    text-transform: uppercase;
+    text-decoration: none;
+    
     @media screen and (width >= 2500px) {
       font-size: 24px;
     }

src/components/MainLayout/Breadcrumbs/Breadcrumbs.tsx

@@ -1,20 +1,23 @@
 import React from "react";
-
-import styles from "./Breadcrumbs.module.scss";
+import { Link } from "react-router-dom";
 
 import homeIcon from "./assets/home-icon.svg";
 import arrowIcon from "./assets/arrow-icon.svg";
 
+import styles from "./Breadcrumbs.module.scss";
+
 const Breadcrumbs = () => {
   return (
     <div className={styles["breadcrumbs"]}>
-      <div className={styles["home-icon"]}>
+      <Link to="/institucionais/contato" className={styles["home-icon"]}>
         <img src={homeIcon} alt="Ícone da Home" />
-      </div>
+      </Link>
       <div className={styles["arrow-icon"]}>
         <img src={arrowIcon} alt="Ícone de seta para a direita" />
       </div>
-      <p className={styles["current-location"]}>Institucional</p>
+      <Link to="/institucionais/sobre" className={styles["current-location"]}>
+        Institucional
+      </Link>
     </div>
   );
 };

src/components/MainLayout/Contact/Contact.module.scss

@@ -1,20 +1,20 @@
 .section-container {
   margin-left: 30px;
-  padding: 10px 0;
+  padding: 10px 0 0;
 
   @media screen and (width <= 1024px) {
-    padding: 0;
     margin: 0;
+    padding: 0;
   }
 
   .section-title {
+    margin: 0 0 12px;
     font-family: "Roboto";
     font-style: normal;
     font-weight: 700;
     font-size: 24px;
     line-height: 28px;
-    color: #000000; // #292929 ??
-    margin: 0 0 12px;
+    color: #000000;
 
     @media screen and (width >= 2500px) {
       font-size: 48px;

src/components/MainLayout/Contact/Contact.tsx

@@ -1,7 +1,6 @@
 import React from "react";
-import { ContactForm } from "../ContactForm/ContactForm";
-// import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik";
-// import FormSchema from "../../schema/FormSchema";
+
+import { ContactForm } from "./ContactForm/ContactForm";
 
 import styles from "./Contact.module.scss";
 
@@ -9,7 +8,6 @@ const Contact = () => {
   return (
     <section className={styles["section-container"]}>
       <h2 className={styles["section-title"]}>Preencha o formulário </h2>
-      {/* <div className={styles["section-description"]}></div> */}
       <ContactForm />
     </section>
   );

src/components/MainLayout/Contact/ContactForm/ContactForm.module.scss

@@ -2,14 +2,7 @@
   width: 100%;
   padding-bottom: 26.56px;
   position: relative;
-  // max-width: 720px;
-  // min-height: 100vh;
-  // margin: 0 auto;
-  // padding: 0 12px;
 
-  // display: flex;
-  // justify-content: center;
-  // align-items: center;
   @media screen and (width >= 2500px) {
     padding-bottom: 40px;
   }
@@ -19,19 +12,19 @@
   }
 
   .form-col {
+    margin-bottom: 12px;
     position: relative;
     display: flex;
     flex-direction: column;
-    margin-bottom: 12px;
 
     label {
+      padding: 0 15px 12px;
       font-family: "Roboto";
       font-style: normal;
       font-weight: 400;
       font-size: 14px;
       line-height: 16px;
       color: #100d0e;
-      padding: 0 15px 12px;
 
       @media screen and (width >= 2500px) {
         font-size: 28px;
@@ -40,17 +33,18 @@
     }
 
     input {
-      background: #ffffff;
+      padding: 15px 20px;
       border: 1px solid #100d0e;
       border-radius: 25px;
-      padding: 15px 20px;
+      outline: 0;
+      background: #ffffff;
+
       font-family: "Roboto";
       font-style: normal;
       font-weight: 400;
       font-size: 14px;
       line-height: 16px;
-      color: #000000; //#b9b7b7? #100d0e?
-      outline: 0;
+      color: #000000;
 
       @media screen and (width >= 2500px) {
         font-size: 28px;
@@ -64,39 +58,41 @@
   }
 
   .invalid-form-feedback {
+    position: absolute;
+    top: 15px;
+    right: 20px;
+
     font-family: "Roboto";
     font-style: normal;
     font-weight: 400;
     font-size: 12px;
     line-height: 14px;
     color: #ff0000;
-    position: absolute;
-    top: 15px;
-    right: 20px;
 
     @media screen and (width >= 2500px) {
+      top: 17px;
       font-size: 24px;
       line-height: 28px;
-      top: 17px;
     }
   }
 
   .terms-col {
     margin: 1.58px 0 12.6px;
-    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
     font-family: "Roboto";
     font-style: normal;
     font-weight: 400;
     font-size: 14px;
     line-height: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    text-align: center;
 
     @media screen and (width >= 2500px) {
+      margin: 0 0 12.85px;
       font-size: 28px;
       line-height: 33px;
-      margin: 0 0 12.85px;
     }
 
     span {
@@ -108,24 +104,11 @@
       text-decoration: underline;
     }
 
-    // .custom-checkbox {
-    //   border: 1px solid #000000;
-    //   border-radius: 3px;
-    //   width: 34.4px;
-    //   height: 33.15px;
-    //   margin: 0 0 0 4.28px;
-
-    //   // display: inline-block;
-    //   // position: absolute;
-    //   // bottom: 2.2px;
-    // }
-
     input {
-      // talvez tenha que substituir o checkbox original - não tá pegando as bordas direito e o alinhamento está errado, tem que ser no underline. considerar as bordas na medida do input original ou do custom?
+      margin: 0 0 0 4.28px;
       width: 18.64px;
       height: 18px;
-      margin: 0 0 0 4.28px;
-      // opacity: 0;
+      border-radius: 3px;
 
       @media screen and (width >= 2500px) {
         width: 36.4px;
@@ -135,44 +118,47 @@
   }
 
   .submit-button {
-    background: #000000;
+    width: 100%;
+    padding: 17px 0;
+    border: 0;
     border-radius: 25px;
+    outline: 0;
+    background: #000000;
+
     font-family: "Roboto";
     font-style: normal;
     font-weight: 400;
     font-size: 16px;
     line-height: 19px;
-    width: 100%;
-    padding: 17px 0;
     letter-spacing: 0.05em;
     color: #ffffff;
     text-transform: uppercase;
-    border: 0;
-    outline: 0;
+
     cursor: pointer;
     transition: all 0.2s ease-in-out;
 
+    &:hover {
+      filter: brightness(0.5);
+    }
+
     @media screen and (width >= 2500px) {
       font-size: 32px;
       line-height: 38px;
     }
-
-    &:hover {
-      background: #292929;
-    }
   }
 
   .success-wrapper {
     .success-message {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+
       font-family: "Roboto";
       font-style: normal;
       font-weight: 400;
       font-size: 12px;
       line-height: 14px;
       color: #008000;
-      position: absolute;
-      bottom: 0;
-      left: 0;
 
       @media screen and (width >= 2500px) {
         font-size: 24px;

src/components/MainLayout/Contact/ContactForm/ContactForm.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik";
-import FormSchema from "../../schema/FormSchema";
 
+import FormSchema from "../../../../schema/FormSchema";
 import { CustomInput } from "../CustomInput/CustomInput";
 
 import styles from "./ContactForm.module.scss";
 
-interface FormValues {
+export interface FormValues {
   name: string;
   email: string;
   cpf: string;
@@ -36,8 +36,10 @@ const ContactForm = () => {
     console.log(values);
     clientsList.push(values);
     console.log(clientsList);
-    resetForm();
-    setTimeout(() => setSubmitting(false), 3000);
+    setTimeout(() => {
+      setSubmitting(false);
+      resetForm();
+    }, 2000);
   };
 
   return (
@@ -47,9 +49,7 @@ const ContactForm = () => {
         initialValues={initialValues}
         validationSchema={FormSchema}
       >
-        {({
-          isSubmitting,
-        }) => (
+        {({ isSubmitting }) => (
           <Form>
             <div className={styles["form-col"]}>
               <label htmlFor="name">Nome</label>
@@ -66,11 +66,7 @@ const ContactForm = () => {
             </div>
             <div className={styles["form-col"]}>
               <label htmlFor="email">E-mail</label>
-              <CustomInput
-                id="email"
-                name="email"
-                placeholder="Seu e-mail"
-              />
+              <CustomInput id="email" name="email" placeholder="Seu e-mail" />
               <ErrorMessage
                 component="span"
                 name="email"
@@ -136,15 +132,7 @@ const ContactForm = () => {
             <div className={styles["terms-col"]}>
               <span>* </span>
               <label htmlFor="acceptedTerms">Declaro que li e aceito</label>
-              {/* <div className={styles["custom-checkbox"]}></div> */}
-              <Field
-                type="checkbox"
-                id="acceptedTerms"
-                name="acceptedTerms"
-                // className={
-                //   errors.acceptedTerms && touched.acceptedTerms && styles["invalid"]
-                // }
-              />
+              <Field type="checkbox" id="acceptedTerms" name="acceptedTerms" />
             </div>
 
             <button className={styles["submit-button"]} type="submit">

src/components/MainLayout/Contact/CustomInput/CustomInput.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { FieldHookConfig, useField } from "formik";
+import InputMask from "react-input-mask";
+
+interface InputProps {
+  mask?: string;
+  id: string;
+  name: string;
+  placeholder: string;
+}
+
+const CustomInput = (props: InputProps & (string | FieldHookConfig<any>)) => {
+  const { mask, id, placeholder } = props;
+  const [field, meta] = useField(props);
+
+  return (
+    <>
+      <InputMask mask={mask!} id={id} placeholder={placeholder} {...field} />
+    </>
+  );
+};
+
+export { CustomInput };

src/components/MainLayout/ExampleSection/ExampleSection.module.scss

@@ -0,0 +1,73 @@
+.section-container {
+  margin-left: 30px;
+  padding: 10px 0;
+  padding: 10px 0 26.56px;
+
+  @media screen and (width <= 1024px) {
+    padding: 0;
+    margin: 0;
+  }
+
+  .section-title {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 28px;
+    color: #292929; // #000000 ??
+    margin: 0 0 12px;
+
+    @media screen and (width >= 2500px) {
+      font-size: 48px;
+      line-height: 56px;
+    }
+
+    @media screen and (width <= 1024px) {
+      text-align: center;
+    }
+  }
+
+  .section-description {
+    height: 223px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    @media screen and (width >= 2500px) {
+      height: 376px;
+    }
+
+    @media screen and (width <= 1024px) {
+      height: 142px;
+      gap: 20px;
+      overflow: scroll;
+    }
+
+    @media screen and (width <= 480px) {
+      height: 344px;
+    }
+
+    .section-content {
+      font-family: "Roboto";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 15px;
+      color: #7d7d7d;
+      margin: 0;
+      padding-right: 2px;
+
+      @media screen and (width >= 2500px) {
+        font-size: 26px;
+        line-height: 30px;
+      }
+
+      @media screen and (width <= 1024px) {
+        font-size: 12px;
+        line-height: 18px;
+        text-align: justify;
+        padding-right: 1px;
+      }
+    }
+  }
+}

src/components/MainLayout/ExampleSection/ExampleSection.tsx

@@ -0,0 +1,62 @@
+import React, { useState, useContext, useEffect } from "react";
+import { LocationContext } from "../../../contexts/LocationContext";
+
+import styles from "./ExampleSection.module.scss";
+
+const ExampleSection = () => {
+  const [title, setTitle] = useState("");
+  const { path } = useContext(LocationContext);
+
+  const updateTitle = () => {
+    if (path === "/institucionais/forma-de-pagamento") {
+      setTitle("Forma de Pagamento");
+    } else if (path === "/institucionais/entrega") {
+      setTitle("Entrega");
+    } else if (path === "/institucionais/troca-e-devolucao") {
+      setTitle("Troca e Devolução");
+    } else if (path === "/institucionais/seguranca-e-privacidade") {
+      setTitle("Segurança e Privacidade");
+    }
+  };
+
+  useEffect(() => {
+    updateTitle();
+  }, [path]);
+
+  return (
+    <section className={styles["section-container"]}>
+      <h2 className={styles["section-title"]}>{title}</h2>
+      <div className={styles["section-description"]}>
+        <p className={styles["section-content"]}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+        <p className={styles["section-content"]}>
+          Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+          accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
+          ab illo inventore veritatis et quasi architecto beatae vitae dicta
+          sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+          aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
+          qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
+          dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
+          quia non numquam eius modi tempora incidunt ut labore et dolore magnam
+          aliquam quaerat voluptatem.
+        </p>
+        <p className={styles["section-content"]}>
+          Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
+          suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
+          autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
+          nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
+          voluptas nulla pariatur?
+        </p>
+      </div>
+    </section>
+  );
+};
+
+export { ExampleSection };

src/components/MainLayout/MainLayout.module.scss

@@ -1,27 +1,27 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
 
 .main-container {
-  margin: 30px 100px 70px;
+  margin: 30px 100px 43.44px;
 
   @media screen and (width >= 2500px) {
-    margin-bottom: 84px;
+    margin-bottom: 44px;
   }
 
   @media screen and (width <= 1024px) {
-    margin: 30px 16px 80px;
+    margin: 30px 16px 55px;
   }
 
   .main-title {
+    margin: 0 0 80px;
     font-family: "Roboto";
     font-style: normal;
     font-weight: 400;
     font-size: 24px;
     line-height: 28px;
     letter-spacing: 0.1em;
+    color: #292929;
     text-transform: uppercase;
     text-align: center;
-    margin: 0 0 80px;
-    color: #292929;
 
     @media screen and (width >= 2500px) {
       font-size: 48px;

src/components/MainLayout/MainLayout.tsx

@@ -1,8 +1,9 @@
 import React, { useContext } from "react";
 import { Outlet } from "react-router-dom";
+
 import { LocationProvider } from "../../contexts/LocationContext";
 import { ModalContext } from "../../contexts/ModalContext";
-import { MainMenu } from "../MainMenu/MainMenu";
+import { MainMenu } from "./MainMenu/MainMenu";
 import { Footer } from "../Footer/Footer";
 import { Header } from "../Header/Header";
 import { Modal } from "../Modal/Modal";

src/components/MainLayout/MainMenu/MainMenu.module.scss

@@ -22,8 +22,8 @@
       font-weight: 400;
       font-size: 16px;
       line-height: 19px;
-      text-decoration: none;
       color: #7d7d7d;
+      text-decoration: none;
 
       @media screen and (width >= 2500px) {
         font-size: 32px;

src/components/MainLayout/MainMenu/MainMenu.tsx

@@ -1,38 +1,39 @@
 import React, { useState, useContext, useEffect } from "react";
 import { Link } from "react-router-dom";
-import { LocationContext } from "../../contexts/LocationContext";
+
+import { LocationContext } from "../../../contexts/LocationContext";
 
 import styles from "./MainMenu.module.scss";
 
 const MainMenuItems = [
   {
     name: "Sobre",
-    value: "sobre",
+    value: "institucionais/sobre",
     className: "sobre",
   },
   {
     name: "Forma de Pagamento",
-    value: "forma-de-pagamento",
+    value: "institucionais/forma-de-pagamento",
     className: "formaPagamento",
   },
   {
     name: "Entrega",
-    value: "entrega",
+    value: "institucionais/entrega",
     className: "entrega",
   },
   {
     name: "Troca e Devolução",
-    value: "troca-e-devolucao",
+    value: "institucionais/troca-e-devolucao",
     className: "trocaDevolucao",
   },
   {
     name: "Segurança e Privacidade",
-    value: "seguranca-e-privacidade",
+    value: "institucionais/seguranca-e-privacidade",
     className: "segurancaPrivacidade",
   },
   {
     name: "Contato",
-    value: "contato",
+    value: "institucionais/contato",
     className: "contato",
   },
 ];
@@ -50,7 +51,7 @@ const MainMenu = () => {
   const { path } = useContext(LocationContext);
 
   const updateLocation = () => {
-    if (path === "/sobre") {
+    if (path === "/institucionais/sobre") {
       setIsActive({
         sobre: true,
         formaPagamento: false,
@@ -59,7 +60,7 @@ const MainMenu = () => {
         segurancaPrivacidade: false,
         contato: false,
       });
-    } else if (path === "/formaPagamento") {
+    } else if (path === "/institucionais/forma-de-pagamento") {
       setIsActive({
         sobre: false,
         formaPagamento: true,
@@ -68,7 +69,7 @@ const MainMenu = () => {
         segurancaPrivacidade: false,
         contato: false,
       });
-    } else if (path === "/entrega") {
+    } else if (path === "/institucionais/entrega") {
       setIsActive({
         sobre: false,
         formaPagamento: false,
@@ -77,7 +78,7 @@ const MainMenu = () => {
         segurancaPrivacidade: false,
         contato: false,
       });
-    } else if (path === "/trocaDevolucao") {
+    } else if (path === "/institucionais/troca-e-devolucao") {
       setIsActive({
         sobre: false,
         formaPagamento: false,
@@ -86,7 +87,7 @@ const MainMenu = () => {
         segurancaPrivacidade: false,
         contato: false,
       });
-    } else if (path === "/segurancaPrivacidade") {
+    } else if (path === "/institucionais/seguranca-e-privacidade") {
       setIsActive({
         sobre: false,
         formaPagamento: false,
@@ -95,7 +96,7 @@ const MainMenu = () => {
         segurancaPrivacidade: true,
         contato: false,
       });
-    } else if (path === "/contato") {
+    } else if (path === "/institucionais/contato") {
       setIsActive({
         sobre: false,
         formaPagamento: false,

src/pages/Institucional.tsx

@@ -1,16 +1,15 @@
-import React, { useEffect } from "react";
+import React from "react";
 import {
   createBrowserRouter,
   RouterProvider,
   redirect,
 } from "react-router-dom";
-import { About } from "../components/About/About";
-import { Contact } from "../components/Contact/Contact";
+import { About } from "../components/MainLayout/About/About";
+import { Contact } from "../components/MainLayout/Contact/Contact";
+import { ExampleSection } from "../components/MainLayout/ExampleSection/ExampleSection";
 
 import { MainLayout } from "../components/MainLayout/MainLayout";
 
-// import styles from "./Institucional.module.scss";
-
 const Institucional = () => {
   const institucionalRouter = createBrowserRouter([
     {
@@ -19,31 +18,36 @@ const Institucional = () => {
       children: [
         {
           path: "",
-          loader: () => redirect("sobre"),
+          loader: () => redirect("institucionais/sobre"),
         },
         {
-          path: "sobre",
-          element: <About />,
-        },
-        //   {
-        //     path: "forma-de-pagamento",
-        //     element: <Payment />,
-        //   },
-        //   {
-        //     path: "entrega",
-        //     element: <Shipping />,
-        //   },
-        //   {
-        //     path: "troca-e-devolucao",
-        //     element: <ExchangeAndReturn />,
-        //   },
-        //   {
-        //     path: "seguranca-e-privacidade",
-        //     element: <Security />,
-        //   },
-        {
-          path: "contato",
-          element: <Contact />,
+          path: "institucionais",
+          children: [
+            {
+              path: "sobre",
+              element: <About />,
+            },
+            {
+              path: "forma-de-pagamento",
+              element: <ExampleSection />,
+            },
+            {
+              path: "entrega",
+              element: <ExampleSection />,
+            },
+            {
+              path: "troca-e-devolucao",
+              element: <ExampleSection />,
+            },
+            {
+              path: "seguranca-e-privacidade",
+              element: <ExampleSection />,
+            },
+            {
+              path: "contato",
+              element: <Contact />,
+            },
+          ],
         },
       ],
     },