@eohjsc/react-native-smart-city 0.4.85 → 0.4.87

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

@@ -23,6 +23,8 @@ import api from '../../../../utils/Apis/axios';
 import Text from '../../../../commons/Text';
 import { ToastBottomHelper } from '../../../../utils/Utils';
 import { getTranslate } from '../../../../utils/I18n';
+import AddActionScript from '../Components/AddActionScript';
+import { Switch } from '@ant-design/react-native';
 
 const wrapComponent = (route, storeData = {}) => (
   <SCProvider initState={mockSCStore(storeData)}>
@@ -60,18 +62,29 @@ describe('Test ScriptDetail', () => {
             sensor_id: 73,
             value: 35,
           },
+          script: {
+            name: 'name',
+            enable: true,
+          },
         },
       },
     };
     data = {
       is_star: false,
-      script_actions: [
+      script_items: [
         {
-          id: 1,
-          sensor_icon_kit: 'icon',
-          station_name: 'station',
-          sensor_name: 'sensor',
-          action_name: 'action',
+          action_script: {
+            id: 1,
+            sensor_icon_kit: 'icon',
+            station_name: 'station',
+            sensor_name: 'sensor',
+            action_name: 'action',
+          },
+          notify_script: null,
+        },
+        {
+          action_script: null,
+          notify_script: { title: 'title' },
         },
       ],
     };
@@ -243,6 +256,7 @@ describe('Test ScriptDetail', () => {
       {
         id: 1,
         unit: 1,
+        script_items: null,
       },
     ];
     mock.onGet(API.AUTOMATE.SCRIPT(1)).reply(200, data);
@@ -268,11 +282,62 @@ describe('Test ScriptDetail', () => {
     await act(async () => {
       await button.props.onPress();
     });
+    const texts = instance.findByType(AddActionScript);
+    expect(texts.props.isVisible).toBeTruthy();
+
+    const listScriptActions = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.AUTOMATE_LIST_SCRIPT_ACTION &&
+        el.type === TouchableOpacity
+    );
+    expect(listScriptActions).toHaveLength(2);
+    await act(async () => {
+      await listScriptActions[0].props.onPress();
+    });
+
     expect(mockNavigate).toHaveBeenCalledWith(Routes.SelectControlDevices, {
       unitId: route.params.preAutomate.unit,
       automateId: route.params.preAutomate.id,
       numberActionCanAdd: 2,
     });
+    mockNavigate.mockClear();
+    await act(async () => {
+      await listScriptActions[1].props.onPress();
+    });
+
+    expect(mockNavigate).toHaveBeenCalledWith(Routes.SetupScriptNotify, {
+      automate: route.params.preAutomate,
+      unitId: route.params.preAutomate.unit,
+    });
+  });
+
+  it('test press disable script', async () => {
+    mock.onGet(API.AUTOMATE.SCRIPT(1)).reply(200, data);
+    mock.onPost(API.AUTOMATE.ENABLE_SCRIPT(1)).reply(200, data);
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const switchButton = instance.findByType(Switch);
+    await act(async () => {
+      await switchButton.props.onChange(false);
+    });
+    const buttonAddScript = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.BUTTON_ADD_SCRIPT_ACTION &&
+        el.type === TouchableOpacity
+    );
+    expect(buttonAddScript).toHaveLength(0);
+
+    const buttonEditScript = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.BUTTON_EDIT_SCRIPT_ACTION &&
+        el.type === TouchableOpacity
+    );
+    expect(buttonEditScript).toHaveLength(0);
   });
 
   it('test press add action reach limit', async () => {
@@ -392,6 +457,10 @@ describe('Test ScriptDetail', () => {
           value: 3,
           condition: '>',
         },
+        script: {
+          name: 'name',
+          enable: true,
+        },
       },
     };
     await act(async () => {

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

@@ -8,7 +8,7 @@ import React, {
 import { Image, Platform, TouchableOpacity, View } from 'react-native';
 import { PopoverMode } from 'react-native-popover-view';
 import { IconFill, IconOutline } from '@ant-design/icons-react-native';
-import { Icon } from '@ant-design/react-native';
+import { Icon, Switch } from '@ant-design/react-native';
 
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import styles from './Styles/indexStyles';
@@ -19,7 +19,8 @@ import { usePopover } from '../../../hooks/Common';
 import { useStarredScript } from './hooks/useStarredScript';
 import MenuActionMore from '../../../commons/MenuActionMore';
 import Add from '../../../../assets/images/Add.svg';
-import { useNavigation, useRoute } from '@react-navigation/native';
+import Notify from '../../../../assets/images/Notify.svg';
+import { useNavigation } from '@react-navigation/native';
 import { axiosGet, axiosPost } from '../../../utils/Apis/axios';
 import Routes from '../../../utils/Route';
 import { ToastBottomHelper } from '../../../utils/Utils';
@@ -31,6 +32,7 @@ import DeleteScript from './Components/DeleteScript';
 import Images from '../../../configs/Images';
 import { useBackendPermission } from '../../../utils/Permission/backend';
 import IconComponent from '../../../commons/IconComponent';
+import AddActionScript from './Components/AddActionScript';
 
 const PreventDoubleTouch = withPreventDoubleClick(TouchableOpacity);
 
@@ -48,26 +50,29 @@ const ScriptDetail = ({ route }) => {
     newAutomate, // updated automate data
     newActionsList, // updated actions list
   } = params;
-
   const [automate, setAutomate] = useState(preAutomate);
   const [data, setData] = useState([]);
   const [isShowRename, setIsShowRename] = useState(false);
   const [isShowDelete, setIsShowDelete] = useState(false);
+  const [isShowAddAction, setIsShowAddAction] = useState(false);
 
+  const { script, type, name, unit, can_edit, id: automateId } = automate;
+  const { enable } = script || {};
+  const [enableScript, setEnableScript] = useState(enable);
   const onShowActivityLog = useCallback(() => {
     navigate(Routes.ActivityLog, {
       id: id,
       type:
-        automate?.type === AUTOMATE_TYPE.ONE_TAP
+        type === AUTOMATE_TYPE.ONE_TAP
           ? `automate.${AUTOMATE_TYPE.ONE_TAP}`
           : 'automate',
-      share: automate.unit,
+      share: unit,
       filterEnabled: {
         date: true,
-        user: Boolean(automate.unit),
+        user: Boolean(unit),
       },
     });
-  }, [navigate, id, automate?.type, automate.unit]);
+  }, [navigate, id, type, unit]);
 
   const listMenuItem = useMemo(
     () => [
@@ -85,14 +90,14 @@ const ScriptDetail = ({ route }) => {
   );
 
   const handleShowMenuAction = useCallback(() => {
-    if (!automate?.can_edit) {
+    if (!can_edit) {
       ToastBottomHelper.error(
         t('only_owner_has_permission_to_edit_this_script')
       );
       return;
     }
     showPopoverWithRef(refMenuAction);
-  }, [automate?.can_edit, showPopoverWithRef, t]);
+  }, [can_edit, showPopoverWithRef, t]);
 
   const onItemClick = useCallback((item) => {
     item.doAction();
@@ -100,9 +105,11 @@ const ScriptDetail = ({ route }) => {
 
   const fetchAutomateActions = useCallback(async () => {
     const { success, data: automateData } = await axiosGet(
-      API.AUTOMATE.SCRIPT(id)
+      API.AUTOMATE.SCRIPT_ITEMS(id)
     );
-    success && setData(automateData?.script_actions || []);
+    if (success) {
+      setData(automateData.script_items || []);
+    }
   }, [id]);
 
   const fetchAutomate = useCallback(async () => {
@@ -130,17 +137,35 @@ const ScriptDetail = ({ route }) => {
   }, [id, t]);
 
   const handleUpdateAutomate = useCallback(async () => {
-    if (!automate?.can_edit) {
+    if (!can_edit) {
       ToastBottomHelper.error(
         t('only_owner_has_permission_to_edit_this_script')
       );
       return;
     }
+    if (!enableScript) {
+      ToastBottomHelper.error(t('this_script_has_been_disabled'));
+      return;
+    }
     navigate(Routes.AddUnknownTypeSmart, {
       automate,
       closeScreen: route.name,
     });
-  }, [automate, navigate, route.name, t]);
+  }, [automate, can_edit, enableScript, navigate, route.name, t]);
+
+  const onChangeSwitch = useCallback(
+    async (checked) => {
+      setEnableScript(checked);
+      const { success } = await axiosPost(
+        API.AUTOMATE.ENABLE_SCRIPT(automateId),
+        {
+          enable: checked,
+        }
+      );
+      success && setEnableScript(checked);
+    },
+    [automateId]
+  );
 
   useEffect(() => {
     fetchAutomate();
@@ -183,17 +208,27 @@ const ScriptDetail = ({ route }) => {
   return (
     <View style={styles.wrap}>
       <WrapHeaderScrollable
-        title={automate?.name}
+        title={name}
         headerAniStyle={styles.headerAniStyle}
         rightComponent={rightComponent}
         onGoBack={goBack}
       >
         <View style={styles.wrapContent}>
+          <View style={styles.row}>
+            <Text type="H3" semibold>
+              {t('enable_this_script')}
+            </Text>
+            <Switch checked={enableScript} onChange={onChangeSwitch} />
+          </View>
           <Text type="H3" semibold>
             {t('how_to_start')}
           </Text>
-          <ItemAutomate automate={automate} onPress={handleUpdateAutomate} />
-          {automate?.type === AUTOMATE_TYPE.ONE_TAP && (
+          <ItemAutomate
+            automate={automate}
+            enableScript={enableScript}
+            onPress={handleUpdateAutomate}
+          />
+          {type === AUTOMATE_TYPE.ONE_TAP && enableScript && (
             <TouchableOpacity
               onPress={handleScriptAction}
               style={styles.activeButton}
@@ -207,7 +242,7 @@ const ScriptDetail = ({ route }) => {
             <Text type="H3" color={Colors.Gray9} semibold>
               {t('active_list')}
             </Text>
-            {data.length > 0 && !!automate?.can_edit && (
+            {data.length > 0 && !!can_edit && !!enableScript && (
               <TouchableOpacity
                 onPress={onPressEdit}
                 style={styles.editButton}
@@ -222,10 +257,20 @@ const ScriptDetail = ({ route }) => {
             )}
           </View>
           {data.map((item, index) => (
-            <Item key={item?.id} item={item} index={index} />
+            <Item
+              key={item?.id}
+              item={item}
+              index={index}
+              enableScript={enableScript}
+              t={t}
+            />
           ))}
-          {!!automate?.can_edit && (
-            <ItemAdd automate={automate} numberActionAdded={data.length} />
+          {!!can_edit && !!enableScript && (
+            <ItemAdd
+              automate={automate}
+              numberActionAdded={data.length}
+              setIsShowAddAction={setIsShowAddAction}
+            />
           )}
         </View>
       </WrapHeaderScrollable>
@@ -241,6 +286,12 @@ const ScriptDetail = ({ route }) => {
           Platform.OS === 'ios' ? PopoverMode.JS_MODAL : PopoverMode.RN_MODAL
         }
       />
+      <AddActionScript
+        automate={automate}
+        numberActionAdded={data.length}
+        isVisible={isShowAddAction}
+        setIsVisible={setIsShowAddAction}
+      />
       <RenameScript
         automate={automate}
         setAutomate={setAutomate}
@@ -256,95 +307,107 @@ const ScriptDetail = ({ route }) => {
   );
 };
 
-const Item = ({ item, index }) => {
-  return (
-    <View style={styles.wrapItem}>
-      <View style={styles.leftItem}>
-        <Text color={Colors.Gray9} type="H4" semibold>
-          {index + 1 < 10 ? '0' + (index + 1) : index + 1}
-        </Text>
-      </View>
-      <View style={styles.rightItem}>
-        <IconComponent
-          icon={item?.sensor_icon_kit}
-          style={styles.iconEndDevice}
-        />
-        <View style={styles.contentItem}>
-          <View style={styles.titleItem}>
-            <Text
-              numberOfLines={1}
-              semibold
-              type="Label"
-              color={Colors.Gray7}
-              style={styles.paddingRight4}
-            >
-              {item?.unit_name}
+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 } = item;
+  if (action_script) {
+    const {
+      sensor_icon_kit,
+      unit_name,
+      station_name,
+      sensor_name,
+      action_name,
+    } = action_script;
+    return (
+      <View style={styles.wrapItem}>
+        <View style={styles.leftItem}>
+          <Text color={color} type="H4" semibold>
+            {paddedIndex}
+          </Text>
+        </View>
+        <View style={styles.rightItem}>
+          <IconComponent icon={sensor_icon_kit} style={styles.iconEndDevice} />
+          <View style={styles.contentItem}>
+            <View style={styles.titleItem}>
+              <Text
+                numberOfLines={1}
+                semibold
+                type="Label"
+                color={Colors.Gray7}
+                style={styles.paddingRight4}
+              >
+                {unit_name}
+              </Text>
+              <Text
+                numberOfLines={1}
+                type="Label"
+                color={Colors.Gray7}
+                style={styles.flex1}
+              >
+                {station_name}
+              </Text>
+            </View>
+            <Text numberOfLines={1} type="H4" color={color} semibold>
+              {sensor_name}
             </Text>
-            <Text
-              numberOfLines={1}
-              type="Label"
-              color={Colors.Gray7}
-              style={styles.flex1}
-            >
-              {item?.station_name}
+            <Text numberOfLines={1} type="H4" color={color}>
+              {action_name}
             </Text>
           </View>
-          <Text numberOfLines={1} type="H4" color={Colors.Gray9} semibold>
-            {item?.sensor_name}
-          </Text>
-          <Text numberOfLines={1} type="H4" color={Colors.Gray9}>
-            {item?.action_name}
+        </View>
+      </View>
+    );
+  } else if (notify_script) {
+    const { title } = notify_script;
+    return (
+      <View style={styles.wrapItem}>
+        <View style={styles.leftItem}>
+          <Text color={color} type="H4" semibold>
+            {paddedIndex}
           </Text>
         </View>
+        <View style={styles.rightItem}>
+          <Notify style={styles.iconEndDevice} />
+          <View style={styles.contentItem}>
+            <Text numberOfLines={1} type="H4" color={color} semibold>
+              {t('send_notification')}
+            </Text>
+            <Text numberOfLines={1} type="H4" color={color}>
+              {title}
+            </Text>
+          </View>
+        </View>
       </View>
-    </View>
-  );
+    );
+  }
 };
 
-const ItemAdd = ({ automate, numberActionAdded }) => {
+const ItemAdd = ({ automate, numberActionAdded, setIsShowAddAction }) => {
   const t = useTranslations();
-  const { navigate } = useNavigation();
   const permissions = useBackendPermission();
-  const { name: currentScreenName } = useRoute();
+  const { max_actions_per_automation } = permissions || {};
+  const paddedIndex = (numberActionAdded + 1).toString().padStart(2, '0');
 
   const onPressAddAction = useCallback(() => {
-    if (numberActionAdded >= permissions?.max_actions_per_automation) {
+    if (numberActionAdded >= max_actions_per_automation) {
       ToastBottomHelper.error(
         t('reach_max_actions_per_automation', {
-          length: permissions?.max_actions_per_automation,
+          length: max_actions_per_automation,
         }),
         '',
         7000
       );
       return;
     }
-    const navParams = {
-      unitId: automate.unit,
-      automateId: automate.id,
-      closeScreen: currentScreenName,
-      numberActionCanAdd:
-        permissions?.max_actions_per_automation - numberActionAdded,
-    };
-
-    navigate(
-      automate.unit ? Routes.SelectControlDevices : Routes.SelectUnit,
-      navParams
-    );
-  }, [
-    numberActionAdded,
-    permissions?.max_actions_per_automation,
-    automate.unit,
-    automate.id,
-    currentScreenName,
-    navigate,
-    t,
-  ]);
+    setIsShowAddAction(true);
+  }, [numberActionAdded, max_actions_per_automation, setIsShowAddAction, t]);
 
   return (
     <View style={styles.wrapItem}>
       <View style={styles.leftItemAdd}>
         <Text style={styles.number} type="H4" semibold color={Colors.Gray7}>
-          {(numberActionAdded + 1 < 10 ? '0' : '') + (numberActionAdded + 1)}
+          {paddedIndex}
         </Text>
       </View>
       <TouchableOpacity

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

@@ -22,12 +22,14 @@ export const generateAutomationDataConditionText = (
 };
 
 export const getAutomationData = (automate) => {
-  if ([AUTOMATE_TYPE.VALUE_CHANGE].includes(automate?.type)) {
-    return automate?.value_change || automate?.event_sensor;
-  } else if (automate?.type === AUTOMATE_TYPE.SCHEDULE) {
-    return automate?.schedule;
-  } else if ([AUTOMATE_TYPE.EVENT].includes(automate?.type)) {
-    return automate?.event || automate?.event_action || automate?.event_sensor;
+  const { type, event_sensor, event_action, schedule, event, value_change } =
+    automate;
+  if ([AUTOMATE_TYPE.VALUE_CHANGE].includes(type)) {
+    return value_change || event_sensor;
+  } else if (type === AUTOMATE_TYPE.SCHEDULE) {
+    return schedule;
+  } else if ([AUTOMATE_TYPE.EVENT].includes(type)) {
+    return event || event_action || event_sensor;
   }
   return null;
 };
@@ -58,8 +60,7 @@ const generateAutomationConditionValueEvaluation = (
   }
   let textEvent = '';
   if (config_name) {
-    const stateConditionData = null;
-    textEvent = `${config_name} - ${t(stateConditionData?.stateValue[value])}`;
+    textEvent = config_name;
   } else {
     textEvent = `${end_device_name} - ${action}`;
   }
@@ -75,8 +76,8 @@ export const generateAutomationConditionText = (
   if (!automateData) {
     return;
   }
-
-  if ([AUTOMATE_TYPE.VALUE_CHANGE].includes(automate?.type)) {
+  const { type } = automate;
+  if ([AUTOMATE_TYPE.VALUE_CHANGE].includes(type)) {
     const { condition, config_name, value } = automateData;
     if (condition === 'value_evaluation') {
       return generateAutomationConditionValueEvaluation(
@@ -95,7 +96,7 @@ export const generateAutomationConditionText = (
       text = 'equal';
     }
     return `${config_name} ${t(text)} ${value}`;
-  } else if (automate?.type === AUTOMATE_TYPE.SCHEDULE) {
+  } else if (type === AUTOMATE_TYPE.SCHEDULE) {
     const { repeat, time_repeat, date_repeat, weekday_repeat } = automateData;
     const time =
       time_repeat?.length >= 8

package/src/screens/Device/detail.js

@@ -603,9 +603,7 @@ const DeviceDetail = ({ route }) => {
         sensor?.is_managed_by_backend &&
         sensor?.device_type !== DEVICE_TYPE.LG_THINQ
       ) {
-        const updateInterval = setInterval(() => fetchValues(), 5000);
         fetchValues();
-        return () => clearInterval(updateInterval);
       } else {
         Object.keys(sensor).length > 1 &&
           setLoading((preState) => ({ ...preState, isConnected: false }));

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

@@ -13,6 +13,7 @@ import api from '../../../utils/Apis/axios';
 import { WrapHeaderScrollable } from '../../../commons';
 
 import { getPusher } from '../../../utils/Pusher';
+import { NOTIFICATION_TYPES } from '../../../configs/Constants';
 
 const wrapComponent = () => (
   <SCProvider initState={mockSCStore({})}>
@@ -164,4 +165,28 @@ describe('test Notification', () => {
     });
     expect(getPusher().unsubscribe).toBeCalledWith('private-user-1');
   });
+  it('test render trigger script notification', async () => {
+    const response = {
+      results: [
+        {
+          content_code: NOTIFICATION_TYPES.TRIGGER_SCRIPT_NOTIFY,
+          created_at: '2021-10-07T08:57:09.370286Z',
+          id: 12905,
+          is_read: true,
+          params: "{'unit_id': 1, 'content': 'EoH Office'}",
+          type: 'NEWS',
+        },
+      ],
+    };
+    mock
+      .onGet(API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1, ''))
+      .reply(200, response);
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const notificationItem = instance.findAllByType(NotificationItem);
+
+    expect(notificationItem).toHaveLength(1);
+  });
 });