@greatapps/common 1.1.290 → 1.1.292

package/src/components/modals/cards/CardFormFields.tsx

@@ -3,7 +3,7 @@
 import { UseFormReturn } from 'react-hook-form';
 import { FormField } from '../../ui/form/FormField';
 import { SelectField } from '../../ui/form/SelectField';
-import { formatCPF, formatPostalCode } from '../../../utils/format/masks';
+import { formatCPF, formatCNPJ, formatPostalCode } from '../../../utils/format/masks';
 import z from 'zod';
 import { CardCvcElement, CardExpiryElement, CardNumberElement } from '@stripe/react-stripe-js';
 
@@ -20,18 +20,39 @@ const stripeElementOptions = {
   },
 };
 
-export const cardFormSchema = z.object({
-  name: z.string().min(1, 'Nome é obrigatório'),
-  number: z.string().min(1, 'Número do cartão é obrigatório'),
-  expiry: z.string().min(1, 'Data de validade é obrigatória'),
-  cvv: z.string().min(1, 'Código de segurança é obrigatório'),
-  country: z.string().min(1, 'País é obrigatório'),
-  postalCode: z.string().optional(),
-  cpf: z.string().min(14, 'CPF é obrigatório'),
-});
+export const cardFormSchema = z
+  .object({
+    name: z.string().min(1, 'Nome é obrigatório'),
+    number: z.string().min(1, 'Número do cartão é obrigatório'),
+    expiry: z.string().min(1, 'Data de validade é obrigatória'),
+    cvv: z.string().min(1, 'Código de segurança é obrigatório'),
+    country: z.string().min(1, 'País é obrigatório'),
+    personType: z.enum(['pf', 'pj']),
+    cpf: z.string().optional(),
+    cnpj: z.string().optional(),
+    fullName: z.string().min(1, 'Nome completo é obrigatório'),
+    cep: z.string().min(9, 'CEP é obrigatório'),
+    street: z.string().min(1, 'Endereço é obrigatório'),
+    streetNumber: z.string().min(1, 'Número é obrigatório'),
+    city: z.string().min(1, 'Cidade é obrigatória'),
+    state: z.string().min(1, 'UF é obrigatório'),
+    complement: z.string().optional(),
+  })
+  .refine(
+    (data) => {
+      if (data.personType === 'pf') return !!data.cpf && data.cpf.length >= 14;
+      return !!data.cnpj && data.cnpj.length >= 18;
+    },
+    {
+      message: 'Documento é obrigatório',
+      path: ['cpf'],
+    }
+  );
 
 export type CardFormData = z.infer<typeof cardFormSchema>;
 
+export const STEP1_FIELDS = ['name', 'number', 'expiry', 'cvv', 'country', 'personType', 'cpf', 'cnpj'] as const;
+
 type CardFormFieldsProps = {
   readonly form: UseFormReturn<CardFormData>;
 };
@@ -44,6 +65,8 @@ export function CardFormFields({ form }: CardFormFieldsProps) {
     formState: { errors },
   } = form;
 
+  const personType = watch('personType');
+
   return (
     <div className="flex flex-col gap-5">
       <FormField
@@ -55,9 +78,7 @@ export function CardFormFields({ form }: CardFormFieldsProps) {
       />
 
       <div className="flex flex-col gap-1.5">
-        <label className="paragraph-xsmall-semibold text-zinc-600">
-          Número do cartão
-        </label>
+        <label className="paragraph-xsmall-semibold text-zinc-600">Número do cartão</label>
         <div className="h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400 relative">
           <div className="w-full">
             <CardNumberElement
@@ -75,9 +96,7 @@ export function CardFormFields({ form }: CardFormFieldsProps) {
 
       <div className="flex gap-4">
         <div className="flex-1 flex flex-col gap-1.5">
-          <label className="paragraph-xsmall-semibold text-zinc-600">
-            Data de validade
-          </label>
+          <label className="paragraph-xsmall-semibold text-zinc-600">Data de validade</label>
           <div className="h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400">
             <div className="w-full">
               <CardExpiryElement
@@ -94,9 +113,7 @@ export function CardFormFields({ form }: CardFormFieldsProps) {
         </div>
 
         <div className="flex-1 flex flex-col gap-1.5">
-          <label className="paragraph-xsmall-semibold text-zinc-600">
-            CVC
-          </label>
+          <label className="paragraph-xsmall-semibold text-zinc-600">CVC</label>
           <div className="h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400">
             <div className="w-full">
               <CardCvcElement
@@ -113,45 +130,148 @@ export function CardFormFields({ form }: CardFormFieldsProps) {
         </div>
       </div>
 
+      <SelectField
+        label="País"
+        placeholder="Selecione"
+        value={watch('country')}
+        onChange={(value) => setValue('country', value as string)}
+        options={[
+          { value: 'BR', label: 'Brasil' },
+          { value: 'ES', label: 'Espanha' },
+          { value: 'US', label: 'Estados Unidos' },
+        ]}
+      />
+
       <div className="flex gap-4">
         <SelectField
-          label="País"
+          label="Tipo de pessoa"
           placeholder="Selecione"
-          value={watch('country')}
-          onChange={(value) => setValue('country', value as string)}
+          value={personType}
+          onChange={(value) => {
+            setValue('personType', value as 'pf' | 'pj');
+            setValue('cpf', '');
+            setValue('cnpj', '');
+          }}
           options={[
-            { value: 'BR', label: 'Brasil' },
-            { value: 'ES', label: 'Espanha' },
-            { value: 'US', label: 'Estados Unidos' },
+            { value: 'pf', label: 'Pessoa física' },
+            { value: 'pj', label: 'Pessoa jurídica' },
           ]}
           containerClassName="flex-1"
         />
         <div className="flex-1">
-          <FormField
-            label="Código postal"
-            optional
-            placeholder=""
-            {...register('postalCode', {
-              onChange: (e) => {
-                setValue('postalCode', formatPostalCode(e.target.value));
-              },
-            })}
-            error={!!errors.postalCode}
-            errorMessage={errors.postalCode?.message}
-          />
+          {personType === 'pj' ? (
+            <FormField
+              label="CNPJ"
+              placeholder="__.___.___/____-__"
+              {...register('cnpj', {
+                onChange: (e) => {
+                  setValue('cnpj', formatCNPJ(e.target.value));
+                },
+              })}
+              error={!!errors.cpf}
+              errorMessage={errors.cpf?.message}
+            />
+          ) : (
+            <FormField
+              label="CPF"
+              placeholder="___.___.___-__"
+              {...register('cpf', {
+                onChange: (e) => {
+                  setValue('cpf', formatCPF(e.target.value));
+                },
+              })}
+              error={!!errors.cpf}
+              errorMessage={errors.cpf?.message}
+            />
+          )}
         </div>
       </div>
+    </div>
+  );
+}
+
+type BillingFormFieldsProps = {
+  readonly form: UseFormReturn<CardFormData>;
+};
+
+export function BillingFormFields({ form }: BillingFormFieldsProps) {
+  const {
+    register,
+    setValue,
+    formState: { errors },
+  } = form;
+
+  return (
+    <div className="flex flex-col gap-5">
+      <FormField
+        label="Nome completo"
+        placeholder="Digite aqui"
+        {...register('fullName')}
+        error={!!errors.fullName}
+        errorMessage={errors.fullName?.message}
+      />
 
       <FormField
-        label="CPF"
-        placeholder="___.___.___-__"
-        {...register('cpf', {
+        label="CEP"
+        placeholder="_____-___"
+        {...register('cep', {
           onChange: (e) => {
-            setValue('cpf', formatCPF(e.target.value));
+            setValue('cep', formatPostalCode(e.target.value));
           },
         })}
-        error={!!errors.cpf}
-        errorMessage={errors.cpf?.message}
+        error={!!errors.cep}
+        errorMessage={errors.cep?.message}
+      />
+
+      <div className="flex gap-4">
+        <div className="flex-[2]">
+          <FormField
+            label="Endereço"
+            placeholder=""
+            {...register('street')}
+            error={!!errors.street}
+            errorMessage={errors.street?.message}
+          />
+        </div>
+        <div className="flex-1">
+          <FormField
+            label="Número"
+            placeholder=""
+            {...register('streetNumber')}
+            error={!!errors.streetNumber}
+            errorMessage={errors.streetNumber?.message}
+          />
+        </div>
+      </div>
+
+      <div className="flex gap-4">
+        <div className="flex-1">
+          <FormField
+            label="Cidade"
+            placeholder=""
+            {...register('city')}
+            error={!!errors.city}
+            errorMessage={errors.city?.message}
+          />
+        </div>
+        <div className="flex-1">
+          <FormField
+            label="UF"
+            placeholder=""
+            {...register('state')}
+            error={!!errors.state}
+            errorMessage={errors.state?.message}
+          />
+        </div>
+      </div>
+
+      <FormField
+        label="Complemento"
+        optional
+        placeholder=""
+        {...register('complement')}
+        error={!!errors.complement}
+        errorMessage={errors.complement?.message}
       />
     </div>
   );

package/src/index.ts

@@ -312,8 +312,10 @@ export {
   formatTimer,
   formatFullName,
   formatCPF,
+  formatCNPJ,
   formatCardNumber,
 } from "./utils/format/masks";
+export { BR_STATE_OPTIONS } from "./utils/constants/br-states";
 export type { TimezoneOption } from "./modules/accounts/services/timezone.service";
 export {
   buildLocaleOptions,

package/src/modules/accounts/types.ts

@@ -146,6 +146,16 @@ export interface UpdateAccountRequest {
     currency?: string;
     timezone?: string;
     bussiness_type?: number;
+    financial_document_type?: number;
+    financial_document?: string;
+    financial_name?: string;
+    zipcode?: string;
+    address?: string;
+    address_number?: string;
+    address_complement?: string;
+    neighborhood?: string;
+    city?: string;
+    state?: string;
 }
 
 export interface UpdateAccountResponse {

package/src/utils/constants/br-states.ts

@@ -0,0 +1,29 @@
+export const BR_STATE_OPTIONS = [
+  { value: 'AC', label: 'AC' },
+  { value: 'AL', label: 'AL' },
+  { value: 'AP', label: 'AP' },
+  { value: 'AM', label: 'AM' },
+  { value: 'BA', label: 'BA' },
+  { value: 'CE', label: 'CE' },
+  { value: 'DF', label: 'DF' },
+  { value: 'ES', label: 'ES' },
+  { value: 'GO', label: 'GO' },
+  { value: 'MA', label: 'MA' },
+  { value: 'MT', label: 'MT' },
+  { value: 'MS', label: 'MS' },
+  { value: 'MG', label: 'MG' },
+  { value: 'PA', label: 'PA' },
+  { value: 'PB', label: 'PB' },
+  { value: 'PR', label: 'PR' },
+  { value: 'PE', label: 'PE' },
+  { value: 'PI', label: 'PI' },
+  { value: 'RJ', label: 'RJ' },
+  { value: 'RN', label: 'RN' },
+  { value: 'RS', label: 'RS' },
+  { value: 'RO', label: 'RO' },
+  { value: 'RR', label: 'RR' },
+  { value: 'SC', label: 'SC' },
+  { value: 'SP', label: 'SP' },
+  { value: 'SE', label: 'SE' },
+  { value: 'TO', label: 'TO' },
+];

package/src/utils/format/masks.ts

@@ -32,6 +32,17 @@ export function formatPostalCode(value: string): string {
   return `${numbers.slice(0, 5)}-${numbers.slice(5, 8)}`;
 }
 
+export function formatCNPJ(value: string): string {
+  const numbers = value.replace(/\D/g, '');
+  if (numbers.length <= 2) return numbers;
+  if (numbers.length <= 5) return `${numbers.slice(0, 2)}.${numbers.slice(2)}`;
+  if (numbers.length <= 8)
+    return `${numbers.slice(0, 2)}.${numbers.slice(2, 5)}.${numbers.slice(5)}`;
+  if (numbers.length <= 12)
+    return `${numbers.slice(0, 2)}.${numbers.slice(2, 5)}.${numbers.slice(5, 8)}/${numbers.slice(8)}`;
+  return `${numbers.slice(0, 2)}.${numbers.slice(2, 5)}.${numbers.slice(5, 8)}/${numbers.slice(8, 12)}-${numbers.slice(12, 14)}`;
+}
+
 export function formatPhone(value: string): string {
   const numbers = value.replace(/\D/g, '').substring(0, 11);
   if (numbers.length <= 2) return numbers;