@controleonline/ui-common 1.2.71 → 1.2.75

package/src/react/components/NetworkPrinterPreviewModal.styles.js

@@ -0,0 +1,159 @@
+import {Platform, StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(15,23,42,0.42)',
+    justifyContent: 'center',
+    padding: 16,
+  },
+  panel: {
+    maxHeight: '88%',
+    borderRadius: 16,
+    backgroundColor: '#fff',
+    overflow: 'hidden',
+  },
+  header: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#E2E8F0',
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  headerCopy: {
+    flex: 1,
+    gap: 4,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '800',
+    color: '#0F172A',
+  },
+  subtitle: {
+    fontSize: 12,
+    color: '#64748B',
+    lineHeight: 17,
+  },
+  closeButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#F1F5F9',
+  },
+  content: {
+    padding: 16,
+    gap: 12,
+  },
+  metaGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+  },
+  metaChip: {
+    borderRadius: 999,
+    backgroundColor: '#E0F2FE',
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+  },
+  metaText: {
+    fontSize: 11,
+    fontWeight: '800',
+    color: '#075985',
+  },
+  paper: {
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    borderRadius: 12,
+    backgroundColor: '#F8FAFC',
+    padding: 12,
+  },
+  receiptWrap: {
+    alignSelf: 'center',
+    maxWidth: '100%',
+  },
+  logoWrap: {
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  logo: {
+    width: 96,
+    height: 40,
+  },
+  cutLine: {
+    marginVertical: 12,
+    borderTopWidth: 1,
+    borderTopColor: '#94A3B8',
+    borderStyle: 'dashed',
+    alignItems: 'center',
+  },
+  cutText: {
+    marginTop: -9,
+    paddingHorizontal: 8,
+    backgroundColor: '#fff',
+    fontSize: 11,
+    fontWeight: '800',
+    color: '#64748B',
+    textTransform: 'uppercase',
+  },
+  receiptText: {
+    fontFamily: Platform.select({
+      ios: 'Courier',
+      android: 'monospace',
+      default: 'monospace',
+    }),
+    fontSize: 12,
+    lineHeight: 17,
+    color: '#0F172A',
+  },
+  receiptTextCenter: {
+    textAlign: 'center',
+  },
+  receiptTextBold: {
+    fontWeight: '800',
+  },
+  receiptTextLarge: {
+    fontSize: 22,
+    lineHeight: 28,
+    fontWeight: '900',
+  },
+  receiptTextReverse: {
+    alignSelf: 'flex-start',
+    backgroundColor: '#0F172A',
+    color: '#F8FAFC',
+    paddingHorizontal: 3,
+  },
+  receiptTextReverseCenter: {
+    alignSelf: 'stretch',
+  },
+  hint: {
+    fontSize: 12,
+    lineHeight: 18,
+    color: '#64748B',
+  },
+  stateBox: {
+    borderRadius: 12,
+    backgroundColor: '#F1F5F9',
+    padding: 14,
+  },
+  stateText: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: '#475569',
+  },
+  errorBox: {
+    borderRadius: 12,
+    backgroundColor: '#FEF2F2',
+    padding: 14,
+  },
+  errorText: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: '#B91C1C',
+  },
+});
+
+export default styles;

package/src/react/components/RuntimeInfoFooter.js

@@ -1,5 +1,11 @@
-import React, {useEffect, useMemo, useState} from 'react';
-import {ActivityIndicator, Text, View, useWindowDimensions} from 'react-native';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
+import {
+  ActivityIndicator,
+  Animated,
+  Text,
+  View,
+  useWindowDimensions,
+} from 'react-native';
 import {useStore, useStores} from '@store';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {
@@ -8,15 +14,18 @@ import {
   parseConfigsObject,
 } from '@controleonline/ui-common/src/react/config/deviceConfigBootstrap';
 import {
-  getRuntimeFooterDebugInfo,
-  getRuntimeFooterPrimaryText,
-  getRuntimeFooterText,
-} from '@controleonline/ui-common/src/react/utils/runtimeFooter';
-import styles from './RuntimeInfoFooter.styles';
-
-const ROTATION_INTERVAL_MS = 6000;
-const COMPACT_BREAKPOINT = 720;
-const MAX_INLINE_TEXT_LENGTH = 84;
+  getRuntimeFooterDebugInfo,
+  getRuntimeFooterPrimaryText,
+  getRuntimeFooterRotationEntries,
+  getRuntimeFooterText,
+  getRuntimeFooterTextLines,
+} from '@controleonline/ui-common/src/react/utils/runtimeFooter';
+import styles from './RuntimeInfoFooter.styles';
+
+const ROTATION_INTERVAL_MS = 6000;
+const FADE_DURATION_MS = 260;
+const COMPACT_BREAKPOINT = 720;
+const MAX_INLINE_TEXT_LENGTH = 84;
 
 const RuntimeInfoFooter = ({
   appVersion,
@@ -28,6 +37,7 @@ const RuntimeInfoFooter = ({
   const {width} = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const [activeIndex, setActiveIndex] = useState(0);
+  const fadeOpacity = useRef(new Animated.Value(1)).current;
   const allStores = useStores(state => state);
   const deviceConfigStore = useStore('device_config');
   const runtimeDebugStore = useStore('runtime_debug');
@@ -53,10 +63,14 @@ const RuntimeInfoFooter = ({
       }),
     [appVersion, device, deviceConfigItem, footerDebugInfo.primaryText],
   );
-  const companyFooterText = useMemo(
-    () => getRuntimeFooterText(defaultCompany),
-    [defaultCompany?.configs],
-  );
+  const companyFooterText = useMemo(
+    () => getRuntimeFooterText(defaultCompany),
+    [defaultCompany?.configs],
+  );
+  const footerTextLines = useMemo(
+    () => getRuntimeFooterTextLines(companyFooterText),
+    [companyFooterText],
+  );
   const deviceConfigs = useMemo(
     () => parseConfigsObject(deviceConfigItem?.configs),
     [deviceConfigItem?.configs],
@@ -69,15 +83,26 @@ const RuntimeInfoFooter = ({
     [deviceConfigs],
   );
 
-  const entries = useMemo(
-    () => [primaryText, companyFooterText].filter(Boolean),
-    [companyFooterText, primaryText],
-  );
-  const inlineText = useMemo(() => entries.join('  •  '), [entries]);
-  const shouldRotate =
-    !showDebugInfo &&
-    entries.length > 1 &&
-    (width < COMPACT_BREAKPOINT || inlineText.length > MAX_INLINE_TEXT_LENGTH);
+  const rotationEntries = useMemo(
+    () =>
+      getRuntimeFooterRotationEntries({
+        companyFooterText,
+        primaryText,
+      }),
+    [companyFooterText, primaryText],
+  );
+  const inlineText = useMemo(
+    () => [primaryText, ...footerTextLines].filter(Boolean).join('  •  '),
+    [footerTextLines, primaryText],
+  );
+  const shouldRotate =
+    !showDebugInfo &&
+    rotationEntries.length > 1 &&
+    (
+      footerTextLines.length > 1 ||
+      width < COMPACT_BREAKPOINT ||
+      inlineText.length > MAX_INLINE_TEXT_LENGTH
+    );
   const footerEntries = useMemo(
     () =>
       Object.values(runtimeDebugSummary?.entries || {})
@@ -147,25 +172,61 @@ const RuntimeInfoFooter = ({
   const bottomInset = Math.max(Number(insets.bottom) || 0, 16);
 
   useEffect(() => {
-    if (!shouldRotate || entries.length <= 1) {
+    if (!shouldRotate || rotationEntries.length <= 1) {
       setActiveIndex(0);
+      fadeOpacity.stopAnimation();
+      fadeOpacity.setValue(1);
       return;
     }
-
-    const intervalId = setInterval(() => {
-      setActiveIndex(current => (current + 1) % entries.length);
-    }, ROTATION_INTERVAL_MS);
-
+
+    let timeoutId;
+    let cancelled = false;
+
+    const scheduleTransition = () => {
+      timeoutId = setTimeout(() => {
+        Animated.timing(fadeOpacity, {
+          toValue: 0,
+          duration: FADE_DURATION_MS,
+          useNativeDriver: true,
+        }).start(({finished}) => {
+          if (!finished || cancelled) {
+            return;
+          }
+
+          setActiveIndex(current => (current + 1) % rotationEntries.length);
+
+          Animated.timing(fadeOpacity, {
+            toValue: 1,
+            duration: FADE_DURATION_MS,
+            useNativeDriver: true,
+          }).start(({finished: fadeInFinished}) => {
+            if (fadeInFinished && !cancelled) {
+              scheduleTransition();
+            }
+          });
+        });
+      }, ROTATION_INTERVAL_MS);
+    };
+
+    fadeOpacity.setValue(1);
+    scheduleTransition();
+
     return () => {
-      clearInterval(intervalId);
+      cancelled = true;
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      fadeOpacity.stopAnimation();
     };
-  }, [entries.length, shouldRotate]);
+  }, [fadeOpacity, rotationEntries.length, shouldRotate]);
 
-  if (entries.length === 0 && !showDebugInfo) {
+  if (rotationEntries.length === 0 && !showDebugInfo) {
     return null;
   }
 
-  const displayedText = shouldRotate ? entries[activeIndex] : inlineText;
+  const displayedText = shouldRotate
+    ? rotationEntries[activeIndex]
+    : inlineText;
   const backgroundColor = colors?.footerBackground;
   const borderColor = colors?.footerBorder;
   const textColor = colors?.footerText;
@@ -199,18 +260,21 @@ const RuntimeInfoFooter = ({
               ]}
             />
           </View>
-          <Text
+          <Animated.Text
             numberOfLines={1}
             ellipsizeMode="tail"
             minimumFontScale={0.85}
             style={[
               styles.primaryText,
+              {
+                opacity: showDebugInfo ? 1 : fadeOpacity,
+              },
               {
                 color: textColor,
               },
             ]}>
             {showDebugInfo ? inlineText || primaryText || device?.id || '--' : displayedText}
-          </Text>
+          </Animated.Text>
           <View style={styles.loadingWrap}>
             {hasStoreLoading && (
               <ActivityIndicator color={loadingColor} size="small" />

package/src/react/components/RuntimeInfoFooter.styles.js

@@ -18,15 +18,18 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
+    minHeight: 20,
   },
   statusDotWrap: {
     minWidth: 22,
+    minHeight: 20,
     marginRight: 8,
     alignItems: 'center',
     justifyContent: 'center',
   },
   loadingWrap: {
     minWidth: 22,
+    minHeight: 20,
     marginLeft: 8,
     alignItems: 'center',
     justifyContent: 'center',

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/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;