@controleonline/ui-common 1.2.71 → 1.2.76

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,23 +1,32 @@
-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 {
   DEVICE_RUNTIME_DEBUG_INFO_ENABLED_KEY,
   isTruthyValue,
-  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;
-
+  parseConfigsObject,
+} from '@controleonline/ui-common/src/react/config/deviceConfigBootstrap';
+import {
+  getRuntimeFooterDebugInfo,
+  getRuntimeFooterPrimaryText,
+  getRuntimeFooterRotationEntries,
+  getRuntimeFooterText,
+  getRuntimeFooterTextLines,
+} from '@controleonline/ui-common/src/react/utils/runtimeFooter';
+import styles from './RuntimeInfoFooter.styles';
+
+const ROTATION_INTERVAL_MS = 4000;
+const FADE_DURATION_MS = 260;
+const COMPACT_BREAKPOINT = 720;
+const MAX_INLINE_TEXT_LENGTH = 84;
+
 const RuntimeInfoFooter = ({
   appVersion,
   defaultCompany,
@@ -28,85 +37,97 @@ 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');
   const deviceConfigItem = deviceConfigStore?.getters?.item || {};
   const runtimeDebugSummary = runtimeDebugStore?.getters?.summary || {};
-
-  const footerDebugInfo = useMemo(
-    () =>
-      getRuntimeFooterDebugInfo({
-        device,
-        appVersion,
-        deviceConfig: deviceConfigItem,
-      }),
-    [appVersion, device, deviceConfigItem],
-  );
-  const primaryText = useMemo(
-    () =>
-      footerDebugInfo.primaryText ||
-      getRuntimeFooterPrimaryText({
-        device,
-        appVersion,
-        deviceConfig: deviceConfigItem,
-      }),
-    [appVersion, device, deviceConfigItem, footerDebugInfo.primaryText],
-  );
-  const companyFooterText = useMemo(
-    () => getRuntimeFooterText(defaultCompany),
-    [defaultCompany?.configs],
-  );
-  const deviceConfigs = useMemo(
-    () => parseConfigsObject(deviceConfigItem?.configs),
-    [deviceConfigItem?.configs],
-  );
-  const showDebugInfo = useMemo(
-    () =>
-      isTruthyValue(
-        deviceConfigs?.[DEVICE_RUNTIME_DEBUG_INFO_ENABLED_KEY],
-      ),
-    [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 footerEntries = useMemo(
-    () =>
-      Object.values(runtimeDebugSummary?.entries || {})
-        .filter(entry => entry && Array.isArray(entry.lines) && entry.lines.length > 0)
-        .sort((left, right) => {
-          const leftOrder = Number(left?.order || 100);
-          const rightOrder = Number(right?.order || 100);
-          if (leftOrder !== rightOrder) {
-            return leftOrder - rightOrder;
-          }
-
-          const leftTime = Date.parse(left?.updatedAt || '');
-          const rightTime = Date.parse(right?.updatedAt || '');
-          if (Number.isFinite(leftTime) && Number.isFinite(rightTime)) {
-            return rightTime - leftTime;
-          }
-
-          if (Number.isFinite(rightTime)) {
-            return 1;
-          }
-
-          if (Number.isFinite(leftTime)) {
-            return -1;
-          }
-
-          return 0;
-        }),
-    [runtimeDebugSummary?.entries],
-  );
+
+  const footerDebugInfo = useMemo(
+    () =>
+      getRuntimeFooterDebugInfo({
+        device,
+        appVersion,
+        deviceConfig: deviceConfigItem,
+      }),
+    [appVersion, device, deviceConfigItem],
+  );
+  const primaryText = useMemo(
+    () =>
+      footerDebugInfo.primaryText ||
+      getRuntimeFooterPrimaryText({
+        device,
+        appVersion,
+        deviceConfig: deviceConfigItem,
+      }),
+    [appVersion, device, deviceConfigItem, footerDebugInfo.primaryText],
+  );
+  const companyFooterText = useMemo(
+    () => getRuntimeFooterText(defaultCompany),
+    [defaultCompany?.configs],
+  );
+  const footerTextLines = useMemo(
+    () => getRuntimeFooterTextLines(companyFooterText),
+    [companyFooterText],
+  );
+  const deviceConfigs = useMemo(
+    () => parseConfigsObject(deviceConfigItem?.configs),
+    [deviceConfigItem?.configs],
+  );
+  const showDebugInfo = useMemo(
+    () =>
+      isTruthyValue(
+        deviceConfigs?.[DEVICE_RUNTIME_DEBUG_INFO_ENABLED_KEY],
+      ),
+    [deviceConfigs],
+  );
+
+  const rotationEntries = useMemo(
+    () =>
+      getRuntimeFooterRotationEntries({
+        companyFooterText,
+        primaryText,
+      }),
+    [companyFooterText, primaryText],
+  );
+  const inlineText = useMemo(
+    () => [primaryText, ...footerTextLines].filter(Boolean).join('  •  '),
+    [footerTextLines, primaryText],
+  );
+  // Always rotate when there is more than one entry (e.g. 1 footer line + primaryText).
+  // Do not fall back to concatenated inlineText in that case.
+  const shouldRotate =
+    !showDebugInfo && rotationEntries.length > 1;
+  const footerEntries = useMemo(
+    () =>
+      Object.values(runtimeDebugSummary?.entries || {})
+        .filter(entry => entry && Array.isArray(entry.lines) && entry.lines.length > 0)
+        .sort((left, right) => {
+          const leftOrder = Number(left?.order || 100);
+          const rightOrder = Number(right?.order || 100);
+          if (leftOrder !== rightOrder) {
+            return leftOrder - rightOrder;
+          }
+
+          const leftTime = Date.parse(left?.updatedAt || '');
+          const rightTime = Date.parse(right?.updatedAt || '');
+          if (Number.isFinite(leftTime) && Number.isFinite(rightTime)) {
+            return rightTime - leftTime;
+          }
+
+          if (Number.isFinite(rightTime)) {
+            return 1;
+          }
+
+          if (Number.isFinite(leftTime)) {
+            return -1;
+          }
+
+          return 0;
+        }),
+    [runtimeDebugSummary?.entries],
+  );
   const socketEntry = useMemo(
     () => footerEntries.find(entry => entry?.key === 'socket') || null,
     [footerEntries],
@@ -145,27 +166,63 @@ const RuntimeInfoFooter = ({
     [allStores],
   );
   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 +256,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" />
@@ -238,5 +298,5 @@ const RuntimeInfoFooter = ({
     </View>
   );
 };
-
-export default RuntimeInfoFooter;
+
+export default RuntimeInfoFooter;

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;