@eohjsc/react-native-smart-city 0.3.31 → 0.3.32

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

@@ -5,7 +5,7 @@ import MockAdapter from 'axios-mock-adapter';
 
 import AddCommonSelectUnit from '../SelectUnit';
 import Text from '../../../commons/Text';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import api from '../../../utils/Apis/axios';
@@ -37,14 +37,7 @@ describe('Test SelectUnit container', () => {
     mockedGoBack.mockClear();
   });
   let tree;
-  const list_type = [
-    'AddSubUnit',
-    'AddDevice',
-    'AddMember',
-    'AddLGDevice',
-    '',
-    'AddDeviceNewFlow',
-  ];
+  const list_type = ['AddSubUnit', 'AddDevice', 'AddMember', 'AddLGDevice', ''];
   const result = [
     'Add new sub-unit',
     'Add new device',
@@ -95,7 +88,10 @@ describe('Test SelectUnit container', () => {
 
       const instance = tree.root;
       const selectUnit = instance.findAll(
-        (item) => item.props.testID === TESTID.SELECT_UNIT_SELECT
+        (item) =>
+          item.props.accessibilityLabel?.indexOf(
+            AccessibilityLabel.SELECT_UNIT_SELECT
+          ) === 0
       );
       await act(async () => {
         selectUnit[0].props.onPress();
@@ -103,8 +99,8 @@ describe('Test SelectUnit container', () => {
 
       const next = instance.find(
         (item) =>
-          item.props.testID ===
-          `${TESTID.PREFIX.SELECT_UNIT}${TESTID.VIEW_BUTTON_BOTTOM_RIGHT_BUTTON}`
+          item.props.accessibilityLabel ===
+          `${AccessibilityLabel.PREFIX.SELECT_UNIT}${AccessibilityLabel.VIEW_BUTTON_BOTTOM_RIGHT_BUTTON}`
       );
 
       await act(async () => {
@@ -132,13 +128,6 @@ describe('Test SelectUnit container', () => {
             unit_id: 1,
           });
           break;
-        case 'AddDeviceNewFlow':
-          expect(mockedNavigate).toBeCalledWith('AddGatewaySelectGateway', {
-            unit_id: 1,
-            addType: 'AddDeviceNewFlow',
-            scan_sensor_data: undefined,
-          });
-          break;
         default:
           break;
       }
@@ -167,17 +156,25 @@ describe('test single SelectUnit', () => {
     const instance = tree.root;
     const unitName = instance.findAll(
       (item) =>
-        item.props.testID === TESTID.SELECT_UNIT_NAME && item.type === Text
+        item.props.accessibilityLabel?.indexOf(
+          AccessibilityLabel.SELECT_UNIT_NAME
+        ) === 0 && item.type === Text
     );
     const radioButton = instance.findAll(
-      (item) => item.props.testID === TESTID.SELECT_UNIT_RADIO_BUTTON
+      (item) =>
+        item.props.accessibilityLabel?.indexOf(
+          AccessibilityLabel.SELECT_UNIT_RADIO_BUTTON
+        ) === 0
     );
     expect(unitName[0].props.children).toBe('Unit 1');
     expect(unitName[1].props.children).toBe('Unit 2');
     expect(radioButton[0].props.active).toBeFalsy();
     expect(radioButton[1].props.active).toBeFalsy();
     const selectUnit = instance.findAll(
-      (item) => item.props.testID === TESTID.SELECT_UNIT_SELECT
+      (item) =>
+        item.props.accessibilityLabel?.indexOf(
+          AccessibilityLabel.SELECT_UNIT_SELECT
+        ) === 0
     );
     await act(async () => {
       selectUnit[0].props.onPress();
@@ -196,10 +193,15 @@ describe('test single SelectUnit', () => {
     const instance = tree.root;
     const unitName = instance.findAll(
       (item) =>
-        item.props.testID === TESTID.SELECT_UNIT_NAME && item.type === Text
+        item.props.accessibilityLabel?.indexOf(
+          AccessibilityLabel.SELECT_UNIT_NAME
+        ) === 0 && item.type === Text
     );
     const radioButton = instance.findAll(
-      (item) => item.props.testID === TESTID.SELECT_UNIT_RADIO_BUTTON
+      (item) =>
+        item.props.accessibilityLabel?.indexOf(
+          AccessibilityLabel.SELECT_UNIT_RADIO_BUTTON
+        ) === 0
     );
     expect(unitName).toHaveLength(2);
     expect(radioButton).toHaveLength(2);
@@ -214,8 +216,8 @@ describe('test single SelectUnit', () => {
     const instance = tree.root;
     const goBack = instance.find(
       (item) =>
-        item.props.testID ===
-        `${TESTID.PREFIX.SELECT_UNIT}${TESTID.VIEW_BUTTON_BOTTOM_LEFT_BUTTON}`
+        item.props.accessibilityLabel ===
+        `${AccessibilityLabel.PREFIX.SELECT_UNIT}${AccessibilityLabel.VIEW_BUTTON_BOTTOM_LEFT_BUTTON}`
     );
 
     await act(async () => {

package/src/screens/AddLocationMaps/__test__/index.test.js

@@ -9,7 +9,7 @@ import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import AddLocationMaps from '../index';
 import { API } from '../../../configs';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import api from '../../../utils/Apis/axios';
 import {
   GEOLOCATION_ERROR,
@@ -108,7 +108,8 @@ describe('Test SelectAddress', () => {
     });
     const instance = tree.root;
     const button = instance.find(
-      (el) => el.props.testID === TESTID.BUTTON_YOUR_LOCATION
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.BUTTON_YOUR_LOCATION
     );
 
     const response = {
@@ -141,7 +142,8 @@ describe('Test SelectAddress', () => {
     });
     const instance = tree.root;
     const button = instance.find(
-      (el) => el.props.testID === TESTID.BUTTON_YOUR_LOCATION
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.BUTTON_YOUR_LOCATION
     );
 
     global.navigator.geolocation = {
@@ -165,7 +167,8 @@ describe('Test SelectAddress', () => {
     });
     const instance = tree.root;
     const button = instance.find(
-      (el) => el.props.testID === TESTID.BUTTON_YOUR_LOCATION
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.BUTTON_YOUR_LOCATION
     );
 
     global.navigator.geolocation = {
@@ -210,7 +213,8 @@ describe('Test SelectAddress', () => {
     });
     const instance = tree.root;
     const button = instance.find(
-      (el) => el.props.testID === TESTID.BUTTON_YOUR_LOCATION
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.BUTTON_YOUR_LOCATION
     );
 
     global.navigator.geolocation = {
@@ -231,7 +235,8 @@ describe('Test SelectAddress', () => {
     });
     const instance = tree.root;
     const button = instance.find(
-      (el) => el.props.testID === TESTID.BUTTON_YOUR_LOCATION
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.BUTTON_YOUR_LOCATION
     );
 
     global.navigator.geolocation = {
@@ -255,7 +260,8 @@ describe('Test SelectAddress', () => {
     });
     const instance = tree.root;
     const button = instance.find(
-      (el) => el.props.testID === TESTID.BUTTON_CHOOSE_ON_MAP
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.BUTTON_CHOOSE_ON_MAP
     );
     await act(async () => {
       await button.props.onPress();

package/src/screens/AddLocationMaps/index.js

@@ -13,7 +13,7 @@ import RowLocation from '../../commons/SearchLocation/RowLocation';
 import { axiosGet } from '../../utils/Apis/axios';
 import { API, Colors, SCConfig } from '../../configs';
 import {
-  TESTID,
+  AccessibilityLabel,
   MAP_INITIAL_REGION,
   EOH_LOCATION,
 } from '../../configs/Constants';
@@ -203,7 +203,7 @@ const AddLocationMaps = memo(() => {
                 <TouchableOpacity
                   onPress={getCurrentPosition}
                   style={styles.button}
-                  testID={TESTID.BUTTON_YOUR_LOCATION}
+                  accessibilityLabel={AccessibilityLabel.BUTTON_YOUR_LOCATION}
                 >
                   <IconOutline name="aim" size={27} color={Colors.Primary} />
                   <Text
@@ -219,7 +219,7 @@ const AddLocationMaps = memo(() => {
                 <TouchableOpacity
                   onPress={chooseOnMap}
                   style={styles.button}
-                  testID={TESTID.BUTTON_CHOOSE_ON_MAP}
+                  accessibilityLabel={AccessibilityLabel.BUTTON_CHOOSE_ON_MAP}
                 >
                   <IconFill
                     name="environment"

package/src/screens/AddNewAction/Device/index.js

@@ -3,7 +3,7 @@ import { TouchableWithoutFeedback, View } from 'react-native';
 import { Colors } from '../../../configs';
 import Text from '../../../commons/Text';
 import IconComponent from '../../../commons/IconComponent';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import styles from './DeviceStyles';
 
 const Device = memo(({ svgMain, sensor, title, isSelectDevice, onPress }) => {
@@ -16,7 +16,7 @@ const Device = memo(({ svgMain, sensor, title, isSelectDevice, onPress }) => {
   return (
     <TouchableWithoutFeedback
       onPress={onPressDevice}
-      accessibilityLabel={`${TESTID.TOUCHABLE_ACTION_ADD_ITEM_FAVORITE}-${sensor.id}`}
+      accessibilityLabel={`${AccessibilityLabel.TOUCHABLE_ACTION_ADD_ITEM_FAVORITE}-${sensor.id}`}
     >
       <View style={[styles.container, isActive]}>
         <View style={styles.boxIcon}>

package/src/screens/AddNewAction/SelectAction.js

@@ -15,7 +15,7 @@ import { API, Images } from '../../configs';
 import {
   CONDITION_TYPES,
   STATE_VALUE_SENSOR_TYPES,
-  TESTID,
+  AccessibilityLabel,
 } from '../../configs/Constants';
 import Routes from '../../utils/Route';
 import styles from './Styles/SelectActionStyles';
@@ -42,7 +42,7 @@ const SelectAction = memo(({ route }) => {
     isCreateNewAction,
     isMultiUnits,
     oldType,
-  } = route.params;
+  } = route?.params || {};
   const [data, setData] = useState([]);
   const [actions, setActions] = useState([]);
   const [sensorData, setSensorData] = useState([]);
@@ -319,9 +319,9 @@ const SelectAction = memo(({ route }) => {
       const isNumberValue = !stateConditionData;
 
       if (isNumberValue) {
-        return `${item?.name} ${
-          item?.title ? item.title : t('is_below') + ' (<)'
-        } ${item?.value} ${item?.unit}`;
+        return `${item?.name} ${item.title || t('is_below') + ' (<)'} ${
+          item?.value
+        } ${item?.unit || ''}`;
       }
       return t(stateConditionData?.stateValue[item?.value]);
     },
@@ -411,7 +411,7 @@ const SelectAction = memo(({ route }) => {
           <RenderActionItem
             data={data}
             onSelectAction={handleOnSelectAction}
-            testID={TESTID.ACTION_ITEM}
+            accessibilityLabel={AccessibilityLabel.ACTION_ITEM}
           />
         )}
         {data?.length === 0 && sensorData?.length === 0 && !isfetched && (

package/src/screens/AddNewAction/SelectSensorDevices.js

@@ -12,7 +12,7 @@ import BottomButtonView from '../../commons/BottomButtonView';
 import { HeaderCustom } from '../../commons/Header';
 import Routes from '../../utils/Route';
 import styles from './Styles/SelectSensorDevicesStyles';
-import { AUTOMATE_SELECT, TESTID } from '../../configs/Constants';
+import { AUTOMATE_SELECT, AccessibilityLabel } from '../../configs/Constants';
 import { popAction } from '../../navigations/utils';
 import { Icon } from '@ant-design/react-native';
 
@@ -29,7 +29,7 @@ const SelectSensorDevices = memo(({ route }) => {
     isCreateNewAction,
     isMultiUnits,
     oldType,
-  } = route.params;
+  } = route?.params || {};
 
   const [listStation, setListStation] = useState([]);
   const [listMenuItem, setListMenuItem] = useState([]);
@@ -159,7 +159,7 @@ const SelectSensorDevices = memo(({ route }) => {
       <TouchableOpacity
         style={styles.buttonClose}
         onPress={onPressClose}
-        testID={TESTID.ICON_CLOSE}
+        accessibilityLabel={AccessibilityLabel.ICON_CLOSE}
       >
         <Icon name={'close'} size={24} color={Colors.Black} />
       </TouchableOpacity>

package/src/screens/AddNewAction/__test__/SelectAction.test.js

@@ -6,7 +6,7 @@ import SelectAction from '../SelectAction';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import BottomButtonView from '../../../commons/BottomButtonView';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import api from '../../../utils/Apis/axios';
 import { API } from '../../../configs';
 
@@ -172,7 +172,7 @@ describe('Test SelectAction', () => {
     });
     const instance = tree.root;
     const renderActionItem = instance.find(
-      (el) => el.props.testID === TESTID.ACTION_ITEM
+      (el) => el.props.accessibilityLabel === AccessibilityLabel.ACTION_ITEM
     );
     expect(renderActionItem.props.data.length).toBe(4);
   });

package/src/screens/AddNewAction/__test__/SelectSensorDevices.test.js

@@ -9,7 +9,10 @@ import Device from '../Device';
 import BottomButtonView from '../../../commons/BottomButtonView';
 import NavBar from '../../../commons/NavBar';
 import API from '../../../configs/API';
-import { AUTOMATE_SELECT, TESTID } from '../../../configs/Constants';
+import {
+  AUTOMATE_SELECT,
+  AccessibilityLabel,
+} from '../../../configs/Constants';
 import { TouchableOpacity } from 'react-native';
 import Routes from '../../../utils/Route';
 import api from '../../../utils/Apis/axios';
@@ -137,7 +140,8 @@ describe('Test SelectSensorDevices', () => {
     const instance = tree.root;
     const iconClose = instance.findAll(
       (el) =>
-        el.props.testID === TESTID.ICON_CLOSE && el.type === TouchableOpacity
+        el.props.accessibilityLabel === AccessibilityLabel.ICON_CLOSE &&
+        el.type === TouchableOpacity
     );
     expect(iconClose).toHaveLength(1);
 
@@ -172,7 +176,8 @@ describe('Test SelectSensorDevices', () => {
     const instance = tree.root;
     const iconClose = instance.findAll(
       (el) =>
-        el.props.testID === TESTID.ICON_CLOSE && el.type === TouchableOpacity
+        el.props.accessibilityLabel === AccessibilityLabel.ICON_CLOSE &&
+        el.type === TouchableOpacity
     );
     expect(iconClose).toHaveLength(1);
     await act(async () => {

package/src/screens/AddNewAutoSmart/__test__/AddNewAutoSmart.test.js

@@ -3,9 +3,10 @@ import { act, create } from 'react-test-renderer';
 import AddNewAutoSmart from '..';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
-import { AUTOMATE_TYPE, TESTID } from '../../../configs/Constants';
+import { AUTOMATE_TYPE, AccessibilityLabel } from '../../../configs/Constants';
 import ItemAutomate from '../../../commons/Automate/ItemAutomate';
 import Routes from '../../../utils/Route';
+import { TouchableOpacity } from 'react-native';
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
@@ -51,16 +52,19 @@ describe('test AddNewAutoSmart', () => {
     const items = instance.findAllByType(ItemAutomate);
     expect(items).toHaveLength(3);
 
+    const touchItem = items[0].findByType(TouchableOpacity);
+
     await act(async () => {
-      await items[0].props.onPress();
+      await touchItem.props.onPress();
     });
 
     const bottomButton = instance.find(
       (item) =>
-        item.props.testID ===
-        `${TESTID.PREFIX.BUTTON_ADD_AUTO_SMART}${TESTID.BOTTOM_VIEW_MAIN}`
+        item.props.accessibilityLabel ===
+        `${AccessibilityLabel.PREFIX.BUTTON_ADD_AUTO_SMART}${AccessibilityLabel.BOTTOM_VIEW_MAIN}`
     );
     expect(bottomButton).toBeDefined();
+
     await act(async () => {
       await bottomButton.props.onPress();
     });
@@ -87,14 +91,14 @@ describe('test AddNewAutoSmart', () => {
     const items = instance.findAllByType(ItemAutomate);
 
     await act(async () => {
-      await items[1].props.onPress();
+      await items[1].findByType(TouchableOpacity).props.onPress();
     });
     expect(items[1].props.isSelected).toBeTruthy();
 
     const bottomButton = instance.find(
       (item) =>
-        item.props.testID ===
-        `${TESTID.PREFIX.BUTTON_ADD_AUTO_SMART}${TESTID.BOTTOM_VIEW_MAIN}`
+        item.props.accessibilityLabel ===
+        `${AccessibilityLabel.PREFIX.BUTTON_ADD_AUTO_SMART}${AccessibilityLabel.BOTTOM_VIEW_MAIN}`
     );
     await act(async () => {
       await bottomButton.props.onPress();

package/src/screens/AddNewAutoSmart/index.js

@@ -9,7 +9,7 @@ import ItemAutomate from '../../commons/Automate/ItemAutomate';
 import {
   AUTOMATE_SELECT,
   AUTOMATE_TYPE,
-  TESTID,
+  AccessibilityLabel,
 } from '../../configs/Constants';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import Routes from '../../utils/Route';
@@ -24,7 +24,7 @@ const AddNewAutoSmart = memo(({ route }) => {
     isMultiUnits,
     automate = {},
     scriptName,
-  } = route.params;
+  } = route?.params || {};
 
   const typeAutoSmart = {
     [AUTOMATE_TYPE.AUTOMATE]: [
@@ -122,14 +122,6 @@ const AddNewAutoSmart = memo(({ route }) => {
     navigate,
   ]);
 
-  const handleSelectIndex = (index) => {
-    if (index !== selectedIndex) {
-      setSelectedIndex(index);
-    } else {
-      setSelectedIndex(-1);
-    }
-  };
-
   const onClose = useCallback(() => {
     goBack();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -151,13 +143,18 @@ const AddNewAutoSmart = memo(({ route }) => {
               <ItemAutomate
                 type={item.type}
                 isSelected={selectedIndex === index}
-                onPress={() => handleSelectIndex(index)}
+                key={item?.id?.toString()}
+                index={index}
+                selectedIndex={selectedIndex}
+                setSelectedIndex={setSelectedIndex}
               />
             ))}
         </View>
       </View>
       <BottomButtonView
-        testIDPrefix={TESTID.PREFIX.BUTTON_ADD_AUTO_SMART}
+        accessibilityLabelPrefix={
+          AccessibilityLabel.PREFIX.BUTTON_ADD_AUTO_SMART
+        }
         onPressMain={handleOnContinue}
         style={styles.bottomButton}
         mainTitle={t('continue')}

package/src/screens/AddNewDevice/ConnectingDevices.js

@@ -12,7 +12,7 @@ import Routes from '../../utils/Route';
 const ConnectingDevices = memo(({ route }) => {
   const t = useTranslations();
   const { navigate } = useNavigation();
-  const { new_sensor } = route.params || {};
+  const { new_sensor } = route?.params || {};
 
   useEffect(() => {
     const checkSensorConnected = setInterval(async () => {

package/src/screens/AddNewDevice/__test__/AddNewDevice.test.js

@@ -4,7 +4,7 @@ import MockAdapter from 'axios-mock-adapter';
 
 import AddNewDevice from '../index';
 import GroupCheckBox from '../../../commons/GroupCheckBox';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import API from '../../../configs/API';
 import { ViewButtonBottom } from '../../../commons';
 import Routes from '../../../utils/Route';
@@ -57,7 +57,7 @@ describe('Test AddNewDevice', () => {
   });
 
   const getText = (instance, id) => {
-    return instance.find((el) => el.props.testID === id);
+    return instance.find((el) => el.props.accessibilityLabel === id);
   };
 
   test('create', async () => {
@@ -65,8 +65,11 @@ describe('Test AddNewDevice', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const textAdd = getText(instance, TESTID.ADD_NEW_DEVICE_ADD);
-    const textThen = getText(instance, TESTID.ADD_NEW_DEVICE_THEN_SELECT);
+    const textAdd = getText(instance, AccessibilityLabel.ADD_NEW_DEVICE_ADD);
+    const textThen = getText(
+      instance,
+      AccessibilityLabel.ADD_NEW_DEVICE_THEN_SELECT
+    );
     expect(textAdd.props.children).toEqual(
       getTranslate('en', 'add_new_device')
     );

package/src/screens/AddNewDevice/index.js

@@ -15,11 +15,11 @@ import Text from '../../commons/Text';
 import GroupCheckBox from '../../commons/GroupCheckBox';
 import { axiosGet } from '../../utils/Apis/axios';
 import Routes from '../../utils/Route';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 
 const AddNewDevice = memo(({ route }) => {
   const t = useTranslations();
-  const { unit_id } = route.params;
+  const { unit_id } = route?.params || {};
   const { navigate, goBack } = useNavigation();
   const [unit, setUnit] = useState({ stations: [] });
   const [stationId, setStationId] = useState(-1);
@@ -70,7 +70,7 @@ const AddNewDevice = memo(({ route }) => {
       }
     >
       <Text
-        testID={TESTID.ADD_NEW_DEVICE_ADD}
+        accessibilityLabel={AccessibilityLabel.ADD_NEW_DEVICE_ADD}
         semibold
         size={20}
         color={Colors.Black}
@@ -79,7 +79,7 @@ const AddNewDevice = memo(({ route }) => {
         {t('add_new_device')}
       </Text>
       <Text
-        testID={TESTID.ADD_NEW_DEVICE_THEN_SELECT}
+        accessibilityLabel={AccessibilityLabel.ADD_NEW_DEVICE_THEN_SELECT}
         size={14}
         color={Colors.Gray8}
         style={styles.txtNote}

package/src/screens/AddNewGateway/ConnectingDevice.js

@@ -0,0 +1,40 @@
+import { useNavigation } from '@react-navigation/native';
+import React, { useCallback } from 'react';
+import Processing from '../../commons/Processing';
+import Routes from '../../utils/Route';
+
+const ConnectingDevice = ({
+  title,
+  fail,
+  initState,
+  onReady,
+  unitId,
+  stationId,
+  chipId,
+  sensorId,
+}) => {
+  const { navigate } = useNavigation();
+
+  const complete = useCallback(
+    (deviceInfo) => {
+      navigate(Routes.RenameNewDevices, {
+        unitId,
+        stationId,
+        chipId,
+        sensorId,
+      });
+    },
+    [chipId, navigate, sensorId, stationId, unitId]
+  );
+
+  return (
+    <Processing
+      title={title}
+      initState={initState}
+      fail={fail}
+      complete={complete}
+      onReady={onReady}
+    />
+  );
+};
+export default ConnectingDevice;

package/src/screens/AddNewGateway/ConnectingModbusDevice.js

@@ -0,0 +1,61 @@
+import { useNavigation } from '@react-navigation/native';
+import React, { useCallback, useState } from 'react';
+import { Alert } from 'react-native';
+import API from '../../configs/API';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { axiosPost } from '../../utils/Apis/axios';
+import ConnectingDevice from './ConnectingDevice';
+
+const ConnectingModbusDevice = ({ route }) => {
+  const t = useTranslations();
+  const { unitId, stationId, chipId, qrData } = route?.params || {};
+  const [sensorId, setSensorId] = useState(null);
+  const { goBack } = useNavigation();
+
+  const addingModbusDeviceFail = useCallback(
+    (message) => {
+      Alert.alert(t('fail_add_modbus_device'), message, [
+        {
+          text: t('ok'),
+          onPress: goBack,
+        },
+      ]);
+    },
+    [goBack, t]
+  );
+
+  const onReady = useCallback(
+    async (channelName) => {
+      const { success, problem, data } = await axiosPost(
+        API.CHIP.SCAN_SENSOR(chipId),
+        {
+          imei: qrData.imei,
+          unit: unitId,
+          station: stationId,
+          channel_name: channelName,
+        }
+      );
+
+      if (!success) {
+        addingModbusDeviceFail(JSON.stringify(problem || data));
+        return;
+      }
+      setSensorId(data.id);
+    },
+    [chipId, addingModbusDeviceFail, qrData, stationId, unitId]
+  );
+
+  return (
+    <ConnectingDevice
+      title={t('connecting_modbus_device')}
+      initState={t('connecting_to_gateway')}
+      onReady={onReady}
+      fail={addingModbusDeviceFail}
+      unitId={unitId}
+      stationId={stationId}
+      chipId={chipId}
+      sensorId={sensorId}
+    />
+  );
+};
+export default ConnectingModbusDevice;