@eohjsc/react-native-smart-city 0.2.57 → 0.2.58

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.2.57",
+  "version": "0.2.58",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -43,11 +43,7 @@
     "pods": "cd example && pod-install --quiet",
     "bootstrap": "yarn example && yarn && yarn pods",
     "build": "sync-files ./src ../EohMobile/node_modules/@eohjsc/react-native-smart-city/src",
-    "watch": "sync-files --watch ./src ../EohMobile/node_modules/@eohjsc/react-native-smart-city/src",
-    "test:code-formatter": "prettier src/**/**/*.js --write",
-    "test:code-formatter-step-1": "prettier --check src/**/*.js",
-    "test:code-formatter-step-2": "prettier --check src/**/**/*.js",
-    "test:code-formatter-step-3": "prettier --check src/**/**/**/*.js"
+    "watch": "sync-files --watch ./src ../EohMobile/node_modules/@eohjsc/react-native-smart-city/src"
   },
   "repository": {
     "type": "git",
@@ -85,7 +81,6 @@
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-native": "^3.10.0",
     "factory-girl": "^5.0.4",
-    "husky": "^2.7.0",
     "jest": "^26.6.3",
     "jest-circus": "^26.6.3",
     "jetifier": "^1.6.6",
@@ -146,6 +141,7 @@
     "react-hooks-global-state": "^1.0.1",
     "react-i18next": "^11.8.12",
     "react-native-alert-async": "^1.0.5",
+    "react-native-android-wifi": "^0.0.41",
     "react-native-appearance": "^0.3.4",
     "react-native-base64": "^0.1.0",
     "react-native-ble-plx": "^2.0.1",
@@ -206,21 +202,6 @@
     "validator": "^13.1.1",
     "victory-native": "^35.0.1"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged",
-      "pre-push": "yarn jest"
-    }
-  },
-  "lint-staged": {
-    "*.{js, ts}": [
-      "yarn lint",
-      "yarn test:code-formatter",
-      "yarn test:code-formatter-step-1",
-      "yarn test:code-formatter-step-2",
-      "yarn test:code-formatter-step-3"
-    ]
-  },
   "bugs": {
     "url": "https://github.com/github_account/react-native-smart-city/issues"
   },

package/src/commons/Auth/__test__/AccountList.test.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ScrollView } from 'react-native';
+import { act, create } from 'react-test-renderer';
+import AccountList from '../AccountList';
+
+describe('Test AccountList', () => {
+  let tree;
+  const accounts = [
+    {
+      id: 1,
+      name: 'test',
+      phone_number: 123456677,
+    },
+  ];
+
+  it('test render has data', async () => {
+    await act(() => {
+      tree = create(<AccountList accounts={accounts} />);
+    });
+    const instance = tree.root;
+    const scrollViews = instance.findAllByType(ScrollView);
+    expect(scrollViews).toHaveLength(1);
+  });
+
+  it('test render has no data', async () => {
+    await act(() => {
+      tree = create(<AccountList accounts={[]} />);
+    });
+    const instance = tree.root;
+    const scrollViews = instance.findAllByType(ScrollView);
+    expect(scrollViews).toHaveLength(1);
+  });
+});

package/src/commons/CameraDevice/index.js

@@ -59,6 +59,8 @@ const CameraDevice = ({ station, handleFullScreen, goToPlayBack }) => {
             cameraName={device.configuration.name}
             handleFullScreen={handleFullScreen}
             goToPlayBack={goToPlayBack(device, { uri: station?.background })}
+            width={standardizeWidth}
+            height={standardizeHeight}
           />
         </View>
       ))}

package/src/commons/CardShadow/index.js

@@ -7,7 +7,7 @@ const Card = memo(({ title, children, style }) => {
   return (
     <View style={[styles.card, style]}>
       {title && <Text style={styles.headerTitle}>{title}</Text>}
-      <View>{children}</View>
+      {children}
     </View>
   );
 });

package/src/commons/CardShadow/styles.js

@@ -3,11 +3,9 @@ import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   card: {
-    marginTop: 14,
-    marginBottom: 14,
+    marginVertical: 14,
     marginHorizontal: 16,
     padding: 16,
-    flexDirection: 'column',
     backgroundColor: Colors.White,
     borderRadius: 10,
     shadowColor: Colors.Shadow,

package/src/commons/Device/LinearChart.js

@@ -56,40 +56,6 @@ const chartOptions = {
     },
     minRange: 3600 * 24 * 1000,
   },
-  plotOptions: {
-    series: {
-      point: {
-        events: {
-          click: () => {
-            let series = this.series.chart.series;
-            const seriesIndex = this.series.index;
-            for (let i = 0; i < series.length; i++) {
-              if (series[i].index !== seriesIndex) {
-                series[i].visible ? series[i].hide() : series[i].show();
-              }
-            }
-            return false;
-          },
-        },
-      },
-      events: {
-        legendItemClick: (event) => {
-          if (!this.visible) {
-            return true;
-          }
-          let seriesIndex = this.index;
-          let series = this.chart.series;
-          for (let i = 0; i < series.length; i++) {
-            if (series[i].index !== seriesIndex) {
-              series[i].visible ? series[i].hide() : series[i].show();
-            }
-          }
-          return false;
-        },
-      },
-      showInNavigator: true,
-    },
-  },
 };
 
 function LinearChart({ datas }) {

package/src/commons/MediaPlayerDetail/index.js

@@ -1,7 +1,6 @@
 import React, { memo, useCallback, useState, useEffect } from 'react';
 import { Image, View, StyleSheet, Text, TouchableOpacity } from 'react-native';
 import { VLCPlayer } from 'react-native-vlc-media-player';
-import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import PauseIcon from '../../../assets/images/Common/Pause.svg';
@@ -11,173 +10,174 @@ import styles from './Styles/MediaPlayerDetailStyles';
 import FImage from '../../commons/FImage';
 import { TESTID } from '../../configs/Constants';
 
-const MediaPlayerDetail = memo(
-  ({
-    uri,
-    cameraName,
-    thumbnail,
-    style,
-    wrapStyles,
-    resizeMode = 'none',
-    amount,
-    handleFullScreen,
-    isFullScreen = false,
-    isPaused = true,
-    goToPlayBack,
-    isShowFullScreenIcon = false,
-  }) => {
-    const t = useTranslations();
-    const [paused, setPaused] = useState(isPaused);
-    const onTapPause = useCallback(() => {
-      setPaused(false);
-    }, []);
+const MediaPlayerDetail = ({
+  uri,
+  cameraName,
+  thumbnail,
+  style,
+  wrapStyles,
+  resizeMode = 'none',
+  amount,
+  handleFullScreen,
+  isPaused = true,
+  goToPlayBack,
+  isShowFullScreenIcon = false,
+  width,
+  height,
+}) => {
+  const t = useTranslations();
+  const [paused, setPaused] = useState(isPaused);
+  const onTapPause = useCallback(() => {
+    setPaused(false);
+  }, []);
 
-    const onTapGoDetail = useCallback(() => {
-      if (!paused) {
-        setPaused(true);
-      } else {
-        goToPlayBack && goToPlayBack();
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [paused]);
+  const onTapGoDetail = useCallback(() => {
+    if (!paused) {
+      setPaused(true);
+    } else {
+      goToPlayBack && goToPlayBack();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [paused]);
 
-    const onFullScreen = useCallback(() => {
-      handleFullScreen && handleFullScreen({ uri, cameraName, thumbnail });
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+  const onFullScreen = useCallback(() => {
+    handleFullScreen && handleFullScreen({ uri, cameraName, thumbnail });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-    useEffect(() => {
-      setPaused(isPaused);
-    }, [isPaused]);
+  const getWidthHeight = useCallback(() => {
+    let width = 0,
+      height = 0;
+    switch (amount) {
+      case 1:
+        width = Constants.width;
+        height = 224;
+        break;
+      case 4:
+        width = Constants.width / 2;
+        height = 112;
+        break;
+      case 6:
+        width = Constants.width / 3;
+        height = 112;
+        break;
+      default:
+        width = Constants.width - 28;
+        height = 162;
+        break;
+    }
+    return {
+      width,
+      height,
+    };
+  }, [amount]);
 
-    const source = !thumbnail || !thumbnail.uri ? Images.BgDevice : thumbnail;
-    return (
-      <View style={[styles.wrap, wrapStyles]}>
-        <View
-          style={[
-            styles.loadingWrap,
-            isFullScreen && { transform: [{ rotate: '90deg' }] },
-          ]}
-        >
-          <Text style={styles.loadingText}>{t('loading')}</Text>
-        </View>
-        <TouchableOpacity
-          activeOpacity={1}
-          style={styles.videoBtn}
-          onPress={onTapGoDetail}
-        >
-          {paused ? (
-            <View style={[styles.player, style]}>
-              <FImage
-                source={source}
-                style={[
-                  styles.player,
-                  style,
-                  isFullScreen && {
-                    marginLeft: -Constants.width / 2 - getStatusBarHeight(),
-                    width: Constants.height,
-                    height: Constants.width,
-                    transform: [{ rotate: '90deg' }],
-                  },
-                ]}
-                defaultSource={Images.BgDevice}
-                resizeMode="cover"
-              />
-              <View
-                style={[
-                  StyleSheet.absoluteFillObject,
-                  { backgroundColor: colorOpacity(Colors.Black, 0.3) },
-                ]}
-              />
-            </View>
-          ) : isFullScreen ? (
-            <View style={{ transform: [{ rotate: '90deg' }] }}>
-              <VLCPlayer
-                autoAspectRatio={true}
-                videoAspectRatio={`${Constants.height}:${Constants.width}`}
-                source={{ uri }}
-                style={[
-                  {
-                    width: Constants.height,
-                    height: Constants.width,
-                  },
-                ]}
-              />
-            </View>
-          ) : (
-            <VLCPlayer
-              autoAspectRatio={true}
-              videoAspectRatio={
-                !amount
-                  ? '21:9'
-                  : amount === 1
-                  ? '15:9'
-                  : amount === 4
-                  ? '5:3'
-                  : '10:9'
-              }
-              source={{
-                initType: 2,
-                hwDecoderEnabled: 1,
-                hwDecoderForced: 1,
-                uri,
-                initOptions: [
-                  '--no-audio',
-                  '--rtsp-tcp',
-                  '--network-caching=150',
-                  '--rtsp-caching=150',
-                  '--no-stats',
-                  '--tcp-caching=150',
-                  '--realrtsp-caching=150',
-                ],
-              }}
+  useEffect(() => {
+    setPaused(isPaused);
+  }, [isPaused]);
+
+  const source = !thumbnail || !thumbnail.uri ? Images.BgDevice : thumbnail;
+  return (
+    <View style={[styles.wrap, wrapStyles]}>
+      <View style={[styles.loadingWrap]}>
+        <Text style={styles.loadingText}>{t('loading')}</Text>
+      </View>
+      <TouchableOpacity
+        activeOpacity={1}
+        style={styles.videoBtn}
+        onPress={onTapGoDetail}
+      >
+        {paused ? (
+          <View style={[styles.player, style]}>
+            <FImage
+              source={source}
               style={[styles.player, style]}
-              resizeMode={resizeMode}
-              isLive={true}
+              defaultSource={Images.BgDevice}
+              resizeMode="cover"
+            />
+            <View
+              style={[
+                StyleSheet.absoluteFillObject,
+                { backgroundColor: colorOpacity(Colors.Black, 0.3) },
+              ]}
             />
-          )}
-
-          <View style={styles.buttonView}>
-            <View style={styles.buttonPause}>
-              <TouchableOpacity
-                onPress={onTapPause}
-                style={[
-                  styles.btn,
-                  isFullScreen && { transform: [{ rotate: '90deg' }] },
-                ]}
-                activeOpacity={0.8}
-              >
-                {paused && <PauseIcon />}
-              </TouchableOpacity>
-            </View>
           </View>
-        </TouchableOpacity>
-
-        {cameraName && paused && (
-          <Text
-            style={[
-              styles.cameraName,
-              amount && amount !== 1 && styles.cameraName2,
-            ]}
-          >
-            {cameraName}
-          </Text>
-        )}
-        {isShowFullScreenIcon && (
-          <TouchableOpacity
-            onPress={onFullScreen}
+        ) : (
+          <VLCPlayer
+            autoAspectRatio={true}
+            videoAspectRatio={
+              width && height
+                ? `${width}:${height}`
+                : `${getWidthHeight().width}:${getWidthHeight().height}`
+            }
+            source={{
+              initType: 2,
+              hwDecoderEnabled: 1,
+              hwDecoderForced: 1,
+              uri,
+              initOptions: [
+                '--no-audio',
+                '--rtsp-tcp',
+                '--network-caching=150',
+                '--rtsp-caching=150',
+                '--no-stats',
+                '--tcp-caching=150',
+                '--realrtsp-caching=150',
+                // '--avcodec-threads=20',
+                // '--live-cacheing=150',
+              ],
+            }}
             style={[
-              styles.iconFullScreen,
-              (amount === 4 || amount === 6) && styles.iconFullScreen2,
+              styles.player,
+              style,
+              {
+                width: width || getWidthHeight().width,
+                height: height || getWidthHeight().height,
+              },
             ]}
-            testID={TESTID.SUB_UNIT_FULL_CAMERA}
-          >
-            <Image source={Images.fullscreen} />
-          </TouchableOpacity>
+            // resizeMode={resizeMode}
+            isLive={true}
+            // playInBackground={true}
+          />
         )}
-      </View>
-    );
-  }
-);
 
-export default MediaPlayerDetail;
+        <View style={styles.buttonView}>
+          <View style={styles.buttonPause}>
+            <TouchableOpacity
+              onPress={onTapPause}
+              style={[styles.btn]}
+              activeOpacity={0.8}
+            >
+              {paused && <PauseIcon />}
+            </TouchableOpacity>
+          </View>
+        </View>
+      </TouchableOpacity>
+
+      {cameraName && paused && (
+        <Text
+          style={[
+            styles.cameraName,
+            amount && amount !== 1 && styles.cameraName2,
+          ]}
+        >
+          {cameraName}
+        </Text>
+      )}
+      {isShowFullScreenIcon && (
+        <TouchableOpacity
+          onPress={onFullScreen}
+          style={[
+            styles.iconFullScreen,
+            (amount === 4 || amount === 6) && styles.iconFullScreen2,
+          ]}
+          testID={TESTID.SUB_UNIT_FULL_CAMERA}
+        >
+          <Image source={Images.fullscreen} />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+export default memo(MediaPlayerDetail);

package/src/commons/Sharing/RowMember.js

@@ -5,6 +5,7 @@ import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
+import { shortEmailName } from '../../utils/Utils';
 
 import BtnRemoveMember from './BtnRemoveMember';
 
@@ -37,7 +38,6 @@ const RowMember = memo(
     if (member?.id === ownerId && member?.share_id) {
       return null;
     }
-
     return (
       <View style={styles.rowContainer}>
         <View
@@ -49,7 +49,9 @@ const RowMember = memo(
           <IconOutline name={'user'} size={20} color={Colors.White} />
         </View>
         <View style={[styles.infoContainer, { paddingBottom: paddingBottom }]}>
-          <Text style={styles.textName}>{member.name ?? 'N/A'}</Text>
+          <Text style={styles.textName}>
+            {member?.name || shortEmailName(member.email) || ''}
+          </Text>
           {!!role && (
             <Text style={[styles.textRole, { color: roleColor }]}>{role}</Text>
           )}

package/src/commons/Sharing/__test__/RowMember.test.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import RowMember from '../RowMember';
+import Text from '../../Text';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (member, ownerId, currentUserId, mockFunc) => (
+  <SCProvider initState={mockSCStore({})}>
+    <RowMember
+      member={member}
+      ownerId={ownerId}
+      currentUserId={currentUserId}
+      onPressRemove={mockFunc}
+    />
+  </SCProvider>
+);
+
+describe('RowMember', () => {
+  let tree;
+  const mockFunc = jest.fn();
+  test('RowMember owner have name', () => {
+    const dataMember = { id: 1, name: 'CEO' };
+    act(() => {
+      tree = renderer.create(wrapComponent(dataMember, 1, 1, mockFunc));
+    });
+    const instance = tree.root;
+    const textInputs = instance.findAllByType(Text);
+    expect(textInputs.length).toBe(2);
+    expect(textInputs[0].props.children).toEqual('CEO');
+  });
+  test('RowMember owner dont have name show start of email ', () => {
+    const dataMember = { id: 1, name: '', email: 'abc@gmail.com' };
+    act(() => {
+      tree = renderer.create(wrapComponent(dataMember, 1, 1, mockFunc));
+    });
+    const instance = tree.root;
+    const textInputs = instance.findAllByType(Text);
+    expect(textInputs.length).toBe(2);
+    expect(textInputs[0].props.children).toEqual('abc');
+  });
+});

package/src/commons/SubUnit/ShortDetail.js

@@ -9,10 +9,10 @@ import { Section } from '../Section';
 import Text from '../Text';
 import ItemDevice from '../Device/ItemDevice';
 import ItemAddNew from '../Device/ItemAddNew';
-import MediaPlayer from '../MediaPlayer';
 import { standardizeCameraScreenSize } from '../../utils/Utils';
 import Routes from '../../utils/Route';
 import FastImage from 'react-native-fast-image';
+import MediaPlayerDetail from '../MediaPlayerDetail';
 
 const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
   Device.screenWidth - 32
@@ -21,23 +21,29 @@ const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
 const ShortDetailSubUnit = ({ unit, station, isGGHomeConnected }) => {
   const t = useTranslations();
   const { navigate } = useNavigation();
+
   const renderCamera = () => {
     if (station?.camera) {
       return (
         <View
           style={[
             styles.boxImage,
-            { width: standardizeWidth, height: standardizeHeight },
+            {
+              width: standardizeWidth,
+              height: standardizeHeight,
+            },
           ]}
           testID={TESTID.SUB_UNIT_CAMERA_VIEW}
         >
-          <MediaPlayer
+          <MediaPlayerDetail
             uri={station.camera.uri}
-            previewUri={station.camera.preview_uri}
             thumbnail={{
               uri: station.background,
             }}
-            key={`camera-${station.camera.id}`}
+            key={`camera-device-${station?.camera?.id}`}
+            cameraName={station?.camera?.name}
+            width={standardizeWidth}
+            height={standardizeHeight}
           />
         </View>
       );

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

@@ -163,7 +163,7 @@ const SegmentedRoundDisplay = ({
         <Text
           x={svgWidth / 2 + 50}
           fontWeight="normal"
-          fontSize={valueText.toString().length >= 6 ? 46 : 56}
+          fontSize={valueText.toString().length >= 6 ? 35 : 56}
           y={svgHeight / 2 + 30}
           fill={filledArcColor}
           textAnchor="middle"

package/src/configs/API.js

@@ -172,6 +172,11 @@ const API = {
         SCConfig.apiRoot +
         `/connection_manager/lg_thinq/device_status/${sensorId}/`,
     },
+    VCONNEX: {
+      AUTHORIZE: (client_id, redirect_uri, user_id, station_id) =>
+        // eslint-disable-next-line max-len
+        `https://partner-api-stg.vconnex.vn/oauth/authorize?client_id=${client_id}&redirect_uri=${redirect_uri}&response_type=code&scope=SYNCH&scope=CONTROL&scope=QUERY&state=${user_id}@${station_id}`,
+    },
   },
   NOTIFICATION: {
     LIST_ALL_NOTIFICATIONS: (page, type) =>

package/src/configs/Constants.js

@@ -1,6 +1,6 @@
 import { Platform, Dimensions, StatusBar } from 'react-native';
 import { RFValue } from 'react-native-responsive-fontsize';
-import OneTap from '../../assets/images/OneTap@1x.svg';
+import OneTap from '../../assets/images/OneTap.svg';
 import ValueChange from '../../assets/images/ValueChange.svg';
 import Schedule from '../../assets/images/Schedule.svg';
 

package/src/configs/SCConfig.js

@@ -90,6 +90,8 @@ const SCDefaultConfig = {
   LG_CLIENT_ID: '2b85aee334f046848341547894bb7c4e',
   LG_REDIRECT_URI_APP: 'app://eoh/sync-lg-device',
   LG_URL: 'https://qt-vn.m.lgaccount.com/emp/v2',
+  VCONNEX_CLIENT_ID: '',
+  VCONNEX_REDIRECT_URI_APP: '',
   pusherAppKey: '9a591ae4a764acc08714',
   pusherAppCluster: 'ap1',
 };
@@ -100,6 +102,8 @@ export class SCConfig {
   static LG_CLIENT_ID = SCDefaultConfig.LG_CLIENT_ID;
   static LG_REDIRECT_URI_APP = SCDefaultConfig.LG_REDIRECT_URI_APP;
   static LG_URL = SCDefaultConfig.LG_URL;
+  static VCONNEX_CLIENT_ID = SCDefaultConfig.VCONNEX_CLIENT_ID;
+  static VCONNEX_REDIRECT_URI_APP = SCDefaultConfig.VCONNEX_REDIRECT_URI_APP;
   static pusherAppKey = SCDefaultConfig.pusherAppKey;
   static pusherAppCluste = SCDefaultConfig.pusherAppCluster;
 }
@@ -113,6 +117,10 @@ export const initSCConfig = (config) => {
   SCConfig.LG_REDIRECT_URI_APP =
     config.LG_REDIRECT_URI_APP ?? SCDefaultConfig.LG_REDIRECT_URI_APP;
   SCConfig.LG_URL = config.LG_URL ?? SCDefaultConfig.LG_URL;
+  SCConfig.VCONNEX_CLIENT_ID =
+    config.VCONNEX_CLIENT_ID ?? SCDefaultConfig.VCONNEX_CLIENT_ID;
+  SCConfig.VCONNEX_REDIRECT_URI_APP =
+    config.VCONNEX_REDIRECT_URI_APP ?? SCDefaultConfig.VCONNEX_REDIRECT_URI_APP;
   SCConfig.pusherAppKey = config.pusherAppKey ?? SCDefaultConfig.pusherAppKey;
   SCConfig.pusherAppCluster =
     config.pusherAppCluster ?? SCDefaultConfig.pusherAppCluster;

package/src/iot/RemoteControl/Bluetooth.js

@@ -5,6 +5,7 @@ import t from '../../hooks/Common/useTranslations';
 import base64 from 'react-native-base64';
 import { BleManager } from 'react-native-ble-plx';
 import { ToastBottomHelper } from '../../utils/Utils';
+import { useEffect, useState } from 'react';
 
 const bluetoothDevices = {};
 const needToScanDevices = [];
@@ -165,6 +166,19 @@ export const isBluetoothEnabled = async () => {
   return state === 'PoweredOn';
 };
 
+export const useIsBluetoothEnabled = () => {
+  const [isEnabled, setIsEnabled] = useState(null);
+
+  useEffect(() => {
+    const subscription = bleManager.onStateChange((state) => {
+      setIsEnabled(state === 'PoweredOn');
+    }, true);
+
+    return () => subscription.remove();
+  }, []);
+  return isEnabled;
+};
+
 export const enableBluetoothForAndroid = async () => {
   await bleManager.enable();
 };

package/src/iot/RemoteControl/index.js

@@ -16,7 +16,6 @@ export const sendRemoteCommand = async (sensor, action, data) => {
     );
     return;
   }
-
   if (action.command_prefer_over_bluetooth) {
     try {
       await sendCommandOverBluetooth(sensor, action, data);

package/src/screens/AddCommon/SelectSubUnit.js

@@ -11,6 +11,7 @@ import Routes from '../../utils/Route';
 import { TESTID } from '../../configs/Constants';
 import styles from './SelectSubUnitStyles';
 import Button from '../../commons/Button';
+import { SCConfig } from '../../configs/SCConfig';
 
 const AddCommonSelectSubUnit = ({ route }) => {
   const t = useTranslations();
@@ -31,6 +32,9 @@ const AddCommonSelectSubUnit = ({ route }) => {
       case 'AddHassiDevice':
         setTitle(t('select_a_sub_unit'));
         break;
+      case 'AddVconnexDevice':
+        setTitle(t('select_a_sub_unit'));
+        break;
       default:
         setTitle(t('add_new_gateway'));
         setSubTitle(t('select_a_sub_unit'));
@@ -70,10 +74,28 @@ const AddCommonSelectSubUnit = ({ route }) => {
           station: subUnits[selectedIndex]?.id,
         });
         break;
+      case 'AddVconnexDevice':
+        navigation.navigate(Routes.Browser, {
+          link: API.IOT.VCONNEX.AUTHORIZE(
+            SCConfig.VCONNEX_CLIENT_ID,
+            SCConfig.VCONNEX_REDIRECT_URI_APP,
+            unit.user_id,
+            subUnits[selectedIndex]?.id
+          ),
+        });
+        break;
       default:
         break;
     }
-  }, [addType, navigation, subUnits, selectedIndex, unit.name, route.params]);
+  }, [
+    addType,
+    navigation,
+    subUnits,
+    selectedIndex,
+    unit?.name,
+    unit.user_id,
+    route.params,
+  ]);
 
   const handleSelectIndex = (index) => {
     if (index !== selectedIndex) {

package/src/screens/AddCommon/SelectUnit.js

@@ -48,6 +48,9 @@ const AddCommonSelectUnit = ({ route }) => {
       case 'AddHassioDevice':
         setTitle(t('text_select_a_unit'));
         break;
+      case 'AddVconnexDevice':
+        setTitle(t('text_select_a_unit'));
+        break;
       default:
         setTitle(t('add_new_sub_unit'));
         setSubTitle(t('add_new_subunit_select_unit'));
@@ -102,6 +105,15 @@ const AddCommonSelectUnit = ({ route }) => {
           unit_id: units[selectedIndex].id,
         });
         break;
+      case 'AddVconnexDevice':
+        navigation.navigate(Routes.AddDeviceStack, {
+          screen: Routes.AddCommonSelectSubUnit,
+          params: {
+            unit_id: units[selectedIndex].id,
+            addType: 'AddVconnexDevice',
+          },
+        });
+        break;
       default:
         break;
     }

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

@@ -239,11 +239,6 @@ describe('test DeviceDetail', () => {
     );
     expect(sensorDisplayItem.length).toEqual(2);
 
-    const itemMediaPlayer = instance.find(
-      (el) => el.props.testID === TESTID.DEVICE_DETAIL_MEDIA_PLAYER
-    );
-    expect(itemMediaPlayer).toBeDefined();
-
     const itemActionGroup = instance.find(
       (el) => el.props.testID === TESTID.DEVICE_DETAIL_ACTION_GROUP
     );

package/src/screens/Device/components/SensorDisplayItem.js

@@ -2,11 +2,8 @@ import React, { useCallback } from 'react';
 import { View } from 'react-native';
 import ActionGroup from '../../../commons/ActionGroup';
 import { Card } from '../../../commons/CardShadow';
-import MediaPlayer from '../../../commons/MediaPlayer';
-import { Device } from '../../../configs';
 import { TESTID } from '../../../configs/Constants';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
-import { standardizeCameraScreenSize } from '../../../utils/Utils';
 import { DetailHistoryChart } from './DetailHistoryChart';
 import { sendRemoteCommand } from '../../../iot/RemoteControl';
 import CurrentRainSensor from '../../../commons/Device/RainningSensor/CurrentRainSensor';
@@ -20,8 +17,11 @@ import ListQualityIndicator from '../../../commons/Device/WaterQualitySensor/Lis
 import EmergencyDetail from '../../../commons/Device/Emergency/EmergencyDetail';
 import EmergencyButton from '../../../commons/Device/Emergency/EmergencyButton';
 import FooterInfo from '../../../commons/Device/FooterInfo';
+import MediaPlayerDetail from '../../../commons/MediaPlayerDetail';
+import { standardizeCameraScreenSize } from '../../../utils/Utils';
+import { Device } from '../../../configs';
 
-const { standardizeHeight, standardizeWidth } = standardizeCameraScreenSize(
+const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
   Device.screenWidth - 32
 );
 
@@ -51,15 +51,15 @@ export const SensorDisplayItem = ({
       return (
         <Card title={t('camera')}>
           <View style={styles.mediaContainer}>
-            <MediaPlayer
-              testID={TESTID.DEVICE_DETAIL_MEDIA_PLAYER}
+            <MediaPlayerDetail
               uri={item.configuration.uri}
-              style={{ height: standardizeHeight }}
-              ratioWidth={standardizeWidth - 32}
               thumbnail={{
-                uri: item.configuration.preview_uri,
+                uri: background,
               }}
-              background={{ uri: background }}
+              key={`camera-device-${item.configuration.id}`}
+              cameraName={item.configuration.name}
+              width={standardizeWidth - 32}
+              height={standardizeHeight - 16}
             />
           </View>
         </Card>

package/src/screens/Device/detail.js

@@ -79,7 +79,21 @@ const DeviceDetail = ({ route }) => {
     [sensor]
   );
 
-  useDisconnectedDevice(isConnected, sensorName);
+  const isDeviceHasBle = useMemo(() => {
+    const action = display.items.filter((item) => item.type === 'action');
+    if (action.length === 0) {
+      return false;
+    }
+
+    return action.some((item) => {
+      const { configuration } = item?.configuration;
+      return JSON.stringify(configuration).includes(
+        '"command_prefer_over_bluetooth":true'
+      );
+    });
+  }, [display]);
+
+  useDisconnectedDevice(sensorName, isDeviceHasBle);
 
   const netInfo = useNetInfo();
 

package/src/screens/Device/hooks/useDisconnectedDevice.js

@@ -4,10 +4,11 @@ import { Alert, Linking, Platform } from 'react-native';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import {
   enableBluetoothForAndroid,
-  isBluetoothEnabled,
+  useIsBluetoothEnabled,
 } from '../../../iot/RemoteControl/Bluetooth';
+import { ToastBottomHelper } from '../../../utils/Utils';
 
-export const useDisconnectedDevice = (isConnected, sensorName) => {
+export const useDisconnectedDevice = (sensorName, isDeviceHasBle) => {
   const t = useTranslations();
   const openBluetoothIOS = () => {
     Linking.openURL('App-Prefs:Bluetooth');
@@ -32,32 +33,36 @@ export const useDisconnectedDevice = (isConnected, sensorName) => {
             onPress: () => enableBluetoothForAndroid(),
           },
         ];
-  const checkNetWorkConnect = useCallback(async () => {
-    const netState = await NetInfo.fetch();
-    if (!isConnected || !netState.isConnected) {
-      const isBtEnabled = await isBluetoothEnabled();
-      if (isBtEnabled) {
-        Alert.alert(
-          '',
-          t(
-            'your_internet_is_disconnected_change_to_control_via_bluetooth_connection',
-            { name: sensorName }
-          )
-        );
-      } else {
-        Alert.alert(
-          '',
-          t(
-            'your_connection_to_the_server_was_disconnected_please_open_the_bluetooth_to_continue'
-          ),
-          actions
-        );
+
+  const netState = NetInfo.useNetInfo();
+  const isBluetoothEnabled = useIsBluetoothEnabled();
+
+  const checkNetWorkConnect = useCallback(
+    async (isHavingInternet, isBtEnabled) => {
+      if (!isHavingInternet && isDeviceHasBle) {
+        if (isBtEnabled === true) {
+          ToastBottomHelper.info(
+            t('your_internet_is_disconnected', { name: sensorName }),
+            t('change_to_control_via_bluetooth_connection', {
+              name: sensorName,
+            })
+          );
+        } else if (isBtEnabled === false) {
+          Alert.alert(
+            '',
+            t(
+              'your_connection_to_the_server_was_disconnected_please_open_the_bluetooth_to_continue'
+            ),
+            actions
+          );
+        }
       }
-    }
+    },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isConnected]);
+    [isDeviceHasBle]
+  );
 
   useEffect(() => {
-    checkNetWorkConnect();
-  }, [checkNetWorkConnect]);
+    checkNetWorkConnect(netState.isConnected, isBluetoothEnabled);
+  }, [netState.isConnected, isBluetoothEnabled, checkNetWorkConnect]);
 };

package/src/screens/Sharing/MemberList.js

@@ -1,12 +1,7 @@
 import React, { useCallback } from 'react';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { useNavigation } from '@react-navigation/native';
-import {
-  StyleSheet,
-  TouchableOpacity,
-  View,
-  ActivityIndicator,
-} from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
@@ -91,9 +86,7 @@ const MemberList = ({ route }) => {
         loading={isRefresh}
         onRefresh={onRefresh}
       >
-        {loading ? (
-          <ActivityIndicator />
-        ) : (
+        {!loading && (
           <SharingMembers
             dataMember={dataMembers}
             ownerId={unit.user_id}

package/src/screens/TDSGuide/index.js

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { StyleSheet, SafeAreaView, ScrollView } from 'react-native';
+import { StyleSheet, View, ScrollView } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { TESTID } from '../../configs/Constants';
 
@@ -12,8 +12,8 @@ const TDSGuide = memo(() => {
   useTitleHeader(t('tds_infomation'));
 
   return (
-    <SafeAreaView style={styles.container}>
-      <ScrollView>
+    <View style={styles.container}>
+      <ScrollView style={styles.paddingHorizontal16}>
         <Text
           type="H3"
           semibold
@@ -38,7 +38,7 @@ const TDSGuide = memo(() => {
           </Text>
         </>
       </ScrollView>
-    </SafeAreaView>
+    </View>
   );
 });
 
@@ -48,6 +48,8 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: Theme.color.backgroundColor,
+  },
+  paddingHorizontal16: {
     paddingHorizontal: 16,
   },
   titlePadding: {

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { create } from 'react-test-renderer';
+import { act } from 'react-test-renderer';
+import { Section } from '../../../commons';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import ManageUnit from './';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ManageUnit route={route} />
+  </SCProvider>
+);
+
+describe('Test ManageUnit', () => {
+  let tree;
+  const route = {
+    params: {
+      unit: {
+        user_id: 1,
+        name: 'test',
+      },
+    },
+  };
+
+  it('Test render', async () => {
+    await act(() => {
+      tree = create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const Sections = instance.findAllByType(Section);
+    expect(Sections).toHaveLength(1);
+  });
+});

package/src/utils/Apis/axios.js

@@ -1,6 +1,7 @@
 import axios from 'axios';
 import { deleteData, getData, storeData } from '../Storage';
 import { ToastBottomHelper } from '../Utils';
+import NetInfo from '@react-native-community/netinfo';
 
 export const replaceParams = (apiURL, params) => {
   let _result = apiURL;
@@ -12,7 +13,7 @@ export const replaceParams = (apiURL, params) => {
   return _result;
 };
 
-const parseErrorResponse = (error) => {
+const parseErrorResponse = async (error) => {
   let message;
   let data = {};
   if (
@@ -31,7 +32,18 @@ const parseErrorResponse = (error) => {
     message = error.message;
   }
 
-  typeof message === 'string' && ToastBottomHelper.error(message);
+  if (typeof message === 'string') {
+    let hideError = false;
+    if (message === 'Network Error') {
+      const netState = await NetInfo.fetch();
+      if (!netState.isConnected) {
+        hideError = true;
+      }
+    }
+    if (!hideError) {
+      ToastBottomHelper.error(message);
+    }
+  }
 
   return {
     success: false,
@@ -77,12 +89,12 @@ export async function axiosGet(URL, config = {}, cache = false) {
     if (cache) {
       // only network error or server error
       if (!error.response || error.response.status >= 500) {
-        return (await axiosCache(URL)) || parseErrorResponse(error);
+        return (await axiosCache(URL)) || (await parseErrorResponse(error));
       } else {
         await deleteData(cacheKey);
       }
     }
-    return parseErrorResponse(error);
+    return await parseErrorResponse(error);
   }
   const { data } = response;
   if (response.status === 200) {
@@ -106,7 +118,7 @@ async function axiosCall(method, ...args) {
   try {
     response = await axios[method](...args);
   } catch (error) {
-    return parseErrorResponse(error);
+    return await parseErrorResponse(error);
   }
 
   const { data } = response;

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

@@ -826,7 +826,8 @@
   "quick_button_create_at_dashboard": "Quick button create at dashboard",
   "every_day_at": "Every day at {time}",
   "you_do_not_have_the_device_or_have_share_control_device": "You do not have the device or you haven’t been shared the control for the device.",
-  "your_internet_is_disconnected_change_to_control_via_bluetooth_connection": "Your internet is disconnected, change to control {name} via Bluetooth connection",
+  "your_internet_is_disconnected": "Your internet is disconnected",
+  "change_to_control_via_bluetooth_connection": "change to control {name} via Bluetooth connection",
   "your_connection_to_the_server_was_disconnected_please_open_the_bluetooth_to_continue": "Your connection to the server was disconnected, Please open the Bluetooth to continue",
   "error_please_try_later": "Error! Please try later",
   "mon": "Mon",

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

@@ -827,7 +827,8 @@
   "quick_button_create_at_dashboard": "Tạo nút nhanh trên bảng điều khiển",
   "every_day_at": "Mỗi ngày vào lúc {time}",
   "you_do_not_have_the_device_or_have_share_control_device": "Bạn không có thiết bị nào hoặc chưa được cấp quyền để điều khiển thiết bị.",
-  "your_internet_is_disconnected_change_to_control_via_bluetooth_connection":"Internet của bạn bị ngắt kết nối, thay đổi sang điều khiển {name} qua kết nối Bluetooth",
+  "your_internet_is_disconnected": "Internet của bạn bị ngắt kết nối",
+  "change_to_control_via_bluetooth_connection": "thay đổi sang điều khiển {name} qua kết nối Bluetooth",
   "your_connection_to_the_server_was_disconnected_please_open_the_bluetooth_to_continue": "Kết nối của bạn với máy chủ đã bị ngắt, vui lòng mở Bluetooth để tiếp tục",
   "error_please_try_later": "Lỗi! Vui lòng thử lại sau",
   "mon": "T2",

package/src/utils/Utils.js

@@ -26,6 +26,11 @@ export const isObjectEmpty = (obj) => {
   return Object.keys(obj).length === 0;
 };
 
+export const shortEmailName = (email) => {
+  const regex = '([^@]+)';
+  return email?.match(regex)[0];
+};
+
 export const formatNumberCompact = (number) => {
   return new Intl.NumberFormat('en-US', {
     notation: 'compact',
@@ -66,7 +71,7 @@ export const openMapDirection = (item) => () => {
 };
 
 export const ToastBottomHelper = {
-  success: (msg) => {
+  success: (msg, line2) => {
     if (!Toast._ref) {
       return;
     }
@@ -75,10 +80,11 @@ export const ToastBottomHelper = {
       type: 'success',
       position: 'bottom',
       text1: msg,
+      text2: line2,
       visibilityTime: 1000,
     });
   },
-  error: (msg) => {
+  error: (msg, line2) => {
     if (!Toast._ref) {
       return;
     }
@@ -87,6 +93,20 @@ export const ToastBottomHelper = {
       type: 'error',
       position: 'bottom',
       text1: msg,
+      text2: line2,
+      visibilityTime: 1000,
+    });
+  },
+  info: (msg, line2) => {
+    if (!Toast._ref) {
+      return;
+    }
+
+    Toast.show({
+      type: 'info',
+      position: 'bottom',
+      text1: msg,
+      text2: line2,
       visibilityTime: 1000,
     });
   },