@controleonline/ui-common 1.2.70 → 1.2.75

package/src/react/components/AnimatedModal.js

@@ -0,0 +1,171 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {
+  Animated,
+  Dimensions,
+  Keyboard,
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  StyleSheet,
+  Text,
+} from 'react-native';
+import {GestureHandlerRootView} from 'react-native-gesture-handler';
+import {toast, Toasts} from '@backpackapp-io/react-native-toast';
+import styles from './AnimatedModal.styles';
+import {
+  TOAST_EXTRA_INSETS,
+  TOAST_MODAL_COUNT_KEY,
+  TOAST_PROVIDER_KEYS,
+} from './toastConfig';
+
+const {height: SCREEN_HEIGHT} = Dimensions.get('window');
+
+const incrementModalToastDepth = () => {
+  const currentDepth = Number(global?.[TOAST_MODAL_COUNT_KEY] || 0);
+  global[TOAST_MODAL_COUNT_KEY] = currentDepth + 1;
+};
+
+const decrementModalToastDepth = () => {
+  const currentDepth = Number(global?.[TOAST_MODAL_COUNT_KEY] || 0);
+  global[TOAST_MODAL_COUNT_KEY] = Math.max(0, currentDepth - 1);
+};
+
+/**
+ * Modal com overlay aparecendo na hora e apenas o conteúdo subindo de baixo.
+ */
+export default function AnimatedModal({
+  visible,
+  onRequestClose,
+  children,
+  style,
+}) {
+  const [showing, setShowing] = useState(visible);
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  const overlayOpacity = useRef(new Animated.Value(0)).current;
+  const slideY = useRef(new Animated.Value(SCREEN_HEIGHT)).current;
+
+  useEffect(() => {
+    if (visible) {
+      setShowing(true);
+      slideY.setValue(SCREEN_HEIGHT);
+      overlayOpacity.setValue(0);
+
+      Animated.parallel([
+        Animated.spring(slideY, {
+          toValue: 0,
+          damping: 24,
+          stiffness: 300,
+          useNativeDriver: true,
+        }),
+        Animated.timing(overlayOpacity, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    }
+  }, [visible, overlayOpacity, slideY]);
+
+  useEffect(() => {
+    if (!visible && showing) {
+      Animated.parallel([
+        Animated.timing(overlayOpacity, {
+          toValue: 0,
+          duration: 150,
+          useNativeDriver: true,
+        }),
+        Animated.timing(slideY, {
+          toValue: SCREEN_HEIGHT,
+          duration: 200,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        setShowing(false);
+        setKeyboardHeight(0);
+        onRequestClose?.();
+      });
+    }
+  }, [visible, showing, overlayOpacity, slideY, onRequestClose]);
+
+  useEffect(() => {
+    if (Platform.OS !== 'android') {
+      return undefined;
+    }
+
+    const showSub = Keyboard.addListener('keyboardDidShow', event => {
+      setKeyboardHeight(event?.endCoordinates?.height || 0);
+    });
+    const hideSub = Keyboard.addListener('keyboardDidHide', () => {
+      setKeyboardHeight(0);
+    });
+
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!visible) {
+      setKeyboardHeight(0);
+    }
+  }, [visible]);
+
+  useEffect(() => {
+    if (!showing) {
+      return undefined;
+    }
+
+    incrementModalToastDepth();
+    return () => {
+      decrementModalToastDepth();
+    };
+  }, [showing]);
+
+  const overlayStyle = [
+    styles.overlay,
+    style,
+    Platform.OS === 'android' ? {paddingBottom: keyboardHeight} : null,
+  ];
+
+  const normalizedChildren = React.Children.toArray(children).map(child => {
+    if (typeof child === 'string' || typeof child === 'number') {
+      const text = String(child).trim();
+      if (!text || text === '.') return null;
+      return <Text>{text}</Text>;
+    }
+    return child;
+  });
+
+  return (
+    <Modal
+      visible={showing}
+      animationType="none"
+      transparent
+      statusBarTranslucent
+      onRequestClose={onRequestClose}>
+      <GestureHandlerRootView style={styles.gestureRoot}>
+        <KeyboardAvoidingView
+          behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+          style={overlayStyle}>
+          <Animated.View
+            style={[
+              StyleSheet.absoluteFillObject,
+              styles.overlayBg,
+              {opacity: overlayOpacity},
+            ]}
+          />
+          <Animated.View
+            style={[styles.content, {transform: [{translateY: slideY}]}]}>
+            {normalizedChildren}
+          </Animated.View>
+          <Toasts
+            providerKey={TOAST_PROVIDER_KEYS.MODAL}
+            extraInsets={TOAST_EXTRA_INSETS}
+            onToastPress={currentToast => toast.dismiss(currentToast.id)}
+          />
+        </KeyboardAvoidingView>
+      </GestureHandlerRootView>
+    </Modal>
+  );
+}

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

@@ -0,0 +1,21 @@
+import {StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  gestureRoot: {
+    flex: 1,
+  },
+  overlay: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  overlayBg: {
+    backgroundColor: 'rgba(15, 23, 42, 0.4)',
+  },
+  content: {
+    width: '100%',
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+});
+
+export default styles;

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,