feature(tela): adicina o breackpoint para telas maiores que 2500px

2023-01-20 13:59:15 -03:00 · 2023-01-20 13:59:15 -03:00 · 23fd3e8985
commit 23fd3e8985
parent 4a1362e75e
14 changed files with 436 additions and 37 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -20,10 +20,14 @@
        "react-dom": "^18.2.0",
        "react-headless-accordion": "^1.0.2",
        "react-scripts": "5.0.1",
+        "react-text-mask": "^5.5.0",
        "sass": "^1.57.1",
        "typescript": "^4.9.4",
        "web-vitals": "^2.1.4",
        "yup": "^0.32.11"
+      },
+      "devDependencies": {
+        "@types/react-text-mask": "^5.4.11"
      }
    },
    "node_modules/@adobe/css-tools": {
@ -3869,6 +3873,15 @@
        "@types/react": "*"
      }
    },
+    "node_modules/@types/react-text-mask": {
+      "version": "5.4.11",
+      "resolved": "https://registry.npmjs.org/@types/react-text-mask/-/react-text-mask-5.4.11.tgz",
+      "integrity": "sha512-DIJ3/dS4jd7NK3lEgsOwcgpp+ZlVrNJEiUDRayZRE/PNMbV/nLWmOKGdL0BUS29hnx0CDgITgPudKx0BgbF5fA==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
    "node_modules/@types/resolve": {
      "version": "1.17.1",
      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@ -14171,6 +14184,17 @@
        }
      }
    },
+    "node_modules/react-text-mask": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-text-mask/-/react-text-mask-5.5.0.tgz",
+      "integrity": "sha512-SLJlJQxa0uonMXsnXRpv5abIepGmHz77ylQcra0GNd7Jtk4Wj2Mtp85uGQHv1avba2uI8ZvRpIEQPpJKsqRGYw==",
+      "dependencies": {
+        "prop-types": "^15.5.6"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/read-cache": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@ -19651,6 +19675,15 @@
        "@types/react": "*"
      }
    },
+    "@types/react-text-mask": {
+      "version": "5.4.11",
+      "resolved": "https://registry.npmjs.org/@types/react-text-mask/-/react-text-mask-5.4.11.tgz",
+      "integrity": "sha512-DIJ3/dS4jd7NK3lEgsOwcgpp+ZlVrNJEiUDRayZRE/PNMbV/nLWmOKGdL0BUS29hnx0CDgITgPudKx0BgbF5fA==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
    "@types/resolve": {
      "version": "1.17.1",
      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@ -26962,6 +26995,14 @@
        "workbox-webpack-plugin": "^6.4.1"
      }
    },
+    "react-text-mask": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-text-mask/-/react-text-mask-5.5.0.tgz",
+      "integrity": "sha512-SLJlJQxa0uonMXsnXRpv5abIepGmHz77ylQcra0GNd7Jtk4Wj2Mtp85uGQHv1avba2uI8ZvRpIEQPpJKsqRGYw==",
+      "requires": {
+        "prop-types": "^15.5.6"
+      }
+    },
    "read-cache": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -15,6 +15,7 @@
    "react-dom": "^18.2.0",
    "react-headless-accordion": "^1.0.2",
    "react-scripts": "5.0.1",
+    "react-text-mask": "^5.5.0",
    "sass": "^1.57.1",
    "typescript": "^4.9.4",
    "web-vitals": "^2.1.4",
@ -43,5 +44,8 @@
      "last 1 firefox version",
      "last 1 safari version"
    ]
+  },
+  "devDependencies": {
+    "@types/react-text-mask": "^5.4.11"
  }
 }
--- a/src/components/BackToTop/BackToTopButton.module.scss
+++ b/src/components/BackToTop/BackToTopButton.module.scss
@ -21,8 +21,23 @@
    background: $color-gray-200;
    color: $color-white;

+    @media screen and (min-width: 2500px) {
+      width: 66px;
+      height: 66px;
+    }
+
    & img {
      margin-bottom: 3px;
+
+      @media screen and (min-width: 2500px) {
+        width: 24px;
+      }
+    }
+  }
+
+  img {
+    @media screen and (min-width: 2500px) {
+      width: 66px;
    }
  }
 }
--- a/src/components/BackToTop/BackToTopButton.tsx
+++ b/src/components/BackToTop/BackToTopButton.tsx
@ -10,11 +10,11 @@ function BackToTopButton() {

  return (
    <div className={style.button__container}>
-      <a href="https://web.whatsapp.com/">
-        <img src={whatsapp} alt="" />
+      <a href="https://web.whatsapp.com/" target="_blank">
+        <img src={whatsapp} alt="Logo do Whatsapp" />
      </a>
      <button onClick={scrollToTop}>
-        <img src={arrow} alt="" />
+        <img src={arrow} alt="Botão de voltar ao topo" />
      </button>
    </div>
  );
--- a/src/components/footer/Footer.module.scss
+++ b/src/components/footer/Footer.module.scss
@ -1,5 +1,9 @@
@import "../../variables.scss";

+footer {
+  margin-top: 110px;
+}
+
 .newsletter__container {
  display: flex;
  align-items: center;
@ -14,6 +18,13 @@
    line-height: 21px;
    letter-spacing: 0.05em;
    font-variant: small-caps;
+
+    @media screen and (min-width: 2500px) {
+      font-weight: 500;
+      font-size: 36px;
+      line-height: 42px;
+      letter-spacing: 0.05em;
+    }
  }

  .newsletter__form__wrapper {
@ -34,6 +45,13 @@
      color: $color-gray-200;
    }

+    @media screen and (min-width: 2500px) {
+      width: 668px;
+      height: 60px;
+      font-size: 28px;
+      line-height: 33px;
+    }
+
    @media screen and (max-width: 1024px) {
      margin: 8px 0;
      width: 100%;
@ -55,6 +73,14 @@
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 4px;

+    @media screen and (min-width: 2500px) {
+      font-weight: 700;
+      font-size: 24px;
+      line-height: 28px;
+      width: 246px;
+      height: 60px;
+    }
+
    @media screen and (max-width: 1024px) {
      width: 100%;
      border-radius: 0;
@ -68,7 +94,7 @@
  align-items: center;

  @media screen and (min-width: 1025px) {
-    height: 240px;
+    padding: 50px 0;
  }

  @media screen and (max-width: 1024px) {
@ -90,6 +116,11 @@
    padding-bottom: 10px;

    text-transform: uppercase;
+
+    @media screen and (min-width: 2500px) {
+      font-size: 28px;
+      line-height: 33px;
+    }
  }

  & a {
@ -99,6 +130,12 @@
    line-height: 14px;
    color: $color-black;

+    @media screen and (min-width: 2500px) {
+      font-weight: 400;
+      font-size: 24px;
+      line-height: 28px;
+    }
+
    &:hover {
      text-decoration: underline;
    }
@ -168,13 +205,29 @@ ul {
 }

 .wrapper__socialmedia {
-  margin-bottom: 90px;
+  @media screen and (min-width: 2500px) {
+    img {
+      height: 70px;
+    }
+  }
+
+  @media screen and (min-width: 1025px) {
+    margin-bottom: 90px;
+  }
  @media screen and (max-width: 1024px) {
-    margin-top: 25px;
+    margin: 25px 10px 0;
  }
 }

 .socialmedia__link {
+  @media screen and (min-width: 2500px) {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 28px;
+    line-height: 33px;
+
+    color: #303030;
+  }
  @media screen and (max-width: 1024px) {
    display: none;
  }
@ -207,6 +260,12 @@ ul {
  line-height: 12px;
  text-transform: capitalize;

+  @media screen and (min-width: 2500px) {
+    width: 467px;
+    font-size: 20px;
+    line-height: 23px;
+  }
+
  @media screen and (min-width: 1025px) {
    position: absolute;
    left: 100px;
@ -232,10 +291,17 @@ ul {

  & img {
    height: 30px;
+    @media screen and (min-width: 2500px) {
+      height: 40px;
+    }
  }

  .stamps__vtexPci {
    height: 46px;
+
+    @media screen and (min-width: 2500px) {
+      height: 66px;
+    }
  }

  @media screen and (min-width: 1025px) {
@ -262,10 +328,18 @@ ul {
    line-height: 12px;
    color: $color-white;
    margin-right: 10px;
+
+    @media screen and (min-width: 2500px) {
+      font-size: 20px;
+      line-height: 23px;
+    }
  }

  & img {
    height: 16px;
+    @media screen and (min-width: 2500px) {
+      height: 30px;
+    }
  }

  @media screen and (min-width: 1025px) {
--- a/src/components/footer/FooterTop.tsx
+++ b/src/components/footer/FooterTop.tsx
@ -112,27 +112,27 @@ const FooterTop = () => {
      <div className={style.wrapper__socialmedia}>
        <ul>
          <li>
-            <a href="https://www.facebook.com">
+            <a href="https://www.facebook.com" target="_blank">
              <img src={facebook} alt="Logo do Facebook" />
            </a>
          </li>
          <li>
-            <a href="https://www.instagram.com">
+            <a href="https://www.instagram.com" target="_blank">
              <img src={instagram} alt="Logo do Instagram" />
            </a>
          </li>
          <li>
-            <a href="https://www.twitter.com">
+            <a href="https://www.twitter.com" target="_blank">
              <img src={twitter} alt="Logo do Twitter" />
            </a>
          </li>
          <li>
-            <a href="https://www.youtube.com">
+            <a href="https://www.youtube.com" target="_blank">
              <img src={youtube} alt="Logo do Youtube" />
            </a>
          </li>
          <li>
-            <a href="https://www.linkein.com">
+            <a href="https://www.linkein.com" target="_blank">
              <img src={linkedin} alt="Logo do LinkedIn" />
            </a>
          </li>
--- a/src/components/header/Header.module.scss
+++ b/src/components/header/Header.module.scss
@ -23,6 +23,10 @@ header {
 .container__logo {
  width: 136px;

+  @media screen and (min-width: 2500px) {
+    width: 266px;
+  }
+
  @media screen and (min-width: 1025px) {
    position: absolute;
    left: 100px;
@ -46,6 +50,10 @@ header {

  img {
    width: 20px;
+
+    @media screen and (min-width: 2500px) {
+      width: 36px;
+    }
  }
  @media screen and (max-width: 1024px) {
    width: 100%;
@ -59,6 +67,14 @@ header {
  border: 2px solid $color-white-100;
  border-radius: 5px;

+  @media screen and (min-width: 2500px) {
+    width: 516px;
+    height: 57px;
+    font-weight: 400;
+    font-size: 28px;
+    line-height: 33px;
+  }
+
  @media screen and (max-width: 1024px) {
    width: 100%;
    margin-bottom: 25px;
@ -85,6 +101,11 @@ header {
 }

 .headerTop__login {
+  @media screen and (min-width: 2500px) {
+    font-weight: 400;
+    font-size: 28px;
+    line-height: 33px;
+  }
  @media screen and (max-width: 1024px) {
    display: none;
  }
@ -92,6 +113,10 @@ header {

 .headerTop__cart {
  width: 30px;
+
+  @media screen and (min-width: 2500px) {
+    width: 54px;
+  }
  @media screen and (min-width: 1025px) {
    margin-left: 55px;
  }
@ -99,11 +124,6 @@ header {

 .header__container__nav {
  padding: 14px 0;
-  height: 50px;
-
-  @media screen and (max-width: 1024px) {
-    display: none;
-  }

  .nav__wrapper {
    margin-left: 100px;
@ -113,6 +133,16 @@ header {
    color: $color-white;
    margin-right: 50px;
    text-transform: uppercase;
+
+    @media screen and (min-width: 2500px) {
+      font-weight: 500;
+      font-size: 28px;
+      line-height: 33px;
+      text-transform: uppercase;
+    }
+  }
+  @media screen and (max-width: 1024px) {
+    display: none;
  }
 }

--- a/src/components/main/Form/CustomForm.scss
+++ b/src/components/main/Form/CustomForm.scss
@ -23,6 +23,13 @@
  color: $color-gray;

  margin: 0 0 32px 0;
+
+  @media screen and (min-width: 2500px) {
+    font-style: normal;
+    font-weight: 700;
+    font-size: 48px;
+    line-height: 56px;
+  }
 }

 .form-col {
@ -95,22 +102,41 @@
  display: flex;
  justify-content: center;
  margin: 12px 0;
+
+  & input {
+    @media screen and (min-width: 2500px) {
+      height: 36px;
+      width: 36px;
+      border-radius: 4px;
+    }
+  }
 }

 .form-checkbox-wrapper span {
  color: $color-red;
+
+  @media screen and (min-height: 2500px) {
+    font-weight: 400;
+    font-size: 28px;
+    line-height: 33px;
+  }
 }

 .form-checkbox-declaration {
  margin: 0 5px;
  color: $color-black !important;
  text-decoration: underline;
+
+  @media screen and (min-width: 2500px) {
+    font-weight: 400;
+    font-size: 28px;
+    line-height: 33px;
+  }
 }

 .form-button {
  width: 100%;
  padding: 15px;
-  margin-bottom: 70px;
  background-color: $color-black;
  border: none;
  border-radius: 25px;
@ -122,6 +148,12 @@
  line-height: 19px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
+
+  @media screen and (min-width: 2500px) {
+    height: 72px;
+    font-size: 32px;
+    line-height: 38px;
+  }
 }

 .form-invalid-feedback {
--- a/src/components/main/Form/CustomForm.tsx
+++ b/src/components/main/Form/CustomForm.tsx
@ -1,6 +1,7 @@
 import React from "react";

 import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik";
+import MaskedInput from "react-text-mask";

 import "./CustomForm.scss";
 import FormSchema from "../../../schema/FormSchema";
@ -25,17 +26,57 @@ const initialValues = {
  cpf: "",
 };

+const phoneNumberMask = [
+  "(",
+  /[1-9]/,
+  /\d/,
+  ")",
+  " ",
+  /\d/,
+  /\d/,
+  /\d/,
+  /\d/,
+  /\d/,
+  "-",
+  /\d/,
+  /\d/,
+  /\d/,
+  /\d/,
+];
+
+const cpfMask = [
+  /\d/,
+  /\d/,
+  /\d/,
+  ".",
+  /\d/,
+  /\d/,
+  /\d/,
+  ".",
+  /\d/,
+  /\d/,
+  /\d/,
+  "-",
+  /\d/,
+  /\d/,
+];
+
+const dateMask = [/\d/, /\d/, "/", /\d/, /\d/, "/", /\d/, /\d/, /\d/, /\d/];
+
+// copilot write birthdate field with mask:
+//
+
 const CustomForm = () => {
  const handleFormikSubmit = (values: IFormikValues) => {};
+  console.log("algo");
  return (
    <Formik
      onSubmit={handleFormikSubmit}
      initialValues={initialValues}
      validationSchema={FormSchema}
    >
-      {({ errors, touched }) => (
+      {({ errors, touched, handleChange }) => (
        <Form>
-          <h2>Preencha o Formulário</h2>
          <div className="form-col">
            <label htmlFor="name">Nome </label>
            <Field
@ -69,10 +110,17 @@ const CustomForm = () => {
          <div className="form-col">
            <label htmlFor="cpf">CPF</label>
            <Field
-              id="cpf"
              name="cpf"
-              className={errors.cpf && touched.cpf && "invalid"}
-              placeholder="999.999.999-99"
+              render={({ field }: any) => (
+                <MaskedInput
+                  {...field}
+                  mask={cpfMask}
+                  onChange={handleChange}
+                  id="cpf"
+                  className={errors.cpf && touched.cpf && "invalid"}
+                  placeholder="999.999.999-99"
+                />
+              )}
            />
            <ErrorMessage
              component="span"
@ -99,10 +147,17 @@ const CustomForm = () => {
          <div className="form-col">
            <label htmlFor="phone">Seu Telefone</label>
            <Field
-              id="phone"
              name="phone"
-              className={errors.phone && touched.phone && "invalid"}
-              placeholder="(00) 00000-0000"
+              render={({ field }: any) => (
+                <MaskedInput
+                  {...field}
+                  mask={phoneNumberMask}
+                  id="phone"
+                  onChange={handleChange}
+                  className={errors.phone && touched.phone && "invalid"}
+                  placeholder="(00) 00000-0000"
+                />
+              )}
            />
            <ErrorMessage
              component="span"
--- a/src/components/main/Main.module.scss
+++ b/src/components/main/Main.module.scss
@ -25,11 +25,24 @@
  flex-direction: column;

  li {
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 19px;
+
+    color: #7d7d7d;
+
    padding: 16px;
    border-right: 1px solid $color-black;
    width: 302px;
    cursor: pointer;

+    @media screen and (min-width: 2500px) {
+      font-weight: 700;
+      font-size: 32px;
+      line-height: 38px;
+    }
+
    @media screen and (max-width: 1024px) {
      width: 100%;
      border: none;
@ -40,6 +53,11 @@
      color: $color-white;
    }
  }
+
+  .menu__itemActive {
+    background: $color-black;
+    color: $color-white;
+  }
 }

 .menu__description {
@ -47,12 +65,38 @@
  padding: 0 16px;

  h2 {
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 28px;
+
    margin-bottom: 20px;
+
+    @media screen and (min-width: 2500px) {
+      font-size: 48px;
+      line-height: 56px;
+    }
+
    @media screen and (max-width: 1024px) {
      text-align: center;
    }
  }

+  p {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+
+    color: #7d7d7d;
+
+    @media screen and (min-width: 2500px) {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 26px;
+      line-height: 30px;
+    }
+  }
+
  @media screen and (max-width: 1024px) {
    width: 100%;
  }
--- a/src/components/main/Main.tsx
+++ b/src/components/main/Main.tsx
@ -1,11 +1,74 @@
-import React from "react";
+import React, { useState } from "react";
 import style from "./Main.module.scss";

 import { CustomForm } from "./Form/CustomForm";
 import { BreadCrumb } from "./TitleAndBreadCrumb/BreadCrumb";
 import { Title } from "./TitleAndBreadCrumb/Title";

+const GenericText = () => (
+  <>
+    <p>
+      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>
+    <br />
+    <p>
+      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>
+    <br />
+    <p>
+      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>
+  </>
+);
+
+const pages = [
+  {
+    name: "Sobre",
+    child: <GenericText />,
+  },
+  {
+    name: "Forma de Pagamento",
+    child: <GenericText />,
+  },
+  {
+    name: "Entrega",
+    child: <GenericText />,
+  },
+  {
+    name: "Troca e Devolução",
+    child: <GenericText />,
+  },
+  {
+    name: "Seguraça e Privacidade",
+    child: <GenericText />,
+  },
+  {
+    name: "Contato",
+    child: <CustomForm />,
+    subtitle: "Preencha o Formulário",
+  },
+];
+
 const Main = () => {
+  const [activePage, setActivePage] = useState(0);
+
  return (
    <main className={style.main__wrapper}>
      <BreadCrumb />
@ -13,16 +76,22 @@ const Main = () => {
      <div className={style.menu__container}>
        <div className={style.menu__wrapper}>
          <ul className={style.menu__items}>
-            <li>Sobre</li>
-            <li>Forma de Pagamento</li>
-            <li>Entrega</li>
-            <li>Troca e Devolução</li>
-            <li>Seguraça e Privacidade</li>
-            <li>Contato</li>
+            {pages.map((page, index) => {
+              return (
+                <li
+                  key={page.name}
+                  className={index === activePage ? style.menu__itemActive : ""}
+                  onClick={() => setActivePage(index)}
+                >
+                  {page.name}
+                </li>
+              );
+            })}
          </ul>
        </div>
        <div className={style.menu__description}>
-          <CustomForm />
+          <h2>{pages[activePage]?.subtitle ?? pages[activePage].name}</h2>
+          {pages[activePage].child}
        </div>
      </div>
    </main>
--- a/src/components/main/TitleAndBreadCrumb/BreadCrumb.tsx
+++ b/src/components/main/TitleAndBreadCrumb/BreadCrumb.tsx
@ -9,11 +9,11 @@ const BreadCrumb = () => {
      <ul className={style.breadgrumb__ul}>
        <li>
          <a href="/">
-            <img src={Home} alt="" />
+            <img className={style.homeButton} src={Home} alt="" />
          </a>
        </li>
        <li>
-          <img src={ArromRight} alt="" />
+          <img className={style.arrowRight} src={ArromRight} alt="" />
        </li>
        <li>
          <a href="/">Institucional</a>
--- a/src/components/main/TitleAndBreadCrumb/TitleAndBreadGrumb.module.scss
+++ b/src/components/main/TitleAndBreadCrumb/TitleAndBreadGrumb.module.scss
@ -10,6 +10,18 @@
  display: flex;
  flex-direction: row;

+  .homeButton {
+    @media screen and (min-width: 2500px) {
+      width: 32px;
+    }
+  }
+
+  .arrowRight {
+    @media screen and (min-width: 2500px) {
+      height: 15px;
+    }
+  }
+
  & a {
    font-style: normal;
    font-weight: 400;
@ -18,6 +30,12 @@
    text-transform: uppercase;

    color: $color-gray-200;
+
+    @media screen and (min-width: 2500px) {
+      font-weight: 400;
+      font-size: 24px;
+      line-height: 28px;
+    }
  }
 }

@ -32,4 +50,12 @@
  text-transform: uppercase;

  color: $color-gray;
+
+  @media screen and (min-width: 2500px) {
+    font-weight: 400;
+    font-size: 48px;
+    line-height: 56px;
+
+    color: #292929;
+  }
 }
--- a/src/schema/FormSchema.ts
+++ b/src/schema/FormSchema.ts
@ -1,5 +1,14 @@
 import * as Yup from "yup";

+const currentDate = new Date().toLocaleDateString();
+const dateFormated = currentDate.split("/").reverse().join("-");
+const getFormatedDate = (currentDate: string) => {
+  return "";
+};
+console.log(
+  "getFormatedDate(new Date().toLocaleDateString())",
+  getFormatedDate(new Date().toLocaleDateString())
+);
 export default Yup.object().shape({
  name: Yup.string().required("*Campo Obrigatório"),
  email: Yup.string().required("*Campo Obrigatório").email("Email inválido"),
@ -8,10 +17,10 @@ export default Yup.object().shape({
    .required("*Campo Obrigatório"),
  phone: Yup.string()
    .required("*Campo Obrigatório")
-    .matches(/^\(?\d{2}\)?[\s-]?\d{4,5}[-]?\d{4}$/),
+    .matches(/^\(?\d{2}\)?[\s-]?\d{4,5}[-]?\d{4}$/, "Formato Inválido"),
  birthdate: Yup.date()
    .required("*Campo Obrigatório")
-    .min(new Date("1900-01-01"), "Data Invalida")
+    .min(new Date("1900-01-01"), "Data Inválida")
    .max(new Date(), "Não é possível incluir uma data futura"),
  instagram: Yup.string()
    .matches(/^@[A-Za-z0-9_.]+$/, 'O nome de usuario deve começar com "@"')