mitre-form-component 2.0.0 → 2.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +57 -53
- package/dist/index.cjs +319 -145
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +31 -17
- package/dist/index.d.ts +31 -17
- package/dist/index.js +320 -146
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -909,112 +909,185 @@ var slideIn = keyframes2`
|
|
|
909
909
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
910
910
|
`;
|
|
911
911
|
var Overlay = styled6.div`
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
912
|
+
&& {
|
|
913
|
+
position: fixed !important;
|
|
914
|
+
inset: 0 !important;
|
|
915
|
+
top: 0 !important;
|
|
916
|
+
right: 0 !important;
|
|
917
|
+
bottom: 0 !important;
|
|
918
|
+
left: 0 !important;
|
|
919
|
+
background: rgba(0, 0, 0, 0.55) !important;
|
|
920
|
+
display: flex !important;
|
|
921
|
+
align-items: center !important;
|
|
922
|
+
justify-content: center !important;
|
|
923
|
+
z-index: 9999 !important;
|
|
924
|
+
padding: 1rem !important;
|
|
925
|
+
margin: 0 !important;
|
|
926
|
+
box-sizing: border-box !important;
|
|
927
|
+
animation: ${fadeIn2} 0.18s ease-out;
|
|
928
|
+
}
|
|
921
929
|
`;
|
|
922
930
|
var accentStyles = {
|
|
923
931
|
success: css5`
|
|
924
|
-
color: ${theme.colors.green2};
|
|
932
|
+
color: ${theme.colors.green2} !important;
|
|
925
933
|
`,
|
|
926
934
|
error: css5`
|
|
927
|
-
color: ${theme.colors.red};
|
|
935
|
+
color: ${theme.colors.red} !important;
|
|
928
936
|
`
|
|
929
937
|
};
|
|
930
938
|
var Container = styled6.div`
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
939
|
+
&& {
|
|
940
|
+
position: relative !important;
|
|
941
|
+
background: ${theme.colors.white} !important;
|
|
942
|
+
border: none !important;
|
|
943
|
+
border-radius: 0.75rem !important;
|
|
944
|
+
box-shadow: ${theme.shadows.shadow500} !important;
|
|
945
|
+
max-width: 420px !important;
|
|
946
|
+
width: 100% !important;
|
|
947
|
+
padding: 1.75rem 1.5rem 1.25rem !important;
|
|
948
|
+
margin: 0 !important;
|
|
949
|
+
box-sizing: border-box !important;
|
|
950
|
+
font-family: ${theme.fonts.primary} !important;
|
|
951
|
+
animation: ${slideIn} 0.22s ease-out;
|
|
952
|
+
}
|
|
940
953
|
|
|
941
|
-
|
|
942
|
-
content: "";
|
|
943
|
-
display: block;
|
|
944
|
-
width: 56px;
|
|
945
|
-
height: 4px;
|
|
946
|
-
border-radius: 999px;
|
|
947
|
-
margin: 0 auto 1rem;
|
|
948
|
-
|
|
954
|
+
&&::before {
|
|
955
|
+
content: "" !important;
|
|
956
|
+
display: block !important;
|
|
957
|
+
width: 56px !important;
|
|
958
|
+
height: 4px !important;
|
|
959
|
+
border-radius: 999px !important;
|
|
960
|
+
margin: 0 auto 1rem !important;
|
|
961
|
+
padding: 0 !important;
|
|
962
|
+
background: ${({ $type }) => $type === "success" ? theme.colors.green2 : theme.colors.red} !important;
|
|
949
963
|
}
|
|
950
964
|
|
|
951
|
-
h2 {
|
|
952
|
-
margin: 0 0 0.5rem;
|
|
953
|
-
|
|
954
|
-
font-
|
|
955
|
-
|
|
965
|
+
&& h2 {
|
|
966
|
+
margin: 0 0 0.5rem !important;
|
|
967
|
+
padding: 0 !important;
|
|
968
|
+
font-family: ${theme.fonts.primary} !important;
|
|
969
|
+
font-size: 1.25rem !important;
|
|
970
|
+
font-weight: 700 !important;
|
|
971
|
+
line-height: 1.3 !important;
|
|
972
|
+
text-align: center !important;
|
|
956
973
|
${({ $type }) => accentStyles[$type]}
|
|
957
974
|
}
|
|
958
975
|
|
|
959
|
-
p {
|
|
960
|
-
margin: 0 0 1.5rem;
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
976
|
+
&& p {
|
|
977
|
+
margin: 0 0 1.5rem !important;
|
|
978
|
+
padding: 0 !important;
|
|
979
|
+
font-family: ${theme.fonts.primary} !important;
|
|
980
|
+
font-size: 0.95rem !important;
|
|
981
|
+
font-weight: 400 !important;
|
|
982
|
+
line-height: 1.45 !important;
|
|
983
|
+
text-align: center !important;
|
|
984
|
+
color: ${theme.colors.black} !important;
|
|
965
985
|
}
|
|
966
986
|
`;
|
|
967
987
|
var CloseButton = styled6.button`
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
988
|
+
&& {
|
|
989
|
+
position: absolute !important;
|
|
990
|
+
top: 0.5rem !important;
|
|
991
|
+
right: 0.5rem !important;
|
|
992
|
+
background: transparent !important;
|
|
993
|
+
border: none !important;
|
|
994
|
+
cursor: pointer !important;
|
|
995
|
+
color: ${theme.colors.gray550} !important;
|
|
996
|
+
padding: 0.25rem !important;
|
|
997
|
+
margin: 0 !important;
|
|
998
|
+
display: inline-flex !important;
|
|
999
|
+
align-items: center !important;
|
|
1000
|
+
justify-content: center !important;
|
|
1001
|
+
border-radius: 999px !important;
|
|
1002
|
+
box-sizing: border-box !important;
|
|
1003
|
+
transition: background 0.15s, color 0.15s;
|
|
1004
|
+
}
|
|
981
1005
|
|
|
982
|
-
|
|
983
|
-
background: ${theme.colors.gray300};
|
|
984
|
-
color: ${theme.colors.black};
|
|
1006
|
+
&&:hover {
|
|
1007
|
+
background: ${theme.colors.gray300} !important;
|
|
1008
|
+
color: ${theme.colors.black} !important;
|
|
985
1009
|
}
|
|
986
1010
|
|
|
987
|
-
svg {
|
|
988
|
-
width: 1.1rem;
|
|
989
|
-
height: 1.1rem;
|
|
1011
|
+
&& svg {
|
|
1012
|
+
width: 1.1rem !important;
|
|
1013
|
+
height: 1.1rem !important;
|
|
990
1014
|
}
|
|
991
1015
|
`;
|
|
992
1016
|
var PrimaryButton = styled6.button`
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1017
|
+
&& {
|
|
1018
|
+
display: block !important;
|
|
1019
|
+
width: 100% !important;
|
|
1020
|
+
padding: 0.75rem 1rem !important;
|
|
1021
|
+
margin: 0 !important;
|
|
1022
|
+
border: none !important;
|
|
1023
|
+
border-radius: 0.5rem !important;
|
|
1024
|
+
background: ${({ $bgColor }) => $bgColor || theme.colors.yellow500} !important;
|
|
1025
|
+
color: ${({ $textColor }) => $textColor || theme.colors.black} !important;
|
|
1026
|
+
font-family: ${theme.fonts.primary} !important;
|
|
1027
|
+
font-size: 1rem !important;
|
|
1028
|
+
font-weight: 700 !important;
|
|
1029
|
+
line-height: 1.2 !important;
|
|
1030
|
+
text-align: center !important;
|
|
1031
|
+
cursor: pointer !important;
|
|
1032
|
+
box-sizing: border-box !important;
|
|
1033
|
+
transition: filter 0.15s;
|
|
1034
|
+
}
|
|
1005
1035
|
|
|
1006
|
-
|
|
1007
|
-
filter: brightness(0.95);
|
|
1036
|
+
&&:hover {
|
|
1037
|
+
filter: brightness(0.95) !important;
|
|
1038
|
+
}
|
|
1039
|
+
|
|
1040
|
+
&&:focus-visible {
|
|
1041
|
+
outline: 2px solid ${theme.colors.yellow400} !important;
|
|
1042
|
+
outline-offset: 2px !important;
|
|
1043
|
+
}
|
|
1044
|
+
`;
|
|
1045
|
+
var SecondaryText = styled6.p`
|
|
1046
|
+
&& {
|
|
1047
|
+
margin: 2.25rem 0 0.75rem !important;
|
|
1048
|
+
padding: 0 !important;
|
|
1049
|
+
font-family: ${theme.fonts.primary} !important;
|
|
1050
|
+
font-size: 0.85rem !important;
|
|
1051
|
+
font-weight: 400 !important;
|
|
1052
|
+
font-style: italic !important;
|
|
1053
|
+
line-height: 1.4 !important;
|
|
1054
|
+
text-align: center !important;
|
|
1055
|
+
color: ${theme.colors.gray550} !important;
|
|
1056
|
+
}
|
|
1057
|
+
`;
|
|
1058
|
+
var SecondaryButton = styled6.button`
|
|
1059
|
+
&& {
|
|
1060
|
+
display: block !important;
|
|
1061
|
+
width: 100% !important;
|
|
1062
|
+
padding: 0.65rem 1rem !important;
|
|
1063
|
+
margin: 0 !important;
|
|
1064
|
+
border: 1px solid ${({ $bgColor }) => $bgColor || theme.colors.yellow500} !important;
|
|
1065
|
+
border-radius: 0.5rem !important;
|
|
1066
|
+
background: transparent !important;
|
|
1067
|
+
color: ${({ $bgColor }) => $bgColor || theme.colors.black} !important;
|
|
1068
|
+
font-family: ${theme.fonts.primary} !important;
|
|
1069
|
+
font-size: 0.95rem !important;
|
|
1070
|
+
font-weight: 600 !important;
|
|
1071
|
+
line-height: 1.2 !important;
|
|
1072
|
+
text-align: center !important;
|
|
1073
|
+
cursor: pointer !important;
|
|
1074
|
+
box-sizing: border-box !important;
|
|
1075
|
+
transition: background 0.15s, color 0.15s;
|
|
1076
|
+
}
|
|
1077
|
+
|
|
1078
|
+
&&:hover {
|
|
1079
|
+
background: ${({ $bgColor }) => $bgColor || theme.colors.yellow500} !important;
|
|
1080
|
+
color: ${({ $textColor }) => $textColor || theme.colors.black} !important;
|
|
1008
1081
|
}
|
|
1009
1082
|
|
|
1010
|
-
|
|
1011
|
-
outline: 2px solid ${theme.colors.yellow400};
|
|
1012
|
-
outline-offset: 2px;
|
|
1083
|
+
&&:focus-visible {
|
|
1084
|
+
outline: 2px solid ${theme.colors.yellow400} !important;
|
|
1085
|
+
outline-offset: 2px !important;
|
|
1013
1086
|
}
|
|
1014
1087
|
`;
|
|
1015
1088
|
|
|
1016
1089
|
// src/components/Modal/index.tsx
|
|
1017
|
-
import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
1090
|
+
import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
1018
1091
|
var Modal = ({
|
|
1019
1092
|
type,
|
|
1020
1093
|
title,
|
|
@@ -1023,7 +1096,10 @@ var Modal = ({
|
|
|
1023
1096
|
onPrimaryAction,
|
|
1024
1097
|
onClose,
|
|
1025
1098
|
primaryButtonBgColor,
|
|
1026
|
-
primaryButtonTextColor
|
|
1099
|
+
primaryButtonTextColor,
|
|
1100
|
+
secondaryText,
|
|
1101
|
+
secondaryButtonText,
|
|
1102
|
+
onSecondaryAction
|
|
1027
1103
|
}) => {
|
|
1028
1104
|
const primaryButtonRef = useRef(null);
|
|
1029
1105
|
useEffect3(() => {
|
|
@@ -1043,6 +1119,7 @@ var Modal = ({
|
|
|
1043
1119
|
onClose();
|
|
1044
1120
|
}
|
|
1045
1121
|
};
|
|
1122
|
+
const hasSecondaryAction = secondaryButtonText !== void 0 && onSecondaryAction !== void 0;
|
|
1046
1123
|
return /* @__PURE__ */ jsx4(Overlay, { onClick: handleOverlayClick, role: "dialog", "aria-modal": "true", "aria-label": title, children: /* @__PURE__ */ jsxs4(Container, { $type: type, children: [
|
|
1047
1124
|
/* @__PURE__ */ jsx4(CloseButton, { onClick: onClose, "aria-label": "Fechar", children: /* @__PURE__ */ jsx4(HiX2, {}) }),
|
|
1048
1125
|
/* @__PURE__ */ jsx4("h2", { children: title }),
|
|
@@ -1057,7 +1134,20 @@ var Modal = ({
|
|
|
1057
1134
|
type: "button",
|
|
1058
1135
|
children: primaryButtonText
|
|
1059
1136
|
}
|
|
1060
|
-
)
|
|
1137
|
+
),
|
|
1138
|
+
hasSecondaryAction && /* @__PURE__ */ jsxs4(Fragment, { children: [
|
|
1139
|
+
secondaryText && /* @__PURE__ */ jsx4(SecondaryText, { children: secondaryText }),
|
|
1140
|
+
/* @__PURE__ */ jsx4(
|
|
1141
|
+
SecondaryButton,
|
|
1142
|
+
{
|
|
1143
|
+
onClick: onSecondaryAction,
|
|
1144
|
+
$bgColor: primaryButtonBgColor,
|
|
1145
|
+
$textColor: primaryButtonTextColor,
|
|
1146
|
+
type: "button",
|
|
1147
|
+
children: secondaryButtonText
|
|
1148
|
+
}
|
|
1149
|
+
)
|
|
1150
|
+
] })
|
|
1061
1151
|
] }) });
|
|
1062
1152
|
};
|
|
1063
1153
|
|
|
@@ -1354,19 +1444,19 @@ var ENVIRONMENTS = {
|
|
|
1354
1444
|
chatUrl: "https://crm.mitrerealty.com.br/wcc/UserLoginSubmit.do"
|
|
1355
1445
|
}
|
|
1356
1446
|
};
|
|
1357
|
-
var resolveEnvironment = (
|
|
1358
|
-
return ENVIRONMENTS[
|
|
1447
|
+
var resolveEnvironment = (environment = "homol") => {
|
|
1448
|
+
return ENVIRONMENTS[environment] ?? null;
|
|
1359
1449
|
};
|
|
1360
1450
|
|
|
1361
1451
|
// src/components/Form/index.tsx
|
|
1362
|
-
import { Fragment, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
1452
|
+
import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
1363
1453
|
var phoneUtil = PhoneNumberUtil.getInstance();
|
|
1364
|
-
var
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
return
|
|
1369
|
-
})(
|
|
1454
|
+
var ContactPreference = /* @__PURE__ */ ((ContactPreference2) => {
|
|
1455
|
+
ContactPreference2["Whatsapp"] = "Whatsapp";
|
|
1456
|
+
ContactPreference2["Email"] = "Email";
|
|
1457
|
+
ContactPreference2["Ligacao"] = "Liga\xE7\xE3o";
|
|
1458
|
+
return ContactPreference2;
|
|
1459
|
+
})(ContactPreference || {});
|
|
1370
1460
|
var WHATSAPP_MESSAGE = "Ol\xE1! Tenho interesse e gostaria de mais informa\xE7\xF5es.";
|
|
1371
1461
|
var WHATSAPP_TITLE = "Fale com um corretor por WhatsApp";
|
|
1372
1462
|
var WHATSAPP_SUBTITLE = "Informe seus dados para contato.";
|
|
@@ -1378,10 +1468,13 @@ var MODAL_ERROR_TITLE = "N\xE3o foi poss\xEDvel completar seu contato";
|
|
|
1378
1468
|
var MODAL_ERROR_MESSAGE = "Por favor, tente novamente em alguns instantes.";
|
|
1379
1469
|
var MODAL_ERROR_BUTTON_TEXT = "OK";
|
|
1380
1470
|
var MODAL_SUCCESS_TITLE = "Cadastro realizado!";
|
|
1381
|
-
var
|
|
1471
|
+
var MODAL_SUCCESS_AUTO_REDIRECT_WHATSAPP = "Voc\xEA est\xE1 sendo redirecionado automaticamente para o WhatsApp.";
|
|
1472
|
+
var MODAL_SUCCESS_AUTO_REDIRECT_CHAT = "Voc\xEA est\xE1 sendo redirecionado automaticamente para iniciar o atendimento via chat.";
|
|
1473
|
+
var MODAL_SUCCESS_OK_BUTTON_TEXT = "OK";
|
|
1474
|
+
var MODAL_SUCCESS_FALLBACK_INSTRUCTION = "Caso n\xE3o tenha sido direcionado automaticamente, clique no bot\xE3o abaixo para abrir a aplica\xE7\xE3o:";
|
|
1382
1475
|
var MODAL_SUCCESS_BUTTON_WHATSAPP = "Abrir WhatsApp";
|
|
1383
|
-
var MODAL_SUCCESS_MESSAGE_CHAT = "Clique abaixo para iniciar o atendimento.";
|
|
1384
1476
|
var MODAL_SUCCESS_BUTTON_CHAT = "Iniciar atendimento";
|
|
1477
|
+
var REDIRECT_DELAY_MS = 0;
|
|
1385
1478
|
function buildWhatsappUrl(phone) {
|
|
1386
1479
|
const digits = phone.replace(/\D/g, "");
|
|
1387
1480
|
const text = encodeURIComponent(WHATSAPP_MESSAGE);
|
|
@@ -1401,6 +1494,46 @@ function submitChatInNewTab(chatUrl, virtualObj) {
|
|
|
1401
1494
|
form.submit();
|
|
1402
1495
|
document.body.removeChild(form);
|
|
1403
1496
|
}
|
|
1497
|
+
function isTabAlive(tab) {
|
|
1498
|
+
return tab !== null && !tab.closed;
|
|
1499
|
+
}
|
|
1500
|
+
function writeStatusHtmlToTab(tab, phase, channel) {
|
|
1501
|
+
try {
|
|
1502
|
+
const destinationLabel = channel === "whatsapp" ? "WhatsApp" : "atendimento";
|
|
1503
|
+
const isSuccess = phase === "success";
|
|
1504
|
+
const headline = isSuccess ? "Cadastro realizado!" : "Aguarde...";
|
|
1505
|
+
const message = isSuccess ? `Abrindo o ${destinationLabel} em instantes...` : "Estamos registrando seu cadastro...";
|
|
1506
|
+
const headlineColor = isSuccess ? "#2DCE68" : "#535353";
|
|
1507
|
+
const indicator = isSuccess ? '<div class="check" aria-hidden="true"></div>' : '<div class="spinner" aria-hidden="true"></div>';
|
|
1508
|
+
tab.document.open();
|
|
1509
|
+
tab.document.write(
|
|
1510
|
+
`<!DOCTYPE html><html lang="pt-br"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>${headline}</title><style>html,body{margin:0;padding:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:#FFF;color:#2F2F2F;}body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1rem;}.box{text-align:center;max-width:360px;}.logo{width:140px;max-width:60%;height:auto;margin:0 auto 1.5rem;display:block;}.spinner{width:40px;height:40px;margin:0 auto 1.25rem;border:4px solid #EBEBEB;border-top-color:#2DCE68;border-radius:50%;animation:spin .9s linear infinite;}.check{width:52px;height:52px;margin:0 auto 1.25rem;border-radius:50%;background:#2DCE68;position:relative;animation:pop .25s ease-out;}.check::after{content:"";position:absolute;top:14px;left:19px;width:10px;height:20px;border:solid #FFF;border-width:0 4px 4px 0;transform:rotate(45deg);}.headline{font-size:1.35rem;font-weight:700;color:${headlineColor};margin:0 0 0.5rem;}.msg{font-size:.95rem;line-height:1.4;color:#535353;margin:0;}@keyframes spin{to{transform:rotate(360deg);}}@keyframes pop{from{transform:scale(0.6);opacity:0;}to{transform:scale(1);opacity:1;}}</style></head><body><div class="box"><img class="logo" src="https://portal.mitrerealty.com.br/Clientes/assets/images/mitre.svg" alt="Mitre Realty" onerror="this.style.display='none'"/>` + indicator + `<div class="headline">${headline}</div><div class="msg">${message}</div></div></body></html>`
|
|
1511
|
+
);
|
|
1512
|
+
tab.document.close();
|
|
1513
|
+
} catch {
|
|
1514
|
+
}
|
|
1515
|
+
}
|
|
1516
|
+
function escapeHtmlAttr(value) {
|
|
1517
|
+
return value.replace(/&/g, "&").replace(/'/g, "'").replace(/"/g, """).replace(/</g, "<").replace(/>/g, ">");
|
|
1518
|
+
}
|
|
1519
|
+
function navigateTabToWhatsapp(tab, targetUrl) {
|
|
1520
|
+
try {
|
|
1521
|
+
tab.location.href = targetUrl;
|
|
1522
|
+
} catch {
|
|
1523
|
+
}
|
|
1524
|
+
}
|
|
1525
|
+
function submitChatInPreOpenedTab(tab, chatUrl, virtualObj) {
|
|
1526
|
+
try {
|
|
1527
|
+
const escapedJson = escapeHtmlAttr(JSON.stringify(virtualObj));
|
|
1528
|
+
const escapedUrl = escapeHtmlAttr(chatUrl);
|
|
1529
|
+
tab.document.open();
|
|
1530
|
+
tab.document.write(
|
|
1531
|
+
`<!DOCTYPE html><html><head><meta charset="utf-8"/><title>Abrindo atendimento...</title></head><body><form id="f" method="POST" action="${escapedUrl}"><input type="hidden" name="virtual_obj" value="${escapedJson}"/></form><script>document.getElementById('f').submit();</script></body></html>`
|
|
1532
|
+
);
|
|
1533
|
+
tab.document.close();
|
|
1534
|
+
} catch {
|
|
1535
|
+
}
|
|
1536
|
+
}
|
|
1404
1537
|
var isPhoneValid = (phone) => {
|
|
1405
1538
|
try {
|
|
1406
1539
|
return phoneUtil.isValidNumber(phoneUtil.parseAndKeepRawInput(phone));
|
|
@@ -1432,8 +1565,8 @@ var schemaWithProduct = yup.object().shape({
|
|
|
1432
1565
|
var schema = yup.object().shape(baseSchema);
|
|
1433
1566
|
var MitreFormComponent = React2.forwardRef(({
|
|
1434
1567
|
products,
|
|
1435
|
-
|
|
1436
|
-
|
|
1568
|
+
environment = "homol",
|
|
1569
|
+
channel = "form",
|
|
1437
1570
|
showHeader = true,
|
|
1438
1571
|
title = "Atendimento por mensagem",
|
|
1439
1572
|
subtitle = "Informe seus dados e retornaremos a mensagem.",
|
|
@@ -1447,10 +1580,12 @@ var MitreFormComponent = React2.forwardRef(({
|
|
|
1447
1580
|
inputFocusBorderColor = theme.colors.yellow500,
|
|
1448
1581
|
inputPlaceholderColor = theme.colors.gray100,
|
|
1449
1582
|
inputTextColor = theme.colors.black,
|
|
1450
|
-
|
|
1583
|
+
showContactPreference = false,
|
|
1451
1584
|
idProdutoTerceiro,
|
|
1452
1585
|
idEmpreendimento,
|
|
1453
|
-
naoCriarEvento
|
|
1586
|
+
naoCriarEvento,
|
|
1587
|
+
onSuccess,
|
|
1588
|
+
onError
|
|
1454
1589
|
}, ref) => {
|
|
1455
1590
|
useMontserratFont();
|
|
1456
1591
|
const [loading, setIsLoading] = useState3(false);
|
|
@@ -1483,53 +1618,53 @@ var MitreFormComponent = React2.forwardRef(({
|
|
|
1483
1618
|
}
|
|
1484
1619
|
return null;
|
|
1485
1620
|
};
|
|
1486
|
-
const env = resolveEnvironment(
|
|
1487
|
-
const
|
|
1621
|
+
const env = resolveEnvironment(environment);
|
|
1622
|
+
const validateEnvironmentConfig = () => {
|
|
1488
1623
|
if (!env) {
|
|
1489
|
-
return `
|
|
1624
|
+
return `environment='${environment}' n\xE3o \xE9 reconhecido. Use 'homol' ou 'prod'.`;
|
|
1490
1625
|
}
|
|
1491
1626
|
if (!env.apiUrl || !env.apiToken) {
|
|
1492
|
-
return `Configura\xE7\xE3o interna do
|
|
1627
|
+
return `Configura\xE7\xE3o interna do environment '${environment}' est\xE1 incompleta (apiUrl/apiToken).`;
|
|
1493
1628
|
}
|
|
1494
1629
|
return null;
|
|
1495
1630
|
};
|
|
1496
1631
|
const validateWhatsappConfig = () => {
|
|
1497
|
-
if (
|
|
1632
|
+
if (channel !== "whatsapp") return null;
|
|
1498
1633
|
if (!env) return null;
|
|
1499
1634
|
const raw = env.whatsappPhone?.trim() ?? "";
|
|
1500
1635
|
if (!raw) {
|
|
1501
|
-
return `
|
|
1636
|
+
return `channel='whatsapp' exige whatsappPhone no environment '${environment}'.`;
|
|
1502
1637
|
}
|
|
1503
1638
|
const normalized = raw.startsWith("+") ? raw : `+${raw}`;
|
|
1504
1639
|
if (!isPhoneValid(normalized)) {
|
|
1505
|
-
return `whatsappPhone do
|
|
1640
|
+
return `whatsappPhone do environment '${environment}' \xE9 inv\xE1lido (${JSON.stringify(env.whatsappPhone)}).`;
|
|
1506
1641
|
}
|
|
1507
1642
|
return null;
|
|
1508
1643
|
};
|
|
1509
1644
|
const validateChatConfig = () => {
|
|
1510
|
-
if (
|
|
1645
|
+
if (channel !== "chat") return null;
|
|
1511
1646
|
if (!env) return null;
|
|
1512
1647
|
const raw = env.chatUrl?.trim() ?? "";
|
|
1513
1648
|
if (!raw) {
|
|
1514
|
-
return `
|
|
1649
|
+
return `channel='chat' exige chatUrl no environment '${environment}'.`;
|
|
1515
1650
|
}
|
|
1516
1651
|
try {
|
|
1517
1652
|
const parsed = new URL(raw);
|
|
1518
1653
|
if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
|
|
1519
|
-
return `chatUrl do
|
|
1654
|
+
return `chatUrl do environment '${environment}' precisa ter protocolo http(s) (recebido: ${JSON.stringify(env.chatUrl)}).`;
|
|
1520
1655
|
}
|
|
1521
1656
|
} catch {
|
|
1522
|
-
return `chatUrl do
|
|
1657
|
+
return `chatUrl do environment '${environment}' n\xE3o \xE9 URL absoluta v\xE1lida (recebido: ${JSON.stringify(env.chatUrl)}).`;
|
|
1523
1658
|
}
|
|
1524
1659
|
return null;
|
|
1525
1660
|
};
|
|
1526
1661
|
const productsValidationError = validateProducts();
|
|
1527
|
-
const
|
|
1662
|
+
const environmentConfigError = validateEnvironmentConfig();
|
|
1528
1663
|
const whatsappConfigError = validateWhatsappConfig();
|
|
1529
1664
|
const chatConfigError = validateChatConfig();
|
|
1530
|
-
const
|
|
1531
|
-
const effectiveTitle =
|
|
1532
|
-
const effectiveSubtitle =
|
|
1665
|
+
const effectiveShowContactPreference = channel === "whatsapp" || channel === "chat" ? false : showContactPreference;
|
|
1666
|
+
const effectiveTitle = channel === "whatsapp" ? WHATSAPP_TITLE : channel === "chat" ? CHAT_TITLE : title;
|
|
1667
|
+
const effectiveSubtitle = channel === "whatsapp" ? WHATSAPP_SUBTITLE : channel === "chat" ? CHAT_SUBTITLE : subtitle;
|
|
1533
1668
|
const [utm, setUtm] = useState3({ utm_source: "direto", createdAt: (/* @__PURE__ */ new Date()).toISOString() });
|
|
1534
1669
|
const formSchema = products && products.length > 1 ? schemaWithProduct : schema;
|
|
1535
1670
|
const { control, register, handleSubmit, formState: { errors }, reset, clearErrors } = useForm({
|
|
@@ -1569,10 +1704,11 @@ var MitreFormComponent = React2.forwardRef(({
|
|
|
1569
1704
|
const phoneDigitsOnly = phoneValue?.replace(/\D/g, "") || "";
|
|
1570
1705
|
const message = "Gostaria de mais informa\xE7\xF5es sobre o produto";
|
|
1571
1706
|
setActionModal(null);
|
|
1707
|
+
let preOpenedTab = null;
|
|
1572
1708
|
try {
|
|
1573
1709
|
setIsLoading(true);
|
|
1574
1710
|
if (!env) {
|
|
1575
|
-
throw new Error("
|
|
1711
|
+
throw new Error("Environment n\xE3o resolvido");
|
|
1576
1712
|
}
|
|
1577
1713
|
if (!products || products.length === 0) {
|
|
1578
1714
|
throw new Error("Par\xE2metros obrigat\xF3rios n\xE3o informados");
|
|
@@ -1591,7 +1727,7 @@ var MitreFormComponent = React2.forwardRef(({
|
|
|
1591
1727
|
selectedProduct = foundProduct;
|
|
1592
1728
|
}
|
|
1593
1729
|
const paginaAtual = typeof window !== "undefined" ? window.location.href : void 0;
|
|
1594
|
-
const naoCriarEventoEfetivo =
|
|
1730
|
+
const naoCriarEventoEfetivo = channel !== "form" && (naoCriarEvento ?? true);
|
|
1595
1731
|
const requestBody = {
|
|
1596
1732
|
name,
|
|
1597
1733
|
email,
|
|
@@ -1602,9 +1738,9 @@ var MitreFormComponent = React2.forwardRef(({
|
|
|
1602
1738
|
utm_campaign: utm.utm_campaign,
|
|
1603
1739
|
utm_medium: utm.utm_medium,
|
|
1604
1740
|
utm_term: utm.utm_term,
|
|
1605
|
-
...
|
|
1606
|
-
...
|
|
1607
|
-
|
|
1741
|
+
...channel === "whatsapp" ? { preferencia_contato: "Whatsapp" /* Whatsapp */ } : effectiveShowContactPreference && preferencia_contato ? { preferencia_contato } : {},
|
|
1742
|
+
...channel !== "form" ? {
|
|
1743
|
+
channel,
|
|
1608
1744
|
...paginaAtual ? { pagina: paginaAtual } : {},
|
|
1609
1745
|
// Paridade com atendimento.html legado: o mesmo <form id="chat-form">
|
|
1610
1746
|
// era usado para chat e whatsapp, portanto is_chat=true ia em ambos.
|
|
@@ -1614,6 +1750,12 @@ var MitreFormComponent = React2.forwardRef(({
|
|
|
1614
1750
|
...naoCriarEventoEfetivo ? { naoCriarEvento: true } : {}
|
|
1615
1751
|
} : {}
|
|
1616
1752
|
};
|
|
1753
|
+
if (channel !== "form" && typeof window !== "undefined") {
|
|
1754
|
+
preOpenedTab = window.open("about:blank", "_blank");
|
|
1755
|
+
if (isTabAlive(preOpenedTab)) {
|
|
1756
|
+
writeStatusHtmlToTab(preOpenedTab, "processing", channel);
|
|
1757
|
+
}
|
|
1758
|
+
}
|
|
1617
1759
|
const response = await fetch(`${env.apiUrl}/leads`, {
|
|
1618
1760
|
method: "POST",
|
|
1619
1761
|
headers: {
|
|
@@ -1628,13 +1770,24 @@ var MitreFormComponent = React2.forwardRef(({
|
|
|
1628
1770
|
const responseData = await response.json();
|
|
1629
1771
|
const leadId = responseData.leadId || responseData.id || "";
|
|
1630
1772
|
resetForm();
|
|
1631
|
-
|
|
1773
|
+
onSuccess?.(requestBody, leadId);
|
|
1774
|
+
if (channel === "whatsapp") {
|
|
1775
|
+
const targetUrl = buildWhatsappUrl(env.whatsappPhone);
|
|
1632
1776
|
setActionModal({
|
|
1633
1777
|
kind: "success",
|
|
1634
|
-
|
|
1635
|
-
targetUrl
|
|
1778
|
+
channel: "whatsapp",
|
|
1779
|
+
targetUrl
|
|
1636
1780
|
});
|
|
1637
|
-
|
|
1781
|
+
if (isTabAlive(preOpenedTab)) {
|
|
1782
|
+
writeStatusHtmlToTab(preOpenedTab, "success", "whatsapp");
|
|
1783
|
+
const tabToNavigate = preOpenedTab;
|
|
1784
|
+
setTimeout(() => {
|
|
1785
|
+
if (isTabAlive(tabToNavigate)) {
|
|
1786
|
+
navigateTabToWhatsapp(tabToNavigate, targetUrl);
|
|
1787
|
+
}
|
|
1788
|
+
}, REDIRECT_DELAY_MS);
|
|
1789
|
+
}
|
|
1790
|
+
} else if (channel === "chat") {
|
|
1638
1791
|
const virtualObj = {
|
|
1639
1792
|
...requestBody,
|
|
1640
1793
|
externalOriginId: leadId,
|
|
@@ -1645,42 +1798,57 @@ var MitreFormComponent = React2.forwardRef(({
|
|
|
1645
1798
|
};
|
|
1646
1799
|
setActionModal({
|
|
1647
1800
|
kind: "success",
|
|
1648
|
-
|
|
1801
|
+
channel: "chat",
|
|
1649
1802
|
chatUrl: env.chatUrl,
|
|
1650
1803
|
virtualObj
|
|
1651
1804
|
});
|
|
1805
|
+
if (isTabAlive(preOpenedTab)) {
|
|
1806
|
+
writeStatusHtmlToTab(preOpenedTab, "success", "chat");
|
|
1807
|
+
const tabToSubmit = preOpenedTab;
|
|
1808
|
+
const chatUrlSnapshot = env.chatUrl;
|
|
1809
|
+
setTimeout(() => {
|
|
1810
|
+
if (isTabAlive(tabToSubmit)) {
|
|
1811
|
+
submitChatInPreOpenedTab(tabToSubmit, chatUrlSnapshot, virtualObj);
|
|
1812
|
+
}
|
|
1813
|
+
}, REDIRECT_DELAY_MS);
|
|
1814
|
+
}
|
|
1652
1815
|
} else {
|
|
1653
1816
|
setSuccessMessage("Mensagem enviada com sucesso!");
|
|
1654
1817
|
}
|
|
1655
1818
|
} catch (err) {
|
|
1656
|
-
if (
|
|
1819
|
+
if (isTabAlive(preOpenedTab)) {
|
|
1820
|
+
preOpenedTab.close();
|
|
1821
|
+
}
|
|
1822
|
+
const error2 = err instanceof Error ? err : new Error("Erro desconhecido");
|
|
1823
|
+
if (channel === "whatsapp" || channel === "chat") {
|
|
1657
1824
|
setActionModal({ kind: "error" });
|
|
1658
1825
|
} else {
|
|
1659
1826
|
handleError(err);
|
|
1660
1827
|
}
|
|
1828
|
+
onError?.(error2);
|
|
1661
1829
|
} finally {
|
|
1662
1830
|
setIsLoading(false);
|
|
1663
1831
|
}
|
|
1664
1832
|
};
|
|
1665
|
-
if (productsValidationError ||
|
|
1833
|
+
if (productsValidationError || environmentConfigError || whatsappConfigError || chatConfigError) {
|
|
1666
1834
|
if (productsValidationError) {
|
|
1667
1835
|
console.error("Erro na valida\xE7\xE3o dos produtos:", productsValidationError);
|
|
1668
1836
|
}
|
|
1669
|
-
if (
|
|
1670
|
-
console.error("Erro na valida\xE7\xE3o do
|
|
1837
|
+
if (environmentConfigError) {
|
|
1838
|
+
console.error("Erro na valida\xE7\xE3o do environment:", environmentConfigError);
|
|
1671
1839
|
}
|
|
1672
1840
|
if (whatsappConfigError) {
|
|
1673
|
-
console.error("Erro na valida\xE7\xE3o do
|
|
1841
|
+
console.error("Erro na valida\xE7\xE3o do channel whatsapp:", whatsappConfigError);
|
|
1674
1842
|
}
|
|
1675
1843
|
if (chatConfigError) {
|
|
1676
|
-
console.error("Erro na valida\xE7\xE3o do
|
|
1844
|
+
console.error("Erro na valida\xE7\xE3o do channel chat:", chatConfigError);
|
|
1677
1845
|
}
|
|
1678
1846
|
return /* @__PURE__ */ jsx7(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: /* @__PURE__ */ jsxs7(HeaderContainer, { children: [
|
|
1679
1847
|
/* @__PURE__ */ jsx7(Title, { $textColor: textColor, children: "Erro no carregamento do formul\xE1rio!" }),
|
|
1680
1848
|
/* @__PURE__ */ jsx7(Subtitle, { $textColor: textColor, children: "N\xE3o foi poss\xEDvel carregar o formul\xE1rio. Tente novamente mais tarde." })
|
|
1681
1849
|
] }) });
|
|
1682
1850
|
}
|
|
1683
|
-
return /* @__PURE__ */ jsxs7(
|
|
1851
|
+
return /* @__PURE__ */ jsxs7(Fragment2, { children: [
|
|
1684
1852
|
error && /* @__PURE__ */ jsx7(
|
|
1685
1853
|
Alert,
|
|
1686
1854
|
{
|
|
@@ -1714,36 +1882,42 @@ var MitreFormComponent = React2.forwardRef(({
|
|
|
1714
1882
|
primaryButtonTextColor: buttonTextColor
|
|
1715
1883
|
}
|
|
1716
1884
|
),
|
|
1717
|
-
actionModal?.kind === "success" && actionModal.
|
|
1885
|
+
actionModal?.kind === "success" && actionModal.channel === "whatsapp" && /* @__PURE__ */ jsx7(
|
|
1718
1886
|
Modal,
|
|
1719
1887
|
{
|
|
1720
1888
|
type: "success",
|
|
1721
1889
|
title: MODAL_SUCCESS_TITLE,
|
|
1722
|
-
message:
|
|
1723
|
-
primaryButtonText:
|
|
1724
|
-
onPrimaryAction: () =>
|
|
1725
|
-
window.open(actionModal.targetUrl, "_blank", "noopener,noreferrer");
|
|
1726
|
-
setActionModal(null);
|
|
1727
|
-
},
|
|
1890
|
+
message: MODAL_SUCCESS_AUTO_REDIRECT_WHATSAPP,
|
|
1891
|
+
primaryButtonText: MODAL_SUCCESS_OK_BUTTON_TEXT,
|
|
1892
|
+
onPrimaryAction: () => setActionModal(null),
|
|
1728
1893
|
onClose: () => setActionModal(null),
|
|
1729
1894
|
primaryButtonBgColor: buttonBackgroundColor,
|
|
1730
|
-
primaryButtonTextColor: buttonTextColor
|
|
1895
|
+
primaryButtonTextColor: buttonTextColor,
|
|
1896
|
+
secondaryText: MODAL_SUCCESS_FALLBACK_INSTRUCTION,
|
|
1897
|
+
secondaryButtonText: MODAL_SUCCESS_BUTTON_WHATSAPP,
|
|
1898
|
+
onSecondaryAction: () => {
|
|
1899
|
+
window.open(actionModal.targetUrl, "_blank", "noopener,noreferrer");
|
|
1900
|
+
setActionModal(null);
|
|
1901
|
+
}
|
|
1731
1902
|
}
|
|
1732
1903
|
),
|
|
1733
|
-
actionModal?.kind === "success" && actionModal.
|
|
1904
|
+
actionModal?.kind === "success" && actionModal.channel === "chat" && /* @__PURE__ */ jsx7(
|
|
1734
1905
|
Modal,
|
|
1735
1906
|
{
|
|
1736
1907
|
type: "success",
|
|
1737
1908
|
title: MODAL_SUCCESS_TITLE,
|
|
1738
|
-
message:
|
|
1739
|
-
primaryButtonText:
|
|
1740
|
-
onPrimaryAction: () =>
|
|
1741
|
-
submitChatInNewTab(actionModal.chatUrl, actionModal.virtualObj);
|
|
1742
|
-
setActionModal(null);
|
|
1743
|
-
},
|
|
1909
|
+
message: MODAL_SUCCESS_AUTO_REDIRECT_CHAT,
|
|
1910
|
+
primaryButtonText: MODAL_SUCCESS_OK_BUTTON_TEXT,
|
|
1911
|
+
onPrimaryAction: () => setActionModal(null),
|
|
1744
1912
|
onClose: () => setActionModal(null),
|
|
1745
1913
|
primaryButtonBgColor: buttonBackgroundColor,
|
|
1746
|
-
primaryButtonTextColor: buttonTextColor
|
|
1914
|
+
primaryButtonTextColor: buttonTextColor,
|
|
1915
|
+
secondaryText: MODAL_SUCCESS_FALLBACK_INSTRUCTION,
|
|
1916
|
+
secondaryButtonText: MODAL_SUCCESS_BUTTON_CHAT,
|
|
1917
|
+
onSecondaryAction: () => {
|
|
1918
|
+
submitChatInNewTab(actionModal.chatUrl, actionModal.virtualObj);
|
|
1919
|
+
setActionModal(null);
|
|
1920
|
+
}
|
|
1747
1921
|
}
|
|
1748
1922
|
),
|
|
1749
1923
|
/* @__PURE__ */ jsxs7(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: [
|
|
@@ -1838,7 +2012,7 @@ var MitreFormComponent = React2.forwardRef(({
|
|
|
1838
2012
|
},
|
|
1839
2013
|
formKey
|
|
1840
2014
|
),
|
|
1841
|
-
|
|
2015
|
+
effectiveShowContactPreference && /* @__PURE__ */ jsxs7(FormControl, { isInvalid: !!errors.preferencia_contato, children: [
|
|
1842
2016
|
/* @__PURE__ */ jsx7(FormLabel, { htmlFor: "preferencia_contato", $textColor: textColor, children: "Prefer\xEAncia de Contato" }),
|
|
1843
2017
|
/* @__PURE__ */ jsxs7(
|
|
1844
2018
|
Select,
|
|
@@ -1852,14 +2026,14 @@ var MitreFormComponent = React2.forwardRef(({
|
|
|
1852
2026
|
$textColor: inputTextColor,
|
|
1853
2027
|
children: [
|
|
1854
2028
|
/* @__PURE__ */ jsx7("option", { value: "", disabled: true, children: "Selecione uma op\xE7\xE3o" }),
|
|
1855
|
-
Object.values(
|
|
2029
|
+
Object.values(ContactPreference).map((op) => /* @__PURE__ */ jsx7("option", { value: op, children: op }, op))
|
|
1856
2030
|
]
|
|
1857
2031
|
}
|
|
1858
2032
|
),
|
|
1859
2033
|
errors.preferencia_contato && /* @__PURE__ */ jsx7(FormErrorMessage, { children: errors.preferencia_contato.message })
|
|
1860
2034
|
] }),
|
|
1861
2035
|
/* @__PURE__ */ jsx7("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
|
|
1862
|
-
/* @__PURE__ */ jsx7(ButtonContainer, { children: /* @__PURE__ */ jsx7(Button2, { bgColor: buttonBackgroundColor, color: buttonTextColor, type: "submit", isSubmitting: loading, children:
|
|
2036
|
+
/* @__PURE__ */ jsx7(ButtonContainer, { children: /* @__PURE__ */ jsx7(Button2, { bgColor: buttonBackgroundColor, color: buttonTextColor, type: "submit", isSubmitting: loading, children: channel === "whatsapp" ? WHATSAPP_BUTTON_TEXT : channel === "chat" ? CHAT_BUTTON_TEXT : "Enviar mensagem" }) }),
|
|
1863
2037
|
/* @__PURE__ */ jsxs7("p", { children: [
|
|
1864
2038
|
"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",
|
|
1865
2039
|
" ",
|
|
@@ -1885,7 +2059,7 @@ var MitreFormComponent = React2.forwardRef(({
|
|
|
1885
2059
|
MitreFormComponent.displayName = "MitreFormComponent";
|
|
1886
2060
|
var Form_default = MitreFormComponent;
|
|
1887
2061
|
export {
|
|
1888
|
-
|
|
1889
|
-
|
|
2062
|
+
ContactPreference,
|
|
2063
|
+
Form_default as MitreFormComponent
|
|
1890
2064
|
};
|
|
1891
2065
|
//# sourceMappingURL=index.js.map
|