@controleonline/ui-common 1.2.70

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

@@ -0,0 +1,56 @@
+import { StyleSheet } from 'react-native'
+
+const styles = StyleSheet.create({
+  shell: {
+    width: '100%',
+  },
+  container: {
+    minHeight: 22,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 4,
+  },
+  containerExpanded: {
+    paddingVertical: 6,
+  },
+  primaryRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  statusDotWrap: {
+    minWidth: 22,
+    marginRight: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  loadingWrap: {
+    minWidth: 22,
+    marginLeft: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  statusDot: {
+    width: 7,
+    height: 7,
+    borderRadius: 999,
+    flexShrink: 0,
+  },
+  primaryText: {
+    flex: 1,
+    fontSize: 10,
+    lineHeight: 12,
+    textAlign: 'center',
+    fontWeight: '500',
+  },
+  debugText: {
+    fontSize: 9,
+    lineHeight: 11,
+    textAlign: 'center',
+    fontWeight: '500',
+    marginTop: 2,
+  },
+})
+
+export default styles

package/src/react/components/SystemErrorToast.js

@@ -0,0 +1,29 @@
+import React, {useMemo} from 'react';
+import {Text, View} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+
+import styles from './SystemErrorToast.styles';
+import {resolveSystemErrorMessage} from '@controleonline/ui-common/src/react/utils/systemErrorMessage';
+
+const SystemErrorToast = ({error}) => {
+  const message = useMemo(() => resolveSystemErrorMessage(error), [error]);
+
+  if (!message) {
+    return null;
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <View style={styles.iconWrap}>
+          <Icon name="error-outline" size={16} color="#DC2626" />
+        </View>
+      </View>
+      <View style={styles.copyWrap}>
+        <Text style={styles.text}>{message}</Text>
+      </View>
+    </View>
+  );
+};
+
+export default SystemErrorToast;

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

@@ -0,0 +1,38 @@
+import {StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 12,
+    paddingVertical: 2,
+  },
+  header: {
+    paddingTop: 1,
+  },
+  iconWrap: {
+    width: 26,
+    height: 26,
+    borderRadius: 13,
+    backgroundColor: '#FEE2E2',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    borderWidth: 1,
+    borderColor: '#FCA5A5',
+  },
+  copyWrap: {
+    flex: 1,
+    minWidth: 0,
+    paddingTop: 2,
+  },
+  text: {
+    color: '#111827',
+    fontSize: 13,
+    fontWeight: '700',
+    lineHeight: 20,
+  },
+});
+
+export default styles;

package/src/react/components/TouchFeedbackProvider.js

@@ -0,0 +1,65 @@
+import React, { createContext, useContext, useEffect, useState } from 'react'
+import { Vibration, Platform, TouchableOpacity, Pressable } from 'react-native'
+import { Audio } from 'expo-audio'
+
+const TouchFeedbackContext = createContext({
+  soundEnabled: true,
+  vibrationEnabled: true,
+})
+
+export function useTouchFeedback() {
+  return useContext(TouchFeedbackContext)
+}
+
+function withFeedback(Component) {
+  return function Wrapped(props) {
+    const { soundEnabled, vibrationEnabled } = useTouchFeedback()
+
+    const handlePressIn = async e => {
+      if (vibrationEnabled && Platform.OS !== 'web') Vibration.vibrate(10)
+
+      if (soundEnabled) {
+        try {
+          const { sound } = await Audio.Sound.createAsync(
+            require('../assets/tap.mp3')
+          )
+          await sound.playAsync()
+          sound.unloadAsync()
+        } catch (err) {
+          console.warn('Erro ao tocar som', err)
+        }
+      }
+
+      props.onPressIn?.(e)
+    }
+
+    return <Component {...props} onPressIn={handlePressIn} />
+  }
+}
+
+if (!global.__touchFeedbackPatched) {
+  global.TouchableOpacity = withFeedback(TouchableOpacity)
+  global.Pressable = withFeedback(Pressable)
+  global.__touchFeedbackPatched = true
+}
+
+export default function TouchFeedbackProvider({ children }) {
+  const [soundEnabled, setSoundEnabled] = useState(true)
+  const [vibrationEnabled, setVibrationEnabled] = useState(true)
+
+  useEffect(() => {
+    try {
+      const sound = localStorage.getItem('sound')
+      if (sound !== null) setSoundEnabled(sound === 'true')
+
+      const vibration = localStorage.getItem('vibration')
+      if (vibration !== null) setVibrationEnabled(vibration === 'true')
+    } catch {}
+  }, [])
+
+  return (
+    <TouchFeedbackContext.Provider value={{ soundEnabled, vibrationEnabled }}>
+      {children}
+    </TouchFeedbackContext.Provider>
+  )
+}

package/src/react/components/UnifiedPaymentBar.js

@@ -0,0 +1,155 @@
+import React, {useMemo} from 'react';
+import {ActivityIndicator, Text, TouchableOpacity, View} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+
+import Formatter from '@controleonline/ui-common/src/utils/formatter';
+
+import createStyles, {resolveActionPalette} from './UnifiedPaymentBar.styles';
+
+const getStatusPresentation = (theme, totalAmount, paidAmount, pendingAmount) => {
+  if (pendingAmount <= 0.009 && totalAmount > 0) {
+    return {
+      label: 'Pago',
+      color: theme?.success || '#16A34A',
+      icon: 'check-circle',
+    };
+  }
+
+  if (paidAmount > 0.009) {
+    return {
+      label: 'Saldo pendente',
+      color: theme?.warning || '#D97706',
+      icon: 'schedule',
+    };
+  }
+
+  return {
+    label: 'Aguardando pagamento',
+    color: theme?.primary || '#1D4ED8',
+    icon: 'payments',
+  };
+};
+
+const withAlpha = (hex, alpha) => {
+  const normalized = String(hex || '').trim();
+  if (
+    !normalized.startsWith('#') ||
+    (normalized.length !== 7 && normalized.length !== 4)
+  ) {
+    return hex;
+  }
+
+  if (normalized.length === 4) {
+    const [r, g, b] = normalized.slice(1).split('');
+    return `#${r}${r}${g}${g}${b}${b}${alpha}`;
+  }
+
+  return `${normalized}${alpha}`;
+};
+
+export default function UnifiedPaymentBar({
+  actions = [],
+  bottomOffset = 0,
+  paidAmount = 0,
+  pendingAmount = 0,
+  theme,
+  title = '',
+  totalAmount = 0,
+}) {
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  const resolvedTotalAmount = Number(totalAmount || 0);
+  const resolvedPaidAmount = Number(paidAmount || 0);
+  const resolvedPendingAmount = Math.max(Number(pendingAmount || 0), 0);
+  const status = getStatusPresentation(
+    theme,
+    resolvedTotalAmount,
+    resolvedPaidAmount,
+    resolvedPendingAmount,
+  );
+  const visibleActions = Array.isArray(actions) ? actions.filter(Boolean) : [];
+
+  return (
+    <View style={[styles.wrapper, {bottom: bottomOffset + 12}]}>
+      <View style={styles.card}>
+        <View style={[styles.headerRow, !title && styles.headerRowCompact]}>
+          {title ? <Text style={styles.title}>{title}</Text> : null}
+          <View
+            style={[
+              styles.statusBadge,
+              {
+                borderColor: status.color,
+                backgroundColor: withAlpha(status.color, '18'),
+              },
+            ]}>
+            <Icon color={status.color} name={status.icon} size={14} />
+            <Text style={[styles.statusText, {color: status.color}]}>
+              {status.label}
+            </Text>
+          </View>
+        </View>
+
+        <View style={styles.metricsRow}>
+          <View style={[styles.metricCard, styles.metricCardSingle]}>
+            <Text style={styles.metricLabel}>Pendente</Text>
+            <Text style={[styles.metricValue, styles.metricValueStrong]}>
+              {Formatter.formatMoney(resolvedPendingAmount)}
+            </Text>
+          </View>
+        </View>
+
+        {visibleActions.length > 0 && (
+          <View
+            style={[
+              styles.actionsRow,
+              visibleActions.length === 1 && styles.actionsRowSingle,
+            ]}>
+            {visibleActions.map(action => {
+              const key =
+                action?.key ||
+                `${action?.label || 'action'}-${action?.variant || 'primary'}`;
+              const disabled = !!action?.disabled;
+              const palette = resolveActionPalette(
+                theme,
+                action?.variant || 'primary',
+                disabled,
+              );
+
+              return (
+                <TouchableOpacity
+                  key={key}
+                  disabled={disabled}
+                  onPress={action?.onPress}
+                  style={[
+                    styles.actionButton,
+                    visibleActions.length === 1 && styles.actionButtonSingle,
+                    {
+                      backgroundColor: palette.backgroundColor,
+                      borderColor: palette.borderColor,
+                    },
+                  ]}>
+                  {action?.loading ? (
+                    <ActivityIndicator color={palette.textColor} />
+                  ) : (
+                    <>
+                      {action?.icon ? (
+                        <Icon
+                          color={palette.textColor}
+                          name={action.icon}
+                          size={18}
+                        />
+                      ) : null}
+                      <Text
+                        style={[styles.actionLabel, {color: palette.textColor}]}>
+                        {action?.label}
+                      </Text>
+                    </>
+                  )}
+                </TouchableOpacity>
+              );
+            })}
+          </View>
+        )}
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,174 @@
+import {StyleSheet} from 'react-native';
+
+const withAlpha = (hex, alpha) => {
+  const normalized = String(hex || '').trim();
+  if (
+    !normalized.startsWith('#') ||
+    (normalized.length !== 7 && normalized.length !== 4)
+  ) {
+    return hex;
+  }
+
+  if (normalized.length === 4) {
+    const [r, g, b] = normalized.slice(1).split('');
+    return `#${r}${r}${g}${g}${b}${b}${alpha}`;
+  }
+
+  return `${normalized}${alpha}`;
+};
+
+export const resolveActionPalette = (
+  theme,
+  variant = 'primary',
+  disabled = false,
+) => {
+  const primaryColor = theme?.primary || '#1D4ED8';
+  const successColor = theme?.success || '#16A34A';
+  const surfaceColor = theme?.surface || '#FFFFFF';
+  const borderColor = theme?.cardBorder || '#D6DEE8';
+  const mutedColor = theme?.muted || '#64748B';
+
+  const palettes = {
+    primary: {
+      backgroundColor: primaryColor,
+      borderColor: primaryColor,
+      textColor: theme?.onPrimary || '#FFFFFF',
+    },
+    success: {
+      backgroundColor: successColor,
+      borderColor: successColor,
+      textColor: '#FFFFFF',
+    },
+    outline: {
+      backgroundColor: surfaceColor,
+      borderColor,
+      textColor: theme?.text || '#0F172A',
+    },
+  };
+
+  const palette = palettes[variant] || palettes.primary;
+
+  if (!disabled) {
+    return palette;
+  }
+
+  return {
+    backgroundColor: withAlpha(palette.backgroundColor, '66'),
+    borderColor: withAlpha(palette.borderColor, '66'),
+    textColor: withAlpha(palette.textColor || mutedColor, 'B3'),
+  };
+};
+
+const createStyles = theme =>
+  StyleSheet.create({
+    wrapper: {
+      position: 'absolute',
+      left: 12,
+      right: 12,
+      zIndex: 60,
+    },
+    card: {
+      borderRadius: 18,
+      borderWidth: 1,
+      borderColor: theme?.cardBorder || '#D6DEE8',
+      backgroundColor: theme?.surface || '#FFFFFF',
+      paddingHorizontal: 14,
+      paddingVertical: 12,
+      shadowColor: '#0F172A',
+      shadowOpacity: 0.16,
+      shadowRadius: 10,
+      shadowOffset: {width: 0, height: 4},
+      elevation: 8,
+    },
+    headerRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: 10,
+    },
+    headerRowCompact: {
+      justifyContent: 'flex-end',
+    },
+    title: {
+      color: theme?.text || '#0F172A',
+      fontSize: 16,
+      fontWeight: '800',
+    },
+    statusBadge: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 6,
+      borderRadius: 999,
+      borderWidth: 1,
+      paddingHorizontal: 10,
+      paddingVertical: 6,
+    },
+    statusText: {
+      fontSize: 12,
+      fontWeight: '800',
+    },
+    metricsRow: {
+      marginTop: 12,
+      width: '100%',
+    },
+    metricCard: {
+      flex: 1,
+      borderRadius: 14,
+      borderWidth: 1,
+      borderColor: theme?.cardBorder || '#D6DEE8',
+      backgroundColor: theme?.background || '#F8FAFC',
+      paddingHorizontal: 10,
+      paddingVertical: 9,
+    },
+    metricCardSingle: {
+      flex: 1,
+      alignSelf: 'stretch',
+    },
+    metricLabel: {
+      color: theme?.muted || '#64748B',
+      fontSize: 11,
+      fontWeight: '700',
+      textTransform: 'uppercase',
+    },
+    metricValue: {
+      marginTop: 4,
+      color: theme?.text || '#0F172A',
+      fontSize: 14,
+      fontWeight: '800',
+    },
+    metricValueStrong: {
+      color: theme?.primary || '#1D4ED8',
+    },
+    actionsRow: {
+      marginTop: 12,
+      flexDirection: 'row',
+      gap: 10,
+    },
+    actionsRowSingle: {
+      flexDirection: 'column',
+      alignItems: 'stretch',
+    },
+    actionButton: {
+      flex: 1,
+      flexBasis: 0,
+      minHeight: 48,
+      borderRadius: 14,
+      borderWidth: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'row',
+      gap: 8,
+      paddingHorizontal: 12,
+    },
+    actionButtonSingle: {
+      flex: 0,
+      width: '100%',
+      alignSelf: 'stretch',
+    },
+    actionLabel: {
+      fontSize: 14,
+      fontWeight: '800',
+    },
+  });
+
+export default createStyles;