@controleonline/ui-default 1.0.269 → 1.0.272

package/src/react/components/upload/defaultUploadLibrary.js

@@ -0,0 +1,248 @@
+/**
+ * Library fetch helpers for DefaultUpload (app-community#296 / #433 / #670).
+ *
+ * Always send itemsPerPage so the API does not default to a tiny page size.
+ * Also hydrate known file ids (certificates are public=false and may not
+ * appear in the collection filter).
+ */
+const DEFAULT_LIBRARY_CONTEXTS = ['products', 'products-category'];
+
+const normalizeCollection = response => {
+  if (Array.isArray(response)) return response;
+  if (Array.isArray(response?.member)) return response.member;
+  if (Array.isArray(response?.['hydra:member'])) return response['hydra:member'];
+  return [];
+};
+
+const getEntityId = relation => {
+  const value = relation?.id || relation?.['@id'] || relation;
+  const match = String(value || '').match(/(\d+)$/);
+  return match ? match[1] : null;
+};
+
+const extractFileIdLocal = value => {
+  if (!value && value !== 0) return null;
+  if (typeof value === 'number') return value;
+  if (typeof value === 'object') {
+    return extractFileIdLocal(value.id || value['@id'] || value.fileId);
+  }
+  const match = String(value).match(/(\d+)$/);
+  return match ? parseInt(match[1], 10) : null;
+};
+
+const dedupeFiles = files => {
+  const seen = new Set();
+  return files.filter(file => {
+    const id = extractFileIdLocal(file);
+    if (!id || seen.has(String(id))) return false;
+    seen.add(String(id));
+    return true;
+  });
+};
+
+function resolvePeopleMediaTypeLabel(relation) {
+  const mediaType = relation?.mediaType;
+  if (!mediaType) return '';
+  if (typeof mediaType === 'string') {
+    // Prefer last path segment only when it looks like a label, not a numeric id
+    const segment = String(mediaType).split('/').filter(Boolean).pop() || '';
+    if (segment && !/^\d+$/.test(segment)) return segment.trim();
+    return '';
+  }
+  return String(
+    mediaType.type || mediaType.name || mediaType.label || mediaType.code || '',
+  ).trim();
+}
+
+function filesFromPeopleMediaRelations(relations) {
+  if (!Array.isArray(relations)) return [];
+  // Group by file id and collect media_types where the image is used (#814)
+  const byFileId = new Map();
+  for (const relation of relations) {
+    const file = relation?.file;
+    if (!file) continue;
+    const id = extractFileIdLocal(file);
+    if (!id) continue;
+    const typeLabel = resolvePeopleMediaTypeLabel(relation);
+    const key = String(id);
+    const existing = byFileId.get(key);
+    if (existing) {
+      if (typeLabel && !existing.mediaTypesUsed.includes(typeLabel)) {
+        existing.mediaTypesUsed.push(typeLabel);
+      }
+      continue;
+    }
+    // Always tag people_media library entries so the manager can preview as image
+    // even when API returns a bare IRI / minimal File payload.
+    const base =
+      typeof file === 'object'
+        ? {
+            ...file,
+            id: file.id || id,
+            '@id': file['@id'] || `/files/${id}`,
+            context: file.context || 'people_media',
+            fileType: file.fileType || file.mimeType || 'image',
+            fileName: file.fileName || file.name || file.originalName || `Arquivo ${id}`,
+          }
+        : {
+            id,
+            '@id': `/files/${id}`,
+            context: 'people_media',
+            fileType: 'image',
+            fileName: `Arquivo ${id}`,
+          };
+    byFileId.set(key, {
+      ...base,
+      mediaTypesUsed: typeLabel ? [typeLabel] : [],
+    });
+  }
+  return Array.from(byFileId.values()).map(file => ({
+    ...file,
+    mediaTypesUsed: Array.isArray(file.mediaTypesUsed)
+      ? [...file.mediaTypesUsed].sort((a, b) =>
+          String(a).localeCompare(String(b), 'pt-BR', {sensitivity: 'base'}),
+        )
+      : [],
+  }));
+}
+
+async function fetchPeopleMediaFiles({peopleActions, peopleIri}) {
+  if (!peopleIri || typeof peopleActions?.getPeopleMedia !== 'function') {
+    return [];
+  }
+  const pageSize = 100;
+  const maxPages = 10;
+  const collected = [];
+  for (let page = 1; page <= maxPages; page += 1) {
+    const response = await peopleActions.getPeopleMedia({
+      people: peopleIri,
+      page,
+      itemsPerPage: pageSize,
+      'order[id]': 'DESC',
+    });
+    const pageItems = normalizeCollection(response);
+    collected.push(...pageItems);
+    if (pageItems.length < pageSize) break;
+  }
+  return filesFromPeopleMediaRelations(collected);
+}
+
+async function fetchKnownFiles({fileActions, knownFileIds = []}) {
+  if (typeof fileActions?.get !== 'function') return [];
+  const ids = [...new Set(knownFileIds.map(extractFileIdLocal).filter(Boolean))];
+  const files = [];
+  for (const id of ids) {
+    try {
+      const item = await fileActions.get(id);
+      if (item && typeof item === 'object') files.push(item);
+    } catch (_) {
+      // item GET is best-effort so a missing id does not empty the library
+    }
+  }
+  return files;
+}
+
+function synthesizeKnownImageFiles(knownFileIds = [], fileType = 'image', context = 'people_media') {
+  const preferImage = String(fileType || '').toLowerCase() === 'image';
+  return knownFileIds
+    .map(extractFileIdLocal)
+    .filter(Boolean)
+    .map(id => ({
+      id,
+      '@id': `/files/${id}`,
+      context,
+      fileType: preferImage ? 'image' : fileType || undefined,
+      fileName: `Arquivo ${id}`,
+    }));
+}
+
+async function fetchLibraryFiles({
+  fileActions,
+  companyId,
+  fileType,
+  libraryContexts,
+  peopleActions = null,
+  knownFileIds = [],
+}) {
+  const peopleIri = getEntityId(companyId) ? `/people/${getEntityId(companyId)}` : null;
+  const contexts = Array.isArray(libraryContexts) && libraryContexts.length
+    ? libraryContexts
+    : DEFAULT_LIBRARY_CONTEXTS;
+  const includesPeopleMedia = contexts.some(
+    c => String(c || '').trim().toLowerCase() === 'people_media',
+  );
+
+  // people_media is company-scoped via /people_media — never GET /files collection/item
+  // (those endpoints 404 for private company media while /download still works).
+  if (includesPeopleMedia) {
+    let files = [];
+    if (peopleIri) {
+      try {
+        files = await fetchPeopleMediaFiles({peopleActions, peopleIri});
+      } catch (_) {
+        files = [];
+      }
+    }
+    const existing = new Set(
+      files.map(file => String(extractFileIdLocal(file) || '')).filter(Boolean),
+    );
+    const stubs = synthesizeKnownImageFiles(knownFileIds, fileType, 'people_media').filter(
+      file => !existing.has(String(file.id)),
+    );
+    return dedupeFiles(files.concat(stubs));
+  }
+
+  if (typeof fileActions?.getItems !== 'function') {
+    return fetchKnownFiles({fileActions, knownFileIds});
+  }
+
+  const pageSize = 500;
+  const maxPages = 10;
+
+  const fetchContextFiles = async fileContext => {
+    const contextFiles = [];
+    for (let page = 1; page <= maxPages; page += 1) {
+      const params = {
+        context: fileContext,
+        page,
+        itemsPerPage: pageSize,
+      };
+      if (fileType) params.fileType = fileType;
+      if (peopleIri) params.people = peopleIri;
+      try {
+        const response = await fileActions.getItems(params);
+        const pageItems = normalizeCollection(response);
+        contextFiles.push(...pageItems);
+        if (pageItems.length < pageSize) break;
+      } catch (_) {
+        // Collection filter may 404 for some contexts — skip page
+        break;
+      }
+    }
+    return contextFiles;
+  };
+
+  const batches = await Promise.all(contexts.map(fetchContextFiles));
+  let files = batches.flat();
+
+  if (knownFileIds.length) {
+    // Prefer stubs over GET /files/{id} when item endpoint 404s for private files
+    const knownFiles = await fetchKnownFiles({fileActions, knownFileIds});
+    if (knownFiles.length) {
+      files = knownFiles.concat(files);
+    } else {
+      files = synthesizeKnownImageFiles(knownFileIds, fileType, contexts[0]).concat(files);
+    }
+  }
+
+  return dedupeFiles(files);
+}
+
+module.exports = {
+  fetchLibraryFiles,
+  filesFromPeopleMediaRelations,
+  resolvePeopleMediaTypeLabel,
+  fetchPeopleMediaFiles,
+  fetchKnownFiles,
+  synthesizeKnownImageFiles,
+};

package/src/react/components/upload/fileUpload.js

@@ -0,0 +1,93 @@
+import {Platform} from 'react-native';
+import * as DocumentPicker from 'expo-document-picker';
+import {env as APP_ENV} from '@env';
+
+const extractId = value => {
+  if (!value && value !== 0) return null;
+  if (typeof value === 'number') return value;
+
+  const raw = typeof value === 'string' ? value : value?.id || value?.['@id'];
+  if (!raw) return null;
+
+  const match = String(raw).match(/(\d+)$/);
+  return match ? parseInt(match[1], 10) : null;
+};
+
+export const uploadFileToApi = async ({file, context = 'products', peopleId, entityId}) => {
+  const session = JSON.parse(localStorage.getItem('session') || '{}');
+  const token = session?.api_key || session?.token;
+  if (!token) throw new Error('Sessao invalida para upload.');
+
+  const apiEntryPoint = String(APP_ENV?.API_ENTRYPOINT || '').replace(/\/$/, '');
+  const host = APP_ENV?.DOMAIN || (typeof location !== 'undefined' ? location.host : '');
+  if (!apiEntryPoint) throw new Error('API_ENTRYPOINT nao configurado.');
+
+  const formData = new FormData();
+
+  if (Platform.OS === 'web') {
+    formData.append('file', file);
+  } else {
+    formData.append('file', {
+      uri: file.uri,
+      name: file.name || 'imagem.jpg',
+      type: file.mimeType || file.type || 'image/jpeg',
+    });
+  }
+
+  formData.append('context', context);
+  if (peopleId) formData.append('people', String(extractId(peopleId)));
+  if (entityId) formData.append('id', String(extractId(entityId)));
+
+  const response = await fetch(`${apiEntryPoint}/files/upload`, {
+    method: 'POST',
+    headers: {
+      'API-TOKEN': token,
+      'App-Domain': host,
+      Accept: 'application/json',
+    },
+    body: formData,
+  });
+
+  const result = await response.json().catch(() => ({}));
+  if (!response.ok || result?.['@type'] === 'Error') {
+    throw new Error(result?.description || result?.message || 'Falha no upload do arquivo.');
+  }
+
+  return result;
+};
+
+export const selectFile = async (acceptedTypes = '*/*') => {
+  if (Platform.OS === 'web' && typeof document !== 'undefined') {
+    return new Promise(resolve => {
+      const input = document.createElement('input');
+      input.type = 'file';
+      if (acceptedTypes) {
+        input.accept = acceptedTypes;
+      }
+      input.onchange = event => resolve(event?.target?.files?.[0] || null);
+      input.click();
+    });
+  }
+
+  const result = await DocumentPicker.getDocumentAsync({
+    type: acceptedTypes || '*/*',
+    copyToCacheDirectory: true,
+    multiple: false,
+  });
+
+  if (result?.canceled) {
+    return null;
+  }
+
+  return result?.assets?.[0] || null;
+};
+
+export const toFileIri = fileObj => {
+  const iri = fileObj?.['@id'];
+  if (iri) return iri;
+
+  const id = extractId(fileObj?.id || fileObj);
+  return id ? `/files/${id}` : null;
+};
+
+export const extractFileId = extractId;

package/src/react/hooks/usePostalCodeLookup.js

@@ -0,0 +1,145 @@
+import {useCallback, useEffect, useRef, useState} from 'react';
+import {lookupPostalCode, listStates} from '../services/addressGeo';
+import {
+  mergePostalCodeData,
+  onlyDigits,
+} from '../services/addressFormUtils';
+
+const DEBOUNCE_MS = 450;
+
+/**
+ * CEP lookup with debounce (8 digits), race-token protection and loading/error state.
+ * Never overwrites number/complement/nickname (via mergePostalCodeData).
+ */
+export default function usePostalCodeLookup({
+  formCep,
+  setForm,
+  onFormChange,
+  setStates,
+  enabled = true,
+}) {
+  const [loadingCep, setLoadingCep] = useState(false);
+  const [cepError, setCepError] = useState(null);
+  const requestIdRef = useRef(0);
+  const debounceRef = useRef(null);
+  const lastRequestedRef = useRef('');
+
+  const runLookup = useCallback(
+    async (rawCep, {preserveFilledFields = false} = {}) => {
+      const digits = onlyDigits(rawCep).slice(0, 8);
+      if (digits.length !== 8) {
+        return null;
+      }
+
+      const requestId = ++requestIdRef.current;
+      lastRequestedRef.current = digits;
+      setLoadingCep(true);
+      setCepError(null);
+
+      try {
+        const data = await lookupPostalCode(digits);
+        if (requestId !== requestIdRef.current) {
+          return null; // stale response
+        }
+        setForm(prev => {
+          const next = mergePostalCodeData(
+            {...prev, cep: digits},
+            data,
+            {preserveFilledFields},
+          );
+          onFormChange?.(next);
+          return next;
+        });
+        if (data?.uf || data?.state) {
+          try {
+            const country =
+              data.country === 'Brasil' ||
+              data.country === 'Brazil' ||
+              data.country === 'BR'
+                ? 'BR'
+                : data.country || 'BR';
+            const s = await listStates(country);
+            if (requestId === requestIdRef.current) {
+              setStates?.(s);
+            }
+          } catch {
+            // states optional
+          }
+        }
+        return data;
+      } catch (e) {
+        if (requestId !== requestIdRef.current) {
+          return null;
+        }
+        const message =
+          e?.message ||
+          e?.response?.data?.detail ||
+          'CEP inválido ou serviço indisponível';
+        setCepError(message);
+        return null;
+      } finally {
+        if (requestId === requestIdRef.current) {
+          setLoadingCep(false);
+        }
+      }
+    },
+    [setForm, onFormChange, setStates],
+  );
+
+  // Debounced auto-lookup ONLY when CEP has exactly 8 digits (never partial).
+  useEffect(() => {
+    if (!enabled) {
+      return undefined;
+    }
+    const digits = onlyDigits(formCep).slice(0, 8);
+    if (digits.length !== 8) {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+        debounceRef.current = null;
+      }
+      return undefined;
+    }
+    if (digits === lastRequestedRef.current) {
+      return undefined;
+    }
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+    debounceRef.current = setTimeout(() => {
+      runLookup(digits);
+    }, DEBOUNCE_MS);
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    };
+  }, [formCep, enabled, runLookup]);
+
+  const onCepBlur = useCallback(() => {
+    const digits = onlyDigits(formCep);
+    if (digits.length !== 8) {
+      return;
+    }
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+    runLookup(digits);
+  }, [formCep, runLookup]);
+
+  const cancelPending = useCallback(() => {
+    requestIdRef.current += 1;
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+    setLoadingCep(false);
+  }, []);
+
+  return {
+    loadingCep,
+    cepError,
+    setCepError,
+    onCepBlur,
+    runLookup,
+    cancelPending,
+  };
+}

package/src/react/index.js

@@ -1,10 +1,16 @@
 // React entrypoint kept after Vue removal.
 import DefaultFile from './components/files/DefaultFile';
+import DefaultFeatherIconPicker from './components/inputs/DefaultFeatherIconPicker';
+import DefaultUpload from './components/upload/DefaultUpload';
 
 const moduleEntry = {
   DefaultFile,
+  DefaultFeatherIconPicker,
+  DefaultUpload,
 };
 
 export {DefaultFile};
+export {DefaultFeatherIconPicker};
+export {DefaultUpload};
 
 export default moduleEntry;

package/src/react/services/addressFormUtils.js

@@ -0,0 +1,196 @@
+const onlyDigits = value => String(value || '').replace(/\D+/g, '');
+
+/** Keep at most 8 CEP digits (Brazilian postal code). */
+export const normalizeCepDigits = value => onlyDigits(value).slice(0, 8);
+
+/**
+ * Display mask #####-### (hyphen is visual only; max 8 digits).
+ * @example formatCepMask('01310100') => '01310-100'
+ */
+export const formatCepMask = value => {
+  const digits = normalizeCepDigits(value);
+  if (digits.length <= 5) {
+    return digits;
+  }
+  return `${digits.slice(0, 5)}-${digits.slice(5)}`;
+};
+
+export const emptyAddressForm = {
+  nickname: '',
+  cep: '',
+  street: '',
+  number: '',
+  complement: '',
+  district: '',
+  city: '',
+  uf: '',
+  stateName: '',
+  countryCode: 'BR',
+  countryName: 'Brazil',
+  latitude: null,
+  longitude: null,
+  mapStaticUrl: null,
+  facadeUrl: null,
+  provider: null,
+};
+
+export function hydrateAddressFromRow(row) {
+  if (!row || typeof row !== 'object') {
+    return {...emptyAddressForm};
+  }
+  const street = row?.street?.street || row?.street || '';
+  const district = row?.street?.district?.district || row?.district || '';
+  const city = row?.street?.district?.city?.city || row?.city || '';
+  const stateEntity = row?.street?.district?.city?.state || row?.state;
+  const countryEntity = stateEntity?.country || row?.country;
+  return {
+    ...emptyAddressForm,
+    nickname: row?.nickname || '',
+    cep: String(row?.street?.cep?.cep || row?.cep || row?.postal_code || ''),
+    street: typeof street === 'string' ? street : '',
+    number: row?.number != null ? String(row.number) : '',
+    complement: row?.complement || '',
+    district,
+    city,
+    uf: stateEntity?.uf || row?.uf || '',
+    stateName: stateEntity?.state || '',
+    countryCode: countryEntity?.countrycode || countryEntity?.code || 'BR',
+    countryName: countryEntity?.countryname || countryEntity?.name || 'Brazil',
+    latitude: row?.latitude ?? null,
+    longitude: row?.longitude ?? null,
+  };
+}
+
+export function hasAddressText(form) {
+  return [
+    form?.street,
+    form?.number,
+    form?.district,
+    form?.city,
+    form?.uf,
+    form?.cep,
+  ].some(value => String(value || '').trim().length > 0);
+}
+
+export function hasCoordinates(form) {
+  return (
+    Number.isFinite(Number(form?.latitude)) &&
+    Number.isFinite(Number(form?.longitude))
+  );
+}
+
+/**
+ * Merge postal-code API payload into form state.
+ * Always preserves number, complement and nickname (manual fields).
+ * When preserveFilledFields is true, also keeps non-empty street/city/etc.
+ */
+export function mergePostalCodeData(
+  prev,
+  data,
+  {preserveFilledFields = false} = {},
+) {
+  const keep = (key, nextValue) =>
+    preserveFilledFields && String(prev[key] || '').trim()
+      ? prev[key]
+      : nextValue || prev[key] || '';
+
+  const countryRaw = data?.country;
+  const isBrazil =
+    countryRaw === 'Brasil' || countryRaw === 'Brazil' || countryRaw === 'BR';
+
+  return {
+    ...prev,
+    // Manual fields never overwritten by lookup
+    number: prev.number,
+    complement: prev.complement,
+    nickname: prev.nickname,
+    cep: normalizeCepDigits(data?.cep || prev.cep),
+    street: keep('street', data?.street),
+    district: keep('district', data?.district),
+    city: keep('city', data?.city),
+    uf: keep('uf', data?.uf || data?.state),
+    stateName: keep('stateName', data?.state),
+    countryCode: isBrazil ? 'BR' : countryRaw || prev.countryCode,
+    countryName: isBrazil
+      ? 'Brazil'
+      : countryRaw || prev.countryName,
+    latitude: data?.latitude ?? data?.map?.latitude ?? prev.latitude,
+    longitude: data?.longitude ?? data?.map?.longitude ?? prev.longitude,
+    mapStaticUrl: data?.map?.staticUrl || prev.mapStaticUrl || null,
+    facadeUrl: data?.facade?.streetViewUrl || prev.facadeUrl || null,
+    provider: data?.provider || prev.provider || null,
+  };
+}
+
+export function buildMapMarkerPayload(form) {
+  if (!hasAddressText(form) && !hasCoordinates(form)) {
+    return null;
+  }
+  const addressLine = [form.street, form.number].filter(Boolean).join(', ');
+  const addressExtra = [
+    form.district,
+    [form.city, form.uf].filter(Boolean).join(' - '),
+    form.countryName || form.countryCode,
+    form.cep,
+  ]
+    .filter(Boolean)
+    .join(' • ');
+
+  return {
+    id: 'default-address-preview',
+    title: form.nickname || 'Endereco',
+    addressLine: addressLine || addressExtra || 'Endereco',
+    addressExtra,
+    latitude: form.latitude,
+    longitude: form.longitude,
+    geocodeQuery: [
+      addressLine,
+      form.district,
+      [form.city, form.uf].filter(Boolean).join(' - '),
+      form.countryName || form.countryCode,
+      form.cep,
+    ]
+      .filter(Boolean)
+      .join(', '),
+  };
+}
+
+export {onlyDigits};
+
+export function parseOptionalCoordinate(value) {
+  if (value === null || value === undefined || value === '') {
+    return null;
+  }
+
+  const parsed = Number(String(value).trim());
+
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+export function getCurrentCoordinates() {
+  return new Promise(resolve => {
+    const geolocation =
+      typeof navigator !== 'undefined' ? navigator.geolocation : null;
+
+    if (!geolocation?.getCurrentPosition) {
+      resolve(null);
+      return;
+    }
+
+    geolocation.getCurrentPosition(
+      position => {
+        const latitude = Number(position?.coords?.latitude);
+        const longitude = Number(position?.coords?.longitude);
+
+        if (!Number.isFinite(latitude) || !Number.isFinite(longitude)) {
+          resolve(null);
+          return;
+        }
+
+        resolve({latitude, longitude});
+      },
+      () => resolve(null),
+      {enableHighAccuracy: true, timeout: 8000, maximumAge: 60000},
+    );
+  });
+}