@eohjsc/react-native-smart-city 0.3.29 → 0.3.32

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.3.29",
+  "version": "0.3.32",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -39,11 +39,12 @@
     "reset-cache": "react-native start --reset-cache",
     "merge_conflict": "yarn jest && yarn update_coverage_result && yarn check_coverage_config",
     "jest": "jest --detectOpenHandles",
+    "jest1": "jest --detectOpenHandles --coverage=0",
     "example": "yarn --cwd example",
     "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"
+    "build": "syncdir ./src ../EohMobile/node_modules/@eohjsc/react-native-smart-city/src",
+    "watch": "syncdir ./src ../EohMobile/node_modules/@eohjsc/react-native-smart-city/src --watch"
   },
   "repository": {
     "type": "git",
@@ -139,7 +140,7 @@
     "patch-package": "^6.2.2",
     "pluralize": "^8.0.0",
     "postinstall": "^0.7.0",
-    "pusher-js": "^7.0.3",
+    "pusher-js": "^7.4.0",
     "pusher-js-auth": "^4.0.1",
     "querystring": "^0.2.0",
     "react-content-loader": "^6.0.3",
@@ -207,9 +208,10 @@
     "redux-persist": "^6.0.0",
     "redux-saga": "^1.1.3",
     "string-format": "^2.0.0",
-    "sync-files": "^1.0.3",
+    "sync-directory": "^5.1.7",
     "timezone-mock": "^1.1.3",
     "uuid-by-string": "^3.0.2",
+    "uuidv4": "^6.2.13",
     "validator": "^13.1.1",
     "victory-native": "^35.0.1"
   },

package/src/commons/Action/ItemQuickAction.js

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useEffect, useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 import { useSCContextSelector } from '../../context';
 import { useRemoteControl } from '../../hooks/IoT';
 import { useConfigGlobalState } from '../../iot/states';
@@ -87,7 +87,7 @@ const ItemQuickAction = memo(({ sensor, wrapperStyle, setStatus }) => {
 
   return (
     <TouchableOpacity
-      testID={TESTID.ITEM_QUICK_ACTION_PRESS}
+      accessibilityLabel={`${AccessibilityLabel.ITEM_QUICK_ACTION_PRESS}-${sensor?.id}`}
       onPress={onActionPress}
     >
       <View style={wrapperStyle}>

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

@@ -3,7 +3,7 @@ import { TouchableOpacity } from 'react-native';
 import { act, create } from 'react-test-renderer';
 import ItemQuickAction from '../ItemQuickAction';
 import { Colors } from '../../../configs';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import { factory } from 'factory-girl';
 
 class Sensor {}
@@ -95,7 +95,8 @@ describe('Test ItemQuickAction', () => {
     const instance = tree.root;
     const buttonOnActionPress = instance.findAll(
       (el) =>
-        el.props.testID === TESTID.ITEM_QUICK_ACTION_PRESS &&
+        el.props.accessibilityLabel ===
+          `${AccessibilityLabel.ITEM_QUICK_ACTION_PRESS}-${sensor?.id}` &&
         el.type === TouchableOpacity
     );
     expect(buttonOnActionPress).toHaveLength(0);
@@ -117,7 +118,8 @@ describe('Test ItemQuickAction', () => {
     const instance = tree.root;
     const buttonOnActionPress = instance.find(
       (el) =>
-        el.props.testID === TESTID.ITEM_QUICK_ACTION_PRESS &&
+        el.props.accessibilityLabel ===
+          `${AccessibilityLabel.ITEM_QUICK_ACTION_PRESS}-${sensor?.id}` &&
         el.type === TouchableOpacity
     );
     expect(buttonOnActionPress).toBeDefined();
@@ -150,7 +152,8 @@ describe('Test ItemQuickAction', () => {
     const instance = tree.root;
     const buttonOnActionPress = instance.find(
       (el) =>
-        el.props.testID === TESTID.ITEM_QUICK_ACTION_PRESS &&
+        el.props.accessibilityLabel ===
+          `${AccessibilityLabel.ITEM_QUICK_ACTION_PRESS}-${sensor?.id}` &&
         el.type === TouchableOpacity
     );
     expect(buttonOnActionPress).toBeDefined();
@@ -196,7 +199,8 @@ describe('Test ItemQuickAction', () => {
     const instance = tree.root;
     const buttonOnActionPress = instance.find(
       (el) =>
-        el.props.testID === TESTID.ITEM_QUICK_ACTION_PRESS &&
+        el.props.accessibilityLabel ===
+          `${AccessibilityLabel.ITEM_QUICK_ACTION_PRESS}-${sensor?.id}` &&
         el.type === TouchableOpacity
     );
 
@@ -219,7 +223,8 @@ describe('Test ItemQuickAction', () => {
     const instance = tree.root;
     const buttonOnActionPress = instance.find(
       (el) =>
-        el.props.testID === TESTID.ITEM_QUICK_ACTION_PRESS &&
+        el.props.accessibilityLabel ===
+          `${AccessibilityLabel.ITEM_QUICK_ACTION_PRESS}-${sensor?.id}` &&
         el.type === TouchableOpacity
     );
     expect(buttonOnActionPress).toBeDefined();
@@ -235,7 +240,8 @@ describe('Test ItemQuickAction', () => {
     const instance = tree.root;
     const buttonOnActionPress = instance.find(
       (el) =>
-        el.props.testID === TESTID.ITEM_QUICK_ACTION_PRESS &&
+        el.props.accessibilityLabel ===
+          `${AccessibilityLabel.ITEM_QUICK_ACTION_PRESS}-${sensor?.id}` &&
         el.type === TouchableOpacity
     );
     expect(buttonOnActionPress).toBeDefined();
@@ -282,7 +288,8 @@ describe('Test ItemQuickAction', () => {
     const instance = tree.root;
     const buttonOnActionPress = instance.find(
       (el) =>
-        el.props.testID === TESTID.ITEM_QUICK_ACTION_PRESS &&
+        el.props.accessibilityLabel ===
+          `${AccessibilityLabel.ITEM_QUICK_ACTION_PRESS}-${sensor?.id}` &&
         el.type === TouchableOpacity
     );
 
@@ -313,7 +320,8 @@ describe('Test ItemQuickAction', () => {
     const instance = tree.root;
     const buttonOnActionPress = instance.find(
       (el) =>
-        el.props.testID === TESTID.ITEM_QUICK_ACTION_PRESS &&
+        el.props.accessibilityLabel ===
+          `${AccessibilityLabel.ITEM_QUICK_ACTION_PRESS}-${sensor?.id}` &&
         el.type === TouchableOpacity
     );
 

package/src/commons/ActionGroup/ColorPickerTemplate.js

@@ -1,41 +1,55 @@
-import React, { memo, useState, useEffect } from 'react';
+import React, {
+  memo,
+  useState,
+  useEffect,
+  useContext,
+  useCallback,
+} from 'react';
 import { View } from 'react-native';
 import styles from './ColorPickerTemplateStyles';
 import ColorPicker from 'react-native-wheel-color-picker';
 import { useConfigGlobalState } from '../../iot/states';
+import { SCContext } from '../../context';
+import { Action } from '../../context/actionType';
 
-let isFirstTime = true;
-
-const WheelColorPicker = ({ valueColor, onChangeColor }) => {
+const WheelColorPicker = ({ valueColor, onChangeColor, onStart }) => {
   return (
     <ColorPicker
       style={styles.colorPicker}
       sliderHidden={true}
       swatches={false}
       color={valueColor}
+      onInteractionStart={onStart}
       onColorChangeComplete={onChangeColor}
       thumbSize={16}
     />
   );
 };
 
-const ColorPickerTemplate = memo(({ actionGroup, doAction, sensor }) => {
-  const { configuration } = actionGroup;
+let isFirstTime = true;
+const ColorPickerTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
+  const { configuration = {} } = actionGroup;
   const [valueColorComplete, setValueColorComplete] = useState('');
   const [configValues] = useConfigGlobalState('configValues');
+  const { setAction } = useContext(SCContext);
 
-  const onChangeColor = (color) => {
-    const to = setTimeout(() => {
-      isFirstTime = false;
-      clearTimeout(to);
-    }, 1000);
+  const onChangeColor = useCallback(
+    (color) => {
+      setAction(Action.SET_LOCK_VIEW_PICK_COLOR, false);
+      const to = setTimeout(() => {
+        isFirstTime = false;
+        clearTimeout(to);
+      }, 1000);
 
-    !isFirstTime &&
-      doAction(
-        configuration?.action_color_data,
-        JSON.stringify({ value: color })
-      );
-  };
+      !isFirstTime &&
+        doAction(
+          configuration?.action_color_data,
+          JSON.stringify({ value: color })
+        );
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [configuration?.action_color_data, doAction]
+  );
 
   useEffect(() => {
     const { config } = configuration;
@@ -50,11 +64,16 @@ const ColorPickerTemplate = memo(({ actionGroup, doAction, sensor }) => {
     return () => (isFirstTime = true);
   }, []);
 
+  const onStartPickColor = useCallback(() => {
+    setAction(Action.SET_LOCK_VIEW_PICK_COLOR, true);
+  }, [setAction]);
+
   return (
     <View style={styles.viewPickColor}>
       <WheelColorPicker
         valueColor={valueColorComplete}
         onChangeColor={onChangeColor}
+        onStart={onStartPickColor}
       />
     </View>
   );

package/src/commons/ActionGroup/CurtainButtonTemplate.js

@@ -3,7 +3,7 @@ import { TouchableOpacity, View, Switch, Image } from 'react-native';
 import { Icon } from '@ant-design/react-native';
 import styles from './CurtainButtonTemplateStyle';
 import Text from '../Text';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 import { Colors, Images } from '../../configs';
 
 const CurtainButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
@@ -50,21 +50,21 @@ const CurtainButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
         icon: Images.buttonLeftCurtain,
         text: text1,
         onPress: onButtonClosePress,
-        testID: TESTID.BUTTON_TEMPLATE_1,
+        accessibilityLabel: AccessibilityLabel.BUTTON_TEMPLATE_1,
       },
       {
         style: styles.buttonActionCurtainCenter,
         icon: Images.buttonPauseCurtain,
         text: '',
         onPress: onButtonStopPress,
-        testID: TESTID.BUTTON_TEMPLATE_2,
+        accessibilityLabel: AccessibilityLabel.BUTTON_TEMPLATE_2,
       },
       {
         style: styles.buttonActionCurtain,
         icon: Images.buttonRightCurtain,
         text: text3,
         onPress: onButtonOpenPress,
-        testID: TESTID.BUTTON_TEMPLATE_3,
+        accessibilityLabel: AccessibilityLabel.BUTTON_TEMPLATE_3,
       },
     ];
 
@@ -72,7 +72,7 @@ const CurtainButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
       <>
         {buttons.map((item, index) => (
           <TouchableOpacity
-            testID={item.testID}
+            accessibilityLabel={item.accessibilityLabel}
             style={item?.style}
             onPress={item.onPress}
             underlayColor={Colors.Gray2}
@@ -91,7 +91,7 @@ const CurtainButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
           <Icon name={icon} size={15} color={color} style={styles.iconLock} />
           <Text
             style={styles.textLockDoor}
-            testID={TESTID.TEXT_DOOR_LOOK_ON_OFF}
+            accessibilityLabel={AccessibilityLabel.TEXT_DOOR_LOOK_ON_OFF}
           >
             {text_door_lock}{' '}
           </Text>

package/src/commons/ActionGroup/NumberUpDownActionTemplate.js

@@ -8,18 +8,23 @@ import { useConfigGlobalState } from '../../iot/states';
 import { useUnwatchLGDeviceConfigControl } from '../../hooks/IoT';
 import styles from './NumberUpDownActionTemplateStyle';
 import { watchMultiConfigs } from '../../iot/Monitor';
-import { DEVICE_TYPE, TESTID } from '../../configs/Constants';
-
-const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
-  const { configuration, title } = actionGroup;
+import { DEVICE_TYPE, AccessibilityLabel } from '../../configs/Constants';
+
+const NumberUpDownActionTemplate = ({
+  actionGroup = {},
+  doAction,
+  sensor = {},
+}) => {
+  const { configuration = {}, title } = actionGroup;
   const {
     action_data,
     max_value,
     min_value,
-    text_format,
+    text_format = '',
     config,
     allow_config_store_value,
   } = configuration;
+  const { device_type, is_managed_by_backend } = sensor;
 
   // eslint-disable-next-line no-unused-vars
   const [configValues, setConfigValues] = useConfigGlobalState('configValues');
@@ -41,7 +46,7 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
   const doActionAndWatchConfig = useCallback(
     async (actionData, actionValue) => {
       let data = actionValue;
-      if (sensor.device_type !== DEVICE_TYPE.GOOGLE_HOME) {
+      if (device_type !== DEVICE_TYPE.GOOGLE_HOME) {
         data = { temperature: actionValue };
         if (allow_config_store_value && config) {
           data.config_id = config;
@@ -50,7 +55,7 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
         data = JSON.stringify(data);
       }
       await doAction(actionData, data);
-      if (!sensor?.is_managed_by_backend) {
+      if (!is_managed_by_backend) {
         return;
       }
       if (!config) {
@@ -58,13 +63,13 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
       }
 
       config &&
-        sensor.device_type === DEVICE_TYPE.LG_THINQ &&
+        device_type === DEVICE_TYPE.LG_THINQ &&
         watchMultiConfigs([config]);
     },
     [
       doAction,
-      sensor?.is_managed_by_backend,
-      sensor.device_type,
+      is_managed_by_backend,
+      device_type,
       allow_config_store_value,
       config,
     ]
@@ -109,12 +114,12 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
         <TouchableOpacity
           style={styles.downButton}
           onPress={doActionDown}
-          testID={TESTID.NUMBER_ACTION_DOWN}
+          accessibilityLabel={AccessibilityLabel.NUMBER_ACTION_DOWN}
         >
           <IconOutline name="down" size={32} color={Colors.Primary} />
         </TouchableOpacity>
 
-        <Text testID={'abcd'} type="H2">
+        <Text accessibilityLabel={'abcd'} type="H2">
           {value !== undefined ? (
             text_format.replace('{number}', value)
           ) : (
@@ -125,7 +130,7 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
         <TouchableOpacity
           style={styles.upButton}
           onPress={doActionUp}
-          testID={TESTID.NUMBER_ACTION_UP}
+          accessibilityLabel={AccessibilityLabel.NUMBER_ACTION_UP}
         >
           <IconOutline name="up" size={32} color={Colors.Primary} />
         </TouchableOpacity>

package/src/commons/ActionGroup/OnOffSmartLock/AutoLock/ButtonWrapper.js

@@ -14,10 +14,13 @@ const ButtonWrapper = memo(
     isButtonReLockTiming,
     toggleSwitch,
     isEnabled,
-    testID,
+    accessibilityLabel,
   }) => {
     return (
-      <View style={styles.buttonWrapper} testID={testID}>
+      <View
+        style={styles.buttonWrapper}
+        accessibilityLabel={accessibilityLabel}
+      >
         {isButtonReLockTiming ? (
           <View style={styles.wrapHeadline}>
             <SvgBrightnessBlack />

package/src/commons/ActionGroup/OnOffSmartLock/AutoLock/__test__/index.test.js

@@ -4,7 +4,7 @@ import { Switch } from 'react-native';
 
 import AutoLock from '../index';
 import { mockSCStore } from '../../../../../context/mockStore';
-import { TESTID } from '../../../../../configs/Constants';
+import { AccessibilityLabel } from '../../../../../configs/Constants';
 import { SCProvider } from '../../../../../context';
 
 const wrapComponent = () => (
@@ -18,13 +18,19 @@ describe('Test AutoLock', () => {
 
   const getElement = (instance) => {
     const buttonEnable = instance.findAll(
-      (item) => item.props.testID === TESTID.AUTO_LOCK_BUTTON_ENABLE
+      (item) =>
+        item.props.accessibilityLabel ===
+        AccessibilityLabel.AUTO_LOCK_BUTTON_ENABLE
     );
     const buttonInstant = instance.findAll(
-      (item) => item.props.testID === TESTID.AUTO_LOCK_BUTTON_INSTANT
+      (item) =>
+        item.props.accessibilityLabel ===
+        AccessibilityLabel.AUTO_LOCK_BUTTON_INSTANT
     );
     const buttonRelockTiming = instance.findAll(
-      (item) => item.props.testID === TESTID.AUTO_LOCK_BUTTON_RELOCK_TIMING
+      (item) =>
+        item.props.accessibilityLabel ===
+        AccessibilityLabel.AUTO_LOCK_BUTTON_RELOCK_TIMING
     );
     return {
       buttonEnable,

package/src/commons/ActionGroup/OnOffSmartLock/AutoLock/index.js

@@ -4,7 +4,7 @@ import Slider from 'react-native-slider';
 import Text from '../../../Text';
 import { HeaderCustom } from '../../../Header';
 import ButtonWrapper from './ButtonWrapper';
-import { TESTID } from '../../../../configs/Constants';
+import { AccessibilityLabel } from '../../../../configs/Constants';
 import styles from './AutoLockStyles';
 import t from '../../../../hooks/Common/useTranslations';
 import { Colors } from '../../../../configs';
@@ -25,16 +25,16 @@ const AutoLock = memo(() => {
           isButtonEnable
           toggleSwitch={handleToggleSwitch}
           isEnabled={isEnabled}
-          testID={TESTID.AUTO_LOCK_BUTTON_ENABLE}
+          accessibilityLabel={AccessibilityLabel.AUTO_LOCK_BUTTON_ENABLE}
         />
         <ButtonWrapper
           isButtonInstant
-          testID={TESTID.AUTO_LOCK_BUTTON_INSTANT}
+          accessibilityLabel={AccessibilityLabel.AUTO_LOCK_BUTTON_INSTANT}
         />
         <ButtonWrapper
           isButtonReLockTiming
           isEnabled={isEnabled}
-          testID={TESTID.AUTO_LOCK_BUTTON_RELOCK_TIMING}
+          accessibilityLabel={AccessibilityLabel.AUTO_LOCK_BUTTON_RELOCK_TIMING}
         />
         <View style={styles.slider}>
           <Slider

package/src/commons/ActionGroup/OnOffSmartLock/OnOffSmartLock.js

@@ -1,7 +1,6 @@
 import React, { memo, useCallback, useEffect, useState } from 'react';
-import { SafeAreaView, TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
-import { Section } from '../../Section';
 import Text from '../../Text';
 import styles from './OnOffSmartLockStyle';
 import ButtonLock from '../../../../assets/images/Device/button-lock.svg';
@@ -9,12 +8,14 @@ import ButtonUnLock from '../../../../assets/images/Device/button-unlock.svg';
 import { useConfigGlobalState } from '../../../iot/states';
 import { useUnwatchLGDeviceConfigControl } from '../../../hooks/IoT';
 import { watchMultiConfigs } from '../../../iot/Monitor';
-import { DEVICE_TYPE, TESTID } from '../../../configs/Constants';
+import { DEVICE_TYPE, AccessibilityLabel } from '../../../configs/Constants';
 
-const OnOffSmartLock = memo(({ actionGroup, doAction, sensor }) => {
+const OnOffSmartLock = memo(({ actionGroup = {}, doAction, sensor = {} }) => {
   const t = useTranslations();
-  const { configuration } = actionGroup;
-  const { action_on_data, action_off_data } = configuration;
+  const { configuration = {} } = actionGroup;
+  const { action_on_data, action_off_data, config, is_on_value } =
+    configuration;
+  const { is_managed_by_backend, device_type } = sensor;
   const [isUnlock, setisUnlock] = useState(true);
   const [configValues] = useConfigGlobalState('configValues');
 
@@ -27,10 +28,10 @@ const OnOffSmartLock = memo(({ actionGroup, doAction, sensor }) => {
         const dataUnlock = { door_lock: 1 };
         await doAction(action_off_data, JSON.stringify(dataUnlock));
       }
-      if (sensor?.is_managed_by_backend) {
-        configuration.config &&
-          sensor.device_type === DEVICE_TYPE.LG_THINQ &&
-          watchMultiConfigs([configuration.config]);
+      if (is_managed_by_backend) {
+        config &&
+          device_type === DEVICE_TYPE.LG_THINQ &&
+          watchMultiConfigs([config]);
       }
     }
   }, [
@@ -38,54 +39,46 @@ const OnOffSmartLock = memo(({ actionGroup, doAction, sensor }) => {
     action_on_data,
     doAction,
     isUnlock,
-    configuration,
-    sensor?.is_managed_by_backend,
-    sensor.device_type,
+    config,
+    is_managed_by_backend,
+    device_type,
   ]);
 
-  useUnwatchLGDeviceConfigControl(sensor, [configuration.config]);
+  useUnwatchLGDeviceConfigControl(sensor, [config]);
 
   useEffect(() => {
-    const { is_on_value, config } = configuration;
     const configValue = configValues[config];
     if (is_on_value && is_on_value.length) {
       setisUnlock(is_on_value.includes(configValue?.value));
     } else {
       setisUnlock(configValue?.value);
     }
-  }, [configValues, configuration]);
+  }, [config, configValues, configuration, is_on_value]);
 
   return (
-    <SafeAreaView style={styles.container}>
-      <View style={styles.wrap}>
-        <Section style={styles.section}>
-          <View style={styles.wrapController}>
-            <Text style={styles.textController}>{t('controller')}</Text>
-          </View>
-          <View>
-            <TouchableOpacity
-              onPress={handleActionSmartLock}
-              testID={TESTID.BUTTON_ON_OFF}
-              style={styles.wrapButtonSmartLock}
-            >
-              {isUnlock ? (
-                <ButtonLock style={styles.buttonSmartLock} />
-              ) : (
-                <ButtonUnLock style={styles.buttonSmartLock} />
-              )}
-              <Text style={styles.textSmartLock}>
-                {t(isUnlock ? 'lock' : 'unlock')}
-              </Text>
-            </TouchableOpacity>
-          </View>
-          <View style={styles.wrapStatus}>
-            <Text style={styles.textStatus}>
-              {t(isUnlock ? 'door_is_open' : 'door_is_close')}
-            </Text>
-          </View>
-        </Section>
+    <>
+      <View>
+        <TouchableOpacity
+          onPress={handleActionSmartLock}
+          accessibilityLabel={AccessibilityLabel.BUTTON_ON_OFF}
+          style={styles.wrapButtonSmartLock}
+        >
+          {isUnlock ? (
+            <ButtonLock style={styles.buttonSmartLock} />
+          ) : (
+            <ButtonUnLock style={styles.buttonSmartLock} />
+          )}
+          <Text style={styles.textSmartLock}>
+            {t(isUnlock ? 'lock' : 'unlock')}
+          </Text>
+        </TouchableOpacity>
       </View>
-    </SafeAreaView>
+      <View style={styles.wrapStatus}>
+        <Text style={styles.textStatus}>
+          {t(isUnlock ? 'door_is_open' : 'door_is_close')}
+        </Text>
+      </View>
+    </>
   );
 });
 

package/src/commons/ActionGroup/OnOffSmartLock/OnOffSmartLockStyle.js

@@ -28,6 +28,7 @@ export default StyleSheet.create({
     borderRadius: 10,
     borderColor: Colors.Gray4,
     borderWidth: 1,
+    marginTop: 10,
   },
   buttonSmartLock: {
     marginTop: 14,

package/src/commons/ActionGroup/OnOffSmartLock/PasscodeList/ItemPasscode.js

@@ -19,7 +19,7 @@ const ButtonWrapper = ({ item, textHeadline }) => {
 };
 
 const ItemPasscode = memo(({ route }) => {
-  const { item = {} } = route.params || {};
+  const { item = {} } = route?.params || {};
 
   return (
     <SafeAreaView style={styles.container}>

package/src/commons/ActionGroup/OnOffSmartLock/PasscodeList/__test__/index.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { act, create } from 'react-test-renderer';
 
 import { mockSCStore } from '../../../../../context/mockStore';
-import { TESTID } from '../../../../../configs/Constants';
+import { AccessibilityLabel } from '../../../../../configs/Constants';
 import { SCProvider } from '../../../../../context';
 import PasscodeList from '../index';
 import { TouchableOpacity } from 'react-native';
@@ -38,7 +38,7 @@ describe('Test SetupGeneratePasscode', () => {
     const instance = tree.root;
     const passcode_list = instance.findAll(
       (item) =>
-        item.props.testID === TESTID.PASSCODE_LIST &&
+        item.props.accessibilityLabel === AccessibilityLabel.PASSCODE_LIST &&
         item.type === TouchableOpacity
     );
 

package/src/commons/ActionGroup/OnOffSmartLock/PasscodeList/index.js

@@ -9,7 +9,7 @@ import t from '../../../../hooks/Common/useTranslations';
 import { Colors } from '../../../../configs';
 import Routes from '../../../../utils/Route';
 import styles from './PasscodeListStyles';
-import { TESTID } from '../../../../configs/Constants';
+import { AccessibilityLabel } from '../../../../configs/Constants';
 
 const PasscodeList = memo(() => {
   const navigation = useNavigation();
@@ -51,7 +51,7 @@ const PasscodeList = memo(() => {
           <TouchableOpacity
             onPress={handleClickButton(item)}
             style={styles.buttonWrapper}
-            testID={TESTID.PASSCODE_LIST}
+            accessibilityLabel={AccessibilityLabel.PASSCODE_LIST}
           >
             <View>
               <Text style={styles.textCode}>{item.code}</Text>