@eohjsc/react-native-smart-city 0.3.56 → 0.3.58

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.3.56",
+  "version": "0.3.58",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -65,8 +65,6 @@
   "licenseFilename": "LICENSE",
   "peerDependencies": {
     "@react-native-community/clipboard": "*",
-    "lottie-ios": "*",
-    "lottie-react-native": "*",
     "react": "*",
     "react-native": "*"
   },
@@ -138,6 +136,7 @@
     "i18n-js": "^3.7.1",
     "i18next": "^20.1.0",
     "lodash": "^4.17.19",
+    "lottie-react-native": "4.0.3",
     "moment": "^2.27.0",
     "moment-timezone": "^0.5.32",
     "numeral": "^2.0.6",
@@ -198,7 +197,7 @@
     "react-native-svg": "^12.1.0",
     "react-native-toast-message": "^2.1.1",
     "react-native-udp": "^4.1.3",
-    "react-native-unimodules": "^0.11.0",
+    "react-native-unimodules": "0.14.8",
     "react-native-version-check": "^3.4.2",
     "react-native-vlc-media-player": "^1.0.41",
     "react-native-webview": "11.17.2",

package/src/commons/ActionGroup/ColorPickerTemplate.js

@@ -13,7 +13,7 @@ import { SCContext } from '../../context';
 import { Action } from '../../context/actionType';
 import { DEVICE_TYPE } from '../../configs/Constants';
 
-const WheelColorPicker = ({ color, onChangeColorComplete, onStart }) => {
+export const WheelColorPicker = ({ color, onChangeColorComplete, onStart }) => {
   const regex = /^#([0-9a-f]{3}){1,2}$/i;
   const isCheckHex = regex.test(color);
   // check crash if valueColor value wrong

package/src/commons/ActionGroup/OnOffSmartLock/PasscodeList/__test__/index.test.js

@@ -6,6 +6,7 @@ import { AccessibilityLabel } from '../../../../../configs/Constants';
 import { SCProvider } from '../../../../../context';
 import PasscodeList from '../index';
 import { TouchableOpacity } from 'react-native';
+import Routes from '../../../../../utils/Route';
 
 const mockNavigate = jest.fn();
 jest.mock('@react-navigation/native', () => {
@@ -43,5 +44,15 @@ describe('Test SetupGeneratePasscode', () => {
     );
 
     expect(passcode_list).toHaveLength(3);
+
+    await act(async () => {
+      await passcode_list[0].props.onPress();
+    });
+    expect(mockNavigate).toBeCalledWith(Routes.SmartLockStack, {
+      screen: Routes.ItemPasscode,
+      params: {
+        item: { code: 123361, name: 'Do Loi' },
+      },
+    });
   });
 });

package/src/commons/ActionGroup/SmartTiviActionTemplate/SmartTiviActionTemplate.js

@@ -70,8 +70,6 @@ const SmartTiviActionTemplate = memo(
           case SMART_TIVI_BUTTON.BACK_BUTTON:
           case SMART_TIVI_BUTTON.CHANNEL_BUTTON:
             return notImplemented(t);
-          default:
-            return <></>;
         }
       },
       [t]
@@ -86,8 +84,6 @@ const SmartTiviActionTemplate = memo(
           return <Netflix style={styles.iconChannel} />;
         case 'spotify':
           return <Spotify style={styles.iconChannel} />;
-        default:
-          return <></>;
       }
     }, []);
     return (

package/src/commons/ActionGroup/SmartTiviActionTemplate/__test__/RectangleButton.test.js

@@ -111,4 +111,17 @@ describe('Test RectangleButton', () => {
       RectangleButtonDown.props.onPress();
     });
   });
+
+  it('render type not handle', async () => {
+    type = 'not-handle';
+    const mockOnPress = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        wrapComponent(type, mockOnPress, mockOnPress, mockOnPress)
+      );
+    });
+    const instance = wrapper.root;
+    const touches = instance.findAllByType(TouchableOpacity);
+    expect(touches).toHaveLength(0);
+  });
 });

package/src/commons/ActionGroup/__test__/ColorPickerTemplate.test.js

@@ -2,10 +2,22 @@ import { watchMultiConfigs } from '../../../iot/Monitor';
 import React from 'react';
 import { act, create } from 'react-test-renderer';
 import ColorPickerTemplate from '../ColorPickerTemplate';
+import { WheelColorPicker } from '../ColorPickerTemplate';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import { useConfigGlobalState } from '../../../iot/states';
 import ColorPicker from 'react-native-wheel-color-picker';
+import { DEVICE_TYPE } from '../../../configs/Constants';
+
+const mockSetAction = jest.fn();
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    useContext: () => ({
+      setAction: mockSetAction,
+    }),
+  };
+});
 
 jest.mock('../../../iot/Monitor');
 const mockDoAction = jest.fn();
@@ -46,6 +58,7 @@ describe('Test ColorPickerTemplate', () => {
       },
       title: '',
     };
+    mockSetAction.mockClear();
   });
 
   it('render template ColorPickerTemplate', async () => {
@@ -58,10 +71,50 @@ describe('Test ColorPickerTemplate', () => {
       wrapper = await create(wrapComponent(actionGroup, mockDoAction, sensor));
     });
     const instance = wrapper.root;
-    const picker = instance.findAllByType(ColorPicker);
-    expect(picker).toHaveLength(1);
+    const pickers = instance.findAllByType(ColorPicker);
+    expect(pickers).toHaveLength(1);
+    expect(pickers[0].props.color).toEqual('#ffffff');
+    await act(async () => {
+      await pickers[0].props.onColorChangeComplete();
+    });
+  });
+
+  it('render template ColorPickerTemplate config value not null', async () => {
+    useConfigGlobalState.mockImplementation(() => [
+      {
+        5: {
+          value: 3093151,
+        },
+      },
+      jest.fn(),
+    ]);
+    const sensor = {
+      is_managed_by_backend: true,
+      name: 'Sensor',
+      device_type: DEVICE_TYPE.LG_THINQ,
+    };
+    await act(async () => {
+      wrapper = await create(wrapComponent(actionGroup, mockDoAction, sensor));
+    });
+    const instance = wrapper.root;
+    const pickers = instance.findAllByType(ColorPicker);
+    expect(pickers[0].props.color).toEqual(`#${3093151?.toString(16)}`);
+  });
+
+  it('test WheelColorPicker onStartPick set global state lock view', async () => {
+    const sensor = {
+      is_managed_by_backend: true,
+      name: 'Sensor',
+      device_type: DEVICE_TYPE.LG_THINQ,
+    };
+    await act(async () => {
+      wrapper = await create(wrapComponent(actionGroup, mockDoAction, sensor));
+    });
+    const instance = wrapper.root;
+    const wheelpicker = instance.findByType(WheelColorPicker);
     await act(async () => {
-      await picker[0].props.onColorChangeComplete();
+      await wheelpicker.props.onStart();
     });
+    expect(mockSetAction).toBeCalled();
   });
 });

package/src/commons/ActionGroup/__test__/SliderRangeTemplate.test.js

@@ -85,4 +85,22 @@ describe('Test SliderRangeTemplate', () => {
       JSON.stringify({ value_brness: 50 })
     );
   });
+
+  it('render template SliderRangeTemplate with config value not null', async () => {
+    useConfigGlobalState.mockImplementation(() => [
+      {
+        5: {
+          value: 50,
+        },
+      },
+      jest.fn(),
+    ]);
+    const sensor = { is_managed_by_backend: true, name: 'Sensor' };
+    await act(async () => {
+      wrapper = await create(wrapComponent(actionGroup, mockDoAction, sensor));
+    });
+    const instance = wrapper.root;
+    const silderRange = instance.findByType(SliderRange);
+    expect(silderRange.props.value).toBe(50);
+  });
 });

package/src/commons/ActionTemplate/__test__/index.test.js

@@ -62,6 +62,28 @@ describe('Test ActionTemplate', () => {
         action_off: '94ae262d-46e3-42ff-9d10-516831ecc830',
       },
     },
+    {
+      title: '',
+      template: 'curtain_action_template',
+      configuration: {
+        open_action: '94ae262d-46e3-42ff-9d10-516831ecc830',
+        close_action: '94ae262d-46e3-42ff-9d10-516831ecc830',
+        stop_action: '94ae262d-46e3-42ff-9d10-516831ecc830',
+        text1: 'One',
+        text2: 'Two',
+        text3: 'Three',
+      },
+    },
+    {
+      title: '',
+      template: 'OnOffSmartLockActionTemplate',
+      configuration: {
+        action_on: '94ae262d-46e3-42ff-9d10-516831ecc830',
+        action_off: '94ae262d-46e3-42ff-9d10-516831ecc830',
+        text_on: 'on',
+        text_off: 'off',
+      },
+    },
   ];
   it('test onPress SelectActionCard', async () => {
     await act(async () => {

package/src/commons/Device/HorizontalBarChart.js

@@ -126,6 +126,8 @@ const HorizontalBarChart = memo(({ datas, config }) => {
       dataY.splice(maxY._index, 1, { ...maxY.max, color: Colors.Primary });
     }
 
+    const isAllZero = dataY.every((item) => item.y === 0);
+
     setChartOptions((options) => ({
       ...options,
       chart: {
@@ -135,6 +137,10 @@ const HorizontalBarChart = memo(({ datas, config }) => {
         ...options.xAxis,
         categories: dataX,
       },
+      yAxis: {
+        ...options.yAxis,
+        minRange: isAllZero ? 0.5 : 0,
+      },
       series: [
         {
           name: JSON.stringify(config),

package/src/commons/Device/RainningSensor/CurrentRainSensor.js

@@ -17,6 +17,7 @@ const CurrentRainSensor = memo(({ data = [] }) => {
   const { text, raining, backgroundColor, borderColor } = item.evaluate
     ? item.evaluate
     : {};
+
   return (
     <View style={styles.standard}>
       <CircleView

package/src/commons/SubUnit/ShortDetail.js

@@ -102,8 +102,7 @@ const ShortDetailSubUnit = ({ unit, station, isOwner }) => {
     navigate(Routes.AddGatewayStack, {
       screen: Routes.SelectDeviceType,
       params: {
-        unitId: unit?.id,
-        unitName: unit?.name,
+        unit,
         subUnit: station,
       },
     });

package/src/commons/SubUnit/__test__/ShortDetail.test.js

@@ -167,8 +167,7 @@ describe('test ShortDetail Subunit', () => {
     expect(mockedNavigate).toHaveBeenCalledWith(Routes.AddGatewayStack, {
       screen: Routes.SelectDeviceType,
       params: {
-        unitId: props.unit.id,
-        unitName: props.unit.name,
+        unit: props.unit,
         subUnit: props.station,
       },
     });

package/src/screens/AddCommon/SelectUnit.js

@@ -51,8 +51,7 @@ const AddCommonSelectUnit = ({ route }) => {
           navigation.navigate(Routes.AddGatewayStack, {
             screen: Routes.SelectDeviceType,
             params: {
-              unitId: unit?.id,
-              unitName: unit?.name,
+              unit,
             },
           });
           break;

package/src/screens/AddCommon/__test__/SelectUnit.test.js

@@ -123,8 +123,10 @@ describe('Test SelectUnit container', () => {
           expect(mockedNavigate).toBeCalledWith('AddGatewayStack', {
             screen: 'SelectDeviceType',
             params: {
-              unitId: 1,
-              unitName: 'Unit 1',
+              unit: {
+                id: 1,
+                name: 'Unit 1',
+              },
             },
           });
           break;

package/src/screens/AddNewGateway/ConnectingDevice.js

@@ -12,7 +12,7 @@ const ConnectingDevice = ({
   fail,
   initState,
   onReady,
-  unitId,
+  unit,
   subUnit,
   chipId,
   sensorId,
@@ -26,7 +26,7 @@ const ConnectingDevice = ({
   const { navigate, goBack } = useNavigation();
 
   const [renameParams, setRenameParams] = useState({
-    unitId,
+    unit,
     subUnit,
     chipId,
     sensorId,

package/src/screens/AddNewGateway/ConnectingModbusDevice.js

@@ -9,7 +9,7 @@ import ConnectingDevice from './ConnectingDevice';
 
 const ConnectingModbusDevice = ({ route }) => {
   const t = useTranslations();
-  const { unitId, subUnit, chipId, qrData } = route?.params || {};
+  const { unit, subUnit, chipId, qrData } = route?.params || {};
   const [sensorId, setSensorId] = useState(null);
   const [channelNameTemp, setChannelNameTemp] = useState('');
   const [isChangeAddressSuccess, setIsChangeAddressSuccess] = useState(false);
@@ -27,7 +27,7 @@ const ConnectingModbusDevice = ({ route }) => {
       setChannelNameTemp(channelName);
       const { success, data } = await axiosPost(API.CHIP.SCAN_SENSOR(chipId), {
         imei: qrData.imei,
-        unit: unitId,
+        unit: unit?.id,
         station: subUnit?.id,
         channel_name: channelName,
       });
@@ -36,7 +36,7 @@ const ConnectingModbusDevice = ({ route }) => {
       }
       setSensorId(data.id);
     },
-    [chipId, qrData, subUnit, unitId]
+    [chipId, qrData, subUnit, unit]
   );
 
   useEffect(() => {
@@ -66,7 +66,7 @@ const ConnectingModbusDevice = ({ route }) => {
       title={t('connect_device')}
       initState={t('connecting_to_gateway')}
       onReady={onReady}
-      unitId={unitId}
+      unit={unit}
       subUnit={subUnit}
       chipId={chipId}
       sensorId={sensorId}

package/src/screens/AddNewGateway/ConnectingWifiDevice.js

@@ -12,7 +12,7 @@ let isCallingAPI = false;
 
 const ConnectingWifiDevice = ({ route }) => {
   const t = useTranslations();
-  const { unitId, subUnit, gateway, selectedWifi, qrData, addDeviceType } =
+  const { unit, subUnit, gateway, selectedWifi, qrData, addDeviceType } =
     route?.params || {};
   const { goBack } = useNavigation();
 
@@ -38,7 +38,7 @@ const ConnectingWifiDevice = ({ route }) => {
         isCallingAPI = true;
         const timeout = setTimeout(async () => {
           const { success, problem, data } = await axiosPost(
-            API.UNIT.CHIP_SCAN(unitId),
+            API.UNIT.CHIP_SCAN(unit?.id),
             {
               imei: gateway?.imei,
               secret: qrData?.secret,
@@ -60,22 +60,20 @@ const ConnectingWifiDevice = ({ route }) => {
       }
     },
     [
-      gateway,
-      selectedWifi,
-      unitId,
+      unit?.id,
+      gateway?.imei,
+      gateway?.model,
       qrData?.secret,
-      subUnit,
+      subUnit?.id,
+      selectedWifi.ssid,
+      selectedWifi.password,
       addingWifiDeviceFail,
     ]
   );
 
   useEffect(() => {
     const unsubscribe = NetInfo.addEventListener((state) => {
-      if (
-        state.isConnected &&
-        state.details?.ssid === selectedWifi.ssid &&
-        channelName
-      ) {
+      if (state.isConnected && channelName) {
         onReady(channelName);
       }
     });
@@ -89,7 +87,7 @@ const ConnectingWifiDevice = ({ route }) => {
       fail={addingWifiDeviceFail}
       initState={t('connecting_to_device')}
       onReady={setChannelName}
-      unitId={unitId}
+      unit={unit}
       subUnit={subUnit}
       chipId={chipId}
       addDeviceType={addDeviceType}

package/src/screens/AddNewGateway/ConnectingWifiGuide.js

@@ -25,7 +25,7 @@ const ConnectingWifiGuide = ({ route }) => {
   const t = useTranslations();
   const {
     qrData,
-    unitId,
+    unit,
     subUnit,
     addDeviceType,
     stationId,
@@ -53,7 +53,7 @@ const ConnectingWifiGuide = ({ route }) => {
       },
       {
         text: t('retry'),
-        onPress: connectToDeviceWifi,
+        onPress: () => connectToDeviceWifi(),
       },
     ],
     [connectToDeviceWifi, goBack, t]
@@ -104,7 +104,7 @@ const ConnectingWifiGuide = ({ route }) => {
       if (!wifi) {
         phoneWifiList = null;
         Alert.alert(
-          t('fail_to_discover_device_wifi'),
+          t('cannot_find_device_wifi'),
           t('try_to_turn_on_device_or_try_again'),
           buttons
         );
@@ -173,7 +173,7 @@ const ConnectingWifiGuide = ({ route }) => {
       socket?.close();
       socket = null;
       navigate(Routes.ShareWifiPassword, {
-        unitId,
+        unit,
         subUnit,
         wifiList,
         qrData: qrData,
@@ -181,7 +181,7 @@ const ConnectingWifiGuide = ({ route }) => {
         stationId,
       });
     }
-  }, [addDeviceType, navigate, qrData, stationId, subUnit, unitId, wifiList]);
+  }, [addDeviceType, navigate, qrData, stationId, subUnit, unit, wifiList]);
 
   return (
     <View style={styles.container}>

package/src/screens/AddNewGateway/ConnectingZigbeeDevice.js

@@ -10,7 +10,7 @@ import ConnectingDevice from './ConnectingDevice';
 const ConnectingZigbeeDevice = ({ route }) => {
   const t = useTranslations();
   const { goBack } = useNavigation();
-  const { unitId, subUnit, chipId } = route?.params || {};
+  const { unit, subUnit, chipId } = route?.params || {};
 
   const fail = useCallback(
     (message) => {
@@ -31,7 +31,7 @@ const ConnectingZigbeeDevice = ({ route }) => {
         {
           channel_name: channelName,
           station: subUnit?.id,
-          unit: unitId,
+          unit: unit?.id,
         }
       );
 
@@ -40,7 +40,7 @@ const ConnectingZigbeeDevice = ({ route }) => {
         return;
       }
     },
-    [chipId, fail, subUnit?.id, unitId]
+    [chipId, fail, subUnit?.id, unit?.id]
   );
 
   return (
@@ -49,7 +49,7 @@ const ConnectingZigbeeDevice = ({ route }) => {
       fail={fail}
       initState={t('connecting_to_gateway')}
       onReady={onReady}
-      unitId={unitId}
+      unit={unit}
       subUnit={subUnit}
       chipId={chipId}
       sensorId={null}

package/src/screens/AddNewGateway/RenameNewDevices.js

@@ -20,7 +20,7 @@ const RenameNewDevices = memo(({ route }) => {
   const t = useTranslations();
   const { dispatch } = useNavigation();
 
-  const { unitId, subUnit, chipId, sensorId, addDeviceType } =
+  const { unit, subUnit, chipId, sensorId, addDeviceType } =
     route?.params || {};
   const [selectedItem, setSelectedItem] = useState({});
   const [isCanRename, setIsCanRename] = useState(false);
@@ -68,7 +68,7 @@ const RenameNewDevices = memo(({ route }) => {
           params: {
             screen: Routes.UnitDetail,
             params: {
-              unitId: unitId,
+              unitId: unit?.id,
               stationId: subUnit?.id,
               isSuccessfullyConnected: true,
               routeName: Routes.DashboardStack,
@@ -78,7 +78,7 @@ const RenameNewDevices = memo(({ route }) => {
       ],
     });
     dispatch(resetAction);
-  }, [dispatch, info, subUnit?.id, unitId]);
+  }, [dispatch, info, subUnit?.id, unit?.id]);
 
   useEffect(() => {
     (async () => {
@@ -244,7 +244,7 @@ const RenameNewDevices = memo(({ route }) => {
             {t('successfully_connected')}
           </Text>
           <Text size={14} color={Colors.Gray9}>
-            {subUnit?.name}
+            {[unit?.name, subUnit?.name].filter(Boolean).join(' - ')}
           </Text>
           {renderListItem}
           <Text size={16} color={Colors.Gray8} style={styles.textRename}>

package/src/screens/AddNewGateway/ScanGatewayQR.js

@@ -8,7 +8,7 @@ import InvalidQRCode from '../ScanChipQR/components/InvalidQRCode';
 
 const ScanGatewayQR = memo(({ route }) => {
   // same as Scan Wifi Device, not sure if we should separated it
-  const { unitId, stationId } = route?.params || {};
+  const { unit, stationId } = route?.params || {};
   const [isInvalidQrCode, setIsInvalidQrCode] = useState(false);
   const { navigate, goBack } = useNavigation();
 
@@ -28,14 +28,14 @@ const ScanGatewayQR = memo(({ route }) => {
         return;
       }
       navigate(Routes.ConnectingWifiGuide, {
-        unitId,
+        unit,
         stationId,
         qrData: data,
         addDeviceType: 'gateway',
       });
       setLoading(true);
     },
-    [navigate, stationId, unitId]
+    [navigate, stationId, unit]
   );
 
   const onRetry = useCallback(() => {

package/src/screens/AddNewGateway/ScanModbusQR.js

@@ -14,7 +14,7 @@ import { Colors } from '../../configs';
 
 const ScanModbusQR = memo(({ route }) => {
   const t = useTranslations();
-  const { unitId, subUnit } = route?.params || {};
+  const { unit, subUnit } = route?.params || {};
   const { navigate, goBack } = useNavigation();
   const [showPopupGuide, setShowPopupGuide, setHidePopupGuide] = useBoolean();
   const [isInvalidQrCode, setIsInvalidQrCode] = useState(false);
@@ -36,12 +36,12 @@ const ScanModbusQR = memo(({ route }) => {
         return;
       }
       navigate(Routes.SelectModbusGateway, {
-        unitId,
+        unit,
         subUnit,
         qrData: data,
       });
     },
-    [navigate, unitId, subUnit]
+    [navigate, unit, subUnit]
   );
 
   const handleCancel = useCallback(() => {

package/src/screens/AddNewGateway/ScanWifiDeviceQR.js

@@ -6,7 +6,7 @@ import { useNavigation } from '@react-navigation/native';
 import InvalidQRCode from '../ScanChipQR/components/InvalidQRCode';
 
 const ScanWifiDeviceQR = memo(({ route }) => {
-  const { unitId, subUnit } = route?.params || {};
+  const { unit, subUnit } = route?.params || {};
   const [isInvalidQrCode, setIsInvalidQrCode] = useState(false);
   const { navigate, goBack } = useNavigation();
 
@@ -26,13 +26,13 @@ const ScanWifiDeviceQR = memo(({ route }) => {
         return;
       }
       navigate(Routes.ConnectingWifiGuide, {
-        unitId,
+        unit,
         subUnit,
         qrData: data,
       });
       setLoading(true);
     },
-    [navigate, unitId, subUnit]
+    [navigate, subUnit, unit]
   );
 
   const onRetry = useCallback(() => {

package/src/screens/AddNewGateway/SelectDeviceSubUnit.js

@@ -7,40 +7,37 @@ import Routes from '../../utils/Route';
 import { DEVICE_TYPE } from '../../configs/Constants';
 
 const SelectDeviceSubUnit = ({ route }) => {
-  const { unitId, unitName, deviceType } = route?.params || {};
+  const { unit, deviceType } = route?.params || {};
   const t = useTranslations();
   const navigation = useNavigation();
   const onPressNext = useCallback(
-    (unit, subUnit) => {
+    (chosenUnit, chosenSubUnit) => {
       switch (deviceType) {
         case DEVICE_TYPE.WIFI_DEVICE:
           navigation.navigate(Routes.ScanWifiDeviceQR, {
-            unitId,
-            unitName,
-            subUnit,
+            unit,
+            chosenSubUnit,
           });
           break;
         case DEVICE_TYPE.MODBUS:
           navigation.navigate(Routes.ScanModbusQR, {
-            unitId,
-            unitName,
-            subUnit,
+            unit,
+            chosenSubUnit,
           });
           break;
         case DEVICE_TYPE.ZIGBEE:
           navigation.navigate(Routes.ConnectRouterGuide, {
-            unitId,
-            unitName,
-            subUnit,
+            unit,
+            chosenSubUnit,
           });
           break;
       }
     },
-    [deviceType, navigation, unitId, unitName]
+    [deviceType, navigation, unit]
   );
   return (
     <SelectSubUnit
-      unitId={unitId}
+      unitId={unit?.id}
       title={t('text_select_sub_unit')}
       subTitle={t('select_a_sub_unit_want_add_device')}
       onPressNext={onPressNext}

package/src/screens/AddNewGateway/SelectDeviceType.js

@@ -53,7 +53,7 @@ const SelectDeviceGrid = ({ options, onSelect }) => {
 
 const SelectDeviceType = ({ route }) => {
   const t = useTranslations();
-  const { unitId, unitName, subUnit } = route?.params || {};
+  const { unit, subUnit } = route?.params || {};
   const { navigate, goBack } = useNavigation();
   const [addType, setAddType] = useState();
   const [selectedAddType, setSelectedAddType] = useState();
@@ -65,7 +65,7 @@ const SelectDeviceType = ({ route }) => {
         image: <AddGatewayIcon width={60} height={60} />,
         route: Routes.ScanGatewayQR,
         data: {
-          unitId,
+          unit,
         },
         title: t('gateway'),
         subtitle: t('central_controller'),
@@ -77,8 +77,7 @@ const SelectDeviceType = ({ route }) => {
           ? Routes.ScanWifiDeviceQR
           : Routes.SelectDeviceSubUnit,
         data: {
-          unitId,
-          unitName,
+          unit,
           subUnit,
           deviceType: DEVICE_TYPE.WIFI_DEVICE,
         },
@@ -90,8 +89,7 @@ const SelectDeviceType = ({ route }) => {
         image: <AddModbusDeviceIcon width={60} height={60} />,
         route: subUnit?.id ? Routes.ScanModbusQR : Routes.SelectDeviceSubUnit,
         data: {
-          unitId,
-          unitName,
+          unit,
           subUnit,
           deviceType: DEVICE_TYPE.MODBUS,
         },
@@ -105,8 +103,7 @@ const SelectDeviceType = ({ route }) => {
           ? Routes.ConnectRouterGuide
           : Routes.SelectDeviceSubUnit,
         data: {
-          unitId,
-          unitName,
+          unit,
           subUnit,
           deviceType: DEVICE_TYPE.ZIGBEE,
         },
@@ -118,7 +115,7 @@ const SelectDeviceType = ({ route }) => {
       list.shift();
     }
     return list;
-  }, [t, unitId, unitName, subUnit]);
+  }, [unit, t, subUnit]);
 
   const onRight = useCallback(() => {
     if (selectedAddType?.route && selectedAddType?.data) {

package/src/screens/AddNewGateway/SelectDeviceUnit.js

@@ -10,8 +10,7 @@ const SelectDeviceUnit = ({ route }) => {
   const onPressNext = useCallback(
     (unit) => {
       navigate(Routes.SelectDeviceType, {
-        unitId: unit?.id,
-        unitName: unit?.name,
+        unit,
       });
     },
     [navigate]

package/src/screens/AddNewGateway/SelectModbusGateway.js

@@ -7,29 +7,28 @@ import Routes from '../../utils/Route';
 const SelectModbusGateway = ({ route }) => {
   const t = useTranslations();
   const navigation = useNavigation();
-  const { unitId, unitName, subUnit, qrData } = route?.params || {};
+  const { unit, subUnit, qrData } = route?.params || {};
 
   const onPressNext = useCallback(
     (gateway) => {
       navigation.navigate(Routes.ConnectingModbusDevice, {
-        unitId,
+        unit,
         subUnit,
         chipId: gateway.id,
         qrData,
       });
     },
-    [navigation, unitId, subUnit, qrData]
+    [navigation, unit, subUnit, qrData]
   );
 
   const onPressOk = useCallback(
     (gateway) => {
       navigation.navigate(Routes.SelectDeviceType, {
-        unitId,
-        unitName,
+        unit,
         subUnit,
       });
     },
-    [navigation, subUnit, unitId, unitName]
+    [navigation, subUnit, unit]
   );
 
   return (
@@ -38,7 +37,7 @@ const SelectModbusGateway = ({ route }) => {
       onPressOk={onPressOk}
       title={t('text_select_a_gateway')}
       subTitle={t('text_select_a_gateway')}
-      unitId={unitId}
+      unitId={unit?.id}
       type="modbus"
     />
   );

package/src/screens/AddNewGateway/SelectZigbeeGateway.js

@@ -7,18 +7,18 @@ import Routes from '../../utils/Route';
 const SelectZigbeeGateway = ({ route }) => {
   const t = useTranslations();
   const { navigate } = useNavigation();
-  const { unitId, subUnit } = route?.params || {};
+  const { unit, subUnit } = route?.params || {};
 
   const onPressNext = useCallback(
     (gateway) => {
       gateway &&
         navigate(Routes.ZigbeeDeviceConnectGuide, {
-          unitId,
+          unit,
           subUnit,
           chipId: gateway.id,
         });
     },
-    [unitId, subUnit, navigate]
+    [unit, subUnit, navigate]
   );
 
   return (
@@ -26,7 +26,7 @@ const SelectZigbeeGateway = ({ route }) => {
       onPressNext={onPressNext}
       title={t('text_select_a_gateway')}
       subTitle={t('text_select_a_gateway')}
-      unitId={unitId}
+      unitId={unit?.id}
       type="zigbee"
     />
   );

package/src/screens/AddNewGateway/ShareWifiPassword.js

@@ -54,7 +54,7 @@ const WifiItem = ({ item, setIsShowPopupPassword, setSelectedWifi }) => {
 };
 
 const ShareWifiPassword = ({ route }) => {
-  const { wifiList, unitId, subUnit, qrData, addDeviceType, stationId } =
+  const { wifiList, unit, subUnit, qrData, addDeviceType, stationId } =
     route?.params || {};
   const t = useTranslations();
   const { navigate } = useNavigation();
@@ -157,14 +157,14 @@ const ShareWifiPassword = ({ route }) => {
       socket = null;
     }
     navigate(Routes.ConnectingWifiGuide, {
-      unitId,
+      unit,
       stationId,
       subUnit,
       qrData,
       addDeviceType,
       isBackFromOtherScreen: true,
     });
-  }, [addDeviceType, navigate, qrData, stationId, subUnit, unitId]);
+  }, [addDeviceType, navigate, qrData, stationId, subUnit, unit]);
 
   useEffect(() => {
     let checkWifiInterval;
@@ -189,7 +189,7 @@ const ShareWifiPassword = ({ route }) => {
               socket?.close();
               socket = null;
               navigate(Routes.ConnectingWifiDevice, {
-                unitId,
+                unit,
                 subUnit,
                 gateway: dataGateway.gateway[0],
                 qrData: qrData,
@@ -225,8 +225,8 @@ const ShareWifiPassword = ({ route }) => {
     stationId,
     subUnit,
     t,
-    unitId,
     wifiList,
+    unit,
   ]);
 
   return (

package/src/screens/AddNewGateway/__test__/ConnectingWifiGuide.test.js

@@ -138,9 +138,7 @@ describe('test share wifi password', () => {
       tree = await renderer.create(wrapComponent(route));
     });
     await ConnectWifiActionButton(tree.root);
-    expect(Alert.alert.mock.calls[0][0]).toEqual(
-      'Fail to discover device wifi'
-    );
+    expect(Alert.alert.mock.calls[0][0]).toEqual("Cannot find Device's Wifi");
     expect(Alert.alert.mock.calls[0][1]).toEqual(
       'Try to turn on device or Try again'
     );
@@ -153,7 +151,7 @@ describe('test share wifi password', () => {
   it('fail connect to wifi android show error push retry', async () => {
     jest.spyOn(Alert, 'alert');
     Alert.alert(
-      'Fail to discover device wifi',
+      "Cannot find Device's Wifi",
       'Try to turn on device or Try again',
       [
         { text: 'Cancel', onPress: mockedGoBack },
@@ -175,9 +173,7 @@ describe('test share wifi password', () => {
       tree = await renderer.create(wrapComponent(route));
     });
     await ConnectWifiActionButton(tree.root);
-    expect(Alert.alert.mock.calls[1][0]).toEqual(
-      'Fail to discover device wifi'
-    );
+    expect(Alert.alert.mock.calls[1][0]).toEqual("Cannot find Device's Wifi");
     expect(Alert.alert.mock.calls[1][1]).toEqual(
       'Try to turn on device or Try again'
     );
@@ -222,7 +218,9 @@ describe('test share wifi password', () => {
     const route = {
       params: {
         qrData: { org_slug: 'eoh', prefix: 'robot' },
-        unitId: 1,
+        unit: {
+          id: 1,
+        },
         subUnit: {
           id: 1,
         },
@@ -248,7 +246,9 @@ describe('test share wifi password', () => {
     expect(socket.close).toBeCalled();
 
     expect(mockedNavigate).toBeCalledWith('ShareWifiPassword', {
-      unitId: 1,
+      unit: {
+        id: 1,
+      },
       subUnit: {
         id: 1,
       },

package/src/screens/AddNewGateway/__test__/ConnectingZigbeeDevice.test.js

@@ -55,7 +55,9 @@ describe('Test connecting modbus device', () => {
   beforeEach(() => {
     route = {
       params: {
-        unitId: 1,
+        unit: {
+          id: 1,
+        },
         subUnit: {
           id: 2,
           station: 'Station 2',
@@ -108,7 +110,9 @@ describe('Test connecting modbus device', () => {
     });
     expect(mockedNavigate).toHaveBeenCalledWith(Routes.RenameNewDevices, {
       addDeviceType: undefined,
-      unitId: 1,
+      unit: {
+        id: 1,
+      },
       subUnit: {
         id: 2,
         station: 'Station 2',

package/src/screens/AddNewGateway/__test__/SelectModbusGateway.test.js

@@ -38,7 +38,9 @@ describe('Test select modbus gateway', () => {
   beforeEach(() => {
     route = {
       params: {
-        unitId: 1,
+        unit: {
+          id: 1,
+        },
         subUnit: {
           id: 2,
         },
@@ -67,7 +69,9 @@ describe('Test select modbus gateway', () => {
     });
 
     expect(mockedNavigate).toBeCalledWith(Routes.ConnectingModbusDevice, {
-      unitId: 1,
+      unit: {
+        id: 1,
+      },
       subUnit: {
         id: 2,
       },

package/src/screens/AddNewGateway/__test__/SelectZigbeeGateway.test.js

@@ -38,7 +38,9 @@ describe('Test select zigbee gateway', () => {
   beforeEach(() => {
     route = {
       params: {
-        unitId: 1,
+        unit: {
+          id: 1,
+        },
         subUnit: {
           id: 2,
         },
@@ -67,7 +69,9 @@ describe('Test select zigbee gateway', () => {
     });
 
     expect(mockedNavigate).toBeCalledWith(Routes.ZigbeeDeviceConnectGuide, {
-      unitId: 1,
+      unit: {
+        id: 1,
+      },
       subUnit: {
         id: 2,
       },

package/src/screens/Device/components/SensorDisplayItem.js

@@ -41,7 +41,7 @@ export const SensorDisplayItem = ({
   const t = useTranslations();
   const userId = useSCContextSelector((state) => state.auth.account.user.id);
   const { configuration = {}, id: idTemplate } = item;
-  const { type, uri, id, name, title } = configuration;
+  const { type, template, uri, id, name, title } = configuration;
 
   const { isEditingTemplate } = useSCContextSelector((state) => state.devMode);
 
@@ -94,7 +94,7 @@ export const SensorDisplayItem = ({
     case 'history':
       return <DetailHistoryChart item={item} sensor={sensor} />;
     case 'value':
-      switch (type) {
+      switch (type || template) {
         case 'circle':
           return (
             <CardDevMode id={idTemplate}>

package/src/screens/Device/hooks/useEvaluateValue.js

@@ -56,7 +56,7 @@ const evaluateBoolean = (value, configuration) => {
   return { text: value };
 };
 
-const valueEvaluationFuncs = {
+export const valueEvaluationFuncs = {
   range: evaluateRange,
   boolean: evaluateBoolean,
 };

package/src/screens/SubUnit/Detail.js

@@ -78,8 +78,7 @@ const SubUnitDetail = ({ route }) => {
       params: {
         stationName: station.name,
         stationId: station.id,
-        unitId: unit.id,
-        unitName: unit.name,
+        unit,
       },
     });
   }, [navigation, station, unit]);

package/src/screens/Template/detail.js

@@ -20,6 +20,8 @@ import Routes from '../../utils/Route';
 import { SensorDisplayItem } from '../Device/components/SensorDisplayItem';
 import { axiosGet } from '../../utils/Apis/axios';
 import { watchMultiConfigs } from '../../iot/Monitor';
+import { useConfigGlobalState } from '../../iot/states';
+import { evaluateValue } from './utils/ValueEvaluation';
 
 const TemplateDetail = () => {
   const refMenuAction = useRef();
@@ -31,6 +33,9 @@ const TemplateDetail = () => {
   const [data, setData] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
 
+  // eslint-disable-next-line no-unused-vars
+  const [configValues, setConfigValues] = useConfigGlobalState('configValues');
+
   const listIds = useMemo(() => {
     const configIds = [];
     // eslint-disable-next-line no-shadow
@@ -45,7 +50,7 @@ const TemplateDetail = () => {
           configIds.push(item?.configuration?.configuration?.config);
       }
     });
-    return configIds;
+    return configIds.filter((id) => id);
   }, [data]);
 
   // eslint-disable-next-line no-shadow
@@ -136,6 +141,32 @@ const TemplateDetail = () => {
     listIds.length && watchMultiConfigs(listIds);
   }, [listIds]);
 
+  const getData = useCallback(
+    (_item) => {
+      if (!_item.configuration) {
+        return;
+      }
+
+      const _data = _item?.configuration?.configs.map((config) => {
+        const configValue = configValues[config.id]?.value;
+        if ([null, undefined, NaN].includes(configValue)) {
+          return;
+        }
+        const value = {
+          id: config.id,
+          value: configValue,
+          evaluate: evaluateValue(
+            configValue,
+            _item?.configuration?.value_evaluation
+          ),
+        };
+        return { ...config, ...value };
+      });
+      return _data.filter((value) => value);
+    },
+    [configValues]
+  );
+
   return (
     <View style={styles.wrap}>
       <WrapHeaderScrollable
@@ -152,7 +183,7 @@ const TemplateDetail = () => {
               return (
                 <SensorDisplayItem
                   item={item}
-                  getData={() => {}}
+                  getData={getData}
                   offsetTitle={'offsetTitle'}
                   setOffsetTitle={'setOffsetTitle'}
                   maxValue={100}

package/src/screens/Template/utils/ValueEvaluation.js

@@ -0,0 +1,18 @@
+import { valueEvaluationFuncs } from '../../Device/hooks/useEvaluateValue';
+
+export const evaluateValue = (value, valueEvaluation) => {
+  if (!valueEvaluation) {
+    return { text: value };
+  }
+
+  const evaluateFunc = valueEvaluationFuncs[valueEvaluation.template];
+  if (!evaluateFunc) {
+    return { text: value };
+  }
+
+  try {
+    return evaluateFunc(value, valueEvaluation.configuration);
+  } catch (e) {
+    return { text: value };
+  }
+};

package/src/screens/Unit/AddMenu.js

@@ -44,7 +44,7 @@ const AddMenu = memo(({ unit, afterItemClick, showAdd, setHideAdd }) => {
         image: <AddDeviceIcon width={43} height={43} />,
         data: {
           screen: Routes.SelectDeviceType,
-          params: { unitId: unit?.id, unitName: unit?.name },
+          params: { unit },
         },
       },
       {

package/src/utils/I18n/translations/en.json

@@ -1100,5 +1100,6 @@
   "text_under_development": "This feature is under development.",
   "text_working_hard": "We are working hard to get this running",
   "photo_request_permission": "Photo request permission",
+  "cannot_find_device_wifi": "Cannot find Device's Wifi",
   "photo_request_permission_des": "To select photo from gallery, please unlock access photo permission"
 }

package/src/utils/I18n/translations/vi.json

@@ -1099,5 +1099,6 @@
   "text_under_development": "Tính năng này đang được phát triển.",
   "text_working_hard": "Chúng tôi đang làm việc chăm chỉ để làm cho điều này hoạt động",
   "photo_request_permission": "Quyền yêu cầu ảnh",
+  "cannot_find_device_wifi": "Không thể tìm thấy Wifi của thiết bị",
   "photo_request_permission_des": "Để chọn ảnh từ thư viện, vui lòng mở khóa quyền truy cập ảnh"
 }