@greatapps/common 1.1.789 → 1.1.791

package/src/components/account/sections/affiliates/ReceivingAccountModal.tsx

@@ -0,0 +1,213 @@
+'use client';
+
+import { useEffect, useMemo } 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 { Toast } from '../../../ui/feedback/Toast';
+import { FormField } from '../../../ui/form/FormField';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../../ui/overlay/Dialog';
+import { useCurrentAffiliate } from '../../../../modules/affiliates/hooks/use-current-affiliate.hook';
+import { useUpdateAffiliate } from '../../../../modules/affiliates/hooks/use-update-affiliate.hook';
+import { formatCPFCNPJ, formatDocument, normalizeCpfCnpjForStorage } from '../../../../utils/format/masks';
+import { isValidCNPJ, isValidCPF } from '../../../../utils/validators/common';
+import { useAffiliateFlows } from '../../../../store/useAffiliateFlows';
+
+type ReceivingAccountFormData = {
+  pix: string;
+  holder_name: string;
+  holder_document: string;
+};
+
+const EMAIL_KEY = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const RANDOM_KEY = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+const PHONE_KEY = /^\+\d{11,14}$/;
+
+/** Cadastro da conta de recebimento do afiliado: chave PIX e titular. */
+export function ReceivingAccountModal() {
+  const translate = useTranslations();
+  const translateModal = useTranslations('common.account.workspace.affiliates.bankAccount');
+  const isOpen = useAffiliateFlows((state) => state.isReceivingAccountOpen);
+  const close = useAffiliateFlows((state) => state.closeReceivingAccount);
+  const { data: affiliateData } = useCurrentAffiliate();
+  const affiliate = affiliateData?.data;
+  const updateAffiliate = useUpdateAffiliate();
+
+  const schema = useMemo(
+    () =>
+      z
+        .object({
+          pix: z.string().min(1, translateModal('validationPix')),
+          holder_name: z.string().min(1, translateModal('validationHolder')),
+          holder_document: z.string().min(1, translateModal('validationDocument')),
+        })
+        .superRefine((data, ctx) => {
+          // O documento do titular decide PF x PJ pela contagem de dígitos, e é ele que vai para a
+          // instituição no saque — tamanho certo com dígito verificador errado passa aqui e só
+          // falha no pagamento.
+          const digits = data.holder_document.replace(/\D/g, '');
+          if (!digits) return;
+
+          if (digits.length !== 11 && digits.length !== 14) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              path: ['holder_document'],
+              message: translateModal('validationDocumentLength'),
+            });
+            return;
+          }
+
+          const isValid = digits.length === 14 ? isValidCNPJ(digits) : isValidCPF(digits);
+          if (!isValid) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              path: ['holder_document'],
+              message:
+                digits.length === 14
+                  ? translateModal('validationCnpjChecksum')
+                  : translateModal('validationCpfChecksum'),
+            });
+            return;
+          }
+
+          const pix = data.pix.trim();
+          if (EMAIL_KEY.test(pix) || RANDOM_KEY.test(pix) || PHONE_KEY.test(pix.replace(/[\s().-]/g, ''))) {
+            return;
+          }
+
+          const pixDigits = pix.replace(/\D/g, '');
+          const pixIsCnpj = pixDigits.length === 14 && isValidCNPJ(pixDigits);
+          const pixIsCpf = pixDigits.length === 11 && isValidCPF(pixDigits);
+          if ((pixIsCnpj || pixIsCpf) && pixDigits !== digits) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              path: ['pix'],
+              message: translateModal('validationPixDocumentMismatch'),
+            });
+          }
+        }),
+    [translateModal]
+  );
+
+  const form = useForm<ReceivingAccountFormData>({
+    resolver: zodResolver(schema),
+    mode: 'onChange',
+    defaultValues: { pix: '', holder_name: '', holder_document: '' },
+  });
+
+  const resetForm = form.reset;
+
+  useEffect(() => {
+    if (!isOpen || !affiliate) return;
+    resetForm({
+      pix: affiliate.pix ?? '',
+      holder_name: affiliate.holder_name ?? '',
+      holder_document: affiliate.holder_document ? formatDocument(affiliate.holder_document) : '',
+    });
+  }, [isOpen, affiliate, resetForm]);
+
+  const handleClose = () => {
+    form.reset();
+    close();
+  };
+
+  const onSubmit = async (data: ReceivingAccountFormData) => {
+    if (!affiliate) return;
+
+    try {
+      await updateAffiliate.mutateAsync({
+        ...data,
+        holder_document: normalizeCpfCnpjForStorage(data.holder_document),
+        pix: normalizeCpfCnpjForStorage(data.pix),
+        bank: '',
+        agency: '',
+        account: '',
+      });
+      toast.custom((toastId) => (
+        <Toast variant="success" message={translateModal('saveSuccess')} toastId={toastId} />
+      ));
+      handleClose();
+    } catch (error) {
+      const message = error instanceof Error ? error.message : translateModal('saveError');
+      toast.custom((toastId) => <Toast variant="error" message={message} toastId={toastId} />);
+    }
+  };
+
+  const isCnpjHolder = form.watch('holder_document').replace(/\D/g, '').length === 14;
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(nextOpen) => !nextOpen && handleClose()}>
+      <DialogContent
+        onOpenAutoFocus={(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-lg 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-y-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300"
+      >
+        <DialogHeader className="h-16 flex items-center justify-center px-5 border-b border-zinc-200 lg:border-b-0">
+          <DialogTitle className="text-center paragraph-medium-semibold">
+            {translateModal('dialogTitle')}
+          </DialogTitle>
+        </DialogHeader>
+
+        <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col flex-1 lg:flex-none">
+          <div className="px-4 lg:px-5 pb-4 lg:pb-5 mt-4 lg:mt-5 flex-1 lg:flex-none flex flex-col gap-5">
+            <FormField
+              label={translateModal('pixKeyLabel')}
+              placeholder={translateModal('pixKeyPlaceholder')}
+              required
+              error={!!form.formState.errors.pix}
+              errorMessage={form.formState.errors.pix?.message}
+              {...form.register('pix')}
+            />
+            <p className="paragraph-xsmall-medium text-zinc-500 -mt-3">{translateModal('pixKeyHint')}</p>
+            {isCnpjHolder && (
+              <p className="paragraph-xsmall-medium text-zinc-500 -mt-3">
+                {translateModal('pixCnpjInvoiceNotice')}
+              </p>
+            )}
+            <FormField
+              label={translateModal('holderNameLabel')}
+              placeholder={translateModal('holderNamePlaceholder')}
+              required
+              error={!!form.formState.errors.holder_name}
+              errorMessage={form.formState.errors.holder_name?.message}
+              {...form.register('holder_name')}
+            />
+            <Controller
+              name="holder_document"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <FormField
+                  label={translateModal('holderDocumentLabel')}
+                  placeholder={translateModal('holderDocumentPlaceholder')}
+                  required
+                  error={!!fieldState.error}
+                  errorMessage={fieldState.error?.message}
+                  value={field.value}
+                  onChange={(event) => field.onChange(formatCPFCNPJ(event.target.value))}
+                />
+              )}
+            />
+          </div>
+
+          <div className="flex justify-between gap-2 p-4 lg:p-5 border-t border-zinc-200 mt-auto lg:mt-0">
+            <Button variant="secondary" type="button" onClick={handleClose} className="h-10!">
+              {translate('common.actions.cancel')}
+            </Button>
+            <Button
+              type="submit"
+              className="h-10!"
+              disabled={!form.formState.isValid}
+              loading={form.formState.isSubmitting}
+            >
+              {form.formState.isSubmitting
+                ? translate('common.actions.saving')
+                : translate('common.actions.save')}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}