@greatapps/common 1.1.795 → 1.1.796

package/src/components/modals/billing/BillingDataForm.tsx

@@ -0,0 +1,506 @@
+/* eslint-disable @typescript-eslint/no-explicit-any -- o generic Translator do next-intl não é
+   expressável estruturalmente; o `any` do TranslateFn é intencional e está contido neste arquivo
+   (mesmo padrão de modules/plans/utils/map-api-plan-to-ui.ts). */
+'use client';
+
+import { useEffect, useMemo, useRef } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslations } from 'next-intl';
+import { toast } from 'sonner';
+import z from 'zod';
+
+import { Button } from '../../ui/buttons/Button';
+import { FormField } from '../../ui/form/FormField';
+import { SelectField } from '../../ui/form/SelectField';
+import { Toast } from '../../ui/feedback/Toast';
+import { useAuth } from '../../../providers/auth.provider';
+import { useViaCep } from '../../../modules/accounts/hooks/useViaCep';
+import { useUpdateBillingData } from '../../../modules/accounts/hooks/useAccountManagement';
+import { COUNTRIES } from '../../../utils/countries';
+import { readGeoCountry } from '../../../utils/geo-country';
+import { BR_STATE_OPTIONS } from '../../../utils/constants/br-states';
+import { formatCNPJ, formatCPF, formatPostalCode } from '../../../utils/format/masks';
+import { isValidCNPJ, isValidCPF } from '../../../utils/validators/common';
+import type { Account } from '../../../modules/accounts/types';
+import type { UpdateBillingDataRequest } from '../../../modules/accounts/types';
+
+type TranslateFn = (key: any, values?: Record<string, string | number>) => string;
+
+type BillingDataFormValues = {
+  personType: 'pf' | 'pj';
+  document: string;
+  financialName: string;
+  financialEmail: string;
+  cep: string;
+  street: string;
+  streetNumber: string;
+  complement?: string;
+  neighborhood: string;
+  city: string;
+  state: string;
+  country: string;
+};
+
+const COUNTRY_OPTIONS = COUNTRIES.map((country: { iso: string; name: string }) => ({
+  value: country.iso,
+  label: country.name,
+}));
+
+const BR_REQUIRED_ADDRESS_FIELDS: readonly (keyof BillingDataFormValues)[] = [
+  'street',
+  'streetNumber',
+  'neighborhood',
+  'city',
+  'state',
+];
+
+function buildBillingDataSchema(translate: TranslateFn) {
+  const base = z.object({
+    personType: z.enum(['pf', 'pj']),
+    document: z.string().trim(),
+    financialName: z
+      .string()
+      .trim()
+      .min(1, translate('common.billing.requiredData.requiredField')),
+    financialEmail: z
+      .string()
+      .trim()
+      .min(1, translate('common.billing.requiredData.requiredField'))
+      .email(translate('common.billing.requiredData.invalidEmail')),
+    cep: z.string().trim(),
+    street: z.string().trim(),
+    streetNumber: z.string().trim(),
+    complement: z.string().trim().optional(),
+    neighborhood: z.string().trim(),
+    city: z.string().trim(),
+    state: z.string().trim(),
+    country: z.string().trim().min(1, translate('common.billing.requiredData.requiredField')),
+  });
+
+  return base.superRefine((data, ctx) => {
+    if (data.country !== 'BR') return;
+
+    for (const field of BR_REQUIRED_ADDRESS_FIELDS) {
+      if (!data[field]) {
+        ctx.addIssue({
+          code: 'custom',
+          path: [field],
+          message: translate('common.billing.requiredData.requiredField'),
+        });
+      }
+    }
+
+    if (data.cep.replace(/\D/g, '').length !== 8) {
+      ctx.addIssue({
+        code: 'custom',
+        path: ['cep'],
+        message: translate('common.billing.requiredData.invalidCep'),
+      });
+    }
+
+    const isCompany = data.personType === 'pj';
+    const digits = data.document.replace(/\D/g, '');
+
+    if (digits.length !== (isCompany ? 14 : 11)) {
+      ctx.addIssue({
+        code: 'custom',
+        path: ['document'],
+        message: isCompany
+          ? translate('common.billing.requiredData.invalidCnpj')
+          : translate('common.billing.requiredData.invalidCpf'),
+      });
+      return;
+    }
+
+    /* Dígito verificador, mesmo algoritmo do backend: sem isso 111.111.111-11 passa
+     * aqui e o PUT da conta é recusado depois, sem o usuário saber o motivo. */
+    const isValid = isCompany ? isValidCNPJ(digits) : isValidCPF(digits);
+    if (!isValid) {
+      ctx.addIssue({
+        code: 'custom',
+        path: ['document'],
+        message: isCompany
+          ? translate('common.billing.requiredData.invalidCnpjChecksum')
+          : translate('common.billing.requiredData.invalidCpfChecksum'),
+      });
+    }
+  });
+}
+
+function formatDocument(document: string | null | undefined, isCompany: boolean) {
+  if (!document) return '';
+  return isCompany ? formatCNPJ(document) : formatCPF(document);
+}
+
+export interface BillingDataFormProps {
+  account: Account | undefined;
+  onSaved: () => void;
+  /** Fixa o formulário em modo Brasil (documento, CEP e endereço obrigatórios) e esconde o select
+   * de país — usado por fluxos PIX, que só existem no Brasil. Sem isso, o país vem da conta ou da
+   * geolocalização do visitante. */
+  country?: 'BR';
+  submitLabel?: string;
+}
+
+/**
+ * Formulário de cadastro fiscal/cobrança, reaproveitado por qualquer fluxo que precise dele
+ * bloqueante (`RequiredBillingDataModal`) ou como etapa dentro de outro modal.
+ */
+export function BillingDataForm({ account, onSaved, country, submitLabel }: BillingDataFormProps) {
+  const translate = useTranslations();
+  const { user } = useAuth();
+  const { mutateAsync: updateBillingData } = useUpdateBillingData();
+  const { mutateAsync: lookupCep } = useViaCep();
+
+  const isPrefilled = useRef(false);
+
+  const schema = useMemo(
+    () => buildBillingDataSchema(translate),
+    [translate],
+  );
+
+  const form = useForm<BillingDataFormValues>({
+    resolver: zodResolver(schema),
+    mode: 'onChange',
+    defaultValues: {
+      personType: 'pf',
+      document: '',
+      financialName: '',
+      financialEmail: '',
+      cep: '',
+      street: '',
+      streetNumber: '',
+      complement: '',
+      neighborhood: '',
+      city: '',
+      state: '',
+      country: country ?? 'BR',
+    },
+  });
+
+  const {
+    register,
+    control,
+    handleSubmit,
+    reset,
+    setValue,
+    watch,
+    formState: { errors, isSubmitting, isValid },
+  } = form;
+
+  const personType = watch('personType');
+  const isCompany = personType === 'pj';
+  const isBrazil = watch('country') === 'BR';
+
+  useEffect(() => {
+    if (!account || isPrefilled.current) return;
+    isPrefilled.current = true;
+
+    const accountIsCompany = account.financial_document_type === 2;
+    reset({
+      personType: accountIsCompany ? 'pj' : 'pf',
+      document: formatDocument(account.financial_document, accountIsCompany),
+      financialName: account.financial_name ?? '',
+      financialEmail: account.financial_email || user?.email || '',
+      cep: account.zipcode ?? '',
+      street: account.address ?? '',
+      streetNumber: account.address_number ?? '',
+      complement: account.address_complement ?? '',
+      neighborhood: account.neighborhood ?? '',
+      city: account.city ?? '',
+      state: account.state ?? '',
+      country: country ?? (account.country || readGeoCountry() || 'BR'),
+    });
+  }, [account, country, reset, user?.email]);
+
+  const handleDocumentChange = (rawValue: string) => {
+    setValue('document', isCompany ? formatCNPJ(rawValue) : formatCPF(rawValue), {
+      shouldValidate: true,
+    });
+  };
+
+  const handlePersonTypeChange = (value: 'pf' | 'pj') => {
+    if (value === personType) return;
+    setValue('document', '');
+    /* shouldValidate reroda o resolver: sem isso o `isValid` fica preso no valor
+     * do documento antigo e o botão continua habilitado com o campo já limpo. */
+    setValue('personType', value, { shouldValidate: true });
+  };
+
+  const handleCepChange = (rawValue: string) => {
+    setValue('cep', formatPostalCode(rawValue), { shouldValidate: true });
+
+    const digits = rawValue.replace(/\D/g, '');
+    if (digits.length !== 8) return;
+
+    lookupCep(digits)
+      .then((data) => {
+        setValue('street', data.logradouro, { shouldValidate: true });
+        setValue('neighborhood', data.bairro, { shouldValidate: true });
+        setValue('city', data.localidade, { shouldValidate: true });
+        setValue('state', data.uf, { shouldValidate: true });
+      })
+      .catch(() => {
+        // CEP não encontrado: o usuário preenche o endereço na mão.
+      });
+  };
+
+  async function onSubmit(data: BillingDataFormValues) {
+    const payload: UpdateBillingDataRequest =
+      data.country === 'BR'
+        ? {
+            financial_document_type: data.personType === 'pf' ? 1 : 2,
+            financial_document: data.document,
+            financial_name: data.financialName,
+            financial_email: data.financialEmail,
+            zipcode: data.cep,
+            address: data.street,
+            address_number: data.streetNumber,
+            address_complement: data.complement ?? '',
+            neighborhood: data.neighborhood,
+            city: data.city,
+            state: data.state,
+            country: data.country,
+          }
+        : {
+            financial_name: data.financialName,
+            financial_email: data.financialEmail,
+            country: data.country,
+          };
+
+    try {
+      await updateBillingData(payload);
+      toast.custom(
+        (t) => (
+          <Toast
+            variant="success"
+            message={translate('common.billing.requiredData.successToast')}
+            toastId={t}
+          />
+        ),
+        { duration: 5000 },
+      );
+      onSaved();
+    } catch (error) {
+      /* O backend devolve a razão exata da recusa (ex.: documento fiscal inválido).
+       * Trocar por um texto genérico deixaria o usuário travado sem saber o que corrigir. */
+      const message =
+        error instanceof Error && error.message
+          ? error.message
+          : translate('common.billing.requiredData.errorToast');
+      toast.custom((t) => <Toast variant="error" message={message} toastId={t} />, {
+        duration: 5000,
+      });
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col flex-1 min-h-0" noValidate>
+      <div className="flex flex-col gap-6 p-4 lg:p-5 flex-1 overflow-y-auto">
+        <div className="flex flex-col gap-5">
+          {!country && (
+            <>
+              {/* Reage ao watch('country'): só quem está aqui dentro sabe quando o usuário
+               * troca de país no select logo abaixo. */}
+              <span className="paragraph-small-regular text-zinc-600">
+                {isBrazil
+                  ? translate('common.billing.requiredData.description')
+                  : translate('common.billing.requiredData.descriptionInternational')}
+              </span>
+
+              <Controller
+                name="country"
+                control={control}
+                render={({ field }) => (
+                  <SelectField
+                    label={translate('common.billing.requiredData.country')}
+                    placeholder={translate('common.billing.requiredData.select')}
+                    value={field.value || undefined}
+                    onChange={(value) =>
+                      setValue('country', String(value), { shouldValidate: true })
+                    }
+                    options={COUNTRY_OPTIONS}
+                    error={!!errors.country}
+                    errorMessage={errors.country?.message}
+                  />
+                )}
+              />
+            </>
+          )}
+
+          {isBrazil && (
+            <div className="flex gap-4">
+              <Controller
+                name="personType"
+                control={control}
+                render={({ field }) => (
+                  <SelectField
+                    label={translate('common.billing.requiredData.personType')}
+                    placeholder={translate('common.billing.requiredData.select')}
+                    value={field.value}
+                    onChange={(value) => handlePersonTypeChange(value as 'pf' | 'pj')}
+                    options={[
+                      {
+                        value: 'pf',
+                        label: translate('common.billing.requiredData.personTypePf'),
+                      },
+                      {
+                        value: 'pj',
+                        label: translate('common.billing.requiredData.personTypePj'),
+                      },
+                    ]}
+                    containerClassName="flex-1"
+                  />
+                )}
+              />
+              <div className="flex-1">
+                <FormField
+                  label={
+                    isCompany
+                      ? translate('common.billing.requiredData.cnpj')
+                      : translate('common.billing.requiredData.cpf')
+                  }
+                  placeholder={isCompany ? '__.___.___/____-__' : '___.___.___-__'}
+                  error={!!errors.document}
+                  errorMessage={errors.document?.message}
+                  {...register('document', {
+                    onChange: (event) => handleDocumentChange(event.target.value),
+                  })}
+                />
+              </div>
+            </div>
+          )}
+
+          <FormField
+            label={
+              isBrazil && isCompany
+                ? translate('common.billing.requiredData.companyName')
+                : translate('common.billing.requiredData.fullName')
+            }
+            placeholder={translate('common.billing.requiredData.typeHere')}
+            error={!!errors.financialName}
+            errorMessage={errors.financialName?.message}
+            {...register('financialName')}
+          />
+
+          <FormField
+            label={translate('common.billing.requiredData.financialEmail')}
+            placeholder={translate('common.billing.requiredData.financialEmailPlaceholder')}
+            type="email"
+            error={!!errors.financialEmail}
+            errorMessage={errors.financialEmail?.message}
+            {...register('financialEmail')}
+          />
+        </div>
+
+        {isBrazil && (
+          <>
+            <div className="h-px bg-zinc-200" />
+
+            <div className="flex flex-col gap-5">
+              <span className="paragraph-small-semibold text-zinc-950">
+                {translate('common.billing.requiredData.addressHeading')}
+              </span>
+
+              <FormField
+                label={translate('common.billing.requiredData.cep')}
+                placeholder="_____-___"
+                error={!!errors.cep}
+                errorMessage={errors.cep?.message}
+                {...register('cep', {
+                  onChange: (event) => handleCepChange(event.target.value),
+                })}
+              />
+
+              <div className="flex gap-4">
+                <div className="flex-[3]">
+                  <FormField
+                    label={translate('common.billing.requiredData.street')}
+                    placeholder={translate('common.billing.requiredData.typeHere')}
+                    error={!!errors.street}
+                    errorMessage={errors.street?.message}
+                    {...register('street')}
+                  />
+                </div>
+                <div className="flex-1">
+                  <FormField
+                    label={translate('common.billing.requiredData.streetNumber')}
+                    placeholder="000"
+                    error={!!errors.streetNumber}
+                    errorMessage={errors.streetNumber?.message}
+                    {...register('streetNumber')}
+                  />
+                </div>
+              </div>
+
+              <div className="flex gap-4">
+                <div className="flex-1">
+                  <FormField
+                    label={translate('common.billing.requiredData.neighborhood')}
+                    placeholder={translate('common.billing.requiredData.typeHere')}
+                    error={!!errors.neighborhood}
+                    errorMessage={errors.neighborhood?.message}
+                    {...register('neighborhood')}
+                  />
+                </div>
+                <div className="flex-1">
+                  <FormField
+                    label={translate('common.billing.requiredData.complement')}
+                    optional
+                    placeholder={translate('common.billing.requiredData.typeHere')}
+                    {...register('complement')}
+                  />
+                </div>
+              </div>
+
+              <div className="flex gap-4">
+                <div className="flex-1">
+                  <FormField
+                    label={translate('common.billing.requiredData.city')}
+                    placeholder={translate('common.billing.requiredData.typeHere')}
+                    error={!!errors.city}
+                    errorMessage={errors.city?.message}
+                    {...register('city')}
+                  />
+                </div>
+                <div className="flex-1">
+                  <Controller
+                    name="state"
+                    control={control}
+                    render={({ field }) => (
+                      <SelectField
+                        label={translate('common.billing.requiredData.state')}
+                        placeholder={translate('common.billing.requiredData.select')}
+                        value={field.value || undefined}
+                        onChange={(value) =>
+                          setValue('state', String(value), { shouldValidate: true })
+                        }
+                        options={BR_STATE_OPTIONS}
+                        error={!!errors.state}
+                        errorMessage={errors.state?.message}
+                      />
+                    )}
+                  />
+                </div>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+
+      <div className="flex items-center justify-end p-4 lg:p-5 border-t border-zinc-200 shrink-0">
+        <Button
+          type="submit"
+          className="h-10! w-full lg:w-fit"
+          disabled={!isValid || isSubmitting}
+          loading={isSubmitting}
+        >
+          {isSubmitting
+            ? translate('common.billing.requiredData.submitting')
+            : submitLabel ?? translate('common.billing.requiredData.submit')}
+        </Button>
+      </div>
+    </form>
+  );
+}