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.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,10 +1610,12 @@ 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
|
-
naoCriarEvento
|
|
1616
|
+
naoCriarEvento,
|
|
1617
|
+
onSuccess,
|
|
1618
|
+
onError
|
|
1484
1619
|
}, ref) => {
|
|
1485
1620
|
useMontserratFont();
|
|
1486
1621
|
const [loading, setIsLoading] = (0, import_react8.useState)(false);
|
|
@@ -1513,53 +1648,53 @@ var MitreFormComponent = import_react8.default.forwardRef(({
|
|
|
1513
1648
|
}
|
|
1514
1649
|
return null;
|
|
1515
1650
|
};
|
|
1516
|
-
const env = resolveEnvironment(
|
|
1517
|
-
const
|
|
1651
|
+
const env = resolveEnvironment(environment);
|
|
1652
|
+
const validateEnvironmentConfig = () => {
|
|
1518
1653
|
if (!env) {
|
|
1519
|
-
return `
|
|
1654
|
+
return `environment='${environment}' n\xE3o \xE9 reconhecido. Use 'homol' ou 'prod'.`;
|
|
1520
1655
|
}
|
|
1521
1656
|
if (!env.apiUrl || !env.apiToken) {
|
|
1522
|
-
return `Configura\xE7\xE3o interna do
|
|
1657
|
+
return `Configura\xE7\xE3o interna do environment '${environment}' est\xE1 incompleta (apiUrl/apiToken).`;
|
|
1523
1658
|
}
|
|
1524
1659
|
return null;
|
|
1525
1660
|
};
|
|
1526
1661
|
const validateWhatsappConfig = () => {
|
|
1527
|
-
if (
|
|
1662
|
+
if (channel !== "whatsapp") return null;
|
|
1528
1663
|
if (!env) return null;
|
|
1529
1664
|
const raw = env.whatsappPhone?.trim() ?? "";
|
|
1530
1665
|
if (!raw) {
|
|
1531
|
-
return `
|
|
1666
|
+
return `channel='whatsapp' exige whatsappPhone no environment '${environment}'.`;
|
|
1532
1667
|
}
|
|
1533
1668
|
const normalized = raw.startsWith("+") ? raw : `+${raw}`;
|
|
1534
1669
|
if (!isPhoneValid(normalized)) {
|
|
1535
|
-
return `whatsappPhone do
|
|
1670
|
+
return `whatsappPhone do environment '${environment}' \xE9 inv\xE1lido (${JSON.stringify(env.whatsappPhone)}).`;
|
|
1536
1671
|
}
|
|
1537
1672
|
return null;
|
|
1538
1673
|
};
|
|
1539
1674
|
const validateChatConfig = () => {
|
|
1540
|
-
if (
|
|
1675
|
+
if (channel !== "chat") return null;
|
|
1541
1676
|
if (!env) return null;
|
|
1542
1677
|
const raw = env.chatUrl?.trim() ?? "";
|
|
1543
1678
|
if (!raw) {
|
|
1544
|
-
return `
|
|
1679
|
+
return `channel='chat' exige chatUrl no environment '${environment}'.`;
|
|
1545
1680
|
}
|
|
1546
1681
|
try {
|
|
1547
1682
|
const parsed = new URL(raw);
|
|
1548
1683
|
if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
|
|
1549
|
-
return `chatUrl do
|
|
1684
|
+
return `chatUrl do environment '${environment}' precisa ter protocolo http(s) (recebido: ${JSON.stringify(env.chatUrl)}).`;
|
|
1550
1685
|
}
|
|
1551
1686
|
} catch {
|
|
1552
|
-
return `chatUrl do
|
|
1687
|
+
return `chatUrl do environment '${environment}' n\xE3o \xE9 URL absoluta v\xE1lida (recebido: ${JSON.stringify(env.chatUrl)}).`;
|
|
1553
1688
|
}
|
|
1554
1689
|
return null;
|
|
1555
1690
|
};
|
|
1556
1691
|
const productsValidationError = validateProducts();
|
|
1557
|
-
const
|
|
1692
|
+
const environmentConfigError = validateEnvironmentConfig();
|
|
1558
1693
|
const whatsappConfigError = validateWhatsappConfig();
|
|
1559
1694
|
const chatConfigError = validateChatConfig();
|
|
1560
|
-
const
|
|
1561
|
-
const effectiveTitle =
|
|
1562
|
-
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;
|
|
1563
1698
|
const [utm, setUtm] = (0, import_react8.useState)({ utm_source: "direto", createdAt: (/* @__PURE__ */ new Date()).toISOString() });
|
|
1564
1699
|
const formSchema = products && products.length > 1 ? schemaWithProduct : schema;
|
|
1565
1700
|
const { control, register, handleSubmit, formState: { errors }, reset, clearErrors } = (0, import_react_hook_form.useForm)({
|
|
@@ -1599,10 +1734,11 @@ var MitreFormComponent = import_react8.default.forwardRef(({
|
|
|
1599
1734
|
const phoneDigitsOnly = phoneValue?.replace(/\D/g, "") || "";
|
|
1600
1735
|
const message = "Gostaria de mais informa\xE7\xF5es sobre o produto";
|
|
1601
1736
|
setActionModal(null);
|
|
1737
|
+
let preOpenedTab = null;
|
|
1602
1738
|
try {
|
|
1603
1739
|
setIsLoading(true);
|
|
1604
1740
|
if (!env) {
|
|
1605
|
-
throw new Error("
|
|
1741
|
+
throw new Error("Environment n\xE3o resolvido");
|
|
1606
1742
|
}
|
|
1607
1743
|
if (!products || products.length === 0) {
|
|
1608
1744
|
throw new Error("Par\xE2metros obrigat\xF3rios n\xE3o informados");
|
|
@@ -1621,7 +1757,7 @@ var MitreFormComponent = import_react8.default.forwardRef(({
|
|
|
1621
1757
|
selectedProduct = foundProduct;
|
|
1622
1758
|
}
|
|
1623
1759
|
const paginaAtual = typeof window !== "undefined" ? window.location.href : void 0;
|
|
1624
|
-
const naoCriarEventoEfetivo =
|
|
1760
|
+
const naoCriarEventoEfetivo = channel !== "form" && (naoCriarEvento ?? true);
|
|
1625
1761
|
const requestBody = {
|
|
1626
1762
|
name,
|
|
1627
1763
|
email,
|
|
@@ -1632,9 +1768,9 @@ var MitreFormComponent = import_react8.default.forwardRef(({
|
|
|
1632
1768
|
utm_campaign: utm.utm_campaign,
|
|
1633
1769
|
utm_medium: utm.utm_medium,
|
|
1634
1770
|
utm_term: utm.utm_term,
|
|
1635
|
-
...
|
|
1636
|
-
...
|
|
1637
|
-
|
|
1771
|
+
...channel === "whatsapp" ? { preferencia_contato: "Whatsapp" /* Whatsapp */ } : effectiveShowContactPreference && preferencia_contato ? { preferencia_contato } : {},
|
|
1772
|
+
...channel !== "form" ? {
|
|
1773
|
+
channel,
|
|
1638
1774
|
...paginaAtual ? { pagina: paginaAtual } : {},
|
|
1639
1775
|
// Paridade com atendimento.html legado: o mesmo <form id="chat-form">
|
|
1640
1776
|
// era usado para chat e whatsapp, portanto is_chat=true ia em ambos.
|
|
@@ -1644,6 +1780,12 @@ var MitreFormComponent = import_react8.default.forwardRef(({
|
|
|
1644
1780
|
...naoCriarEventoEfetivo ? { naoCriarEvento: true } : {}
|
|
1645
1781
|
} : {}
|
|
1646
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
|
+
}
|
|
1647
1789
|
const response = await fetch(`${env.apiUrl}/leads`, {
|
|
1648
1790
|
method: "POST",
|
|
1649
1791
|
headers: {
|
|
@@ -1658,13 +1800,24 @@ var MitreFormComponent = import_react8.default.forwardRef(({
|
|
|
1658
1800
|
const responseData = await response.json();
|
|
1659
1801
|
const leadId = responseData.leadId || responseData.id || "";
|
|
1660
1802
|
resetForm();
|
|
1661
|
-
|
|
1803
|
+
onSuccess?.(requestBody, leadId);
|
|
1804
|
+
if (channel === "whatsapp") {
|
|
1805
|
+
const targetUrl = buildWhatsappUrl(env.whatsappPhone);
|
|
1662
1806
|
setActionModal({
|
|
1663
1807
|
kind: "success",
|
|
1664
|
-
|
|
1665
|
-
targetUrl
|
|
1808
|
+
channel: "whatsapp",
|
|
1809
|
+
targetUrl
|
|
1666
1810
|
});
|
|
1667
|
-
|
|
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") {
|
|
1668
1821
|
const virtualObj = {
|
|
1669
1822
|
...requestBody,
|
|
1670
1823
|
externalOriginId: leadId,
|
|
@@ -1675,35 +1828,50 @@ var MitreFormComponent = import_react8.default.forwardRef(({
|
|
|
1675
1828
|
};
|
|
1676
1829
|
setActionModal({
|
|
1677
1830
|
kind: "success",
|
|
1678
|
-
|
|
1831
|
+
channel: "chat",
|
|
1679
1832
|
chatUrl: env.chatUrl,
|
|
1680
1833
|
virtualObj
|
|
1681
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
|
+
}
|
|
1682
1845
|
} else {
|
|
1683
1846
|
setSuccessMessage("Mensagem enviada com sucesso!");
|
|
1684
1847
|
}
|
|
1685
1848
|
} catch (err) {
|
|
1686
|
-
if (
|
|
1849
|
+
if (isTabAlive(preOpenedTab)) {
|
|
1850
|
+
preOpenedTab.close();
|
|
1851
|
+
}
|
|
1852
|
+
const error2 = err instanceof Error ? err : new Error("Erro desconhecido");
|
|
1853
|
+
if (channel === "whatsapp" || channel === "chat") {
|
|
1687
1854
|
setActionModal({ kind: "error" });
|
|
1688
1855
|
} else {
|
|
1689
1856
|
handleError(err);
|
|
1690
1857
|
}
|
|
1858
|
+
onError?.(error2);
|
|
1691
1859
|
} finally {
|
|
1692
1860
|
setIsLoading(false);
|
|
1693
1861
|
}
|
|
1694
1862
|
};
|
|
1695
|
-
if (productsValidationError ||
|
|
1863
|
+
if (productsValidationError || environmentConfigError || whatsappConfigError || chatConfigError) {
|
|
1696
1864
|
if (productsValidationError) {
|
|
1697
1865
|
console.error("Erro na valida\xE7\xE3o dos produtos:", productsValidationError);
|
|
1698
1866
|
}
|
|
1699
|
-
if (
|
|
1700
|
-
console.error("Erro na valida\xE7\xE3o do
|
|
1867
|
+
if (environmentConfigError) {
|
|
1868
|
+
console.error("Erro na valida\xE7\xE3o do environment:", environmentConfigError);
|
|
1701
1869
|
}
|
|
1702
1870
|
if (whatsappConfigError) {
|
|
1703
|
-
console.error("Erro na valida\xE7\xE3o do
|
|
1871
|
+
console.error("Erro na valida\xE7\xE3o do channel whatsapp:", whatsappConfigError);
|
|
1704
1872
|
}
|
|
1705
1873
|
if (chatConfigError) {
|
|
1706
|
-
console.error("Erro na valida\xE7\xE3o do
|
|
1874
|
+
console.error("Erro na valida\xE7\xE3o do channel chat:", chatConfigError);
|
|
1707
1875
|
}
|
|
1708
1876
|
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(HeaderContainer, { children: [
|
|
1709
1877
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Title, { $textColor: textColor, children: "Erro no carregamento do formul\xE1rio!" }),
|
|
@@ -1744,36 +1912,42 @@ var MitreFormComponent = import_react8.default.forwardRef(({
|
|
|
1744
1912
|
primaryButtonTextColor: buttonTextColor
|
|
1745
1913
|
}
|
|
1746
1914
|
),
|
|
1747
|
-
actionModal?.kind === "success" && actionModal.
|
|
1915
|
+
actionModal?.kind === "success" && actionModal.channel === "whatsapp" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1748
1916
|
Modal,
|
|
1749
1917
|
{
|
|
1750
1918
|
type: "success",
|
|
1751
1919
|
title: MODAL_SUCCESS_TITLE,
|
|
1752
|
-
message:
|
|
1753
|
-
primaryButtonText:
|
|
1754
|
-
onPrimaryAction: () =>
|
|
1755
|
-
window.open(actionModal.targetUrl, "_blank", "noopener,noreferrer");
|
|
1756
|
-
setActionModal(null);
|
|
1757
|
-
},
|
|
1920
|
+
message: MODAL_SUCCESS_AUTO_REDIRECT_WHATSAPP,
|
|
1921
|
+
primaryButtonText: MODAL_SUCCESS_OK_BUTTON_TEXT,
|
|
1922
|
+
onPrimaryAction: () => setActionModal(null),
|
|
1758
1923
|
onClose: () => setActionModal(null),
|
|
1759
1924
|
primaryButtonBgColor: buttonBackgroundColor,
|
|
1760
|
-
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
|
+
}
|
|
1761
1932
|
}
|
|
1762
1933
|
),
|
|
1763
|
-
actionModal?.kind === "success" && actionModal.
|
|
1934
|
+
actionModal?.kind === "success" && actionModal.channel === "chat" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1764
1935
|
Modal,
|
|
1765
1936
|
{
|
|
1766
1937
|
type: "success",
|
|
1767
1938
|
title: MODAL_SUCCESS_TITLE,
|
|
1768
|
-
message:
|
|
1769
|
-
primaryButtonText:
|
|
1770
|
-
onPrimaryAction: () =>
|
|
1771
|
-
submitChatInNewTab(actionModal.chatUrl, actionModal.virtualObj);
|
|
1772
|
-
setActionModal(null);
|
|
1773
|
-
},
|
|
1939
|
+
message: MODAL_SUCCESS_AUTO_REDIRECT_CHAT,
|
|
1940
|
+
primaryButtonText: MODAL_SUCCESS_OK_BUTTON_TEXT,
|
|
1941
|
+
onPrimaryAction: () => setActionModal(null),
|
|
1774
1942
|
onClose: () => setActionModal(null),
|
|
1775
1943
|
primaryButtonBgColor: buttonBackgroundColor,
|
|
1776
|
-
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
|
+
}
|
|
1777
1951
|
}
|
|
1778
1952
|
),
|
|
1779
1953
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: [
|
|
@@ -1868,7 +2042,7 @@ var MitreFormComponent = import_react8.default.forwardRef(({
|
|
|
1868
2042
|
},
|
|
1869
2043
|
formKey
|
|
1870
2044
|
),
|
|
1871
|
-
|
|
2045
|
+
effectiveShowContactPreference && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(FormControl, { isInvalid: !!errors.preferencia_contato, children: [
|
|
1872
2046
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FormLabel, { htmlFor: "preferencia_contato", $textColor: textColor, children: "Prefer\xEAncia de Contato" }),
|
|
1873
2047
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
1874
2048
|
Select,
|
|
@@ -1882,14 +2056,14 @@ var MitreFormComponent = import_react8.default.forwardRef(({
|
|
|
1882
2056
|
$textColor: inputTextColor,
|
|
1883
2057
|
children: [
|
|
1884
2058
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "", disabled: true, children: "Selecione uma op\xE7\xE3o" }),
|
|
1885
|
-
Object.values(
|
|
2059
|
+
Object.values(ContactPreference).map((op) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: op, children: op }, op))
|
|
1886
2060
|
]
|
|
1887
2061
|
}
|
|
1888
2062
|
),
|
|
1889
2063
|
errors.preferencia_contato && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FormErrorMessage, { children: errors.preferencia_contato.message })
|
|
1890
2064
|
] }),
|
|
1891
2065
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
|
|
1892
|
-
/* @__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" }) }),
|
|
1893
2067
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { children: [
|
|
1894
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",
|
|
1895
2069
|
" ",
|
|
@@ -1916,7 +2090,7 @@ MitreFormComponent.displayName = "MitreFormComponent";
|
|
|
1916
2090
|
var Form_default = MitreFormComponent;
|
|
1917
2091
|
// Annotate the CommonJS export names for ESM import in node:
|
|
1918
2092
|
0 && (module.exports = {
|
|
1919
|
-
|
|
1920
|
-
|
|
2093
|
+
ContactPreference,
|
|
2094
|
+
MitreFormComponent
|
|
1921
2095
|
});
|
|
1922
2096
|
//# sourceMappingURL=index.cjs.map
|