@controleonline/ui-common 1.2.70 → 1.2.71

package/src/react/components/AppTypeSwitcher.js

@@ -0,0 +1,164 @@
+import React, {useMemo, useState} from 'react';
+import {
+  Modal,
+  Platform,
+  ScrollView,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import {
+  app_type,
+  app_type_base,
+  app_type_options,
+  clear_app_type,
+  normalize_app_type,
+  set_app_type,
+} from '@appType';
+import styles from './AppTypeSwitcher.styles';
+
+const reloadApp = () => {
+  if (typeof window !== 'undefined' && typeof window.location?.reload === 'function') {
+    window.location.reload();
+  }
+};
+
+function AppTypeOptionsModal({visible, currentAppType, onClose, onSelect}) {
+  const [query, setQuery] = useState('');
+
+  const filteredOptions = useMemo(() => {
+    const normalizedQuery = query.trim().toLowerCase();
+    if (!normalizedQuery) {
+      return app_type_options;
+    }
+
+    return app_type_options.filter(option =>
+      option.toLowerCase().includes(normalizedQuery),
+    );
+  }, [query]);
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Modal visible transparent animationType="fade" onRequestClose={onClose}>
+      <View style={styles.modalOverlay}>
+        <View style={styles.modalPanel}>
+          <View style={styles.modalHeader}>
+            <Text style={styles.modalTitle}>Selecionar tipo de app</Text>
+            <TouchableOpacity
+              accessibilityRole="button"
+              accessibilityLabel="Fechar seletor"
+              style={styles.closeButton}
+              onPress={onClose}
+            >
+              <Icon name="x" size={18} color="#334155" />
+            </TouchableOpacity>
+          </View>
+          <TextInput
+            style={styles.modalSearch}
+            value={query}
+            onChangeText={setQuery}
+            placeholder="Filtrar"
+            placeholderTextColor="#94A3B8"
+          />
+          <ScrollView contentContainerStyle={styles.optionList}>
+            {filteredOptions.map(option => {
+              const selected = option === currentAppType;
+
+              return (
+                <TouchableOpacity
+                  key={option}
+                  accessibilityRole="button"
+                  accessibilityLabel={option}
+                  style={[styles.optionRow, selected && styles.optionRowActive]}
+                  onPress={() => onSelect(option)}
+                >
+                  <Text style={[styles.optionText, selected && styles.optionTextActive]}>
+                    {option}
+                  </Text>
+                  {selected && <Text style={styles.optionHint}>Visão atual</Text>}
+                </TouchableOpacity>
+              );
+            })}
+          </ScrollView>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const AppTypeSwitcher = () => {
+  const buildAppType = normalize_app_type(app_type_base);
+  const currentAppType = normalize_app_type(app_type);
+  const [selectorOpen, setSelectorOpen] = useState(false);
+
+  if (Platform.OS !== 'web' || buildAppType !== 'ADMIN') {
+    return null;
+  }
+
+  const handleSelect = appType => {
+    const normalizedAppType = normalize_app_type(appType);
+    if (!normalizedAppType || normalizedAppType === currentAppType) {
+      setSelectorOpen(false);
+      return;
+    }
+
+    if (normalizedAppType === buildAppType) {
+      clear_app_type();
+    } else {
+      set_app_type(normalizedAppType);
+    }
+
+    setSelectorOpen(false);
+    reloadApp();
+  };
+
+  const handleReset = () => {
+    clear_app_type();
+    setSelectorOpen(false);
+    reloadApp();
+  };
+
+  return (
+    <>
+      <View style={styles.container}>
+        <Text style={styles.label}>Tipo de app</Text>
+        <TouchableOpacity
+          accessibilityRole="button"
+          accessibilityLabel="Selecionar tipo de app"
+          activeOpacity={0.82}
+          style={styles.button}
+          onPress={() => setSelectorOpen(true)}
+          >
+          <Text style={styles.buttonText}>{currentAppType}</Text>
+          <Icon name="chevron-down" size={16} color="#334155" />
+        </TouchableOpacity>
+
+        {currentAppType !== buildAppType && (
+          <TouchableOpacity
+            accessibilityRole="button"
+            accessibilityLabel="Voltar para ADMIN"
+            activeOpacity={0.82}
+            style={styles.resetButton}
+            onPress={handleReset}
+          >
+            <Text style={styles.resetText}>Voltar para ADMIN</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+
+      <AppTypeOptionsModal
+        visible={selectorOpen}
+        currentAppType={currentAppType}
+        onClose={() => setSelectorOpen(false)}
+        onSelect={handleSelect}
+      />
+    </>
+  );
+};
+
+export default AppTypeSwitcher;

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

@@ -0,0 +1,109 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    alignItems: 'flex-end',
+    gap: 6,
+  },
+  label: {
+    color: '#64748B',
+    fontSize: 11,
+    fontWeight: '800',
+    letterSpacing: 0.2,
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#FFFFFF',
+    borderColor: '#D8E0EA',
+    borderRadius: 999,
+    borderWidth: 1,
+    flexDirection: 'row',
+    gap: 8,
+    justifyContent: 'space-between',
+    minWidth: 164,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  buttonText: {
+    color: '#0F172A',
+    fontSize: 13,
+    fontWeight: '800',
+  },
+  resetButton: {
+    paddingHorizontal: 2,
+    paddingVertical: 2,
+  },
+  resetText: {
+    color: '#1D4ED8',
+    fontSize: 11,
+    fontWeight: '800',
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(15, 23, 42, 0.46)',
+    justifyContent: 'center',
+    padding: 16,
+  },
+  modalPanel: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 18,
+    maxHeight: '80%',
+    overflow: 'hidden',
+  },
+  modalHeader: {
+    alignItems: 'center',
+    borderBottomColor: '#E2E8F0',
+    borderBottomWidth: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+  },
+  modalTitle: {
+    color: '#0F172A',
+    fontSize: 16,
+    fontWeight: '800',
+  },
+  closeButton: {
+    alignItems: 'center',
+    borderRadius: 16,
+    height: 32,
+    justifyContent: 'center',
+    width: 32,
+  },
+  modalSearch: {
+    backgroundColor: '#F8FAFC',
+    borderBottomColor: '#E2E8F0',
+    borderBottomWidth: 1,
+    color: '#0F172A',
+    fontSize: 13,
+    fontWeight: '700',
+    minHeight: 42,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+  },
+  optionList: {
+    paddingVertical: 8,
+  },
+  optionRow: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  optionRowActive: {
+    backgroundColor: '#EFF6FF',
+  },
+  optionText: {
+    color: '#334155',
+    fontSize: 14,
+    fontWeight: '800',
+  },
+  optionTextActive: {
+    color: '#1D4ED8',
+  },
+  optionHint: {
+    color: '#64748B',
+    fontSize: 11,
+    fontWeight: '600',
+    marginTop: 2,
+  },
+});

package/src/react/components/BackgroundRuntimeBridge.js

@@ -1,6 +1,7 @@
 import React, {useEffect, useMemo, useRef} from 'react';
 import {NativeModules} from 'react-native';
-import {env as APP_ENV} from '@env';
+import {app_type} from '@appType';
+import { env as APP_ENV } from '@env';
 import {useStore} from '@store';
 import DeviceInfo from 'react-native-device-info';
 import {resolveAppDomain} from '@controleonline/ui-common/src/utils/appDomain';
@@ -61,7 +62,7 @@ const BackgroundRuntimeBridge = () => {
 
   const bundleId = safeTrim(DeviceInfo.getBundleId());
   const runtimeAppKey =
-    bundleId || safeTrim(APP_ENV.APP_TYPE).toUpperCase() || 'app';
+    bundleId || safeTrim(app_type).toUpperCase() || 'app';
   const runtimeDeviceId = normalizeDeviceId(runtimeDevice?.id);
   const runtimeDeviceType = normalizeDeviceType(
     runtimeDeviceConfig?.type ||
@@ -70,7 +71,7 @@ const BackgroundRuntimeBridge = () => {
   );
   const currentCompanyId = safeTrim(currentCompany?.id);
   const sessionToken = readSessionToken();
-  const isManagerRuntime = isManagerAppType(APP_ENV?.APP_TYPE);
+  const isManagerRuntime = isManagerAppType(app_type);
   const managerOrderNotificationPreferences =
     resolveManagerOrderNotificationPreferences(user);
   const userAlertSoundUrl = safeTrim(
@@ -162,7 +163,7 @@ const BackgroundRuntimeBridge = () => {
       companyAlias: safeTrim(currentCompany?.alias || currentCompany?.name),
       companyId: currentCompanyId,
       appDomain: safeTrim(resolveAppDomain(APP_ENV.DOMAIN)),
-      appType: safeTrim(APP_ENV.APP_TYPE).toUpperCase(),
+      appType: safeTrim(app_type).toUpperCase(),
       backgroundEnabled: true,
       deviceId: runtimeDeviceId,
       deviceType: runtimeDeviceType,

package/src/react/components/BottomNavigationBar.js

@@ -3,7 +3,7 @@ import {Pressable, Text, View} from 'react-native';
 import Icon from 'react-native-vector-icons/Feather';
 import {useTheme} from './DefaultProvider';
 import RuntimeInfoFooter from './RuntimeInfoFooter';
-import {resolveMenuRouteParams} from '@controleonline/ui-layout/src/react/utils/menuNavigation';
+import {resolveMenuRouteParams} from '../utils/menuNavigation';
 import createStyles from './BottomNavigationBar.styles';
 
 const BottomNavigationBar = ({
@@ -13,40 +13,80 @@ const BottomNavigationBar = ({
   disabled = false,
   colors = {},
   testID = 'bottom-navigation',
+  useModernWebChromeProps = false,
 }) => {
   const theme = useTheme?.() || {};
   const runtimeFooter = theme?.runtimeFooter || null;
   const registerBottomNavigation =
     theme?.bottomChrome?.registerBottomNavigation || null;
-  const primaryColor = colors.primary || '#1B5587';
-  const dockBackground =
-    colors['toolbar-background'] || colors.background || '#F8FBFF';
-  const borderColor = colors['toolbar-border'] || colors.border || '#D1DDE9';
-  const inactiveText =
-    colors['toolbar-text-muted'] || colors.textSecondary || '#64748B';
-  const activeBg = `${primaryColor}1A`;
-  const activeBorder = `${primaryColor}55`;
+  const activeBackground = colors.navigationActiveBackground;
+  const activeBorder = colors.navigationActiveBorder;
+  const activeIcon = colors.navigationActiveIcon;
+  const activeText = colors.navigationActiveText;
+  const dockBackground = colors.navigationBackground;
+  const dockBorder = colors.navigationBorder;
+  const dockShadow = colors.navigationShadow;
+  const inactiveIcon = colors.navigationIcon;
+  const inactiveText = colors.navigationText;
 
   const styles = useMemo(
     () =>
       createStyles({
-        primaryColor,
+        activeBackground,
         dockBackground,
-        borderColor,
-        inactiveText,
-        activeBg,
+        dockBorder,
+        dockShadow,
         activeBorder,
+        useModernWebChromeProps,
       }),
     [
-      activeBg,
+      activeBackground,
       activeBorder,
-      borderColor,
       dockBackground,
-      inactiveText,
-      primaryColor,
+      dockBorder,
+      dockShadow,
+      useModernWebChromeProps,
     ],
   );
 
+  const resolveItemColors = ({isActive, isDisabled}) => {
+    if (isActive) {
+      return {
+        iconColor: activeIcon,
+        textColor: activeText,
+      };
+    }
+
+    if (isDisabled) {
+      return {
+        iconColor: colors.navigationDisabledIcon,
+        textColor: colors.navigationDisabledText,
+      };
+    }
+
+    return {
+      iconColor: inactiveIcon,
+      textColor: inactiveText,
+    };
+  };
+
+  const resolveItemStateStyles = ({isActive, isDisabled}) => [
+    styles.item,
+    isActive && styles.itemActive,
+    isDisabled && styles.itemDisabled,
+    isDisabled && {
+      backgroundColor: colors.navigationDisabledBackground,
+      borderColor: colors.navigationDisabledBorder,
+    },
+  ];
+
+  const resolvePressedStyles = ({pressed, isDisabled}) =>
+    pressed && !isDisabled
+      ? [
+          styles.itemPressed,
+        ]
+      : [];
+
   useLayoutEffect(() => {
     if (typeof registerBottomNavigation !== 'function') {
       return undefined;
@@ -69,15 +109,32 @@ const BottomNavigationBar = ({
     }
   };
 
+  const hostProps = useModernWebChromeProps
+    ? {}
+    : {pointerEvents: 'box-none'};
+  const hostStyle = useModernWebChromeProps
+    ? [styles.host, styles.hostPointerEventsBoxNone]
+    : styles.host;
+  const footerProps = {
+    appVersion: runtimeFooter?.appVersion,
+    colors: runtimeFooter?.colors || {},
+    defaultCompany: runtimeFooter?.defaultCompany,
+    device: runtimeFooter?.device,
+    useModernWebChromeProps,
+  };
+
   return (
-    <View pointerEvents="box-none" style={styles.host}>
+    <View {...hostProps} style={hostStyle}>
       <View style={styles.stack}>
         <View style={styles.dock} testID={testID}>
           {routeItems.map(item => {
             const isActive = effectiveActiveRoute === item.route;
             const isDisabled = disabled || item.disabled;
             const iconSize = item.iconSize || 18;
-            const iconColor = isActive ? primaryColor : inactiveText;
+            const {iconColor, textColor} = resolveItemColors({
+              isActive,
+              isDisabled,
+            });
 
             return (
               <Pressable
@@ -86,17 +143,20 @@ const BottomNavigationBar = ({
                 disabled={isDisabled}
                 onPress={() => navigateTo(item)}
                 style={({pressed}) => [
-                  styles.item,
-                  isActive && styles.itemActive,
-                  pressed && !isDisabled && styles.itemPressed,
-                  isDisabled && styles.itemDisabled,
+                  ...resolveItemStateStyles({isActive, isDisabled}),
+                  ...resolvePressedStyles({pressed, isDisabled}),
                 ]}>
-                <View style={[styles.iconWrap, isActive && styles.iconWrapActive]}>
+                <View style={styles.iconWrap}>
                   <Icon color={iconColor} name={item.icon} size={iconSize} />
                 </View>
                 <Text
                   numberOfLines={1}
-                  style={[styles.itemLabel, isActive && styles.itemLabelActive]}>
+                  style={[
+                    styles.itemLabel,
+                    {
+                      color: textColor,
+                    },
+                  ]}>
                   {item.label}
                 </Text>
               </Pressable>
@@ -105,12 +165,7 @@ const BottomNavigationBar = ({
         </View>
 
         {runtimeFooter && (
-          <RuntimeInfoFooter
-            appVersion={runtimeFooter.appVersion}
-            colors={runtimeFooter.colors || colors}
-            defaultCompany={runtimeFooter.defaultCompany}
-            device={runtimeFooter.device}
-          />
+          <RuntimeInfoFooter {...footerProps} />
         )}
       </View>
     </View>