mitre-form-component
Version:
Componente de formulário de captação de leads para ser usado em projetos da Mitre Realty.
1,564 lines (1,453 loc) • 48.7 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var index_exports = {};
__export(index_exports, {
MitreFormComponent: () => Form_default
});
module.exports = __toCommonJS(index_exports);
// src/components/Form/index.tsx
var import_react7 = __toESM(require("react"), 1);
// src/components/hooks/useError.ts
var import_react = require("react");
function useError() {
const [error, setError] = (0, import_react.useState)(null);
const handleError = (err) => {
const errorObj = err instanceof Error ? err : new Error(String(err));
setError(errorObj);
console.error(errorObj);
};
const clearError = () => setError(null);
return { error, handleError, clearError };
}
// src/components/Form/index.tsx
var import_react_hook_form = require("react-hook-form");
var import_yup = require("@hookform/resolvers/yup");
var yup = __toESM(require("yup"), 1);
// src/utils/utm.ts
var UTM_STORAGE_KEY = "utm_meta";
var TTL_DAYS = 7;
var isBrowser = () => typeof window !== "undefined" && typeof document !== "undefined";
var daysToMs = (days) => days * 24 * 60 * 60 * 1e3;
function readStoredUtm(maxAgeDays = TTL_DAYS) {
if (!isBrowser()) return { data: null, isValid: false };
try {
const raw = window.localStorage.getItem(UTM_STORAGE_KEY);
if (!raw) return { data: null, isValid: false };
const parsed = JSON.parse(raw);
if (!parsed?.createdAt) return { data: null, isValid: false };
const age = Date.now() - new Date(parsed.createdAt).getTime();
const isValid = age <= daysToMs(maxAgeDays);
return { data: isValid ? parsed : null, isValid };
} catch {
return { data: null, isValid: false };
}
}
function saveUtm(data, now = /* @__PURE__ */ new Date()) {
if (!isBrowser()) return null;
const payload = {
utm_source: data.utm_source || "direto",
utm_campaign: data.utm_campaign,
utm_medium: data.utm_medium,
utm_term: data.utm_term,
createdAt: now.toISOString()
};
try {
window.localStorage.setItem(UTM_STORAGE_KEY, JSON.stringify(payload));
} catch {
}
return payload;
}
function parseUrlUtm(loc) {
if (!isBrowser()) return {};
const locationObj = loc || window.location;
const sp = new URL(locationObj.href).searchParams;
const utm_source = sp.get("utm_source") || void 0;
const utm_campaign = sp.get("utm_campaign") || void 0;
const utm_medium = sp.get("utm_medium") || void 0;
const utm_term = sp.get("utm_term") || void 0;
return { utm_source, utm_campaign, utm_medium, utm_term };
}
function inferSourceFromReferrer(ref) {
if (!isBrowser()) return void 0;
const href = (ref ?? document.referrer ?? "").toLowerCase();
if (!href) return "direto";
const hostMatch = href.match(/https?:\/\/([^/]+)/);
const host = hostMatch?.[1] ?? href;
if (/google\./.test(host) || /^g\.co$/.test(host) || /^goo\.gl$/.test(host)) return "google";
if (/(^|\.)facebook\.com$/.test(host) || /(^|\.)m\.facebook\.com$/.test(host) || /(^|\.)fb\.com$/.test(host) || /(^|\.)fb\.me$/.test(host) || /(^|\.)fb\.watch$/.test(host) || /(^|\.)m\.me$/.test(host)) return "facebook";
if (/(^|\.)instagram\.com$/.test(host) || /(^|\.)l\.instagram\.com$/.test(host) || /(^|\.)instagr\.am$/.test(host) || /^ig\.me$/.test(host)) return "instagram";
if (/(^|\.)linkedin\.com$/.test(host) || /^lnkd\.in$/.test(host)) return "linkedin";
if (/^t\.co$/.test(host) || /(^|\.)twitter\.com$/.test(host) || /(^|\.)x\.com$/.test(host)) return "twitter";
if (/(^|\.)youtube\.com$/.test(host) || /^youtu\.be$/.test(host)) return "youtube";
if (/(^|\.)mail\.google\.com$/.test(host)) return "email";
if (/(^|\.)outlook\.live\.com$/.test(host) || /(^|\.)outlook\.office\.com$/.test(host)) return "email";
if (/^(wa\.me)$/.test(host) || /(^|\.)api\.whatsapp\.com$/.test(host) || /(^|\.)web\.whatsapp\.com$/.test(host)) return "whatsapp";
if (/^t\.me$/.test(host)) return "telegram";
if (/(^|\.)tiktok\.com$/.test(host)) return "tiktok";
return "direto";
}
function resolveUtmWithPriority(now = /* @__PURE__ */ new Date(), propOverride) {
const stored = readStoredUtm();
if (stored.data) {
const merged = { ...stored.data, ...propOverride };
return { data: merged, source: "localStorage" };
}
const fromUrl = parseUrlUtm();
if (fromUrl.utm_source) {
const saved = saveUtm(fromUrl, now);
const merged = { ...saved, ...propOverride };
return { data: merged, source: "url" };
}
const utm_source = inferSourceFromReferrer();
const payload = {
utm_source: utm_source || "direto",
utm_campaign: propOverride?.utm_campaign,
utm_medium: propOverride?.utm_medium,
utm_term: propOverride?.utm_term,
createdAt: now.toISOString()
};
return { data: payload, source: "referrer" };
}
// src/components/Form/index.tsx
var import_google_libphonenumber = require("google-libphonenumber");
// src/components/styles/utils.ts
function flex(direction = "row", alignItems, justifyContent) {
return `
align-items:${alignItems || null};
display:flex;
flex-direction:${direction};
justify-content:${justifyContent || null};
`;
}
var opacityEffect = `
&:hover {
cursor:pointer;
opacity:.9;
}
&:active {
opacity:.7;
}
`;
// src/components/Form/styles.ts
var import_styled_components = __toESM(require("styled-components"), 1);
var FormContainer = import_styled_components.default.div`
${flex("column")}
align-items: stretch;
justify-content: flex-start;
overflow-x: hidden;
overflow-y: auto;
background: ${(props) => props.$backgroundColor || "var(--gray-180)"};
padding: ${(props) => props.$innerPadding || "1rem"};
/* Hide scrollbars for WebKit browsers */
::-webkit-scrollbar {
display: none;
}
/* Hide scrollbars for Firefox */
scrollbar-width: none;
box-sizing: border-box;
height: 100%;
`;
var HeaderContainer = import_styled_components.default.div`
margin-bottom: 1rem;
`;
var ButtonContainer = import_styled_components.default.div`
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 0.75rem;
button {
${opacityEffect}
color: var(--black);
font-weight: 600;
border: none;
border-radius: 8px;
width: 60%;
margin-top: 10px;
margin-bottom: 10px;
}
`;
var Form = import_styled_components.default.form`
label {
font-weight: 700;
}
input {
margin-bottom: 0.75rem;
}
p {
font-family: "Montserrat", sans-serif;
font-style: italic;
font-weight: 200;
font-size: 0.8rem;
color: ${(props) => props.$textColor || "var(--black)"};
text-align: start;
}
a {
font-family: "Montserrat", sans-serif;
font-style: italic;
font-weight: 200;
font-size: 0.8rem;
color: ${(props) => props.$textColor || "var(--black)"};
}
h6 {
text-align: start;
margin-left: 10px;
color: ${(props) => props.$textColor || "var(--black)"};
}
& > div {
margin-bottom: 10px;,
}
`;
var Title = import_styled_components.default.h2`
font-size: 1.25rem;
font-weight: 700;
line-height: 24px;
letter-spacing: 0em;
color: ${(props) => props.$textColor || "var(--black)"};
`;
var Text = import_styled_components.default.p`
font-size: 1rem;
font-weight: 400;
line-height: 23px;
letter-spacing: 0em;
margin-top: 10px;
color: ${(props) => props.$textColor || "var(--black)"};
`;
// src/components/styles/global.ts
var import_styled_components2 = require("styled-components");
var import_react2 = require("react");
var GlobalStyles = import_styled_components2.createGlobalStyle`
:root {
--red: #e52e4d;
--white: #FFF;
--black: #2F2F2F;
--black-2:#1E1E1E;
--alphaBlack: #000000;
--black-2:#1E1E1E;
--black-3:#353535;
--yellow-400:#FFD789;
--yellow-500: #F6C76B;
--gray-40:#F0F0F0;
--gray-45:#767676;
--gray-50: #686A69;
--gray-60: #8F8F8F;
--gray-100: #B6B6B6;
--gray-150: #B9B9B9;
--gray-180: #CECECE;
--gray-200: #D2D2D2;
--gray-300: #EBEBEB;
--gray-400: #ECECEC;
--gray-500: #F4F4F4;
--gray-550:#6F6F6F;
--gray-600:#686868;
--gray-700: #535353;
--gray-800:#9D9D9D;
--shadow-500: 0px 4px 8px rgba(91, 91, 91, 0.2);
--green:#57C06E;
--green-2:#2DCE68;
--blue:#007BFF;
--transparent: transparent;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
@media (max-width: 1080px) {
font-size: 93.75%;
}
@media (max-width: 720px) {
font-size: 87.5%;
}
}
body {
background: var(--white);
-webkit-font-smoothing: antialiased;
}
body, input, textarea, select, button {
font-family: "Montserrat", sans-serif;
font-weight: 400;
}
h1, h2, h3, h4, h5, h6, strong {
font-weight: 600;
}
button {
cursor: pointer;
}
[disabled] {
opacity: 0.6;
cursor: not-allowed;
}
.hidden {
overflow: hidden;
}
::-webkit-scrollbar {
-webkit-appearance: none;
background: var(--gray-500);
width: 6px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background-color: var(--gray-50);
}
.aligncenter {
text-align: center;
}
.width-190px {
width:190px;
}
.hidden-content {
display:none !important;
}
.global-margin-bottom {
margin-bottom:20px;
}
.background-light-gray {
background:#F4F4F4;
}
.full-width-and-height {
height:100%;
width:100%;
}
.flex-direction-column {
flex-direction:column;
}
.bold {
font-weight:700;
}
.margin-center-x {
margin:0 auto;
}
.border-none {
border:none;
}
.text-center {
text-align:center;
}
.relative {
position:relative;
}
/* accessibility */
body ._access-menu p._text-center{
font-family: "Montserrat", sans-serif;
font-style: italic;
font-size: 1.2rem!important;
margin-top: 6px;
margin-bottom: 3px;
}
`;
var FontLoader = () => {
(0, import_react2.useEffect)(() => {
const link = document.createElement("link");
link.href = "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap";
link.rel = "stylesheet";
document.head.appendChild(link);
}, []);
return null;
};
var global_default = FontLoader;
// src/components/Input/index.tsx
var import_react3 = require("react");
// src/components/Input/masks.ts
function cep(e) {
e.currentTarget.maxLength = 9;
let value = e.currentTarget.value;
value = value.replace(/\D/g, "");
value = value.replace(/^(\d{5})(\d)/, "$1-$2");
e.currentTarget.value = value;
return e;
}
function currency(e) {
let value = e.currentTarget.value;
value = value.replace(/\D/g, "");
value = value.replace(/(\d)(\d{2})$/, "$1,$2");
value = value.replace(/(?=(\d{3})+(\D))\B/g, ".");
e.currentTarget.value = value;
return e;
}
function cpf(e) {
e.currentTarget.maxLength = 14;
let value = e.currentTarget.value;
if (!value.match(/^(\d{3}).(\d{3}).(\d{3})-(\d{2})$/)) {
value = value.replace(/\D/g, "");
value = value.replace(/(\d{3})(\d)/, "$1.$2");
value = value.replace(/(\d{3})(\d)/, "$1.$2");
value = value.replace(/(\d{3})(\d{2})$/, "$1-$2");
e.currentTarget.value = value;
}
return e;
}
function date(e) {
let value = e.currentTarget.value;
value = value.replace(/\D/g, "");
value = value.replace(/(\d{2})(\d)/, "$1/$2");
value = value.replace(/(\d{2})(\d)/, "$1/$2");
e.currentTarget.value = value;
return e;
}
// src/components/Input/styles.ts
var import_styled_components3 = __toESM(require("styled-components"), 1);
var FormLabel = import_styled_components3.default.label`
font-family: "Montserrat", sans-serif;
font-style: normal;
font-weight: 500;
font-size: 1rem;
color: ${(props) => props.$textColor || "var(--black)"};
display: block;
margin-bottom: 0.5rem;
text-align: left;
`;
var Input = import_styled_components3.default.input`
font-family: "Montserrat", sans-serif;
font-style: normal;
font-weight: 500;
font-size: 1rem;
line-height: 1.5rem;
background: ${(props) => props.$backgroundColor || "var(--white)"};
color: ${(props) => props.$textColor || "var(--black)"};
padding: 0.5rem;
border-radius: 0.125rem;
border: 1px solid ${(props) => props.$borderColor || "transparent"};
display: block;
height: 3.125rem;
width: 100%;
&:focus {
border-radius: 0.125rem;
border: 2px solid ${(props) => props.$focusBorderColor || "var(--yellow-500)"};
outline: none;
}
&::placeholder {
font-size: 1rem;
line-height: 1.5rem;
color: ${(props) => props.$placeholderColor || "var(--gray-100)"};
font-weight: 800;
}
/* Autofill styles */
&:-webkit-autofill {
background: ${(props) => props.$backgroundColor || "var(--white)"} !important;
color: ${(props) => props.$textColor || "var(--black)"} !important;
-webkit-text-fill-color: ${(props) => props.$textColor || "var(--black)"} !important;
transition: background-color 5000s ease-in-out 0s; /* Prevent flashing */
}
&:-webkit-autofill::first-line {
font-family: "Montserrat", sans-serif;
font-size: 1rem;
font-weight: 500;
}
`;
var FormErrorMessage = import_styled_components3.default.small`
font-size: 0.75rem;
line-height: 1.125rem;
color: var(--red);
margin-top: 0.25rem;
display: block;
`;
var FormControl = import_styled_components3.default.div.withConfig({
shouldForwardProp: (prop) => !["isInvalid"].includes(prop)
})`
${FormLabel} {
${(props) => props.isInvalid && import_styled_components3.css`
color: var(--red);
`};
}
${Input} {
${(props) => props.isInvalid && import_styled_components3.css`
border: 1px solid var(--red);
&:not(:focus)::placeholder {
color: var(--red);
font-weight: 600;
}
`};
&:focus {
${(props) => props.isInvalid && import_styled_components3.css`
border: 1px solid var(--red);
`};
}
}
`;
// src/components/Input/index.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var InputBase = ({
id,
label,
error,
showErrorMessage = true,
labelTextColor,
backgroundColor,
borderColor,
focusBorderColor,
inputPlaceholderColor,
inputTextColor,
mask = "",
type = "text",
...rest
}, ref) => {
const handleKeyUp = (0, import_react3.useCallback)(
(e) => {
if (mask === "cep") cep(e);
if (mask === "currency") currency(e);
if (mask === "cpf") cpf(e);
if (mask === "date") date(e);
},
[mask]
);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FormControl, { isInvalid: !!error, children: [
!!label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormLabel, { htmlFor: id, $textColor: labelTextColor, children: label }),
!mask ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
Input,
{
id,
ref,
type,
"aria-invalid": !!error && showErrorMessage ? "true" : "false",
autoComplete: rest.autoComplete || "on",
$backgroundColor: backgroundColor,
$borderColor: borderColor,
$focusBorderColor: focusBorderColor,
$placeholderColor: inputPlaceholderColor,
$textColor: inputTextColor,
...rest
}
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
Input,
{
id,
ref,
type,
"aria-invalid": !!error && showErrorMessage ? "true" : "false",
autoComplete: rest.autoComplete || "on",
onKeyUp: handleKeyUp,
$backgroundColor: backgroundColor,
$borderColor: borderColor,
$focusBorderColor: focusBorderColor,
$placeholderColor: inputPlaceholderColor,
$textColor: inputTextColor,
...rest
}
),
!!error && showErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormErrorMessage, { "data-testid": "error-message", children: typeof error === "string" ? error : error.message })
] });
};
var Input2 = (0, import_react3.forwardRef)(InputBase);
// src/components/Button/styles.ts
var import_polished = require("polished");
var import_styled_components4 = __toESM(require("styled-components"), 1);
var Icon = import_styled_components4.default.span`
font-size: 0;
line-height: 0;
transition: all 0.25s ease;
transform: translate3d(-30px, 0px, 0px);
visibility: hidden;
opacity: 0;
margin-right: 0.625rem;
`;
var Text2 = import_styled_components4.default.span`
font-family: "Montserrat", sans-serif;
font-size: 1rem;
line-height: 1.5rem;
margin-bottom: -2px;
transition: all 0.25s ease;
`;
var TextSubmitting = import_styled_components4.default.span`
font-family: "Montserrat", sans-serif;
font-weight: 400;
font-size: 1rem;
transition: all 0.25s ease;
`;
var LoadingIcon = import_styled_components4.default.span.withConfig({
shouldForwardProp: (prop) => prop !== "hasText"
})`
display: block;
width: 1rem;
height: 1rem;
border: 0.125rem solid var(--white);
border-radius: 50%;
animation: loadingAnimation 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: var(--white) transparent transparent transparent;
margin-right: ${(props) => props.hasText ? "0.625rem" : "0"};
@keyframes loadingAnimation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
`;
var Button = import_styled_components4.default.button.withConfig({
shouldForwardProp: (prop) => ![
"hasIcon",
"isSubmitting",
"hasSubmittingMessage",
"bgColor",
"bordercolor",
"color",
"height"
].includes(prop)
})`
background: ${(props) => (0, import_polished.darken)(0.1, props?.bgColor || "#F6C76B")};
color: ${(props) => props?.color || "#2F2F2F"};
border: 1px solid ${(props) => (0, import_polished.darken)(0.1, props?.bordercolor || "#F6C76B")};
border-radius: 2px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 0.75rem;
height: ${(props) => props?.height || "3.125rem"};
position: relative;
font-size: 0;
line-height: 0;
transition: all 0.25s;
${Icon} {
display: ${(props) => props?.hasIcon ? "block" : ""};
}
${Text2} {
transform: ${(props) => props?.hasIcon ? "translate3d(-4.5px, 0px, 0px)" : "unset"};
@media print, screen and (min-width: 40em) {
transform: ${(props) => props?.hasIcon ? "translate3d(-14.5px, 0px, 0px)" : "unset"};
}
color: ${(props) => props?.color || "#2F2F2F"};
}
&:hover {
background: ${(props) => (0, import_polished.darken)(0.2, props?.bgColor || "#F6C76B")};
border-color: ${(props) => (0, import_polished.darken)(0.2, props?.bordercolor || "#F6C76B")};
${Icon} {
opacity: 1;
visibility: visible;
transform: translate3d(0px, 0px, 0px);
}
${Text2} {
transform: ${(props) => props?.hasIcon ? "translate3d(-5px, 0px, 0px)" : "unset"};
}
}
${Text2} {
${(props) => props.isSubmitting && !props.hasSubmittingMessage && import_styled_components4.css`
transform: unset;
opacity: 0;
`}
}
${LoadingIcon} {
${(props) => props.isSubmitting && !props.hasSubmittingMessage && import_styled_components4.css`
display: flex;
-webkit-box-align: center;
align-items: center;
position: absolute;
`}
}
`;
// src/components/Button/index.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
function Button2({
children,
icon,
isSubmitting = false,
submittingMessage = "",
disabled = false,
color = "var(--black)",
...rest
}) {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
Button,
{
isSubmitting,
hasSubmittingMessage: submittingMessage.length > 0,
disabled: isSubmitting || disabled,
"aria-disabled": isSubmitting || disabled,
hasIcon: !!icon,
color,
...rest,
children: [
icon && !isSubmitting && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { "data-testid": "button-icon", children: icon }),
isSubmitting && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LoadingIcon, { hasText: submittingMessage.length > 0 }),
(!isSubmitting || submittingMessage.length === 0) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text2, { className: "text", children }),
isSubmitting && submittingMessage.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TextSubmitting, { children: submittingMessage })
]
}
);
}
// src/components/Alert/index.tsx
var import_react4 = require("react");
// src/components/Alert/styles.ts
var import_styled_components5 = __toESM(require("styled-components"), 1);
var fadeIn = import_styled_components5.keyframes`
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
`;
var fadeOut = import_styled_components5.keyframes`
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-10px); }
`;
var typeStyles = {
error: import_styled_components5.css`
background-color: var(--red);
border: 1px solid var(--red);
color: var(--white);
svg {
color: var(--white);
}
`,
warning: import_styled_components5.css`
background-color: var(--yellow-500);
border: 1px solid var(--yellow-400);
color: var(--black);
svg {
color: var(--black);
}
`,
info: import_styled_components5.css`
background-color: var(--blue);
border: 1px solid var(--blue);
color: var(--white);
svg {
color: var(--white);
}
`,
success: import_styled_components5.css`
background-color: var(--green);
border: 1px solid var(--green-2);
color: var(--white);
svg {
color: var(--white);
}
`
};
var AlertContainer = import_styled_components5.default.div`
position: fixed;
width: 500px;
top: 15px;
right: 15px;
padding: 1rem ${({ $dismissible }) => $dismissible ? "2.5rem" : "1rem"} 1rem
1rem;
margin-bottom: 1rem;
animation: ${({ $isClosing }) => $isClosing ? fadeOut : fadeIn} 0.3s
ease-out;
animation-fill-mode: forwards;
align-items: center;
gap: 0.5rem;
box-shadow: var(--shadow-500);
border-radius: 0.5rem;
font-size: 1rem;
font-weight: 500;
${({ $type }) => typeStyles[$type]}
`;
var DismissButton = import_styled_components5.default.button`
position: absolute;
background: transparent;
right: 10px;
border: none;
cursor: pointer;
color: inherit;
opacity: 1;
transition: opacity 0.2s;
&:hover {
opacity: 0.7;
}
svg {
width: 1rem;
height: 1rem;
}
`;
// src/components/Alert/index.tsx
var import_hi = require("react-icons/hi");
var import_jsx_runtime3 = require("react/jsx-runtime");
var Alert = ({
type = "info",
children,
className,
dismissible = false,
onDismiss,
autoDismiss
}) => {
const [isClosing, setIsClosing] = (0, import_react4.useState)(false);
const handleDismiss = (0, import_react4.useCallback)(() => {
setIsClosing(true);
setTimeout(() => onDismiss?.(), 300);
}, [onDismiss]);
(0, import_react4.useEffect)(() => {
if (autoDismiss) {
const timer = setTimeout(handleDismiss, autoDismiss);
return () => clearTimeout(timer);
}
}, [autoDismiss, handleDismiss]);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
AlertContainer,
{
$type: type,
$dismissible: dismissible,
$isClosing: isClosing,
className,
role: "alert",
children: [
children,
dismissible && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
DismissButton,
{
onClick: handleDismiss,
"aria-label": "Dismiss alert",
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_hi.HiX, {})
}
)
]
}
);
};
// src/components/PhoneInput/index.tsx
var import_react5 = require("react");
// src/components/PhoneInput/styles.ts
var import_styled_components6 = __toESM(require("styled-components"), 1);
var import_react_international_phone = require("react-international-phone");
var import_style = require("react-international-phone/style.css");
var FormLabel2 = import_styled_components6.default.label`
font-family: "Montserrat", sans-serif;
font-style: normal;
font-weight: 500;
font-size: 1rem;
color: ${(props) => props.$textColor || "var(--black)"};
display: block;
margin-bottom: 0.5rem;
text-align: left;
`;
var StyledPhoneInput = (0, import_styled_components6.default)(import_react_international_phone.PhoneInput)`
width: 100%;
height: 3.125rem;
background: ${(props) => props.$backgroundColor || "var(--white)"};
font-family: "Montserrat", sans-serif;
border: 1px solid ${(props) => props.$borderColor || "transparent"};
border-radius: 0.125rem;
&:focus-within {
border-radius: 0.125rem;
border: 2px solid ${(props) => props.$focusBorderColor || "var(--yellow-500)"};
outline: none;
.react-international-phone-country-selector-button {
border-right: 1px solid ${(props) => props.$focusBorderColor || "var(--yellow-500)"};
}
}
/* Style for the inner phone input container */
.react-international-phone-input-container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
overflow: hidden;
font-family: "Montserrat", sans-serif;
font-size: 1rem;
font-weight: 500;
color: ${(props) => props.$textColor || "var(--black)"};
background: ${(props) => props.$backgroundColor || "var(--white)"};
}
/* Style for the country selector button */
.react-international-phone-country-selector-button {
height: 100%;
background: ${(props) => props.$backgroundColor || "var(--white)"};
display: flex;
align-items: center;
justify-content: center;
font-family: "Montserrat", sans-serif;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
outline: none;
border: none;
border-right: 1px solid ${(props) => props.$borderColor || "var(--transparent)"};
}
/* Style for the input itself */
input.react-international-phone-input {
flex: 1;
height: 100%;
padding: 0 0.5rem;
margin: 0;
background: ${(props) => props.$backgroundColor || "var(--white)"};
font-family: "Montserrat", sans-serif;
font-style: normal;
font-weight: 500;
font-size: 1rem;
line-height: 1.5rem;
color: ${(props) => props.$textColor || "var(--black)"};
outline: none;
border: none;
border-radius: 0.125rem;
&::placeholder {
font-size: 1rem;
line-height: 1.5rem;
color: ${(props) => props.$placeholderColor || "var(--gray-100)"};
font-weight: 800;
}
&:-webkit-autofill {
background: ${(props) => props.$backgroundColor || "var(--white)"} !important;
-webkit-text-fill-color: ${(props) => props.$textColor || "var(--black)"} !important;
transition: background-color 5000s ease-in-out 0s;
}
&:-webkit-autofill::first-line {
font-family: "Montserrat", sans-serif;
font-size: 1rem;
font-weight: 500;
}
}
`;
var FormErrorMessage2 = import_styled_components6.default.small`
font-size: 0.75rem;
line-height: 1.125rem;
color: var(--red);
margin-top: 0.25rem;
display: block;
`;
var FormControl2 = import_styled_components6.default.div.withConfig({
shouldForwardProp: (prop) => !["isInvalid"].includes(prop)
})`
${FormLabel2} {
${(props) => props.isInvalid && import_styled_components6.css`
color: var(--red);
`};
}
${StyledPhoneInput} {
${(props) => props.isInvalid && import_styled_components6.css`
border: 1px solid var(--red);
&:not(:focus)::placeholder {
color: var(--red);
font-weight: 600;
}
`};
.react-international-phone-input-container {
${(props) => props.isInvalid && import_styled_components6.css`
border: 1px solid var(--red);
&:not(:focus)::placeholder {
color: var(--red);
font-weight: 600;
}
`};
}
.react-international-phone-country-selector-button {
${(props) => props.isInvalid && import_styled_components6.css`
border-right: 1px solid var(--red);
`};
}
}
`;
// src/components/PhoneInput/index.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var PhoneInputBase = ({
id,
label,
error,
showErrorMessage = true,
labelTextColor,
backgroundColor,
borderColor,
focusBorderColor,
inputPlaceholderColor,
inputTextColor,
value,
...rest
}, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(FormControl2, { isInvalid: !!error, children: [
!!label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FormLabel2, { htmlFor: id, $textColor: labelTextColor, children: label }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
StyledPhoneInput,
{
ref,
defaultCountry: "br",
disableCountryGuess: true,
disableDialCodeAndPrefix: true,
showDisabledDialCodeAndPrefix: false,
placeholder: rest.placeholder,
"aria-invalid": !!error && showErrorMessage ? "true" : "false",
value: String(value),
onChange: (phone, meta) => {
if (typeof rest.onChange === "function") {
rest.onChange({
phone,
dialCode: meta.country.dialCode,
inputValue: meta.inputValue
});
}
},
inputProps: {
id,
name: rest.name || "phone",
required: rest.required,
autoFocus: rest.autoFocus,
autoComplete: rest.autoComplete || "tel"
},
$backgroundColor: backgroundColor,
$borderColor: borderColor,
$focusBorderColor: focusBorderColor,
$placeholderColor: inputPlaceholderColor,
$textColor: inputTextColor
}
),
!!error && showErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FormErrorMessage2, { "data-testid": "error-message", children: typeof error === "string" ? error : error?.message })
] });
};
var PhoneInput2 = (0, import_react5.forwardRef)(PhoneInputBase);
// src/components/ProductSelect/index.tsx
var import_react6 = require("react");
// src/components/ProductSelect/styles.ts
var import_styled_components7 = __toESM(require("styled-components"), 1);
var FormLabel3 = import_styled_components7.default.label`
font-family: "Montserrat", sans-serif;
font-style: normal;
font-weight: 500;
font-size: 1rem;
color: ${(props) => props.$textColor || "var(--black)"};
display: block;
margin-bottom: 0.5rem;
text-align: left;
`;
var Select = import_styled_components7.default.select`
font-family: "Montserrat", sans-serif;
font-style: normal;
font-weight: 500;
font-size: 1rem;
line-height: 1.5rem;
background: ${(props) => props.$backgroundColor || "var(--white)"};
color: ${(props) => props.$textColor || "var(--black)"};
padding: 0.5rem 3rem 0.5rem 0.5rem; /* Aumentado padding-right para 3rem */
border-radius: 0.125rem;
border: 1px solid ${(props) => props.$borderColor || "transparent"};
display: block;
height: 3.125rem;
width: 100%;
cursor: pointer;
/* Remover a seta padrão do navegador */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Adicionar seta personalizada maior */
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 1rem center; /* Posicionado a 1rem da direita */
background-size: 1.25rem; /* Tamanho da seta aumentado para 1.25rem */
&:focus {
border-radius: 0.125rem;
border: 2px solid ${(props) => props.$focusBorderColor || "var(--yellow-500)"};
outline: none;
}
/* Estilo para option disabled (placeholder) */
option:disabled {
color: var(--gray-100);
font-weight: 800;
}
/* Estilo para options normais */
option:not(:disabled) {
color: ${(props) => props.$textColor || "var(--black)"};
font-weight: 500;
}
`;
var FormErrorMessage3 = import_styled_components7.default.small`
font-size: 0.75rem;
line-height: 1.125rem;
color: var(--red);
margin-top: 0.25rem;
display: block;
`;
var FormControl3 = import_styled_components7.default.div.withConfig({
shouldForwardProp: (prop) => !["isInvalid"].includes(prop)
})`
${FormLabel3} {
${(props) => props.isInvalid && import_styled_components7.css`
color: var(--red);
`};
}
${Select} {
${(props) => props.isInvalid && import_styled_components7.css`
border: 1px solid var(--red);
`};
&:focus {
${(props) => props.isInvalid && import_styled_components7.css`
border: 1px solid var(--red);
`};
}
}
`;
// src/components/ProductSelect/index.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var ProductSelectBase = ({
id,
label,
error,
showErrorMessage = true,
labelTextColor,
backgroundColor,
borderColor,
focusBorderColor,
textColor,
products,
placeholder = "Selecione um produto",
...rest
}, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(FormControl3, { isInvalid: !!error, children: [
!!label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FormLabel3, { htmlFor: id, $textColor: labelTextColor, children: label }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
Select,
{
id,
ref,
"aria-invalid": !!error && showErrorMessage ? "true" : "false",
$backgroundColor: backgroundColor,
$borderColor: borderColor,
$focusBorderColor: focusBorderColor,
$textColor: textColor,
...rest,
children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", disabled: true, children: placeholder }),
products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: product.id, children: product.name }, product.id))
]
}
),
!!error && showErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FormErrorMessage3, { "data-testid": "error-message", children: typeof error === "string" ? error : error.message })
] });
};
var ProductSelect = (0, import_react6.forwardRef)(ProductSelectBase);
// src/components/Form/index.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
var phoneUtil = import_google_libphonenumber.PhoneNumberUtil.getInstance();
var isPhoneValid = (phone) => {
try {
return phoneUtil.isValidNumber(phoneUtil.parseAndKeepRawInput(phone));
} catch (error) {
console.log("erro ao validar telefone = " + error);
return false;
}
};
var baseSchema = {
name: yup.string().required("Nome \xE9 obrigat\xF3rio"),
email: yup.string().required("Email \xE9 obrigat\xF3rio").email("Email inv\xE1lido"),
phone: yup.object().shape({
phone: yup.string().required("Telefone \xE9 obrigat\xF3rio!").test(
"is-valid-phone",
"N\xFAmero de telefone inv\xE1lido!",
function(value) {
const digitsOnly = value?.replace(/\D/g, "") || "";
return digitsOnly.length >= 8 && isPhoneValid(value);
}
),
inputValue: yup.string().required("Telefone \xE9 obrigat\xF3rio!"),
dialCode: yup.string().required("C\xF3digo de pa\xEDs \xE9 obrigat\xF3rio")
})
};
var schemaWithProduct = yup.object().shape({
...baseSchema,
productId: yup.string().required("Produto \xE9 obrigat\xF3rio")
});
var schema = yup.object().shape(baseSchema);
var MitreFormComponent = import_react7.default.forwardRef(({
products,
apiUrl,
apiToken,
showHeader = true,
backgroundColor = "var(--gray-180)",
textColor = "var(--black)",
buttonBackgroundColor = "#F6C76B",
buttonTextColor = "var(--black)",
innerPadding = "1rem",
inputBackgroundColor = "var(--white)",
inputBorderColor = "var(--transparent)",
inputFocusBorderColor = "var(--yellow-500)",
inputPlaceholderColor = "var(--gray-100)",
inputTextColor = "var(--black)"
}, ref) => {
const [loading, setIsLoading] = (0, import_react7.useState)(false);
const { error, handleError, clearError } = useError();
const [successMessage, setSuccessMessage] = (0, import_react7.useState)("");
const [formKey, setFormKey] = (0, import_react7.useState)(0);
const [selectedProductId, setSelectedProductId] = (0, import_react7.useState)(null);
const validateProducts = () => {
if (!products) {
return "Lista de produtos n\xE3o foi fornecida";
}
if (!Array.isArray(products)) {
return "Lista de produtos deve ser um array";
}
if (products.length === 0) {
return "Lista de produtos n\xE3o pode estar vazia";
}
for (let i = 0; i < products.length; i++) {
const product = products[i];
if (!product) {
return `Produto na posi\xE7\xE3o ${i} \xE9 inv\xE1lido (nulo/undefined)`;
}
if (typeof product.id !== "number" || product.id <= 0) {
return `Produto na posi\xE7\xE3o ${i} possui ID inv\xE1lido (deve ser um n\xFAmero positivo)`;
}
if (typeof product.name !== "string" || product.name.trim().length === 0) {
return `Produto na posi\xE7\xE3o ${i} possui nome inv\xE1lido (deve ser uma string n\xE3o vazia)`;
}
}
return null;
};
const productsValidationError = validateProducts();
const [utm, setUtm] = (0, import_react7.useState)({ utm_source: "direto", createdAt: (/* @__PURE__ */ new Date()).toISOString() });
const formSchema = products && products.length > 1 ? schemaWithProduct : schema;
const { control, register, handleSubmit, formState: { errors }, reset, clearErrors } = (0, import_react_hook_form.useForm)({
resolver: (0, import_yup.yupResolver)(formSchema),
mode: "onSubmit"
});
import_react7.default.useEffect(() => {
if (!isBrowser()) return;
const { data } = resolveUtmWithPriority(/* @__PURE__ */ new Date());
setUtm(data);
}, []);
const resetForm = () => {
const resetData = {
name: "",
email: "",
phone: { phone: "", inputValue: "", dialCode: "" }
};
if (products && products.length > 1) {
resetData.productId = "";
setSelectedProductId(null);
}
reset(resetData, {
keepErrors: false,
keepDirty: false,
keepTouched: false,
keepIsSubmitted: false,
keepSubmitCount: false,
keepValues: false,
keepDefaultValues: false
});
clearErrors();
setFormKey((k) => k + 1);
};
const sendMessage = async (data) => {
const { name, email, phone, productId } = data;
const phoneValue = phone.inputValue;
const phoneDigitsOnly = phoneValue?.replace(/\D/g, "") || "";
const message = "Gostaria de mais informa\xE7\xF5es sobre o produto";
try {
setIsLoading(true);
if (!products || products.length === 0 || !apiToken) {
throw new Error("Par\xE2metros obrigat\xF3rios n\xE3o informados");
}
let selectedProduct;
if (products.length === 1) {
selectedProduct = products[0];
} else {
if (!productId) {
throw new Error("Produto deve ser selecionado");
}
const foundProduct = products.find((p) => p.id.toString() === productId);
if (!foundProduct) {
throw new Error("Produto selecionado n\xE3o encontrado");
}
selectedProduct = foundProduct;
}
const requestBody = {
name,
email,
phone: phoneDigitsOnly,
message,
productId: selectedProduct.id.toString(),
utm_source: utm.utm_source,
utm_campaign: utm.utm_campaign,
utm_medium: utm.utm_medium,
utm_term: utm.utm_term
};
console.log("requestBody = " + JSON.stringify(requestBody));
const response = await fetch(`${apiUrl}/leads`, {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Basic ${apiToken}`
},
body: JSON.stringify(requestBody)
});
if (!response.ok) {
console.log("response = " + JSON.stringify(response));
throw new Error("Falha ao enviar a mensagem!");
}
setSuccessMessage("Mensagem enviada com sucesso!");
resetForm();
} catch (err) {
handleError(err);
} finally {
setIsLoading(false);
}
};
if (productsValidationError) {
console.error("Erro na valida\xE7\xE3o dos produtos:", productsValidationError);
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(global_default, {}),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(GlobalStyles, {}),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(HeaderContainer, { children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Title, { $textColor: textColor, children: "Erro no carregamento do formul\xE1rio!" }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { $textColor: textColor, children: "N\xE3o foi poss\xEDvel carregar o formul\xE1rio. Tente novamente mais tarde." })
] }) })
] });
}
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(global_default, {}),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(GlobalStyles, {}),
error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
Alert,
{
type: "error",
dismissible: true,
onDismiss: clearError,
autoDismiss: 5e3,
children: error.message
}
),
successMessage && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
Alert,
{
type: "success",
dismissible: true,
onDismiss: () => setSuccessMessage(""),
autoDismiss: 5e3,
children: successMessage
}
),
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: [
showHeader && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(HeaderContainer, { children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Title, { $textColor: textColor, children: "Atendimento por mensagem" }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { $textColor: textColor, children: "Informe seus dados e retornaremos a mensagem." })
] }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Form, { $textColor: textColor, onSubmit: handleSubmit(sendMessage), noValidate: true, children: [
products.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
ProductSelect,
{
id: "productId",
label: "Produto de interesse *",
placeholder: "Selecione um produto",
...register("productId"),
error: errors.productId?.message,
products,
required: true,
labelTextColor: textColor,
backgroundColor: inputBackgroundColor,
borderColor: inputBorderColor,
focusBorderColor: inputFocusBorderColor,
textColor: inputTextColor
}
),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
Input2,
{
id: "name",
label: "Nome *",
placeholder: "Digite seu nome",
...register("name"),
error: errors.name?.message,
autoComplete: "name",
required: true,
labelTextColor: textColor,
backgroundColor: inputBackgroundColor,
borderColor: inputBorderColor,
focusBorderColor: inputFocusBorderColor,
inputPlaceholderColor,
inputTextColor
}
),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
Input2,
{
id: "email",
label: "Email *",
type: "email",
placeholder: "exemplo@email.com",
...register("email"),
error: errors.email?.message,
autoComplete: "email",
required: true,
labelTextColor: textColor,
backgroundColor: inputBackgroundColor,
borderColor: inputBorderColor,
focusBorderColor: inputFocusBorderColor,
inputPlaceholderColor,
inputTextColor
}
),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
import_react_hook_form.Controller,
{
name: "phone",
control,
defaultValue: { phone: "", inputValue: "", dialCode: "" },
shouldUnregister: true,
render: ({ field }) => {
const errorMsg = errors.phone?.inputValue?.message || errors.phone?.phone?.message || errors.phone?.message;
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
PhoneInput2,
{
id: "phone",
label: "Telefone *",
placeholder: "(11) 00000-0000",
error: errorMsg,
required: true,
value: field.value.phone,
onChange: field.onChange,
name: field.name,
labelTextColor: textColor,
backgroundColor: inputBackgroundColor,
borderColor: inputBorderColor,
focusBorderColor: inputFocusBorderColor,
inputPlaceholderColor,
inputTextColor
}
);
}
},
formKey
),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ButtonContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Button2, { bgColor: buttonBackgroundColor, color: buttonTextColor, type: "submit", isSubmitting: loading, children: "Enviar mensagem" }) }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { children: [
"A Mitre Realty respeita a sua privacidade e utiliza os seus dados pessoais para contat\xE1-lo por e-mail ou telefone aqui registrados. Para saber mais, acesse a nossa",
" ",
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"a",
{
href: "https://www.mitrerealty.com.br/politica-de-privacidade",
target: "_blank",
rel: "noopener noreferrer",
children: "Pol\xEDtica de Privacidade"
}
),
". Ao clicar em ",
'"',
"enviar",
'"',
", voc\xEA concorda em permitir que a Mitre Realty, armazene e processe os dados pessoais fornecidos por voc\xEA para finalidade informada"
] })
] })
] })
] });
});
MitreFormComponent.displayName = "MitreFormComponent";
var Form_default = MitreFormComponent;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
MitreFormComponent
});
//# sourceMappingURL=index.cjs.map