@eohjsc/react-native-smart-city 0.7.3 → 0.7.4

package/src/screens/Automate/AddNewAction/__test__/SelectControlDevices.test.js

@@ -1,17 +1,17 @@
+import { useNavigation, useRoute } from '@react-navigation/native';
+import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
+import { TouchableOpacity } from 'react-native';
 import renderer, { act } from 'react-test-renderer';
-import MockAdapter from 'axios-mock-adapter';
-import { SCProvider } from '../../../../context';
-import { mockSCStore } from '../../../../context/mockStore';
-import Device from '../Device';
 import NavBar from '../../../../commons/NavBar';
 import API from '../../../../configs/API';
 import { AccessibilityLabel } from '../../../../configs/Constants';
-import { TouchableOpacity } from 'react-native';
-import Routes from '../../../../utils/Route';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
 import api from '../../../../utils/Apis/axios';
+import Routes from '../../../../utils/Route';
+import Device from '../Device';
 import SelectControlDevices from '../SelectControlDevices';
-import { useNavigation, useRoute } from '@react-navigation/native';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -108,6 +108,12 @@ describe('Test SelectMonitorDevices', () => {
     await act(async () => {
       iconClose[0].props.onPress();
     });
-    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.ScriptDetail);
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.ScriptDetail, {
+      automate: { sensor_id: 1 },
+      automateId: 1,
+      closeScreen: 'ScriptDetail',
+      scriptName: 'scriptName test',
+      unitId: 1,
+    });
   });
 });

package/src/screens/Automate/AddNewAction/__test__/SelectMonitorDevices.test.js

@@ -1,15 +1,15 @@
+import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
-import MockAdapter from 'axios-mock-adapter';
 
-import SelectMonitorDevices from '../SelectMonitorDevices';
-import { SCProvider } from '../../../../context';
-import { mockSCStore } from '../../../../context/mockStore';
+import { useRoute } from '@react-navigation/native';
+import { TouchableOpacity } from 'react-native';
 import API from '../../../../configs/API';
 import { AccessibilityLabel } from '../../../../configs/Constants';
-import { TouchableOpacity } from 'react-native';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
 import api from '../../../../utils/Apis/axios';
-import { useRoute } from '@react-navigation/native';
+import SelectMonitorDevices from '../SelectMonitorDevices';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -70,6 +70,12 @@ describe('Test SelectMonitorDevices', () => {
     await act(async () => {
       iconClose[0].props.onPress();
     });
-    expect(global.mockedNavigate).toHaveBeenCalledWith('closeScreen');
+    expect(global.mockedNavigate).toHaveBeenCalledWith('closeScreen', {
+      automate: { sensor_id: 1 },
+      automateId: null,
+      closeScreen: 'closeScreen',
+      scriptName: 'scriptName test',
+      unit: { id: 1, name: 'Unit test' },
+    });
   });
 });

package/src/screens/Automate/AddNewAction/__test__/SetupConfigCondition.test.js

@@ -1,18 +1,17 @@
+import { useRoute } from '@react-navigation/native';
 import React from 'react';
+import { TouchableWithoutFeedback } from 'react-native';
 import { act, create } from 'react-test-renderer';
-import { SCProvider } from '../../../../context';
-import { mockSCStore } from '../../../../context/mockStore';
-import SetupConfigCondition from '../SetupConfigCondition';
-import { useRoute } from '@react-navigation/native';
-import { ToastBottomHelper } from '../../../../utils/Utils';
 import { Text } from '../../../../commons';
-import GridItem from '../../../../commons/Grid/GridItem';
-import { TouchableWithoutFeedback } from 'react-native';
-import Routes from '../../../../utils/Route';
-import { ModalCustom } from '../../../../commons/Modal';
 import { showAllGridItems } from '../../../../commons/ActionTemplate/__test__/utils';
 import TextInput from '../../../../commons/Form/TextInput';
-import CheckBox from '@react-native-community/checkbox';
+import GridItem from '../../../../commons/Grid/GridItem';
+import { ModalCustom } from '../../../../commons/Modal';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import Routes from '../../../../utils/Route';
+import { ToastBottomHelper } from '../../../../utils/Utils';
+import SetupConfigCondition from '../SetupConfigCondition';
 
 jest.mock('react', () => {
   return {
@@ -57,7 +56,6 @@ describe('Test SetupConfigCondition', () => {
           name: 'config name',
           decimal_behind: 0,
           title: 'is below (<)',
-          sensor_type: 'air_quality',
           value_evaluations: [
             {
               id: 1,
@@ -108,6 +106,7 @@ describe('Test SetupConfigCondition', () => {
             },
           ],
         },
+        automate: {},
         sensorData: [],
       },
     });
@@ -130,9 +129,9 @@ describe('Test SetupConfigCondition', () => {
           id: 1,
           name: 'config name',
           title: 'is below (<)',
-          sensor_type: 'air_quality',
           value_evaluations: [BOOLEAN_VALUE_EVALUATION_CONFIGURATION],
         },
+        automate: {},
         sensorData: [],
       },
     });
@@ -158,7 +157,6 @@ describe('Test SetupConfigCondition', () => {
           id: 1,
           name: 'config name',
           title: 'is below (<)',
-          sensor_type: 'air_quality',
           value_evaluations: [BOOLEAN_VALUE_EVALUATION_CONFIGURATION],
         },
         sensorData: [],
@@ -214,8 +212,10 @@ describe('Test SetupConfigCondition', () => {
     });
     expect(modal.props.isVisible).toBeFalsy();
 
+    const modalGridItems = instance.findAllByType(GridItem);
+
     await act(async () => {
-      instance.findAllByType(CheckBox)[0].props.onChange();
+      modalGridItems[1].findByType(TouchableWithoutFeedback).props.onPress();
     });
 
     const input = instance.findByType(TextInput);
@@ -249,7 +249,6 @@ describe('Test SetupConfigCondition', () => {
           name: 'config name',
           decimal_behind: 0,
           title: 'is below (<)',
-          sensor_type: 'air_quality',
         },
         automate: {},
       },
@@ -286,4 +285,44 @@ describe('Test SetupConfigCondition', () => {
       'Please enter a number and select a condition'
     );
   });
+
+  it('Test render when have input number but not select condition', async () => {
+    await testConditionValue(
+      '123',
+      'Please enter a number and select a condition'
+    );
+  });
+
+  it('Test render when have input empty', async () => {
+    await testConditionValue(
+      '',
+      'Please enter a number and select a condition'
+    );
+  });
+
+  it('Test render when no value evaluations', async () => {
+    useRoute.mockReturnValue({
+      params: {
+        config: {
+          id: 1,
+          name: 'config name',
+          title: 'is below (<)',
+          sensor_type: 'air_quality',
+          value_evaluations: [],
+        },
+        automate: {},
+        sensorData: [],
+      },
+    });
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+
+    const gridItems = instance.findAllByType(GridItem);
+    expect(gridItems).toHaveLength(1);
+    expect(gridItems[0].findByType(Text).props.children).toEqual(
+      'Customize conditions'
+    );
+  });
 });

package/src/screens/Automate/AddNewAction/__test__/SetupScriptDelay.test.js

@@ -1,17 +1,17 @@
+import { useNavigation, useRoute } from '@react-navigation/native';
+import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
+import { TouchableWithoutFeedback } from 'react-native';
 import renderer, { act } from 'react-test-renderer';
-import MockAdapter from 'axios-mock-adapter';
+import BottomButtonView from '../../../../commons/BottomButtonView';
+import _TextInput from '../../../../commons/Form/TextInput';
+import API from '../../../../configs/API';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
-import API from '../../../../configs/API';
-import Routes from '../../../../utils/Route';
 import api from '../../../../utils/Apis/axios';
-import { useNavigation, useRoute } from '@react-navigation/native';
-import _TextInput from '../../../../commons/Form/TextInput';
-import BottomButtonView from '../../../../commons/BottomButtonView';
+import Routes from '../../../../utils/Route';
 import { ToastBottomHelper } from '../../../../utils/Utils';
 import SetupScriptDelay from '../SetupScriptDelay';
-import { TouchableWithoutFeedback } from 'react-native';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -75,7 +75,7 @@ describe('Test SetupScriptDelay', () => {
     await act(async () => {
       button.props.onPressMain();
     });
-    expect(spyToast).toBeCalled();
+    expect(spyToast).toHaveBeenCalled();
   });
 
   it('SetupScriptDelay onPress create script notify error', async () => {
@@ -95,6 +95,6 @@ describe('Test SetupScriptDelay', () => {
     await act(async () => {
       button.props.onPressMain();
     });
-    expect(spyToast).toBeCalled();
+    expect(spyToast).toHaveBeenCalled();
   });
 });

package/src/screens/Automate/AddNewAction/__test__/SetupScriptNotify.test.js

@@ -1,17 +1,17 @@
+import { useNavigation, useRoute } from '@react-navigation/native';
+import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
+import { TouchableWithoutFeedback } from 'react-native';
 import renderer, { act } from 'react-test-renderer';
-import MockAdapter from 'axios-mock-adapter';
+import BottomButtonView from '../../../../commons/BottomButtonView';
+import _TextInput from '../../../../commons/Form/TextInput';
+import API from '../../../../configs/API';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
-import API from '../../../../configs/API';
-import Routes from '../../../../utils/Route';
 import api from '../../../../utils/Apis/axios';
-import { useNavigation, useRoute } from '@react-navigation/native';
-import SetupScriptNotify from '../SetupScriptNotify';
-import _TextInput from '../../../../commons/Form/TextInput';
-import BottomButtonView from '../../../../commons/BottomButtonView';
+import Routes from '../../../../utils/Route';
 import { ToastBottomHelper } from '../../../../utils/Utils';
-import { TouchableWithoutFeedback } from 'react-native';
+import SetupScriptNotify from '../SetupScriptNotify';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -66,7 +66,36 @@ describe('Test SetupScriptNotify', () => {
     await act(async () => {
       button.props.onPressMain();
     });
-    expect(spyToast).toBeCalled();
+    expect(spyToast).toHaveBeenCalled();
+  });
+
+  it('SetupScriptNotify onPress create script notify success with multi unit', async () => {
+    route.params.unitId = null;
+    route.params.multiUnit = { id: 1 };
+    const spyToast = jest.spyOn(ToastBottomHelper, 'success');
+    mock.onPost(API.AUTOMATE.ADD_SCRIPT_NOTIFY(1)).reply(200);
+    await act(async () => {
+      tree = await renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const inputs = instance.findAllByType(_TextInput);
+    expect(inputs).toHaveLength(2);
+
+    await act(async () => {
+      inputs[0].props.onChange('Title');
+    });
+    const touchable = instance.findAllByType(TouchableWithoutFeedback);
+    await act(async () => {
+      touchable[0].props.onPress();
+    });
+    await act(async () => {
+      inputs[1].props.onChange('Message');
+    });
+    const button = instance.findByType(BottomButtonView);
+    await act(async () => {
+      button.props.onPressMain();
+    });
+    expect(spyToast).toHaveBeenCalled();
   });
 
   it('SetupScriptNotify onPress create script notify error', async () => {
@@ -87,6 +116,6 @@ describe('Test SetupScriptNotify', () => {
     await act(async () => {
       button.props.onPressMain();
     });
-    expect(spyToast).toBeCalled();
+    expect(spyToast).toHaveBeenCalled();
   });
 });

package/src/screens/Automate/AddNewAutoSmart/AddTypeSmart.js

@@ -1,22 +1,22 @@
+import { useNavigation } from '@react-navigation/native';
 import React, { useCallback, useState } from 'react';
 import { View } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import ItemAutomate from '../../../commons/Automate/ItemAutomate';
 import { HeaderCustom } from '../../../commons/Header';
-import styles from './styles/AddNewAutoSmartStyles';
 import Text from '../../../commons/Text';
-import ItemAutomate from '../../../commons/Automate/ItemAutomate';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import Routes from '../../../utils/Route';
+import styles from './styles/AddNewAutoSmartStyles';
+import { AUTOMATE_TYPE } from '../../../configs/Constants';
 
 const AddTypeSmart = ({ smartTypes, route }) => {
   const t = useTranslations();
   const { navigate, goBack } = useNavigation();
   const { automate = {}, closeScreen } = route?.params || {};
+  const { id, unit, type } = automate;
 
   const [selectedIndex, setSelectedIndex] = useState(
-    automate?.id
-      ? smartTypes.findIndex((obj) => obj.type === automate.type)
-      : -1
+    id ? smartTypes.findIndex((obj) => obj.type === type) : -1
   );
 
   const handleOnContinue = useCallback(
@@ -27,17 +27,18 @@ const AddTypeSmart = ({ smartTypes, route }) => {
           ...automate,
           type: dataAutomate?.type,
         },
+        unitId: unit,
         closeScreen: closeScreen,
       };
 
-      if (!automate?.unit) {
+      if (!unit && dataAutomate.type === AUTOMATE_TYPE.VALUE_CHANGE) {
         navigate(Routes.SelectUnit, params);
         return;
       }
 
       navigate(dataAutomate.route, params);
     },
-    [smartTypes, automate, closeScreen, navigate]
+    [smartTypes, automate, unit, closeScreen, navigate]
   );
 
   const onSelectType = (index) => {
@@ -50,7 +51,7 @@ const AddTypeSmart = ({ smartTypes, route }) => {
       <HeaderCustom isShowClose onClose={goBack} />
       <View style={styles.container}>
         <Text semibold type={'H2'} style={styles.titleCreate}>
-          {automate?.id ? t('update_smart') : t('create_smart')}
+          {id ? t('update_smart') : t('create_smart')}
         </Text>
         <Text type={'Body'} style={styles.titleChoose}>
           {t('choose_the_automation_method_you_want')}
@@ -62,7 +63,6 @@ const AddTypeSmart = ({ smartTypes, route }) => {
               isSelected={selectedIndex === index}
               key={item?.type?.toString()}
               index={index}
-              selectedIndex={selectedIndex}
               setSelectedIndex={onSelectType}
             />
           ))}

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

@@ -1,12 +1,12 @@
+import { useNavigation } from '@react-navigation/native';
 import React from 'react';
+import { TouchableOpacity } from 'react-native';
 import { act, create } from 'react-test-renderer';
-import AddUnknownTypeSmart from '../AddUnknownTypeSmart';
+import ItemAutomate from '../../../../commons/Automate/ItemAutomate';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
-import ItemAutomate from '../../../../commons/Automate/ItemAutomate';
 import Routes from '../../../../utils/Route';
-import { TouchableOpacity } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import AddUnknownTypeSmart from '../AddUnknownTypeSmart';
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
@@ -41,10 +41,14 @@ describe('test AddNewAutoSmart', () => {
       await touchItem.props.onPress();
     });
 
-    expect(global.mockedNavigate).toBeCalledWith(Routes.SelectMonitorDevices, {
-      automate: { unit: 1, type: 'value_change' },
-      closeScreen: undefined,
-    });
+    expect(global.mockedNavigate).toHaveBeenCalledWith(
+      Routes.SelectMonitorDevices,
+      {
+        automate: { unit: 1, type: 'value_change' },
+        closeScreen: undefined,
+        unitId: 1,
+      }
+    );
   });
 
   it('test choose Schedule', async () => {
@@ -62,6 +66,7 @@ describe('test AddNewAutoSmart', () => {
     expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.SetSchedule, {
       automate: { type: 'schedule', unit: 1 },
       closeScreen: undefined,
+      unitId: 1,
     });
   });
 });

package/src/screens/Automate/Components/InputName.js

@@ -9,12 +9,14 @@ import styles from './InputNameStyles';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { axiosPost, axiosPut } from '../../../utils/Apis/axios';
 import NewActionWrapper from '../../Automate/AddNewAction/NewActionWrapper';
+import Routes from '../../../utils/Route';
 
 const InputName = ({ title, placeholder }) => {
-  const { automate, closeScreen } = useRoute().params;
+  const { automate = {}, closeScreen } = useRoute().params;
+  const { id: automateNameId, name: automateName } = automate;
   const t = useTranslations();
   const { navigate } = useNavigation();
-  const [name, setName] = useState(automate?.name);
+  const [name, setName] = useState(automateName);
   const [processing, setProcessing] = useState(false);
   const handleContinue = useCallback(async () => {
     if (processing) {
@@ -29,21 +31,22 @@ const InputName = ({ title, placeholder }) => {
       name: name,
     };
 
-    const { success, data } = automate?.id
-      ? await axiosPut(API.AUTOMATE.UPDATE_AUTOMATE(automate?.id), params)
+    const { success, data } = automateNameId
+      ? await axiosPut(API.AUTOMATE.UPDATE_AUTOMATE(automateNameId), params)
       : await axiosPost(API.AUTOMATE.CREATE_AUTOMATE(), params);
 
     if (success) {
       navigate({
-        name: closeScreen,
+        name: Routes.ScriptDetail,
         merge: true,
         params: {
-          newAutomate: data,
+          preAutomate: data,
+          closeScreen: closeScreen,
         },
       });
     }
     setProcessing(false);
-  }, [processing, automate, name, navigate, closeScreen]);
+  }, [processing, automate, name, automateNameId, navigate, closeScreen]);
 
   return (
     <NewActionWrapper

package/src/screens/Automate/EditActionsList/__tests__/UpdateActionScript.test.js

@@ -1,19 +1,19 @@
+import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
-import MockAdapter from 'axios-mock-adapter';
 
-import { SCProvider } from '../../../../context';
-import { mockSCStore } from '../../../../context/mockStore';
 import API from '../../../../configs/API';
 import { AccessibilityLabel } from '../../../../configs/Constants';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
 
+import { useRoute } from '@react-navigation/native';
+import { TouchableOpacity } from 'react-native';
+import { showAllCards } from '../../../../commons/ActionTemplate/__test__/utils';
 import api from '../../../../utils/Apis/axios';
 import { ToastBottomHelper } from '../../../../utils/Utils';
-import UpdateActionScript from '../UpdateActionScript';
-import { TouchableOpacity } from 'react-native';
-import { useRoute } from '@react-navigation/native';
 import RenderActionItem from '../../AddNewAction/RenderActionItem';
-import { showAllCards } from '../../../../commons/ActionTemplate/__test__/utils';
+import UpdateActionScript from '../UpdateActionScript';
 
 const mock = new MockAdapter(api.axiosInstance);
 const mockedPermission = jest.fn();
@@ -152,6 +152,6 @@ describe('Test UpdateActionScript', () => {
     await selectActionOne(instance);
     await pressSaveButton(instance);
 
-    expect(spyToast).toBeCalled();
+    expect(spyToast).toHaveBeenCalled();
   });
 });

package/src/screens/Automate/EditActionsList/__tests__/UpdateDelayScript.test.js

@@ -1,15 +1,15 @@
+import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
-import MockAdapter from 'axios-mock-adapter';
 
-import { SCProvider } from '../../../../context';
-import { mockSCStore } from '../../../../context/mockStore';
 import API from '../../../../configs/API';
 import { AccessibilityLabel } from '../../../../configs/Constants';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
 
-import api from '../../../../utils/Apis/axios';
-import _TextInput from '../../../../commons/Form/TextInput';
 import BottomButtonView from '../../../../commons/BottomButtonView';
+import _TextInput from '../../../../commons/Form/TextInput';
+import api from '../../../../utils/Apis/axios';
 import { ToastBottomHelper } from '../../../../utils/Utils';
 import UpdateDelayScript from '../UpdateDelayScript';
 
@@ -80,7 +80,7 @@ describe('Test UpdateDelayScript', () => {
     await act(async () => {
       button.props.onPressMain();
     });
-    expect(spyToast).toBeCalled();
+    expect(spyToast).toHaveBeenCalled();
   });
   it('test can not update title and message', async () => {
     await act(async () => {

package/src/screens/Automate/EditActionsList/__tests__/UpdateNotifyScript.test.js

@@ -1,17 +1,17 @@
+import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
-import MockAdapter from 'axios-mock-adapter';
 
-import { SCProvider } from '../../../../context';
-import { mockSCStore } from '../../../../context/mockStore';
 import API from '../../../../configs/API';
 import { AccessibilityLabel } from '../../../../configs/Constants';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
 
-import api from '../../../../utils/Apis/axios';
-import UpdateNotifyScript from '../UpdateNotifyScript';
-import _TextInput from '../../../../commons/Form/TextInput';
 import BottomButtonView from '../../../../commons/BottomButtonView';
+import _TextInput from '../../../../commons/Form/TextInput';
+import api from '../../../../utils/Apis/axios';
 import { ToastBottomHelper } from '../../../../utils/Utils';
+import UpdateNotifyScript from '../UpdateNotifyScript';
 
 const mock = new MockAdapter(api.axiosInstance);
 const mockerOnClosePopup = jest.fn();
@@ -89,7 +89,7 @@ describe('Test UpdateNotifyScript', () => {
     await act(async () => {
       button.props.onPressMain();
     });
-    expect(spyToast).toBeCalled();
+    expect(spyToast).toHaveBeenCalled();
     // expect(global.mockedNavigate).toHaveBeenCalledWith('closeScreen');
   });
   it('test can not update title and message', async () => {

package/src/screens/Automate/EditActionsList/index.js

@@ -1,27 +1,28 @@
-import React, { useState, useCallback, useMemo, useEffect } from 'react';
-import { View, TouchableOpacity } from 'react-native';
-import DraggableFlatList from 'react-native-draggable-flatlist';
 import { useNavigation, useRoute } from '@react-navigation/native';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import DraggableFlatList from 'react-native-draggable-flatlist';
 import ParsedText from 'react-native-parsed-text';
 
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import Close from '../../../../assets/images/Close.svg';
+import Delay from '../../../../assets/images/Delay.svg';
+import Notify from '../../../../assets/images/Notify.svg';
+import Rearrange from '../../../../assets/images/Rearrange.svg';
+import { FullLoading } from '../../../commons';
+import FImage from '../../../commons/FImage';
 import { HeaderCustom } from '../../../commons/Header';
-import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { ModalBottom, ModalCustom } from '../../../commons/Modal';
 import Text from '../../../commons/Text';
-import styles from './Styles/indexStyles';
 import { API, Colors } from '../../../configs';
-import FImage from '../../../commons/FImage';
-import Rearrange from '../../../../assets/images/Rearrange.svg';
-import Notify from '../../../../assets/images/Notify.svg';
-import Delay from '../../../../assets/images/Delay.svg';
-import Close from '../../../../assets/images/Close.svg';
-import { axiosDelete, axiosPut } from '../../../utils/Apis/axios';
-import { ModalBottom, ModalCustom } from '../../../commons/Modal';
-import { ToastBottomHelper } from '../../../utils/Utils';
 import { AccessibilityLabel } from '../../../configs/Constants';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { axiosDelete, axiosPut } from '../../../utils/Apis/axios';
 import Routes from '../../../utils/Route';
+import { ToastBottomHelper } from '../../../utils/Utils';
+import styles from './Styles/indexStyles';
 import UpdateDelayScript from './UpdateDelayScript';
 import UpdateNotifyScript from './UpdateNotifyScript';
-import { FullLoading } from '../../../commons';
 
 const EditActionsList = () => {
   const t = useTranslations();
@@ -134,7 +135,8 @@ const EditActionsList = () => {
     </View>
   );
   const renderItem = useCallback(
-    ({ item, index, drag, isActive }) => {
+    ({ item, getIndex, drag, isActive }) => {
+      const index = getIndex();
       const paddedIndex = (index + 1).toString().padStart(2, '0');
       const { action_script, notify_script, delay_script } = item;
       if (action_script) {
@@ -354,7 +356,7 @@ const EditActionsList = () => {
   }, [itemRemove, t]);
 
   return (
-    <View style={styles.wrap}>
+    <GestureHandlerRootView style={styles.wrap}>
       <HeaderCustom title={t('edit_actions_list')} onGoBack={onCancel} />
       <View style={styles.wrapContent}>
         <Text type="Body" color={Colors.Gray8}>
@@ -393,7 +395,7 @@ const EditActionsList = () => {
           <View style={styles.modalHeader}>{renderAction}</View>
         </View>
       </ModalCustom>
-    </View>
+    </GestureHandlerRootView>
   );
 };