diff --git a/frontend/pages/Profile.tsx b/frontend/pages/Profile.tsx index e11aac3..79e0ec0 100644 --- a/frontend/pages/Profile.tsx +++ b/frontend/pages/Profile.tsx @@ -8,6 +8,7 @@ import { Button } from "../components/Button"; import { useAuth } from "../contexts/AuthContext"; import { getFunctions, createProfessional, updateProfessional } from "../services/apiService"; import { toast } from "react-hot-toast"; +import { formatCPFCNPJ, formatPhone } from "../utils/masks"; // --- Helper Components --- @@ -297,7 +298,7 @@ export const ProfilePage: React.FC = () => { res = await createProfessional(payload, token); } else { // UPDATE - res = await updateProfessional(formData.id, payload, token); + res = await updateProfessional(formData.id, payload, token); } if (res.error) throw new Error(res.error); @@ -473,7 +474,8 @@ export const ProfilePage: React.FC = () => { label="CPF/CNPJ" icon={FileText} value={formData.cpf_cnpj_titular || ""} - onChange={(e) => handleChange("cpf_cnpj_titular", e.target.value)} + onChange={(e) => handleChange("cpf_cnpj_titular", formatCPFCNPJ(e.target.value))} + maxLength={18} /> @@ -495,7 +497,8 @@ export const ProfilePage: React.FC = () => { label="WhatsApp" icon={Phone} value={formData.whatsapp || ""} - onChange={(e) => handleChange("whatsapp", e.target.value)} + onChange={(e) => handleChange("whatsapp", formatPhone(e.target.value))} + maxLength={15} />
diff --git a/frontend/utils/masks.ts b/frontend/utils/masks.ts new file mode 100644 index 0000000..5ff9d6e --- /dev/null +++ b/frontend/utils/masks.ts @@ -0,0 +1,30 @@ +export const formatCPFCNPJ = (value: string) => { + const clean = value.replace(/\D/g, ""); + + if (clean.length <= 11) { + // CPF + return clean + .replace(/(\d{3})(\d)/, "$1.$2") + .replace(/(\d{3})(\d)/, "$1.$2") + .replace(/(\d{3})(\d{1,2})/, "$1-$2") + .replace(/(-\d{2})\d+?$/, "$1"); + } else { + // CNPJ + return clean + .replace(/^(\d{2})(\d)/, "$1.$2") + .replace(/^(\d{2})\.(\d{3})(\d)/, "$1.$2.$3") + .replace(/\.(\d{3})(\d)/, ".$1/$2") + .replace(/(\d{4})(\d)/, "$1-$2") + .replace(/(-\d{2})\d+?$/, "$1"); + } +}; + +export const formatPhone = (value: string) => { + const clean = value.replace(/\D/g, ""); + + // (11) 99999-9999 + return clean + .replace(/^(\d{2})(\d)/, "($1) $2") + .replace(/(\d{5})(\d)/, "$1-$2") + .replace(/(-\d{4})\d+?$/, "$1"); +};