@eohjsc/react-native-smart-city 0.7.7 → 0.7.9

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

@@ -8,6 +8,7 @@ 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 Email from '../../../../assets/images/Email.svg';
 import Rearrange from '../../../../assets/images/Rearrange.svg';
 import { FullLoading } from '../../../commons';
 import FImage from '../../../commons/FImage';
@@ -23,6 +24,7 @@ import { ToastBottomHelper } from '../../../utils/Utils';
 import styles from './Styles/indexStyles';
 import UpdateDelayScript from './UpdateDelayScript';
 import UpdateNotifyScript from './UpdateNotifyScript';
+import UpdateEmailScript from './UpdateEmailScript';
 
 const EditActionsList = () => {
   const t = useTranslations();
@@ -138,7 +140,7 @@ const EditActionsList = () => {
     ({ item, getIndex, drag, isActive }) => {
       const index = getIndex();
       const paddedIndex = (index + 1).toString().padStart(2, '0');
-      const { action_script, notify_script, delay_script } = item;
+      const { action_script, notify_script, delay_script, email_script } = item;
       if (action_script) {
         const {
           sensor_icon_kit,
@@ -236,6 +238,37 @@ const EditActionsList = () => {
           />
         );
       }
+      if (email_script) {
+        const { title, message, str_emails } = email_script;
+
+        return (
+          <CommonItem
+            paddedIndex={paddedIndex}
+            icon={
+              <View style={styles.iconItem}>
+                <Email />
+              </View>
+            }
+            content={
+              <>
+                <Text numberOfLines={1} type="H4" color={Colors.Gray9} semibold>
+                  {title}
+                </Text>
+                <Text numberOfLines={1} type="H4" color={Colors.Gray9}>
+                  {message}
+                </Text>
+                <Text numberOfLines={1} type="H4" color={Colors.Gray9}>
+                  {str_emails}
+                </Text>
+              </>
+            }
+            onPress={() => onPressRemove(item)}
+            onPressUpdate={() => onShowPopupUpdate(item, index)}
+            isActive={isActive}
+            drag={drag}
+          />
+        );
+      }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [needRefresh]
@@ -246,6 +279,7 @@ const EditActionsList = () => {
       action_script,
       notify_script,
       delay_script,
+      email_script,
       id: scriptItemId,
     } = scriptItem;
 
@@ -294,6 +328,18 @@ const EditActionsList = () => {
         />
       );
     }
+    if (email_script) {
+      return (
+        <UpdateEmailScript
+          unitId={unitId}
+          automateId={id}
+          scriptItemId={scriptItemId}
+          email_script={email_script}
+          t={t}
+          onClosePopup={onClosePopup}
+        />
+      );
+    }
   }, [actionsList, id, navigate, scriptItem, t, unitId, updateIndex]);
 
   const onDragEnd = useCallback(
@@ -309,7 +355,8 @@ const EditActionsList = () => {
   );
 
   const renderMessageRemove = useMemo(() => {
-    const { action_script, notify_script, delay_script } = itemRemove;
+    const { action_script, notify_script, delay_script, email_script } =
+      itemRemove;
     if (action_script) {
       return (
         <ParsedText
@@ -353,6 +400,16 @@ const EditActionsList = () => {
         </ParsedText>
       );
     }
+    if (email_script) {
+      return (
+        <ParsedText
+          style={styles.messageDelete}
+          childrenProps={{ allowFontScaling: false }}
+        >
+          {t('message_delete_notify', { title: email_script.title })}
+        </ParsedText>
+      );
+    }
   }, [itemRemove, t]);
 
   return (

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

@@ -10,6 +10,7 @@ import { useBackendPermission } from '../../../../utils/Permission/backend';
 import Event from '../../../../../assets/images/Event.svg';
 import Notify from '../../../../../assets/images/Notify.svg';
 import Delay from '../../../../../assets/images/Delay.svg';
+import Email from '../../../../../assets/images/Email.svg';
 import { TouchableOpacity } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { Text } from '../../../../commons';
@@ -79,6 +80,25 @@ const AddActionScript = memo(
             });
           },
         },
+        {
+          id: 'send_email',
+          text: t('send_email'),
+          image: <Email />,
+          onClick: () => {
+            setIsVisible(false);
+            if (unit) {
+              navigate(Routes.SetupScriptEmail, {
+                automate,
+                unitId: unit,
+              });
+            } else {
+              navigate(Routes.SelectUnit, {
+                automate,
+                routeName: Routes.SetupScriptEmail,
+              });
+            }
+          },
+        },
       ];
     }, [
       automate,

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

@@ -101,13 +101,15 @@ export default StyleSheet.create({
   },
   rightItem: {
     flex: 1,
-    marginLeft: 4,
-    borderRadius: 4,
     borderColor: Colors.Gray4,
     borderWidth: 1,
-    flexDirection: 'row',
+    borderRadius: 4,
     paddingVertical: 15,
     paddingHorizontal: 16,
+    marginLeft: 4,
+  },
+  insideItemRight: {
+    flexDirection: 'row',
   },
   rightItemAdd: {
     flex: 1,

package/src/screens/Automate/ScriptDetail/__test__/index.test.js

@@ -38,10 +38,13 @@ describe('Test ScriptDetail', () => {
   let tree;
 
   const mockGoBack = useNavigation().goBack;
+  const mockAddListener = useNavigation().addListener;
   const mockedNavigate = useNavigation().navigate;
   beforeEach(() => {
     mockGoBack.mockClear();
+    mockAddListener.mockClear();
     mockedNavigate.mockClear();
+    global.mockedNavigate.mockClear();
     mock.reset();
     route = {
       params: {
@@ -91,6 +94,16 @@ describe('Test ScriptDetail', () => {
           notify_script: null,
           delay_script: { delay: 10 },
         },
+        {
+          action_script: null,
+          notify_script: null,
+          email_script: {
+            title: 'title',
+            message: 'message',
+            unit_id: 60,
+            str_emails: 'email0@eoh.io',
+          },
+        },
       ],
     };
   });
@@ -165,12 +178,12 @@ describe('Test ScriptDetail', () => {
     await act(async () => {
       await menu.props.onPress();
     });
-    expect(spyToastError).toBeCalledWith(
+    expect(spyToastError).toHaveBeenCalledWith(
       getTranslate('en', 'only_owner_has_permission_to_edit_this_script')
     );
   });
 
-  it('test cannot change type script', async () => {
+  it('test cannot edit condition because not owner', async () => {
     route.params.preAutomate.can_edit = false;
     const spyToastError = jest.spyOn(ToastBottomHelper, 'error');
 
@@ -194,14 +207,46 @@ describe('Test ScriptDetail', () => {
 
     await act(async () => {
       menuActionMore.props.onItemClick({ doAction: jest.fn() });
-      menuActionMore.props.listMenuItem[1].doAction();
+      menuActionMore.props.listMenuItem[0].doAction();
     });
 
-    expect(spyToastError).toBeCalledWith(
+    expect(spyToastError).toHaveBeenCalledWith(
       getTranslate('en', 'only_owner_has_permission_to_edit_this_script')
     );
   });
 
+  it('test cannot edit condition because script disabled', async () => {
+    route.params.preAutomate.script.enable = false;
+    const spyToastError = jest.spyOn(ToastBottomHelper, 'error');
+
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const button = instance.find(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.ICON_MENU_POPUP &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      await button.props.onPress();
+    });
+
+    const menuActionMore = instance.find(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.MENU_POPPER_MORE_2
+    );
+
+    await act(async () => {
+      menuActionMore.props.onItemClick({ doAction: jest.fn() });
+      menuActionMore.props.listMenuItem[0].doAction();
+    });
+
+    expect(spyToastError).toBeCalledWith(
+      getTranslate('en', 'this_script_has_been_disabled')
+    );
+  });
+
   it('test delete script', async () => {
     await act(async () => {
       tree = await create(wrapComponent(route));
@@ -322,7 +367,7 @@ describe('Test ScriptDetail', () => {
           AccessibilityLabel.AUTOMATE_LIST_SCRIPT_ACTION &&
         el.type === TouchableOpacity
     );
-    expect(listScriptActions).toHaveLength(3);
+    expect(listScriptActions).toHaveLength(4);
     await act(async () => {
       await listScriptActions[0].props.onPress();
     });
@@ -360,6 +405,18 @@ describe('Test ScriptDetail', () => {
         automate: route.params.preAutomate,
       }
     );
+    mockedNavigate.mockClear();
+    await act(async () => {
+      await listScriptActions[3].props.onPress();
+    });
+
+    expect(global.mockedNavigate).toHaveBeenCalledWith(
+      Routes.SetupScriptEmail,
+      {
+        automate: route.params.preAutomate,
+        unitId: route.params.preAutomate.unit,
+      }
+    );
   });
 
   it('test press disable script', async () => {
@@ -418,8 +475,8 @@ describe('Test ScriptDetail', () => {
     await act(async () => {
       await button.props.onPress();
     });
-    expect(global.mockedNavigate).not.toBeCalled();
-    expect(spyToastError).toBeCalledWith(
+    expect(global.mockedNavigate).not.toHaveBeenCalled();
+    expect(spyToastError).toHaveBeenCalledWith(
       getTranslate('en', 'reach_max_actions_per_automation', { length: 0 }),
       '',
       7000
@@ -500,21 +557,24 @@ describe('Test ScriptDetail', () => {
   _testGoToActivityLog(3, AUTOMATE_TYPE.VALUE_CHANGE, 'automate', undefined);
 
   it('Test render textCondition value change >', async () => {
+    const automate = {
+      can_edit: true,
+      type: AUTOMATE_TYPE.VALUE_CHANGE,
+      value_change: {
+        config_name: 'Light Value',
+        value: 3,
+        condition: '>',
+        end_device_id: 1,
+        unit_id: 1,
+      },
+      script: {
+        name: 'name',
+        enable: true,
+      },
+    };
     route.params = {
       ...route.params,
-      preAutomate: {
-        can_edit: true,
-        type: AUTOMATE_TYPE.VALUE_CHANGE,
-        value_change: {
-          config_name: 'Light Value',
-          value: 3,
-          condition: '>',
-        },
-        script: {
-          name: 'name',
-          enable: true,
-        },
-      },
+      preAutomate: automate,
     };
     await act(async () => {
       tree = await create(wrapComponent(route));
@@ -534,9 +594,29 @@ describe('Test ScriptDetail', () => {
     );
     await act(async () => {
       menuActionMore.props.onItemClick({ doAction: jest.fn() });
+      menuActionMore.props.listMenuItem[2].doAction();
+    });
+    expect(global.mockedNavigate).toBeCalledWith(Routes.AddUnknownTypeSmart, {
+      automate,
+      closeScreen: undefined,
+    });
+    global.mockedNavigate.mockClear();
+    expect(menuActionMore.props.listMenuItem[0].text).toEqual('Device display');
+    await act(async () => {
       menuActionMore.props.listMenuItem[0].doAction();
     });
-    expect(global.mockedNavigate).toBeCalled();
+    expect(global.mockedNavigate).toBeCalledWith(Routes.DeviceDetail, {
+      sensorId: 1,
+      unitId: 1,
+    });
+    global.mockedNavigate.mockClear();
+    expect(menuActionMore.props.listMenuItem[1].text).toEqual('Unit');
+    await act(async () => {
+      menuActionMore.props.listMenuItem[1].doAction();
+    });
+    expect(global.mockedNavigate).toBeCalledWith(Routes.UnitDetail, {
+      unitId: 1,
+    });
   });
 
   it('Test render textCondition value change =', async () => {
@@ -623,4 +703,30 @@ describe('Test ScriptDetail', () => {
       'Mon, Tue, Thu, Sat at 19:00'
     );
   });
+
+  it('test navigate to UnitDetail on event beforeRemove', async () => {
+    route.params.closeScreen = Routes.UnitDetail;
+    route.params.preAutomate.unit = 2;
+
+    await act(async () => {
+      await create(wrapComponent(route));
+    });
+
+    // beforeRemove test when swipe to back
+    const navigation = useNavigation();
+    const beforeRemoveEvent = { preventDefault: jest.fn() };
+    const beforeRemoveListener = navigation.addListener.mock.calls.find(
+      ([event]) => event === 'beforeRemove'
+    )[1];
+
+    await act(async () => {
+      beforeRemoveListener(beforeRemoveEvent);
+    });
+
+    expect(mockAddListener).toHaveBeenCalled();
+    expect(beforeRemoveEvent.preventDefault).toHaveBeenCalled();
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.UnitDetail, {
+      unitId: 2,
+    });
+  });
 });

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

@@ -14,6 +14,7 @@ import { useIsFocused, useNavigation } from '@react-navigation/native';
 import Add from '../../../../assets/images/Add.svg';
 import Delay from '../../../../assets/images/Delay.svg';
 import Notify from '../../../../assets/images/Notify.svg';
+import Email from '../../../../assets/images/Email.svg';
 import IconComponent from '../../../commons/IconComponent';
 import MenuActionMore from '../../../commons/MenuActionMore';
 import WrapHeaderScrollable from '../../../commons/Sharing/WrapHeaderScrollable';
@@ -22,7 +23,7 @@ import withPreventDoubleClick from '../../../commons/WithPreventDoubleClick';
 import { API, Colors } from '../../../configs';
 import { AccessibilityLabel, AUTOMATE_TYPE } from '../../../configs/Constants';
 import Images from '../../../configs/Images';
-import { usePopover } from '../../../hooks/Common';
+import { useBlockBack, usePopover } from '../../../hooks/Common';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { axiosGet, axiosPost } from '../../../utils/Apis/axios';
 import { useBackendPermission } from '../../../utils/Permission/backend';
@@ -127,7 +128,16 @@ const ScriptDetail = ({ route }) => {
     const items = [
       { text: t('edit_condition'), doAction: () => handleUpdateAutomate() },
     ];
-    if (value_change) {
+    if (unit_id) {
+      items.unshift({
+        text: t('text_unit'),
+        doAction: () =>
+          navigate(Routes.UnitDetail, {
+            unitId: unit_id,
+          }),
+      });
+    }
+    if (end_device_id) {
       items.unshift({
         text: t('device_display'),
         doAction: () =>
@@ -138,7 +148,7 @@ const ScriptDetail = ({ route }) => {
       });
     }
     return items;
-  }, [t, handleUpdateAutomate, value_change, navigate, unit_id, end_device_id]);
+  }, [t, handleUpdateAutomate, navigate, unit_id, end_device_id]);
 
   const handleShowMenuAction = useCallback(() => {
     if (!can_edit) {
@@ -219,6 +229,8 @@ const ScriptDetail = ({ route }) => {
     [automateId]
   );
 
+  useBlockBack(handleGoBack);
+
   useEffect(() => {
     if (isFocused) {
       fetchAutomate();
@@ -385,7 +397,7 @@ const ScriptDetail = ({ route }) => {
 const Item = ({ item, index, enableScript, t }) => {
   const color = enableScript ? Colors.Gray9 : Colors.Gray7;
   const paddedIndex = (index + 1).toString().padStart(2, '0');
-  const { action_script, notify_script, delay_script } = item;
+  const { action_script, notify_script, delay_script, email_script } = item;
   if (action_script) {
     const {
       sensor_icon_kit,
@@ -444,16 +456,18 @@ const Item = ({ item, index, enableScript, t }) => {
           </Text>
         </View>
         <View style={styles.rightItem}>
-          <View style={styles.iconEndDevice}>
-            <Notify />
-          </View>
-          <View style={styles.contentItem}>
-            <Text numberOfLines={1} type="H4" color={color} semibold>
-              {title}
-            </Text>
-            <Text numberOfLines={1} type="H4" color={color}>
-              {message}
-            </Text>
+          <View style={styles.insideItemRight}>
+            <View style={styles.iconEndDevice}>
+              <Notify />
+            </View>
+            <View style={styles.contentItem}>
+              <Text numberOfLines={1} type="H4" color={color} semibold>
+                {title}
+              </Text>
+              <Text numberOfLines={1} type="H4" color={color}>
+                {message}
+              </Text>
+            </View>
           </View>
         </View>
       </View>
@@ -482,6 +496,35 @@ const Item = ({ item, index, enableScript, t }) => {
         </View>
       </View>
     );
+  } else if (email_script) {
+    const { title, message, str_emails } = email_script;
+    return (
+      <View style={styles.wrapItem}>
+        <View style={styles.leftItem}>
+          <Text color={color} type="H4" semibold>
+            {paddedIndex}
+          </Text>
+        </View>
+        <View style={styles.rightItem}>
+          <View style={styles.insideItemRight}>
+            <View style={styles.iconEndDevice}>
+              <Email />
+            </View>
+            <View style={styles.contentItem}>
+              <Text numberOfLines={1} type="H4" color={color} semibold>
+                {title}
+              </Text>
+              <Text numberOfLines={1} type="H4" color={color}>
+                {message}
+              </Text>
+            </View>
+          </View>
+          <Text numberOfLines={1} type="H4" color={color}>
+            {str_emails}
+          </Text>
+        </View>
+      </View>
+    );
   }
 };
 

package/src/screens/Device/__test__/sensorDisplayItem.test.js

@@ -17,6 +17,7 @@ import DeviceAlertStatus from '../../../commons/Device/DeviceAlertStatus';
 import MockAdapter from 'axios-mock-adapter';
 import api from '../../../utils/Apis/axios';
 import CurrentRainSensor from '../../../commons/Device/RainningSensor/CurrentRainSensor';
+import LabelValue from '../../../commons/Device/LabelValue';
 
 jest.mock('../../../iot/states', () => ({
   useConfigGlobalState: () => [{}, null],
@@ -410,4 +411,25 @@ describe('Test SensorDisplayItem', () => {
       isWidgetOrder: undefined,
     });
   });
+  it('test render LabelValue', async () => {
+    const item = {
+      id: 10452,
+      order: 0,
+      template: 'LabelValue',
+      configuration: {},
+      is_configuration_ready: true,
+    };
+
+    const sensor = {
+      name: 'Sensor name',
+      is_managed_by_backend: false,
+    };
+
+    await act(async () => {
+      tree = await renderer.create(wrapComponent({ item, sensor }));
+    });
+    const instance = tree.root;
+    const displayItems = instance.findAllByType(LabelValue);
+    expect(displayItems).toHaveLength(1);
+  });
 });

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

@@ -8,6 +8,7 @@ import FlatListItems from '../../../commons/Device/FlatListItems';
 import FooterInfo from '../../../commons/Device/FooterInfo';
 import PMSensorIndicator from '../../../commons/Device/PMSensor/PMSensorIndicator';
 import ProgressBar from '../../../commons/Device/ProgressBar';
+import LabelValue from '../../../commons/Device/LabelValue';
 import CurrentRainSensor from '../../../commons/Device/RainningSensor/CurrentRainSensor';
 import ListQualityIndicator from '../../../commons/Device/WaterQualitySensor/ListQualityIndicator';
 import Compass from '../../../commons/Device/WindDirection/Compass';
@@ -216,6 +217,15 @@ export const SensorDisplayItem = ({
           isWidgetOrder={isWidgetOrder}
         />
       );
+    // use the same method to get data for circle_mini
+    case 'LabelValue':
+      return (
+        <LabelValue
+          data={getDataCircleMini(item)}
+          item={item}
+          isWidgetOrder={isWidgetOrder}
+        />
+      );
     case 'value':
       switch (type || template) {
         case 'circle':

package/src/screens/SharedUnit/index.js

@@ -7,7 +7,7 @@ import { useTranslations } from '../../hooks/Common/useTranslations';
 import { API } from '../../configs';
 import Text from '../../commons/Text';
 import SharedUnit from '../../commons/Unit/SharedUnit';
-import { useBlockBackAndroid } from '../../hooks/Common';
+import { useBlockBack } from '../../hooks/Common';
 import { AccessibilityLabel } from '../../configs/Constants';
 
 import styles from './styles';
@@ -17,7 +17,7 @@ import { ModalCustom } from '../../commons/Modal';
 import useTitleHeader from '../../hooks/Common/useTitleHeader';
 
 const Shared = () => {
-  useBlockBackAndroid();
+  useBlockBack();
   const t = useTranslations();
   useTitleHeader(t('text_shared_with_me'));
   const navigation = useNavigation();