@eohjsc/react-native-smart-city 0.3.51 → 0.3.53

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.3.51",
+  "version": "0.3.53",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -116,7 +116,7 @@
     "@react-native-community/datetimepicker": "https://github.com/hinh-eoh/datepicker",
     "@react-native-community/geolocation": "^2.0.2",
     "@react-native-community/masked-view": "^0.1.10",
-    "@react-native-community/netinfo": "^6.0.0",
+    "@react-native-community/netinfo": "^9.3.4",
     "@react-native-community/segmented-control": "^2.1.1",
     "@react-native-community/slider": "^3.0.3",
     "@react-native-community/toolbar-android": "^0.1.0-rc.2",

package/src/commons/Action/__test__/ItemQuickAction.test.js

@@ -148,6 +148,62 @@ describe('Test ItemQuickAction', () => {
     assertIsActionOn();
   });
 
+  // eslint-disable-next-line max-len
+  it('trigger action with quick action with auto update and allow_config_store_value_id = quick_action.config_id and action.name includes off', async () => {
+    sensor.quick_action.will_auto_update_status = true;
+    sensor.quick_action.on_action.allow_config_store_value_id =
+      sensor.quick_action.config_id;
+    sensor.quick_action.on_action.name = 'off_action';
+
+    await act(async () => {
+      tree = await create(
+        <ItemQuickAction sensor={sensor} wrapperStyle={style} />
+      );
+    });
+    const instance = tree.root;
+    const buttonOnActionPress = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+          `${AccessibilityLabel.ITEM_QUICK_ACTION_PRESS}-${sensor?.id}` &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      await buttonOnActionPress.props.onPress();
+    });
+    await act(async () => {
+      jest.runAllTimers();
+    });
+    assertIsActionOn();
+  });
+
+  // eslint-disable-next-line max-len
+  it('trigger action with quick action with auto update and allow_config_store_value_id = quick_action.config_id and action.name not includes off', async () => {
+    sensor.quick_action.will_auto_update_status = true;
+    sensor.quick_action.on_action.allow_config_store_value_id =
+      sensor.quick_action.config_id;
+    sensor.quick_action.on_action.name = 'on_action';
+
+    await act(async () => {
+      tree = await create(
+        <ItemQuickAction sensor={sensor} wrapperStyle={style} />
+      );
+    });
+    const instance = tree.root;
+    const buttonOnActionPress = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+          `${AccessibilityLabel.ITEM_QUICK_ACTION_PRESS}-${sensor?.id}` &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      await buttonOnActionPress.props.onPress();
+    });
+    await act(async () => {
+      jest.runAllTimers();
+    });
+    assertIsActionOn();
+  });
+
   it('on press will toggle action', async () => {
     sensor.quick_action.on_action.id = 10; // off action
     const mockSetStatus = jest.fn();

package/src/commons/ActionTemplate/OnOffButtonAction.js

@@ -13,8 +13,9 @@ const OnOffButtonAction = ({ title, configuration, onPress, template }) => {
         name: text_on,
         action: action_on,
         action_off: null,
+        template,
       });
-  }, [onPress, configuration, text_on, action_on]);
+  }, [onPress, configuration, text_on, action_on, template]);
 
   const onPressActionOff = useCallback(() => {
     onPress &&
@@ -23,8 +24,9 @@ const OnOffButtonAction = ({ title, configuration, onPress, template }) => {
         name: text_off,
         action: action_off,
         action_on: null,
+        template,
       });
-  }, [onPress, configuration, text_off, action_off]);
+  }, [onPress, configuration, text_off, action_off, template]);
 
   return (
     <>

package/src/commons/ActionTemplate/OnOffSimpleAction.js

@@ -15,6 +15,7 @@ const OnOffSimpleAction = ({ configuration, onPress, template }) => {
         name: t('text_on'),
         action: action_on,
         action_off: null,
+        template,
       });
   };
 
@@ -25,6 +26,7 @@ const OnOffSimpleAction = ({ configuration, onPress, template }) => {
         name: t('text_off'),
         action: action_off,
         action_on: null,
+        template,
       });
   };
 

package/src/commons/ActionTemplate/OnOffSmartLockAction.js

@@ -13,8 +13,9 @@ const OnOffSmartLockAction = ({ configuration, onPress, template }) => {
         name: text_on,
         action: action_on,
         action_off: null,
+        template,
       });
-  }, [onPress, configuration, text_on, action_on]);
+  }, [onPress, configuration, text_on, action_on, template]);
 
   const onPressActionClose = useCallback(() => {
     onPress &&
@@ -23,8 +24,9 @@ const OnOffSmartLockAction = ({ configuration, onPress, template }) => {
         name: text_off,
         action: action_off,
         action_on: null,
+        template,
       });
-  }, [onPress, configuration, text_off, action_off]);
+  }, [onPress, configuration, text_off, action_off, template]);
 
   return (
     <>

package/src/commons/Device/ItemDevice.js

@@ -117,7 +117,7 @@ const ItemDevice = memo(
       }
       // not managed by backend
       if (sensor?.device_type === DEVICE_TYPE.GOOGLE_HOME) {
-        return !isHomeAssistantConnecting;
+        return isHomeAssistantConnected;
       }
       return true;
     })();

package/src/commons/ImagePicker/__test__/ImagePicker.test.js

@@ -1,17 +1,21 @@
 import React from 'react';
-import renderer, { act } from 'react-test-renderer';
+import { Platform } from 'react-native';
+import { act, create } from 'react-test-renderer';
 
 import ImagePicker from '../index';
 import ButtonPopup from '../../ButtonPopup';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 
-const wrapComponent = (options) => (
+const mockSetImageUrl = jest.fn();
+const mockSetShowImagePicker = jest.fn();
+
+const wrapComponent = (options, showImagePicker) => (
   <SCProvider initState={mockSCStore({})}>
     <ImagePicker
-      showImagePicker={true}
-      setShowImagePicker={''}
-      setImageUrl={'setImageUrl'}
+      showImagePicker={showImagePicker}
+      setShowImagePicker={mockSetShowImagePicker}
+      setImageUrl={mockSetImageUrl}
       optionsCapture={options}
       optionsSelect={{
         mediaType: 'photo',
@@ -23,14 +27,18 @@ const wrapComponent = (options) => (
 
 describe('Test ImagePicker', () => {
   let tree;
-  let Platform;
-  beforeEach(() => {
-    Platform = require('react-native').Platform;
-  });
+
+  const options = {
+    mediaType: 'photo',
+    compressImageMaxWidth: 1280,
+    compressImageMaxHeight: 720,
+    compressImageQuality: 0.8,
+  };
+
   it('create ImagePicker', async () => {
     Platform.OS = 'android';
     await act(async () => {
-      tree = renderer.create(wrapComponent());
+      tree = await create(wrapComponent());
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(ButtonPopup);
@@ -39,14 +47,8 @@ describe('Test ImagePicker', () => {
 
   it('create ImagePicker optionsCapture', async () => {
     Platform.OS = 'android';
-    const options = {
-      mediaType: 'photo',
-      compressImageMaxWidth: 1280,
-      compressImageMaxHeight: 720,
-      compressImageQuality: 0.8,
-    };
     await act(async () => {
-      tree = renderer.create(wrapComponent(options));
+      tree = await create(wrapComponent(options));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(ButtonPopup);
@@ -54,23 +56,34 @@ describe('Test ImagePicker', () => {
     await act(async () => {
       textInputs[0].props.onPressMain();
     });
+    expect(mockSetImageUrl).toBeCalledWith({ path: 'path_from_camera' });
   });
+
   it('create ImagePicker onChooseFile', async () => {
     Platform.OS = 'android';
-    const options = {
-      mediaType: 'photo',
-      compressImageMaxWidth: 1280,
-      compressImageMaxHeight: 720,
-      compressImageQuality: 0.8,
-    };
     await act(async () => {
-      tree = renderer.create(wrapComponent(options));
+      tree = await create(wrapComponent(options));
     });
     const instance = tree.root;
-    const textInputs = instance.findAllByType(ButtonPopup);
-    expect(textInputs.length).toBe(1);
+    const buttonPopup = instance.findByType(ButtonPopup);
+    await act(async () => {
+      buttonPopup.props.onPressSecondary();
+    });
+    expect(mockSetImageUrl).toBeCalledWith({
+      path: 'file:///data/user/0/com.eohjsc.eohmobile/cache/Camera/80fbbd4b-926d-425f-a081-e21b13f2f7d0.jpg',
+    });
+  });
+
+  it('Test onClose', async () => {
+    Platform.OS = 'ios';
+    await act(async () => {
+      tree = await create(wrapComponent(options, true));
+    });
+    const instance = tree.root;
+    const buttonPopup = instance.findByType(ButtonPopup);
     await act(async () => {
-      textInputs[0].props.onPressSecondary();
+      await buttonPopup.props.onClose();
     });
+    expect(mockSetShowImagePicker).toBeCalledWith(false);
   });
 });

package/src/commons/ImagePicker/index.js

@@ -1,10 +1,14 @@
-import React, { useCallback } from 'react';
-import { Platform, PermissionsAndroid } from 'react-native';
+import React, { memo, useCallback } from 'react';
 import ImagePickerCrop from 'react-native-image-crop-picker';
+import { RESULTS } from 'react-native-permissions';
 
-import { useTranslations } from '../../hooks/Common/useTranslations';
-
+import {
+  keyPermission,
+  OpenSetting,
+  permitPermissionFunction,
+} from '../../utils/Permission/common';
 import ButtonPopup from '../ButtonPopup';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 const ImagePicker = ({
   showImagePicker,
@@ -14,47 +18,6 @@ const ImagePicker = ({
   optionsSelect,
 }) => {
   const t = useTranslations();
-
-  const requestCameraPermission = useCallback(async () => {
-    if (Platform.OS === 'android') {
-      try {
-        const granted = await PermissionsAndroid.request(
-          PermissionsAndroid.PERMISSIONS.CAMERA,
-          {
-            title: 'Camera Permission',
-            message: 'App needs camera permission',
-          }
-        );
-        // If CAMERA Permission is granted
-        return granted === PermissionsAndroid.RESULTS.GRANTED;
-      } catch (err) {
-        return false;
-      }
-    } else {
-      return true;
-    }
-  }, []);
-
-  const requestExternalWritePermission = useCallback(async () => {
-    if (Platform.OS === 'android') {
-      try {
-        const granted = await PermissionsAndroid.request(
-          PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
-          {
-            title: 'External Storage Write Permission',
-            message: 'App needs write permission',
-          }
-        );
-        // If WRITE_EXTERNAL_STORAGE Permission is granted
-        return granted === PermissionsAndroid.RESULTS.GRANTED;
-      } catch (err) {
-        return false;
-      }
-    } else {
-      return true;
-    }
-  }, []);
-
   const captureImage = useCallback(
     async (type) => {
       let options = optionsCapture
@@ -65,28 +28,27 @@ const ImagePicker = ({
             compressImageMaxHeight: 720,
             compressImageQuality: 0.8,
           };
-
-      let isCameraPermitted = await requestCameraPermission();
-      let isStoragePermitted = await requestExternalWritePermission();
-      if (isCameraPermitted && isStoragePermitted) {
-        await ImagePickerCrop.openCamera(options)
-          .then((response) => {
-            setImageUrl(response);
-            setShowImagePicker(false);
-          })
-          .catch((e) => {
-            /* eslint-disable no-console */
-            console.log('ERROR ' + e);
-          });
-      }
+      permitPermissionFunction(keyPermission.CAMERA, async (result) => {
+        if (result === RESULTS.GRANTED) {
+          await ImagePickerCrop.openCamera(options)
+            .then((response) => {
+              setImageUrl(response);
+              setShowImagePicker(false);
+            })
+            .catch((e) => {
+              /* eslint-disable no-console */
+              console.log('ERROR ' + e);
+            });
+        }
+        if (result === RESULTS.BLOCKED) {
+          OpenSetting(
+            t('camera_request_permission'),
+            t('camera_request_permission_des')
+          );
+        }
+      });
     },
-    [
-      setImageUrl,
-      setShowImagePicker,
-      requestCameraPermission,
-      requestExternalWritePermission,
-      optionsCapture,
-    ]
+    [optionsCapture, setImageUrl, setShowImagePicker, t]
   );
 
   const chooseFile = useCallback(
@@ -99,17 +61,27 @@ const ImagePicker = ({
             compressImageMaxHeight: 720,
             compressImageQuality: 0.8,
           };
-      await ImagePickerCrop.openPicker(options)
-        .then((response) => {
-          setImageUrl(response);
-          setShowImagePicker(false);
-        })
-        .catch((e) => {
-          /* eslint-disable no-console */
-          console.log('ERROR ' + e);
-        });
+      permitPermissionFunction(keyPermission.SELECT_PHOTO, async (result) => {
+        if (result === RESULTS.GRANTED || result === RESULTS.LIMITED) {
+          await ImagePickerCrop.openPicker(options)
+            .then((response) => {
+              setImageUrl(response);
+              setShowImagePicker(false);
+            })
+            .catch((e) => {
+              /* eslint-disable no-console */
+              console.log('ERROR ' + e);
+            });
+        }
+        if (result === RESULTS.BLOCKED) {
+          OpenSetting(
+            t('photo_request_permission'),
+            t('photo_request_permission_des')
+          );
+        }
+      });
     },
-    [setImageUrl, setShowImagePicker, optionsSelect]
+    [optionsSelect, setImageUrl, setShowImagePicker, t]
   );
 
   const onCaptureImage = useCallback(() => {
@@ -124,25 +96,18 @@ const ImagePicker = ({
     setShowImagePicker(false);
   }, [setShowImagePicker]);
 
-  const buttonEvent = {
-    main_title: t('take_photo'),
-    secondary_title: t('choose_from_library'),
-    on_press_main: onCaptureImage,
-    on_press_secondary: onChooseFile,
-  };
-
   return (
     <ButtonPopup
       rowButton={false}
       visible={showImagePicker}
       onClose={onClose}
-      mainTitle={buttonEvent.main_title}
-      onPressMain={buttonEvent.on_press_main}
-      secondaryTitle={buttonEvent.secondary_title}
-      onPressSecondary={buttonEvent.on_press_secondary}
+      mainTitle={t('take_photo')}
+      onPressMain={onCaptureImage}
+      secondaryTitle={t('choose_from_library')}
+      onPressSecondary={onChooseFile}
       typeSecondary={'primary'}
     />
   );
 };
 
-export default ImagePicker;
+export default memo(ImagePicker);

package/src/commons/SelectGateway/index.js

@@ -55,7 +55,7 @@ const SelectGateway = ({
   const t = useTranslations();
   const { goBack } = useNavigation();
   const isFocused = useIsFocused();
-  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
   const [gateways, setGateways] = useState([]);
   const [showPopupGuide, setShowPopupGuide, setHidePopupGuide] =
     useBoolean(false);
@@ -77,15 +77,19 @@ const SelectGateway = ({
     }
   }, [setShowPopupGuide, type, unitId]);
 
-  const handleOk = () => {
+  const handleButtonModalOk = useCallback(() => {
     setHidePopupGuide();
-    onPressOk();
-  };
+    onPressOk && onPressOk();
+  }, [onPressOk, setHidePopupGuide]);
 
   useEffect(() => {
     isFocused && fetchDetails();
   }, [fetchDetails, isFocused]);
 
+  const onRightClickNext = useCallback(() => {
+    onPressNext && onPressNext(gateways[selectedIndex]);
+  }, [gateways, onPressNext, selectedIndex]);
+
   return (
     <View style={styles.container}>
       <HeaderCustom title={title} isShowSeparator />
@@ -115,7 +119,7 @@ const SelectGateway = ({
           onLeftClick={goBack}
           rightTitle={t('next')}
           rightDisabled={selectedIndex === -1}
-          onRightClick={() => onPressNext(gateways[selectedIndex])}
+          onRightClick={onRightClickNext}
           accessibilityLabelPrefix={AccessibilityLabel.PREFIX.SELECT_UNIT}
         />
         <ModalCustom // todo Huy - make reused component
@@ -134,7 +138,7 @@ const SelectGateway = ({
             </View>
             <ViewButtonBottom
               rightTitle={t('ok')}
-              onRightClick={handleOk}
+              onRightClick={handleButtonModalOk}
               styleButton={styles.bottomButton}
             />
           </View>

package/src/commons/ViewButtonBottom/index.js

@@ -1,9 +1,12 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
 
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
 import { AccessibilityLabel } from '../../configs/Constants';
+import withPreventDoubleClick from '../WithPreventDoubleClick';
+
+const PreventDoubleTouch = withPreventDoubleClick(TouchableOpacity);
 
 // this view support either 1 or 2 button
 const ViewButtonBottom = ({
@@ -19,9 +22,14 @@ const ViewButtonBottom = ({
   styleButtonLeft,
   styleButtonRight,
   accessibilityLabelPrefix = '',
+  isPreventDoubleTouch = false,
 }) => {
   const useTwoButton = leftTitle && rightTitle;
 
+  const RightButtonView = useMemo(() => {
+    return isPreventDoubleTouch ? PreventDoubleTouch : TouchableOpacity;
+  }, [isPreventDoubleTouch]);
+
   return (
     <View style={styles.container}>
       {leftTitle && (
@@ -47,7 +55,7 @@ const ViewButtonBottom = ({
         </TouchableOpacity>
       )}
       {rightTitle && (
-        <TouchableOpacity
+        <RightButtonView
           style={[
             styles.button,
             styleButton,
@@ -66,7 +74,7 @@ const ViewButtonBottom = ({
           >
             {rightTitle}
           </Text>
-        </TouchableOpacity>
+        </RightButtonView>
       )}
     </View>
   );

package/src/configs/SCConfig.js

@@ -97,6 +97,7 @@ const SCDefaultConfig = {
   pusherAppKey: '8557fcc63959f564f1aa',
   pusherAppCluster: 'ap1',
   intervalWatchConfigTime: 30000,
+  setCurrentSensorDisplay: () => {},
 };
 
 export class SCConfig {
@@ -112,6 +113,7 @@ export class SCConfig {
   static pusherAppCluste = SCDefaultConfig.pusherAppCluster;
   static language = 'en';
   static intervalWatchConfigTime = SCDefaultConfig.intervalWatchConfigTime;
+  static setCurrentSensorDisplay = SCDefaultConfig.setCurrentSensorDisplay;
 }
 
 export const initSCConfig = (config) => {
@@ -135,4 +137,6 @@ export const initSCConfig = (config) => {
     config.pusherAppCluster ?? SCDefaultConfig.pusherAppCluster;
   SCConfig.intervalWatchConfigTime =
     config.intervalWatchConfigTime ?? SCDefaultConfig.intervalWatchConfigTime;
+  SCConfig.setCurrentSensorDisplay =
+    config.setCurrentSensorDisplay ?? SCDefaultConfig.setCurrentSensorDisplay;
 };

package/src/hooks/IoT/useBluetoothConnection.js

@@ -13,7 +13,8 @@ const permissions = [
   'android.permission.BLUETOOTH_ADVERTISE',
 ];
 
-const useBluetoothConnection = () => {
+// NOTE: fnCallback is used for Lavida when found device
+const useBluetoothConnection = (fnCallback) => {
   const t = useTranslations();
   const appState = useRef(AppState.currentState);
 
@@ -29,6 +30,7 @@ const useBluetoothConnection = () => {
         useSCContextSelector((state) => state.bluetooth.permissionsGranted);
 
   const onDeviceFound = useCallback(async (name, device) => {
+    fnCallback && fnCallback({ name, device });
     setAction(Action.SET_BLUETOOTH_CONNECTED_DEVICE, { name, device });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

package/src/screens/AddNewGateway/ConnectingWifiGuide.js

@@ -78,6 +78,7 @@ const ConnectingWifiGuide = ({ route }) => {
           'Eoh@2021',
           false
         );
+        setCurrentState(1);
       } catch (e) {
         Alert.alert(
           t('cannot_connect_to_device_wifi'),

package/src/screens/AddNewGateway/SelectZigbeeGateway.js

@@ -6,18 +6,19 @@ import Routes from '../../utils/Route';
 
 const SelectZigbeeGateway = ({ route }) => {
   const t = useTranslations();
-  const navigation = useNavigation();
+  const { navigate } = useNavigation();
   const { unitId, subUnit } = route?.params || {};
 
   const onPressNext = useCallback(
     (gateway) => {
-      navigation.navigate(Routes.ZigbeeDeviceConnectGuide, {
-        unitId,
-        subUnit,
-        chipId: gateway.id,
-      });
+      gateway &&
+        navigate(Routes.ZigbeeDeviceConnectGuide, {
+          unitId,
+          subUnit,
+          chipId: gateway.id,
+        });
     },
-    [navigation, unitId, subUnit]
+    [unitId, subUnit, navigate]
   );
 
   return (

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { Alert, ScrollView } from 'react-native';
 import { act, create } from 'react-test-renderer';
 import MockAdapter from 'axios-mock-adapter';
+import { NavigationContext } from '@react-navigation/native';
 
 import DeviceDetail from '../detail';
 import { API } from '../../../configs';
@@ -29,7 +30,6 @@ jest.mock('@react-navigation/native', () => {
     useNavigation: () => ({
       navigate: mockedNavigate,
     }),
-    useFocusEffect: jest.fn(),
   };
 });
 
@@ -73,9 +73,20 @@ const mockAxios = (
 
 let store = mockSCStore({});
 
+const navContextValue = {
+  isFocused: () => false,
+  addListener: jest.fn(() => jest.fn()),
+};
 const wrapComponent = (state, account, route) => (
   <SCProvider initState={state}>
-    <DeviceDetail account={account} route={route} />
+    <NavigationContext.Provider
+      value={{
+        ...navContextValue,
+        isFocused: () => true,
+      }}
+    >
+      <DeviceDetail account={account} route={route} />
+    </NavigationContext.Provider>
   </SCProvider>
 );
 

package/src/screens/Device/detail.js

@@ -7,7 +7,7 @@ import React, {
   useContext,
 } from 'react';
 import { View, TouchableOpacity, Platform } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import { useNavigation, useFocusEffect } from '@react-navigation/native';
 import { useSelector } from 'react-redux';
 import { IconFill, IconOutline } from '@ant-design/icons-react-native';
 import { Icon } from '@ant-design/react-native';
@@ -55,7 +55,7 @@ import PreventAccess from '../../commons/PreventAccess';
 import styles from './styles';
 import Routes from '../../utils/Route';
 import { getData as getLocalData } from '../../utils/Storage';
-import { API, Colors } from '../../configs';
+import { API, Colors, SCConfig } from '../../configs';
 import { DEVICE_TYPE, AccessibilityLabel } from '../../configs/Constants';
 import { axiosGet } from '../../utils/Apis/axios';
 import { notImplemented } from '../../utils/Utils';
@@ -81,7 +81,8 @@ const DeviceDetail = ({ route }) => {
   // eslint-disable-next-line no-unused-vars
   const [configValues, setConfigValues] = useConfigGlobalState('configValues');
 
-  const { unitData, unitId, sensorData, sensorId } = route?.params || {};
+  const { unitData, unitId, sensorData, sensorId, isMyUnitDeviceScreen } =
+    route?.params || {};
   const [unit, setUnit] = useState(unitData || { id: unitId });
   const [sensor, setSensor] = useState(sensorData || { id: sensorId });
   const [station, setStation] = useState(sensor?.station);
@@ -116,6 +117,9 @@ const DeviceDetail = ({ route }) => {
     useBluetoothDeviceConnected(sensor);
 
   const isDeviceHasBle = useMemo(() => {
+    if (display.items.length === 0) {
+      return false;
+    }
     const action = display.items.filter((item) => item.type === 'action');
     if (action.length === 0) {
       return false;
@@ -348,7 +352,7 @@ const DeviceDetail = ({ route }) => {
       menuItems.push({
         text: t('move_to_another_sub_unit'),
         route: Routes.MoveToAnotherSubUnit,
-        data: { unit, sensor, station },
+        data: { unit, sensor, station, isMyUnitDeviceScreen },
       });
     }
     if (isShowSetupEmergencyContact) {
@@ -428,14 +432,15 @@ const DeviceDetail = ({ route }) => {
     display.items,
     isOwner,
     isShowSetupEmergencyContact,
-    isShowSetUpSmartLock,
+    sideMenu,
     t,
+    isShowSetUpSmartLock,
     isFavorite,
     sensor,
     unit,
     sensorName,
-    sideMenu,
     station,
+    isMyUnitDeviceScreen,
     emergencyDeviceId,
     addToFavorites,
     removeFromFavorites,
@@ -496,77 +501,79 @@ const DeviceDetail = ({ route }) => {
     [configValues, displayValuesData, evaluateValue]
   );
 
-  useEffect(() => {
-    let params = new URLSearchParams();
-    const configIds = [];
-
-    display.items.map((item) => {
-      if (item.type !== 'value') {
-        return;
-      }
+  useFocusEffect(
+    useCallback(() => {
+      let params = new URLSearchParams();
+      const configIds = [];
 
-      if (!item.configuration) {
-        return;
-      }
+      display.items.map((item) => {
+        if (item.type !== 'value') {
+          return;
+        }
 
-      item.configuration.configs.map((config) => {
-        if (!configIds.includes(config.id)) {
-          configIds.push(config.id);
+        if (!item.configuration) {
+          return;
         }
+
+        item.configuration.configs.map((config) => {
+          if (!configIds.includes(config.id)) {
+            configIds.push(config.id);
+          }
+        });
       });
-    });
 
-    configIds.map((id) => {
-      params.append('config', id);
-    });
+      configIds.map((id) => {
+        params.append('config', id);
+      });
 
-    const fetchValues = async () => {
-      const { success, data, resp_status } = await axiosGet(
-        API.DEVICE.DISPLAY_VALUES_V2(sensor?.id),
-        {
-          params: params,
+      const fetchValues = async () => {
+        const { success, data, resp_status } = await axiosGet(
+          API.DEVICE.DISPLAY_VALUES_V2(sensor?.id),
+          {
+            params: params,
+          }
+        );
+        if (success) {
+          data.isConnected = data.is_connected;
+          data.lastUpdated = data.last_updated
+            ? moment(data.last_updated)
+            : data.last_updated;
+          setDisplayValuesData((prevState) => {
+            if (prevState.isConnected !== data.isConnected) {
+              setAction(Action.SET_DEVICES_STATUS, [
+                { id: sensor?.id, is_connected: data.is_connected },
+              ]);
+            }
+            return data;
+          });
+        } else if (resp_status >= 500) {
+          setServerDown(true);
         }
-      );
-      if (success) {
-        data.isConnected = data.is_connected;
-        data.lastUpdated = data.last_updated
-          ? moment(data.last_updated)
-          : data.last_updated;
-        setDisplayValuesData((prevState) => {
-          if (prevState.isConnected !== data.isConnected) {
-            setAction(Action.SET_DEVICES_STATUS, [
-              { id: sensor?.id, is_connected: data.is_connected },
-            ]);
+        setLoading((preState) => {
+          if (preState.isConnected) {
+            return {
+              ...preState,
+              isConnected: false,
+            };
           }
-          return data;
+          return preState;
         });
-      } else if (resp_status >= 500) {
-        setServerDown(true);
+      };
+      if (
+        isNetworkConnected &&
+        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 }));
       }
-      setLoading((preState) => {
-        if (preState.isConnected) {
-          return {
-            ...preState,
-            isConnected: false,
-          };
-        }
-        return preState;
-      });
-    };
-    if (
-      isNetworkConnected &&
-      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 }));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sensor, display, isNetworkConnected]);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sensor, display, isNetworkConnected])
+  );
 
   const isShowEmergencyResolve =
     display.items.filter(
@@ -751,6 +758,10 @@ const DeviceDetail = ({ route }) => {
     ]
   );
 
+  useEffect(() => {
+    SCConfig.setCurrentSensorDisplay(sensor);
+  }, [sensor]);
+
   return (
     <View style={styles.wrap}>
       <WrapHeaderScrollable

package/src/screens/MoveToAnotherSubUnit/index.js

@@ -33,15 +33,17 @@ const RowSubUnit = ({ subUnit, isSelected, onSelect }) => {
 const MoveToAnotherSubUnit = memo(({ route }) => {
   const t = useTranslations();
   const { params = {} } = route;
-  const { unit, sensor, station } = params;
+  const { unit, sensor, station, isMyUnitDeviceScreen } = params;
   const { navigate } = useNavigation();
   const [selectedSubUnit, setSelectedSubUnit] = useState(
     unit?.stations?.find((subUnit) => subUnit.id === station.id)
   );
 
   const listStationUnit = useMemo(() => {
-    return unit?.stations.slice(2) || [];
-  }, [unit?.stations]);
+    return isMyUnitDeviceScreen
+      ? unit?.stations || []
+      : unit?.stations.slice(2) || [];
+  }, [isMyUnitDeviceScreen, unit?.stations]);
 
   const handleOnSelect = useCallback((item) => {
     setSelectedSubUnit(item);
@@ -55,7 +57,12 @@ const MoveToAnotherSubUnit = memo(({ route }) => {
       }
     );
     if (success) {
-      navigate(Routes.UnitDetail);
+      navigate(Routes.UnitStack, {
+        screen: Routes.UnitDetail,
+        params: {
+          unitId: unit.id,
+        },
+      });
     }
   }, [navigate, selectedSubUnit?.id, sensor?.id, station?.id, unit?.id]);
 

package/src/screens/PlayBackCamera/index.js

@@ -72,7 +72,10 @@ const PlayBackCamera = () => {
     (hour) => {
       const hourWithTimezone =
         parseInt(hour, 10) + parseInt(item?.configuration?.time_zone || 0, 10);
-      return hourWithTimezone < 10 ? '0' + hourWithTimezone : hourWithTimezone;
+      if (hourWithTimezone < 0 || hourWithTimezone > 9) {
+        return hourWithTimezone;
+      }
+      return '0' + hourWithTimezone;
     },
     [item?.configuration?.time_zone]
   );

package/src/screens/ScriptDetail/__test__/useStarredScript.test.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { act, renderHook } from '@testing-library/react-hooks';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import { useStarredScript } from '../hooks/useStarredScript';
+import MockAdapter from 'axios-mock-adapter';
+import api from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
+import { Action } from '../../../context/actionType';
+
+const mockedSetAction = jest.fn();
+const mock = new MockAdapter(api.axiosInstance);
+
+const wrapper = ({ children }) => <SCProvider>{children}</SCProvider>;
+
+const mockUseContext = jest.fn().mockImplementation(() => ({
+  stateData: mockSCStore({}),
+  setAction: mockedSetAction,
+}));
+
+React.useContext = mockUseContext;
+
+jest.mock('react-native-deep-linking');
+
+describe('Test useStarredScript', async () => {
+  let props;
+  beforeEach(() => {
+    mockedSetAction.mockClear();
+    props = {
+      name: 'AutomateScript',
+      id: 1,
+      script: { id: 2, name: 'ScriptName' },
+    };
+  });
+
+  it('test send remote command action null', async () => {
+    mock.onPost(API.AUTOMATE.UNSTAR_SCRIPT(props.id)).reply(200);
+    const { result } = renderHook(() => useStarredScript(props), {
+      wrapper,
+    });
+    await act(async () => {
+      await result.current.unstarScript();
+    });
+    expect(mockedSetAction).toBeCalledWith(Action.UNSTAR_SCRIPTS, [2]);
+  });
+});

package/src/screens/Sharing/SelectPermission.js

@@ -267,8 +267,8 @@ const SelectPermission = ({ route }) => {
         arrIdReadTemp.length &&
           read_permissions.push({ id: item.id, values: arrIdReadTemp });
 
-        !arrIdControlTemp &&
-          !arrIdReadTemp &&
+        !arrIdControlTemp.length &&
+          !arrIdReadTemp.length &&
           item.isChecked &&
           read_permissions.push({ id: item.id, values: [] });
       }

package/src/screens/SubUnit/AddSubUnit.js

@@ -239,6 +239,7 @@ const AddSubUnit = ({ route }) => {
             rightTitle={t('done')}
             rightDisabled={validateData}
             onRightClick={goDone}
+            isPreventDoubleTouch
           />
         </View>
       </TouchableWithoutFeedback>

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

@@ -22,6 +22,7 @@ const MyUnitDevice = ({ device, unit }) => {
       params: {
         unitData: unit,
         sensorData: device,
+        isMyUnitDeviceScreen: true,
       },
     });
   }, [navigate, device, unit]);

package/src/screens/UnitSummary/__test__/index.test.js

@@ -19,6 +19,7 @@ import { useReceiveNotifications } from '../../../hooks';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import api from '../../../utils/Apis/axios';
+import { WrapHeaderScrollable } from '../../../commons';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -57,8 +58,7 @@ describe('Test UnitSummary', () => {
   let route;
 
   beforeEach(() => {
-    mock.resetHistory();
-
+    mock.reset();
     Date.now = jest.fn(() => new Date('2021-01-24T12:00:00.000Z'));
     route = {
       params: {
@@ -144,6 +144,22 @@ describe('Test UnitSummary', () => {
     expect(componentName.props.unit).toEqual({ id: 1 });
   });
 
+  it('render fetchUnitSummary failure', async () => {
+    route.params.summaryData = null;
+    jest.useFakeTimers();
+    mock.onGet(API.UNIT.UNIT_SUMMARY_DETAIL(1, 1)).reply(200, { data: {} });
+    mock.onGet(API.UNIT.UNIT_SUMMARY(1)).reply(400);
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    await act(async () => {
+      jest.runOnlyPendingTimers();
+    });
+    const instance = tree.root;
+    const wapHeaderScrollable = instance.findByType(WrapHeaderScrollable);
+    expect(wapHeaderScrollable.props.children).toBe(null);
+  });
+
   it('render fetchUnitDetail success', async () => {
     route = {
       params: {
@@ -275,4 +291,17 @@ describe('Test UnitSummary', () => {
       }
     });
   });
+
+  it('Test render without params', async () => {
+    useReceiveNotifications.mockImplementationOnce(() => ({
+      dataNotification: {},
+    }));
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const wapHeaderScrollable = instance.findByType(WrapHeaderScrollable);
+    expect(wapHeaderScrollable.props.title).toBe('');
+    expect(wapHeaderScrollable.props.subTitle).toBe(null);
+  });
 });

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

@@ -1096,5 +1096,7 @@
   "read_config_permission_error": "You don't have permission to read this config",
   "continue_to_wait": "Continue to wait?",
   "it_has_been_5_minutes": "It has been 5 minutes...",
-  "click_here_to_setup_device": "Click here to setup device"
+  "click_here_to_setup_device": "Click here to setup device",
+  "photo_request_permission": "Photo request permission",
+  "photo_request_permission_des": "To select photo from gallery, please unlock access photo permission"
 }

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

@@ -1094,5 +1094,7 @@
   "read_config_permission_error": "Bạn không có quyền đọc cấu hình này",
   "continue_to_wait": "Bạn có muốn đợi tiếp?",
   "it_has_been_5_minutes": "Đã 5 phút trôi qua...",
-  "click_here_to_setup_device": "Chọn thiết bị thêm vào phòng"
+  "click_here_to_setup_device": "Chọn thiết bị thêm vào phòng",
+  "photo_request_permission": "Quyền yêu cầu ảnh",
+  "photo_request_permission_des": "Để chọn ảnh từ thư viện, vui lòng mở khóa quyền truy cập ảnh"
 }