@eohjsc/react-native-smart-city 0.3.3 → 0.3.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.3.03",
+  "version": "0.3.04",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -146,6 +146,8 @@
     "react-hooks-global-state": "^1.0.1",
     "react-i18next": "^11.8.12",
     "react-native-alert-async": "^1.0.5",
+    "react-native-android-keyboard-adjust": "^1.2.0",
+    "react-native-android-location-enabler": "^1.2.2",
     "react-native-android-wifi": "^0.0.41",
     "react-native-appearance": "^0.3.4",
     "react-native-base64": "^0.1.0",

package/src/commons/ActionGroup/ColorPickerTemplate.js

@@ -1,38 +1,51 @@
-import React, { memo, useCallback, useState, useEffect, useMemo } from 'react';
+import React, { memo, useState, useEffect } from 'react';
 import { View } from 'react-native';
 import styles from './ColorPickerTemplateStyles';
 import ColorPicker from 'react-native-wheel-color-picker';
 import { watchMultiConfigs } from '../../iot/Monitor';
 import { useConfigGlobalState } from '../../iot/states';
 
+let isFirstTime = true;
+
+const WheelColorPicker = ({ valueColor, onChangeColor }) => {
+  return (
+    <ColorPicker
+      style={styles.colorPicker}
+      sliderHidden={true}
+      swatches={false}
+      color={valueColor}
+      onColorChangeComplete={onChangeColor}
+      thumbSize={16}
+    />
+  );
+};
+
 const ColorPickerTemplate = memo(({ actionGroup, doAction, sensor }) => {
   const { configuration } = actionGroup;
   const [valueColorComplete, setValueColorComplete] = useState('');
-  const [isFirstColor, setIsFirstColor] = useState(false);
   const [configValues] = useConfigGlobalState('configValues');
 
-  const onChangeColor = useCallback(
-    (color) => {
-      if (!isFirstColor) {
-        setIsFirstColor(true);
-        return;
-      }
+  const onChangeColor = (color) => {
+    const to = setTimeout(() => {
+      isFirstTime = false;
+      clearTimeout(to);
+    }, 1000);
+
+    !isFirstTime &&
       doAction(
         configuration?.action_color_data,
         JSON.stringify({ value: color })
       );
-    },
-    [configuration?.action_color_data, doAction, isFirstColor]
-  );
-  const valueColor = useMemo(() => {
-    return valueColorComplete || '';
-  }, [valueColorComplete]);
+  };
 
   useEffect(() => {
     const { config } = configuration;
     const configValue = configValues[config];
-    setValueColorComplete(configValue);
-  }, [configuration.config, configValues, configuration]);
+    if (configValue && isFirstTime) {
+      setValueColorComplete(`#${configValue?.toString(16)}`);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [configValues]);
 
   useEffect(() => {
     if (sensor?.is_managed_by_backend && sensor.device_type !== 'GOOGLE_HOME') {
@@ -40,15 +53,15 @@ const ColorPickerTemplate = memo(({ actionGroup, doAction, sensor }) => {
     }
   }, [sensor, configuration.config]);
 
+  useEffect(() => {
+    return () => (isFirstTime = true);
+  }, []);
+
   return (
     <View style={styles.viewPickColor}>
-      <ColorPicker
-        style={styles.colorPicker}
-        sliderHidden={true}
-        swatches={false}
-        color={valueColor}
-        onColorChangeComplete={onChangeColor}
-        thumbSize={16}
+      <WheelColorPicker
+        valueColor={valueColorComplete}
+        onChangeColor={onChangeColor}
       />
     </View>
   );

package/src/commons/ActionGroup/OnOffTemplate/OnOffButtonTemplate.js

@@ -5,15 +5,20 @@ import React, { memo } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import { Colors } from '../../../configs';
 import styles from './OnOffButtonTemplateStyle';
+import { TESTID } from '../../../configs/Constants';
 
 const OnOffButtonTemplate = memo(
   ({ isOn, triggerAction, actionGroup, isLight = false }) => {
-    const { configuration } = actionGroup;
+    const { configuration, id } = actionGroup;
 
     return (
       <>
         <View style={styles.barrierControlContainer}>
-          <TouchableOpacity style={styles.bigCircle} onPress={triggerAction}>
+          <TouchableOpacity
+            style={styles.bigCircle}
+            onPress={triggerAction}
+            testID={`${TESTID.ON_OFF_BUTTON}-${id}`}
+          >
             <View style={styles.smallCircle}>
               <Icon
                 name={isOn ? configuration.icon_on : configuration.icon_off}
@@ -25,6 +30,7 @@ const OnOffButtonTemplate = memo(
                   styles.textBig,
                   { color: isOn ? Colors.Gray8 : Colors.Gray6 },
                 ]}
+                testID={`${TESTID.SENSOR_STATUS}-${id}`}
               >
                 {isOn ? configuration.text_on : configuration.text_off}
               </Text>

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -33,7 +33,11 @@ const SliderRangeTemplate = memo(({ actionGroup, doAction, sensor }) => {
   useEffect(() => {
     const { config } = configuration;
     const configValue = configValues[config];
-    setValueBrightness(configValue);
+    let valueTemp = configValue;
+    if (configValue > 0) {
+      valueTemp = Math.round((configValue / 254) * 100);
+    }
+    setValueBrightness(valueTemp);
   }, [configuration.config, configValues, configuration]);
 
   useEffect(() => {

package/src/commons/ConnectingProcess/index.js

@@ -45,6 +45,7 @@ const ConnectingProcess = ({ route }) => {
         );
         if (success) {
           setSensor(data);
+          setNewName(data?.name);
         } else {
           ToastBottomHelper.error(JSON.stringify(data));
           goBack();
@@ -64,6 +65,7 @@ const ConnectingProcess = ({ route }) => {
         });
         if (success) {
           setSensor(data);
+          setNewName(data?.name);
         } else {
           ToastBottomHelper.error(JSON.stringify(data));
           goBack();
@@ -80,6 +82,7 @@ const ConnectingProcess = ({ route }) => {
         );
         if (success) {
           setSensor({ name: gateway?.model });
+          setNewName(gateway?.model);
         } else {
           ToastBottomHelper.error(JSON.stringify(data));
           goBack();

package/src/commons/Device/ItemDevice.js

@@ -72,7 +72,10 @@ const ItemDevice = memo(
     const textConnected = isConnected ? t('connected') : t('disconnected');
 
     return (
-      <TouchableWithoutFeedback onPress={goToSensorDisplay}>
+      <TouchableWithoutFeedback
+        onPress={goToSensorDisplay}
+        testID={`${TESTID.SENSOR_NAME}-${sensor?.id}`}
+      >
         <View
           style={[styles.container, wrapStyle, { borderColor }]}
           testID={TESTID.SUB_UNIT_DEVICES}

package/src/commons/Device/WaterQualitySensor/QualityIndicatorsItem.js

@@ -37,7 +37,7 @@ const QualityIndicatorItem = memo(
             >
               <IconOutline
                 name={'info-circle'}
-                size={16}
+                size={18}
                 color={Colors.Gray8}
               />
             </TouchableOpacity>
@@ -92,6 +92,11 @@ const styles = StyleSheet.create({
     marginTop: 8,
   },
   iconInfo: {
-    top: 10,
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: -10,
+    marginTop: -2,
   },
 });

package/src/commons/Form/CurrencyInput.js

@@ -1,4 +1,10 @@
-import React, { useState, useRef, useCallback, useMemo } from 'react';
+import React, {
+  useState,
+  useRef,
+  useCallback,
+  useMemo,
+  useEffect,
+} from 'react';
 import {
   View,
   TextInput,
@@ -6,6 +12,7 @@ import {
   TouchableWithoutFeedback,
   Platform,
 } from 'react-native';
+import AndroidKeyboardAdjust from 'react-native-android-keyboard-adjust';
 import Text from '../Text';
 import { Colors } from '../../configs';
 
@@ -125,6 +132,13 @@ const CurrencyInput = ({
     return textInputValue.toString().length < 2 ? -12 : 0;
   }, [textInputValue]);
 
+  useEffect(() => {
+    const isAndroid = Platform.OS === 'android';
+    isAndroid && AndroidKeyboardAdjust.setAdjustResize();
+
+    return () => isAndroid && AndroidKeyboardAdjust.setAdjustPan();
+  }, []);
+
   return (
     <TouchableWithoutFeedback onPress={focusInput}>
       <View style={styles.wrap}>

package/src/commons/Form/TextInputPassword.js

@@ -90,7 +90,7 @@ const styles = StyleSheet.create({
     borderRadius: 2,
     paddingTop: 12,
     paddingBottom: 12,
-    paddingHorizontal: 20,
+    paddingRight: 20,
     backgroundColor: Colors.White,
     // ...Theme.shadow,
     shadowColor: Colors.Gray13,

package/src/commons/HeaderAni/index.js

@@ -6,6 +6,7 @@ import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 
 import Text from '../../commons/Text';
 import { Colors, Constants } from '../../configs';
+import { TESTID } from '../../configs/Constants';
 
 const screenHeight = Constants.height;
 const default_height = 44;
@@ -89,7 +90,11 @@ const HeaderAni = memo(
             },
           ]}
         >
-          <TouchableOpacity style={styles.btnBack} onPress={onPressLeft}>
+          <TouchableOpacity
+            style={styles.btnBack}
+            onPress={onPressLeft}
+            testID={TESTID.ICON_BACK}
+          >
             <Icon name={'left'} size={27} color={Colors.Gray9} />
           </TouchableOpacity>
           <View styles={styles.wrapRightComponent}>{rightComponent}</View>

package/src/commons/MediaPlayerDetail/index.js

@@ -6,7 +6,14 @@ import React, {
   useContext,
   useMemo,
 } from 'react';
-import { Image, View, StyleSheet, Text, TouchableOpacity } from 'react-native';
+import {
+  Image,
+  View,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  Platform,
+} from 'react-native';
 import { VLCPlayer } from 'react-native-vlc-media-player';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
@@ -68,7 +75,9 @@ const MediaPlayerDetail = ({
         newHeight = 224;
         break;
       case 4:
-        newWidth = Constants.width / 1.5;
+        newWidth =
+          Constants.width /
+          (Platform.OS === 'ios' && Constants.width < 400 ? 1.5 : 2);
         newHeight = 112;
         break;
       case 6:

package/src/commons/Sharing/MemberList.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import { Colors } from '../../configs';
+import { Colors, Constants } from '../../configs';
 import Text from '../../commons/Text';
 import RowMember from './RowMember';
 
@@ -26,7 +26,9 @@ const MemberList = ({
           />
         ))}
       {!dataMember.length && (
-        <Text style={styles.textCenter}>{t('no_member')}</Text>
+        <View style={styles.viewEmpty}>
+          <Text style={styles.textCenter}>{t('no_member')}</Text>
+        </View>
       )}
     </View>
   );
@@ -37,4 +39,10 @@ const styles = StyleSheet.create({
   box: {
     backgroundColor: Colors.White,
   },
+  viewEmpty: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: Constants.height - 200,
+    backgroundColor: Colors.White,
+  },
 });

package/src/commons/Sharing/WrapHeaderScrollable.js

@@ -13,6 +13,7 @@ import { isIphoneX } from 'react-native-iphone-x-helper';
 import { Colors, Theme } from '../../configs';
 import HeaderAni, { heightHeader } from '../../commons/HeaderAni';
 import Text from '../../commons/Text';
+import { TESTID } from '../../configs/Constants';
 
 const WrapHeaderScrollable = ({
   children,
@@ -59,6 +60,7 @@ const WrapHeaderScrollable = ({
         onLeft={onGoBack}
       />
       <Animated.ScrollView
+        testID={TESTID.ANIMATED_SCROLL}
         scrollEventThrottle={16}
         onScroll={Animated.event(
           [{ nativeEvent: { contentOffset: { y: animatedScrollYValue } } }],

package/src/commons/SubUnit/__test__/ShortDetail.test.js

@@ -151,7 +151,7 @@ describe('test ShortDetail Subunit', () => {
       (item) =>
         item.props.testID === TESTID.SUB_UNIT_DEVICES && item.type === View
     );
-    expect(itemDevice.length).toBe(1);
+    expect(itemDevice.length).toBe(0);
   });
 
   test('render ShortDetail add new device', async () => {

package/src/configs/Constants.js

@@ -288,6 +288,8 @@ export const TESTID = {
   SUB_UNIT_TEXT_DROPDOWN: 'SUB_UNIT_TEXT_DROPDOWN',
   SUB_UNIT_GO_DETAIL: 'SUB_UNIT_GO_DETAIL',
   VIEW_SUB_UNIT_AUTOMATE: 'VIEW_SUB_UNIT_AUTOMATE',
+  SUB_UNIT_NAME: 'SUB_UNIT_NAME',
+  ANIMATED_SCROLL: 'ANIMATED_SCROLL',
   ADD_SUB_UNIT: 'ADD_SUB_UNIT',
 
   // NavBar
@@ -392,6 +394,7 @@ export const TESTID = {
   ITEM_TEXT_ERROR: 'ITEM_TEXT_ERROR',
   SEARCH_BAR_INPUT: 'SEARCH_BAR_INPUT',
   GO_DETAIL: 'GO_DETAIL',
+  NAV_LIST: 'NAV_LIST',
 
   // Automate
   AUTOMATE_SCRIPT_ACTION: 'AUTOMATE_SCRIPT_ACTION',
@@ -447,8 +450,13 @@ export const TESTID = {
   ITEM_QUICK_ACTION_PRESS: 'ITEM_QUICK_ACTION_PRESS',
   TIME_COUNT_DOWN_TEXT: 'TIME_COUNT_DOWN_TEXT',
   ACTION_ITEM: 'ACTION_ITEM',
+
   // Sensor Item
   TEXT_SENSOR_ITEM: 'TEXT_SENSOR_ITEM',
+  SENSOR_NAME: 'SENSOR_NAME',
+  ON_OFF_BUTTON: 'ON_OFF_BUTTON',
+  SENSOR_STATUS: 'SENSOR_STATUS',
+  ICON_BACK: 'ICON_BACK',
 
   // DeviceInfo
   DEVICE_INFO_BATTERY: 'DEVICE_INFO_BATTERY',
@@ -564,6 +572,7 @@ export const TESTID = {
   ICON_ADD_STAR_SHARED_UNIT: 'ICON_ADD_STAR_SHARED_UNIT',
   TOUCH_SHARED_UNIT: 'TOUCH_SHARED_UNIT',
   SHARED_UNIT_OWN_BY: 'SHARED_UNIT_OWN_BY',
+  ICON_UNIT: 'ICON_UNIT',
 
   // Select subunit
 
@@ -809,3 +818,13 @@ export const SENSOR_TYPE = {
   SOS: 'sos',
   FILTER_WATER: 'filter_water',
 };
+
+export const PROBLEM_CODE = {
+  CLIENT_ERROR: 'CLIENT_ERROR',
+  SERVER_ERROR: 'SERVER_ERROR',
+  TIMEOUT_ERROR: 'TIMEOUT_ERROR',
+  CONNECTION_ERROR: 'CONNECTION_ERROR',
+  NETWORK_ERROR: 'NETWORK_ERROR',
+  UNKNOWN_ERROR: 'UNKNOWN_ERROR',
+  CANCEL_ERROR: 'CANCEL_ERROR',
+};

package/src/configs/SCConfig.js

@@ -107,11 +107,13 @@ export class SCConfig {
   static VCONNEX_REDIRECT_URI_APP = SCDefaultConfig.VCONNEX_REDIRECT_URI_APP;
   static pusherAppKey = SCDefaultConfig.pusherAppKey;
   static pusherAppCluste = SCDefaultConfig.pusherAppCluster;
+  static language = 'en';
 }
 
 export const initSCConfig = (config) => {
   api.setBaseURL(config.apiRoot ?? SCDefaultConfig.apiRoot);
   LocaleConfig.defaultLocale = config.language;
+  SCConfig.language = config.language ?? SCConfig.language;
   SCConfig.apiRoot = config.apiRoot ?? SCDefaultConfig.apiRoot;
   SCConfig.GOOGLE_MAP_API_KEY =
     config.GOOGLE_MAP_API_KEY ?? SCDefaultConfig.GOOGLE_MAP_API_KEY;

package/src/navigations/UnitStack.js

@@ -1,5 +1,5 @@
 import React, { memo, useContext, useEffect } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { BleManager } from 'react-native-ble-plx';
@@ -52,10 +52,10 @@ import ConfirmUnitDeletion from '../screens/ConfirmUnitDeletion';
 import InfoMemberUnit from '../screens/Sharing/InfoMemberUnit';
 import EnterPassword from '../screens/EnterPassword';
 import { HanetCameraStack } from './HanetCameraStack';
-
 import { axiosGet } from '../utils/Apis/axios';
 import { API } from '../configs';
 import SideMenuDetail from '../screens/SideMenuDetail';
+import { styles } from './UnitStackStyles';
 
 const Stack = createStackNavigator();
 
@@ -173,12 +173,9 @@ export const UnitStack = memo((props) => {
         component={ChooseLocation}
         options={{
           headerShown: true,
-          headerTitleStyle: {
-            ...styles.headerLocation,
-          },
           headerTitle: () => (
             <View style={styles.headerLocation}>
-              <Text type="H3" color={Colors.Gray9} bold>
+              <Text color={Colors.Gray9} style={styles.headerTitle} bold>
                 {t('choose_on_map')}
               </Text>
 
@@ -406,17 +403,3 @@ export const UnitStack = memo((props) => {
     </Stack.Navigator>
   );
 });
-
-const styles = StyleSheet.create({
-  icLeft: {
-    marginLeft: Device.isIOS ? 8 : 0,
-  },
-  headerLocation: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  headerContent: {
-    textAlign: 'center',
-    paddingBottom: 8,
-  },
-});

package/src/navigations/UnitStackStyles.js

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+import { Device } from '../configs';
+
+export const styles = StyleSheet.create({
+  icLeft: {
+    marginLeft: Device.isIOS ? 8 : 0,
+  },
+  headerLocation: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 290,
+  },
+  headerTitle: {
+    fontSize: 20,
+    lineHeight: 28,
+  },
+  headerContent: {
+    textAlign: 'center',
+    paddingBottom: 4,
+  },
+});

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

@@ -53,6 +53,7 @@ describe('Test AddNewDevice', () => {
         unit_id: 1,
       },
     };
+    mock.resetHistory();
   });
 
   const getText = (instance, id) => {
@@ -103,7 +104,13 @@ describe('Test AddNewDevice', () => {
     });
     const instance = tree.root;
     const groupCheckBox = instance.findByType(GroupCheckBox);
-    expect(groupCheckBox.props.data).toEqual([]);
+    expect(groupCheckBox.props.data).toEqual([
+      {
+        id: 2,
+        name: 'Station name',
+        title: 'Station name',
+      },
+    ]);
   });
 
   test('ViewButtonBottom', async () => {

package/src/screens/AddNewDevice/__test__/ConnectingDevices.test.js

@@ -103,7 +103,7 @@ describe('Test ConnectingDevices', () => {
       await jest.runOnlyPendingTimers();
     });
     expect(setInterval).toHaveBeenCalled();
-    expect(mockedNavigate).not.toHaveBeenCalledWith(Routes.ConnectDevices, {
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.ConnectDevices, {
       new_sensor: { id: 1 },
     });
   });

package/src/screens/Device/EditDevice/index.js

@@ -104,20 +104,22 @@ const EditDevice = memo(() => {
             />
           </View>
         </TouchableOpacity>
-        <TouchableOpacity
-          style={styles.removeButton}
-          onPress={onShowDelete(sensor?.name)}
-          testID={TESTID.DEVICE_SHOW_REMOVE}
-        >
-          <Text
-            type={'H4'}
-            semibold
-            color={Colors.Red}
-            style={styles.removeBorderBottom}
+        {!stateAlertAction.visible && (
+          <TouchableOpacity
+            style={styles.removeButton}
+            onPress={onShowDelete(sensor?.name)}
+            testID={TESTID.DEVICE_SHOW_REMOVE}
           >
-            {t('remove_device')}
-          </Text>
-        </TouchableOpacity>
+            <Text
+              type={'H4'}
+              semibold
+              color={Colors.Red}
+              style={styles.removeBorderBottom}
+            >
+              {t('remove_device')}
+            </Text>
+          </TouchableOpacity>
+        )}
       </View>
       <AlertAction
         visible={stateAlertAction.visible}

package/src/screens/SubUnit/AddSubUnit.js

@@ -25,11 +25,12 @@ import { ToastBottomHelper } from '../../utils/Utils';
 import { TESTID } from '../../configs/Constants';
 import styles from './AddSubUnitStyles';
 import useKeyboardShow from '../../hooks/Common/useKeyboardShow';
+import { replace } from '../../navigations/utils';
 
 const AddSubUnit = ({ route }) => {
   const t = useTranslations();
   const { dismissKeyboard } = useKeyboardShow();
-  const { navigate, goBack } = useNavigation();
+  const { navigate, goBack, dispatch } = useNavigation();
   const { unit, addType, isAddUnit, location = '' } = route?.params;
   const [roomName, setRoomName] = useState('');
   const [wallpaper, setWallpaper] = useState('');
@@ -62,13 +63,15 @@ const AddSubUnit = ({ route }) => {
           }
         );
         if (success) {
-          navigate(Routes.UnitStack, {
-            screen: Routes.UnitDetail,
-            params: {
-              unitId: data?.id,
-              routeName: Routes.DashboardStack,
-            },
-          });
+          dispatch(
+            replace(Routes.UnitStack, {
+              screen: Routes.UnitDetail,
+              params: {
+                unitId: data?.id,
+                routeName: Routes.DashboardStack,
+              },
+            })
+          );
           cleanData();
         } else {
           awaitCreate.current = false;
@@ -98,15 +101,17 @@ const AddSubUnit = ({ route }) => {
             });
             return;
           }
-          navigate(Routes.UnitStack, {
-            screen: Routes.UnitDetail,
-            params: {
-              unitId: unit.id,
-              unitData: unit,
-              isAddSubUnit: true,
-              routeName: Routes.DashboardStack,
-            },
-          });
+          dispatch(
+            replace(Routes.UnitStack, {
+              screen: Routes.UnitDetail,
+              params: {
+                unitId: unit.id,
+                unitData: unit,
+                isAddSubUnit: true,
+                routeName: Routes.DashboardStack,
+              },
+            })
+          );
           cleanData();
         } else {
           awaitCreate.current = false;
@@ -123,6 +128,7 @@ const AddSubUnit = ({ route }) => {
     t,
     unit,
     addType,
+    dispatch,
     goBack,
     route.params,
   ]);

package/src/screens/SubUnit/EditSubUnit.js

@@ -228,20 +228,22 @@ const EditSubUnit = ({ route }) => {
             setImageUrl={setImageUrl}
             optionsCapture={options}
           />
-          <TouchableOpacity
-            testID={TESTID.MANAGE_SUB_UNIT_REMOVE_BUTTON}
-            onPress={onPressRemove}
-            style={styles.removeButton}
-          >
-            <Text
-              type={'H4'}
-              semibold
-              color={Colors.Red}
-              style={styles.removeText}
+          {!showEdit && (
+            <TouchableOpacity
+              testID={TESTID.MANAGE_SUB_UNIT_REMOVE_BUTTON}
+              onPress={onPressRemove}
+              style={styles.removeButton}
             >
-              {t('remove_sub_unit')}
-            </Text>
-          </TouchableOpacity>
+              <Text
+                type={'H4'}
+                semibold
+                color={Colors.Red}
+                style={styles.removeText}
+              >
+                {t('remove_sub_unit')}
+              </Text>
+            </TouchableOpacity>
+          )}
         </View>
       </View>
       <ModalCustom

package/src/screens/SubUnit/__test__/AddSubUnit.test.js

@@ -36,13 +36,20 @@ jest.mock('react-redux', () => {
   };
 });
 
+const mockNavigationDispatch = jest.fn();
+const mockReplace = jest.fn();
+
 jest.mock('@react-navigation/native', () => {
   return {
     ...jest.requireActual('@react-navigation/native'),
     useNavigation: () => ({
       navigate: mockedNavigate,
       goBack: mockedGoBack,
+      dispatch: mockNavigationDispatch,
     }),
+    StackActions: {
+      replace: () => mockReplace,
+    },
   };
 });
 
@@ -63,6 +70,7 @@ describe('Test AddSubUnit', () => {
   afterEach(() => {
     mockedDispatch.mockClear();
     mockedNavigate.mockClear();
+    mockNavigationDispatch.mockClear();
     Toast.show.mockClear();
   });
   let tree;
@@ -150,15 +158,6 @@ describe('Test AddSubUnit', () => {
     await act(async () => {
       await viewButtonBottom.props.onRightClick();
     });
-    expect(mockedNavigate).not.toHaveBeenCalledWith(Routes.UnitStack, {
-      screen: Routes.UnitDetail,
-      params: {
-        unitId: route.params.unit.id,
-        unitData: route.params.unit,
-        routeName: 'DashboardStack',
-        isAddSubUnit: true,
-      },
-    });
     expect(Toast.show).toHaveBeenCalledWith({
       type: 'error',
       position: 'bottom',
@@ -186,13 +185,6 @@ describe('Test AddSubUnit', () => {
   });
 
   test('test create Unit', async () => {
-    const response = {
-      success: true,
-      status: 200,
-      data: {
-        id: 2,
-      },
-    };
     route.params = {
       ...route.params,
       location: 'Unit address',
@@ -211,13 +203,7 @@ describe('Test AddSubUnit', () => {
     await act(async () => {
       await viewButtonBottom.props.onRightClick();
     });
-    expect(mockedNavigate).toHaveBeenCalledWith(Routes.UnitStack, {
-      screen: Routes.UnitDetail,
-      params: {
-        unitId: response.data.id,
-        routeName: Routes.DashboardStack,
-      },
-    });
+    expect(mockNavigationDispatch).toBeCalledWith(mockReplace);
   });
 
   test('test choose Location', async () => {

package/src/screens/SyncLGDevice/__test__/AddLGDevice.test.js

@@ -53,6 +53,7 @@ describe('Test Add LG Device', () => {
         backend_url: 'https://doamin.com',
       },
     };
+    mock.resetHistory();
   });
 
   const getText = (instance, id) => {
@@ -105,7 +106,13 @@ describe('Test Add LG Device', () => {
     });
     const instance = tree.root;
     const groupCheckBox = instance.findByType(GroupCheckBox);
-    expect(groupCheckBox.props.data).toEqual([]);
+    expect(groupCheckBox.props.data).toEqual([
+      {
+        id: 2,
+        name: 'Station name',
+        title: 'Station name',
+      },
+    ]);
   });
 
   test('ViewButtonBottom', async () => {

package/src/screens/Unit/SelectAddress.js

@@ -4,6 +4,7 @@ import MapView, { Marker, Circle, PROVIDER_GOOGLE } from 'react-native-maps';
 import { useNavigation } from '@react-navigation/native';
 import { IconOutline, IconFill } from '@ant-design/icons-react-native';
 import { check, RESULTS } from 'react-native-permissions';
+import { openPromptEnableLocation } from '../../utils/Setting/Location';
 
 import BottomButtonView from '../../commons/BottomButtonView';
 import SearchBarLocation from '../../commons/SearchLocation';
@@ -151,9 +152,14 @@ const SelectAddress = memo(({ route }) => {
               t('location_rationale_title'),
               t('location_require_message')
             );
+        } else if (error.code === GEOLOCATION_ERROR.POSITION_UNAVAILABLE) {
+          const locationEnabaled = await openPromptEnableLocation();
+          process.env.NODE_ENV !== 'test' &&
+            locationEnabaled &&
+            getCurrentPosition();
         }
       }
-      // { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 } enable on emulator
+      // { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 } // enable on emulator
     );
   }, [t]);
 

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

@@ -1,5 +1,6 @@
 import React, { memo, useEffect, useRef, useState } from 'react';
 import { View, Text, TouchableOpacity, FlatList } from 'react-native';
+import { TESTID } from '../../../configs/Constants';
 import styles from './StationStyles';
 
 const Station = ({ listStation = [], onSnapToItem, indexStation }) => {
@@ -23,6 +24,7 @@ const Station = ({ listStation = [], onSnapToItem, indexStation }) => {
         key={index}
         style={styles.wrapTitle}
         onPress={handleOnSnapToItem(item, index)}
+        testID={`${TESTID.SUB_UNIT_NAME}-${item?.station?.id}`}
       >
         <Text
           style={[styles.title, index === indexStation && styles.titleActive]}
@@ -71,6 +73,7 @@ const Station = ({ listStation = [], onSnapToItem, indexStation }) => {
         renderItem={renderItem}
         showsHorizontalScrollIndicator={false}
         scrollIndicatorInsets={{ right: 1 }}
+        testID={TESTID.NAV_LIST}
       />
     </View>
   );

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

@@ -1,7 +1,9 @@
 import React from 'react';
+import { Alert } from 'react-native';
 import { act, create } from 'react-test-renderer';
 import MockAdapter from 'axios-mock-adapter';
 import RNP from 'react-native-permissions';
+import RNAndroidLocationEnabler from 'react-native-android-location-enabler';
 
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
@@ -62,6 +64,13 @@ jest.mock('react-native-maps', () => {
   };
 });
 
+jest.mock('react-native-android-location-enabler', () => {
+  return {
+    ...jest.requireActual('react-native-android-location-enabler'),
+    promptForEnableLocationIfNeeded: jest.fn(),
+  };
+});
+
 jest.mock('../../../utils/Permission/common');
 
 const position = {
@@ -82,11 +91,12 @@ jest.mock('react-native-permissions', () => {
 });
 
 describe('Test SelectAddress', () => {
-  let tree;
-  let route;
+  let tree, route, Platform;
   const mockUpdateLocation = jest.fn();
 
   beforeAll(() => {
+    Platform = require('react-native').Platform;
+    RNAndroidLocationEnabler.promptForEnableLocationIfNeeded.mockClear();
     RNP.check.mockClear();
     route = {
       params: {
@@ -209,7 +219,74 @@ describe('Test SelectAddress', () => {
     OpenSetting.mockClear();
   });
 
-  test('test get current failed error not handle', async () => {
+  test('test get current location failed location not enabled android', async () => {
+    Platform.OS = 'android';
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const button = instance.find(
+      (el) => el.props.testID === TESTID.BUTTON_YOUR_LOCATION
+    );
+
+    global.navigator.geolocation = {
+      getCurrentPosition: (onSuccess, onError, options) => {
+        onError({ code: GEOLOCATION_ERROR.POSITION_UNAVAILABLE });
+      },
+    };
+
+    // cancel
+    RNAndroidLocationEnabler.promptForEnableLocationIfNeeded.mockImplementationOnce(
+      async () => {
+        throw new Error();
+      }
+    );
+    await act(async () => {
+      await button.props.onPress();
+    });
+    expect(
+      RNAndroidLocationEnabler.promptForEnableLocationIfNeeded
+    ).toBeCalled();
+
+    RNAndroidLocationEnabler.promptForEnableLocationIfNeeded.mockClear();
+
+    // enabled
+    RNAndroidLocationEnabler.promptForEnableLocationIfNeeded.mockImplementationOnce(
+      async () => true
+    );
+    await act(async () => {
+      await button.props.onPress();
+    });
+    expect(
+      RNAndroidLocationEnabler.promptForEnableLocationIfNeeded
+    ).toBeCalled();
+  });
+
+  test('test get current location failed location not enabled ios', async () => {
+    Platform.OS = 'ios';
+    jest.spyOn(Alert, 'alert');
+
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const button = instance.find(
+      (el) => el.props.testID === TESTID.BUTTON_YOUR_LOCATION
+    );
+
+    global.navigator.geolocation = {
+      getCurrentPosition: (onSuccess, onError, options) => {
+        onError({ code: GEOLOCATION_ERROR.POSITION_UNAVAILABLE });
+      },
+    };
+
+    await act(async () => {
+      await button.props.onPress();
+    });
+    // expect AlertAsync is called
+  });
+
+  test('test get current location failed error not handle', async () => {
     await act(async () => {
       tree = await create(wrapComponent(route));
     });

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

@@ -1,12 +1,12 @@
 import React, { useState, useCallback } from 'react';
-import { Image, StyleSheet, View, TouchableOpacity } from 'react-native';
+import { StyleSheet, View, TouchableOpacity } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 
 import ItemQuickAction from '../../../../commons/Action/ItemQuickAction';
 import Text from '../../../../commons/Text';
 import Routes from '../../../../utils/Route';
-
-import { Colors, Images } from '../../../../configs';
+import { Colors } from '../../../../configs';
+import FImage from '../../../../commons/FImage';
 
 const MyUnitDevice = ({ sensor, unit }) => {
   const [status, setStatus] = useState(sensor.status);
@@ -26,7 +26,7 @@ const MyUnitDevice = ({ sensor, unit }) => {
     <View style={styles.item}>
       <TouchableOpacity style={styles.flex1} onPress={goToSensorDisplay}>
         <View style={styles.rowCenter}>
-          <Image style={styles.image} source={Images.mainDoor} />
+          <FImage style={styles.image} source={{ uri: sensor?.icon_kit }} />
           <View style={styles.marginTop3}>
             <Text semibold style={styles.nameDevice}>
               {sensor.name}

package/src/screens/Unit/components/__test__/MyUnitDevice.test.js

@@ -43,7 +43,7 @@ describe('Test MyUnitDevice', () => {
     });
     const instance = tree.root;
     const Views = instance.findAllByType(View);
-    expect(Views).toHaveLength(11);
+    expect(Views).toHaveLength(12);
 
     const touches = instance.findAllByType(TouchableOpacity);
     expect(touches).toHaveLength(1);
@@ -60,6 +60,6 @@ describe('Test MyUnitDevice', () => {
     });
     const instance = tree.root;
     const Views = instance.findAllByType(View);
-    expect(Views).toHaveLength(11);
+    expect(Views).toHaveLength(12);
   });
 });

package/src/utils/Apis/axios.js

@@ -2,6 +2,9 @@ import { create } from 'apisauce';
 import { getData, storeData } from '../Storage';
 import { ToastBottomHelper } from '../Utils';
 import NetInfo from '@react-native-community/netinfo';
+import { PROBLEM_CODE } from '../../configs/Constants';
+import { getTranslate } from '../I18n';
+import { SCConfig } from '../../configs';
 
 const api = create({
   headers: {
@@ -39,6 +42,11 @@ const parseErrorResponse = async (error) => {
       }
     }
     if (!hideError) {
+      switch (error.problem) {
+        case PROBLEM_CODE.SERVER_ERROR:
+          message = getTranslate(SCConfig.language, 'server_error');
+          break;
+      }
       ToastBottomHelper.error(message);
     }
   }
@@ -102,7 +110,7 @@ export async function axiosGet(URL, config = {}, cache = false) {
     return await parseErrorResponse(error);
   }
   const { data, problem } = response;
-  if (problem === 'NETWORK_ERROR') {
+  if (problem) {
     if (cache) {
       return (
         (await axiosCache(URL, 500)) || (await parseErrorResponse(response))

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

@@ -989,5 +989,7 @@
   "This {name} was removed!" : "This {name} was removed!",
   "camera_request_permission": "Camera request permission",
   "camera_request_permission_des": "To use camera, please unlock camera permission",
-  "location_require_message": "EoH needs your location permission to get current location."
+  "location_require_message": "EoH needs your location permission to get current location.",
+  "turn_on_location_service": "Turn on location service for your phone",
+  "turn_on_location_service_des": "To continue, let your device turn on location by turning on location service in Settings"
 }

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

@@ -990,5 +990,7 @@
   "location_perm_denied": "Ứng dụng không cho phép truy cập vị trí.",
   "camera_request_permission": "Quyền yêu cầu máy ảnh",
   "camera_request_permission_des": "Để sử dụng máy ảnh, vui lòng mở khóa quyền đối với máy ảnh",
-  "location_require_message": "Eoh cần quyền truy cập vị trí của bạn để lấy vị trí hiện tại."
+  "location_require_message": "Eoh cần quyền truy cập vị trí của bạn để lấy vị trí hiện tại.",
+  "turn_on_location_service": "Bật dịch vụ vị trí cho điện thoại của bạn",
+  "turn_on_location_service_des": "Để tiếp tục, bật dịch vụ vị trí cho điện thoại của bạn trong Cài Đặt"
 }

package/src/utils/Setting/Location.js

@@ -0,0 +1,30 @@
+import { Platform } from 'react-native';
+import RNAndroidLocationEnabler from 'react-native-android-location-enabler';
+import AlertAsync from 'react-native-alert-async';
+import t from '../../hooks/Common/useTranslations';
+
+export const openPromptEnableLocation = async () => {
+  if (Platform.OS === 'android') {
+    try {
+      await RNAndroidLocationEnabler.promptForEnableLocationIfNeeded({
+        interval: 10000,
+        fastInterval: 5000,
+      });
+      return true;
+    } catch (err) {
+      return false;
+    }
+  } else {
+    await AlertAsync(
+      t('turn_on_location_service'),
+      t('turn_on_location_service_des'),
+      [
+        {
+          text: t('ok'),
+          onPress: () => {},
+        },
+      ]
+    );
+    return false;
+  }
+};

package/src/utils/__test__/Utils.test.js

@@ -0,0 +1,12 @@
+import { validateEmail, formatMoney } from '../Utils';
+
+describe('Test utils', () => {
+  test('test validateEmail', () => {
+    const result = validateEmail('eoh.2020@gmail.com');
+    expect(result).toEqual(true);
+  });
+  test('test formatMoney', () => {
+    const result = formatMoney(10000);
+    expect(result).toEqual('10.000 đ');
+  });
+});