@eohjsc/react-native-smart-city 0.3.87 → 0.3.89

package/package.json

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

package/src/commons/Device/FlatListItems.js

@@ -46,7 +46,7 @@ const FlatListItems = memo(({ data, style, title, offsetTitle }) => {
     }
     return items.map((item, index) => (
       <QualityIndicatorItem
-        key={item?.id}
+        key={(item?.id || index).toString()}
         standard={item.standard}
         value={item.value}
         measure={item.unit}

package/src/commons/Device/HistoryChart.js

@@ -162,7 +162,7 @@ const HistoryChart = memo(
       return roundedSum.toFixed();
     }, [configuration, datas, chartConfig]);
 
-    const renderChart = useCallback(() => {
+    const renderChart = useMemo(() => {
       if (configuration.type === 'line_chart') {
         return (
           <View style={styles.chartContainer}>
@@ -228,7 +228,7 @@ const HistoryChart = memo(
             </View>
           </View>
         )}
-        {renderChart()}
+        {renderChart}
         {configuration.config === 'power_consumption' && !!chartConfig.price && (
           <Text type="H4">
             {t('total_power_price')} <Text bold>{formatMoney(totalPrice)}</Text>

package/src/commons/Device/LinearChart.js

@@ -108,6 +108,7 @@ function LinearChart({ datas }) {
 
   return (
     <View style={styles.container}>
+      {/* // TODO : Hinh will research to fix warning Highchart*/}
       <HighchartsReactNative
         styles={styles.chartStyle}
         webviewStyles={styles.webviewStyle}

package/src/commons/Device/PMSensor/PMSensorIndicator.js

@@ -3,12 +3,8 @@ import { View } from 'react-native';
 import { FlatList } from 'react-native';
 import QualityIndicatorItem from '../WaterQualitySensor/QualityIndicatorsItem';
 import styles from './PMSensorIndicatorStyles';
-import { roundNumber } from '../../../utils/Utils';
+import { keyExtractor, roundNumber } from '../../../utils/Utils';
 
-//using for PM2.5-10, CO, UV, Rainflow Sensor
-const keyExtractor = (item, index) => {
-  return index;
-};
 const PMSensorIndicator = memo(({ data = [], style }) => {
   const renderItem = useCallback(
     ({ item }) => {

package/src/commons/Device/WindDirection/Compass/index.js

@@ -41,6 +41,7 @@ const Compass = memo(({ data = [], ...props }) => {
       toValue: value,
       duration: 200,
       easing: Easing.linear,
+      useNativeDriver: false,
     }).start();
   }, [currentRotation, value]);
 

package/src/commons/MenuActionAddnew/__test__/MenuActionAddNew.test.js

@@ -17,7 +17,7 @@ describe('Test MenuActionAddNew', () => {
   let wrapper;
 
   // flat list issue
-  it.skip('onItemClick MenuActionAddNew', async () => {
+  it('onItemClick MenuActionAddNew', async () => {
     const mockFunc = jest.fn();
     await act(async () => {
       wrapper = create(wrapComponent(dataActions));

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

@@ -9,7 +9,7 @@ describe('Test MenuActionList', () => {
   const listItem = [item(1)];
   let wrapper;
 
-  it.skip('onItemClick MenuActionList', async () => {
+  it('onItemClick MenuActionList', async () => {
     const mockOnItemClick = jest.fn();
     const mockHideModal = jest.fn();
 

package/src/commons/ModalPopupCT/index.js

@@ -20,6 +20,8 @@ const ModalPopupCT = ({
   isVisible = false,
   onPressConfirm,
   onPressCancel,
+  textShowAlert,
+  footer,
 }) => {
   const [isChecked, setIsChecked] = useState(false);
   const isUnHideButton = useMemo(() => {
@@ -59,7 +61,7 @@ const ModalPopupCT = ({
               <View style={styles.viewIconAlert}>{iconAlert}</View>
               <View style={styles.viewTextAlert}>
                 <Text type="H4" color={Colors.Gray9}>
-                  {t('text_alert_modal_popup_ct')}
+                  {textShowAlert || t('text_alert_modal_popup_ct')}
                 </Text>
               </View>
             </View>
@@ -94,41 +96,45 @@ const ModalPopupCT = ({
             </View>
           )}
         </View>
-        <View style={styles.footer}>
-          <View style={styles.buttonBottom}>
-            <TouchableOpacity
-              onPress={onPressCancel}
-              style={styles.buttonCancel}
-            >
-              <Text
-                type="H4"
-                bold
-                color={Colors.Gray9}
-                style={styles.paddingBottom3}
-              >
-                {t('cancel')}
-              </Text>
-            </TouchableOpacity>
-            <View style={styles.buttonConfirm}>
+        {footer || (
+          <View style={styles.footer}>
+            <View style={styles.buttonBottom}>
               <TouchableOpacity
-                onPress={onPressConfirm}
-                disabled={isUnHideButton ? !isUnHideButton : !isChecked}
+                onPress={onPressCancel}
+                style={styles.buttonCancel}
               >
                 <Text
                   type="H4"
                   bold
-                  color={Colors.White}
+                  color={Colors.Gray9}
                   style={styles.paddingBottom3}
                 >
-                  {t((type === 'reboot' && 'reboot') || 'delete')}
+                  {t('cancel')}
                 </Text>
               </TouchableOpacity>
-              <View
-                style={isUnHideButton ? {} : !isChecked && styles.disableButton}
-              />
+              <View style={styles.buttonConfirm}>
+                <TouchableOpacity
+                  onPress={onPressConfirm}
+                  disabled={isUnHideButton ? !isUnHideButton : !isChecked}
+                >
+                  <Text
+                    type="H4"
+                    bold
+                    color={Colors.White}
+                    style={styles.paddingBottom3}
+                  >
+                    {t((type === 'reboot' && 'reboot') || 'delete')}
+                  </Text>
+                </TouchableOpacity>
+                <View
+                  style={
+                    isUnHideButton ? {} : !isChecked && styles.disableButton
+                  }
+                />
+              </View>
             </View>
           </View>
-        </View>
+        )}
       </View>
     </ModalCustom>
   );

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

@@ -49,6 +49,7 @@ const SubUnitAutomate = ({ isOwner, listAutomate, unit, wrapItemStyle }) => {
       >
         {listAutomate.map((item, index) => (
           <TouchableOpacity
+            key={(item?.id || index).toString()}
             style={
               indexAutomate === index
                 ? styles.borderSelection
@@ -79,7 +80,7 @@ const SubUnitAutomate = ({ isOwner, listAutomate, unit, wrapItemStyle }) => {
               isOwner={isOwner}
               automate={item}
               unit={unit}
-              key={item.id}
+              key={item.id.toString()}
             />
           ))}
         <ItemAddNew

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

@@ -146,7 +146,7 @@ const AirQuality = memo(({ summaryDetail }) => {
           {!!advices &&
             advices.map((item, index) => {
               return (
-                <View key={index} style={styles.boxContentHealth}>
+                <View key={index.toString()} style={styles.boxContentHealth}>
                   <View
                     style={[styles.boxDot, { backgroundColor: outdoorColor }]}
                   />

package/src/configs/API.js

@@ -4,7 +4,7 @@ const API = {
   UNIT: {
     MY_UNITS: () => '/property_manager/units/mine/',
     SHARED_UNITS: () => '/property_manager/shared_units/',
-    CREATE_UNIT: () => '/property_manager/units/',
+    CREATE_UNIT: () => '/property_manager/iot_dashboard/dev_mode/units/',
     UNIT_DETAIL: (id) => `/property_manager/units/${id}/`,
     UNITS_PUBLIC: () => '/property_manager/units/public/',
     UNIT_SUMMARY: (id) => `/property_manager/units/${id}/summary/`,

package/src/configs/AccessibilityLabel.js

@@ -675,4 +675,7 @@ export default {
   ROW_ITEM_DEVMOD: 'ROW_ITEM_DEVMOD',
   BUTTON_UNDERSTAND: 'BUTTON_UNDERSTAND',
   MODAL_POPUP_CUSTOM: 'MODAL_POPUP_CUSTOM',
+
+  //MemberInfo
+  CHANGE_ROLE: 'CHANGE_ROLE',
 };

package/src/context/SCContext.tsx

@@ -91,7 +91,7 @@ export const SCWrapper = (props) => {
   return (
     <>
       <SCProvider {...props} />
-      <Toast config={toastConfig} ref={(ref) => Toast.setRef(ref)} />
+      <Toast config={toastConfig} />
     </>
   );
 };

package/src/screens/AddLocationMaps/index.js

@@ -41,10 +41,11 @@ const AddLocationMaps = memo(() => {
 
   const onDone = useCallback(() => {
     navigate(Routes.AddSubUnit, {
-      location: input,
+      location: searchedLocation,
       isAddUnit: true,
     });
-  }, [input, navigate]);
+  }, [searchedLocation, navigate]);
+
   const onBack = useCallback(() => {
     goBack();
   }, [goBack]);
@@ -95,7 +96,7 @@ const AddLocationMaps = memo(() => {
   }, []);
 
   const onPressRowLocation = useCallback(async (item) => {
-    setInput(item.description);
+    setInput(item);
     setSearchData([]);
     const body = {
       params: {
@@ -111,7 +112,7 @@ const AddLocationMaps = memo(() => {
     if (success) {
       const { location } = data.result.geometry;
       setSearchedLocation({
-        description: item.description,
+        description: item?.description,
         latitude: location.lat,
         longitude: location.lng,
       });

package/src/screens/AllGateway/hooks/__test__/index.test.js

@@ -17,13 +17,15 @@ jest.mock('@react-navigation/native', () => {
 });
 describe('Test useGateway', () => {
   let hook;
+
   beforeEach(async () => {
+    mock.reset();
     await act(() => {
       hook = renderHook(() => useGateway());
     });
   });
+
   afterEach(() => {
-    mock.reset();
     Toast.show.mockClear();
   });
 
@@ -46,9 +48,17 @@ describe('Test useGateway', () => {
       .reply(200, { results: [{ id: 1, name: 'chip 1' }] });
 
     await act(async () => {
-      await hook.result.current.fetchDataGateways();
+      await hook.result.current.fetchDataGateways(1, 1);
     });
     expect(hook.result.current.gateways).toEqual([{ id: 1, name: 'chip 1' }]);
+
+    await act(async () => {
+      await hook.result.current.fetchDataGateways(2, 1);
+    });
+    expect(hook.result.current.gateways).toEqual([
+      { id: 1, name: 'chip 1' },
+      { id: 1, name: 'chip 1' },
+    ]);
   });
 
   it('test useGateway fetchDevicesGateway isInterval', async () => {
@@ -103,4 +113,18 @@ describe('Test useGateway', () => {
       visibilityTime: 1000,
     });
   });
+
+  it('test fetchActionConfigDevice', async () => {
+    mock.onDelete(API.DEV_MODE.ZIGBEE.CONFIG_MAP(1, 1)).reply(200);
+    await act(async () => {
+      await hook.result.current.fetchActionConfigDevice(1, 1, true, false);
+    });
+    expect(hook.result.current.detailDeviceZigbee).toEqual({});
+
+    mock.onDelete(API.DEV_MODE.ZIGBEE.ACTION(1, 1)).reply(200);
+    await act(async () => {
+      await hook.result.current.fetchActionConfigDevice(1, 1, true, true);
+    });
+    expect(hook.result.current.detailDeviceZigbee).toEqual({});
+  });
 });

package/src/screens/AllGateway/hooks/useGateway.js

@@ -68,7 +68,9 @@ export const useGateway = () => {
           const config_read = data
             ?.filter(
               (item) =>
-                item?.config?.is_read && item?.value_type !== VIRTUAL_TYPE
+                !item?.config.is_write &&
+                item?.config?.is_read &&
+                item?.value_type !== VIRTUAL_TYPE
             )
             ?.map((item) => {
               return {
@@ -86,12 +88,10 @@ export const useGateway = () => {
             });
           const config_virtual = data
             ?.filter((item) => item?.value_type === VIRTUAL_TYPE)
-            ?.map((item) => {
-              return {
-                ...item,
-                pin_number: item?.pin_number.toString(),
-              };
-            });
+            ?.map((item) => ({
+              ...item,
+              pin_number: item?.pin_number.toString(),
+            }));
 
           setDetailDeviceInternal((prev) => ({
             ...prev,
@@ -164,8 +164,10 @@ export const useGateway = () => {
         );
         success && setGatewayDevices((prev) => ({ ...prev, modbus: [] }));
       }
-      success && ToastBottomHelper.success(t('delete_successfully'));
-      success && navigation.pop(numberGoBack);
+      if (success) {
+        ToastBottomHelper.success(t('delete_successfully'));
+        navigation.pop(numberGoBack);
+      }
     },
     [navigation]
   );

package/src/screens/Automate/MultiUnits.js

@@ -131,6 +131,7 @@ const MultiUnits = () => {
       <View style={styles.wrapItem}>
         {sortedListItems.map((item, index) => (
           <ItemOneTap
+            key={(item?.id || index).toString()}
             isOwner={isOwner}
             automate={item}
             wrapSyles={[

package/src/screens/Automate/index.js

@@ -25,8 +25,7 @@ import {
   AccessibilityLabel,
   UNIT_TYPES,
 } from '../../configs/Constants';
-
-const keyExtractor = (item) => item.id;
+import { keyExtractor } from '../../utils/Utils';
 
 const Automate = () => {
   const t = useTranslations();

package/src/screens/Device/detail.js

@@ -706,7 +706,7 @@ const DeviceDetail = ({ route }) => {
                 return (
                   <SensorDisplayItem
                     accessibilityLabel={AccessibilityLabel.SENSOR_DISPLAY_ITEM}
-                    key={index}
+                    key={(item?.id || index).toString()}
                     item={item}
                     evaluate={evaluate}
                     emergency={onEmergencyButtonPress}

package/src/screens/Sharing/InfoMemberUnit.js

@@ -9,7 +9,7 @@ import { HeaderCustom } from '../../commons/Header';
 import RowMemberInfo from '../GuestInfo/components/RowGuestInfo';
 import { useIsOwnerOfUnit } from '../../hooks/Common';
 import { axiosGet } from '../../utils/Apis/axios';
-import { AlertAction } from '../../commons';
+import { AlertAction, ViewButtonBottom } from '../../commons';
 import { useStateAlertAction, useDataMember } from './hooks';
 import ItemChangeRole from './Components/ItemChangeRole';
 import MemberSvg from '../../Images/Common/member.svg';
@@ -18,6 +18,7 @@ import styles from './Styles/inforMemberUnitStyles';
 import { useNavigation, useIsFocused } from '@react-navigation/native';
 import Routes from '../../utils/Route';
 import { AccessibilityLabel } from '../../configs/Constants';
+import ModalPopupCT from '../../commons/ModalPopupCT';
 
 const InfoMemberUnit = memo(({ route }) => {
   const t = useTranslations();
@@ -28,6 +29,7 @@ const InfoMemberUnit = memo(({ route }) => {
     };
   const { navigate } = useNavigation();
   const [isLoading, setIsLoading] = useState(true);
+  const [isShowWarning, setIsShowWarning] = useState(false);
   const [memberInfo, setMemberInfo] = useState({});
   const [itemSelected, setItemSelected] = useState({});
   const isFocused = useIsFocused();
@@ -56,10 +58,7 @@ const InfoMemberUnit = memo(({ route }) => {
       if (stateAlertAction?.is_change) {
         hideAlertAction();
         if (itemSelected?.role?.is_owner) {
-          navigate(Routes.EnterPassword, {
-            dataParams: { unit_id: unit?.id, member },
-            type: 'infoMemberUnit',
-          });
+          setIsShowWarning(true);
         }
       } else {
         removeMember(
@@ -72,14 +71,19 @@ const InfoMemberUnit = memo(({ route }) => {
   }, [
     hideAlertAction,
     itemSelected?.role?.is_owner,
-    member,
-    navigate,
     removeMember,
     stateAlertAction?.is_change,
     stateAlertAction?.member,
-    unit?.id,
   ]);
 
+  const handleChangeOwner = useCallback(() => {
+    setIsShowWarning(false);
+    navigate(Routes.EnterPassword, {
+      dataParams: { unit_id: unit?.id, member },
+      type: 'infoMemberUnit',
+    });
+  }, [member, navigate, unit?.id]);
+
   const fetchMemberInfo = useCallback(async () => {
     setIsLoading(true);
     const { success, data } = await axiosGet(
@@ -158,6 +162,22 @@ const InfoMemberUnit = memo(({ route }) => {
     return <></>;
   }, [isOwner, navigate, unit?.id, memberInfo]);
 
+  const footerWarning = useMemo(() => {
+    return (
+      <>
+        <View style={styles.line} />
+        <ViewButtonBottom
+          leftTitle={t('cancel')}
+          rightTitle={t('change')}
+          styleButton={styles.styleButton}
+          styleButtonLeftText={styles.textButton}
+          onLeftClick={() => setIsShowWarning(false)}
+          onRightClick={handleChangeOwner}
+        />
+      </>
+    );
+  }, [handleChangeOwner, t]);
+
   useEffect(() => {
     if (isIdentityOwner) {
       setItemSelected(itemsRoleModal[0]);
@@ -223,6 +243,7 @@ const InfoMemberUnit = memo(({ route }) => {
                 <TouchableOpacity
                   onPress={onPressChangeRole}
                   style={styles.role}
+                  accessibilityLabel={AccessibilityLabel.CHANGE_ROLE}
                 >
                   <View style={styles.leftRole}>
                     <Text type="Body" color={Colors.Gray7}>
@@ -271,6 +292,18 @@ const InfoMemberUnit = memo(({ route }) => {
       >
         <ChangeRoleContent />
       </AlertAction>
+
+      <ModalPopupCT
+        isVisible={isShowWarning}
+        title={t('transfer_ownership')}
+        subTitle={t('text_change_owner')}
+        isShowAlert
+        isShowUnderstand={false}
+        textShowAlert={t('text_alert_change_owner')}
+        styleWrapButton={styles.wrapButton}
+        styleRightButton={styles.button}
+        footer={footerWarning}
+      />
     </>
   );
 });

package/src/screens/Sharing/Styles/inforMemberUnitStyles.js

@@ -89,4 +89,15 @@ export default StyleSheet.create({
   removeButtonStyle: {
     color: Colors.Red,
   },
+  line: {
+    borderTopWidth: 1,
+    borderTopColor: Colors.Neutral.Neutral3,
+  },
+  styleButton: {
+    paddingTop: 24,
+    paddingBottom: 0,
+  },
+  textButton: {
+    color: Colors.Gray9,
+  },
 });

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

@@ -7,10 +7,13 @@ import InfoMemberUnit from '../InfoMemberUnit';
 import { HeaderCustom } from '../../../commons/Header';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
-import { AlertAction } from '../../../commons';
+import { AlertAction, ViewButtonBottom } from '../../../commons';
 import API from '../../../configs/API';
 import { AccessibilityLabel } from '../../../configs/Constants';
 import api from '../../../utils/Apis/axios';
+import ItemChangeRole from '../Components/ItemChangeRole';
+import ModalPopupCT from '../../../commons/ModalPopupCT';
+import Routes from '../../../utils/Route';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -53,6 +56,7 @@ describe('Test InfoMemberUnit', () => {
         unit: {
           id: 1,
           name: 'unit',
+          user_id: 1,
         },
         member: {
           id: 1,
@@ -107,7 +111,7 @@ describe('Test InfoMemberUnit', () => {
 
   it('render InfoMemberUnit delete member', async () => {
     mock.onGet(API.SHARE.UNIT_MEMBER_INFO(1, 1)).reply(200, {
-      id: 1,
+      id: 2,
       identity: 'owner',
       phone_number: '88888',
       name: 'user',
@@ -131,4 +135,60 @@ describe('Test InfoMemberUnit', () => {
     });
     expect(mockGoBack).toBeCalled();
   });
+
+  it('test change owner', async () => {
+    mock.onGet(API.SHARE.UNIT_MEMBER_INFO(1, 1)).reply(200, {
+      id: 2,
+      identity: 'owner',
+      phone_number: '88888',
+      name: 'user',
+      email: 'abc@gmail.com',
+    });
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    const touchChangeRole = instance.findByProps({
+      accessibilityLabel: AccessibilityLabel.CHANGE_ROLE,
+    });
+    await act(async () => {
+      await touchChangeRole.props.onPress();
+    });
+
+    const alertAction = instance.findByType(AlertAction);
+    expect(alertAction.props.visible).toEqual(true);
+
+    const itemChangeRole = instance.findAllByType(ItemChangeRole);
+    expect(itemChangeRole).toHaveLength(2);
+
+    const modalPopupCT = instance.findByType(ModalPopupCT);
+    await act(async () => {
+      await itemChangeRole[0].props.onPress();
+    });
+    await act(async () => {
+      await alertAction.props.rightButtonClick();
+    });
+    expect(alertAction.props.visible).toEqual(false);
+    expect(modalPopupCT.props.isVisible).toEqual(true);
+
+    const viewButtonBottom = instance.findAllByType(ViewButtonBottom);
+    expect(viewButtonBottom).toHaveLength(2);
+
+    await act(async () => {
+      await viewButtonBottom[1].props.onRightClick();
+    });
+    expect(modalPopupCT.props.isVisible).toEqual(false);
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.EnterPassword, {
+      dataParams: {
+        unit_id: 1,
+        member: {
+          id: 1,
+          name: 'user1',
+          share_id: 1,
+        },
+      },
+      type: 'infoMemberUnit',
+    });
+  });
 });

package/src/screens/SubUnit/AddSubUnit.js

@@ -29,7 +29,7 @@ const AddSubUnit = ({ route }) => {
     unit,
     addType,
     isAddUnit,
-    location = '',
+    location = {},
     isInsideUnit,
   } = route?.params;
   const [roomName, setRoomName] = useState('');
@@ -50,8 +50,10 @@ const AddSubUnit = ({ route }) => {
         awaitCreate.current = true;
         const dataObj = {
           name: roomName,
-          address: location,
+          address: location.description,
           background: wallpaper,
+          lat: location.latitude,
+          lng: location.longitude,
         };
         const formData = createFormData(dataObj, ['background']);
         const { success, data } = await axiosPost(
@@ -161,7 +163,7 @@ const AddSubUnit = ({ route }) => {
 
   const validateData = useMemo(() => {
     if (isAddUnit) {
-      return roomName === '' || wallpaper === '' || location === '';
+      return roomName === '' || wallpaper === '' || location.description === '';
     } else {
       return roomName === '' || wallpaper === '';
     }
@@ -212,9 +214,10 @@ const AddSubUnit = ({ route }) => {
                     <Text style={styles.addWallpaper}>{t('geolocation')}</Text>
                     <Text
                       style={styles.textLocation}
-                      color={location && Colors.Primary}
+                      color={location.description && Colors.Primary}
                     >
-                      {location || t('text_explain_add_geolocation')}
+                      {location.description ||
+                        t('text_explain_add_geolocation')}
                     </Text>
                   </View>
                 </TouchableWithoutFeedback>

package/src/screens/Unit/ChooseLocationStyles.js

@@ -14,6 +14,7 @@ export default StyleSheet.create({
   },
   bottomButton: {
     backgroundColor: Colors.White,
+    marginBottom: 100,
   },
   wrapMarker: {
     zIndex: 3,

package/src/screens/Unit/Station/index.js

@@ -1,6 +1,7 @@
 import React, { memo, useEffect, useRef, useState } from 'react';
 import { View, Text, TouchableOpacity, FlatList } from 'react-native';
 import { AccessibilityLabel } from '../../../configs/Constants';
+import { keyExtractor } from '../../../utils/Utils';
 import styles from './StationStyles';
 
 const Station = ({ listStation = [], onSnapToItem, indexStation }) => {
@@ -63,10 +64,10 @@ const Station = ({ listStation = [], onSnapToItem, indexStation }) => {
   return (
     <View style={styles.container}>
       <FlatList
+        keyExtractor={keyExtractor}
         removeClippedSubviews={false}
         onScroll={onScroll}
         ref={flatListRef}
-        keyExtractor={(item) => item.id}
         horizontal
         data={data}
         extraData={data}

package/src/screens/Unit/Summaries.js

@@ -107,7 +107,11 @@ const Summaries = memo(({ unit }) => {
           accessibilityLabel={AccessibilityLabel.UNIT_DETAIL_UNIT_SUMMARY_VIEW}
         >
           {unitSummaries.map((item, index) => (
-            <SummaryItem key={index} item={item} goToSummary={goToSummary} />
+            <SummaryItem
+              key={(item?.id || index).toString()}
+              item={item}
+              goToSummary={goToSummary}
+            />
           ))}
         </ScrollView>
       )}

package/src/screens/Unit/hook/__test__/useUnitConnectRemoteDevices.test.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import { useUnitConnectRemoteDevices } from '../useUnitConnectRemoteDevices';
+
+const mockSetAction = jest.fn();
+
+const wrapper = ({ children }) => <SCProvider>{children}</SCProvider>;
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    useContext: () => ({
+      setAction: mockSetAction,
+      stateData: mockSCStore({
+        app: {
+          isNetworkConnected: true,
+        },
+        bluetooth: {
+          isEnabled: true,
+        },
+        iot: {
+          lgthinq: {
+            unitConnected: [
+              {
+                id: 1,
+              },
+            ],
+          },
+        },
+      }),
+    }),
+  };
+});
+
+describe('Test useUnitConnectRemoteDevices', () => {
+  const unit = {
+    id: 1,
+    remote_control_options: {
+      lg_thinq: [
+        {
+          id: 1,
+          lg_devices: [{ device_id: 1, configs: [{ id: 1, name: 'name' }] }],
+        },
+      ],
+      bluetooth: [1],
+      googlehome: [1],
+    },
+  };
+  it('test handleLgThinqConnect', async () => {
+    renderHook(() => useUnitConnectRemoteDevices(unit), {
+      wrapper,
+    });
+    expect(mockSetAction).not.toBeCalled();
+  });
+});

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

@@ -675,7 +675,7 @@
   "text_notification_content_turbility_high": "The Turbility at **unit_name** is **status**. Water is not safe to drink.",
   "text_notification_content_smoke": "Smoke appears in **unit_name**. Please check your home and call the rescue team if there is a fire.",
   "text_notification_content_fire": "There is a fire at **unit_name**, Please move out of the house immediately and call the rescue team.",
-  "text_notification_content_active_sos": "**device_name** is activating at **unit_name** - **station_name**, Please check it NOW.",
+  "text_notification_content_active_sos": "**device_name** is activating at **unit_name** - **station_name**. Please check it NOW.",
   "text_notification_content_replace_water_filter": "Filter **config_name** of **device_name** in **station_name** has less than 10h remaining. Check and replace now.",
   "text_notification_content_low_battery": "Battery of **device_name** in **unit_name**: **station_name** has less than 20%. Check and replace now.",
   "text_notification_content_remove_unit_to_owner": "Unit **unit_name** has been removed successfully.",
@@ -1125,5 +1125,8 @@
   "data_address": "Data address",
   "methods": "{number} methods",
   "io_method": "Input/Output method",
+  "transfer_ownership": "Transfer ownership",
+  "text_change_owner": "Ownership permissions of this unit to the user you have selected.",
+  "text_alert_change_owner": "You will be removed from this Unit after transfer ownership.",
   "the_system_has_been_upgraded" : "To provide a better user experience, [Era] will perform a system upgrade.The upgrade will take about 10 minutes.\n\n Some device control functions will be interrupted during the upgrade.[Era] would like to ask for your understanding for this inconvenience.\n\nBest regards."
 }

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

@@ -1124,6 +1124,9 @@
   "data_address": "Địa chỉ dữ liệu",
   "methods": "{number} phương thức",
   "io_method": "Giao thức Input/Output",
+  "transfer_ownership": "Chuyển quyền sở hữu",
+  "text_change_owner": "Quyền sở hữu đơn vị này cho người dùng bạn đã chọn.",
+  "text_alert_change_owner": "Bạn sẽ bị xóa khỏi Unit này sau khi chuyển quyền sở hữu.",
   "the_system_has_been_upgraded" : "Để mang lại trải nghiệm tốt hơn cho người dùng, [Era] sẽ tiến hành nâng cấp hệ thống.Việc nâng cấp sẽ diễn ra trong khoảng 10 phút.\n\nMột số chức năng điều khiển thiết bị sẽ bị gián đoạn trong thời gian nâng cấp.[Era] kính mong quý khách hàng thông cảm cho sự bất tiện này.\n\nTrân trọng "
   
 }

package/src/utils/Utils.js

@@ -230,6 +230,8 @@ export const PIN_MAPPING = {
   },
 };
 
+export const keyExtractor = (item, index) => (item?.id || index).toString();
+
 export default {
   validateEmail,
   isObjectEmpty,