@controleonline/ui-common 1.2.70 → 1.2.75

package/src/react/components/StateStore.js

@@ -0,0 +1,258 @@
+import React from 'react';
+import {ActivityIndicator, Text, View} from 'react-native';
+import globalStyles from '../styles/global';
+import {useStores} from '@store';
+
+const resolveStateMessage = (value, fallback) => {
+  if (value === null || value === undefined || value === false) {
+    return '';
+  }
+
+  if (typeof value === 'boolean') {
+    return fallback;
+  }
+
+  if (typeof value === 'string') {
+    return value.trim() || fallback;
+  }
+
+  return fallback;
+};
+
+const StateStore = ({
+  store,
+  stores = [],
+  mode = 'default',
+  loading = false,
+  saving = false,
+  loadingText = 'Carregando...',
+  savingText = 'Salvando...',
+  title = '',
+  subtitle = '',
+  showSpinner = false,
+  spinnerColor = '#0EA5E9',
+  spinnerSize = 'small',
+  align = 'center',
+  compact = false,
+  containerStyle = null,
+  contentStyle = null,
+  messageStyle = null,
+  titleStyle = null,
+  subtitleStyle = null,
+}) => {
+  const styles = globalStyles();
+  const allStores = typeof useStores === 'function' ? useStores(state => state) : null;
+  const storeNames = [
+    ...(Array.isArray(store) ? store : store ? [store] : []),
+    ...(Array.isArray(stores) ? stores : []),
+  ].filter(Boolean);
+  const isCompactMode = mode === 'compact';
+  const isDisplayMode = mode === 'display';
+  const isCompactLayout = compact || isCompactMode;
+  const containerBaseStyle = isCompactLayout
+    ? styles.state.compactContainer
+    : isDisplayMode
+      ? styles.state.displayContainer || styles.state.container
+      : styles.state.container;
+  const contentBaseStyle = isCompactLayout
+    ? styles.state.compactContent
+    : [
+        styles.state.content,
+        styles.state.loadingContainer,
+        isDisplayMode ? styles.state.displayContent : null,
+      ].filter(Boolean);
+  const textAlign = align === 'left' ? 'left' : 'center';
+  const alignItems = align === 'left' ? 'flex-start' : 'center';
+  const shouldShowSpinner = showSpinner || isCompactLayout || isDisplayMode;
+
+  if (!allStores) {
+    const runtimeLoadingText = resolveStateMessage(loading, loadingText);
+    const runtimeSavingText = resolveStateMessage(saving, savingText);
+    const runtimeEntries = [
+      runtimeLoadingText ? {kind: 'loading', label: runtimeLoadingText} : null,
+      runtimeSavingText ? {kind: 'saving', label: runtimeSavingText} : null,
+    ].filter(Boolean);
+
+    if (runtimeEntries.length === 0) {
+      return null;
+    }
+
+    return (
+      <View style={[containerBaseStyle, containerStyle]}>
+        <View style={[contentBaseStyle, {alignItems}, contentStyle]}>
+          {(showSpinner || title || subtitle) ? (
+            <View
+              style={{
+                alignItems: alignItems === 'flex-start' ? 'flex-start' : 'center',
+                flexDirection: 'row',
+                gap: 10,
+                justifyContent: alignItems === 'flex-start' ? 'flex-start' : 'center',
+                marginBottom: 12,
+                width: '100%',
+              }}
+            >
+              {showSpinner ? (
+                <ActivityIndicator size={spinnerSize} color={spinnerColor} />
+              ) : null}
+              {(title || subtitle) ? (
+                <View style={{flex: 1, gap: 2}}>
+                  {title ? (
+                    <Text
+                      style={[
+                        {
+                          color: '#0F172A',
+                          fontSize: 14,
+                          fontWeight: '800',
+                          textAlign,
+                        },
+                        titleStyle,
+                      ]}
+                    >
+                      {title}
+                    </Text>
+                  ) : null}
+                  {subtitle ? (
+                    <Text
+                      style={[
+                        {
+                          color: '#64748B',
+                          fontSize: 12,
+                          lineHeight: 16,
+                          textAlign,
+                        },
+                        subtitleStyle,
+                      ]}
+                    >
+                      {subtitle}
+                    </Text>
+                  ) : null}
+                </View>
+              ) : null}
+            </View>
+          ) : null}
+          {runtimeEntries.map(entry => (
+            <Text
+              key={`${entry.kind}-${entry.label}`}
+              style={[
+                styles.state.messageText,
+                {textAlign},
+                messageStyle,
+              ]}
+            >
+              {entry.label}
+            </Text>
+          ))}
+        </View>
+      </View>
+    );
+  }
+
+  const storeEntries = storeNames
+    .map(storeName => {
+      const currentStore = allStores?.[storeName] || {};
+      const getters = currentStore?.getters || {};
+
+      if (getters.isLoading === true) {
+        return {
+          kind: 'loading',
+          label: `Carregando${storeName ? `: ${storeName}` : ''}`,
+        };
+      }
+
+      if (getters.isSaving === true) {
+        return {
+          kind: 'saving',
+          label: `Salvando${storeName ? `: ${storeName}` : ''}`,
+        };
+      }
+
+      return null;
+    })
+    .filter(Boolean);
+
+  const runtimeEntries = [
+    resolveStateMessage(loading, loadingText)
+      ? {kind: 'loading', label: resolveStateMessage(loading, loadingText)}
+      : null,
+    resolveStateMessage(saving, savingText)
+      ? {kind: 'saving', label: resolveStateMessage(saving, savingText)}
+      : null,
+  ].filter(Boolean);
+
+  const entries = [...storeEntries, ...runtimeEntries];
+
+  if (entries.length === 0) {
+    return null;
+  }
+
+  return (
+    <View style={[containerBaseStyle, containerStyle]}>
+      <View style={[contentBaseStyle, {alignItems}, contentStyle]}>
+        {(shouldShowSpinner || title || subtitle) ? (
+          <View
+            style={{
+              alignItems: alignItems === 'flex-start' ? 'flex-start' : 'center',
+              flexDirection: 'row',
+              gap: 10,
+              justifyContent: alignItems === 'flex-start' ? 'flex-start' : 'center',
+              marginBottom: 12,
+              width: '100%',
+            }}
+          >
+            {shouldShowSpinner ? (
+              <ActivityIndicator size={spinnerSize} color={spinnerColor} />
+            ) : null}
+            {(title || subtitle) ? (
+              <View style={{flex: 1, gap: 2}}>
+                {title ? (
+                  <Text
+                    style={[
+                      {
+                        color: '#0F172A',
+                        fontSize: 14,
+                        fontWeight: '800',
+                        textAlign,
+                      },
+                      titleStyle,
+                    ]}
+                  >
+                    {title}
+                  </Text>
+                ) : null}
+                {subtitle ? (
+                  <Text
+                    style={[
+                      {
+                        color: '#64748B',
+                        fontSize: 12,
+                        lineHeight: 16,
+                        textAlign,
+                      },
+                      subtitleStyle,
+                    ]}
+                  >
+                    {subtitle}
+                  </Text>
+                ) : null}
+              </View>
+            ) : null}
+          </View>
+        ) : null}
+        {entries.map(entry => (
+          <Text
+            key={`${entry.kind}-${entry.label}`}
+            style={[
+              styles.state.messageText,
+              {textAlign},
+              messageStyle,
+            ]}
+          >
+            {entry.label}
+          </Text>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+export default StateStore;

package/src/react/components/UnifiedPaymentBar.js

@@ -115,10 +115,13 @@ export default function UnifiedPaymentBar({
               );
 
               return (
-                <TouchableOpacity
-                  key={key}
-                  disabled={disabled}
-                  onPress={action?.onPress}
+                <TouchableOpacity
+                  key={key}
+                  accessibilityLabel={action?.accessibilityLabel || action?.label}
+                  accessibilityRole="button"
+                  accessibilityState={{disabled}}
+                  disabled={disabled}
+                  onPress={action?.onPress}
                   style={[
                     styles.actionButton,
                     visibleActions.length === 1 && styles.actionButtonSingle,

package/src/react/components/UserAvatar.js

@@ -0,0 +1,160 @@
+import React, {useEffect, useMemo, useState} from 'react';
+import {Image, Platform, StyleSheet, Text, View} from 'react-native';
+import {env as APP_ENV} from '@env';
+import {getGravatarUrl, getUserInitials} from '../utils/userAvatar';
+
+const normalizeUrl = value => String(value || '').trim();
+
+const readSessionToken = () => {
+  if (typeof localStorage === 'undefined' || !localStorage?.getItem) {
+    return '';
+  }
+
+  try {
+    const session = JSON.parse(localStorage.getItem('session') || '{}');
+    return normalizeUrl(session?.api_key || session?.token);
+  } catch {
+    return '';
+  }
+};
+
+const useDisplayUri = uri => {
+  const [displayUri, setDisplayUri] = useState(normalizeUrl(uri));
+
+  useEffect(() => {
+    let cancelled = false;
+    let objectUrl = '';
+    const next = normalizeUrl(uri);
+
+    const run = async () => {
+      if (!next) {
+        setDisplayUri('');
+        return;
+      }
+
+      const isBackendDownload = /\/files\/[^/?#]+\/download/i.test(next);
+      const token = readSessionToken();
+
+      if (!isBackendDownload || Platform.OS !== 'web' || !token) {
+        setDisplayUri(next);
+        return;
+      }
+
+      try {
+        const headers = {
+          Accept: '*/*',
+          'API-TOKEN': token,
+        };
+        const host =
+          normalizeUrl(APP_ENV?.DOMAIN) ||
+          (typeof location !== 'undefined' ? location.host : '');
+        if (host) {
+          headers['App-Domain'] = host;
+        }
+
+        const response = await fetch(next, {method: 'GET', headers});
+        if (!response.ok) {
+          if (!cancelled) setDisplayUri(next);
+          return;
+        }
+
+        const blob = await response.blob();
+        objectUrl = URL.createObjectURL(blob);
+        if (!cancelled) setDisplayUri(objectUrl);
+      } catch {
+        if (!cancelled) setDisplayUri(next);
+      }
+    };
+
+    run();
+
+    return () => {
+      cancelled = true;
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [uri]);
+
+  return displayUri;
+};
+
+const UserAvatar = ({
+  imageUrl,
+  email,
+  name,
+  size = 40,
+  backgroundColor,
+  borderColor,
+  borderWidth = 1,
+  textColor,
+  style,
+  useGravatar = true,
+}) => {
+  const sources = useMemo(
+    () =>
+      [
+        normalizeUrl(imageUrl),
+        useGravatar ? getGravatarUrl(email, Math.max(size * 2, 80)) : '',
+      ].filter(Boolean),
+    [email, imageUrl, size, useGravatar],
+  );
+  const [sourceIndex, setSourceIndex] = useState(0);
+
+  useEffect(() => {
+    setSourceIndex(0);
+  }, [sources]);
+
+  const currentSource = sources[sourceIndex];
+  const displayUri = useDisplayUri(currentSource);
+
+  const containerStyle = [
+    styles.container,
+    style,
+    {
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      backgroundColor,
+      borderColor,
+      borderWidth,
+    },
+  ];
+
+  return (
+    <View style={containerStyle}>
+      {displayUri ? (
+        <Image
+          source={{uri: displayUri}}
+          style={styles.image}
+          onError={() => setSourceIndex(index => index + 1)}
+        />
+      ) : (
+        <Text
+          style={[
+            styles.initials,
+            {color: textColor, fontSize: Math.max(Math.round(size * 0.38), 14)},
+          ]}>
+          {getUserInitials({name, email})}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  initials: {
+    fontWeight: '700',
+    letterSpacing: 0.5,
+    textAlign: 'center',
+  },
+});
+
+export default UserAvatar;

package/src/react/components/WebsocketListener.native.js

@@ -74,12 +74,12 @@ export const WebsocketListener = () => {
         : 'socket:open'
       : `socket:${normalizedStatus || 'off'}`;
 
-    const indicatorColor =
-      socketConnected && socketIdentified
-        ? '#10b981'
-        : (socketConnected || ['connecting', 'identifying', 'open', 'reconnecting'].includes(normalizedStatus))
-          ? '#e67e22'
-          : '#c10015';
+    const indicatorTone =
+      socketConnected && socketIdentified
+        ? 'success'
+        : (socketConnected || ['connecting', 'identifying', 'open', 'reconnecting'].includes(normalizedStatus))
+          ? 'warning'
+          : 'error';
     const lastSocketStores = Array.isArray(state?.lastStores)
       ? state.lastStores.filter(Boolean).join(', ')
       : '';
@@ -88,11 +88,11 @@ export const WebsocketListener = () => {
       : '';
 
     runtimeDebugActions.setFooterEntry({
-      key: 'socket',
-      order: 10,
-      indicatorColor,
-      updatedAt: state?.updatedAt || new Date().toISOString(),
-      lines: [
+      key: 'socket',
+      order: 10,
+      indicatorTone,
+      updatedAt: state?.updatedAt || new Date().toISOString(),
+      lines: [
         `Realtime ${stateLabel} | empresa: ${normalizeText(
           currentCompany?.id,
         ) || '--'} | device: ${truncateText(state?.device || device?.id || '--', 34)}`,

package/src/react/components/integrations/IntegrationHero/index.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Image, Text, View } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import { colors } from '@controleonline/../../src/styles/colors';
+
+import createStyles from './styles';
+
+// Hero visual compartilhado pelas telas de integração.
+export default function IntegrationHero({
+  shadowStyle,
+  accentColor,
+  eyebrow,
+  title,
+  description,
+  logo,
+  iconName = 'layers',
+  palette = colors,
+}) {
+  const styles = createStyles(palette);
+
+  return (
+    <View
+      style={[
+        styles.card,
+        shadowStyle,
+        { backgroundColor: palette.actionBackground || accentColor },
+      ]}
+    >
+      <View style={styles.copy}>
+        <Text style={styles.eyebrow}>{eyebrow}</Text>
+        <Text style={styles.title}>{title}</Text>
+        <Text style={styles.description}>{description}</Text>
+      </View>
+
+      <View style={styles.badge}>
+        {logo ? (
+          <Image source={logo} style={styles.logo} resizeMode="contain" />
+        ) : (
+          <Icon
+            name={iconName}
+            size={20}
+            color={palette.cardIconColor || palette.iconColor || accentColor}
+          />
+        )}
+      </View>
+    </View>
+  );
+}

package/src/react/components/integrations/IntegrationHero/styles.js

@@ -0,0 +1,57 @@
+import { StyleSheet } from 'react-native';
+import {colors} from '@controleonline/../../src/styles/colors';
+import {withOpacity} from '@controleonline/../../src/styles/branding';
+
+const createStyles = (palette = colors) =>
+  StyleSheet.create({
+  card: {
+    borderRadius: 24,
+    padding: 22,
+    marginBottom: 20,
+    overflow: 'hidden',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+  },
+  copy: {
+    flex: 1,
+    paddingRight: 16,
+  },
+  eyebrow: {
+    fontSize: 11,
+    fontWeight: '800',
+    color: withOpacity(palette.actionText || palette.white, 0.72),
+    textTransform: 'uppercase',
+    letterSpacing: 1.2,
+  },
+  title: {
+    marginTop: 10,
+    fontSize: 28,
+    fontWeight: '800',
+    color: palette.actionText || palette.white,
+    letterSpacing: -0.6,
+  },
+  description: {
+    marginTop: 10,
+    fontSize: 14,
+    lineHeight: 22,
+    color: withOpacity(palette.actionText || palette.white, 0.86),
+  },
+  badge: {
+    position: 'absolute',
+    top: 18,
+    right: 18,
+    width: 48,
+    height: 48,
+    borderRadius: 16,
+    backgroundColor: palette.cardIconBackground || palette.iconBackground || palette.white,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  logo: {
+    width: 24,
+    height: 24,
+  },
+});
+
+export default createStyles;

package/src/react/components/integrations/IntegrationTabs/index.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+import { colors } from '@controleonline/../../src/styles/colors';
+
+import createStyles from './styles';
+
+// Abas horizontais simples para reduzir densidade visual das páginas.
+export default function IntegrationTabs({ tabs, activeKey, onChange, accentColor, palette = colors }) {
+  const styles = createStyles(palette);
+  const resolvedPrimaryBackground =
+    palette.buttonBackground ||
+    accentColor ||
+    palette.primary;
+  const resolvedPrimaryBorder =
+    palette.buttonBorder ||
+    resolvedPrimaryBackground;
+  const resolvedPrimaryText =
+    palette.buttonText ||
+    palette.white;
+  const resolvedSecondaryBackground =
+    palette.buttonBackgroundSecondary ||
+    palette.white;
+  const resolvedSecondaryBorder =
+    palette.buttonBorderSecondary ||
+    palette.border;
+  const resolvedSecondaryText =
+    palette.buttonTextSecondary ||
+    palette.textSecondary;
+  const resolvedSecondaryIcon =
+    palette.buttonIconSecondary ||
+    resolvedSecondaryText;
+
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={styles.scrollContent}>
+      {tabs.map(tab => {
+        const active = tab.key === activeKey;
+        const tabColors = active
+          ? {
+              backgroundColor: resolvedPrimaryBackground,
+              borderColor: resolvedPrimaryBorder,
+              textColor: resolvedPrimaryText,
+              badgeBackground: palette.buttonPressedBackground || resolvedPrimaryBorder,
+              badgeText: resolvedPrimaryText,
+            }
+          : {
+              backgroundColor: resolvedSecondaryBackground,
+              borderColor: resolvedSecondaryBorder,
+              textColor: resolvedSecondaryText,
+              badgeBackground: palette.badgeBackground || resolvedSecondaryBackground,
+              badgeText: resolvedSecondaryIcon,
+            };
+
+        return (
+          <TouchableOpacity
+            key={tab.key}
+            activeOpacity={0.85}
+            style={[
+              styles.tabButton,
+              {
+                backgroundColor: tabColors.backgroundColor,
+                borderColor: tabColors.borderColor,
+              },
+            ]}
+            onPress={() => onChange(tab.key)}>
+            <Text style={[styles.tabLabel, { color: tabColors.textColor }]}>
+              {tab.label}
+            </Text>
+
+            {tab.badge !== undefined && tab.badge !== null && tab.badge !== '' && (
+              <View
+                style={[
+                  styles.tabBadge,
+                  { backgroundColor: tabColors.badgeBackground },
+                ]}>
+                <Text style={[styles.tabBadgeText, { color: tabColors.badgeText }]}>
+                  {tab.badge}
+                </Text>
+              </View>
+            )}
+          </TouchableOpacity>
+        );
+      })}
+    </ScrollView>
+  );
+}