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

package/assets/images/Delay.svg

@@ -0,0 +1,14 @@
+<svg width="21" height="34" viewBox="0 0 21 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0L0.0175004 10.2L7 17L0.0175004 23.817L0 34H21V23.8L14 17L21 10.217V0H0ZM17.5 24.65V30.6H3.5V24.65L10.5 17.85L17.5 24.65Z" fill="url(#paint0_linear_1913_17610)"/>
+<path d="M7.35 30.26H13.65C13.4294 28.5299 12.1032 27.2 10.5 27.2C8.89685 27.2 7.57059 28.5299 7.35 30.26Z" fill="url(#paint1_linear_1913_17610)"/>
+<defs>
+<linearGradient id="paint0_linear_1913_17610" x1="0" y1="0" x2="30.3834" y2="18.787" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2B6B9F"/>
+<stop offset="1" stop-color="#D5FFCB"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1913_17610" x1="0" y1="0" x2="30.3834" y2="18.787" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2B6B9F"/>
+<stop offset="1" stop-color="#D5FFCB"/>
+</linearGradient>
+</defs>
+</svg>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.4.87",
+  "version": "0.4.89",
   "description": "TODO",
   "main": "index.js",
   "files": [

package/src/commons/Action/ItemQuickAction.js

@@ -1,5 +1,5 @@
 import React, { memo, useCallback, useEffect, useState } from 'react';
-import { Platform, TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import { AccessibilityLabel } from '../../configs/Constants';
 import { useSCContextSelector } from '../../context';
 import { useRemoteControl } from '../../hooks/IoT';
@@ -115,7 +115,7 @@ const ItemQuickAction = memo(({ sensor, wrapperStyle, setStatus }) => {
         <IconComponent
           icon={action?.icon_kit || action?.icon || 'PoweroffOutlined'}
           isOn={isOn}
-          size={Platform.OS === 'ios' ? 20 : 30}
+          size={20}
         />
       </View>
     </TouchableOpacity>

package/src/commons/Device/ItemDevice.js

@@ -117,7 +117,11 @@ const ItemDevice = memo(
             <IconComponent icon={sensor?.icon_kit || sensor?.icon} />
           </TouchableOpacity>
           {!!canRenderQuickAction && (
-            <ItemQuickAction sensor={sensor} unit={unit} />
+            <ItemQuickAction
+              sensor={sensor}
+              unit={unit}
+              wrapperStyle={styles.quickAction}
+            />
           )}
         </View>
         <TouchableOpacity onPress={goToSensorDisplay}>
@@ -179,4 +183,13 @@ const styles = StyleSheet.create({
     height: 40,
     resizeMode: 'contain',
   },
+  quickAction: {
+    width: 32,
+    height: 32,
+    backgroundColor: Colors.Gray3,
+    borderRadius: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginLeft: 5,
+  },
 });

package/src/commons/IconComponent/index.js

@@ -16,8 +16,8 @@ const IconComponent = memo(
     colorInActive,
   }) => {
     let extraStyle = {
-      width: size,
-      height: size,
+      width: size + 10,
+      height: size + 10,
     };
     const displayIcon = useMemo(() => {
       let newIcon = `${icon}`;
@@ -66,7 +66,7 @@ const IconComponent = memo(
           name={displayIcon}
           color={colorIcon}
           size={size}
-          style={[extraStyle, antIconStyle || style]}
+          style={[antIconStyle || style]}
         />
       );
     } else {
@@ -80,7 +80,7 @@ const IconComponent = memo(
           name={iconCT}
           color={colorIcon}
           size={size}
-          style={[extraStyle, antIconStyle || style]}
+          style={[antIconStyle || style]}
         />
       );
     }

package/src/commons/Sharing/WrapHeaderScrollable.js

@@ -7,8 +7,6 @@ import {
   View,
 } from 'react-native';
 import { ActivityIndicator } from '@ant-design/react-native';
-import { isIphoneX } from 'react-native-iphone-x-helper';
-
 import { Colors, Theme } from '../../configs';
 import HeaderAni, { heightHeader } from '../../commons/HeaderAni';
 import Text from '../../commons/Text';
@@ -83,7 +81,7 @@ const WrapHeaderScrollable = ({
           />
         }
         contentInset={{
-          top: heightHeader - (isIphoneX() ? 32 : 0),
+          top: heightHeader,
         }}
         contentOffset={{
           y: -heightHeader,
@@ -116,8 +114,8 @@ const styles = StyleSheet.create({
   scrollView: {
     flex: 1,
     paddingTop: Platform.select({
-      ios: 15,
-      android: heightHeader + 16,
+      ios: 0,
+      android: heightHeader,
     }),
   },
   contentContainerStyle: {

package/src/commons/UnitSummary/ConfigHistoryChart/index.js

@@ -32,6 +32,7 @@ export const useFetchConfigHistory = (configs, setChartData) => {
       validConfigs.forEach((item) => {
         params.append('configs', item.id);
       });
+
       params.append(
         'date_from',
         startDate.subtract(7, 'hours').format('YYYY-MM-DDTHH:mm:ss')

package/src/configs/API.js

@@ -100,6 +100,8 @@ const API = {
       `/property_manager/automate/${id}/add_script_action/`,
     ADD_SCRIPT_NOTIFY: (id) =>
       `/property_manager/automate/${id}/add_script_notify/`,
+    ADD_SCRIPT_DELAY: (id) =>
+      `/property_manager/automate/${id}/add_script_delay/`,
 
     FETCH_AUTOMATE: (automateId) => `/property_manager/automate/${automateId}/`,
     CREATE_AUTOMATE: () => '/property_manager/automate/',

package/src/configs/AccessibilityLabel.js

@@ -244,7 +244,7 @@ export default {
   AUTOMATE_LIST_SCRIPT_ACTION: 'AUTOMATE_LIST_SCRIPT_ACTION',
   AUTOMATE_TITLE_NOTIFY: 'AUTOMATE_TITLE_NOTIFY',
   AUTOMATE_MESSAGE_NOTIFY: 'AUTOMATE_MESSAGE_NOTIFY',
-
+  AUTOMATE_INPUT_DELAY: 'AUTOMATE_INPUT_DELAY',
   // Parking input maunaly spot
   PARKING_SPOT_INFO_BUTTON: 'PARKING_SPOT_INFO_BUTTON',
   PARKING_SPOT_CONFIRM_SPOT: 'PARKING_SPOT_CONFIRM_SPOT',

package/src/navigations/UnitStack.js

@@ -67,6 +67,7 @@ import ScenarioName from '../screens/Automate/Scenario/ScenarioName';
 import ValueChangeName from '../screens/Automate/ValueChange/ValueChangeName';
 import AddAutomationTypeSmart from '../screens/Automate/AddNewAutoSmart/AddAutomationTypeSmart';
 import SetupScriptNotify from '../screens/Automate/AddNewAction/SetupScriptNotify';
+import SetupScriptDelay from '../screens/Automate/AddNewAction/SetupScriptDelay';
 
 const Stack = createStackNavigator();
 
@@ -414,6 +415,13 @@ export const UnitStack = memo((props) => {
           headerShown: false,
         }}
       />
+      <Stack.Screen
+        name={Route.SetupScriptDelay}
+        component={SetupScriptDelay}
+        options={{
+          headerShown: false,
+        }}
+      />
       <Stack.Screen
         name={Route.AddAutomationTypeSmart}
         component={AddAutomationTypeSmart}

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

@@ -0,0 +1,81 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import styles from './Styles/SetupScriptDelayStyles';
+import { HeaderCustom } from '../../../commons';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+import _TextInput from '../../../commons/Form/TextInput';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+import BottomButtonView from '../../../commons/BottomButtonView';
+import { axiosPost } from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
+import { ToastBottomHelper } from '../../../utils/Utils';
+import Routes from '../../../utils/Route';
+import moment from 'moment';
+
+const SetupScriptDelay = ({ route }) => {
+  const t = useTranslations();
+  const { goBack, navigate } = useNavigation();
+  const { automate = {} } = route?.params || {};
+  const { id: automateId } = automate;
+  const [delay, setDelay] = useState();
+
+  const onChangeTitle = (value) => {
+    setDelay(value);
+  };
+
+  const onNext = useCallback(async () => {
+    const { success } = await axiosPost(
+      API.AUTOMATE.ADD_SCRIPT_DELAY(automateId),
+      {
+        delay,
+      }
+    );
+    if (success) {
+      ToastBottomHelper.success(t('text_done'));
+      navigate({
+        name: Routes.ScriptDetail,
+        merge: true,
+        params: { saveAt: moment().valueOf() },
+      });
+    } else {
+      ToastBottomHelper.error(t('text_done'));
+    }
+  }, [automateId, navigate, delay, t]);
+
+  const canSave = useMemo(() => {
+    const value = parseInt(delay);
+    if (!Number.isInteger(value) || value <= 0 || value > 3600) {
+      return false;
+    }
+    return true;
+  }, [delay]);
+
+  return (
+    <View style={styles.wrap}>
+      <HeaderCustom isShowClose onClose={goBack} title={t('wait')} />
+      <View style={styles.container}>
+        <_TextInput
+          label={t('set_timeout_seconds')}
+          placeholder={t('maximum_3600_seconds')}
+          keyboardType="numeric"
+          textInputStyle={styles.inputNumber}
+          value={delay}
+          onChange={onChangeTitle}
+          maxLength={4}
+          accessibilityLabel={AccessibilityLabel.AUTOMATE_INPUT_DELAY}
+          autoFocus
+        />
+        <BottomButtonView
+          style={styles.bottomButtonView}
+          mainTitle={t('save')}
+          onPressMain={onNext}
+          typeMain={canSave ? 'primary' : 'disabled'}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default SetupScriptDelay;

package/src/screens/Automate/AddNewAction/Styles/SetupScriptDelayStyles.js

@@ -0,0 +1,30 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../../configs';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  container: {
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 10,
+    paddingBottom: getBottomSpace() + 10,
+  },
+  inputNumber: {
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    borderStyle: 'solid',
+    borderRadius: 10,
+  },
+  bottomButtonView: {
+    paddingTop: 24,
+    paddingBottom: 32,
+
+    backgroundColor: Colors.White,
+    borderColor: Colors.ShadownTransparent,
+    borderTopWidth: 1,
+  },
+});

package/src/screens/Automate/AddNewAction/Styles/SetupScriptNotifyStyles.js

@@ -7,16 +7,6 @@ export default StyleSheet.create({
     flex: 1,
     backgroundColor: Colors.White,
   },
-  titleCreate: {
-    fontStyle: 'normal',
-    fontWeight: '600',
-    color: Colors.Gray9,
-  },
-  titleChoose: {
-    fontStyle: 'normal',
-    fontWeight: '400',
-    color: Colors.Gray8,
-  },
   container: {
     flex: 1,
     paddingHorizontal: 16,
@@ -39,19 +29,8 @@ export default StyleSheet.create({
   bottomButtonView: {
     paddingTop: 24,
     paddingBottom: 32,
-
     backgroundColor: Colors.White,
     borderColor: Colors.ShadownTransparent,
     borderTopWidth: 1,
   },
-  bottomButton: {
-    borderWidth: 0,
-    borderColor: Colors.Gray4,
-    paddingTop: 24,
-    paddingBottom: 24,
-    borderTopWidth: 1,
-    borderStyle: 'solid',
-    position: 'absolute',
-    bottom: 0,
-  },
 });

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

@@ -0,0 +1,95 @@
+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 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 { ToastBottomHelper } from '../../../../utils/Utils';
+import SetupScriptDelay from '../SetupScriptDelay';
+
+const mock = new MockAdapter(api.axiosInstance);
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <SetupScriptDelay route={route} />
+  </SCProvider>
+);
+
+describe('Test SetupScriptDelay', () => {
+  const mockedNavigate = useNavigation().navigate;
+
+  let tree;
+  const route = {
+    params: {
+      unitId: 1,
+      automateId: 1,
+      scriptName: 'scriptName test',
+      automate: {
+        id: 1,
+        sensor_id: 1,
+      },
+      closeScreen: Routes.ScriptDetail,
+    },
+  };
+  beforeEach(() => {
+    mockedNavigate.mockClear();
+    useRoute.mockImplementation(() => route);
+  });
+
+  it('SetupScriptDelay onPress create script delay success', async () => {
+    const spyToast = jest.spyOn(ToastBottomHelper, 'success');
+    mock.onPost(API.AUTOMATE.ADD_SCRIPT_DELAY(1)).reply(200);
+    await act(async () => {
+      tree = await renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const inputs = instance.findAllByType(_TextInput);
+    expect(inputs).toHaveLength(1);
+    const button = instance.findByType(BottomButtonView);
+    await act(async () => {
+      inputs[0].props.onChange('u');
+    });
+    expect(button.props.typeMain).toEqual('disabled');
+    await act(async () => {
+      inputs[0].props.onChange('0');
+    });
+    expect(button.props.typeMain).toEqual('disabled');
+    await act(async () => {
+      inputs[0].props.onChange('3601');
+    });
+    expect(button.props.typeMain).toEqual('disabled');
+    await act(async () => {
+      inputs[0].props.onChange('10');
+    });
+    expect(button.props.typeMain).toEqual('primary');
+    await act(async () => {
+      button.props.onPressMain();
+    });
+    expect(spyToast).toBeCalled();
+  });
+
+  it('SetupScriptDelay onPress create script notify error', async () => {
+    const spyToast = jest.spyOn(ToastBottomHelper, 'error');
+    mock.onPost(API.AUTOMATE.ADD_SCRIPT_DELAY(1)).reply(400);
+    await act(async () => {
+      tree = await renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const inputs = instance.findAllByType(_TextInput);
+    expect(inputs).toHaveLength(1);
+
+    await act(async () => {
+      inputs[0].props.onChange('12');
+    });
+    const button = instance.findByType(BottomButtonView);
+    await act(async () => {
+      button.props.onPressMain();
+    });
+    expect(spyToast).toBeCalled();
+  });
+});

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

@@ -20,7 +20,7 @@ const wrapComponent = (route) => (
   </SCProvider>
 );
 
-describe('Test SelectMonitorDevices', () => {
+describe('Test SetupScriptNotify', () => {
   const mockedNavigate = useNavigation().navigate;
 
   let tree;
@@ -30,6 +30,7 @@ describe('Test SelectMonitorDevices', () => {
       automateId: 1,
       scriptName: 'scriptName test',
       automate: {
+        id: 1,
         sensor_id: 1,
       },
       closeScreen: Routes.ScriptDetail,
@@ -42,7 +43,7 @@ describe('Test SelectMonitorDevices', () => {
 
   it('SetupScriptNotify onPress create script notify success', async () => {
     const spyToast = jest.spyOn(ToastBottomHelper, 'success');
-    mock.onPost(API.AUTOMATE.CREATE_SCRIPT_NOTIFY).reply(200);
+    mock.onPost(API.AUTOMATE.ADD_SCRIPT_NOTIFY(1)).reply(200);
     await act(async () => {
       tree = await renderer.create(wrapComponent(route));
     });
@@ -63,7 +64,7 @@ describe('Test SelectMonitorDevices', () => {
 
   it('SetupScriptNotify onPress create script notify error', async () => {
     const spyToast = jest.spyOn(ToastBottomHelper, 'error');
-    mock.onPost(API.AUTOMATE.CREATE_SCRIPT_NOTIFY).reply(400);
+    mock.onPost(API.AUTOMATE.ADD_SCRIPT_NOTIFY(1)).reply(400);
     await act(async () => {
       tree = await renderer.create(wrapComponent(route));
     });

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

@@ -52,9 +52,11 @@ export default StyleSheet.create({
     borderWidth: 0,
   },
   iconItem: {
-    width: 40,
-    height: 40,
-    marginRight: 24,
+    width: 35,
+    height: 35,
+    marginTop: 6,
+    marginRight: 15,
+    alignItems: 'center',
   },
   contentItem: {
     flex: 1,

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

@@ -34,11 +34,19 @@ describe('EditActionsList', () => {
             id: 1,
             action_script: { id: 1, sensor_name: 'abc', station_name: 'abc' },
             notify_script: null,
+            delay_script: null,
           },
           {
             id: 2,
             action_script: null,
             notify_script: { title: 'title' },
+            delay_script: null,
+          },
+          {
+            id: 3,
+            action_script: null,
+            notify_script: null,
+            delay_script: { delay: 10 },
           },
         ],
         id: 1,
@@ -106,7 +114,7 @@ describe('EditActionsList', () => {
           AccessibilityLabel.BUTTON_REMOVE_EDIT_ACTION_LIST &&
         el.type === TouchableOpacity
     );
-    expect(buttonRemoves).toHaveLength(2);
+    expect(buttonRemoves).toHaveLength(3);
   });
 
   it('EditActionsList modal onPress remove', async () => {

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

@@ -12,6 +12,7 @@ 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 } from '../../../commons/Modal';
@@ -112,7 +113,7 @@ const EditActionsList = memo(() => {
   );
   const renderItem = useCallback(({ item, index, drag, isActive }) => {
     const paddedIndex = (index + 1).toString().padStart(2, '0');
-    const { action_script, notify_script } = item;
+    const { action_script, notify_script, delay_script } = item;
     if (action_script) {
       const { sensor_icon_kit, station_name, sensor_name, action_name } =
         action_script;
@@ -155,19 +156,23 @@ const EditActionsList = memo(() => {
     }
 
     if (notify_script) {
-      const { title } = notify_script;
+      const { title, message } = notify_script;
 
       return (
         <CommonItem
           paddedIndex={paddedIndex}
-          icon={<Notify style={styles.iconItem} />}
+          icon={
+            <View style={styles.iconItem}>
+              <Notify />
+            </View>
+          }
           content={
             <>
               <Text numberOfLines={1} type="H4" color={Colors.Gray9} semibold>
-                {'Send notification'}
+                {title}
               </Text>
               <Text numberOfLines={1} type="H4" color={Colors.Gray9}>
-                {title}
+                {message}
               </Text>
             </>
           }
@@ -177,7 +182,33 @@ const EditActionsList = memo(() => {
         />
       );
     }
+    if (delay_script) {
+      const { delay } = delay_script;
 
+      return (
+        <CommonItem
+          paddedIndex={paddedIndex}
+          icon={
+            <View style={styles.iconItem}>
+              <Delay />
+            </View>
+          }
+          content={
+            <>
+              <Text numberOfLines={1} type="H4" color={Colors.Gray9} semibold>
+                {t('wait')}
+              </Text>
+              <Text numberOfLines={1} type="H4" color={Colors.Gray9}>
+                {t('wait_time_seconds', { delay })}
+              </Text>
+            </>
+          }
+          onPressRemove={() => onPressRemove(item)}
+          isActive={isActive}
+          drag={drag}
+        />
+      );
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

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

@@ -9,6 +9,7 @@ import { useTranslations } from '../../../../hooks/Common/useTranslations';
 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 { TouchableOpacity } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { Text } from '../../../../commons';
@@ -59,6 +60,17 @@ const AddActionScript = memo(
             });
           },
         },
+        {
+          id: 'delay_the_action',
+          text: t('delay_the_action'),
+          image: <Delay />,
+          onClick: () => {
+            setIsVisible(false);
+            navigate(Routes.SetupScriptDelay, {
+              automate,
+            });
+          },
+        },
       ];
     }, [
       automate,
@@ -160,7 +172,10 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   imageItem: {
-    width: '15%',
+    width: '10%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 20,
   },
   textItem: {
     width: '80%',

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

@@ -163,7 +163,9 @@ export default StyleSheet.create({
     flex: 1,
   },
   iconEndDevice: {
-    marginTop: 5,
+    width: 35,
+    height: 35,
+    marginTop: 6,
     marginRight: 15,
   },
 });

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

@@ -81,10 +81,17 @@ describe('Test ScriptDetail', () => {
             action_name: 'action',
           },
           notify_script: null,
+          delay_script: null,
         },
         {
           action_script: null,
           notify_script: { title: 'title' },
+          delay_script: null,
+        },
+        {
+          action_script: null,
+          notify_script: null,
+          delay_script: { delay: 10 },
         },
       ],
     };
@@ -291,7 +298,7 @@ describe('Test ScriptDetail', () => {
           AccessibilityLabel.AUTOMATE_LIST_SCRIPT_ACTION &&
         el.type === TouchableOpacity
     );
-    expect(listScriptActions).toHaveLength(2);
+    expect(listScriptActions).toHaveLength(3);
     await act(async () => {
       await listScriptActions[0].props.onPress();
     });
@@ -310,6 +317,14 @@ describe('Test ScriptDetail', () => {
       automate: route.params.preAutomate,
       unitId: route.params.preAutomate.unit,
     });
+    mockNavigate.mockClear();
+    await act(async () => {
+      await listScriptActions[2].props.onPress();
+    });
+
+    expect(mockNavigate).toHaveBeenCalledWith(Routes.SetupScriptDelay, {
+      automate: route.params.preAutomate,
+    });
   });
 
   it('test press disable script', async () => {

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

@@ -20,6 +20,7 @@ import { useStarredScript } from './hooks/useStarredScript';
 import MenuActionMore from '../../../commons/MenuActionMore';
 import Add from '../../../../assets/images/Add.svg';
 import Notify from '../../../../assets/images/Notify.svg';
+import Delay from '../../../../assets/images/Delay.svg';
 import { useNavigation } from '@react-navigation/native';
 import { axiosGet, axiosPost } from '../../../utils/Apis/axios';
 import Routes from '../../../utils/Route';
@@ -116,7 +117,10 @@ const ScriptDetail = ({ route }) => {
     const { success, data: automateData } = await axiosGet(
       API.AUTOMATE.FETCH_AUTOMATE(id)
     );
-    success && setAutomate(automateData);
+    if (success) {
+      setAutomate(automateData);
+      setEnableScript(automateData.script.enable);
+    }
   }, [id]);
 
   const onPressEdit = useCallback(() => {
@@ -310,7 +314,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 } = item;
+  const { action_script, notify_script, delay_script } = item;
   if (action_script) {
     const {
       sensor_icon_kit,
@@ -359,7 +363,7 @@ const Item = ({ item, index, enableScript, t }) => {
       </View>
     );
   } else if (notify_script) {
-    const { title } = notify_script;
+    const { title, message } = notify_script;
     return (
       <View style={styles.wrapItem}>
         <View style={styles.leftItem}>
@@ -368,13 +372,39 @@ const Item = ({ item, index, enableScript, t }) => {
           </Text>
         </View>
         <View style={styles.rightItem}>
-          <Notify style={styles.iconEndDevice} />
+          <View style={styles.iconEndDevice}>
+            <Notify />
+          </View>
           <View style={styles.contentItem}>
             <Text numberOfLines={1} type="H4" color={color} semibold>
-              {t('send_notification')}
+              {title}
             </Text>
             <Text numberOfLines={1} type="H4" color={color}>
-              {title}
+              {message}
+            </Text>
+          </View>
+        </View>
+      </View>
+    );
+  } else if (delay_script) {
+    const { delay } = delay_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.iconEndDevice}>
+            <Delay />
+          </View>
+          <View style={styles.contentItem}>
+            <Text numberOfLines={1} type="H4" color={color} semibold>
+              {t('wait')}
+            </Text>
+            <Text numberOfLines={1} type="H4" color={color}>
+              {t('wait_time_seconds', { delay })}
             </Text>
           </View>
         </View>

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

@@ -173,7 +173,8 @@ describe('test Notification', () => {
           created_at: '2021-10-07T08:57:09.370286Z',
           id: 12905,
           is_read: true,
-          params: "{'unit_id': 1, 'content': 'EoH Office'}",
+          params:
+            "{'unit_id': 1, 'content': 'EoH Office', 'title': 'Nhiệt độ: (30.5°C > 30.0°C)', 'automate_id:1'}",
           type: 'NEWS',
         },
       ],

package/src/screens/Notification/components/NotificationItem.js

@@ -16,6 +16,7 @@ import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { axiosPost } from '../../../utils/Apis/axios';
 import Routes from '../../../utils/Route';
 import styles from '../styles/NotificationItemStyles';
+import Notify from '../../../../assets/images/Notify.svg';
 
 const NotificationItem = memo(({ item }) => {
   const t = useTranslations();
@@ -52,6 +53,8 @@ const NotificationItem = memo(({ item }) => {
       sub_unit_id,
       type,
       content,
+      automate_id,
+      title,
     } = params;
     switch (content_code) {
       case NOTIFICATION_TYPES.NOTIFY_INVITE_MEMBER:
@@ -430,34 +433,33 @@ const NotificationItem = memo(({ item }) => {
         };
       case NOTIFICATION_TYPES.TRIGGER_SCRIPT_NOTIFY:
         return {
-          content: content,
+          content: title,
+          sub_content: content,
           redirect: () => {
             navigation.navigate(Routes.UnitStack, {
-              screen: Routes.UnitDetail,
+              screen: Routes.ScriptDetail,
               params: {
-                unitId: unit_id,
+                id: automate_id,
               },
             });
           },
-          iconContent: (
-            <IconComponent icon={'home'} style={styles.backgroundSummer} />
-          ),
+          iconContent: <Notify />,
         };
       default:
         return null;
     }
   }, [
+    params,
     content_code,
     customColorText,
-    icon,
-    navigation,
-    params,
     t,
-    language,
     logo,
+    icon,
+    language,
+    navigation,
   ]);
 
-  const { content, redirect, iconContent } = renderItem() || {};
+  const { content, redirect, iconContent, sub_content } = renderItem() || {};
 
   const onItemPress = useCallback(() => {
     if (!isRead) {
@@ -488,7 +490,16 @@ const NotificationItem = memo(({ item }) => {
           >
             {content}
           </Text>
-          <Text color={Colors.Gray7} type="Label" style={[styles.time]}>
+          {sub_content && (
+            <Text
+              type="Body"
+              color={Colors.Gray9}
+              accessibilityLabel={AccessibilityLabel.CUSTOM_TEXT}
+            >
+              {sub_content}
+            </Text>
+          )}
+          <Text color={Colors.Gray7} type="Label">
             {timeFormat}
           </Text>
         </View>

package/src/screens/Notification/index.js

@@ -99,7 +99,6 @@ const Notification = memo(() => {
         onLoadMore={handleOnLoadMore}
         onRefresh={onRefresh}
         disableLoadMore={page >= maxPageNotification}
-        styleScrollView={styles.styleScrollView}
       >
         {notifications.map((item, index) => (
           <NotificationItem item={item} key={index} />

package/src/screens/Notification/styles/NotificationItemStyles.js

@@ -3,9 +3,9 @@ import { Colors } from '../../../configs';
 
 export default StyleSheet.create({
   container: {
-    paddingHorizontal: 16,
-    paddingTop: 16,
-    paddingBottom: 16,
+    paddingHorizontal: 10,
+    paddingTop: 10,
+    paddingBottom: 10,
     flexDirection: 'row',
     backgroundColor: Colors.White,
   },
@@ -21,35 +21,22 @@ export default StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  iconNotification: {
+    width: '46%',
+  },
   viewRight: {
     flexShrink: 1,
   },
-  time: {
-    marginTop: 12,
-  },
-  iconNotification: {
-    width: '46%',
+  textNotification: {
+    lineHeight: 23,
   },
   backgroundSummer: {
     width: '46%',
     color: Colors.Summer,
   },
-  border: {
-    color: Colors.Primary,
-    paddingTop: 8,
-    paddingBottom: 8,
-    paddingHorizontal: 16,
-    borderColor: Colors.Primary,
-    borderWidth: 1,
-    borderRadius: 50,
-    width: 120,
-  },
   logo: {
     width: 20,
     height: 20,
     resizeMode: 'contain',
   },
-  textNotification: {
-    lineHeight: 23,
-  },
 });

package/src/screens/Notification/styles/indexStyles.js

@@ -1,7 +1,6 @@
 import { StyleSheet } from 'react-native';
 
 import { Colors } from '../../../configs';
-import { getStatusBarHeight } from '../../../configs/Constants';
 
 export default StyleSheet.create({
   wrap: {
@@ -17,7 +16,4 @@ export default StyleSheet.create({
   iconPlus: {
     marginRight: 22,
   },
-  styleScrollView: {
-    marginTop: getStatusBarHeight(),
-  },
 });

package/src/screens/Unit/components/MyUnitDevice/index.js

@@ -48,6 +48,7 @@ const MyUnitDevice = ({ device, unit }) => {
           <IconComponent
             icon={device?.icon_kit || device?.icon}
             style={styles.image}
+            size={20}
           />
           <View style={styles.marginTop3}>
             <Text numberOfLines={1} semibold style={styles.nameDevice}>

package/src/utils/I18n/translations/en.js

@@ -1052,6 +1052,10 @@ export default {
   send_email: 'Send e-mail',
   send_app_notification: 'Send app notification',
   delay_the_action: 'Delay the action',
+  wait: 'Wait',
+  set_timeout_seconds: 'Set timeout (seconds)',
+  maximum_3600_seconds: 'Maximum 3600 seconds',
+  wait_time_seconds: 'Wait {delay} seconds',
   end_device_not_support_script:
     // eslint-disable-next-line max-len
     'This device does not support installing "{not_support}" scripts, but you can use "{support}" scripts to perform the desired setup.',

package/src/utils/I18n/translations/vi.js

@@ -1065,6 +1065,10 @@ export default {
   send_email: 'Gửi e-mail',
   send_app_notification: 'Gửi thông báo qua ứng dụng',
   delay_the_action: 'Trì hoãn hành động',
+  wait: 'Chờ đợi',
+  set_timeout_seconds: 'Cài đặt thời gian chờ (giây)',
+  maximum_3600_seconds: 'Tối đa 3600 giây',
+  wait_time_seconds: 'Chờ {delay} giây',
   smart_account: 'Tài khoản thông minh',
   delete_smart_account: 'Xóa tài khoản thông minh',
   end_device_not_support_script:

package/src/utils/Route/index.js

@@ -134,6 +134,7 @@ const Routes = {
   AddAutomationTypeSmart: 'AddAutomationTypeSmart',
   AddUnknownTypeSmart: 'AddUnknownTypeSmart',
   SetupScriptNotify: 'SetupScriptNotify',
+  SetupScriptDelay: 'SetupScriptDelay',
   ScenarioName: 'ScenarioName',
   ValueChangeName: 'ValueChangeName',
   AllCamera: 'AllCamera',