@greatapps/common 1.1.794 → 1.1.796

package/dist/providers/share-query-cache.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/providers/share-query-cache.ts"],"sourcesContent":["import type { Query, QueryClient, QueryKey, QueryState } from \"@tanstack/react-query\";\n\ntype CacheMessage =\n  | { type: \"removed\"; queryHash: string; queryKey: QueryKey }\n  | { type: \"updated\"; queryHash: string; queryKey: QueryKey; state: QueryState };\n\nexport function isShareableQuery(query: Query): boolean {\n  if (query.state.status === \"error\") return false;\n  if (query.meta?.persist === false) return false;\n  if (query.state.dataUpdateCount > 10) return false;\n  return true;\n}\n\nexport function shareQueryCacheBetweenTabs(queryClient: QueryClient): () => void {\n  if (typeof BroadcastChannel === \"undefined\") return () => {};\n  const channel = new BroadcastChannel(\"greatapps-query-cache\");\n  const queryCache = queryClient.getQueryCache();\n  let applyingRemoteMessage = false;\n\n  const unsubscribe = queryCache.subscribe((event) => {\n    if (applyingRemoteMessage) return;\n    const { query } = event;\n    const { queryHash, queryKey } = query;\n    if (event.type === \"removed\" && query.observers.length > 0) {\n      channel.postMessage({ type: \"removed\", queryHash, queryKey });\n    }\n    if (event.type === \"updated\" && event.action.type === \"success\" && isShareableQuery(query)) {\n      try {\n        channel.postMessage({ type: \"updated\", queryHash, queryKey, state: query.state });\n      } catch {\n        console.warn(\"Falha ao espelhar query entre abas\", queryHash);\n      }\n    }\n  });\n\n  channel.addEventListener(\"message\", (event: MessageEvent<CacheMessage>) => {\n    const message = event.data;\n    const query = queryCache.get(message.queryHash);\n    applyingRemoteMessage = true;\n    try {\n      if (message.type === \"removed\" && query) queryCache.remove(query);\n      if (message.type === \"updated\") {\n        if (!query) {\n          queryCache.build(queryClient, { queryKey: message.queryKey, queryHash: message.queryHash }, message.state);\n        } else if (isShareableQuery(query) && message.state.dataUpdatedAt >= query.state.dataUpdatedAt) {\n          query.setState(message.state);\n        }\n      }\n    } finally {\n      applyingRemoteMessage = false;\n    }\n  });\n\n  return () => {\n    unsubscribe();\n    channel.close();\n  };\n}\n"],"mappings":"AAMO,SAAS,iBAAiB,OAAuB;AACtD,MAAI,MAAM,MAAM,WAAW,QAAS,QAAO;AAC3C,MAAI,MAAM,MAAM,YAAY,MAAO,QAAO;AAC1C,MAAI,MAAM,MAAM,kBAAkB,GAAI,QAAO;AAC7C,SAAO;AACT;AAEO,SAAS,2BAA2B,aAAsC;AAC/E,MAAI,OAAO,qBAAqB,YAAa,QAAO,MAAM;AAAA,EAAC;AAC3D,QAAM,UAAU,IAAI,iBAAiB,uBAAuB;AAC5D,QAAM,aAAa,YAAY,cAAc;AAC7C,MAAI,wBAAwB;AAE5B,QAAM,cAAc,WAAW,UAAU,CAAC,UAAU;AAClD,QAAI,sBAAuB;AAC3B,UAAM,EAAE,MAAM,IAAI;AAClB,UAAM,EAAE,WAAW,SAAS,IAAI;AAChC,QAAI,MAAM,SAAS,aAAa,MAAM,UAAU,SAAS,GAAG;AAC1D,cAAQ,YAAY,EAAE,MAAM,WAAW,WAAW,SAAS,CAAC;AAAA,IAC9D;AACA,QAAI,MAAM,SAAS,aAAa,MAAM,OAAO,SAAS,aAAa,iBAAiB,KAAK,GAAG;AAC1F,UAAI;AACF,gBAAQ,YAAY,EAAE,MAAM,WAAW,WAAW,UAAU,OAAO,MAAM,MAAM,CAAC;AAAA,MAClF,QAAQ;AACN,gBAAQ,KAAK,sCAAsC,SAAS;AAAA,MAC9D;AAAA,IACF;AAAA,EACF,CAAC;AAED,UAAQ,iBAAiB,WAAW,CAAC,UAAsC;AACzE,UAAM,UAAU,MAAM;AACtB,UAAM,QAAQ,WAAW,IAAI,QAAQ,SAAS;AAC9C,4BAAwB;AACxB,QAAI;AACF,UAAI,QAAQ,SAAS,aAAa,MAAO,YAAW,OAAO,KAAK;AAChE,UAAI,QAAQ,SAAS,WAAW;AAC9B,YAAI,CAAC,OAAO;AACV,qBAAW,MAAM,aAAa,EAAE,UAAU,QAAQ,UAAU,WAAW,QAAQ,UAAU,GAAG,QAAQ,KAAK;AAAA,QAC3G,WAAW,iBAAiB,KAAK,KAAK,QAAQ,MAAM,iBAAiB,MAAM,MAAM,eAAe;AAC9F,gBAAM,SAAS,QAAQ,KAAK;AAAA,QAC9B;AAAA,MACF;AAAA,IACF,UAAE;AACA,8BAAwB;AAAA,IAC1B;AAAA,EACF,CAAC;AAED,SAAO,MAAM;AACX,gBAAY;AACZ,YAAQ,MAAM;AAAA,EAChB;AACF;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/common",
-  "version": "1.1.794",
+  "version": "1.1.796",
   "description": "Shared library for GreatApps frontend applications",
   "main": "./dist/index.mjs",
   "types": "./src/index.ts",
@@ -46,6 +46,14 @@
     "dist",
     "src"
   ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run build"
+  },
   "keywords": [],
   "author": "",
   "license": "ISC",
@@ -142,12 +150,5 @@
     "@faker-js/faker": {
       "optional": true
     }
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest"
   }
-}
+}

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>
+  );
+}