mitre-form-component 0.1.3 → 0.1.4

package/dist/index.js

@@ -300,6 +300,92 @@ var Subtitle = styled.p`
   color: ${(props) => props.$textColor || theme.colors.black};
 `;
 
+// src/components/ProductSelect/styles.ts
+import styled2, { css } from "styled-components";
+var FormLabel = styled2.label`
+  font-family: ${theme.fonts.primary};
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1rem;
+  color: ${(props) => props.$textColor || theme.colors.black};
+  display: block;
+  margin-bottom: 0.5rem;
+  text-align: left;
+`;
+var Select = styled2.select`
+  font-family: ${theme.fonts.primary};
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  background: ${(props) => props.$backgroundColor || theme.colors.white};
+  color: ${(props) => props.$textColor || theme.colors.black};
+  padding: 0.5rem 3rem 0.5rem 0.5rem; /* Aumentado padding-right para 3rem */
+  border-radius: 0.125rem;
+  border: 1px solid ${(props) => props.$borderColor || theme.colors.transparent};
+  display: block;
+  height: 3.125rem;
+  width: 100%;
+  cursor: pointer;
+  
+  /* Remover a seta padrão do navegador */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  
+  /* Adicionar seta personalizada maior */
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 1rem center; /* Posicionado a 1rem da direita */
+  background-size: 1.25rem; /* Tamanho da seta aumentado para 1.25rem */
+
+  &:focus {
+    border-radius: 0.125rem;
+    border: 2px solid ${(props) => props.$focusBorderColor || theme.colors.yellow500};
+    outline: none;
+  }
+
+  /* Estilo para option disabled (placeholder) */
+  option:disabled {
+    color: ${theme.colors.gray100};
+    font-weight: 800;
+  }
+
+  /* Estilo para options normais */
+  option:not(:disabled) {
+    color: ${(props) => props.$textColor || theme.colors.black};
+    font-weight: 500;
+  }
+`;
+var FormErrorMessage = styled2.small`
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  color: ${theme.colors.red};
+  margin-top: 0.25rem;
+  display: block;
+`;
+var FormControl = styled2.div.withConfig({
+  shouldForwardProp: (prop) => !["isInvalid"].includes(prop)
+})`
+  ${FormLabel} {
+    ${(props) => props.isInvalid && css`
+        color: ${theme.colors.red};
+      `};
+  }
+
+  ${Select} {
+    ${(props) => props.isInvalid && css`
+        border: 1px solid ${theme.colors.red};
+      `};
+
+    &:focus {
+      ${(props) => props.isInvalid && css`
+          border: 1px solid ${theme.colors.red};
+        `};
+    }
+  }
+`;
+
 // src/components/styles/FontLoader.tsx
 import { useEffect } from "react";
 var useMontserratFont = () => {
@@ -369,8 +455,8 @@ function date(e) {
 }
 
 // src/components/Input/styles.ts
-import styled2, { css } from "styled-components";
-var FormLabel = styled2.label`
+import styled3, { css as css2 } from "styled-components";
+var FormLabel2 = styled3.label`
   font-family: ${theme.fonts.primary};
   font-style: normal;
   font-weight: 500;
@@ -380,7 +466,7 @@ var FormLabel = styled2.label`
   margin-bottom: 0.5rem;
   text-align: left;
 `;
-var Input = styled2.input`
+var Input = styled3.input`
   font-family: ${theme.fonts.primary};
   font-style: normal;
   font-weight: 500;
@@ -422,24 +508,24 @@ var Input = styled2.input`
     font-weight: 500;
   }
 `;
-var FormErrorMessage = styled2.small`
+var FormErrorMessage2 = styled3.small`
   font-size: 0.75rem;
   line-height: 1.125rem;
   color: ${theme.colors.red};
   margin-top: 0.25rem;
   display: block;
 `;
-var FormControl = styled2.div.withConfig({
+var FormControl2 = styled3.div.withConfig({
   shouldForwardProp: (prop) => !["isInvalid"].includes(prop)
 })`
-  ${FormLabel} {
-    ${(props) => props.isInvalid && css`
+  ${FormLabel2} {
+    ${(props) => props.isInvalid && css2`
         color: ${theme.colors.red};
       `};
   }
 
   ${Input} {
-    ${(props) => props.isInvalid && css`
+    ${(props) => props.isInvalid && css2`
         border: 1px solid ${theme.colors.red};
 
         &:not(:focus)::placeholder {
@@ -449,7 +535,7 @@ var FormControl = styled2.div.withConfig({
       `};
 
     &:focus {
-      ${(props) => props.isInvalid && css`
+      ${(props) => props.isInvalid && css2`
           border: 1px solid ${theme.colors.red};
         `};
     }
@@ -482,8 +568,8 @@ var InputBase = ({
     },
     [mask]
   );
-  return /* @__PURE__ */ jsxs(FormControl, { isInvalid: !!error, children: [
-    !!label && /* @__PURE__ */ jsx(FormLabel, { htmlFor: id, $textColor: labelTextColor, children: label }),
+  return /* @__PURE__ */ jsxs(FormControl2, { isInvalid: !!error, children: [
+    !!label && /* @__PURE__ */ jsx(FormLabel2, { htmlFor: id, $textColor: labelTextColor, children: label }),
     !mask ? /* @__PURE__ */ jsx(
       Input,
       {
@@ -516,15 +602,15 @@ var InputBase = ({
         ...rest
       }
     ),
-    !!error && showErrorMessage && /* @__PURE__ */ jsx(FormErrorMessage, { "data-testid": "error-message", children: typeof error === "string" ? error : error.message })
+    !!error && showErrorMessage && /* @__PURE__ */ jsx(FormErrorMessage2, { "data-testid": "error-message", children: typeof error === "string" ? error : error.message })
   ] });
 };
 var Input2 = forwardRef(InputBase);
 
 // src/components/Button/styles.ts
 import { darken } from "polished";
-import styled3, { css as css2 } from "styled-components";
-var Icon = styled3.span`
+import styled4, { css as css3 } from "styled-components";
+var Icon = styled4.span`
   font-size: 0;
   line-height: 0;
   transition: all 0.25s ease;
@@ -534,7 +620,7 @@ var Icon = styled3.span`
   opacity: 0;
   margin-right: 0.625rem;
 `;
-var Text = styled3.span`
+var Text = styled4.span`
   font-family: ${theme.fonts.primary};
   font-size: 1rem;
   line-height: 1.5rem;
@@ -542,14 +628,14 @@ var Text = styled3.span`
 
   transition: all 0.25s ease;
 `;
-var TextSubmitting = styled3.span`
+var TextSubmitting = styled4.span`
   font-family: ${theme.fonts.primary};
   font-weight: 400;
   font-size: 1rem;
 
   transition: all 0.25s ease;
 `;
-var LoadingIcon = styled3.span.withConfig({
+var LoadingIcon = styled4.span.withConfig({
   shouldForwardProp: (prop) => prop !== "hasText"
 })`
   display: block;
@@ -572,7 +658,7 @@ var LoadingIcon = styled3.span.withConfig({
     }
   }
 `;
-var Button = styled3.button.withConfig({
+var Button = styled4.button.withConfig({
   shouldForwardProp: (prop) => ![
     "hasIcon",
     "isSubmitting",
@@ -629,14 +715,14 @@ var Button = styled3.button.withConfig({
   }
 
   ${Text} {
-    ${(props) => props.isSubmitting && !props.hasSubmittingMessage && css2`
+    ${(props) => props.isSubmitting && !props.hasSubmittingMessage && css3`
         transform: unset;
         opacity: 0;
       `}
   }
 
   ${LoadingIcon} {
-    ${(props) => props.isSubmitting && !props.hasSubmittingMessage && css2`
+    ${(props) => props.isSubmitting && !props.hasSubmittingMessage && css3`
         display: flex;
         -webkit-box-align: center;
         align-items: center;
@@ -680,7 +766,7 @@ function Button2({
 import { useEffect as useEffect2, useState as useState2, useCallback as useCallback2 } from "react";
 
 // src/components/Alert/styles.ts
-import styled4, { css as css3, keyframes } from "styled-components";
+import styled5, { css as css4, keyframes } from "styled-components";
 var fadeIn = keyframes`
   from { opacity: 0; transform: translateY(-10px); }
   to { opacity: 1; transform: translateY(0); }
@@ -690,7 +776,7 @@ var fadeOut = keyframes`
   to { opacity: 0; transform: translateY(-10px); }
 `;
 var typeStyles = {
-  error: css3`
+  error: css4`
     background-color: ${theme.colors.red};
     border: 1px solid ${theme.colors.red};
     color: ${theme.colors.white};
@@ -698,7 +784,7 @@ var typeStyles = {
       color: ${theme.colors.white};
     }
   `,
-  warning: css3`
+  warning: css4`
     background-color: ${theme.colors.yellow500};
     border: 1px solid ${theme.colors.yellow400};
     color: ${theme.colors.black};
@@ -706,7 +792,7 @@ var typeStyles = {
       color: ${theme.colors.black};
     }
   `,
-  info: css3`
+  info: css4`
     background-color: ${theme.colors.blue};
     border: 1px solid ${theme.colors.blue};
     color: ${theme.colors.white};
@@ -714,7 +800,7 @@ var typeStyles = {
       color: ${theme.colors.white};
     }
   `,
-  success: css3`
+  success: css4`
     background-color: ${theme.colors.green};
     border: 1px solid ${theme.colors.green2};
     color: ${theme.colors.white};
@@ -723,7 +809,7 @@ var typeStyles = {
     }
   `
 };
-var AlertContainer = styled4.div`
+var AlertContainer = styled5.div`
   position: fixed;
   width: 500px;
   top: 15px;
@@ -743,7 +829,7 @@ var AlertContainer = styled4.div`
 
   ${({ $type }) => typeStyles[$type]}
 `;
-var DismissButton = styled4.button`
+var DismissButton = styled5.button`
   position: absolute;
   background: transparent;
   right: 10px;
@@ -814,10 +900,10 @@ import {
 } from "react";
 
 // src/components/PhoneInput/styles.ts
-import styled5, { css as css4 } from "styled-components";
+import styled6, { css as css5 } from "styled-components";
 import { PhoneInput } from "react-international-phone";
 import "react-international-phone/style.css";
-var FormLabel2 = styled5.label`
+var FormLabel3 = styled6.label`
   font-family: ${theme.fonts.primary};
   font-style: normal;
   font-weight: 500;
@@ -827,7 +913,7 @@ var FormLabel2 = styled5.label`
   margin-bottom: 0.5rem;
   text-align: left;
 `;
-var StyledPhoneInput = styled5(PhoneInput)`
+var StyledPhoneInput = styled6(PhoneInput)`
   width: 100%;
   height: 3.125rem;
   background: ${(props) => props.$backgroundColor || theme.colors.white};
@@ -941,24 +1027,24 @@ var StyledPhoneInput = styled5(PhoneInput)`
     }
   }
 `;
-var FormErrorMessage2 = styled5.small`
+var FormErrorMessage3 = styled6.small`
   font-size: 0.75rem;
   line-height: 1.125rem;
   color: ${theme.colors.red};
   margin-top: 0.25rem;
   display: block;
 `;
-var FormControl2 = styled5.div.withConfig({
+var FormControl3 = styled6.div.withConfig({
   shouldForwardProp: (prop) => !["isInvalid"].includes(prop)
 })`
-  ${FormLabel2} {
-    ${(props) => props.isInvalid && css4`
+  ${FormLabel3} {
+    ${(props) => props.isInvalid && css5`
         color: ${theme.colors.red};
       `};
   }
 
   ${StyledPhoneInput} {
-    ${(props) => props.isInvalid && css4`
+    ${(props) => props.isInvalid && css5`
         border: 1px solid ${theme.colors.red};
 
         &:not(:focus)::placeholder {
@@ -968,7 +1054,7 @@ var FormControl2 = styled5.div.withConfig({
       `};
 
     .react-international-phone-input-container {
-      ${(props) => props.isInvalid && css4`
+      ${(props) => props.isInvalid && css5`
           border: 1px solid ${theme.colors.red};
 
           &:not(:focus)::placeholder {
@@ -979,7 +1065,7 @@ var FormControl2 = styled5.div.withConfig({
     }
 
     .react-international-phone-country-selector-button {
-      ${(props) => props.isInvalid && css4`
+      ${(props) => props.isInvalid && css5`
           border-right: 1px solid ${theme.colors.red};
         `};
     }
@@ -1002,8 +1088,8 @@ var PhoneInputBase = ({
   value,
   ...rest
 }, ref) => {
-  return /* @__PURE__ */ jsxs4(FormControl2, { isInvalid: !!error, children: [
-    !!label && /* @__PURE__ */ jsx4(FormLabel2, { htmlFor: id, $textColor: labelTextColor, children: label }),
+  return /* @__PURE__ */ jsxs4(FormControl3, { isInvalid: !!error, children: [
+    !!label && /* @__PURE__ */ jsx4(FormLabel3, { htmlFor: id, $textColor: labelTextColor, children: label }),
     /* @__PURE__ */ jsx4(
       StyledPhoneInput,
       {
@@ -1038,7 +1124,7 @@ var PhoneInputBase = ({
         $textColor: inputTextColor
       }
     ),
-    !!error && showErrorMessage && /* @__PURE__ */ jsx4(FormErrorMessage2, { "data-testid": "error-message", children: typeof error === "string" ? error : error?.message })
+    !!error && showErrorMessage && /* @__PURE__ */ jsx4(FormErrorMessage3, { "data-testid": "error-message", children: typeof error === "string" ? error : error?.message })
   ] });
 };
 var PhoneInput2 = forwardRef2(PhoneInputBase);
@@ -1047,94 +1133,6 @@ var PhoneInput2 = forwardRef2(PhoneInputBase);
 import {
   forwardRef as forwardRef3
 } from "react";
-
-// src/components/ProductSelect/styles.ts
-import styled6, { css as css5 } from "styled-components";
-var FormLabel3 = styled6.label`
-  font-family: ${theme.fonts.primary};
-  font-style: normal;
-  font-weight: 500;
-  font-size: 1rem;
-  color: ${(props) => props.$textColor || theme.colors.black};
-  display: block;
-  margin-bottom: 0.5rem;
-  text-align: left;
-`;
-var Select = styled6.select`
-  font-family: ${theme.fonts.primary};
-  font-style: normal;
-  font-weight: 500;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  background: ${(props) => props.$backgroundColor || theme.colors.white};
-  color: ${(props) => props.$textColor || theme.colors.black};
-  padding: 0.5rem 3rem 0.5rem 0.5rem; /* Aumentado padding-right para 3rem */
-  border-radius: 0.125rem;
-  border: 1px solid ${(props) => props.$borderColor || theme.colors.transparent};
-  display: block;
-  height: 3.125rem;
-  width: 100%;
-  cursor: pointer;
-  
-  /* Remover a seta padrão do navegador */
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  
-  /* Adicionar seta personalizada maior */
-  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
-  background-repeat: no-repeat;
-  background-position: right 1rem center; /* Posicionado a 1rem da direita */
-  background-size: 1.25rem; /* Tamanho da seta aumentado para 1.25rem */
-
-  &:focus {
-    border-radius: 0.125rem;
-    border: 2px solid ${(props) => props.$focusBorderColor || theme.colors.yellow500};
-    outline: none;
-  }
-
-  /* Estilo para option disabled (placeholder) */
-  option:disabled {
-    color: ${theme.colors.gray100};
-    font-weight: 800;
-  }
-
-  /* Estilo para options normais */
-  option:not(:disabled) {
-    color: ${(props) => props.$textColor || theme.colors.black};
-    font-weight: 500;
-  }
-`;
-var FormErrorMessage3 = styled6.small`
-  font-size: 0.75rem;
-  line-height: 1.125rem;
-  color: ${theme.colors.red};
-  margin-top: 0.25rem;
-  display: block;
-`;
-var FormControl3 = styled6.div.withConfig({
-  shouldForwardProp: (prop) => !["isInvalid"].includes(prop)
-})`
-  ${FormLabel3} {
-    ${(props) => props.isInvalid && css5`
-        color: ${theme.colors.red};
-      `};
-  }
-
-  ${Select} {
-    ${(props) => props.isInvalid && css5`
-        border: 1px solid ${theme.colors.red};
-      `};
-
-    &:focus {
-      ${(props) => props.isInvalid && css5`
-          border: 1px solid ${theme.colors.red};
-        `};
-    }
-  }
-`;
-
-// src/components/ProductSelect/index.tsx
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var ProductSelectBase = ({
   id,
@@ -1150,8 +1148,8 @@ var ProductSelectBase = ({
   placeholder = "Selecione um produto",
   ...rest
 }, ref) => {
-  return /* @__PURE__ */ jsxs5(FormControl3, { isInvalid: !!error, children: [
-    !!label && /* @__PURE__ */ jsx5(FormLabel3, { htmlFor: id, $textColor: labelTextColor, children: label }),
+  return /* @__PURE__ */ jsxs5(FormControl, { isInvalid: !!error, children: [
+    !!label && /* @__PURE__ */ jsx5(FormLabel, { htmlFor: id, $textColor: labelTextColor, children: label }),
     /* @__PURE__ */ jsxs5(
       Select,
       {
@@ -1169,7 +1167,7 @@ var ProductSelectBase = ({
         ]
       }
     ),
-    !!error && showErrorMessage && /* @__PURE__ */ jsx5(FormErrorMessage3, { "data-testid": "error-message", children: typeof error === "string" ? error : error.message })
+    !!error && showErrorMessage && /* @__PURE__ */ jsx5(FormErrorMessage, { "data-testid": "error-message", children: typeof error === "string" ? error : error.message })
   ] });
 };
 var ProductSelect = forwardRef3(ProductSelectBase);
@@ -1177,6 +1175,12 @@ var ProductSelect = forwardRef3(ProductSelectBase);
 // src/components/Form/index.tsx
 import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var phoneUtil = PhoneNumberUtil.getInstance();
+var PreferenciaContato = /* @__PURE__ */ ((PreferenciaContato2) => {
+  PreferenciaContato2["Whatsapp"] = "Whatsapp";
+  PreferenciaContato2["Email"] = "Email";
+  PreferenciaContato2["Ligacao"] = "Liga\xE7\xE3o";
+  return PreferenciaContato2;
+})(PreferenciaContato || {});
 var isPhoneValid = (phone) => {
   try {
     return phoneUtil.isValidNumber(phoneUtil.parseAndKeepRawInput(phone));
@@ -1223,6 +1227,7 @@ var MitreFormComponent = React2.forwardRef(({
   inputFocusBorderColor = theme.colors.yellow500,
   inputPlaceholderColor = theme.colors.gray100,
   inputTextColor = theme.colors.black,
+  showPreferenciaContato = false,
   onSuccess,
   onError
 }, ref) => {
@@ -1291,7 +1296,7 @@ var MitreFormComponent = React2.forwardRef(({
     setFormKey((k) => k + 1);
   };
   const sendMessage = async (data) => {
-    const { name, email, phone, productId } = data;
+    const { name, email, phone, productId, preferencia_contato } = data;
     const phoneValue = phone.inputValue;
     const phoneDigitsOnly = phoneValue?.replace(/\D/g, "") || "";
     const message = "Gostaria de mais informa\xE7\xF5es sobre o produto";
@@ -1322,7 +1327,8 @@ var MitreFormComponent = React2.forwardRef(({
         utm_source: utm.utm_source,
         utm_campaign: utm.utm_campaign,
         utm_medium: utm.utm_medium,
-        utm_term: utm.utm_term
+        utm_term: utm.utm_term,
+        ...showPreferenciaContato && preferencia_contato ? { preferencia_contato } : {}
       };
       const response = await fetch(`${apiUrl}/leads`, {
         method: "POST",
@@ -1468,6 +1474,26 @@ var MitreFormComponent = React2.forwardRef(({
           },
           formKey
         ),
+        showPreferenciaContato && /* @__PURE__ */ jsxs6(FormControl, { isInvalid: !!errors.preferencia_contato, children: [
+          /* @__PURE__ */ jsx6(FormLabel, { htmlFor: "preferencia_contato", $textColor: textColor, children: "Prefer\xEAncia de Contato" }),
+          /* @__PURE__ */ jsxs6(
+            Select,
+            {
+              id: "preferencia_contato",
+              ...register("preferencia_contato"),
+              defaultValue: "",
+              $backgroundColor: inputBackgroundColor,
+              $borderColor: inputBorderColor,
+              $focusBorderColor: inputFocusBorderColor,
+              $textColor: inputTextColor,
+              children: [
+                /* @__PURE__ */ jsx6("option", { value: "", disabled: true, children: "Selecione uma op\xE7\xE3o" }),
+                Object.values(PreferenciaContato).map((op) => /* @__PURE__ */ jsx6("option", { value: op, children: op }, op))
+              ]
+            }
+          ),
+          errors.preferencia_contato && /* @__PURE__ */ jsx6(FormErrorMessage, { children: errors.preferencia_contato.message })
+        ] }),
         /* @__PURE__ */ jsx6("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
         /* @__PURE__ */ jsx6(ButtonContainer, { children: /* @__PURE__ */ jsx6(Button2, { bgColor: buttonBackgroundColor, color: buttonTextColor, type: "submit", isSubmitting: loading, children: "Enviar mensagem" }) }),
         /* @__PURE__ */ jsxs6("p", { children: [
@@ -1495,6 +1521,7 @@ var MitreFormComponent = React2.forwardRef(({
 MitreFormComponent.displayName = "MitreFormComponent";
 var Form_default = MitreFormComponent;
 export {
-  Form_default as MitreFormComponent
+  Form_default as MitreFormComponent,
+  PreferenciaContato
 };
 //# sourceMappingURL=index.js.map