@controleonline/ui-common 1.2.70 → 1.2.71

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/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/config/deviceConfigBootstrap.js

@@ -1,7 +1,11 @@
-import {
-  appendScreenMetrics,
-  hasScreenMetricsChanges,
-} from '@controleonline/ui-common/src/react/utils/screenMetrics';
+import {
+  appendScreenMetrics,
+  hasScreenMetricsChanges,
+} from '@controleonline/ui-common/src/react/utils/screenMetrics';
+import {
+  normalizeBooleanConfig,
+  SHOP_LOYALTY_COUPONS_ENABLED_CONFIG_KEY,
+} from '@controleonline/ui-common/src/react/utils/shopConfig';
 
 export const CIELO_DEVICES = ['quantum', 'ingenico', 'positivo'];
 export const SUPPORTED_POS_GATEWAYS = ['cielo', 'infinite-pay'];
@@ -38,9 +42,10 @@ export const POS_OPERATION_MODE_WAITER = 'waiter';
 export const POS_OPERATION_MODE_TOTEM = 'totem';
 export const POS_OPERATION_MODE_SINGLE_ITEM = 'single-item';
 export const POS_OPERATION_MODE_CASHIER = 'cashier';
-export const POS_CHECK_ORDER_TYPE_NONE = 'none';
-export const POS_CHECK_ORDER_TYPE_TAB = 'tab';
-export const POS_CHECK_ORDER_TYPE_TABLE = 'table';
+export const POS_CHECK_ORDER_TYPE_NONE = 'none';
+export const POS_CHECK_ORDER_TYPE_TAB = 'tab';
+export const POS_CHECK_ORDER_TYPE_TABLE = 'table';
+export const POS_CHECK_ORDER_TYPE_STAMP = 'stamp';
 export const POS_CHECK_ORDER_MANAGEMENT_MODE_MANAGE = 'manage';
 export const POS_CHECK_ORDER_MANAGEMENT_MODE_EXISTING_ONLY = 'existing-only';
 export const POS_OPERATION_MODE_DEFAULT = POS_OPERATION_MODE_CASHIER;
@@ -237,31 +242,65 @@ export const normalizePosCheckOrderType = value => {
     .replace(/[\u0300-\u036f]/g, '')
     .replace(/[\s_]/g, '-');
 
-  if (
-    [
-      POS_CHECK_ORDER_TYPE_TAB,
-      'tab',
-    ].includes(normalizedValue)
+  if (
+    [
+      POS_CHECK_ORDER_TYPE_TAB,
+      'tab',
+    ].includes(normalizedValue)
   ) {
     return POS_CHECK_ORDER_TYPE_TAB;
   }
 
-  if (
-    [
-      POS_CHECK_ORDER_TYPE_TABLE,
-      'table',
-    ].includes(normalizedValue)
-  ) {
-    return POS_CHECK_ORDER_TYPE_TABLE;
-  }
-
-  return POS_CHECK_ORDER_TYPE_NONE;
-};
+  if (
+    [
+      POS_CHECK_ORDER_TYPE_TABLE,
+      'table',
+    ].includes(normalizedValue)
+  ) {
+    return POS_CHECK_ORDER_TYPE_TABLE;
+  }
+
+  if (
+    [
+      POS_CHECK_ORDER_TYPE_STAMP,
+      'stamp',
+      'carimbo',
+    ].includes(normalizedValue)
+  ) {
+    return POS_CHECK_ORDER_TYPE_STAMP;
+  }
+
+  return POS_CHECK_ORDER_TYPE_NONE;
+};
 
-export const resolvePosCheckOrderType = configs =>
-  normalizePosCheckOrderType(
-    parseConfigsObject(configs)?.[POS_CHECK_ORDER_TYPE_CONFIG_KEY],
-  );
+export const resolvePosCheckOrderType = configs =>
+  normalizePosCheckOrderType(
+    parseConfigsObject(configs)?.[POS_CHECK_ORDER_TYPE_CONFIG_KEY],
+  );
+
+export const resolvePosCheckOrderTypeForShop = (
+  deviceConfigs,
+  shopConfigs,
+) => {
+  const resolvedType = resolvePosCheckOrderType(deviceConfigs);
+  const parsedShopConfigs = parseConfigsObject(shopConfigs);
+  const hasLoyaltyCouponsEnabledKey = Object.prototype.hasOwnProperty.call(
+    parsedShopConfigs,
+    SHOP_LOYALTY_COUPONS_ENABLED_CONFIG_KEY,
+  );
+
+  if (
+    hasLoyaltyCouponsEnabledKey &&
+    resolvedType === POS_CHECK_ORDER_TYPE_STAMP &&
+    !normalizeBooleanConfig(
+      parsedShopConfigs?.[SHOP_LOYALTY_COUPONS_ENABLED_CONFIG_KEY],
+    )
+  ) {
+    return POS_CHECK_ORDER_TYPE_NONE;
+  }
+
+  return resolvedType;
+};
 
 export const normalizePosCheckOrderManagementMode = value => {
   const normalizedValue = String(value || '')

package/src/react/css/orders.js

@@ -0,0 +1,72 @@
+import {StyleSheet} from 'react-native';
+import {useStore} from '@store';
+import globalStyles from '../styles/global';
+
+const css = () => {
+  const themeStore = useStore('theme');
+  const getters = themeStore.getters;
+  const {colors} = getters;
+
+  const styles = StyleSheet.create({
+    Settings: {
+      container: {
+        flex: 1,
+        backgroundColor: '#fff',
+      },
+      scrollContent: {
+        paddingHorizontal: 20,
+        paddingBottom: 20,
+      },
+      mainContainer: {
+        flex: 1,
+      },
+      row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 5,
+        paddingVertical: 5,
+      },
+      label: {
+        flex: 0.5,
+        fontSize: 14,
+        color: '#333',
+      },
+      value: {
+        flex: 0.5,
+        fontSize: 14,
+        color: '#000',
+      },
+      walletRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 5,
+        paddingVertical: 5,
+      },
+      walletValueContainer: {
+        flex: 0.5,
+        flexDirection: 'row',
+        alignItems: 'center',
+      },
+      walletValue: {
+        fontSize: 14,
+        color: '#000',
+        marginRight: 5,
+      },
+      picker: {
+        height: 50,
+        fontSize: 14,
+        color: '#000',
+        backgroundColor: '#f0f0f0',
+        borderRadius: 5,
+        marginTop: 5,
+      },
+    },
+    primary: {
+      color: colors.primary,
+    },
+  });
+
+  return {styles, globalStyles: globalStyles()};
+};
+
+export default css;