@controleonline/ui-default 1.0.270 → 1.0.273

package/src/react/components/address/LatLonReadonlyFields.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import {View, TextInput} from 'react-native';
+
+/**
+ * Latitude / longitude fields.
+ * Read-only after a successful geocode; editable when Nominatim misses
+ * so the user can type coordinates and drop a pin.
+ */
+export default function LatLonReadonlyFields({
+  form,
+  styles,
+  Field,
+  editable = false,
+  onChange,
+}) {
+  const formatCoord = value =>
+    value == null || value === '' ? '' : String(value);
+
+  return (
+    <View style={styles.coordRow}>
+      <View style={styles.coordField}>
+        <Field label="Latitude">
+          <TextInput
+            testID="address-latitude-input"
+            style={[styles.input, editable ? null : styles.inputReadonly]}
+            value={formatCoord(form?.latitude)}
+            editable={editable}
+            selectTextOnFocus={editable}
+            onChangeText={v => onChange?.('latitude', v)}
+            placeholder="—"
+            keyboardType="decimal-pad"
+          />
+        </Field>
+      </View>
+      <View style={styles.coordField}>
+        <Field label="Longitude">
+          <TextInput
+            testID="address-longitude-input"
+            style={[styles.input, editable ? null : styles.inputReadonly]}
+            value={formatCoord(form?.longitude)}
+            editable={editable}
+            selectTextOnFocus={editable}
+            onChangeText={v => onChange?.('longitude', v)}
+            placeholder="—"
+            keyboardType="decimal-pad"
+          />
+        </Field>
+      </View>
+    </View>
+  );
+}

package/src/react/components/address/defaultAddressHelpers.js

@@ -0,0 +1,163 @@
+/**
+ * Pure helpers for DefaultAddress — keep the component under the 500-line limit.
+ * @see app-community#283 (franchise address lat/long + manual fields)
+ */
+
+export const emptyForm = {
+  nickname: '',
+  cep: '',
+  street: '',
+  number: '',
+  complement: '',
+  district: '',
+  city: '',
+  uf: '',
+  stateName: '',
+  countryCode: 'BR',
+  countryName: 'Brazil',
+  latitude: null,
+  longitude: null,
+  mapStaticUrl: null,
+  facadeUrl: null,
+  provider: null,
+  categories: [],
+};
+
+export const onlyDigits = value => String(value || '').replace(/\D+/g, '');
+
+export const hydrateFromRow = row => {
+  if (!row || typeof row !== 'object') {
+    return {...emptyForm};
+  }
+  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 {
+    ...emptyForm,
+    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,
+    categories: Array.isArray(row?.categories)
+      ? row.categories
+      : Array.isArray(row?.category)
+        ? row.category
+        : [],
+  };
+};
+
+export const hasAddressText = form =>
+  [form?.street, form?.number, form?.district, form?.city, form?.uf, form?.cep].some(
+    value => String(value || '').trim().length > 0,
+  );
+
+export const hasCoordinates = form =>
+  Number.isFinite(Number(form?.latitude)) && Number.isFinite(Number(form?.longitude));
+
+export const parseOptionalCoordinate = value => {
+  if (value === null || value === undefined || value === '') {
+    return null;
+  }
+  const n = Number(String(value).trim().replace(',', '.'));
+  return Number.isFinite(n) ? n : null;
+};
+
+export const mergePostalCodeData = (prev, data, {preserveFilledFields = false} = {}) => {
+  const keep = (key, nextValue) =>
+    preserveFilledFields && String(prev[key] || '').trim()
+      ? prev[key]
+      : nextValue || prev[key];
+
+  return {
+    ...prev,
+    cep: onlyDigits(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:
+      data.country === 'Brasil' || data.country === 'Brazil'
+        ? 'BR'
+        : data.country || prev.countryCode,
+    countryName:
+      data.country === 'Brasil' ? 'Brazil' : data.country || 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 const getCurrentCoordinates = () =>
+  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},
+    );
+  });
+
+export const 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(', '),
+  };
+};

package/src/react/components/address/defaultAddressStyles.js

@@ -0,0 +1,148 @@
+import {StyleSheet} from 'react-native';
+
+/**
+ * Styles for DefaultAddress — extracted to keep the component under 500 lines.
+ */
+export const styles = StyleSheet.create({
+  scroll: {flex: 1, backgroundColor: '#fff'},
+  container: {padding: 16, paddingBottom: 32},
+  containerDesktop: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 24,
+    maxWidth: 1200,
+    alignSelf: 'center',
+    width: '100%',
+  },
+  formPane: {width: '100%'},
+  formPaneDesktop: {flex: 1, maxWidth: 560},
+  field: {marginBottom: 10, position: 'relative', zIndex: 1},
+  fieldRaised: {zIndex: 30, elevation: 8},
+  label: {fontSize: 13, fontWeight: '600', marginBottom: 4, color: '#334155'},
+  input: {
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    backgroundColor: '#fff',
+  },
+  select: {
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+    backgroundColor: '#F8FAFC',
+  },
+  dropdown: {
+    maxHeight: 220,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    borderRadius: 8,
+    marginTop: 4,
+    backgroundColor: '#fff',
+    zIndex: 40,
+    elevation: 8,
+  },
+  option: {
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: '#F1F5F9',
+  },
+  row: {flexDirection: 'row', alignItems: 'center'},
+  flex: {flex: 1},
+  half: {flex: 1},
+  gap8: {gap: 8},
+  loader: {marginLeft: 8},
+  error: {color: '#B91C1C', marginBottom: 8},
+  hint: {color: '#64748B', marginBottom: 8, fontSize: 12},
+  mapPane: {
+    width: '100%',
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    borderRadius: 12,
+    backgroundColor: '#F8FAFC',
+    padding: 16,
+    gap: 12,
+  },
+  mapPaneDesktop: {flex: 1, minHeight: 560},
+  mapPaneTitle: {fontWeight: '700', fontSize: 15, color: '#0F172A'},
+  mapImage: {
+    width: '100%',
+    height: 220,
+    borderRadius: 10,
+    backgroundColor: '#E2E8F0',
+  },
+  mapImageDesktop: {height: 360},
+  liveMap: {
+    width: '100%',
+    height: 220,
+    borderRadius: 10,
+    overflow: 'hidden',
+    backgroundColor: '#E2E8F0',
+  },
+  liveMapDesktop: {height: 360},
+  facadeImage: {
+    width: '100%',
+    height: 180,
+    borderRadius: 10,
+    backgroundColor: '#E2E8F0',
+  },
+  mapPlaceholder: {
+    height: 220,
+    borderRadius: 10,
+    backgroundColor: '#E2E8F0',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 18,
+  },
+  facadePlaceholder: {
+    minHeight: 120,
+    borderRadius: 10,
+    backgroundColor: '#E2E8F0',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 18,
+  },
+  mapPlaceholderTitle: {
+    fontWeight: '700',
+    color: '#334155',
+    marginBottom: 6,
+  },
+  mapPlaceholderText: {
+    color: '#64748B',
+    textAlign: 'center',
+    fontSize: 13,
+    lineHeight: 18,
+  },
+  actions: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    gap: 12,
+    marginTop: 16,
+  },
+  btnSecondary: {paddingHorizontal: 16, paddingVertical: 12},
+  btnPrimary: {
+    backgroundColor: '#2563EB',
+    borderRadius: 8,
+    paddingHorizontal: 18,
+    paddingVertical: 12,
+  },
+  btnPrimaryText: {color: '#fff', fontWeight: '600'},
+  btnSecondaryText: {color: '#475569', fontWeight: '600'},
+  btnDisabled: {opacity: 0.6},
+
+  coordRow: {
+    flexDirection: 'row',
+    gap: 12,
+  },
+  coordField: {
+    flex: 1,
+  },
+  inputReadonly: {
+    backgroundColor: '#F1F5F9',
+    color: '#475569',
+  },
+});

package/src/react/components/address/defaultAddressUtils.js

@@ -0,0 +1,129 @@
+/**
+ * Helpers for DefaultAddress form (hydration, CEP merge, geolocation).
+ */
+const emptyForm = {
+  nickname: '',
+  cep: '',
+  street: '',
+  number: '',
+  complement: '',
+  district: '',
+  city: '',
+  uf: '',
+  stateName: '',
+  countryCode: 'BR',
+  countryName: 'Brazil',
+  latitude: null,
+  longitude: null,
+  mapStaticUrl: null,
+  facadeUrl: null,
+  provider: null,
+};
+
+const hydrateFromRow = row => {
+  if (!row || typeof row !== 'object') {
+    return {...emptyForm};
+  }
+  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 {
+    ...emptyForm,
+    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,
+  };
+};
+
+const onlyDigits = value => String(value || '').replace(/\D+/g, '');
+
+const hasAddressText = form =>
+  [
+    form?.street,
+    form?.number,
+    form?.district,
+    form?.city,
+    form?.uf,
+    form?.cep,
+  ].some(value => String(value || '').trim().length > 0);
+
+const hasCoordinates = form =>
+  Number.isFinite(Number(form?.latitude)) && Number.isFinite(Number(form?.longitude));
+
+const mergePostalCodeData = (prev, data, {preserveFilledFields = false} = {}) => {
+  const keep = (key, nextValue) =>
+    preserveFilledFields && String(prev[key] || '').trim()
+      ? prev[key]
+      : nextValue || prev[key];
+
+  return {
+    ...prev,
+    cep: onlyDigits(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:
+      data.country === 'Brasil' || data.country === 'Brazil'
+        ? 'BR'
+        : data.country || prev.countryCode,
+    countryName:
+      data.country === 'Brasil' ? 'Brazil' : data.country || 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,
+  };
+};
+
+const getCurrentCoordinates = () =>
+  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},
+    );
+  });
+
+
+export {
+  emptyForm,
+  hydrateFromRow,
+  onlyDigits,
+  hasAddressText,
+  hasCoordinates,
+  mergePostalCodeData,
+  getCurrentCoordinates,
+};

package/src/react/components/extra-data/DefaultExtraData.js

@@ -0,0 +1,152 @@
+import React, { useMemo } from 'react'
+import { Text, View } from 'react-native'
+
+import styles from './DefaultExtraData.styles'
+
+const MAX_CELL_ITEMS = 4
+
+const formatKey = key =>
+  String(key || '')
+    .replace(/([a-z])([A-Z])/g, '$1 $2')
+    .replace(/[_-]+/g, ' ')
+    .replace(/^\w/, letter => letter.toUpperCase())
+
+const formatScalar = value => {
+  if (value === true) return 'true'
+  if (value === false) return 'false'
+  return String(value ?? '').trim()
+}
+
+const summarizeValue = value => {
+  if (Array.isArray(value)) return `${value.length}`
+  if (value && typeof value === 'object') {
+    return Object.keys(value).filter(Boolean).slice(0, 3).join(', ')
+  }
+
+  return formatScalar(value)
+}
+
+const resolveArrayKey = (item, index) =>
+  item?.name || item?.id || item?.code || item?.source || `${index + 1}`
+
+const buildItem = (key, value, depth = 0) => {
+  if (Array.isArray(value)) {
+    return {
+      key,
+      value: summarizeValue(value),
+      children: value.map((item, index) =>
+        buildItem(resolveArrayKey(item, index), item, depth + 1),
+      ),
+      depth,
+    }
+  }
+
+  if (value && typeof value === 'object') {
+    return {
+      key,
+      value: summarizeValue(value),
+      children: Object.entries(value)
+        .filter(([, itemValue]) => itemValue !== null && itemValue !== undefined && itemValue !== '')
+        .map(([childKey, childValue]) => buildItem(childKey, childValue, depth + 1)),
+      depth,
+    }
+  }
+
+  return {
+    key,
+    value: formatScalar(value),
+    children: [],
+    depth,
+  }
+}
+
+const normalizeExtraData = value => {
+  if (!value) return []
+
+  const parsed = typeof value === 'string'
+    ? JSON.parse(value)
+    : value
+
+  if (Array.isArray(parsed)) {
+    return parsed
+      .map((item, index) => {
+        const key = item?.field || item?.key || item?.name || resolveArrayKey(item, index)
+        const itemValue = item?.value ?? item?.configValue ?? item?.data ?? item
+        return buildItem(key, itemValue)
+      })
+      .filter(item => item.value || item.children.length > 0)
+  }
+
+  if (!parsed || typeof parsed !== 'object') {
+    return []
+  }
+
+  return Object.entries(parsed)
+    .filter(([, itemValue]) => itemValue !== null && itemValue !== undefined && itemValue !== '')
+    .map(([key, itemValue]) => buildItem(key, itemValue))
+}
+
+const ExtraDataItem = ({ item, variant = 'cell' }) => {
+  const isCard = variant === 'card'
+  const children = Array.isArray(item.children) ? item.children : []
+
+  return (
+    <View style={[styles.item, isCard ? styles.cardItem : null]}>
+      <Text style={styles.key} numberOfLines={1}>
+        {formatKey(item.key)}
+      </Text>
+      {item.value ? (
+        <Text style={styles.value} numberOfLines={isCard ? 4 : 1}>
+          {item.value}
+        </Text>
+      ) : null}
+      {isCard && children.length > 0 ? (
+        <View style={styles.children}>
+          {children.map((child, index) => (
+            <ExtraDataItem
+              key={`${item.key}-${child.key}-${index}`}
+              item={child}
+              variant={variant}
+            />
+          ))}
+        </View>
+      ) : null}
+    </View>
+  )
+}
+
+const DefaultExtraData = ({ value, variant = 'cell' }) => {
+  const items = useMemo(() => {
+    try {
+      return normalizeExtraData(value)
+    } catch {
+      return []
+    }
+  }, [value])
+
+  if (items.length === 0) {
+    return <Text style={styles.empty}>-</Text>
+  }
+
+  const isCard = variant === 'card'
+  const visibleItems = isCard ? items : items.slice(0, MAX_CELL_ITEMS)
+
+  return (
+    <View style={[styles.wrap, isCard ? styles.cardWrap : null]}>
+      {visibleItems.map((item, index) => (
+        <ExtraDataItem
+          key={`${item.key}-${index}`}
+          item={item}
+          variant={variant}
+        />
+      ))}
+      {!isCard && items.length > MAX_CELL_ITEMS ? (
+        <Text style={styles.more} numberOfLines={1}>
+          +{items.length - MAX_CELL_ITEMS}
+        </Text>
+      ) : null}
+    </View>
+  )
+}
+
+export default DefaultExtraData

package/src/react/components/extra-data/DefaultExtraData.styles.js

@@ -0,0 +1,61 @@
+import { StyleSheet } from 'react-native'
+
+const styles = StyleSheet.create({
+  wrap: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 6,
+    minWidth: 0,
+  },
+  cardWrap: {
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    width: '100%',
+  },
+  item: {
+    maxWidth: 180,
+    minHeight: 24,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC',
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+  },
+  cardItem: {
+    maxWidth: '100%',
+    width: '100%',
+  },
+  children: {
+    gap: 4,
+    marginTop: 6,
+    paddingLeft: 8,
+    borderLeftWidth: 1,
+    borderLeftColor: '#CBD5E1',
+  },
+  key: {
+    color: '#64748B',
+    fontSize: 9,
+    fontWeight: '900',
+    textTransform: 'uppercase',
+  },
+  value: {
+    marginTop: 1,
+    color: '#0F172A',
+    fontSize: 11,
+    fontWeight: '700',
+  },
+  more: {
+    alignSelf: 'center',
+    color: '#64748B',
+    fontSize: 11,
+    fontWeight: '900',
+  },
+  empty: {
+    color: '#94A3B8',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+})
+
+export default styles