mitre-form-component 2.1.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 +54 -54
- package/dist/index.cjs +313 -144
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +22 -22
- package/dist/index.d.ts +22 -22
- package/dist/index.js +314 -145
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -30,8 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
30
30
|
// src/index.ts
|
|
31
31
|
var index_exports = {};
|
|
32
32
|
__export(index_exports, {
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
ContactPreference: () => ContactPreference,
|
|
34
|
+
MitreFormComponent: () => Form_default
|
|
35
35
|
});
|
|
36
36
|
module.exports = __toCommonJS(index_exports);
|
|
37
37
|
|
|
@@ -943,107 +943,180 @@ var slideIn = import_styled_components6.keyframes`
|
|
|
943
943
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
944
944
|
`;
|
|
945
945
|
var Overlay = import_styled_components6.default.div`
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
946
|
+
&& {
|
|
947
|
+
position: fixed !important;
|
|
948
|
+
inset: 0 !important;
|
|
949
|
+
top: 0 !important;
|
|
950
|
+
right: 0 !important;
|
|
951
|
+
bottom: 0 !important;
|
|
952
|
+
left: 0 !important;
|
|
953
|
+
background: rgba(0, 0, 0, 0.55) !important;
|
|
954
|
+
display: flex !important;
|
|
955
|
+
align-items: center !important;
|
|
956
|
+
justify-content: center !important;
|
|
957
|
+
z-index: 9999 !important;
|
|
958
|
+
padding: 1rem !important;
|
|
959
|
+
margin: 0 !important;
|
|
960
|
+
box-sizing: border-box !important;
|
|
961
|
+
animation: ${fadeIn2} 0.18s ease-out;
|
|
962
|
+
}
|
|
955
963
|
`;
|
|
956
964
|
var accentStyles = {
|
|
957
965
|
success: import_styled_components6.css`
|
|
958
|
-
color: ${theme.colors.green2};
|
|
966
|
+
color: ${theme.colors.green2} !important;
|
|
959
967
|
`,
|
|
960
968
|
error: import_styled_components6.css`
|
|
961
|
-
color: ${theme.colors.red};
|
|
969
|
+
color: ${theme.colors.red} !important;
|
|
962
970
|
`
|
|
963
971
|
};
|
|
964
972
|
var Container = import_styled_components6.default.div`
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
973
|
+
&& {
|
|
974
|
+
position: relative !important;
|
|
975
|
+
background: ${theme.colors.white} !important;
|
|
976
|
+
border: none !important;
|
|
977
|
+
border-radius: 0.75rem !important;
|
|
978
|
+
box-shadow: ${theme.shadows.shadow500} !important;
|
|
979
|
+
max-width: 420px !important;
|
|
980
|
+
width: 100% !important;
|
|
981
|
+
padding: 1.75rem 1.5rem 1.25rem !important;
|
|
982
|
+
margin: 0 !important;
|
|
983
|
+
box-sizing: border-box !important;
|
|
984
|
+
font-family: ${theme.fonts.primary} !important;
|
|
985
|
+
animation: ${slideIn} 0.22s ease-out;
|
|
986
|
+
}
|
|
974
987
|
|
|
975
|
-
|
|
976
|
-
content: "";
|
|
977
|
-
display: block;
|
|
978
|
-
width: 56px;
|
|
979
|
-
height: 4px;
|
|
980
|
-
border-radius: 999px;
|
|
981
|
-
margin: 0 auto 1rem;
|
|
982
|
-
|
|
988
|
+
&&::before {
|
|
989
|
+
content: "" !important;
|
|
990
|
+
display: block !important;
|
|
991
|
+
width: 56px !important;
|
|
992
|
+
height: 4px !important;
|
|
993
|
+
border-radius: 999px !important;
|
|
994
|
+
margin: 0 auto 1rem !important;
|
|
995
|
+
padding: 0 !important;
|
|
996
|
+
background: ${({ $type }) => $type === "success" ? theme.colors.green2 : theme.colors.red} !important;
|
|
983
997
|
}
|
|
984
998
|
|
|
985
|
-
h2 {
|
|
986
|
-
margin: 0 0 0.5rem;
|
|
987
|
-
|
|
988
|
-
font-
|
|
989
|
-
|
|
999
|
+
&& h2 {
|
|
1000
|
+
margin: 0 0 0.5rem !important;
|
|
1001
|
+
padding: 0 !important;
|
|
1002
|
+
font-family: ${theme.fonts.primary} !important;
|
|
1003
|
+
font-size: 1.25rem !important;
|
|
1004
|
+
font-weight: 700 !important;
|
|
1005
|
+
line-height: 1.3 !important;
|
|
1006
|
+
text-align: center !important;
|
|
990
1007
|
${({ $type }) => accentStyles[$type]}
|
|
991
1008
|
}
|
|
992
1009
|
|
|
993
|
-
p {
|
|
994
|
-
margin: 0 0 1.5rem;
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
1010
|
+
&& p {
|
|
1011
|
+
margin: 0 0 1.5rem !important;
|
|
1012
|
+
padding: 0 !important;
|
|
1013
|
+
font-family: ${theme.fonts.primary} !important;
|
|
1014
|
+
font-size: 0.95rem !important;
|
|
1015
|
+
font-weight: 400 !important;
|
|
1016
|
+
line-height: 1.45 !important;
|
|
1017
|
+
text-align: center !important;
|
|
1018
|
+
color: ${theme.colors.black} !important;
|
|
999
1019
|
}
|
|
1000
1020
|
`;
|
|
1001
1021
|
var CloseButton = import_styled_components6.default.button`
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1022
|
+
&& {
|
|
1023
|
+
position: absolute !important;
|
|
1024
|
+
top: 0.5rem !important;
|
|
1025
|
+
right: 0.5rem !important;
|
|
1026
|
+
background: transparent !important;
|
|
1027
|
+
border: none !important;
|
|
1028
|
+
cursor: pointer !important;
|
|
1029
|
+
color: ${theme.colors.gray550} !important;
|
|
1030
|
+
padding: 0.25rem !important;
|
|
1031
|
+
margin: 0 !important;
|
|
1032
|
+
display: inline-flex !important;
|
|
1033
|
+
align-items: center !important;
|
|
1034
|
+
justify-content: center !important;
|
|
1035
|
+
border-radius: 999px !important;
|
|
1036
|
+
box-sizing: border-box !important;
|
|
1037
|
+
transition: background 0.15s, color 0.15s;
|
|
1038
|
+
}
|
|
1015
1039
|
|
|
1016
|
-
|
|
1017
|
-
background: ${theme.colors.gray300};
|
|
1018
|
-
color: ${theme.colors.black};
|
|
1040
|
+
&&:hover {
|
|
1041
|
+
background: ${theme.colors.gray300} !important;
|
|
1042
|
+
color: ${theme.colors.black} !important;
|
|
1019
1043
|
}
|
|
1020
1044
|
|
|
1021
|
-
svg {
|
|
1022
|
-
width: 1.1rem;
|
|
1023
|
-
height: 1.1rem;
|
|
1045
|
+
&& svg {
|
|
1046
|
+
width: 1.1rem !important;
|
|
1047
|
+
height: 1.1rem !important;
|
|
1024
1048
|
}
|
|
1025
1049
|
`;
|
|
1026
1050
|
var PrimaryButton = import_styled_components6.default.button`
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1051
|
+
&& {
|
|
1052
|
+
display: block !important;
|
|
1053
|
+
width: 100% !important;
|
|
1054
|
+
padding: 0.75rem 1rem !important;
|
|
1055
|
+
margin: 0 !important;
|
|
1056
|
+
border: none !important;
|
|
1057
|
+
border-radius: 0.5rem !important;
|
|
1058
|
+
background: ${({ $bgColor }) => $bgColor || theme.colors.yellow500} !important;
|
|
1059
|
+
color: ${({ $textColor }) => $textColor || theme.colors.black} !important;
|
|
1060
|
+
font-family: ${theme.fonts.primary} !important;
|
|
1061
|
+
font-size: 1rem !important;
|
|
1062
|
+
font-weight: 700 !important;
|
|
1063
|
+
line-height: 1.2 !important;
|
|
1064
|
+
text-align: center !important;
|
|
1065
|
+
cursor: pointer !important;
|
|
1066
|
+
box-sizing: border-box !important;
|
|
1067
|
+
transition: filter 0.15s;
|
|
1068
|
+
}
|
|
1039
1069
|
|
|
1040
|
-
|
|
1041
|
-
filter: brightness(0.95);
|
|
1070
|
+
&&:hover {
|
|
1071
|
+
filter: brightness(0.95) !important;
|
|
1072
|
+
}
|
|
1073
|
+
|
|
1074
|
+
&&:focus-visible {
|
|
1075
|
+
outline: 2px solid ${theme.colors.yellow400} !important;
|
|
1076
|
+
outline-offset: 2px !important;
|
|
1077
|
+
}
|
|
1078
|
+
`;
|
|
1079
|
+
var SecondaryText = import_styled_components6.default.p`
|
|
1080
|
+
&& {
|
|
1081
|
+
margin: 2.25rem 0 0.75rem !important;
|
|
1082
|
+
padding: 0 !important;
|
|
1083
|
+
font-family: ${theme.fonts.primary} !important;
|
|
1084
|
+
font-size: 0.85rem !important;
|
|
1085
|
+
font-weight: 400 !important;
|
|
1086
|
+
font-style: italic !important;
|
|
1087
|
+
line-height: 1.4 !important;
|
|
1088
|
+
text-align: center !important;
|
|
1089
|
+
color: ${theme.colors.gray550} !important;
|
|
1090
|
+
}
|
|
1091
|
+
`;
|
|
1092
|
+
var SecondaryButton = import_styled_components6.default.button`
|
|
1093
|
+
&& {
|
|
1094
|
+
display: block !important;
|
|
1095
|
+
width: 100% !important;
|
|
1096
|
+
padding: 0.65rem 1rem !important;
|
|
1097
|
+
margin: 0 !important;
|
|
1098
|
+
border: 1px solid ${({ $bgColor }) => $bgColor || theme.colors.yellow500} !important;
|
|
1099
|
+
border-radius: 0.5rem !important;
|
|
1100
|
+
background: transparent !important;
|
|
1101
|
+
color: ${({ $bgColor }) => $bgColor || theme.colors.black} !important;
|
|
1102
|
+
font-family: ${theme.fonts.primary} !important;
|
|
1103
|
+
font-size: 0.95rem !important;
|
|
1104
|
+
font-weight: 600 !important;
|
|
1105
|
+
line-height: 1.2 !important;
|
|
1106
|
+
text-align: center !important;
|
|
1107
|
+
cursor: pointer !important;
|
|
1108
|
+
box-sizing: border-box !important;
|
|
1109
|
+
transition: background 0.15s, color 0.15s;
|
|
1110
|
+
}
|
|
1111
|
+
|
|
1112
|
+
&&:hover {
|
|
1113
|
+
background: ${({ $bgColor }) => $bgColor || theme.colors.yellow500} !important;
|
|
1114
|
+
color: ${({ $textColor }) => $textColor || theme.colors.black} !important;
|
|
1042
1115
|
}
|
|
1043
1116
|
|
|
1044
|
-
|
|
1045
|
-
outline: 2px solid ${theme.colors.yellow400};
|
|
1046
|
-
outline-offset: 2px;
|
|
1117
|
+
&&:focus-visible {
|
|
1118
|
+
outline: 2px solid ${theme.colors.yellow400} !important;
|
|
1119
|
+
outline-offset: 2px !important;
|
|
1047
1120
|
}
|
|
1048
1121
|
`;
|
|
1049
1122
|
|
|
@@ -1057,7 +1130,10 @@ var Modal = ({
|
|
|
1057
1130
|
onPrimaryAction,
|
|
1058
1131
|
onClose,
|
|
1059
1132
|
primaryButtonBgColor,
|
|
1060
|
-
primaryButtonTextColor
|
|
1133
|
+
primaryButtonTextColor,
|
|
1134
|
+
secondaryText,
|
|
1135
|
+
secondaryButtonText,
|
|
1136
|
+
onSecondaryAction
|
|
1061
1137
|
}) => {
|
|
1062
1138
|
const primaryButtonRef = (0, import_react5.useRef)(null);
|
|
1063
1139
|
(0, import_react5.useEffect)(() => {
|
|
@@ -1077,6 +1153,7 @@ var Modal = ({
|
|
|
1077
1153
|
onClose();
|
|
1078
1154
|
}
|
|
1079
1155
|
};
|
|
1156
|
+
const hasSecondaryAction = secondaryButtonText !== void 0 && onSecondaryAction !== void 0;
|
|
1080
1157
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Overlay, { onClick: handleOverlayClick, role: "dialog", "aria-modal": "true", "aria-label": title, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Container, { $type: type, children: [
|
|
1081
1158
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CloseButton, { onClick: onClose, "aria-label": "Fechar", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_hi2.HiX, {}) }),
|
|
1082
1159
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { children: title }),
|
|
@@ -1091,7 +1168,20 @@ var Modal = ({
|
|
|
1091
1168
|
type: "button",
|
|
1092
1169
|
children: primaryButtonText
|
|
1093
1170
|
}
|
|
1094
|
-
)
|
|
1171
|
+
),
|
|
1172
|
+
hasSecondaryAction && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
1173
|
+
secondaryText && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SecondaryText, { children: secondaryText }),
|
|
1174
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1175
|
+
SecondaryButton,
|
|
1176
|
+
{
|
|
1177
|
+
onClick: onSecondaryAction,
|
|
1178
|
+
$bgColor: primaryButtonBgColor,
|
|
1179
|
+
$textColor: primaryButtonTextColor,
|
|
1180
|
+
type: "button",
|
|
1181
|
+
children: secondaryButtonText
|
|
1182
|
+
}
|
|
1183
|
+
)
|
|
1184
|
+
] })
|
|
1095
1185
|
] }) });
|
|
1096
1186
|
};
|
|
1097
1187
|
|
|
@@ -1384,19 +1474,19 @@ var ENVIRONMENTS = {
|
|
|
1384
1474
|
chatUrl: "https://crm.mitrerealty.com.br/wcc/UserLoginSubmit.do"
|
|
1385
1475
|
}
|
|
1386
1476
|
};
|
|
1387
|
-
var resolveEnvironment = (
|
|
1388
|
-
return ENVIRONMENTS[
|
|
1477
|
+
var resolveEnvironment = (environment = "homol") => {
|
|
1478
|
+
return ENVIRONMENTS[environment] ?? null;
|
|
1389
1479
|
};
|
|
1390
1480
|
|
|
1391
1481
|
// src/components/Form/index.tsx
|
|
1392
1482
|
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
1393
1483
|
var phoneUtil = import_google_libphonenumber.PhoneNumberUtil.getInstance();
|
|
1394
|
-
var
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
return
|
|
1399
|
-
})(
|
|
1484
|
+
var ContactPreference = /* @__PURE__ */ ((ContactPreference2) => {
|
|
1485
|
+
ContactPreference2["Whatsapp"] = "Whatsapp";
|
|
1486
|
+
ContactPreference2["Email"] = "Email";
|
|
1487
|
+
ContactPreference2["Ligacao"] = "Liga\xE7\xE3o";
|
|
1488
|
+
return ContactPreference2;
|
|
1489
|
+
})(ContactPreference || {});
|
|
1400
1490
|
var WHATSAPP_MESSAGE = "Ol\xE1! Tenho interesse e gostaria de mais informa\xE7\xF5es.";
|
|
1401
1491
|
var WHATSAPP_TITLE = "Fale com um corretor por WhatsApp";
|
|
1402
1492
|
var WHATSAPP_SUBTITLE = "Informe seus dados para contato.";
|
|
@@ -1408,10 +1498,13 @@ var MODAL_ERROR_TITLE = "N\xE3o foi poss\xEDvel completar seu contato";
|
|
|
1408
1498
|
var MODAL_ERROR_MESSAGE = "Por favor, tente novamente em alguns instantes.";
|
|
1409
1499
|
var MODAL_ERROR_BUTTON_TEXT = "OK";
|
|
1410
1500
|
var MODAL_SUCCESS_TITLE = "Cadastro realizado!";
|
|
1411
|
-
var
|
|
1501
|
+
var MODAL_SUCCESS_AUTO_REDIRECT_WHATSAPP = "Voc\xEA est\xE1 sendo redirecionado automaticamente para o WhatsApp.";
|
|
1502
|
+
var MODAL_SUCCESS_AUTO_REDIRECT_CHAT = "Voc\xEA est\xE1 sendo redirecionado automaticamente para iniciar o atendimento via chat.";
|
|
1503
|
+
var MODAL_SUCCESS_OK_BUTTON_TEXT = "OK";
|
|
1504
|
+
var MODAL_SUCCESS_FALLBACK_INSTRUCTION = "Caso n\xE3o tenha sido direcionado automaticamente, clique no bot\xE3o abaixo para abrir a aplica\xE7\xE3o:";
|
|
1412
1505
|
var MODAL_SUCCESS_BUTTON_WHATSAPP = "Abrir WhatsApp";
|
|
1413
|
-
var MODAL_SUCCESS_MESSAGE_CHAT = "Clique abaixo para iniciar o atendimento.";
|
|
1414
1506
|
var MODAL_SUCCESS_BUTTON_CHAT = "Iniciar atendimento";
|
|
1507
|
+
var REDIRECT_DELAY_MS = 0;
|
|
1415
1508
|
function buildWhatsappUrl(phone) {
|
|
1416
1509
|
const digits = phone.replace(/\D/g, "");
|
|
1417
1510
|
const text = encodeURIComponent(WHATSAPP_MESSAGE);
|
|
@@ -1431,6 +1524,46 @@ function submitChatInNewTab(chatUrl, virtualObj) {
|
|
|
1431
1524
|
form.submit();
|
|
1432
1525
|
document.body.removeChild(form);
|
|
1433
1526
|
}
|
|
1527
|
+
function isTabAlive(tab) {
|
|
1528
|
+
return tab !== null && !tab.closed;
|
|
1529
|
+
}
|
|
1530
|
+
function writeStatusHtmlToTab(tab, phase, channel) {
|
|
1531
|
+
try {
|
|
1532
|
+
const destinationLabel = channel === "whatsapp" ? "WhatsApp" : "atendimento";
|
|
1533
|
+
const isSuccess = phase === "success";
|
|
1534
|
+
const headline = isSuccess ? "Cadastro realizado!" : "Aguarde...";
|
|
1535
|
+
const message = isSuccess ? `Abrindo o ${destinationLabel} em instantes...` : "Estamos registrando seu cadastro...";
|
|
1536
|
+
const headlineColor = isSuccess ? "#2DCE68" : "#535353";
|
|
1537
|
+
const indicator = isSuccess ? '<div class="check" aria-hidden="true"></div>' : '<div class="spinner" aria-hidden="true"></div>';
|
|
1538
|
+
tab.document.open();
|
|
1539
|
+
tab.document.write(
|
|
1540
|
+
`<!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>`
|
|
1541
|
+
);
|
|
1542
|
+
tab.document.close();
|
|
1543
|
+
} catch {
|
|
1544
|
+
}
|
|
1545
|
+
}
|
|
1546
|
+
function escapeHtmlAttr(value) {
|
|
1547
|
+
return value.replace(/&/g, "&").replace(/'/g, "'").replace(/"/g, """).replace(/</g, "<").replace(/>/g, ">");
|
|
1548
|
+
}
|
|
1549
|
+
function navigateTabToWhatsapp(tab, targetUrl) {
|
|
1550
|
+
try {
|
|
1551
|
+
tab.location.href = targetUrl;
|
|
1552
|
+
} catch {
|
|
1553
|
+
}
|
|
1554
|
+
}
|
|
1555
|
+
function submitChatInPreOpenedTab(tab, chatUrl, virtualObj) {
|
|
1556
|
+
try {
|
|
1557
|
+
const escapedJson = escapeHtmlAttr(JSON.stringify(virtualObj));
|
|
1558
|
+
const escapedUrl = escapeHtmlAttr(chatUrl);
|
|
1559
|
+
tab.document.open();
|
|
1560
|
+
tab.document.write(
|
|
1561
|
+
`<!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>`
|
|
1562
|
+
);
|
|
1563
|
+
tab.document.close();
|
|
1564
|
+
} catch {
|
|
1565
|
+
}
|
|
1566
|
+
}
|
|
1434
1567
|
var isPhoneValid = (phone) => {
|
|
1435
1568
|
try {
|
|
1436
1569
|
return phoneUtil.isValidNumber(phoneUtil.parseAndKeepRawInput(phone));
|
|
@@ -1462,8 +1595,8 @@ var schemaWithProduct = yup.object().shape({
|
|
|
1462
1595
|
var schema = yup.object().shape(baseSchema);
|
|
1463
1596
|
var MitreFormComponent = import_react8.default.forwardRef(({
|
|
1464
1597
|
products,
|
|
1465
|
-
|
|
1466
|
-
|
|
1598
|
+
environment = "homol",
|
|
1599
|
+
channel = "form",
|
|
1467
1600
|
showHeader = true,
|
|
1468
1601
|
title = "Atendimento por mensagem",
|
|
1469
1602
|
subtitle = "Informe seus dados e retornaremos a mensagem.",
|
|
@@ -1477,7 +1610,7 @@ var MitreFormComponent = import_react8.default.forwardRef(({
|
|
|
1477
1610
|
inputFocusBorderColor = theme.colors.yellow500,
|
|
1478
1611
|
inputPlaceholderColor = theme.colors.gray100,
|
|
1479
1612
|
inputTextColor = theme.colors.black,
|
|
1480
|
-
|
|
1613
|
+
showContactPreference = false,
|
|
1481
1614
|
idProdutoTerceiro,
|
|
1482
1615
|
idEmpreendimento,
|
|
1483
1616
|
naoCriarEvento,
|
|
@@ -1515,53 +1648,53 @@ var MitreFormComponent = import_react8.default.forwardRef(({
|
|
|
1515
1648
|
}
|
|
1516
1649
|
return null;
|
|
1517
1650
|
};
|
|
1518
|
-
const env = resolveEnvironment(
|
|
1519
|
-
const
|
|
1651
|
+
const env = resolveEnvironment(environment);
|
|
1652
|
+
const validateEnvironmentConfig = () => {
|
|
1520
1653
|
if (!env) {
|
|
1521
|
-
return `
|
|
1654
|
+
return `environment='${environment}' n\xE3o \xE9 reconhecido. Use 'homol' ou 'prod'.`;
|
|
1522
1655
|
}
|
|
1523
1656
|
if (!env.apiUrl || !env.apiToken) {
|
|
1524
|
-
return `Configura\xE7\xE3o interna do
|
|
1657
|
+
return `Configura\xE7\xE3o interna do environment '${environment}' est\xE1 incompleta (apiUrl/apiToken).`;
|
|
1525
1658
|
}
|
|
1526
1659
|
return null;
|
|
1527
1660
|
};
|
|
1528
1661
|
const validateWhatsappConfig = () => {
|
|
1529
|
-
if (
|
|
1662
|
+
if (channel !== "whatsapp") return null;
|
|
1530
1663
|
if (!env) return null;
|
|
1531
1664
|
const raw = env.whatsappPhone?.trim() ?? "";
|
|
1532
1665
|
if (!raw) {
|
|
1533
|
-
return `
|
|
1666
|
+
return `channel='whatsapp' exige whatsappPhone no environment '${environment}'.`;
|
|
1534
1667
|
}
|
|
1535
1668
|
const normalized = raw.startsWith("+") ? raw : `+${raw}`;
|
|
1536
1669
|
if (!isPhoneValid(normalized)) {
|
|
1537
|
-
return `whatsappPhone do
|
|
1670
|
+
return `whatsappPhone do environment '${environment}' \xE9 inv\xE1lido (${JSON.stringify(env.whatsappPhone)}).`;
|
|
1538
1671
|
}
|
|
1539
1672
|
return null;
|
|
1540
1673
|
};
|
|
1541
1674
|
const validateChatConfig = () => {
|
|
1542
|
-
if (
|
|
1675
|
+
if (channel !== "chat") return null;
|
|
1543
1676
|
if (!env) return null;
|
|
1544
1677
|
const raw = env.chatUrl?.trim() ?? "";
|
|
1545
1678
|
if (!raw) {
|
|
1546
|
-
return `
|
|
1679
|
+
return `channel='chat' exige chatUrl no environment '${environment}'.`;
|
|
1547
1680
|
}
|
|
1548
1681
|
try {
|
|
1549
1682
|
const parsed = new URL(raw);
|
|
1550
1683
|
if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
|
|
1551
|
-
return `chatUrl do
|
|
1684
|
+
return `chatUrl do environment '${environment}' precisa ter protocolo http(s) (recebido: ${JSON.stringify(env.chatUrl)}).`;
|
|
1552
1685
|
}
|
|
1553
1686
|
} catch {
|
|
1554
|
-
return `chatUrl do
|
|
1687
|
+
return `chatUrl do environment '${environment}' n\xE3o \xE9 URL absoluta v\xE1lida (recebido: ${JSON.stringify(env.chatUrl)}).`;
|
|
1555
1688
|
}
|
|
1556
1689
|
return null;
|
|
1557
1690
|
};
|
|
1558
1691
|
const productsValidationError = validateProducts();
|
|
1559
|
-
const
|
|
1692
|
+
const environmentConfigError = validateEnvironmentConfig();
|
|
1560
1693
|
const whatsappConfigError = validateWhatsappConfig();
|
|
1561
1694
|
const chatConfigError = validateChatConfig();
|
|
1562
|
-
const
|
|
1563
|
-
const effectiveTitle =
|
|
1564
|
-
const effectiveSubtitle =
|
|
1695
|
+
const effectiveShowContactPreference = channel === "whatsapp" || channel === "chat" ? false : showContactPreference;
|
|
1696
|
+
const effectiveTitle = channel === "whatsapp" ? WHATSAPP_TITLE : channel === "chat" ? CHAT_TITLE : title;
|
|
1697
|
+
const effectiveSubtitle = channel === "whatsapp" ? WHATSAPP_SUBTITLE : channel === "chat" ? CHAT_SUBTITLE : subtitle;
|
|
1565
1698
|
const [utm, setUtm] = (0, import_react8.useState)({ utm_source: "direto", createdAt: (/* @__PURE__ */ new Date()).toISOString() });
|
|
1566
1699
|
const formSchema = products && products.length > 1 ? schemaWithProduct : schema;
|
|
1567
1700
|
const { control, register, handleSubmit, formState: { errors }, reset, clearErrors } = (0, import_react_hook_form.useForm)({
|
|
@@ -1601,10 +1734,11 @@ var MitreFormComponent = import_react8.default.forwardRef(({
|
|
|
1601
1734
|
const phoneDigitsOnly = phoneValue?.replace(/\D/g, "") || "";
|
|
1602
1735
|
const message = "Gostaria de mais informa\xE7\xF5es sobre o produto";
|
|
1603
1736
|
setActionModal(null);
|
|
1737
|
+
let preOpenedTab = null;
|
|
1604
1738
|
try {
|
|
1605
1739
|
setIsLoading(true);
|
|
1606
1740
|
if (!env) {
|
|
1607
|
-
throw new Error("
|
|
1741
|
+
throw new Error("Environment n\xE3o resolvido");
|
|
1608
1742
|
}
|
|
1609
1743
|
if (!products || products.length === 0) {
|
|
1610
1744
|
throw new Error("Par\xE2metros obrigat\xF3rios n\xE3o informados");
|
|
@@ -1623,7 +1757,7 @@ var MitreFormComponent = import_react8.default.forwardRef(({
|
|
|
1623
1757
|
selectedProduct = foundProduct;
|
|
1624
1758
|
}
|
|
1625
1759
|
const paginaAtual = typeof window !== "undefined" ? window.location.href : void 0;
|
|
1626
|
-
const naoCriarEventoEfetivo =
|
|
1760
|
+
const naoCriarEventoEfetivo = channel !== "form" && (naoCriarEvento ?? true);
|
|
1627
1761
|
const requestBody = {
|
|
1628
1762
|
name,
|
|
1629
1763
|
email,
|
|
@@ -1634,9 +1768,9 @@ var MitreFormComponent = import_react8.default.forwardRef(({
|
|
|
1634
1768
|
utm_campaign: utm.utm_campaign,
|
|
1635
1769
|
utm_medium: utm.utm_medium,
|
|
1636
1770
|
utm_term: utm.utm_term,
|
|
1637
|
-
...
|
|
1638
|
-
...
|
|
1639
|
-
|
|
1771
|
+
...channel === "whatsapp" ? { preferencia_contato: "Whatsapp" /* Whatsapp */ } : effectiveShowContactPreference && preferencia_contato ? { preferencia_contato } : {},
|
|
1772
|
+
...channel !== "form" ? {
|
|
1773
|
+
channel,
|
|
1640
1774
|
...paginaAtual ? { pagina: paginaAtual } : {},
|
|
1641
1775
|
// Paridade com atendimento.html legado: o mesmo <form id="chat-form">
|
|
1642
1776
|
// era usado para chat e whatsapp, portanto is_chat=true ia em ambos.
|
|
@@ -1646,6 +1780,12 @@ var MitreFormComponent = import_react8.default.forwardRef(({
|
|
|
1646
1780
|
...naoCriarEventoEfetivo ? { naoCriarEvento: true } : {}
|
|
1647
1781
|
} : {}
|
|
1648
1782
|
};
|
|
1783
|
+
if (channel !== "form" && typeof window !== "undefined") {
|
|
1784
|
+
preOpenedTab = window.open("about:blank", "_blank");
|
|
1785
|
+
if (isTabAlive(preOpenedTab)) {
|
|
1786
|
+
writeStatusHtmlToTab(preOpenedTab, "processing", channel);
|
|
1787
|
+
}
|
|
1788
|
+
}
|
|
1649
1789
|
const response = await fetch(`${env.apiUrl}/leads`, {
|
|
1650
1790
|
method: "POST",
|
|
1651
1791
|
headers: {
|
|
@@ -1661,13 +1801,23 @@ var MitreFormComponent = import_react8.default.forwardRef(({
|
|
|
1661
1801
|
const leadId = responseData.leadId || responseData.id || "";
|
|
1662
1802
|
resetForm();
|
|
1663
1803
|
onSuccess?.(requestBody, leadId);
|
|
1664
|
-
if (
|
|
1804
|
+
if (channel === "whatsapp") {
|
|
1805
|
+
const targetUrl = buildWhatsappUrl(env.whatsappPhone);
|
|
1665
1806
|
setActionModal({
|
|
1666
1807
|
kind: "success",
|
|
1667
|
-
|
|
1668
|
-
targetUrl
|
|
1808
|
+
channel: "whatsapp",
|
|
1809
|
+
targetUrl
|
|
1669
1810
|
});
|
|
1670
|
-
|
|
1811
|
+
if (isTabAlive(preOpenedTab)) {
|
|
1812
|
+
writeStatusHtmlToTab(preOpenedTab, "success", "whatsapp");
|
|
1813
|
+
const tabToNavigate = preOpenedTab;
|
|
1814
|
+
setTimeout(() => {
|
|
1815
|
+
if (isTabAlive(tabToNavigate)) {
|
|
1816
|
+
navigateTabToWhatsapp(tabToNavigate, targetUrl);
|
|
1817
|
+
}
|
|
1818
|
+
}, REDIRECT_DELAY_MS);
|
|
1819
|
+
}
|
|
1820
|
+
} else if (channel === "chat") {
|
|
1671
1821
|
const virtualObj = {
|
|
1672
1822
|
...requestBody,
|
|
1673
1823
|
externalOriginId: leadId,
|
|
@@ -1678,16 +1828,29 @@ var MitreFormComponent = import_react8.default.forwardRef(({
|
|
|
1678
1828
|
};
|
|
1679
1829
|
setActionModal({
|
|
1680
1830
|
kind: "success",
|
|
1681
|
-
|
|
1831
|
+
channel: "chat",
|
|
1682
1832
|
chatUrl: env.chatUrl,
|
|
1683
1833
|
virtualObj
|
|
1684
1834
|
});
|
|
1835
|
+
if (isTabAlive(preOpenedTab)) {
|
|
1836
|
+
writeStatusHtmlToTab(preOpenedTab, "success", "chat");
|
|
1837
|
+
const tabToSubmit = preOpenedTab;
|
|
1838
|
+
const chatUrlSnapshot = env.chatUrl;
|
|
1839
|
+
setTimeout(() => {
|
|
1840
|
+
if (isTabAlive(tabToSubmit)) {
|
|
1841
|
+
submitChatInPreOpenedTab(tabToSubmit, chatUrlSnapshot, virtualObj);
|
|
1842
|
+
}
|
|
1843
|
+
}, REDIRECT_DELAY_MS);
|
|
1844
|
+
}
|
|
1685
1845
|
} else {
|
|
1686
1846
|
setSuccessMessage("Mensagem enviada com sucesso!");
|
|
1687
1847
|
}
|
|
1688
1848
|
} catch (err) {
|
|
1849
|
+
if (isTabAlive(preOpenedTab)) {
|
|
1850
|
+
preOpenedTab.close();
|
|
1851
|
+
}
|
|
1689
1852
|
const error2 = err instanceof Error ? err : new Error("Erro desconhecido");
|
|
1690
|
-
if (
|
|
1853
|
+
if (channel === "whatsapp" || channel === "chat") {
|
|
1691
1854
|
setActionModal({ kind: "error" });
|
|
1692
1855
|
} else {
|
|
1693
1856
|
handleError(err);
|
|
@@ -1697,18 +1860,18 @@ var MitreFormComponent = import_react8.default.forwardRef(({
|
|
|
1697
1860
|
setIsLoading(false);
|
|
1698
1861
|
}
|
|
1699
1862
|
};
|
|
1700
|
-
if (productsValidationError ||
|
|
1863
|
+
if (productsValidationError || environmentConfigError || whatsappConfigError || chatConfigError) {
|
|
1701
1864
|
if (productsValidationError) {
|
|
1702
1865
|
console.error("Erro na valida\xE7\xE3o dos produtos:", productsValidationError);
|
|
1703
1866
|
}
|
|
1704
|
-
if (
|
|
1705
|
-
console.error("Erro na valida\xE7\xE3o do
|
|
1867
|
+
if (environmentConfigError) {
|
|
1868
|
+
console.error("Erro na valida\xE7\xE3o do environment:", environmentConfigError);
|
|
1706
1869
|
}
|
|
1707
1870
|
if (whatsappConfigError) {
|
|
1708
|
-
console.error("Erro na valida\xE7\xE3o do
|
|
1871
|
+
console.error("Erro na valida\xE7\xE3o do channel whatsapp:", whatsappConfigError);
|
|
1709
1872
|
}
|
|
1710
1873
|
if (chatConfigError) {
|
|
1711
|
-
console.error("Erro na valida\xE7\xE3o do
|
|
1874
|
+
console.error("Erro na valida\xE7\xE3o do channel chat:", chatConfigError);
|
|
1712
1875
|
}
|
|
1713
1876
|
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(HeaderContainer, { children: [
|
|
1714
1877
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Title, { $textColor: textColor, children: "Erro no carregamento do formul\xE1rio!" }),
|
|
@@ -1749,36 +1912,42 @@ var MitreFormComponent = import_react8.default.forwardRef(({
|
|
|
1749
1912
|
primaryButtonTextColor: buttonTextColor
|
|
1750
1913
|
}
|
|
1751
1914
|
),
|
|
1752
|
-
actionModal?.kind === "success" && actionModal.
|
|
1915
|
+
actionModal?.kind === "success" && actionModal.channel === "whatsapp" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1753
1916
|
Modal,
|
|
1754
1917
|
{
|
|
1755
1918
|
type: "success",
|
|
1756
1919
|
title: MODAL_SUCCESS_TITLE,
|
|
1757
|
-
message:
|
|
1758
|
-
primaryButtonText:
|
|
1759
|
-
onPrimaryAction: () =>
|
|
1760
|
-
window.open(actionModal.targetUrl, "_blank", "noopener,noreferrer");
|
|
1761
|
-
setActionModal(null);
|
|
1762
|
-
},
|
|
1920
|
+
message: MODAL_SUCCESS_AUTO_REDIRECT_WHATSAPP,
|
|
1921
|
+
primaryButtonText: MODAL_SUCCESS_OK_BUTTON_TEXT,
|
|
1922
|
+
onPrimaryAction: () => setActionModal(null),
|
|
1763
1923
|
onClose: () => setActionModal(null),
|
|
1764
1924
|
primaryButtonBgColor: buttonBackgroundColor,
|
|
1765
|
-
primaryButtonTextColor: buttonTextColor
|
|
1925
|
+
primaryButtonTextColor: buttonTextColor,
|
|
1926
|
+
secondaryText: MODAL_SUCCESS_FALLBACK_INSTRUCTION,
|
|
1927
|
+
secondaryButtonText: MODAL_SUCCESS_BUTTON_WHATSAPP,
|
|
1928
|
+
onSecondaryAction: () => {
|
|
1929
|
+
window.open(actionModal.targetUrl, "_blank", "noopener,noreferrer");
|
|
1930
|
+
setActionModal(null);
|
|
1931
|
+
}
|
|
1766
1932
|
}
|
|
1767
1933
|
),
|
|
1768
|
-
actionModal?.kind === "success" && actionModal.
|
|
1934
|
+
actionModal?.kind === "success" && actionModal.channel === "chat" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1769
1935
|
Modal,
|
|
1770
1936
|
{
|
|
1771
1937
|
type: "success",
|
|
1772
1938
|
title: MODAL_SUCCESS_TITLE,
|
|
1773
|
-
message:
|
|
1774
|
-
primaryButtonText:
|
|
1775
|
-
onPrimaryAction: () =>
|
|
1776
|
-
submitChatInNewTab(actionModal.chatUrl, actionModal.virtualObj);
|
|
1777
|
-
setActionModal(null);
|
|
1778
|
-
},
|
|
1939
|
+
message: MODAL_SUCCESS_AUTO_REDIRECT_CHAT,
|
|
1940
|
+
primaryButtonText: MODAL_SUCCESS_OK_BUTTON_TEXT,
|
|
1941
|
+
onPrimaryAction: () => setActionModal(null),
|
|
1779
1942
|
onClose: () => setActionModal(null),
|
|
1780
1943
|
primaryButtonBgColor: buttonBackgroundColor,
|
|
1781
|
-
primaryButtonTextColor: buttonTextColor
|
|
1944
|
+
primaryButtonTextColor: buttonTextColor,
|
|
1945
|
+
secondaryText: MODAL_SUCCESS_FALLBACK_INSTRUCTION,
|
|
1946
|
+
secondaryButtonText: MODAL_SUCCESS_BUTTON_CHAT,
|
|
1947
|
+
onSecondaryAction: () => {
|
|
1948
|
+
submitChatInNewTab(actionModal.chatUrl, actionModal.virtualObj);
|
|
1949
|
+
setActionModal(null);
|
|
1950
|
+
}
|
|
1782
1951
|
}
|
|
1783
1952
|
),
|
|
1784
1953
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: [
|
|
@@ -1873,7 +2042,7 @@ var MitreFormComponent = import_react8.default.forwardRef(({
|
|
|
1873
2042
|
},
|
|
1874
2043
|
formKey
|
|
1875
2044
|
),
|
|
1876
|
-
|
|
2045
|
+
effectiveShowContactPreference && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(FormControl, { isInvalid: !!errors.preferencia_contato, children: [
|
|
1877
2046
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FormLabel, { htmlFor: "preferencia_contato", $textColor: textColor, children: "Prefer\xEAncia de Contato" }),
|
|
1878
2047
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
1879
2048
|
Select,
|
|
@@ -1887,14 +2056,14 @@ var MitreFormComponent = import_react8.default.forwardRef(({
|
|
|
1887
2056
|
$textColor: inputTextColor,
|
|
1888
2057
|
children: [
|
|
1889
2058
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "", disabled: true, children: "Selecione uma op\xE7\xE3o" }),
|
|
1890
|
-
Object.values(
|
|
2059
|
+
Object.values(ContactPreference).map((op) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: op, children: op }, op))
|
|
1891
2060
|
]
|
|
1892
2061
|
}
|
|
1893
2062
|
),
|
|
1894
2063
|
errors.preferencia_contato && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FormErrorMessage, { children: errors.preferencia_contato.message })
|
|
1895
2064
|
] }),
|
|
1896
2065
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
|
|
1897
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ButtonContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button2, { bgColor: buttonBackgroundColor, color: buttonTextColor, type: "submit", isSubmitting: loading, children:
|
|
2066
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ButtonContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button2, { bgColor: buttonBackgroundColor, color: buttonTextColor, type: "submit", isSubmitting: loading, children: channel === "whatsapp" ? WHATSAPP_BUTTON_TEXT : channel === "chat" ? CHAT_BUTTON_TEXT : "Enviar mensagem" }) }),
|
|
1898
2067
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { children: [
|
|
1899
2068
|
"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",
|
|
1900
2069
|
" ",
|
|
@@ -1921,7 +2090,7 @@ MitreFormComponent.displayName = "MitreFormComponent";
|
|
|
1921
2090
|
var Form_default = MitreFormComponent;
|
|
1922
2091
|
// Annotate the CommonJS export names for ESM import in node:
|
|
1923
2092
|
0 && (module.exports = {
|
|
1924
|
-
|
|
1925
|
-
|
|
2093
|
+
ContactPreference,
|
|
2094
|
+
MitreFormComponent
|
|
1926
2095
|
});
|
|
1927
2096
|
//# sourceMappingURL=index.cjs.map
|