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

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/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,
+  },
+});

package/src/screens/Automate/ScriptDetail/Styles/indexStyles.js

@@ -57,9 +57,15 @@ export default StyleSheet.create({
   },
   editButton: {
     height: 40,
+    paddingLeft: 40,
     justifyContent: 'center',
     alignItems: 'center',
   },
+  rowActionList: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
   moreButton: {
     marginLeft: -5,
   },
@@ -183,6 +189,12 @@ export default StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  width30: {
+    width: '30%',
+  },
+  width40: {
+    width: '40%',
+  },
   width50: {
     width: '50%',
   },
@@ -198,6 +210,12 @@ export default StyleSheet.create({
     maxWidth: 190,
     marginRight: 5,
   },
+  boxCondition: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    maxWidth: 210,
+    marginRight: 5,
+  },
   card: {
     marginRight: 0,
     padding: 10,