@greatapps/common 1.1.738 → 1.1.740

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

@@ -0,0 +1,548 @@
+/* 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, useState } 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 { IconFileInvoice } from '@tabler/icons-react';
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';
+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 { useRequiredBillingData } from '../../../modules/accounts/hooks/use-required-billing-data.hook';
+import { COUNTRIES } from '../../../utils/countries';
+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 { 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,
+}));
+
+function buildBillingDataSchema(isInternational: boolean, translate: TranslateFn) {
+  const requiredText = z
+    .string()
+    .trim()
+    .min(1, translate('common.billing.requiredData.requiredField'));
+
+  const base = z.object({
+    personType: z.enum(['pf', 'pj']),
+    document: z.string().trim(),
+    financialName: requiredText,
+    financialEmail: z
+      .string()
+      .trim()
+      .min(1, translate('common.billing.requiredData.requiredField'))
+      .email(translate('common.billing.requiredData.invalidEmail')),
+    cep: requiredText,
+    street: requiredText,
+    streetNumber: z.string().trim(),
+    complement: z.string().trim().optional(),
+    neighborhood: z.string().trim(),
+    city: requiredText,
+    state: requiredText,
+    country: requiredText,
+  });
+
+  /* Conta internacional não tem CPF/CNPJ, número nem bairro — mesmo recorte do
+   * AddCardModal. Exigir esses campos aqui trancaria o cliente fora do app, já que
+   * o modal é bloqueante. */
+  if (isInternational) return base;
+
+  return base.superRefine((data, ctx) => {
+    if (!data.streetNumber) {
+      ctx.addIssue({
+        code: 'custom',
+        path: ['streetNumber'],
+        message: translate('common.billing.requiredData.requiredField'),
+      });
+    }
+
+    if (!data.neighborhood) {
+      ctx.addIssue({
+        code: 'custom',
+        path: ['neighborhood'],
+        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);
+}
+
+function RequiredBillingDataModalContent() {
+  const translate = useTranslations();
+  const { user } = useAuth();
+  const { isRequired, account, isInternational } = useRequiredBillingData();
+  const { mutateAsync: updateBillingData } = useUpdateBillingData();
+  const { mutateAsync: lookupCep } = useViaCep();
+
+  /* O modal fecha na hora do submit e não reabre enquanto o invalidate do account
+   * não volta — sem isso o usuário vê o modal piscar de novo com o cache antigo. */
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const isPrefilled = useRef(false);
+
+  const schema = useMemo(
+    () => buildBillingDataSchema(isInternational, translate),
+    [isInternational, translate],
+  );
+
+  const form = useForm<BillingDataFormValues>({
+    resolver: zodResolver(schema),
+    mode: 'onChange',
+    defaultValues: {
+      personType: 'pf',
+      document: '',
+      financialName: '',
+      financialEmail: '',
+      cep: '',
+      street: '',
+      streetNumber: '',
+      complement: '',
+      neighborhood: '',
+      city: '',
+      state: '',
+      country: 'BR',
+    },
+  });
+
+  const {
+    register,
+    control,
+    handleSubmit,
+    reset,
+    setValue,
+    watch,
+    formState: { errors, isSubmitting, isValid },
+  } = form;
+
+  const personType = watch('personType');
+  const isCompany = personType === 'pj';
+
+  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: account.country || (isInternational ? 'US' : 'BR'),
+    });
+  }, [account, isInternational, 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) => {
+    if (isInternational) {
+      setValue('cep', rawValue, { shouldValidate: true });
+      return;
+    }
+
+    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 = {
+      ...(isInternational
+        ? {}
+        : {
+            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,
+    };
+
+    try {
+      await updateBillingData(payload);
+      setIsSubmitted(true);
+      toast.custom(
+        (t) => (
+          <Toast
+            variant="success"
+            message={translate('common.billing.requiredData.successToast')}
+            toastId={t}
+          />
+        ),
+        { duration: 5000 },
+      );
+    } 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,
+      });
+    }
+  }
+
+  if (!isRequired || isSubmitted) return null;
+
+  return (
+    <Dialog open onOpenChange={() => {}}>
+      <DialogContent
+        showCloseButton={false}
+        onEscapeKeyDown={(event: Event) => event.preventDefault()}
+        onPointerDownOutside={(event: Event) => event.preventDefault()}
+        onInteractOutside={(event: Event) => event.preventDefault()}
+        className="flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[502px] lg:h-auto lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%] overflow-hidden"
+      >
+        <DialogHeader className="gap-3 text-left p-4 lg:p-5 border-b border-zinc-200 shrink-0">
+          <div className="flex items-center justify-center w-10 h-10 bg-zinc-50 rounded-lg">
+            <IconFileInvoice size={24} className="text-zinc-950" />
+          </div>
+          <div className="flex flex-col gap-2">
+            <DialogTitle className="paragraph-medium-semibold text-zinc-950">
+              {translate('common.billing.requiredData.title')}
+            </DialogTitle>
+            <span className="paragraph-small-regular text-zinc-600">
+              {translate('common.billing.requiredData.description')}
+            </span>
+          </div>
+        </DialogHeader>
+
+        <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">
+              {!isInternational && (
+                <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={
+                  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>
+
+            <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={
+                  isInternational
+                    ? translate('common.billing.requiredData.postalCode')
+                    : translate('common.billing.requiredData.cep')
+                }
+                placeholder={isInternational ? '' : '_____-___'}
+                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>
+                {!isInternational && (
+                  <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">
+                {!isInternational && (
+                  <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">
+                  {isInternational ? (
+                    <FormField
+                      label={translate('common.billing.requiredData.stateProvince')}
+                      placeholder={translate('common.billing.requiredData.typeHere')}
+                      error={!!errors.state}
+                      errorMessage={errors.state?.message}
+                      {...register('state')}
+                    />
+                  ) : (
+                    <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', value as string, { shouldValidate: true })
+                          }
+                          options={BR_STATE_OPTIONS}
+                          error={!!errors.state}
+                          errorMessage={errors.state?.message}
+                        />
+                      )}
+                    />
+                  )}
+                </div>
+              </div>
+
+              <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', value as string, { shouldValidate: true })
+                    }
+                    options={COUNTRY_OPTIONS}
+                    error={!!errors.country}
+                    errorMessage={errors.country?.message}
+                  />
+                )}
+              />
+            </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')
+                : translate('common.billing.requiredData.submit')}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+/**
+ * Modal bloqueante que exige o cadastro de cobrança/fiscal de contas que já
+ * pagaram sem ele — sem esses dados a nota fiscal não é emitida. Monte uma vez
+ * no layout raiz do app; ele mesmo decide se aparece (ver `useRequiredBillingData`).
+ */
+export default function RequiredBillingDataModal() {
+  const { user, isLoading } = useAuth();
+
+  /* Sem sessão não há conta nem assinatura pra consultar — evita disparar as
+   * queries (e tomar 401) em /login, /register e demais rotas públicas. */
+  if (isLoading || !user) return null;
+
+  return <RequiredBillingDataModalContent />;
+}

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

@@ -7,8 +7,8 @@ import { Toast } from '../../ui/feedback/Toast';
 import { useModalManager } from '../../../store/useModalManager';
 import { useCreateCard } from '../../../modules/cards/hooks/create-card.hook';
 import { useCreateSetupIntent } from '../../../modules/cards/hooks/create-setup-intent.hook';
-import { useUpdateAccount } from '../../../modules/accounts/hooks/useAccountManagement';
 import { useCurrentAccount } from '../../../modules/accounts/hooks/current-account.hook';
+import { isValidTaxId } from '../../../utils/validators/common';
 import { useExternalContracting } from '../../../providers/whitelabel.provider';
 import { CardFormFields, BillingFormFields, buildCardFormSchema } from './CardFormFields';
 import type { CardFormData, StripeElementsStatus } from './CardFormFields';
@@ -89,7 +89,6 @@ export default function AddCardModal() {
 
   const createSetupIntentMutation = useCreateSetupIntent();
   const createCardMutation = useCreateCard();
-  const updateAccountMutation = useUpdateAccount();
   const elements = useElements();
   const stripe = useStripe();
 
@@ -223,30 +222,32 @@ export default function AddCardModal() {
         return;
       }
 
-      const [cardResult] = await Promise.all([
-        createCardMutation.mutateAsync({
-          setup_intent_id: intent.setup_intent_id,
-          name: data.name,
-          set_default: true,
-        }),
-        updateAccountMutation.mutateAsync({
-          ...(isInternational
-            ? {}
-            : {
-                financial_document_type: data.personType === 'pf' ? 1 : 2,
-                financial_document: data.personType === 'pf' ? data.cpf : data.cnpj,
-              }),
-          financial_name: data.fullName,
-          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,
-        }),
-      ]);
+      /* Chamada ÚNICA: os dados fiscais vão no mesmo request do cartão. O backend atualiza a
+       * conta ANTES de registrar o cartão, fail-closed — fiscal rejeitado (CPF inválido etc.)
+       * = cartão não registra e o erro chega com a mensagem específica no catch abaixo.
+       * Substitui o Promise.all de createCard + updateAccount, que não tinha garantia entre as
+       * pernas: quando o PUT de conta falhava, o cartão ficava salvo e a conta sem NENHUM dado
+       * fiscal — e as faturas seguintes falhavam a emissão de nota em silêncio. */
+      const cardResult = await createCardMutation.mutateAsync({
+        setup_intent_id: intent.setup_intent_id,
+        name: data.name,
+        set_default: true,
+        ...(isInternational
+          ? {}
+          : {
+              financial_document_type: data.personType === 'pf' ? 1 : 2,
+              financial_document: data.personType === 'pf' ? data.cpf : data.cnpj,
+            }),
+        financial_name: data.fullName,
+        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,
+      });
 
       if (cardResult.success && cardResult.data?.id != null) {
         onCardAdded?.(cardResult.data.id.toString());
@@ -257,12 +258,16 @@ export default function AddCardModal() {
         { duration: 5000 }
       );
       handleClose();
-    } catch {
+    } catch (error) {
+      /* O backend fail-closed devolve a razão exata da recusa (ex.: "CPF do pagador inválido —
+       * confira os dígitos verificadores"), e o withAction relança como Error com essa mensagem.
+       * Engolir num texto genérico deixaria o usuário sem saber o que corrigir. */
+      const backendMessage = error instanceof Error && error.message ? error.message : null;
       toast.custom(
         (t) => (
           <Toast
             variant="error"
-            message={translate('common.cards.add.errorSave')}
+            message={backendMessage || translate('common.cards.add.errorSave')}
             toastId={t}
           />
         ),
@@ -275,7 +280,6 @@ export default function AddCardModal() {
 
   const isSubmitting =
     createCardMutation.isPending ||
-    updateAccountMutation.isPending ||
     form.formState.isSubmitting;
 
   const watchedValues = form.watch(['name', 'country', 'personType', 'cpf', 'cnpj', 'fullName', 'cep', 'street', 'streetNumber', 'neighborhood', 'city', 'state']);
@@ -294,7 +298,9 @@ export default function AddCardModal() {
     : !!name &&
       !!country &&
       !!personType &&
-      (personType === 'pf' ? !!cpf && cpf.length >= 14 : !!cnpj && cnpj.length >= 18) &&
+      /* Dígito verificador, em sincronia com o schema (buildCardFormSchema) e com a validação
+       * do backend — a regra antiga de tamanho deixava 111.111.111-11 habilitar o botão. */
+      (personType === 'pf' ? isValidTaxId(cpf, 'cpf') : isValidTaxId(cnpj, 'cnpj')) &&
       stripeStatus.cardNumber &&
       stripeStatus.cardExpiry &&
       stripeStatus.cardCvc;