@eohjsc/react-native-smart-city 0.2.78 → 0.2.82

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.2.78",
+  "version": "0.2.82",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -97,10 +97,10 @@
   "dependencies": {
     "@ant-design/icons-react-native": "^2.2.1",
     "@ant-design/react-native": "^4.0.5",
+    "@eohjsc/highcharts": "^1.0.3",
     "@formatjs/intl-getcanonicallocales": "^1.4.5",
     "@formatjs/intl-numberformat": "^5.6.2",
     "@formatjs/intl-pluralrules": "^3.4.7",
-    "@highcharts/highcharts-react-native": "highcharts/highcharts-react-native#107/head",
     "@invertase/react-native-apple-authentication": "^1.1.2",
     "@messageformat/core": "^3.0.0",
     "@react-native-community/async-storage": "^1.12.1",

package/src/commons/Device/HorizontalBarChart.js

@@ -1,6 +1,6 @@
 import React, { memo, useEffect, useMemo, useState } from 'react';
 import { View, StyleSheet } from 'react-native';
-import HighchartsReactNative from '@highcharts/highcharts-react-native/src/HighchartsReactNative';
+import HighchartsReactNative from '@eohjsc/highcharts';
 import { isEmpty } from 'lodash';
 
 import { Colors } from '../../configs';

package/src/commons/Device/LinearChart.js

@@ -1,6 +1,6 @@
 import React, { memo, useState, useEffect, useCallback } from 'react';
 import { StyleSheet, View } from 'react-native';
-import HighchartsReactNative from '@highcharts/highcharts-react-native';
+import HighchartsReactNative from '@eohjsc/highcharts';
 import moment from 'moment';
 import { Colors } from '../../configs';
 

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

@@ -41,9 +41,9 @@ describe('Test ImagePicker', () => {
     Platform.OS = 'android';
     const options = {
       mediaType: 'photo',
-      maxWidth: 1024,
-      quality: 0.8,
-      saveToPhotos: true,
+      compressImageMaxWidth: 1280,
+      compressImageMaxHeight: 720,
+      compressImageQuality: 0.8,
     };
     act(() => {
       tree = renderer.create(wrapComponent(options));
@@ -51,5 +51,26 @@ describe('Test ImagePicker', () => {
     const instance = tree.root;
     const textInputs = instance.findAllByType(ButtonPopup);
     expect(textInputs.length).toBe(1);
+    act(() => {
+      textInputs[0].props.onPressMain();
+    });
+  });
+  test('create ImagePicker onChooseFile', () => {
+    Platform.OS = 'android';
+    const options = {
+      mediaType: 'photo',
+      compressImageMaxWidth: 1280,
+      compressImageMaxHeight: 720,
+      compressImageQuality: 0.8,
+    };
+    act(() => {
+      tree = renderer.create(wrapComponent(options));
+    });
+    const instance = tree.root;
+    const textInputs = instance.findAllByType(ButtonPopup);
+    expect(textInputs.length).toBe(1);
+    act(() => {
+      textInputs[0].props.onPressSecondary();
+    });
   });
 });

package/src/commons/MediaPlayerDetail/index.js

@@ -164,6 +164,7 @@ const MediaPlayerDetail = ({
         activeOpacity={1}
         style={styles.videoBtn}
         onPress={onTapGoDetail}
+        testID={TESTID.SUB_UNIT_GO_DETAIL}
       >
         {paused ? (
           <View style={[styles.player, style]}>

package/src/commons/SubUnit/Favorites/index.js

@@ -31,9 +31,12 @@ const SubUnitFavorites = ({
           favorites.devices.forEach((sensor) => {
             params.append('sensors', sensor.id);
           });
-          const { success, data } = await axiosGet(API.SENSOR.STATUS(), {
-            params: params,
-          });
+          const { success, data } = await axiosGet(
+            API.UNIT.SENSORS_STATUS(unit.id),
+            {
+              params: params,
+            }
+          );
           if (success) {
             setSensorsStatus(data);
           }
@@ -45,7 +48,7 @@ const SubUnitFavorites = ({
     } else {
       clearInterval(intervalSensorStatus.current);
     }
-  }, [isFocused, favorites?.devices]);
+  }, [isFocused, favorites?.devices, unit.id]);
 
   const handleOnAddNew = () => {
     alert(t('feature_under_development'));

package/src/commons/SubUnit/ShortDetail.js

@@ -35,9 +35,12 @@ const ShortDetailSubUnit = ({ unit, station, isGGHomeConnected }) => {
           station.sensors.forEach((sensor) => {
             params.append('sensors', sensor.id);
           });
-          const { success, data } = await axiosGet(API.SENSOR.STATUS(), {
-            params: params,
-          });
+          const { success, data } = await axiosGet(
+            API.UNIT.SENSORS_STATUS(unit.id),
+            {
+              params: params,
+            }
+          );
           if (success) {
             setSensorsStatus(data);
           }
@@ -49,7 +52,7 @@ const ShortDetailSubUnit = ({ unit, station, isGGHomeConnected }) => {
     } else {
       clearInterval(intervalSensorStatus.current);
     }
-  }, [isFocused, station?.sensors]);
+  }, [isFocused, station?.sensors, unit.id]);
 
   const renderCamera = () => {
     if (station?.camera) {

package/src/configs/API.js

@@ -35,6 +35,8 @@ const API = {
       SCConfig.apiRoot + `/property_manager/units/${id}/device_sensor/`,
     ADD_GATEWAY: (id) =>
       SCConfig.apiRoot + `/property_manager/units/${id}/add_gateway/`,
+    SENSORS_STATUS: (id) =>
+      SCConfig.apiRoot + `/property_manager/units/${id}/sensors_status/`,
   },
   SUB_UNIT: {
     REMOVE_SUB_UNIT: (unitId, id) =>
@@ -87,7 +89,6 @@ const API = {
     CHANGE_SUB_UNIT: (unit_id, station_id, id) =>
       SCConfig.apiRoot +
       `/property_manager/${unit_id}/sub_units/${station_id}/devices/${id}/change_sub_unit/`,
-    STATUS: () => SCConfig.apiRoot + '/property_manager/sensors/status/',
   },
   SHARED_SENSOR: {
     ACCESS: (id) =>

package/src/configs/Constants.js

@@ -210,6 +210,7 @@ export const TESTID = {
   SUB_UNIT_STATION: 'SUB_UNIT_STATION',
   SUB_UNIT_SELECT_AUTOMATE_TYPE: 'SUB_UNIT_SELECT_AUTOMATE_TYPE',
   SUB_UNIT_TEXT_DROPDOWN: 'SUB_UNIT_TEXT_DROPDOWN',
+  SUB_UNIT_GO_DETAIL: 'SUB_UNIT_GO_DETAIL',
 
   // NavBar
   NAVBAR_ICON_BARS: 'NAVBAR_ICON_BARS',
@@ -436,6 +437,7 @@ export const TESTID = {
   MANAGE_UNIT_LIST_EMERGENCY_CONTACT: 'MANAGE_UNIT_LIST_EMERGENCY_CONTACT',
   MANAGE_UNIT_DETAIL_LIST_CONTACT_BUTTON:
     'MANAGE_UNIT_DETAIL_LIST_CONTACT_BUTTON',
+  MANAGE_UNIT_GO_TO_SUBUNIT: 'MANAGE_UNIT_GO_TO_SUBUNIT',
 
   // Add Vehicle
   ADD_VEHICLE_TAKE_PHOTO: 'ADD_VEHICLE_TAKE_PHOTO',
@@ -635,6 +637,7 @@ export const NOTIFICATION_TYPES = {
   NOTIFY_REMOVE_UNIT: 'NOTIFY_REMOVE_UNIT',
   NOTIFY_REMOVE_MEMBER: 'NOTIFY_REMOVE_MEMBER',
   NOTIFY_MEMBER_LEAVE_UNIT: 'NOTIFY_MEMBER_LEAVE_UNIT',
+  NOTIFY_RENAME_UNIT: 'NOTIFY_RENAME_UNIT',
 };
 
 export const ACTIVITY_LOG_TYPES = {

package/src/screens/AddCommon/SelectSubUnit.js

@@ -24,6 +24,8 @@ const AddCommonSelectSubUnit = ({ route }) => {
     listSelectDevice,
     smart_account_id,
     smart_account_id_from_backend,
+    username,
+    brand,
   } = route.params;
   const [selectedIndex, setSelectedIndex] = useState(-1);
   const [unit, setUnit] = useState([]);
@@ -86,6 +88,8 @@ const AddCommonSelectSubUnit = ({ route }) => {
           smart_account_id: smart_account_id,
           unit_id: unit_id,
           smart_account_id_from_backend: smart_account_id_from_backend,
+          username,
+          brand,
         });
         break;
       case 'AddVconnexDevice':
@@ -115,6 +119,8 @@ const AddCommonSelectSubUnit = ({ route }) => {
     smart_account_id,
     unit_id,
     smart_account_id_from_backend,
+    username,
+    brand,
   ]);
 
   const handleSelectIndex = (index) => {

package/src/screens/AddNewGateway/__test__/SetupGateway.test.js

@@ -7,6 +7,9 @@ import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import SetupGatewayWifi from '../SetupGatewayWifi';
 import DisplayChecking from '../../../commons/DisplayChecking';
+import { AlertAction } from '../../../commons';
+import _TextInputPassword from '../../../commons/Form/TextInputPassword';
+import _TextInput from '../../../commons/Form/TextInput';
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
@@ -87,4 +90,53 @@ describe('Test SetupGatewayWifi', () => {
     const displayLoadingConnect = instance.findByType(DisplayChecking);
     expect(displayLoadingConnect.props.visible).toBeTruthy();
   });
+
+  test('test render AlertAction', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const alertAction = instance.findByType(AlertAction);
+    await act(async () => {
+      alertAction.props.hideModal();
+      alertAction.props.leftButtonClick();
+    });
+    expect(alertAction).toBeDefined();
+  });
+
+  test('test render _TextInputPassword', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const textInputPassword = instance.findByType(_TextInputPassword);
+    await act(async () => {
+      textInputPassword.props.onChange('new_name');
+    });
+    expect(textInputPassword.props.value).toEqual('new_name');
+  });
+
+  test('test render TextInput', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const textInput = instance.findByType(_TextInput);
+    await act(async () => {
+      textInput.props.onChange('new_text');
+    });
+    expect(textInput.props.value).toEqual('new_text');
+  });
+
+  test('test render DisplayChecking', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const displayChecking = instance.findByType(DisplayChecking);
+    await act(async () => {
+      displayChecking.props.onClose();
+    });
+    expect(displayChecking).toBeDefined();
+  });
 });

package/src/screens/AllCamera/index.js

@@ -1,4 +1,10 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { View, Text, TouchableOpacity, Platform, Image } from 'react-native';
 import { useRoute, useNavigation } from '@react-navigation/native';
 import { chunk } from 'lodash';
@@ -28,36 +34,51 @@ const AllCamera = () => {
   const [isFullScreen, setIsFullScreen] = useState(false);
   const [dataFullScreen, setDataFullScreen] = useState();
 
-  const handleFullScreen = (data) => {
-    setIsFullScreen(!isFullScreen);
-    setDataFullScreen(data);
-  };
+  const handleFullScreen = useCallback(
+    (data) => {
+      setIsFullScreen(!isFullScreen);
+      setDataFullScreen(data);
+    },
+    [isFullScreen]
+  );
 
-  const onPressAmount = (value) => () => {
-    setAmount(value);
-    value === 1 && setActiveCamera(arrCameras[0]);
-    const dataTemp = [...arrCameras];
-    setData(value === 1 ? dataTemp : chunk(dataTemp, value));
-  };
+  const onPressAmount = useCallback(
+    (value) => () => {
+      setAmount(value);
+      value === 1 && setActiveCamera(arrCameras[0]);
+      const dataTemp = [...arrCameras];
+      setData(value === 1 ? dataTemp : chunk(dataTemp, value));
+      setCurrentPage(1);
+    },
+    [arrCameras]
+  );
 
-  const onPressNext = () =>
+  const onPressNext = useCallback(() => {
     currentPage !== data.length && carouselRef?.current?.snapToNext();
+  }, [currentPage, data.length]);
 
-  const onPressPrev = () =>
+  const onPressPrev = useCallback(() => {
     currentPage !== 1 && carouselRef?.current?.snapToPrev();
+  }, [currentPage]);
 
-  const onSnapToItem = (index) => {
-    setActiveCamera(data[index]);
-    setCurrentPage(index + 1);
-  };
+  const onSnapToItem = useCallback(
+    (index) => {
+      setActiveCamera(data[index]);
+      setCurrentPage(index + 1);
+    },
+    [data]
+  );
 
   const onClose = () => {
     setIsFullScreen(false);
   };
 
-  const goToPlayBack = (item, thumbnail) => () => {
-    navigate(Routes.PlaybackCamera, { item, thumbnail });
-  };
+  const goToPlayBack = useCallback(
+    (item, thumbnail) => () => {
+      navigate(Routes.PlaybackCamera, { item, thumbnail });
+    },
+    [navigate]
+  );
 
   const CameraItem = ({ item, width, height }) => {
     return (
@@ -82,7 +103,7 @@ const AllCamera = () => {
     );
   };
 
-  const renderItem = ({ item, index }) => {
+  const renderItem = ({ item }) => {
     return (
       <View style={styles.wrapItem}>
         {amount === 1 ? (
@@ -93,13 +114,13 @@ const AllCamera = () => {
               <CameraItem
                 key={item?.id}
                 item={item[0]}
-                width={188}
+                width={Constants.width / 2}
                 height={112}
               />
               <CameraItem
                 key={item?.id}
                 item={item[1]}
-                width={188}
+                width={Constants.width / 2}
                 height={112}
               />
             </View>
@@ -107,13 +128,13 @@ const AllCamera = () => {
               <CameraItem
                 key={item?.id}
                 item={item[2]}
-                width={188}
+                width={Constants.width / 2}
                 height={112}
               />
               <CameraItem
                 key={item?.id}
                 item={item[3]}
-                width={188}
+                width={Constants.width / 2}
                 height={112}
               />
             </View>
@@ -138,19 +159,23 @@ const AllCamera = () => {
 
   const renderCarousel = useMemo(() => {
     return (
-      <Carousel
-        ref={carouselRef}
-        data={data}
-        renderItem={renderItem}
-        sliderWidth={Constants.width}
-        itemWidth={Constants.width}
-        inactiveSlideScale={1}
-        onSnapToItem={onSnapToItem}
-        inactiveSlideOpacity={1}
-        extraData={data}
-        loop={false}
-        isForceIndex={Platform.OS === 'android'}
-      />
+      <View style={styles.wrapCarousel}>
+        <Carousel
+          ref={carouselRef}
+          data={data}
+          renderItem={renderItem}
+          sliderWidth={Constants.width}
+          itemWidth={Constants.width}
+          inactiveSlideScale={1}
+          onSnapToItem={onSnapToItem}
+          inactiveSlideOpacity={1}
+          extraData={data}
+          loop={false}
+          lockScrollWhileSnapping
+          isForceIndex={Platform.OS === 'android'}
+          removeClippedSubviews={false}
+        />
+      </View>
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data]);
@@ -182,6 +207,17 @@ const AllCamera = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [amount]);
 
+  const renderName = useMemo(
+    () => (
+      <Text style={styles.cameraName}>
+        {amount === 1
+          ? activeCamera?.configuration?.name
+          : `${currentPage}/${data.length}`}
+      </Text>
+    ),
+    [activeCamera?.configuration?.name, amount, currentPage, data.length]
+  );
+
   useEffect(() => {
     const to = setTimeout(() => {
       carouselRef?.current?.snapToItem();
@@ -203,16 +239,12 @@ const AllCamera = () => {
             <TouchableOpacity style={styles.buttonNext} onPress={onPressPrev}>
               <Image source={Images.arrowLeft} />
             </TouchableOpacity>
-            <Text numberOfLines={1} style={styles.cameraName}>
-              {amount === 1
-                ? activeCamera?.configuration?.name
-                : `${currentPage}/${data.length}`}
-            </Text>
+            {renderName}
             <TouchableOpacity style={styles.buttonNext} onPress={onPressNext}>
               <Image source={Images.arrowLeft} style={styles.arrowRight} />
             </TouchableOpacity>
           </View>
-          <View style={styles.wrapCarousel}>{renderCarousel}</View>
+          {renderCarousel}
           {renderAmount}
         </View>
       </View>

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

@@ -48,9 +48,9 @@ const NotificationItem = memo(({ item }) => {
   const renderItem = useCallback(() => {
     const paramsJSON = JSON.parse(params.replace(regex, '"'));
     const booking_id = paramsJSON.booking_id && paramsJSON.booking_id;
+    const unitId = paramsJSON?.unit_id;
     switch (content_code) {
       case NOTIFICATION_TYPES.NOTIFY_INVITE_MEMBER:
-        const unitId = paramsJSON?.unit_id;
         return {
           content: customColorText(
             t('text_notification_content_invite_member'),
@@ -254,6 +254,24 @@ const NotificationItem = memo(({ item }) => {
             <IconComponent icon={'home'} style={styles.backgroundSummer} />
           ),
         };
+      case NOTIFICATION_TYPES.NOTIFY_RENAME_UNIT:
+        return {
+          content: customColorText(
+            t('text_notification_content_rename_unit'),
+            arrParams
+          ),
+          redirect: () => {
+            navigation.navigate(Routes.UnitStack, {
+              screen: Routes.UnitDetail,
+              params: {
+                unitId,
+              },
+            });
+          },
+          iconContent: (
+            <IconComponent icon={'home'} style={styles.backgroundSummer} />
+          ),
+        };
       default:
         return {
           content: customColorText(t('this_notification_will_be_updated_soon')),

package/src/screens/Notification/index.js

@@ -8,7 +8,10 @@ import { axiosGet } from '../../utils/Apis/axios';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import NotificationItem from './components/NotificationItem';
 import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
-import { watchNotificationData, unwatchNotificationData } from './Monitor';
+import {
+  watchNotificationData,
+  unwatchNotificationData,
+} from '../../utils/Monitor';
 import { useSCContextSelector } from '../../context';
 
 let page = 1;

package/src/screens/Sharing/SelectUser.js

@@ -48,16 +48,23 @@ const SelectUser = ({ route }) => {
       if (success) {
         setUsers([...users, data.user]);
       } else {
-        const textTemp = t(
-          data?.phone
-            ? 'text_phone_share_permission'
-            : data?.email
-            ? 'text_email_share_permission'
-            : ''
-        );
-        ToastBottomHelper.error(
-          t('error_share_permission', { data: phone || email, text: textTemp })
-        );
+        if (data.non_field_errors) {
+          ToastBottomHelper.error(data.non_field_errors);
+        } else {
+          const textTemp = t(
+            data?.phone
+              ? 'text_phone_share_permission'
+              : data?.email
+              ? 'text_email_share_permission'
+              : ''
+          );
+          ToastBottomHelper.error(
+            t('error_share_permission', {
+              data: phone || email,
+              text: textTemp,
+            })
+          );
+        }
       }
     },
     [users, unit.id, permissions, t]

package/src/screens/Sharing/__test__/SelectUser.test.js

@@ -11,6 +11,7 @@ import { API } from '../../../configs';
 import { getTranslate } from '../../../utils/I18n';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
+import { ToastBottomHelper } from '../../../utils/Utils';
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
@@ -191,4 +192,76 @@ describe('test SelectUser container', () => {
     accountList = instance.findAllByType(AccountList);
     expect(accountList).toHaveLength(0);
   });
+
+  test('_TextInput onChange unitOwner phone, validate and call api sharedPermission', async () => {
+    const response = {
+      status: 400,
+      data: { non_field_errors: 'You cannot invite yourself' },
+    };
+    mockAxiosPost(response);
+
+    const spyToastError = jest.spyOn(ToastBottomHelper, 'error');
+
+    await act(async () => {
+      tree = create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    const textInput = instance.findByType(_TextInput);
+    const button = instance.findByType(Button);
+
+    await act(async () => {
+      await textInput.props.onChange('0909123456');
+    });
+
+    await act(async () => {
+      await button.props.onPress();
+    });
+
+    expect(textInput.props.errorText).toEqual('');
+    expect(axios.post).toHaveBeenCalledWith(API.SHARE.SHARE(), {
+      phone: '0909123456',
+      email: '',
+      unit: 1,
+      permissions: { controlPermissions: {}, readPermissions: {} },
+    });
+
+    expect(spyToastError).toBeCalled();
+  });
+
+  test('_TextInput onChange phone, validate and call api not sharedPermission', async () => {
+    const response = {
+      status: 400,
+      data: { phone: '0909123456' },
+    };
+    mockAxiosPost(response);
+
+    const spyToastError = jest.spyOn(ToastBottomHelper, 'error');
+
+    await act(async () => {
+      tree = create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    const textInput = instance.findByType(_TextInput);
+    const button = instance.findByType(Button);
+
+    await act(async () => {
+      await textInput.props.onChange('0909123456');
+    });
+
+    await act(async () => {
+      await button.props.onPress();
+    });
+
+    expect(textInput.props.errorText).toEqual('');
+    expect(axios.post).toHaveBeenCalledWith(API.SHARE.SHARE(), {
+      phone: '0909123456',
+      email: '',
+      unit: 1,
+      permissions: { controlPermissions: {}, readPermissions: {} },
+    });
+
+    expect(spyToastError).toBeCalled();
+  });
 });

package/src/screens/Unit/Detail.js

@@ -26,7 +26,11 @@ import { useNavigation } from '@react-navigation/native';
 import Routes from '../../utils/Route';
 import SubUnitAutomate from '../../commons/SubUnit/OneTap';
 import SubUnitFavorites from '../../commons/SubUnit/Favorites';
-import { AUTOMATE_TYPE } from '../../configs/Constants';
+import { AUTOMATE_TYPE, NOTIFICATION_TYPES } from '../../configs/Constants';
+import {
+  watchNotificationData,
+  unwatchNotificationData,
+} from '../../utils/Monitor';
 
 const UnitDetail = ({ route }) => {
   const t = useTranslations();
@@ -43,6 +47,7 @@ const UnitDetail = ({ route }) => {
   const isFocused = useIsFocused();
   const { stateData, setAction } = useContext(SCContext);
   const { navigate } = useNavigation();
+  const user = useSCContextSelector((state) => state?.auth?.account?.user);
   const isLavidaSource = useSCContextSelector(
     (state) => state.app.isLavidaSource
   );
@@ -144,9 +149,13 @@ const UnitDetail = ({ route }) => {
     );
   }, [t, unitId]);
 
-  const onRefresh = useCallback(() => {
-    fetchDetails();
-  }, [fetchDetails]);
+  const onRefresh = useCallback(
+    (data = { content_code: NOTIFICATION_TYPES.NOTIFY_RENAME_UNIT }) => {
+      data.content_code === NOTIFICATION_TYPES.NOTIFY_RENAME_UNIT &&
+        fetchDetails();
+    },
+    [fetchDetails]
+  );
 
   const handleAppStateChange = useCallback(
     (nextAppState) => {
@@ -312,6 +321,11 @@ const UnitDetail = ({ route }) => {
     navigate(isLavidaSource ? Routes.SmartHomeDashboard : Routes.Dashboard);
   }, [isLavidaSource, navigate]);
 
+  useEffect(() => {
+    watchNotificationData(user, onRefresh);
+    return () => unwatchNotificationData(user);
+  }, [user, onRefresh]);
+
   return (
     <WrapParallaxScrollView
       uriImg={unit.background}

package/src/screens/Unit/ManageUnit.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import { View, TouchableOpacity, Image, Platform } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useTranslations } from '../../hooks/Common/useTranslations';
@@ -21,6 +21,7 @@ import { IconOutline } from '@ant-design/icons-react-native';
 import styles from './ManageUnitStyles';
 import { useNavigation } from '@react-navigation/native';
 import { ModalCustom } from '../../commons/Modal';
+import { Icon } from '@ant-design/react-native';
 
 const ButtonWrapper = ({
   onPress,
@@ -29,17 +30,26 @@ const ButtonWrapper = ({
   value,
   valueColor,
   children,
+  icon,
 }) => {
   return (
     <TouchableOpacity
       onPress={onPress}
       testID={testId}
-      style={styles.buttonWrapper}
+      style={!icon ? styles.buttonWrapper : styles.buttonWrapperAvatar}
     >
       <View style={styles.buttonInfo}>
-        <Text type="H4" semibold>
-          {title}
-        </Text>
+        {!icon ? (
+          <Text type="H4" semibold>
+            {title}
+          </Text>
+        ) : (
+          (icon && <Image source={{ uri: icon }} style={styles.avatar} />) || (
+            <View style={styles.avatar}>
+              <Icon name={'user'} size={27} />
+            </View>
+          )
+        )}
         <View style={styles.buttonValue}>
           <Text
             type="Body"
@@ -66,15 +76,29 @@ const ManageUnit = ({ route }) => {
     name: unit.name,
     address: unit.address,
     background: unit.background,
+    icon: unit.icon,
   });
 
   const [unitName, setUnitName] = useState(unit.name);
-  const [imageUrl, setImageUrl] = useState('');
+  const [imageUrlBackground, setImageUrlBackground] = useState('');
+  const [imageUrlIcon, setImageUrlIcon] = useState('');
+  const [checkSelectImage, setCheckSelectImage] = useState('');
   const [showImagePicker, setShowImagePicker] = useState(false);
 
+  const onUpdateImage = useCallback(
+    async (data) => {
+      if (checkSelectImage === 'background') {
+        setImageUrlBackground(data);
+      } else {
+        setImageUrlIcon(data);
+      }
+    },
+    [checkSelectImage]
+  );
+
   const updateUnit = useCallback(
-    async (bodyData, headers) => {
-      const formData = createFormData(bodyData, ['background']);
+    async (bodyData, headers, dataInput) => {
+      const formData = createFormData(bodyData, [dataInput]);
 
       const { success, data } = await axiosPatch(
         API.UNIT.MANAGE_UNIT(unit.id),
@@ -110,20 +134,37 @@ const ManageUnit = ({ route }) => {
     setHideEdit(true);
   }, [unitName, setHideEdit, updateUnit]);
 
-  const handleChoosePhoto = useCallback(() => {
-    setShowImagePicker(true);
-  }, [setShowImagePicker]);
+  const handleChoosePhoto = useCallback(
+    (text) => {
+      setCheckSelectImage(text);
+      setShowImagePicker(true);
+    },
+    [setShowImagePicker]
+  );
 
   useEffect(() => {
-    if (imageUrl) {
+    if (imageUrlBackground) {
       updateUnit(
-        { background: imageUrl },
+        { background: imageUrlBackground },
         {
           headers: { 'Content-Type': 'multipart/form-data' },
-        }
+        },
+        'background'
       );
     }
-  }, [imageUrl, updateUnit]);
+  }, [imageUrlBackground, updateUnit]);
+
+  useEffect(() => {
+    if (imageUrlIcon) {
+      updateUnit(
+        { icon: imageUrlIcon },
+        {
+          headers: { 'Content-Type': 'multipart/form-data' },
+        },
+        'icon'
+      );
+    }
+  }, [imageUrlIcon, updateUnit]);
 
   const [showRemove, setshowRemove, setHideRemove] = useBoolean();
   const goRemove = useCallback(async () => {
@@ -160,6 +201,12 @@ const ManageUnit = ({ route }) => {
     compressImageQuality: 0.8,
   };
 
+  const SensorNumbers = useMemo(() => {
+    const stations = unit?.stations || [];
+    return stations.filter((item) => !item.isFavorites && !item.isOneTap)
+      .length;
+  }, [unit.stations]);
+
   return (
     <>
       <WrapHeaderScrollable
@@ -169,6 +216,12 @@ const ManageUnit = ({ route }) => {
         <View style={styles.wraper}>
           {isOwner && (
             <>
+              <ButtonWrapper
+                onPress={() => handleChoosePhoto('avatar')}
+                value={t('icon_unit')}
+                icon={unitData.icon}
+                testID={TESTID.MANAGE_UNIT_CHANGE_PHOTO}
+              />
               <ButtonWrapper
                 onPress={setshowEdit}
                 testID={TESTID.MANAGE_UNIT_CHANGE_NAME}
@@ -187,10 +240,11 @@ const ManageUnit = ({ route }) => {
               <ButtonWrapper
                 onPress={goToManageSubUnit}
                 title={t('manage_sub_units')}
-                value={`${unit?.stations?.length} sub-units`}
+                value={`${SensorNumbers} sub-units`}
+                testID={TESTID.MANAGE_UNIT_GO_TO_SUBUNIT}
               />
               <ButtonWrapper
-                onPress={handleChoosePhoto}
+                onPress={() => handleChoosePhoto('background')}
                 title={t('unit_wallpaper')}
                 value={t('tap_to_change')}
                 valueColor={Colors.Orange}
@@ -213,7 +267,7 @@ const ManageUnit = ({ route }) => {
               <ImagePicker
                 showImagePicker={showImagePicker}
                 setShowImagePicker={setShowImagePicker}
-                setImageUrl={setImageUrl}
+                setImageUrl={onUpdateImage}
                 optionsCapture={options}
                 testID={TESTID.MANAGE_UNIT_IMAGE_PICKER}
               />
@@ -221,20 +275,22 @@ const ManageUnit = ({ route }) => {
           )}
         </View>
       </WrapHeaderScrollable>
-      <TouchableOpacity
-        style={styles.removeButton}
-        onPress={setshowRemove}
-        testID={TESTID.MANAGE_UNIT_SHOW_REMOVE}
-      >
-        <Text
-          type={'H4'}
-          semibold
-          color={Colors.Red}
-          style={styles.removeBorderBottom}
+      {!showEdit && (
+        <TouchableOpacity
+          style={styles.removeButton}
+          onPress={setshowRemove}
+          testID={TESTID.MANAGE_UNIT_SHOW_REMOVE}
         >
-          {t('remove_unit')}
-        </Text>
-      </TouchableOpacity>
+          <Text
+            type={'H4'}
+            semibold
+            color={Colors.Red}
+            style={styles.removeBorderBottom}
+          >
+            {t('remove_unit')}
+          </Text>
+        </TouchableOpacity>
+      )}
       <ModalCustom
         isVisible={showEdit}
         onBackButtonPress={setHideEdit}
@@ -250,7 +306,7 @@ const ManageUnit = ({ route }) => {
               </Text>
             </View>
             <_TextInput
-              defaultValue={unitName}
+              defaultValue={unitData?.name}
               onChange={(value) => setUnitName(value)}
               textInputStyle={styles.textInputStyle}
               wrapStyle={styles.textInputWrapStyle}

package/src/screens/Unit/ManageUnitStyles.js

@@ -16,6 +16,12 @@ export default StyleSheet.create({
     borderBottomWidth: 0.5,
     borderBottomColor: Colors.Gray6,
   },
+  buttonWrapperAvatar: {
+    paddingTop: 14,
+    paddingBottom: 24,
+    borderBottomWidth: 0.5,
+    borderBottomColor: Colors.Gray7,
+  },
   buttonInfo: {
     flex: 1,
     flexDirection: 'row',
@@ -29,6 +35,7 @@ export default StyleSheet.create({
   },
   value: {
     marginRight: 20,
+    fontSize: 14,
   },
   location: {
     marginTop: 16,
@@ -104,4 +111,17 @@ export default StyleSheet.create({
   textInputWrapStyle: {
     marginTop: 0,
   },
+  avatar: {
+    height: 50,
+    width: 50,
+    borderRadius: 25,
+    borderWidth: 0.5,
+    borderColor: Colors.Gray5,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  wrapAvatar: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
 });

package/src/screens/Unit/SmartAccount.js

@@ -18,6 +18,7 @@ import { usePopover, useBoolean } from '../../hooks/Common';
 import { MenuActionMore, AlertAction } from '../../commons';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { useStateAlertRemove } from '../Unit/hook/useStateAlertRemove';
+import { ToastBottomHelper } from '../../utils/Utils';
 
 const ListSmartAccount = ({ route }) => {
   const { unitId } = route?.params || {};
@@ -76,8 +77,11 @@ const ListSmartAccount = ({ route }) => {
     const { success } = await axiosDelete(
       API.SMART_ACCOUNT.REMOVE_SMART_ACCOUNT(id)
     );
-    success && getAllSmartAccounts();
-  }, [getAllSmartAccounts, hideAlertAction]);
+    if (success) {
+      ToastBottomHelper.success(t('removed_successfully'));
+      getAllSmartAccounts();
+    }
+  }, [getAllSmartAccounts, hideAlertAction, t]);
 
   const listMenuItem = useMemo(() => {
     return [{ action: 'remove', text: t('remove_account') }];

package/src/screens/Unit/__test__/Detail.test.js

@@ -74,7 +74,7 @@ describe('Test UnitDetail', () => {
 
   const detailUnitApiUrl = API.UNIT.UNIT_DETAIL(1);
   const summaryUnitApiUrl = API.UNIT.UNIT_SUMMARY(1);
-  const sensorStatusApiUrl = API.SENSOR.STATUS();
+  const sensorStatusApiUrl = API.UNIT.SENSORS_STATUS(1);
 
   let tree;
 
@@ -452,7 +452,50 @@ describe('Test UnitDetail', () => {
     expect(fullView).toHaveLength(1);
     expect(fullView[0].props.isVisible).toEqual(false);
   });
+  test('onPress subunit camera devices', async () => {
+    const unitData = {
+      stations: [
+        {
+          camera_devices: [
+            {
+              configuration: {
+                id: 4,
+                name: 'Camera cửa nhà xe',
+                uri: 'rtsp://admin:hd543211@/ISAPI/Streaming/Channels/101/',
+                preview_uri:
+                  'rtsp://admin:hd543211@/ISAPI/Streaming/Channels/101/',
+                playback: 'rtsp://admin:hd543211@/Streaming/tracks/101/',
+              },
+              id: 41,
+              order: 1,
+              template: 'camera',
+              type: 'camera',
+            },
+          ],
+        },
+      ],
+    };
+
+    await act(async () => {
+      tree = await renderer.create(
+        wrapComponent({ params: { ...route.params, unitData } }, account)
+      );
+    });
+    const instance = tree.root;
+    const CameraDeviceViews = instance.findAllByType(CameraDevice);
+    expect(CameraDeviceViews).toHaveLength(1);
+    const goDetailButton = tree.root.findAll(
+      (el) =>
+        el.props.testID === TESTID.SUB_UNIT_GO_DETAIL &&
+        el.type === TouchableOpacity
+    );
 
+    expect(goDetailButton).toHaveLength(2);
+    await act(async () => {
+      await goDetailButton[0].props.onPress();
+    });
+    expect(mockedNavigate).toHaveBeenCalled();
+  });
   test('render subunit favorites', async () => {
     const unitData = {
       stations: [

package/src/screens/Unit/__test__/ManageUnit.test.js

@@ -11,6 +11,17 @@ import { mockSCStore } from '../../../context/mockStore';
 
 jest.mock('axios');
 
+const mockNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useRoute: jest.fn(),
+    useNavigation: () => ({
+      navigate: mockNavigate,
+    }),
+  };
+});
+
 const mockedDispatch = jest.fn();
 jest.mock('react-redux', () => ({
   useSelector: jest.fn(),
@@ -42,6 +53,11 @@ describe('Test Manage Unit', () => {
     },
   };
 
+  beforeEach(() => {
+    mockNavigate.mockClear();
+    axios.get.mockClear();
+  });
+
   const getElement = (instance) => {
     const changeName = instance.findAll(
       (item) => item.props.testID === TESTID.MANAGE_UNIT_CHANGE_NAME
@@ -207,4 +223,57 @@ describe('Test Manage Unit', () => {
     spyToast.mockReset();
     spyToast.mockRestore();
   });
+  test('test onPress onUpdateImage', async () => {
+    await act(async () => {
+      tree = create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    const imagePicker = instance.find(
+      (item) => item.props.testID === TESTID.MANAGE_UNIT_IMAGE_PICKER
+    );
+
+    const handleChoosePhoto = instance.findAll(
+      (item) => item.props.testID === TESTID.MANAGE_UNIT_CHANGE_PHOTO
+    );
+
+    act(() => {
+      handleChoosePhoto[0].props.onPress();
+      handleChoosePhoto[1].props.onPress();
+      imagePicker.props.setImageUrl('abc');
+    });
+
+    expect(axios.patch).toBeCalled();
+    expect(imagePicker.props.showImagePicker).toBeTruthy();
+  });
+  test('test onPress goSelectLocation', async () => {
+    await act(async () => {
+      tree = create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    const buttonWrapper = instance.find(
+      (item) => item.props.testID === TESTID.MANAGE_UNIT_CHANGE_LOCATION
+    );
+
+    act(() => {
+      buttonWrapper.props.onPress();
+    });
+    expect(mockNavigate).toBeCalled();
+  });
+  test('test onPress goToManageSubUnit', async () => {
+    await act(async () => {
+      tree = create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    const buttonWrapper = instance.find(
+      (item) => item.props.testID === TESTID.MANAGE_UNIT_GO_TO_SUBUNIT
+    );
+
+    act(() => {
+      buttonWrapper.props.onPress();
+    });
+    expect(mockNavigate).toBeCalled();
+  });
 });

package/src/screens/Unit/__test__/SmartAccount.test.js

@@ -6,21 +6,22 @@ import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import ListSmartAccount from '../SmartAccount';
 import { SmartAccountItem } from '../SmartAccountItem';
-import { MenuActionMore } from '../../../commons';
+import { AlertAction, MenuActionMore } from '../../../commons';
+import Routes from '../../../utils/Route';
 
 const wrapComponent = (route, navigation) => (
   <SCProvider initState={mockSCStore({})}>
-    <ListSmartAccount />
+    <ListSmartAccount route={route} />
   </SCProvider>
 );
 
-const mockedNavigate = jest.fn();
-
+const mockNavigate = jest.fn();
 jest.mock('@react-navigation/native', () => {
   return {
     ...jest.requireActual('@react-navigation/native'),
+    useRoute: jest.fn(),
     useNavigation: () => ({
-      goBack: mockedNavigate,
+      navigate: mockNavigate,
     }),
   };
 });
@@ -35,8 +36,13 @@ jest.mock('react', () => {
 jest.mock('axios');
 describe('Test SmartAccount', () => {
   let tree;
+  let route = {
+    params: {
+      unitId: 1,
+    },
+  };
   test('test render SmartAccount', async () => {
-    axios.get.mockImplementationOnce(() => ({
+    const reponse = {
       status: 200,
       data: [
         {
@@ -58,14 +64,25 @@ describe('Test SmartAccount', () => {
           username: 'loitest3',
         },
       ],
-    }));
+    };
+    axios.get.mockImplementationOnce(() => reponse);
     await act(async () => {
-      tree = await renderer.create(wrapComponent());
+      tree = await renderer.create(wrapComponent(route));
     });
     const instance = tree.root;
 
     const smartAccountItem = instance.findAllByType(SmartAccountItem);
     expect(smartAccountItem.length).toEqual(3);
+    act(() => {
+      smartAccountItem[0].props.gotoSmartAccountDetail(reponse.data[0]);
+      smartAccountItem[0].props.onShowMenuMore(reponse.data[0]);
+    });
+    expect(mockNavigate).toBeCalledWith(Routes.ListDeviceSmartAccount, {
+      username: reponse.data[0].username,
+      brand: reponse.data[0].brand,
+      smart_account_id: reponse.data[0].id,
+      unit_id: route.params.unitId,
+    });
   });
 
   test('test render SmartAccountItem', async () => {
@@ -79,4 +96,16 @@ describe('Test SmartAccount', () => {
     });
     expect(menuActionMore.props.isVisible).toEqual(false);
   });
+
+  test('test render AlertAction', async () => {
+    await act(async () => {
+      tree = await renderer.create(wrapComponent());
+    });
+    const instance = tree.root;
+    const alertAction = instance.findByType(AlertAction);
+    await act(async () => {
+      alertAction.props.leftButtonClick();
+    });
+    expect(alertAction).toBeDefined();
+  });
 });

package/src/screens/Unit/hook/useStateAlertRemove.js

@@ -7,7 +7,7 @@ export const useStateAlertRemove = () => {
     visible: false,
     title: t('remove_account'),
     message: '',
-    leftButton: t('yes_remove'),
+    leftButton: t('remove'),
     rightButton: t('cancel'),
   });
   const hideAlertAction = useCallback(() => {

package/src/utils/Apis/axios.js

@@ -151,7 +151,10 @@ export async function axiosPatch(...options) {
 export async function axiosDelete(...options) {
   return await axiosCall('delete', ...options);
 }
-
+const convertFilenameImage = (filename) => {
+  const filenameConverted = filename?.replace(/HEIC/g, 'jpg');
+  return filename || filenameConverted;
+};
 export function createFormData(data, list_file_field) {
   const formData = new FormData();
 
@@ -165,7 +168,9 @@ export function createFormData(data, list_file_field) {
       }
 
       formData.append(key, {
-        name: item.filename || item.path?.split('/').pop(),
+        name: convertFilenameImage(
+          item.filename || item.path?.split('/').pop()
+        ),
         type: item.mime,
         uri: item.path,
       });

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

@@ -672,6 +672,7 @@
   "text_notification_content_remove_unit_to_member": "Unit **%{unit_name}** has been removed by **%{unit_owner_name}**. You cannot access to this unit anymore.",
   "text_notification_content_remove_member": "You were remove from **%{unit_name}** by **%{unit_owner_name}**. You cannot access to this unit anymore.",
   "text_notification_content_member_leave_unit": "**%{member_name}**  has left **%{unit_name}**.",
+  "text_notification_content_rename_unit": "Unit **%{old_unit_name}** has been renamed to **%{new_unit_name}** by **%{owner_name}**.",
   "this_spot_does_not_exsit": "This spot does not exist",
   "please_scan_again_or_contact_the_parking_manager": "Please scan again or contact the parking manager",
   "this_spot_does_not_support_to_scan": "This spot does not support to scan",
@@ -894,8 +895,9 @@
   "location_permission_required_wifi_message": "This app needs location permission as this is required to scan for wifi networks.",
   "deny": "DENY",
   "allow": "ALLOW",
+  "avatar" : "Avatar",
   "error_share_permission": "{text} {data} does not exist!",
   "text_phone_share_permission": "The phone",
   "text_email_share_permission": "Email",
-  "yes_remove": "Yes,remove"
+  "icon_unit": "Icon unit"
 }

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

@@ -680,6 +680,7 @@
   "text_notification_content_remove_unit_to_member": "Địa điểm **%{unit_name}** vừa được xoá bởi **%{unit_owner_name}**. Bạn không thể truy cập vào địa điểm này được nữa.",
   "text_notification_content_remove_member": "Bạn vừa được xoá khỏi **%{unit_name}** bởi **%{unit_owner_name}**. Bạn không thể truy cập vào địa điểm này được nữa.",
   "text_notification_content_member_leave_unit": "**%{member_name}** vừa rời khỏi **%{unit_name}**.",
+  "text_notification_content_rename_unit": "Địa điểm **%{old_unit_name}** vừa được đổi tên thành **%{new_unit_name}** bởi **%{owner_name}**.",
   "this_spot_does_not_exsit": "Vị trí đỗ này không tồn tại",
   "please_scan_again_or_contact_the_parking_manager": "Vui lòng quét lại hoặc liên hệ với người quản lý bãi đậu xe",
   "this_spot_does_not_support_to_scan": "Vị trí đỗ này không hỗ trợ quét",
@@ -897,8 +898,9 @@
   "location_permission_required_wifi_message": "Ứng dụng này cần có quyền định vị vì ứng dụng này được yêu cầu để quét các mạng Wi-Fi.",
   "deny": "Từ chối",
   "allow": "Cho phép",
+  "avatar" : "Ảnh đại diện",
   "error_share_permission": "{text} {data} không tồn tại!",
   "text_phone_share_permission": "Số điện thoại",
   "text_email_share_permission": "Email",
-  "yes_remove": "Có,loại bỏ"
+  "icon_unit": "Ảnh đại diện địa điểm"
 }

package/src/{screens/Notification → utils}/Monitor.js

@@ -1,4 +1,4 @@
-import { getPusher, destroyPusher } from '../../utils/Pusher';
+import { getPusher, destroyPusher } from './Pusher';
 
 // eslint-disable-next-line promise/prefer-await-to-callbacks
 export const watchNotificationData = (user, callback) => {