mitre-form-component 0.0.1

package/src/components/Form/index.tsx

@@ -0,0 +1,215 @@
+'use client';
+
+import React, { useState } from "react";
+import { useError } from "../hooks/useError";
+import { useForm, SubmitHandler } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { 
+    FormContainer, 
+    HeaderContainer, 
+    ButtonContainer, 
+    Form, 
+    Title, 
+    Text 
+} from "./styles";
+import FontLoader, { GlobalStyles } from "../styles/global";
+
+import { Input } from "../Input";
+import { Button } from "../Button";
+import { Alert } from "../Alert";
+
+export interface MitreFormComponentProps {
+  productId: string;
+  apiUrl: string;
+  apiToken: string;
+  utm_source: string;
+  utm_medium: string;
+  utm_campaign: string;
+  utm_term: string;
+  showHeader?: boolean;
+  colorPrimary?: string;
+  textColor?: string;
+}
+
+const schema = yup.object().shape({
+  name: yup.string().required("Nome é obrigatório"),
+  email: yup.string().required("Email é obrigatório").email("Email inválido"),
+  phone: yup.string().required("Telefone é obrigatório")
+  .test(
+    'min-digits',
+    'Número de telefone inválido!',
+    (value) => {
+      const digitsOnly = value?.replace(/\D/g, '') || '';
+      //TODO melhorar essa lógica com algum regex
+      return digitsOnly.length >= 8
+    })
+});
+
+const MitreFormComponent = React.forwardRef<HTMLDivElement, MitreFormComponentProps>(({
+  productId,
+  apiUrl,
+  apiToken,
+  utm_source,
+  utm_medium,
+  utm_campaign,
+  utm_term,
+  showHeader =  true,
+  colorPrimary = "#F6C76B",
+  textColor = "#2F2F2F",
+}, ref) => {
+  const [loading, setIsLoading] = useState(false);
+  const { error, handleError, clearError } = useError();
+  const [successMessage, setSuccessMessage] = useState('');
+
+  const { register, handleSubmit, formState: { errors }, reset, watch } = useForm({
+    resolver: yupResolver(schema),
+  });
+
+  const phoneValue = watch("phone");
+
+  const sendMessage: SubmitHandler<{ name: string; email: string; phone: string; }> = async (data) => {
+    const { name, email, phone } = data;
+    const message = "Gostaria de mais informações sobre o produto";
+
+    try {
+      setIsLoading(true);
+
+      if (!productId || !utm_source || !utm_medium || !utm_campaign || !utm_term || !apiToken) {
+        throw new Error("Parâmetros obrigatórios não informados");
+      }
+
+      const response = await fetch(`${apiUrl}/leads`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Basic ${apiToken}`,
+        },
+        body: JSON.stringify({
+          name,
+          email,
+          phone,
+          message,
+          productId,
+          utm_source,
+          utm_medium,
+          utm_campaign,
+          utm_term,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Falha ao enviar a mensagem!");
+      }
+
+      setSuccessMessage("Mensagem enviada com sucesso!");
+      reset();
+    } catch (err) {
+      handleError(err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+      <>
+        <FontLoader />
+        <GlobalStyles />
+
+        {error && (
+          <Alert 
+            type="error" 
+            dismissible
+            onDismiss={clearError}
+            autoDismiss={5000}
+          >
+            {error!.message}
+          </Alert>
+        )}
+
+        {successMessage && (
+          <Alert 
+            type="success"
+            dismissible
+            onDismiss={() => setSuccessMessage('')}
+            autoDismiss={5000}
+          >
+            {successMessage}
+          </Alert>
+        )}
+
+        <FormContainer ref={ref} >
+          {showHeader && 
+            <HeaderContainer>
+              <Title $textColor={textColor}>Atendimento por mensagem</Title>
+
+              <Text $textColor={textColor}>Informe seus dados e retornaremos a mensagem.</Text>
+            </HeaderContainer>
+          }
+
+          <Form $textColor={textColor} onSubmit={handleSubmit(sendMessage)} noValidate>
+            <Input
+              id="name"
+              label="Nome *"
+              placeholder="Digite seu nome"
+              {...register("name")}
+              borderColor={colorPrimary}
+              textColor={textColor}
+              error={errors.name?.message}
+              autoComplete="name"
+              required
+            />
+
+            <Input
+              id="email"
+              label="Email *"
+              type="email"
+              placeholder="exemplo@email.com"
+              {...register("email")}
+              borderColor={colorPrimary}
+              textColor={textColor}
+              error={errors.email?.message}
+              autoComplete="email"
+              required
+            />
+
+            <Input
+              id="phone"
+              label="Telefone *"
+              placeholder="(11) 00000-0000"
+              mask="phone"
+              {...register("phone")}
+              borderColor={colorPrimary}
+              textColor={textColor}
+              error={errors.phone?.message}
+              required
+              value={phoneValue}
+            />
+
+            <h6>* Campos de preenchimento obrigatório.</h6>
+
+            <ButtonContainer>
+              <Button bgColor={colorPrimary} color={textColor} type="submit" isSubmitting={loading}>
+                Enviar mensagem
+              </Button>
+            </ButtonContainer>
+
+            <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{ ' '}
+            <a
+              href="https://www.mitrerealty.com.br/politica-de-privacidade"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Política de Privacidade
+            </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>
+
+          </Form>
+        </FormContainer>
+      </>
+  );
+});
+
+MitreFormComponent.displayName = "MitreFormComponent";
+
+export default MitreFormComponent;

package/src/components/Form/styles.ts

@@ -0,0 +1,99 @@
+import { flex, opacityEffect } from "../styles/utils";
+import styled from "styled-components";
+
+export const FormContainer = styled.div`
+  ${flex("column")}
+  align-items: stretch;
+  justify-content: flex-start;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  /* Hide scrollbars for WebKit browsers */
+  ::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbars for Firefox */
+  scrollbar-width: none;
+
+  box-sizing: border-box;
+`;
+
+export const HeaderContainer = styled.div`
+  margin-bottom: 1rem;
+`;
+
+export const ButtonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin-top: 0.75rem;
+`;
+
+export const Form = styled.form<{ $textColor: string }>`
+  label {
+    font-weight: 700;
+  }
+
+  input {
+    background: white;
+    margin-bottom: 0.75rem;
+  }
+
+  p {
+    font-family: "Montserrat", sans-serif;
+    font-style: italic;
+    font-weight: 200;
+    font-size: 0.8rem;
+    color: ${(props) => props.$textColor || "var(--black)"};
+    text-align: start;
+  }
+
+  a {
+    font-family: "Montserrat", sans-serif;
+    font-style: italic;
+    font-weight: 200;
+    font-size: 0.8rem;
+    color: ${(props) => props.$textColor || "var(--black)"};
+  }
+
+  h6 {
+    text-align: start;
+    margin-left: 10px;
+    color: ${(props) => props.$textColor || "var(--black)"};
+  }
+
+  & > div {
+    margin-bottom: 10px;,
+  }
+
+  button {
+    ${opacityEffect}
+    color: var(--black);
+    font-weight: 600;
+    border: none;
+    border-radius: 8px;
+    width: 60%;
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+`;
+
+export const Title = styled.h2<{ $textColor: string }>`
+  font-size: 1.25rem;
+  font-weight: 700;
+  line-height: 24px;
+  letter-spacing: 0em;
+  color: ${(props) => props.$textColor || "var(--black)"};
+`;
+
+export const Text = styled.p<{ $textColor: string }>`
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 23px;
+  letter-spacing: 0em;
+  margin-top: 10px;
+  color: ${(props) => props.$textColor || "var(--black)"};
+`;

package/src/components/Input/index.tsx

@@ -0,0 +1,132 @@
+import {
+  FormEvent,
+  forwardRef,
+  ForwardRefRenderFunction,
+  InputHTMLAttributes,
+  useCallback,
+  useRef,
+} from "react";
+import { FieldError } from "react-hook-form";
+import { cep, cpf, currency, date } from "./masks";
+
+import 'react-phone-input-2/lib/style.css'
+
+import {
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Input as FormInput,
+  FormPhoneInput
+} from "./styles";
+
+type InputType =
+  | "text"
+  | "email"
+  | "password"
+  | "number"
+  | "tel"
+  | "url"
+  | "date"
+  | "time"
+  | "datetime-local";
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  id: string;
+  label?: string;
+  error?: string | FieldError;
+  showErrorMessage?: boolean;
+  borderColor: string;
+  textColor?: string;
+
+  mask?: "cep" | "currency" | "cpf" | "phone" | "date";
+  type?: InputType;
+}
+
+const InputBase: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
+  { id, label, error, showErrorMessage = true, borderColor, textColor, mask = "", type = "text", ...rest },
+  ref
+) => {
+  const phoneInputRef = useRef<{ input: HTMLInputElement }>(null);
+  const { onChange, name } = rest;
+
+  const handleKeyUp = useCallback(
+    (e: FormEvent<HTMLInputElement>) => {
+      if (mask === "cep") cep(e);
+      if (mask === "currency") currency(e);
+      if (mask === "cpf") cpf(e);
+      if (mask === "date") date(e);
+    },
+    [mask]
+  );
+
+  const handlePhoneChange = useCallback((value: string) => {
+    onChange?.({ target: { value, name } } as React.ChangeEvent<HTMLInputElement>);
+
+    if (phoneInputRef.current?.input) {
+      phoneInputRef.current.input.value = value;
+    }
+  }, [onChange, name]);
+
+  return (
+    <FormControl isInvalid={!!error}>
+      {!!label && <FormLabel htmlFor={id} $textColor={textColor}>{label}</FormLabel>}
+
+      {!mask ? (
+        <FormInput
+          id={id}
+          ref={ref}
+          type={type} 
+          $bordercolor={borderColor}
+          aria-invalid={!!error && showErrorMessage ? "true" : "false"}
+          autoComplete={rest.autoComplete || "on"}
+          {...rest}
+        />
+      ) : mask === 'phone' ? (
+        <FormPhoneInput
+          country={"br"}
+          $bordercolor={borderColor}
+          placeholder={rest.placeholder}
+          aria-invalid={!!error && showErrorMessage ? "true" : "false"}
+          isInvalid={!!error}
+          onChange={handlePhoneChange}
+          masks={{
+            br: "(..) .....-....",}}
+          inputProps={{
+            id,
+            name: 'phone',
+            required: true,
+            autoFocus: true,
+            autoComplete: "tel",
+            ref: phoneInputRef,
+          }}
+          //TODO no futuro enviar com o ddi, só retirar o disableCountryCode e disableCountryGuess
+          dropdownStyle={{
+            color: textColor,
+          }}
+          disableCountryGuess={true}
+          disableCountryCode={true}
+          value={rest.value as string} 
+        />
+      ) : (
+        <FormInput
+          id={id}
+          ref={ref}
+          type={type} 
+          $bordercolor={borderColor}
+          aria-invalid={!!error && showErrorMessage ? "true" : "false"}
+          onKeyUp={handleKeyUp}
+          autoComplete={rest.autoComplete || "on"}
+          {...rest}
+        />
+      )}
+
+      {!!error && showErrorMessage && (
+        <FormErrorMessage data-testid="error-message">
+          {typeof error === 'string' ? error : error.message}
+        </FormErrorMessage>
+      )}
+    </FormControl>
+  );
+};
+
+export const Input = forwardRef(InputBase);

package/src/components/Input/masks.ts

@@ -0,0 +1,52 @@
+import { FormEvent } from "react";
+
+export function cep(e: FormEvent<HTMLInputElement>) {
+  e.currentTarget.maxLength = 9;
+  let value = e.currentTarget.value;
+  value = value.replace(/\D/g, "");
+  value = value.replace(/^(\d{5})(\d)/, "$1-$2");
+  e.currentTarget.value = value;
+  return e;
+}
+
+export function currency(e: FormEvent<HTMLInputElement>) {
+  let value = e.currentTarget.value;
+  value = value.replace(/\D/g, "");
+  value = value.replace(/(\d)(\d{2})$/, "$1,$2");
+  value = value.replace(/(?=(\d{3})+(\D))\B/g, ".");
+
+  e.currentTarget.value = value;
+  return e;
+}
+
+export function cpf(e: FormEvent<HTMLInputElement>) {
+  e.currentTarget.maxLength = 14;
+  let value = e.currentTarget.value;
+  if (!value.match(/^(\d{3}).(\d{3}).(\d{3})-(\d{2})$/)) {
+    value = value.replace(/\D/g, "");
+    value = value.replace(/(\d{3})(\d)/, "$1.$2");
+    value = value.replace(/(\d{3})(\d)/, "$1.$2");
+    value = value.replace(/(\d{3})(\d{2})$/, "$1-$2");
+
+    e.currentTarget.value = value;
+  }
+  return e;
+}
+
+export function date(e: FormEvent<HTMLInputElement>) {
+  let value = e.currentTarget.value;
+  value = value.replace(/\D/g, "");
+  value = value.replace(/(\d{2})(\d)/, "$1/$2");
+  value = value.replace(/(\d{2})(\d)/, "$1/$2");
+  e.currentTarget.value = value;
+  return e;
+}
+
+export function phone(e: FormEvent<HTMLInputElement>) {
+  let value = e.currentTarget.value;
+  value = value.replace(/\D/g, "");
+  value = value.replace(/(\d{2})(\d)/, "$1/$2");
+  value = value.replace(/(\d{2})(\d)/, "$1/$2");
+  e.currentTarget.value = value;
+  return e;
+}

package/src/components/Input/styles.ts

@@ -0,0 +1,201 @@
+import styled, { css } from "styled-components";
+import { InputHTMLAttributes } from "react";
+
+import PhoneInput from "react-phone-input-2";
+
+type InputProps = {
+  isInvalid?: boolean;
+  bordercolor?: string;
+};
+
+export const FormLabel = styled.label<InputProps & { $textColor?: string }>`
+  font-family: "Montserrat", sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1rem;
+  color: ${(props) =>
+    props.isInvalid ? "var(--red)" : props.$textColor || "var(--black)"};
+  display: block;
+  margin-bottom: 0.5rem;
+  text-align: left;
+`;
+
+export const Input = styled.input<
+  InputHTMLAttributes<HTMLInputElement> & { $bordercolor?: string }
+>`
+  font-family: "Montserrat", sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  background: var(--gray-500);
+  color: var(--black);
+  padding: 0.5rem;
+  border-radius: 0.125rem;
+  border: 1px solid transparent;
+  display: block;
+  height: 3.125rem;
+  width: 100%;
+
+  &:focus {
+    border-radius: 0.125rem;
+    border: 2px solid ${(props) => props.$bordercolor || "var(--yellow-500)"};
+    outline: none;
+  }
+
+  &::placeholder {
+    font-size: 1rem;
+    line-height: 1.5rem;
+    color: #b6b6b6;
+    font-weight: 800;
+  }
+
+  /* Autofill styles */
+  &:-webkit-autofill {
+    background: var(--gray-500) !important;
+    color: var(--black) !important;
+    -webkit-text-fill-color: var(--black) !important;
+    transition: background-color 5000s ease-in-out 0s; /* Prevent flashing */
+  }
+
+  &:-webkit-autofill::first-line {
+    font-family: "Montserrat", sans-serif;
+    font-size: 1rem;
+    font-weight: 500;
+  }
+`;
+
+export const FormPhoneInput = styled(PhoneInput)<
+  InputProps & { $bordercolor?: string; $textColor?: string }
+>`
+  .form-control {
+    background: white;
+    color: ${(props) =>
+      props.isInvalid ? "var(--red)" : props.$textColor || "var(--black)"};
+    padding: 0.5rem;
+    border-radius: 0.125rem;
+    border: 1px solid transparent;
+    height: 3.125rem;
+    width: 100%;
+    padding-left: 4rem;
+    font-family: "Montserrat", sans-serif;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    text &:focus,
+    &:focus-within {
+      border-radius: 0.125rem;
+      border: 2px solid
+        ${(props) =>
+          !props.isValid
+            ? "var(--red)"
+            : props.$bordercolor || "var(--yellow-500)"};
+    }
+
+    &::placeholder {
+      font-size: 1rem;
+      line-height: 1.5rem;
+      color: #b6b6b6;
+      font-weight: 800;
+    }
+
+    /* Autofill styles */
+    &:-webkit-autofill {
+      background: var(--gray-500) !important;
+      color: var(--black) !important;
+      -webkit-text-fill-color: var(--black) !important;
+      transition: background-color 5000s ease-in-out 0s; /* Prevent flashing */
+    }
+
+    &:-webkit-autofill::first-line {
+      font-family: "Montserrat", sans-serif;
+      font-size: 1rem;
+      font-weight: 500;
+    }
+  }
+
+  &:focus-within {
+    .form-control {
+      border: 2px solid
+        ${(props) =>
+          props.isInvalid
+            ? "var(--red)"
+            : props.$bordercolor || "var(--yellow-500)"};
+    }
+  }
+
+  .flag-dropdown {
+    background: white;
+    border: none;
+    padding: 0.5rem;
+    margin: 0.25rem;
+    cursor: pointer;
+
+    &:focus-within {
+      outline: none;
+    }
+  }
+`;
+
+export const FormErrorMessage = styled.small`
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  color: var(--red);
+  margin-top: 0.25rem;
+  display: block;
+`;
+
+export const FormControl = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["isInvalid", "$bordercolor"].includes(prop),
+})<{ isInvalid?: boolean; $bordercolor?: string }>`
+  ${FormLabel} {
+    ${(props) =>
+      props.isInvalid &&
+      css`
+        color: var(--red);
+      `};
+  }
+
+  ${Input} {
+    ${(props) =>
+      props.isInvalid &&
+      css`
+        border: 1px solid var(--red);
+
+        &:not(:focus)::placeholder {
+          color: var(--red);
+          font-weight: 600;
+        }
+      `};
+
+    &:focus {
+      ${(props) =>
+        props.isInvalid &&
+        css`
+          border: 1px solid var(--red);
+        `};
+    }
+  }
+
+  ${FormPhoneInput} {
+    ${(props) =>
+      props.isInvalid &&
+      css`
+        border: 1px solid var(--red);
+
+        &:not(:focus)::placeholder {
+          color: var(--red);
+          font-weight: 600;
+        }
+      `};
+
+    &:focus {
+      ${(props) =>
+        props.isInvalid &&
+        css`
+          border: 1px solid var(--red);
+        `};
+    }
+  }
+`;

package/src/components/hooks/useError.ts

@@ -0,0 +1,15 @@
+import { useState } from "react";
+
+export function useError() {
+  const [error, setError] = useState<Error | null>(null);
+
+  const handleError = (err: unknown) => {
+    const errorObj = err instanceof Error ? err : new Error(String(err));
+    setError(errorObj);
+    console.error(errorObj);
+  };
+
+  const clearError = () => setError(null);
+
+  return { error, handleError, clearError };
+}