@eohjsc/react-native-smart-city 0.7.20 → 0.7.22

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

@@ -16,6 +16,10 @@ import Routes from '../../../utils/Route';
 import { ToastBottomHelper } from '../../../utils/Utils';
 import NewActionWrapper from './NewActionWrapper';
 import styles from './Styles/SetupSensorStyles';
+import { useSCContextSelector } from '../../../context';
+import { axiosPost, axiosPut } from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
+import { AccessibilityLabel, AUTOMATE_TYPE } from '../../../configs/Constants';
 
 const valueEvaluationToOptions = (valueEvaluation) => {
   if (valueEvaluation.template === 'range') {
@@ -51,22 +55,23 @@ const SetupConfigCondition = () => {
   const [selectedCondition, setSelectedCondition] = useState(undefined);
   const [customCondition, setCustomCondition] = useState(undefined);
   const [isShowModal, setIsShowModal] = useState(false);
-  const normalConditions = useMemo(() => {
-    return [
-      {
-        label: `${t('is_below')} (<)`,
-        value: '<',
-      },
-      {
-        label: `${t('is_equal')} (=)`,
-        value: '=',
-      },
-      {
-        label: `${t('is_above')} (>)`,
-        value: '>',
-      },
-    ];
-  }, [t]);
+
+  const isCreateCondition = useSCContextSelector(
+    (state) => state.automate.isCreateCondition
+  );
+  const isUpdateCondition = useSCContextSelector(
+    (state) => state.automate.isUpdateCondition
+  );
+
+  const normalConditions = useMemo(
+    () => [
+      { label: `${t('is_below')} (<)`, value: '<' },
+      { label: `${t('is_equal')} (=)`, value: '=' },
+      { label: `${t('is_above')} (>)`, value: '>' },
+    ],
+    [t]
+  );
+
   const conditionOptions = useMemo(() => {
     if (config?.value_evaluations?.length) {
       const options = [];
@@ -85,15 +90,56 @@ const SetupConfigCondition = () => {
     setIsShowModal(true);
   };
 
-  const setupCondition = (condition) => {
+  const handleNavigate = useCallback(async () => {
+    if (!isCreateCondition && !isUpdateCondition) {
+      navigate(Routes.ValueChangeName, {
+        automate,
+        closeScreen,
+        unitId,
+      });
+      return;
+    }
+    const data = {
+      type: AUTOMATE_TYPE.VALUE_CHANGE,
+      condition: automate.condition,
+      config: automate.config,
+      value: automate.value,
+    };
+    const apiCall = isCreateCondition
+      ? await axiosPost(API.AUTOMATE.ADD_CONDITION(automate.id), data)
+      : await axiosPut(
+          API.AUTOMATE.UPDATE_CONDITION(automate.id, isUpdateCondition),
+          data
+        );
+
+    const { success } = apiCall;
+
+    if (success) {
+      ToastBottomHelper.success(
+        isCreateCondition
+          ? t('add_condition_success')
+          : t('edit_condition_success')
+      );
+      navigate({
+        name: Routes.ScriptDetail,
+        params: { preAutomate: automate },
+      });
+    }
+  }, [
+    automate,
+    closeScreen,
+    isCreateCondition,
+    isUpdateCondition,
+    navigate,
+    t,
+    unitId,
+  ]);
+
+  const setupCondition = async (condition) => {
     automate.condition = condition?.condition;
     automate.value = condition?.value;
     setSelectedCondition(condition);
-    navigate(Routes.ValueChangeName, {
-      automate,
-      closeScreen,
-      unitId,
-    });
+    handleNavigate();
   };
 
   const resetCustomizeCondition = useCallback(() => {
@@ -146,9 +192,10 @@ const SetupConfigCondition = () => {
             {t('when_value_is', { config_name: config.name })}
           </Text>
           <View style={styles.flatListCondition}>
-            {normalConditions.map((item) => {
+            {normalConditions.map((item, index) => {
               return (
                 <GridItem
+                  key={`GridItem${index}`}
                   onPress={() => {
                     automate.condition = item.value;
                     setCustomCondition(item.value);
@@ -180,18 +227,14 @@ const SetupConfigCondition = () => {
           <Button
             type="primary"
             title={t('continue')}
-            testID={'continue_button'}
-            onPress={() => {
+            accessibilityLabel={AccessibilityLabel.BUTTON_CONTINUE}
+            onPress={async () => {
               if (isNaN(automate.value) || !automate.condition) {
                 ToastBottomHelper.error(t('please_enter_a_number'), '', 3000);
                 return;
               }
               setIsShowModal(false);
-              navigate(Routes.ValueChangeName, {
-                automate,
-                closeScreen,
-                unitId,
-              });
+              handleNavigate();
             }}
             style={styles.buttonContinue}
             textSemiBold={false}

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

@@ -1,20 +1,19 @@
-import React from 'react';
 import renderer, { act } from 'react-test-renderer';
-import MockAdapter from 'axios-mock-adapter';
 
+import { API } from '../../../../configs';
 import ChooseConfig from '../ChooseConfig';
-import { SCProvider } from '../../../../context';
-import { mockSCStore } from '../../../../context/mockStore';
 import { DEVICE_TYPE } from '../../../../configs/Constants';
-import api from '../../../../utils/Apis/axios';
-import { API } from '../../../../configs';
-import TitleCheckBox from '../../../Sharing/Components/TitleCheckBox';
+import GridItem from '../../../../commons/Grid/GridItem';
+import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+import Routes from '../../../../utils/Route';
+import { SCProvider } from '../../../../context';
 import Text from '../../../../commons/Text';
+import { TouchableWithoutFeedback } from 'react-native';
+import api from '../../../../utils/Apis/axios';
+import { mockSCStore } from '../../../../context/mockStore';
 import t from '../../../../hooks/Common/useTranslations';
-import Routes from '../../../../utils/Route';
 import { useNavigation } from '@react-navigation/native';
-import { TouchableWithoutFeedback } from 'react-native';
-import GridItem from '../../../../commons/Grid/GridItem';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -44,7 +43,6 @@ describe('Test ChooseConfig', () => {
     await act(async () => {
       tree = await renderer.create(wrapComponent(route));
     });
-    expect(tree.root.findAllByType(TitleCheckBox)).toHaveLength(0);
     expect(mock.history.get).toHaveLength(1);
   });
 

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

@@ -7,18 +7,15 @@ import { showAllGridItems } from '../../../../commons/ActionTemplate/__test__/ut
 import TextInput from '../../../../commons/Form/TextInput';
 import GridItem from '../../../../commons/Grid/GridItem';
 import { ModalCustom } from '../../../../commons/Modal';
-import { SCProvider } from '../../../../context';
+import { SCProvider, useSCContextSelector } 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 {
-    ...jest.requireActual('react'),
-    memo: (x) => x,
-  };
-});
+import AccessibilityLabel from '../../../../configs/AccessibilityLabel';
+import { API } from '../../../../configs';
+import api from '../../../../utils/Apis/axios';
+import MockAdapter from 'axios-mock-adapter';
 
 const BOOLEAN_VALUE_EVALUATION_CONFIGURATION = {
   id: 1,
@@ -39,10 +36,25 @@ const wrapComponent = (configuration, onPress) => (
   </SCProvider>
 );
 
+jest.mock('../../../../context', () => ({
+  ...jest.requireActual('../../../../context'),
+  useSCContextSelector: jest.fn(),
+}));
+
+const mock = new MockAdapter(api.axiosInstance);
+
 describe('Test SetupConfigCondition', () => {
   const spyToastError = jest.spyOn(ToastBottomHelper, 'error');
 
   let tree;
+  useSCContextSelector.mockImplementation((selector) =>
+    selector({
+      automate: {
+        isCreateCondition: false,
+        isUpdateCondition: false,
+      },
+    })
+  );
   beforeEach(() => {
     tree = null;
     spyToastError.mockClear();
@@ -150,6 +162,14 @@ describe('Test SetupConfigCondition', () => {
   });
 
   it('choose config value evaluation', async () => {
+    useSCContextSelector.mockImplementation((selector) =>
+      selector({
+        automate: {
+          isCreateCondition: false,
+          isUpdateCondition: false,
+        },
+      })
+    );
     useRoute.mockReturnValue({
       params: {
         automate: {},
@@ -183,6 +203,14 @@ describe('Test SetupConfigCondition', () => {
   });
 
   const testCustomCondition = async (value) => {
+    useSCContextSelector.mockImplementation((selector) =>
+      selector({
+        automate: {
+          isCreateCondition: false,
+          isUpdateCondition: false,
+        },
+      })
+    );
     useRoute.mockReturnValue({
       params: {
         automate: {},
@@ -225,7 +253,7 @@ describe('Test SetupConfigCondition', () => {
     });
 
     const bottomButtonView = instance.findByProps({
-      testID: 'continue_button',
+      accessibilityLabel: AccessibilityLabel.BUTTON_CONTINUE,
     });
 
     await act(async () => {
@@ -273,7 +301,7 @@ describe('Test SetupConfigCondition', () => {
     });
 
     const bottomButtonView = instance.findByProps({
-      testID: 'continue_button',
+      accessibilityLabel: AccessibilityLabel.BUTTON_CONTINUE,
     });
 
     await act(async () => {
@@ -333,4 +361,81 @@ describe('Test SetupConfigCondition', () => {
       'Customize conditions'
     );
   });
+
+  it('test isCreateCondition success', async () => {
+    useSCContextSelector.mockImplementation((selector) =>
+      selector({
+        automate: {
+          isCreateCondition: true,
+          isUpdateCondition: false,
+        },
+      })
+    );
+    useRoute.mockReturnValue({
+      params: {
+        config: {
+          id: 1,
+          name: 'config name',
+          title: 'is below (<)',
+          value_evaluations: [BOOLEAN_VALUE_EVALUATION_CONFIGURATION],
+        },
+        automate: { id: 1 },
+        sensorData: [],
+      },
+    });
+    mock.onPost(API.AUTOMATE.ADD_CONDITION(1)).reply(200);
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+
+    const gridItems = instance.findAllByType(GridItem);
+    expect(gridItems).toHaveLength(3);
+    await act(async () => {
+      gridItems[0].props.onPress();
+    });
+
+    expect(global.mockedNavigate).toBeCalledWith({
+      name: 'ScriptDetail',
+      params: {
+        preAutomate: { condition: 'value_evaluation', id: 1, value: [1, 0] },
+      },
+    });
+  });
+
+  it('test isUpdateCondition fail', async () => {
+    useSCContextSelector.mockImplementation((selector) =>
+      selector({
+        automate: {
+          isCreateCondition: false,
+          isUpdateCondition: 1,
+        },
+      })
+    );
+    useRoute.mockReturnValue({
+      params: {
+        config: {
+          id: 1,
+          name: 'config name',
+          title: 'is below (<)',
+          value_evaluations: [BOOLEAN_VALUE_EVALUATION_CONFIGURATION],
+        },
+        automate: { id: 1 },
+        sensorData: [],
+      },
+    });
+    mock.onPut(API.AUTOMATE.UPDATE_CONDITION(1, 1)).reply(400);
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+
+    const gridItems = instance.findAllByType(GridItem);
+    expect(gridItems).toHaveLength(3);
+    await act(async () => {
+      gridItems[0].props.onPress();
+    });
+
+    expect(global.mockedNavigate).not.toBeCalled();
+  });
 });

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

@@ -1,5 +1,5 @@
 import { useNavigation } from '@react-navigation/native';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useContext, useState } from 'react';
 import { View } from 'react-native';
 import ItemAutomate from '../../../commons/Automate/ItemAutomate';
 import { HeaderCustom } from '../../../commons/Header';
@@ -8,9 +8,12 @@ import { useTranslations } from '../../../hooks/Common/useTranslations';
 import Routes from '../../../utils/Route';
 import styles from './styles/AddNewAutoSmartStyles';
 import { AUTOMATE_TYPE } from '../../../configs/Constants';
+import { SCContext } from '../../../context';
+import { Action } from '../../../context/actionType';
 
 const AddTypeSmart = ({ smartTypes, route }) => {
   const t = useTranslations();
+  const { setAction } = useContext(SCContext);
   const { navigate, goBack } = useNavigation();
   const { automate = {}, closeScreen } = route?.params || {};
   const { id, unit, type } = automate;
@@ -30,7 +33,8 @@ const AddTypeSmart = ({ smartTypes, route }) => {
         unitId: unit,
         closeScreen: closeScreen,
       };
-
+      setAction(Action.IS_CREATE_CONDITION, false);
+      setAction(Action.IS_UPDATE_CONDITION, false);
       if (!unit && dataAutomate.type === AUTOMATE_TYPE.VALUE_CHANGE) {
         navigate(Routes.SelectUnit, params);
         return;
@@ -38,7 +42,7 @@ const AddTypeSmart = ({ smartTypes, route }) => {
 
       navigate(dataAutomate.route, params);
     },
-    [smartTypes, automate, unit, closeScreen, navigate]
+    [smartTypes, automate, unit, closeScreen, setAction, navigate]
   );
 
   const onSelectType = (index) => {

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

@@ -0,0 +1,31 @@
+import { act, create } from 'react-test-renderer';
+
+import AddAutomationTypeSmart from '../AddAutomationTypeSmart';
+import AddTypeSmart from '../AddTypeSmart';
+import React from 'react';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <AddAutomationTypeSmart route={route} />
+  </SCProvider>
+);
+
+describe('test AddNewAutoSmart', () => {
+  let tree;
+  let route = {
+    params: {
+      automate: { unit: 1 },
+    },
+  };
+
+  it('test render AddNewAutoSmart', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const items = instance.findAllByType(AddTypeSmart);
+    expect(items).toHaveLength(1);
+  });
+});

package/src/screens/Automate/ScriptDetail/Components/DeleteCondition.js

@@ -0,0 +1,51 @@
+import React, { useCallback } from 'react';
+import { API, Colors } from '../../../../configs';
+import AlertAction from '../../../../commons/AlertAction';
+import { axiosDelete } from '../../../../utils/Apis/axios';
+import { ToastBottomHelper } from '../../../../utils/Utils';
+import { useTranslations } from '../../../../hooks/Common/useTranslations';
+import AccessibilityLabel from '../../../../configs/AccessibilityLabel';
+
+const DeleteCondition = ({
+  automate,
+  setAutomate,
+  condition,
+  isVisible,
+  setIsVisible,
+}) => {
+  const t = useTranslations();
+  const deleteScript = useCallback(async () => {
+    const { success } = await axiosDelete(
+      API.AUTOMATE.DELETE_CONDITION(automate.id, condition.id)
+    );
+    if (success) {
+      ToastBottomHelper.success(t('removed_successfully'));
+      const conditions = automate.conditions.filter(
+        (el) => el.id !== condition.id
+      );
+      setAutomate((prev) => ({ ...prev, conditions }));
+    } else {
+      ToastBottomHelper.error(t('remove_failed'));
+    }
+    setIsVisible({});
+  }, [automate, condition.id, setAutomate, setIsVisible, t]);
+
+  const hidePopup = () => setIsVisible({});
+
+  return (
+    <AlertAction
+      visible={isVisible}
+      hideModal={hidePopup}
+      title={t('title_delete_condition')}
+      message={t('message_delete_condition')}
+      leftButtonTitle={t('cancel')}
+      leftButtonClick={hidePopup}
+      rightButtonTitle={t('remove')}
+      rightButtonClick={deleteScript}
+      rightButtonStyle={{ color: Colors.Red6 }}
+      accessibilityLabel={AccessibilityLabel.AUTOMATE_DELETE_CONDITION}
+    />
+  );
+};
+
+export default DeleteCondition;

package/src/screens/Automate/ScriptDetail/Components/ModalAddCondition.js

@@ -0,0 +1,196 @@
+import React, { memo, useContext, useMemo } from 'react';
+
+import { useRoute } from '@react-navigation/native';
+
+import { ModalCustom } from '../../../../commons/Modal';
+import { StyleSheet, View } from 'react-native';
+import { Colors } from '../../../../configs';
+import { useTranslations } from '../../../../hooks/Common/useTranslations';
+import { useBackendPermission } from '../../../../utils/Permission/backend';
+import ValueChange from '../../../../../assets/images/Automation-fill.svg';
+import Schedule from '../../../../../assets/images/Schedule.svg';
+import { TouchableOpacity } from 'react-native';
+import { Text } from '../../../../commons';
+import Routes from '../../../../utils/Route';
+import AccessibilityLabel from '../../../../configs/AccessibilityLabel';
+import { SCContext } from '../../../../context';
+import { Action } from '../../../../context/actionType';
+
+const ModalAddCondition = memo(
+  ({ automate, isVisible, setIsVisible, numberActionAdded, navigate }) => {
+    const t = useTranslations();
+    const { setAction } = useContext(SCContext);
+    const { unit } = automate;
+    const { name: currentScreenName } = useRoute();
+    const permissions = useBackendPermission();
+    const { max_actions_per_automation } = permissions || {};
+
+    const listItem = useMemo(() => {
+      return [
+        {
+          id: 'time_frame',
+          text: t('time_frame'),
+          example: t('ex_time_frame'),
+          image: <Schedule />,
+          onClick: () => {
+            setIsVisible(false);
+            navigate(Routes.AddEditConditionSchedule, {
+              automate: automate,
+              closeScreen: Routes.ScriptDetail,
+            });
+          },
+        },
+        {
+          id: 'when_value_change',
+          text: t('when_value_change'),
+          example: t('ex_when_value_change'),
+          image: <ValueChange />,
+          onClick: () => {
+            setIsVisible(false);
+            const navParams = {
+              automate: automate,
+              closeScreen: currentScreenName,
+              numberActionCanAdd:
+                max_actions_per_automation - numberActionAdded,
+              routeName: unit ? null : Routes.SelectControlDevices,
+            };
+            setAction(Action.IS_UPDATE_CONDITION, false);
+            setAction(Action.IS_CREATE_CONDITION, true);
+            navigate(Routes.SelectMonitorDevices, navParams);
+            if (unit) {
+              navigate(Routes.SelectMonitorDevices, navParams);
+            } else {
+              navigate(Routes.SelectUnit, {
+                automate,
+                routeName: Routes.SelectMonitorDevices,
+              });
+            }
+          },
+        },
+      ];
+    }, [
+      automate,
+      currentScreenName,
+      max_actions_per_automation,
+      navigate,
+      numberActionAdded,
+      setAction,
+      setIsVisible,
+      t,
+      unit,
+    ]);
+
+    const hidePopup = () => setIsVisible(false);
+
+    return (
+      <ModalCustom
+        isVisible={isVisible}
+        onBackButtonPress={hidePopup}
+        onBackdropPress={hidePopup}
+        style={styles.container}
+      >
+        <View style={styles.popoverStyle}>
+          <View style={styles.modalWrapper}>
+            <View style={styles.modalHeader}>
+              <Text style={styles.modalHeaderText} semibold>
+                {t('add_condition')}
+              </Text>
+            </View>
+            {listItem.map((item, index) => {
+              return (
+                <View style={styles.rowItem} key={`rowItem-${index}`}>
+                  <TouchableOpacity
+                    onPress={item.onClick}
+                    accessibilityLabel={
+                      AccessibilityLabel.AUTOMATE_LIST_SCRIPT_ACTION
+                    }
+                  >
+                    <View style={styles.wapItem}>
+                      <View style={styles.imageItem}>{item.image}</View>
+                      <View style={styles.colItem}>
+                        <Text type="Body" semibold>
+                          {item.text}
+                        </Text>
+                        <Text style={styles.textItem} numberOfLines={1}>
+                          {item.example}
+                        </Text>
+                      </View>
+                    </View>
+                  </TouchableOpacity>
+                </View>
+              );
+            })}
+          </View>
+        </View>
+      </ModalCustom>
+    );
+  }
+);
+
+export default ModalAddCondition;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    margin: 0,
+  },
+  popoverStyle: {
+    width: '100%',
+    backgroundColor: Colors.White,
+    bottom: 0,
+    left: 0,
+    position: 'absolute',
+    borderRadius: 10,
+    paddingBottom: 50,
+  },
+  modalWrapper: {
+    flex: 1,
+    flexDirection: 'column',
+    backgroundColor: Colors.White,
+    borderRadius: 10,
+  },
+  modalHeader: {
+    padding: 16,
+    marginBottom: 10,
+    backgroundColor: Colors.White,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderBottomWidth: 1,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    borderColor: Colors.Gray4,
+  },
+  modalHeaderText: {
+    fontSize: 16,
+    lineHeight: 24,
+    color: Colors.Gray9,
+  },
+  rowItem: {
+    padding: 16,
+    marginBottom: 10,
+    marginHorizontal: 10,
+    backgroundColor: Colors.White,
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+  },
+  wapItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  imageItem: {
+    width: '10%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 20,
+  },
+  colItem: {
+    flex: 1,
+    flexDirection: 'column',
+  },
+  textItem: {
+    color: Colors.Gray8,
+    fontSize: 12,
+  },
+});