fix(form): alteração na mascara do form

package-lock.json

@@ -22,10 +22,14 @@
         "react-input-mask": "^2.0.4",
         "react-router-dom": "^6.6.1",
         "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-input-mask": "^3.0.2"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -3878,6 +3882,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-input-mask": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/react-input-mask/-/react-input-mask-3.0.2.tgz",
+      "integrity": "sha512-WTli3kUyvUqqaOLYG/so2pLqUvRb+n4qnx2He5klfqZDiQmRyD07jVIt/bco/1BrcErkPMtpOm+bHii4Oed6cQ==",
+      "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",
@@ -14180,6 +14193,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",
@@ -19659,6 +19683,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-input-mask": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/react-input-mask/-/react-input-mask-3.0.2.tgz",
+      "integrity": "sha512-WTli3kUyvUqqaOLYG/so2pLqUvRb+n4qnx2He5klfqZDiQmRyD07jVIt/bco/1BrcErkPMtpOm+bHii4Oed6cQ==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -26970,6 +27003,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",

package.json

@@ -17,6 +17,7 @@
     "react-input-mask": "^2.0.4",
     "react-router-dom": "^6.6.1",
     "react-scripts": "5.0.1",
+    "react-text-mask": "^5.5.0",
     "sass": "^1.57.1",
     "typescript": "^4.9.4",
     "web-vitals": "^2.1.4",
@@ -45,5 +46,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/react-input-mask": "^3.0.2"
   }
 }

src/components/Main/Subject/Contato/RegistrationForm.tsx

@@ -1,8 +1,9 @@
-import { useCallback, useState } from "react";
+import react, { useState } from "react";
+import mask from "react-input-mask";
 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,32 +29,6 @@ const initialValues = {
 
 const RegistrationForm = () => {
   const [isSubmit, setIsSubmit] = useState(false);
-  const handleTel = useCallback((e: React.FormEvent<HTMLInputElement>) => {
-    let value = e.currentTarget.value;
-    value = value.replace(/\D/g, "");
-    value = value.replace(/^(\d{2})(\d{5})(\d)/, "($1) $2-$3");
-    e.currentTarget.value = value;
-  }, []);
-  const handleDate = useCallback((e: React.FormEvent<HTMLInputElement>) => {
-    let value = e.currentTarget.value;
-    value = value.replace(/\D/g, "");
-    value = value.replace(/^(\d{2})(\d{2})(\d)/, "$1.$2.$3");
-    e.currentTarget.value = value;
-  }, []);
-  const handleCpf = useCallback((e: React.FormEvent<HTMLInputElement>) => {
-    let value = e.currentTarget.value;
-    value = value.replace(/\D/g, "");
-    value = value.replace(/^(\d{3})(\d{3})(\d{3})(\d)/, "$1.$2.$3-$4");
-    e.currentTarget.value = value;
-  }, []);
-  const handleInstagram = useCallback(
-    (e: React.FormEvent<HTMLInputElement>) => {
-      let value = e.currentTarget.value;
-      value = value.replace(/^(\d)/, "@$1");
-      e.currentTarget.value = value;
-    },
-    []
-  );
   return (
     <div className={styles["page-main__form"]}>
       <Formik
@@ -108,7 +83,7 @@ const RegistrationForm = () => {
               id="Cpf"
               placeholder="000.000.000-00"
               name="cpf"
-              onKeyUp={handleCpf}
+              mask="999.999.999-99"
             />
             <ErrorMessage
               component="span"
@@ -125,7 +100,7 @@ const RegistrationForm = () => {
               id="Data"
               placeholder="00.00.0000"
               name="data"
-              onKeyUp={handleDate}
+              mask="99.99.9999"
             />
             <ErrorMessage
               component="span"
@@ -142,7 +117,7 @@ const RegistrationForm = () => {
               id="tel"
               placeholder="(00) 00000-0000"
               name="tel"
-              onKeyUp={handleTel}
+              mask="(99) 99999-9999"
             />
             <ErrorMessage
               component="span"
@@ -161,7 +136,6 @@ const RegistrationForm = () => {
             id="Instagram"
             placeholder="@seuuser"
             name="instagram"
-            onKeyUp={handleInstagram}
           />
 
           <div className={stylesCheckbox["page-main__container"]}>

src/components/footer/newsletter/Newsletter.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import Button from "../../button/Button";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import styles from "../footer.module.scss";
-import { NewsletterSchema } from "../../../schema/NewsletterSchema";
+import { NewsletterSchema } from "./schema/NewsletterSchema";
 
 interface FormikValues {
   email: string;