@hed-hog/contact 0.0.266 → 0.0.274

package/hedhog/frontend/app/person/_components/person-field-with-create.tsx.ejs

@@ -0,0 +1,831 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { ChevronsUpDown, Plus, X } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Controller,
+  FieldValues,
+  Path,
+  UseFormReturn,
+  useForm,
+} from 'react-hook-form';
+import { z } from 'zod';
+
+type PersonOption = {
+  id: number | string;
+  name: string;
+};
+
+type CreatePersonValues = {
+  name: string;
+  type: 'individual' | 'company';
+  email?: string;
+  phone?: string;
+  document?: string;
+  line1?: string;
+  city?: string;
+  state?: string;
+};
+
+type PersonTypeFilter = 'individual' | 'company' | 'all';
+type FieldValueType = 'string' | 'number';
+
+type ContactTypeLookup = {
+  code: string;
+  contact_type_id: number;
+};
+
+type DocumentTypeLookup = {
+  code: string;
+  document_type_id: number;
+};
+
+type CreatePersonResponse = {
+  id?: number;
+  data?: {
+    id?: number;
+  };
+};
+
+type PaginatedResponse<T> = {
+  data?: T[];
+};
+
+function usePersonFieldWithCreateTranslations() {
+  const tRoot = useTranslations();
+
+  return (
+    key: string,
+    values?: Record<string, string | number | boolean | null | undefined>
+  ) => {
+    const contactKey = `contact.PersonFieldWithCreate.${key}`;
+    if (tRoot.has(contactKey)) {
+      return tRoot(contactKey, values);
+    }
+
+    return tRoot(`finance.PersonFieldWithCreate.${key}`, values);
+  };
+}
+
+function CreatePersonSheet({
+  open,
+  onOpenChange,
+  onCreated,
+  entityLabel,
+  defaultCreateType = 'individual',
+  lockCreateType = false,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onCreated: (person: PersonOption) => void;
+  entityLabel: string;
+  defaultCreateType?: Exclude<PersonTypeFilter, 'all'>;
+  lockCreateType?: boolean;
+}) {
+  const { request, showToastHandler, currentLocaleCode, getSettingValue } =
+    useApp();
+  const t = usePersonFieldWithCreateTranslations();
+  const allowCompanyRegistration =
+    getSettingValue('contact-allow-company-registration') !== false;
+
+  const effectiveDefaultType: Exclude<PersonTypeFilter, 'all'> =
+    allowCompanyRegistration ? defaultCreateType : 'individual';
+
+  const createPersonSchema = useMemo(
+    () =>
+      z.object({
+        name: z.string().trim().min(2, 'Nome é obrigatório'),
+        type: allowCompanyRegistration
+          ? z.enum(['individual', 'company'])
+          : z.literal('individual'),
+        email: z
+          .string()
+          .trim()
+          .email('E-mail inválido')
+          .optional()
+          .or(z.literal('')),
+        phone: z.string().trim().optional(),
+        document: z.string().trim().optional(),
+        line1: z.string().optional(),
+        city: z.string().optional(),
+        state: z.string().optional(),
+      }),
+    [allowCompanyRegistration]
+  );
+
+  const form = useForm<CreatePersonValues>({
+    resolver: zodResolver(createPersonSchema),
+    defaultValues: {
+      name: '',
+      type: effectiveDefaultType,
+      email: '',
+      phone: '',
+      document: '',
+      line1: '',
+      city: '',
+      state: '',
+    },
+  });
+
+  const selectedType =
+    allowCompanyRegistration && !lockCreateType
+      ? form.watch('type')
+      : effectiveDefaultType;
+
+  useEffect(() => {
+    if (!allowCompanyRegistration || lockCreateType) {
+      form.setValue('type', effectiveDefaultType);
+    }
+  }, [allowCompanyRegistration, effectiveDefaultType, form, lockCreateType]);
+
+  const { data: contactTypes = [] } = useQuery<ContactTypeLookup[]>({
+    queryKey: ['person-field-contact-types', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<PaginatedResponse<ContactTypeLookup>>({
+        url: '/person-contact-type?pageSize=100',
+        method: 'GET',
+      });
+      return response?.data?.data || [];
+    },
+    placeholderData: (old) => old ?? [],
+  });
+
+  const { data: documentTypes = [] } = useQuery<DocumentTypeLookup[]>({
+    queryKey: ['person-field-document-types', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<PaginatedResponse<DocumentTypeLookup>>({
+        url: '/person-document-type?pageSize=100',
+        method: 'GET',
+      });
+      return response?.data?.data || [];
+    },
+    placeholderData: (old) => old ?? [],
+  });
+
+  const resolveContactTypeId = (code: string, fallbackIndex = 0) => {
+    const found = contactTypes.find(
+      (item) => String(item.code).toUpperCase() === code
+    );
+    return (
+      found?.contact_type_id || contactTypes[fallbackIndex]?.contact_type_id
+    );
+  };
+
+  const resolveDocumentTypeId = (code: string) => {
+    const found = documentTypes.find(
+      (item) => String(item.code).toUpperCase() === code
+    );
+    return found?.document_type_id || documentTypes[0]?.document_type_id;
+  };
+
+  const resolveAddressType = () => 'residential';
+
+  const handleSubmit = async (values: CreatePersonValues) => {
+    try {
+      const normalizedType =
+        allowCompanyRegistration && !lockCreateType
+          ? values.type
+          : effectiveDefaultType;
+
+      const createResponse = await request<CreatePersonResponse>({
+        url: '/person',
+        method: 'POST',
+        data: {
+          name: values.name,
+          type: normalizedType,
+          status: 'active',
+        },
+      });
+
+      const personId = Number(
+        createResponse?.data?.id ?? createResponse?.data?.data?.id
+      );
+
+      if (!personId) {
+        throw new Error('Não foi possível identificar o cadastro criado');
+      }
+
+      const emailTypeId = resolveContactTypeId('EMAIL', 0);
+      const phoneTypeId =
+        resolveContactTypeId('PHONE', 1) || resolveContactTypeId('MOBILE', 1);
+      const documentTypeId = resolveDocumentTypeId(
+        normalizedType === 'individual' ? 'CPF' : 'CNPJ'
+      );
+      const addressType = resolveAddressType();
+
+      const contacts = [
+        values.email && emailTypeId
+          ? {
+              value: values.email.trim(),
+              is_primary: true,
+              contact_type_id: emailTypeId,
+            }
+          : null,
+        values.phone && phoneTypeId
+          ? {
+              value: values.phone.trim(),
+              is_primary: true,
+              contact_type_id: phoneTypeId,
+            }
+          : null,
+      ].filter(Boolean);
+
+      const documents = values.document?.trim()
+        ? [
+            {
+              value: values.document.trim(),
+              document_type_id: documentTypeId,
+            },
+          ]
+        : [];
+
+      const addresses =
+        values.line1 && values.city && values.state
+          ? [
+              {
+                line1: values.line1.trim(),
+                city: values.city.trim(),
+                state: values.state.trim(),
+                is_primary: true,
+                address_type: addressType,
+              },
+            ]
+          : [];
+
+      await request({
+        url: `/person/${personId}`,
+        method: 'PATCH',
+        data: {
+          name: values.name,
+          type: normalizedType,
+          status: 'active',
+          contacts,
+          documents,
+          addresses,
+        },
+      });
+
+      onCreated({ id: personId, name: values.name });
+      form.reset();
+      onOpenChange(false);
+      showToastHandler?.(
+        'success',
+        t('messages.createdSuccess', { entityLabel })
+      );
+    } catch {
+      showToastHandler?.('error', t('messages.createdError', { entityLabel }));
+    }
+  };
+
+  return (
+    <Sheet
+      open={open}
+      onOpenChange={(nextOpen) => {
+        onOpenChange(nextOpen);
+        if (!nextOpen) {
+          form.reset();
+        }
+      }}
+    >
+      <SheetContent
+        className="w-full overflow-y-auto sm:max-w-xl"
+        onCloseAutoFocus={(event) => event.preventDefault()}
+      >
+        <SheetHeader>
+          <SheetTitle>{t('sheet.title', { entityLabel })}</SheetTitle>
+          <SheetDescription>
+            {allowCompanyRegistration
+              ? t('sheet.description')
+              : t('sheet.descriptionIndividualOnly')}
+          </SheetDescription>
+        </SheetHeader>
+
+        <Form {...form}>
+          <div className="space-y-4 p-4">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('fields.name')}</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={t('placeholders.name', { entityLabel })}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {allowCompanyRegistration && !lockCreateType ? (
+              <FormField
+                control={form.control}
+                name="type"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.type')}</FormLabel>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder={t('common.select')} />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="individual">
+                          {t('types.individual')}
+                        </SelectItem>
+                        <SelectItem value="company">
+                          {t('types.company')}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            ) : null}
+
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <FormField
+                control={form.control}
+                name="document"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      {selectedType === 'individual'
+                        ? t('fields.documentIndividualOptional')
+                        : t('fields.documentCompanyOptional')}
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder={
+                          selectedType === 'individual'
+                            ? '000.000.000-00'
+                            : '00.000.000/0000-00'
+                        }
+                        {...field}
+                        value={field.value || ''}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.emailOptional')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder={t('placeholders.email', { entityLabel })}
+                        {...field}
+                        value={field.value || ''}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="phone"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('fields.phoneOptional')}</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={t('placeholders.phone')}
+                      {...field}
+                      value={field.value || ''}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="rounded-md border p-3">
+              <p className="mb-3 text-sm font-medium">
+                {t('fields.addressOptional')}
+              </p>
+              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                <FormField
+                  control={form.control}
+                  name="line1"
+                  render={({ field }) => (
+                    <FormItem className="sm:col-span-2">
+                      <FormControl>
+                        <Input
+                          placeholder={t('placeholders.addressLine1')}
+                          {...field}
+                          value={field.value || ''}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="city"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input
+                          placeholder={t('placeholders.city')}
+                          {...field}
+                          value={field.value || ''}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="state"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input
+                          placeholder={t('placeholders.state')}
+                          {...field}
+                          value={field.value || ''}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </div>
+
+            <div className="flex justify-end gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+              >
+                {t('actions.cancel')}
+              </Button>
+              <Button
+                type="button"
+                disabled={form.formState.isSubmitting}
+                onClick={() => {
+                  void form.handleSubmit(handleSubmit)();
+                }}
+              >
+                {t('actions.saveEntity', { entityLabel })}
+              </Button>
+            </div>
+          </div>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+export function PersonFieldWithCreate<TFieldValues extends FieldValues>({
+  form,
+  name,
+  label,
+  entityLabel,
+  selectPlaceholder,
+  personTypeFilter = 'all',
+  createType = 'individual',
+  lockCreateType = false,
+  valueType = 'string',
+  initialSelectedLabel = '',
+}: {
+  form: UseFormReturn<TFieldValues>;
+  name: Path<TFieldValues>;
+  label: string;
+  entityLabel: string;
+  selectPlaceholder: string;
+  personTypeFilter?: PersonTypeFilter;
+  createType?: Exclude<PersonTypeFilter, 'all'>;
+  lockCreateType?: boolean;
+  valueType?: FieldValueType;
+  initialSelectedLabel?: string;
+}) {
+  const { request } = useApp();
+  const t = usePersonFieldWithCreateTranslations();
+  const [personOpen, setPersonOpen] = useState(false);
+  const [personSearch, setPersonSearch] = useState('');
+  const [debouncedPersonSearch, setDebouncedPersonSearch] = useState('');
+  const [createPersonOpen, setCreatePersonOpen] = useState(false);
+  const [selectedPersonLabel, setSelectedPersonLabel] =
+    useState(initialSelectedLabel);
+  const parentScrollContainerRef = useRef<HTMLElement | null>(null);
+  const parentScrollTopRef = useRef(0);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setDebouncedPersonSearch(personSearch);
+    }, 300);
+
+    return () => clearTimeout(timeout);
+  }, [personSearch]);
+
+  useEffect(() => {
+    setSelectedPersonLabel(initialSelectedLabel);
+  }, [initialSelectedLabel]);
+
+  const captureParentScrollPosition = (trigger: HTMLElement) => {
+    const parentSheetContent = trigger.closest(
+      '[data-radix-dialog-content]'
+    ) as HTMLElement | null;
+
+    if (!parentSheetContent) {
+      parentScrollContainerRef.current = null;
+      parentScrollTopRef.current = 0;
+      return;
+    }
+
+    parentScrollContainerRef.current = parentSheetContent;
+    parentScrollTopRef.current = parentSheetContent.scrollTop;
+  };
+
+  const restoreParentScrollPosition = () => {
+    const fallbackOpenDialog = (
+      Array.from(
+        document.querySelectorAll(
+          '[data-radix-dialog-content][data-state="open"]'
+        )
+      ) as HTMLElement[]
+    ).at(-1);
+
+    const container =
+      parentScrollContainerRef.current &&
+      document.body.contains(parentScrollContainerRef.current)
+        ? parentScrollContainerRef.current
+        : fallbackOpenDialog || null;
+
+    if (!container) {
+      return;
+    }
+
+    const restore = () => {
+      container.scrollTop = parentScrollTopRef.current;
+    };
+
+    requestAnimationFrame(restore);
+    setTimeout(restore, 0);
+    setTimeout(restore, 120);
+  };
+
+  const { data: personOptionsData = [], isLoading: isLoadingPersons } =
+    useQuery<PersonOption[]>({
+      queryKey: [
+        'person-autocomplete-generic',
+        entityLabel,
+        debouncedPersonSearch,
+        personTypeFilter,
+      ],
+      queryFn: async () => {
+        const params = new URLSearchParams();
+        params.set('page', '1');
+        params.set('pageSize', '20');
+        if (personTypeFilter !== 'all') {
+          params.set('type', personTypeFilter);
+        }
+        if (debouncedPersonSearch.trim()) {
+          params.set('search', debouncedPersonSearch.trim());
+        }
+
+        const response = await request<PaginatedResponse<PersonOption> | PersonOption[]>({
+          url: `/person?${params.toString()}`,
+          method: 'GET',
+        });
+
+        const payload = response?.data;
+        if (Array.isArray(payload?.data)) {
+          return payload.data as PersonOption[];
+        }
+
+        if (Array.isArray(payload)) {
+          return payload as PersonOption[];
+        }
+
+        return [];
+      },
+      placeholderData: (old) => old ?? [],
+    });
+
+  const parseFieldValue = (personId: string | number) =>
+    valueType === 'number' ? Number(personId) : String(personId);
+
+  const fieldState = form.getFieldState(name, form.formState);
+
+  return (
+    <>
+      <div className="grid gap-2">
+        <Label data-error={!!fieldState.error} className="data-[error=true]:text-destructive">
+          {label}
+        </Label>
+        <Controller
+          control={form.control}
+          name={name}
+          render={({ field }) => {
+            const hasValue =
+              field.value !== undefined &&
+              field.value !== null &&
+              String(field.value).length > 0;
+
+            return (
+              <div className="flex w-full min-w-0 items-center gap-2">
+                <Popover open={personOpen} onOpenChange={setPersonOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      role="combobox"
+                      className="flex-1 min-w-0 justify-between overflow-hidden"
+                    >
+                      <span className="truncate text-left">
+                        {hasValue
+                          ? (personOptionsData.find(
+                              (person) =>
+                                String(person.id) === String(field.value)
+                            )?.name ??
+                            selectedPersonLabel ??
+                            `ID #${String(field.value)}`)
+                          : selectPlaceholder}
+                      </span>
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    className="p-0"
+                    style={{ width: 'var(--radix-popover-trigger-width)' }}
+                  >
+                    <Command shouldFilter={false}>
+                      <CommandInput
+                        placeholder={t('search.placeholder')}
+                        value={personSearch}
+                        onValueChange={setPersonSearch}
+                      />
+                      <CommandList>
+                        <CommandEmpty>
+                          {isLoadingPersons ? (
+                            t('search.loading')
+                          ) : (
+                            <div className="space-y-2 p-2 text-center">
+                              <p className="text-sm text-muted-foreground">
+                                {t('search.noResults')}
+                              </p>
+                              <Button
+                                type="button"
+                                variant="outline"
+                                className="w-full"
+                                onClick={(event) => {
+                                  captureParentScrollPosition(
+                                    event.currentTarget
+                                  );
+                                  setPersonOpen(false);
+                                  setCreatePersonOpen(true);
+                                }}
+                              >
+                                {t('actions.createNew')}
+                              </Button>
+                            </div>
+                          )}
+                        </CommandEmpty>
+                        <CommandGroup>
+                          {personOptionsData.map((person) => (
+                            <CommandItem
+                              key={String(person.id)}
+                              value={`${person.name}-${person.id}`}
+                              onSelect={() => {
+                                field.onChange(parseFieldValue(person.id));
+                                setSelectedPersonLabel(person.name);
+                                setPersonOpen(false);
+                              }}
+                            >
+                              {person.name}
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+
+                {hasValue ? (
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="icon"
+                    className="shrink-0"
+                    onClick={() => {
+                      field.onChange(valueType === 'number' ? null : '');
+                      setPersonSearch('');
+                      setSelectedPersonLabel('');
+                      setPersonOpen(false);
+                    }}
+                    aria-label={t('actions.clearSelection')}
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                ) : null}
+
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon"
+                  className="shrink-0"
+                  onClick={(event) => {
+                    captureParentScrollPosition(event.currentTarget);
+                    setPersonOpen(false);
+                    setCreatePersonOpen(true);
+                  }}
+                  aria-label={t('actions.createEntityAria', { entityLabel })}
+                >
+                  <Plus className="h-4 w-4" />
+                </Button>
+              </div>
+            );
+          }}
+        />
+        {fieldState.error?.message ? (
+          <p className="text-destructive text-sm">
+            {fieldState.error.message}
+          </p>
+        ) : null}
+      </div>
+
+      <CreatePersonSheet
+        open={createPersonOpen}
+        onOpenChange={(nextOpen) => {
+          setCreatePersonOpen(nextOpen);
+          if (!nextOpen) {
+            restoreParentScrollPosition();
+          }
+        }}
+        entityLabel={entityLabel}
+        defaultCreateType={createType}
+        lockCreateType={lockCreateType}
+        onCreated={(person) => {
+          form.setValue(name, parseFieldValue(person.id) as never, {
+            shouldValidate: false,
+            shouldDirty: true,
+            shouldTouch: true,
+          });
+          setSelectedPersonLabel(person.name);
+          setPersonSearch(person.name);
+          setCreatePersonOpen(false);
+        }}
+      />
+    </>
+  );
+}