mitre-form-component 0.0.12 → 0.0.14
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/dist/index.cjs +164 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +15 -4
- package/dist/index.d.ts +15 -4
- package/dist/index.js +155 -4
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
5
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
8
|
var __export = (target, all) => {
|
|
7
9
|
for (var name in all)
|
|
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
15
17
|
}
|
|
16
18
|
return to;
|
|
17
19
|
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
18
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
29
|
|
|
20
30
|
// src/index.ts
|
|
@@ -24,11 +34,162 @@ __export(index_exports, {
|
|
|
24
34
|
});
|
|
25
35
|
module.exports = __toCommonJS(index_exports);
|
|
26
36
|
|
|
37
|
+
// src/components/Form/index.tsx
|
|
38
|
+
var import_react = __toESM(require("react"), 1);
|
|
39
|
+
|
|
40
|
+
// src/components/styles/utils.ts
|
|
41
|
+
function flex(direction = "row", alignItems, justifyContent) {
|
|
42
|
+
return `
|
|
43
|
+
align-items:${alignItems || null};
|
|
44
|
+
display:flex;
|
|
45
|
+
flex-direction:${direction};
|
|
46
|
+
justify-content:${justifyContent || null};
|
|
47
|
+
`;
|
|
48
|
+
}
|
|
49
|
+
var opacityEffect = `
|
|
50
|
+
&:hover {
|
|
51
|
+
cursor:pointer;
|
|
52
|
+
opacity:.9;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
&:active {
|
|
56
|
+
opacity:.7;
|
|
57
|
+
}
|
|
58
|
+
`;
|
|
59
|
+
|
|
60
|
+
// src/components/Form/styles.ts
|
|
61
|
+
var import_styled_components = __toESM(require("styled-components"), 1);
|
|
62
|
+
var FormContainer = import_styled_components.default.div`
|
|
63
|
+
${flex("column")}
|
|
64
|
+
align-items: stretch;
|
|
65
|
+
justify-content: flex-start;
|
|
66
|
+
overflow-x: hidden;
|
|
67
|
+
overflow-y: auto;
|
|
68
|
+
|
|
69
|
+
/* Hide scrollbars for WebKit browsers */
|
|
70
|
+
::-webkit-scrollbar {
|
|
71
|
+
display: none;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* Hide scrollbars for Firefox */
|
|
75
|
+
scrollbar-width: none;
|
|
76
|
+
|
|
77
|
+
box-sizing: border-box;
|
|
78
|
+
height: 100%;
|
|
79
|
+
`;
|
|
80
|
+
var HeaderContainer = import_styled_components.default.div`
|
|
81
|
+
margin-bottom: 1rem;
|
|
82
|
+
`;
|
|
83
|
+
var ButtonContainer = import_styled_components.default.div`
|
|
84
|
+
display: flex;
|
|
85
|
+
flex-direction: column;
|
|
86
|
+
align-items: center;
|
|
87
|
+
justify-content: center;
|
|
88
|
+
width: 100%;
|
|
89
|
+
margin-top: 0.75rem;
|
|
90
|
+
`;
|
|
91
|
+
var Form = import_styled_components.default.form`
|
|
92
|
+
label {
|
|
93
|
+
font-weight: 700;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
input {
|
|
97
|
+
background: white;
|
|
98
|
+
margin-bottom: 0.75rem;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
p {
|
|
102
|
+
font-family: "Montserrat", sans-serif;
|
|
103
|
+
font-style: italic;
|
|
104
|
+
font-weight: 200;
|
|
105
|
+
font-size: 0.8rem;
|
|
106
|
+
text-align: start;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
a {
|
|
110
|
+
font-family: "Montserrat", sans-serif;
|
|
111
|
+
font-style: italic;
|
|
112
|
+
font-weight: 200;
|
|
113
|
+
font-size: 0.8rem;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
h6 {
|
|
117
|
+
text-align: start;
|
|
118
|
+
margin-left: 10px;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
& > div {
|
|
122
|
+
margin-bottom: 10px;,
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
button {
|
|
126
|
+
${opacityEffect}
|
|
127
|
+
color: var(--black);
|
|
128
|
+
font-weight: 600;
|
|
129
|
+
border: none;
|
|
130
|
+
border-radius: 8px;
|
|
131
|
+
width: 60%;
|
|
132
|
+
margin-top: 10px;
|
|
133
|
+
margin-bottom: 10px;
|
|
134
|
+
}
|
|
135
|
+
`;
|
|
136
|
+
var Title = import_styled_components.default.h2`
|
|
137
|
+
font-size: 1.25rem;
|
|
138
|
+
font-weight: 700;
|
|
139
|
+
line-height: 24px;
|
|
140
|
+
letter-spacing: 0em;
|
|
141
|
+
`;
|
|
142
|
+
var Text = import_styled_components.default.p`
|
|
143
|
+
font-size: 1rem;
|
|
144
|
+
font-weight: 400;
|
|
145
|
+
line-height: 23px;
|
|
146
|
+
letter-spacing: 0em;
|
|
147
|
+
margin-top: 10px;
|
|
148
|
+
`;
|
|
149
|
+
|
|
27
150
|
// src/components/Form/index.tsx
|
|
28
151
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
29
|
-
var MitreFormComponent = (
|
|
30
|
-
|
|
31
|
-
|
|
152
|
+
var MitreFormComponent = import_react.default.forwardRef(({
|
|
153
|
+
productId,
|
|
154
|
+
apiUrl,
|
|
155
|
+
apiToken,
|
|
156
|
+
utm_source,
|
|
157
|
+
utm_medium,
|
|
158
|
+
utm_campaign,
|
|
159
|
+
utm_term,
|
|
160
|
+
showHeader = true,
|
|
161
|
+
colorPrimary = "#F6C76B",
|
|
162
|
+
textColor = "#2F2F2F",
|
|
163
|
+
backgroundColor = "#cecece",
|
|
164
|
+
innerPadding = "1rem"
|
|
165
|
+
}, ref) => {
|
|
166
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FormContainer, { ref, children: [
|
|
167
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(HeaderContainer, { children: [
|
|
168
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Title, { children: "Atendimento por mensagem" }),
|
|
169
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: "Informe seus dados e retornaremos a mensagem." })
|
|
170
|
+
] }),
|
|
171
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
|
|
172
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonContainer, {}),
|
|
173
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
|
|
174
|
+
"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",
|
|
175
|
+
" ",
|
|
176
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
177
|
+
"a",
|
|
178
|
+
{
|
|
179
|
+
href: "https://www.mitrerealty.com.br/politica-de-privacidade",
|
|
180
|
+
target: "_blank",
|
|
181
|
+
rel: "noopener noreferrer",
|
|
182
|
+
children: "Pol\xEDtica de Privacidade"
|
|
183
|
+
}
|
|
184
|
+
),
|
|
185
|
+
". Ao clicar em ",
|
|
186
|
+
'"',
|
|
187
|
+
"enviar",
|
|
188
|
+
'"',
|
|
189
|
+
", voc\xEA concorda em permitir que a Mitre Realty, armazene e processe os dados pessoais fornecidos por voc\xEA para finalidade informada"
|
|
190
|
+
] })
|
|
191
|
+
] });
|
|
192
|
+
});
|
|
32
193
|
MitreFormComponent.displayName = "MitreFormComponent";
|
|
33
194
|
var Form_default = MitreFormComponent;
|
|
34
195
|
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/components/Form/index.tsx"],"sourcesContent":["import MitreFormComponent from \"./components/Form\";\n\nexport default MitreFormComponent;\n//export type { MitreFormComponentProps } from \"./components/Form\";\n","import React, { useState } from \"react\";\n\n\
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/components/Form/index.tsx","../src/components/styles/utils.ts","../src/components/Form/styles.ts"],"sourcesContent":["import MitreFormComponent from \"./components/Form\";\n\nexport default MitreFormComponent;\n//export type { MitreFormComponentProps } from \"./components/Form\";\n","import React, { useState } from \"react\";\n\nimport { \n FormContainer, \n HeaderContainer, \n ButtonContainer, \n Form, \n Title, \n Text \n} from \"./styles\";\n\nexport interface MitreFormComponentProps {\n productId: string;\n apiUrl: string;\n apiToken: string;\n utm_source: string;\n utm_medium: string;\n utm_campaign: string;\n utm_term: string;\n showHeader?: boolean;\n colorPrimary?: string;\n textColor?: string;\n backgroundColor?: string;\n innerPadding?: string;\n}\n\nconst MitreFormComponent = React.forwardRef<HTMLDivElement, MitreFormComponentProps>(({\n productId,\n apiUrl,\n apiToken,\n utm_source,\n utm_medium,\n utm_campaign,\n utm_term,\n showHeader = true,\n colorPrimary = \"#F6C76B\",\n textColor = \"#2F2F2F\",\n backgroundColor = \"#cecece\",\n innerPadding = \"1rem\",\n}, ref) => {\n return (\n <FormContainer ref={ref} >\n <HeaderContainer>\n <Title >Atendimento por mensagem</Title>\n\n <Text >Informe seus dados e retornaremos a mensagem.</Text>\n </HeaderContainer>\n\n \n\n <h6>* Campos de preenchimento obrigatório.</h6>\n\n <ButtonContainer>\n </ButtonContainer>\n\n <p>A Mitre Realty respeita a sua privacidade e utiliza os seus dados pessoais para contatá-lo por e-mail ou telefone aqui registrados. Para saber mais, acesse a nossa{ ' '}\n <a\n href=\"https://www.mitrerealty.com.br/politica-de-privacidade\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Política de Privacidade\n </a>. Ao clicar em {'\"'}enviar{'\"'}, você concorda em permitir que a Mitre Realty, armazene e processe os dados pessoais fornecidos por você para finalidade informada</p>\n\n </FormContainer>\n );\n});\n\nMitreFormComponent.displayName = \"MitreFormComponent\";\nexport default MitreFormComponent;\n","type directionType = \"column\" | \"row\";\ntype alignItemsType = \"center\" | \"flex-start\";\n\ntype jutifyContentType = \"center\" | \"space-between\";\n\nexport function flex(\n direction: directionType = \"row\",\n alignItems?: alignItemsType,\n justifyContent?: jutifyContentType\n) {\n return `\n align-items:${alignItems || null};\n display:flex;\n flex-direction:${direction};\n justify-content:${justifyContent || null};\n `;\n}\n\nexport const alignX = `\n left:50%;\n transform:translateX(-50%);\n`;\n\nexport const alignXAndY = `\n left:50%;\n top:50%;\n transform:translate(-50%, -50%);\n`;\n\nexport const darkEffect = `\n &:hover {\n cursor:pointer;\n filter:brightness(98%);\n }\n\n &:active {\n filter:brightness(95%);\n }\n`;\n\nexport const opacityEffect = `\n &:hover {\n cursor:pointer;\n opacity:.9;\n }\n\n &:active {\n opacity:.7;\n }\n`;\n\nexport const modalZIndex = 9999;\n\nexport const breakpoints = {\n tablet: \"1024px\",\n};\n","import { flex, opacityEffect } from \"../styles/utils\";\nimport styled from \"styled-components\";\n\nexport const FormContainer = styled.div`\n ${flex(\"column\")}\n align-items: stretch;\n justify-content: flex-start;\n overflow-x: hidden;\n overflow-y: auto;\n\n /* Hide scrollbars for WebKit browsers */\n ::-webkit-scrollbar {\n display: none;\n }\n\n /* Hide scrollbars for Firefox */\n scrollbar-width: none;\n\n box-sizing: border-box;\n height: 100%;\n`;\n\nexport const HeaderContainer = styled.div`\n margin-bottom: 1rem;\n`;\n\nexport const ButtonContainer = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n margin-top: 0.75rem;\n`;\n\nexport const Form = styled.form`\n label {\n font-weight: 700;\n }\n\n input {\n background: white;\n margin-bottom: 0.75rem;\n }\n\n p {\n font-family: \"Montserrat\", sans-serif;\n font-style: italic;\n font-weight: 200;\n font-size: 0.8rem;\n text-align: start;\n }\n\n a {\n font-family: \"Montserrat\", sans-serif;\n font-style: italic;\n font-weight: 200;\n font-size: 0.8rem;\n }\n\n h6 {\n text-align: start;\n margin-left: 10px;\n }\n\n & > div {\n margin-bottom: 10px;,\n }\n\n button {\n ${opacityEffect}\n color: var(--black);\n font-weight: 600;\n border: none;\n border-radius: 8px;\n width: 60%;\n margin-top: 10px;\n margin-bottom: 10px;\n }\n`;\n\nexport const Title = styled.h2`\n font-size: 1.25rem;\n font-weight: 700;\n line-height: 24px;\n letter-spacing: 0em;\n`;\n\nexport const Text = styled.p`\n font-size: 1rem;\n font-weight: 400;\n line-height: 23px;\n letter-spacing: 0em;\n margin-top: 10px;\n`;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAgC;;;ACKzB,SAAS,KACd,YAA2B,OAC3B,YACA,gBACA;AACA,SAAO;AAAA,kBACS,cAAc,IAAI;AAAA;AAAA,qBAEf,SAAS;AAAA,sBACR,kBAAkB,IAAI;AAAA;AAE5C;AAwBO,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACvC7B,+BAAmB;AAEZ,IAAM,gBAAgB,yBAAAA,QAAO;AAAA,IAChC,KAAK,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBX,IAAM,kBAAkB,yBAAAA,QAAO;AAAA;AAAA;AAI/B,IAAM,kBAAkB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS/B,IAAM,OAAO,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAmCrB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWZ,IAAM,QAAQ,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrB,IAAM,OAAO,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AF9CrB;AAhBN,IAAM,qBAAqB,aAAAC,QAAM,WAAoD,CAAC;AAAA,EACpF;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAc;AAAA,EACd,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,eAAe;AACjB,GAAG,QAAQ;AACT,SACE,6CAAC,iBAAc,KACb;AAAA,iDAAC,mBACC;AAAA,kDAAC,SAAO,sCAAwB;AAAA,MAEhC,4CAAC,QAAM,2DAA6C;AAAA,OACtD;AAAA,IAIE,4CAAC,QAAG,uDAAsC;AAAA,IAE1C,4CAAC,mBACD;AAAA,IAEA,6CAAC,OAAE;AAAA;AAAA,MAAqK;AAAA,MACxK;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,KAAI;AAAA,UACL;AAAA;AAAA,MAED;AAAA,MAAI;AAAA,MAAgB;AAAA,MAAI;AAAA,MAAO;AAAA,MAAI;AAAA,OAAmI;AAAA,KAE1K;AAEJ,CAAC;AAED,mBAAmB,cAAc;AACjC,IAAO,eAAQ;;;ADnEf,IAAO,gBAAQ;","names":["styled","React"]}
|
package/dist/index.d.cts
CHANGED
|
@@ -1,8 +1,19 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
interface MitreFormComponentProps {
|
|
4
|
+
productId: string;
|
|
5
|
+
apiUrl: string;
|
|
6
|
+
apiToken: string;
|
|
7
|
+
utm_source: string;
|
|
8
|
+
utm_medium: string;
|
|
9
|
+
utm_campaign: string;
|
|
10
|
+
utm_term: string;
|
|
11
|
+
showHeader?: boolean;
|
|
12
|
+
colorPrimary?: string;
|
|
13
|
+
textColor?: string;
|
|
14
|
+
backgroundColor?: string;
|
|
15
|
+
innerPadding?: string;
|
|
16
|
+
}
|
|
17
|
+
declare const MitreFormComponent: React.ForwardRefExoticComponent<MitreFormComponentProps & React.RefAttributes<HTMLDivElement>>;
|
|
7
18
|
|
|
8
19
|
export { MitreFormComponent as default };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,19 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
interface MitreFormComponentProps {
|
|
4
|
+
productId: string;
|
|
5
|
+
apiUrl: string;
|
|
6
|
+
apiToken: string;
|
|
7
|
+
utm_source: string;
|
|
8
|
+
utm_medium: string;
|
|
9
|
+
utm_campaign: string;
|
|
10
|
+
utm_term: string;
|
|
11
|
+
showHeader?: boolean;
|
|
12
|
+
colorPrimary?: string;
|
|
13
|
+
textColor?: string;
|
|
14
|
+
backgroundColor?: string;
|
|
15
|
+
innerPadding?: string;
|
|
16
|
+
}
|
|
17
|
+
declare const MitreFormComponent: React.ForwardRefExoticComponent<MitreFormComponentProps & React.RefAttributes<HTMLDivElement>>;
|
|
7
18
|
|
|
8
19
|
export { MitreFormComponent as default };
|
package/dist/index.js
CHANGED
|
@@ -1,8 +1,159 @@
|
|
|
1
1
|
// src/components/Form/index.tsx
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
import React from "react";
|
|
3
|
+
|
|
4
|
+
// src/components/styles/utils.ts
|
|
5
|
+
function flex(direction = "row", alignItems, justifyContent) {
|
|
6
|
+
return `
|
|
7
|
+
align-items:${alignItems || null};
|
|
8
|
+
display:flex;
|
|
9
|
+
flex-direction:${direction};
|
|
10
|
+
justify-content:${justifyContent || null};
|
|
11
|
+
`;
|
|
12
|
+
}
|
|
13
|
+
var opacityEffect = `
|
|
14
|
+
&:hover {
|
|
15
|
+
cursor:pointer;
|
|
16
|
+
opacity:.9;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
&:active {
|
|
20
|
+
opacity:.7;
|
|
21
|
+
}
|
|
22
|
+
`;
|
|
23
|
+
|
|
24
|
+
// src/components/Form/styles.ts
|
|
25
|
+
import styled from "styled-components";
|
|
26
|
+
var FormContainer = styled.div`
|
|
27
|
+
${flex("column")}
|
|
28
|
+
align-items: stretch;
|
|
29
|
+
justify-content: flex-start;
|
|
30
|
+
overflow-x: hidden;
|
|
31
|
+
overflow-y: auto;
|
|
32
|
+
|
|
33
|
+
/* Hide scrollbars for WebKit browsers */
|
|
34
|
+
::-webkit-scrollbar {
|
|
35
|
+
display: none;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* Hide scrollbars for Firefox */
|
|
39
|
+
scrollbar-width: none;
|
|
40
|
+
|
|
41
|
+
box-sizing: border-box;
|
|
42
|
+
height: 100%;
|
|
43
|
+
`;
|
|
44
|
+
var HeaderContainer = styled.div`
|
|
45
|
+
margin-bottom: 1rem;
|
|
46
|
+
`;
|
|
47
|
+
var ButtonContainer = styled.div`
|
|
48
|
+
display: flex;
|
|
49
|
+
flex-direction: column;
|
|
50
|
+
align-items: center;
|
|
51
|
+
justify-content: center;
|
|
52
|
+
width: 100%;
|
|
53
|
+
margin-top: 0.75rem;
|
|
54
|
+
`;
|
|
55
|
+
var Form = styled.form`
|
|
56
|
+
label {
|
|
57
|
+
font-weight: 700;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
input {
|
|
61
|
+
background: white;
|
|
62
|
+
margin-bottom: 0.75rem;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
p {
|
|
66
|
+
font-family: "Montserrat", sans-serif;
|
|
67
|
+
font-style: italic;
|
|
68
|
+
font-weight: 200;
|
|
69
|
+
font-size: 0.8rem;
|
|
70
|
+
text-align: start;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
a {
|
|
74
|
+
font-family: "Montserrat", sans-serif;
|
|
75
|
+
font-style: italic;
|
|
76
|
+
font-weight: 200;
|
|
77
|
+
font-size: 0.8rem;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
h6 {
|
|
81
|
+
text-align: start;
|
|
82
|
+
margin-left: 10px;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
& > div {
|
|
86
|
+
margin-bottom: 10px;,
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
button {
|
|
90
|
+
${opacityEffect}
|
|
91
|
+
color: var(--black);
|
|
92
|
+
font-weight: 600;
|
|
93
|
+
border: none;
|
|
94
|
+
border-radius: 8px;
|
|
95
|
+
width: 60%;
|
|
96
|
+
margin-top: 10px;
|
|
97
|
+
margin-bottom: 10px;
|
|
98
|
+
}
|
|
99
|
+
`;
|
|
100
|
+
var Title = styled.h2`
|
|
101
|
+
font-size: 1.25rem;
|
|
102
|
+
font-weight: 700;
|
|
103
|
+
line-height: 24px;
|
|
104
|
+
letter-spacing: 0em;
|
|
105
|
+
`;
|
|
106
|
+
var Text = styled.p`
|
|
107
|
+
font-size: 1rem;
|
|
108
|
+
font-weight: 400;
|
|
109
|
+
line-height: 23px;
|
|
110
|
+
letter-spacing: 0em;
|
|
111
|
+
margin-top: 10px;
|
|
112
|
+
`;
|
|
113
|
+
|
|
114
|
+
// src/components/Form/index.tsx
|
|
115
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
116
|
+
var MitreFormComponent = React.forwardRef(({
|
|
117
|
+
productId,
|
|
118
|
+
apiUrl,
|
|
119
|
+
apiToken,
|
|
120
|
+
utm_source,
|
|
121
|
+
utm_medium,
|
|
122
|
+
utm_campaign,
|
|
123
|
+
utm_term,
|
|
124
|
+
showHeader = true,
|
|
125
|
+
colorPrimary = "#F6C76B",
|
|
126
|
+
textColor = "#2F2F2F",
|
|
127
|
+
backgroundColor = "#cecece",
|
|
128
|
+
innerPadding = "1rem"
|
|
129
|
+
}, ref) => {
|
|
130
|
+
return /* @__PURE__ */ jsxs(FormContainer, { ref, children: [
|
|
131
|
+
/* @__PURE__ */ jsxs(HeaderContainer, { children: [
|
|
132
|
+
/* @__PURE__ */ jsx(Title, { children: "Atendimento por mensagem" }),
|
|
133
|
+
/* @__PURE__ */ jsx(Text, { children: "Informe seus dados e retornaremos a mensagem." })
|
|
134
|
+
] }),
|
|
135
|
+
/* @__PURE__ */ jsx("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
|
|
136
|
+
/* @__PURE__ */ jsx(ButtonContainer, {}),
|
|
137
|
+
/* @__PURE__ */ jsxs("p", { children: [
|
|
138
|
+
"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",
|
|
139
|
+
" ",
|
|
140
|
+
/* @__PURE__ */ jsx(
|
|
141
|
+
"a",
|
|
142
|
+
{
|
|
143
|
+
href: "https://www.mitrerealty.com.br/politica-de-privacidade",
|
|
144
|
+
target: "_blank",
|
|
145
|
+
rel: "noopener noreferrer",
|
|
146
|
+
children: "Pol\xEDtica de Privacidade"
|
|
147
|
+
}
|
|
148
|
+
),
|
|
149
|
+
". Ao clicar em ",
|
|
150
|
+
'"',
|
|
151
|
+
"enviar",
|
|
152
|
+
'"',
|
|
153
|
+
", voc\xEA concorda em permitir que a Mitre Realty, armazene e processe os dados pessoais fornecidos por voc\xEA para finalidade informada"
|
|
154
|
+
] })
|
|
155
|
+
] });
|
|
156
|
+
});
|
|
6
157
|
MitreFormComponent.displayName = "MitreFormComponent";
|
|
7
158
|
var Form_default = MitreFormComponent;
|
|
8
159
|
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Form/index.tsx","../src/index.ts"],"sourcesContent":["import React, { useState } from \"react\";\n\n\
|
|
1
|
+
{"version":3,"sources":["../src/components/Form/index.tsx","../src/components/styles/utils.ts","../src/components/Form/styles.ts","../src/index.ts"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { \n FormContainer, \n HeaderContainer, \n ButtonContainer, \n Form, \n Title, \n Text \n} from \"./styles\";\n\nexport interface MitreFormComponentProps {\n productId: string;\n apiUrl: string;\n apiToken: string;\n utm_source: string;\n utm_medium: string;\n utm_campaign: string;\n utm_term: string;\n showHeader?: boolean;\n colorPrimary?: string;\n textColor?: string;\n backgroundColor?: string;\n innerPadding?: string;\n}\n\nconst MitreFormComponent = React.forwardRef<HTMLDivElement, MitreFormComponentProps>(({\n productId,\n apiUrl,\n apiToken,\n utm_source,\n utm_medium,\n utm_campaign,\n utm_term,\n showHeader = true,\n colorPrimary = \"#F6C76B\",\n textColor = \"#2F2F2F\",\n backgroundColor = \"#cecece\",\n innerPadding = \"1rem\",\n}, ref) => {\n return (\n <FormContainer ref={ref} >\n <HeaderContainer>\n <Title >Atendimento por mensagem</Title>\n\n <Text >Informe seus dados e retornaremos a mensagem.</Text>\n </HeaderContainer>\n\n \n\n <h6>* Campos de preenchimento obrigatório.</h6>\n\n <ButtonContainer>\n </ButtonContainer>\n\n <p>A Mitre Realty respeita a sua privacidade e utiliza os seus dados pessoais para contatá-lo por e-mail ou telefone aqui registrados. Para saber mais, acesse a nossa{ ' '}\n <a\n href=\"https://www.mitrerealty.com.br/politica-de-privacidade\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Política de Privacidade\n </a>. Ao clicar em {'\"'}enviar{'\"'}, você concorda em permitir que a Mitre Realty, armazene e processe os dados pessoais fornecidos por você para finalidade informada</p>\n\n </FormContainer>\n );\n});\n\nMitreFormComponent.displayName = \"MitreFormComponent\";\nexport default MitreFormComponent;\n","type directionType = \"column\" | \"row\";\ntype alignItemsType = \"center\" | \"flex-start\";\n\ntype jutifyContentType = \"center\" | \"space-between\";\n\nexport function flex(\n direction: directionType = \"row\",\n alignItems?: alignItemsType,\n justifyContent?: jutifyContentType\n) {\n return `\n align-items:${alignItems || null};\n display:flex;\n flex-direction:${direction};\n justify-content:${justifyContent || null};\n `;\n}\n\nexport const alignX = `\n left:50%;\n transform:translateX(-50%);\n`;\n\nexport const alignXAndY = `\n left:50%;\n top:50%;\n transform:translate(-50%, -50%);\n`;\n\nexport const darkEffect = `\n &:hover {\n cursor:pointer;\n filter:brightness(98%);\n }\n\n &:active {\n filter:brightness(95%);\n }\n`;\n\nexport const opacityEffect = `\n &:hover {\n cursor:pointer;\n opacity:.9;\n }\n\n &:active {\n opacity:.7;\n }\n`;\n\nexport const modalZIndex = 9999;\n\nexport const breakpoints = {\n tablet: \"1024px\",\n};\n","import { flex, opacityEffect } from \"../styles/utils\";\nimport styled from \"styled-components\";\n\nexport const FormContainer = styled.div`\n ${flex(\"column\")}\n align-items: stretch;\n justify-content: flex-start;\n overflow-x: hidden;\n overflow-y: auto;\n\n /* Hide scrollbars for WebKit browsers */\n ::-webkit-scrollbar {\n display: none;\n }\n\n /* Hide scrollbars for Firefox */\n scrollbar-width: none;\n\n box-sizing: border-box;\n height: 100%;\n`;\n\nexport const HeaderContainer = styled.div`\n margin-bottom: 1rem;\n`;\n\nexport const ButtonContainer = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n margin-top: 0.75rem;\n`;\n\nexport const Form = styled.form`\n label {\n font-weight: 700;\n }\n\n input {\n background: white;\n margin-bottom: 0.75rem;\n }\n\n p {\n font-family: \"Montserrat\", sans-serif;\n font-style: italic;\n font-weight: 200;\n font-size: 0.8rem;\n text-align: start;\n }\n\n a {\n font-family: \"Montserrat\", sans-serif;\n font-style: italic;\n font-weight: 200;\n font-size: 0.8rem;\n }\n\n h6 {\n text-align: start;\n margin-left: 10px;\n }\n\n & > div {\n margin-bottom: 10px;,\n }\n\n button {\n ${opacityEffect}\n color: var(--black);\n font-weight: 600;\n border: none;\n border-radius: 8px;\n width: 60%;\n margin-top: 10px;\n margin-bottom: 10px;\n }\n`;\n\nexport const Title = styled.h2`\n font-size: 1.25rem;\n font-weight: 700;\n line-height: 24px;\n letter-spacing: 0em;\n`;\n\nexport const Text = styled.p`\n font-size: 1rem;\n font-weight: 400;\n line-height: 23px;\n letter-spacing: 0em;\n margin-top: 10px;\n`;\n","import MitreFormComponent from \"./components/Form\";\n\nexport default MitreFormComponent;\n//export type { MitreFormComponentProps } from \"./components/Form\";\n"],"mappings":";AAAA,OAAO,WAAyB;;;ACKzB,SAAS,KACd,YAA2B,OAC3B,YACA,gBACA;AACA,SAAO;AAAA,kBACS,cAAc,IAAI;AAAA;AAAA,qBAEf,SAAS;AAAA,sBACR,kBAAkB,IAAI;AAAA;AAE5C;AAwBO,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACvC7B,OAAO,YAAY;AAEZ,IAAM,gBAAgB,OAAO;AAAA,IAChC,KAAK,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBX,IAAM,kBAAkB,OAAO;AAAA;AAAA;AAI/B,IAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS/B,IAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAmCrB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWZ,IAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrB,IAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AF9CrB,SACE,KADF;AAhBN,IAAM,qBAAqB,MAAM,WAAoD,CAAC;AAAA,EACpF;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAc;AAAA,EACd,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,eAAe;AACjB,GAAG,QAAQ;AACT,SACE,qBAAC,iBAAc,KACb;AAAA,yBAAC,mBACC;AAAA,0BAAC,SAAO,sCAAwB;AAAA,MAEhC,oBAAC,QAAM,2DAA6C;AAAA,OACtD;AAAA,IAIE,oBAAC,QAAG,uDAAsC;AAAA,IAE1C,oBAAC,mBACD;AAAA,IAEA,qBAAC,OAAE;AAAA;AAAA,MAAqK;AAAA,MACxK;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,KAAI;AAAA,UACL;AAAA;AAAA,MAED;AAAA,MAAI;AAAA,MAAgB;AAAA,MAAI;AAAA,MAAO;AAAA,MAAI;AAAA,OAAmI;AAAA,KAE1K;AAEJ,CAAC;AAED,mBAAmB,cAAc;AACjC,IAAO,eAAQ;;;AGnEf,IAAO,gBAAQ;","names":[]}
|