@eohjsc/react-native-smart-city 0.3.28 → 0.3.31

package/src/commons/WrapParallaxScrollView/index.js

@@ -21,6 +21,8 @@ const WrapParallaxScrollView = ({
   hideRight,
   hideRightPlus,
   contentBackground,
+  accessibilityLabel,
+  idButtonMore,
 }) => {
   const renderForeground = useCallback(
     () => (
@@ -32,6 +34,7 @@ const WrapParallaxScrollView = ({
           onMore={onMore}
           hideRight={hideRight}
           hideRightPlus={hideRightPlus}
+          idButtonMore={idButtonMore}
         />
         <Text semibold style={styles.nameUnit}>
           {title}
@@ -39,7 +42,16 @@ const WrapParallaxScrollView = ({
         {contentBackground}
       </View>
     ),
-    [onBack, onAdd, onMore, title, hideRight, hideRightPlus, contentBackground]
+    [
+      onBack,
+      onAdd,
+      onMore,
+      hideRight,
+      hideRightPlus,
+      idButtonMore,
+      title,
+      contentBackground,
+    ]
   );
   const renderBackground = useCallback(
     () => (
@@ -68,10 +80,11 @@ const WrapParallaxScrollView = ({
           onMore={onMore}
           hideRight={hideRight}
           hideRightPlus={hideRightPlus}
+          idButtonMore={idButtonMore}
         />
       </View>
     ),
-    [title, onBack, onAdd, onMore, hideRight, hideRightPlus]
+    [title, onBack, onAdd, onMore, hideRight, hideRightPlus, idButtonMore]
   );
   return (
     <ParallaxScrollView
@@ -83,6 +96,7 @@ const WrapParallaxScrollView = ({
       backgroundColor={Colors.White}
       refreshControl={refreshControl}
       showsVerticalScrollIndicator={false}
+      accessibilityLabel={accessibilityLabel}
     >
       {children}
     </ParallaxScrollView>

package/src/configs/API.js

@@ -200,6 +200,12 @@ const API = {
   PUSHER: {
     AUTH: () => '/smart_parking/pusher/auth/',
   },
+  // NOTE: DEV MODE
+  DEV_MODE: {
+    GET_TEMPLATES: '/property_manager/iot_dashboard/dev_mode/templates/',
+    GET_WIDGETS: (templateId) =>
+      `/property_manager/iot_dashboard/dev_mode/templates/${templateId}/list_widgets/`,
+  },
 };
 
 export default API;

package/src/configs/Colors.js

@@ -135,6 +135,10 @@ export const Colors = {
   BlueTransparent5: 'rgba(230, 247, 255, 0.5)',
   Neutral: {
     Neutral3: '#E6E6E6',
+    Neutral4: '#B3B3B3',
     Neutral5: '#595959',
   },
+  BlackRussian: '#1D2129',
+  Salem: '#008040',
+  LightGreen: '#8AE699',
 };

package/src/configs/Constants.js

@@ -313,11 +313,13 @@ export const TESTID = {
   SUB_UNIT_GO_DETAIL: 'SUB_UNIT_GO_DETAIL',
   VIEW_SUB_UNIT_AUTOMATE: 'VIEW_SUB_UNIT_AUTOMATE',
   SUB_UNIT_NAME: 'SUB_UNIT_NAME',
+  SUB_UNIT_FAVORITES: 'SUB_UNIT_FAVORITES',
   ANIMATED_SCROLL: 'ANIMATED_SCROLL',
   ADD_SUB_UNIT: 'ADD_SUB_UNIT',
 
   // NavBar
   NAVBAR_ICON_BARS: 'NAVBAR_ICON_BARS',
+  NAVBAR_ICON_BARS_ADD_FAVORITES: 'NAVBAR_ICON_BARS_ADD_FAVORITES',
   NAVBAR_MENU_ACTION_MORE: 'NAVBAR_MENU_ACTION_MORE',
   NAVBAR_ON_SNAP_ITEM: 'NAVBAR_ON_SNAP_ITEM',
 
@@ -400,6 +402,11 @@ export const TESTID = {
   //Unit Detail
   UNIT_DETAIL_STATION_LIST: 'UNIT_DETAIL_STATION_LIST',
   UNIT_DETAIL_UNIT_SUMMARY_VIEW: 'UNIT_DETAIL_UNIT_SUMMARY_VIEW',
+  UNIT_DETAIL_UNIT_SUMMARY_ITEM: 'UNIT_DETAIL_UNIT_SUMMARY_ITEM',
+  UNIT_DETAIL_PARALLAX_SCROLLVIEW: 'UNIT_DETAIL_PARALLAX_SCROLLVIEW',
+  UNIT_DETAIL_PARALLAX_BUTTON_MORE: 'UNIT_DETAIL_PARALLAX_BUTTON_MORE',
+  UNIT_DETAIL_POPUP_MORE: 'UNIT_DETAIL_POPUP_MORE',
+  UNIT_DETAIL_POPUP_MORE_ITEM: 'UNIT_DETAIL_POPUP_MORE_ITEM',
 
   ON_CHECK_SPOT_NUMBER: 'ON_CHECK_SPOT_NUMBER',
   ON_BOOK_NOW: 'ON_BOOK_NOW',
@@ -422,6 +429,7 @@ export const TESTID = {
 
   // Automate
   AUTOMATE_SCRIPT_ACTION: 'AUTOMATE_SCRIPT_ACTION',
+  AUTOMATE_SCRIPT_NAME: 'AUTOMATE_SCRIPT_NAME',
   NAME_YOUR_BUTTON: 'NAME_YOUR_BUTTON',
   BUTTON_ACTIVATE_ONE_TAP: 'BUTTON_ACTIVATE_ONE_TAP',
   BUTTON_EDIT_SCRIPT_ACTION: 'BUTTON_EDIT_SCRIPT_ACTION',
@@ -439,6 +447,7 @@ export const TESTID = {
 
   // Header Device
   HEADER_DEVICE_BUTTON_STAR: 'HEADER_DEVICE_BUTTON_STAR',
+  HEADER_SCRIPT_DETAIL_BUTTON_STAR: 'HEADER_SCRIPT_DETAIL_BUTTON_STAR',
   HEADER_DEVICE_BUTTON_MORE: 'HEADER_DEVICE_BUTTON_MORE',
 
   // EMERGENCY BUTTON
@@ -661,6 +670,13 @@ export const TESTID = {
   ADD_NEW_DEVICE_ADD: 'ADD_NEW_DEVICE_ADD',
   ADD_NEW_DEVICE_THEN_SELECT: 'ADD_NEW_DEVICE_THEN_SELECT',
 
+  // Add Favorites
+  TOUCH_ADD_NEW_FAVORITES: 'TOUCH_ADD_NEW_FAVORITES',
+  LIST_FAVORITES: 'LIST_FAVORITES',
+  TOUCHABLE_ACTION_ADD_ITEM_FAVORITE: 'TOUCHABLE_ACTION_ADD_ITEM_FAVORITE',
+  TOUCHABLE_ACTION_ADD_ITEM_AUTOMATE_FAVORITE:
+    'TOUCHABLE_ACTION_ADD_ITEM_AUTOMATE_FAVORITE',
+
   // Setup gateway wifi
   SETUP_GATEWAY_WIFI_TITLE: 'SETUP_GATEWAY_WIFI_TITLE',
   SETUP_GATEWAY_WIFI_PLEASE_SELECT_A_WIFI: 'SETUP_GATEWAY_PLEASE_SELECT_A_WIFI',

package/src/configs/Images.js

@@ -19,4 +19,7 @@ export default {
   gateway: require('../Images/DevMode/gateway.png'),
   menu: require('../Images/DevMode/menu.png'),
   search: require('../Images/DevMode/search.png'),
+  close: require('../Images/DevMode/close.png'),
+  plus: require('../Images/DevMode/plus.png'),
+  removeCircle: require('../Images/DevMode/remove_circle.png'),
 };

package/src/context/actionType.ts

@@ -24,6 +24,11 @@ export const Action = {
   ON_RECEIVE_NOTIFICATION: 'ON_RECEIVE_NOTIFICATION',
   SET_DEVICES_STATUS: 'SET_DEVICES_STATUS',
   SET_POPOVER_ANIMATING: 'SET_POPOVER_ANIMATING',
+  SET_LOCK_VIEW_PICK_COLOR: 'SET_LOCK_VIEW_PICK_COLOR',
+  // NOTE: DEV MODE
+  SET_WIDGET_DRAGGING: 'SET_WIDGET_DRAGGING',
+  SET_IS_EDITING_TEMPLATE: 'SET_IS_EDITING_TEMPLATE',
+  SET_IS_IN_EDIT_TEMPLATE_SCREEN: 'SET_IS_IN_EDIT_TEMPLATE_SCREEN',
 };
 
 export type AuthData = {
@@ -82,6 +87,7 @@ export type AppType = {
   camera_opened: any[];
   notificationData: any;
   popoverAnimating: boolean;
+  isLockWhenPickColor: boolean;
 };
 
 export type IoTType = {
@@ -92,3 +98,9 @@ export type IoTType = {
     statuses: {};
   };
 };
+
+export type DevModeType = {
+  itemDraggingId: any;
+  isEditingTemplate: boolean;
+  isInEditTemplateScreen: boolean;
+};

package/src/context/mockStore.ts

@@ -38,6 +38,7 @@ export const mockDataStore: ContextData = {
     isBluetoothEnabled: true,
     isNetworkConnected: true,
     camera_opened: [],
+    isLockWhenPickColor: false,
   },
   iot: {
     googlehome: {
@@ -49,6 +50,11 @@ export const mockDataStore: ContextData = {
   },
   valueEvaluations: {},
   fetchedValueEvaluationUnits: [],
+  devMode: {
+    itemDraggingId: null,
+    isEditingTemplate: false,
+    isInEditTemplateScreen: false,
+  },
 };
 
 export const mockSCStore = (data: ContextData): ContextData => {
@@ -76,6 +82,7 @@ export const mockSCStore = (data: ContextData): ContextData => {
       isConnectWifiGateway: false,
       isBluetoothEnabled: true,
       isNetworkConnected: true,
+      isLockWhenPickColor: false,
     },
     unit: {
       favoriteDeviceIds: [
@@ -104,5 +111,10 @@ export const mockSCStore = (data: ContextData): ContextData => {
       ...data.valueEvaluations,
     },
     fetchedValueEvaluationUnits: [],
+    devMode: {
+      itemDraggingId: null,
+      isEditingTemplate: false,
+      isInEditTemplateScreen: false,
+    },
   };
 };

package/src/context/reducer.ts

@@ -11,6 +11,7 @@ import {
   AutomateType,
   AppType,
   IoTType,
+  DevModeType,
 } from './actionType';
 import { uniq, reduce } from 'lodash';
 
@@ -26,6 +27,7 @@ export type ContextData = {
   iot: IoTType;
   valueEvaluations: {};
   fetchedValueEvaluationUnits: Array<number>;
+  devMode: DevModeType;
 };
 
 export type Action = {
@@ -61,6 +63,7 @@ export const initialState = {
     camera_opened: [],
     notificationData: null,
     popoverAnimating: false,
+    isLockWhenPickColor: false,
   },
   iot: {
     googlehome: {
@@ -72,6 +75,11 @@ export const initialState = {
   },
   valueEvaluations: {},
   fetchedValueEvaluationUnits: [],
+  devMode: {
+    itemDraggingId: null,
+    isEditingTemplate: false,
+    isInEditTemplateScreen: false,
+  },
 };
 
 export const reducer = (currentState: ContextData, action: Action) => {
@@ -317,7 +325,6 @@ export const reducer = (currentState: ContextData, action: Action) => {
         valueEvaluations: reduce(
           data,
           (dict, item) => {
-            // eslint-disable-next-line no-param-reassign
             dict[item.config] = item;
             return dict;
           },
@@ -351,6 +358,41 @@ export const reducer = (currentState: ContextData, action: Action) => {
           popoverAnimating: payload,
         },
       };
+    case Action.SET_LOCK_VIEW_PICK_COLOR:
+      return {
+        ...currentState,
+        app: {
+          ...currentState.app,
+          isLockWhenPickColor: payload,
+        },
+      };
+    // NOTE: DEV MODE
+    case Action.SET_WIDGET_DRAGGING:
+      return {
+        ...currentState,
+        devMode: {
+          ...currentState.devMode,
+          itemDraggingId: payload,
+        },
+      };
+
+    case Action.SET_IS_EDITING_TEMPLATE:
+      return {
+        ...currentState,
+        devMode: {
+          ...currentState.devMode,
+          isEditingTemplate: payload,
+        },
+      };
+
+    case Action.SET_IS_IN_EDIT_TEMPLATE_SCREEN:
+      return {
+        ...currentState,
+        devMode: {
+          ...currentState.devMode,
+          isInEditTemplateScreen: payload,
+        },
+      };
 
     default:
       return currentState;

package/src/hooks/Common/useDevicesStatus.js

@@ -27,7 +27,7 @@ const useDevicesStatus = (unit, devices) => {
     if (success) {
       setAction(Action.SET_DEVICES_STATUS, data);
     }
-    timeoutId = setTimeout(() => getDevicesStatus(_unit, _devices), 5000);
+    timeoutId = setTimeout(() => getDevicesStatus(_unit, _devices), 10000);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

package/src/hooks/IoT/useValueEvaluation.js

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect } from 'react';
 import { API } from '../../configs';
 import { SCContext, useSCContextSelector } from '../../context';
 import { Action } from '../../context/actionType';
@@ -6,14 +6,15 @@ import { axiosGet } from '../../utils/Apis/axios';
 
 const useValueEvaluations = (unitId) => {
   const { setAction } = useContext(SCContext);
-  const [fetching, setFetching] = useState(false);
+  const fetchedValueEvaluationUnits = useSCContextSelector((state) => {
+    return state.fetchedValueEvaluationUnits || [];
+  });
 
   const fetchConfigValueEvaluations = useCallback(
     async (page = 1) => {
-      if (!unitId) {
+      if (!unitId || fetchedValueEvaluationUnits.indexOf(unitId) !== -1) {
         return;
       }
-      setFetching(true);
       const params = new URLSearchParams();
       params.append('config__end_device__station__unit', unitId);
       params.append('page', page);
@@ -34,25 +35,15 @@ const useValueEvaluations = (unitId) => {
           data: [],
         });
       }
-      setFetching(false);
     },
-    [unitId, setAction]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [unitId, fetchedValueEvaluationUnits]
   );
 
-  const fetchedValueEvaluationUnits = useSCContextSelector((state) => {
-    return state.fetchedValueEvaluationUnits || [];
-  });
-
   useEffect(() => {
-    if (!fetching && !(fetchedValueEvaluationUnits.indexOf(unitId) !== -1)) {
-      fetchConfigValueEvaluations();
-    }
-  }, [
-    unitId,
-    fetching,
-    fetchConfigValueEvaluations,
-    fetchedValueEvaluationUnits,
-  ]);
+    fetchConfigValueEvaluations();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [unitId]);
 };
 
 export default useValueEvaluations;

package/src/iot/RemoteControl/GoogleHome.js

@@ -127,12 +127,6 @@ export const googleHomeConnect = async (
   for (let i = 0; i < options.length; i++) {
     const option = options[i];
 
-    if (option.chip_id in oldConnections && !!oldConnections[option.chip_id]) {
-      connections[option.chip_id] = oldConnections[option.chip_id];
-      continue;
-    }
-    connections[option.chip_id] = 0; // connecting
-
     option.config_maps.forEach((configMap) => {
       if (option.text_maps) {
         textMaps[configMap.entity_id] = option.text_maps;
@@ -156,6 +150,12 @@ export const googleHomeConnect = async (
       }
     });
 
+    if (option.chip_id in oldConnections && !!oldConnections[option.chip_id]) {
+      connections[option.chip_id] = oldConnections[option.chip_id];
+      continue;
+    }
+    connections[option.chip_id] = 0; // connecting
+
     try {
       let auth = new Auth(option.auth);
       const connection = await createConnection({ auth });

package/src/navigations/Main.js

@@ -10,6 +10,7 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import { useNavigation } from '@react-navigation/native';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
+import { createStackNavigator } from '@react-navigation/stack';
 
 import Tabbar from '../commons/Tabbar';
 import { Colors, Constants, Images } from '../configs';
@@ -21,9 +22,15 @@ import TemplateStack from './TemplateStack';
 import DrawerContainer from '../screens/Drawer';
 import { TESTID } from '../configs/Constants';
 import Text from '../commons/Text';
+import { screenOptions } from './utils';
+import TemplateDetail from '../screens/Template/detail';
+import Information from '../screens/Template/Information';
+import GatewayList from '../screens/Template/GatewayList';
+import EditTemplate from '../screens/Template/EditTemplate';
 
 const Tab = createBottomTabNavigator();
 const Drawer = createDrawerNavigator();
+const Stack = createStackNavigator();
 
 const getWidth = () => {
   const Width = Constants.width - 12;
@@ -103,18 +110,35 @@ const MainDevMode = () => {
   );
 };
 
-const DevModeStack = () => {
+const DrawerScreen = () => {
   return (
     <Drawer.Navigator
       backBehavior="none"
       drawerContent={(props) => <DrawerContainer {...props} />}
       drawerStyle={{ paddingTop: getStatusBarHeight() }}
     >
-      <Drawer.Screen name={Routes.DrawerMain} component={MainDevMode} />
+      <Drawer.Screen name={Routes.MainDevMode} component={MainDevMode} />
     </Drawer.Navigator>
   );
 };
 
+const DevModeStack = () => {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        ...screenOptions,
+        headerShown: false,
+      }}
+    >
+      <Stack.Screen component={DrawerScreen} name={Routes.DrawerScreen} />
+      <Stack.Screen component={TemplateDetail} name={Routes.TemplateDetail} />
+      <Stack.Screen component={Information} name={Routes.Information} />
+      <Stack.Screen component={GatewayList} name={Routes.GatewayList} />
+      <Stack.Screen component={EditTemplate} name={Routes.EditTemplate} />
+    </Stack.Navigator>
+  );
+};
+
 export default DevModeStack;
 
 const styles = StyleSheet.create({

package/src/navigations/UnitStack.js

@@ -68,7 +68,7 @@ export const UnitStack = memo((props) => {
   const t = useTranslations();
   const { setAction } = useContext(SCContext);
   const { route } = props;
-  const { unitId, unitData } = route.params.params;
+  const { unitId, unitData, isSuccessfullyConnected } = route.params.params;
 
   useEffect(() => {
     const unsubscribe = NetInfo.addEventListener((state) => {
@@ -129,15 +129,12 @@ export const UnitStack = memo((props) => {
   }, []);
 
   useEffect(() => {
-    return () => {
-      const id = unitId || unitData?.id;
-      if (!id) {
-        return;
-      }
+    const id = unitId || unitData?.id;
+    if (id && isSuccessfullyConnected) {
       setAction(Action.NEED_UPDATE_VALUE_EVALUATIONS, id);
-    };
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [isSuccessfullyConnected]);
 
   return (
     <Stack.Navigator

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

@@ -3,6 +3,7 @@ import { TouchableWithoutFeedback, View } from 'react-native';
 import { Colors } from '../../../configs';
 import Text from '../../../commons/Text';
 import IconComponent from '../../../commons/IconComponent';
+import { TESTID } from '../../../configs/Constants';
 import styles from './DeviceStyles';
 
 const Device = memo(({ svgMain, sensor, title, isSelectDevice, onPress }) => {
@@ -13,7 +14,10 @@ const Device = memo(({ svgMain, sensor, title, isSelectDevice, onPress }) => {
   };
 
   return (
-    <TouchableWithoutFeedback onPress={onPressDevice}>
+    <TouchableWithoutFeedback
+      onPress={onPressDevice}
+      accessibilityLabel={`${TESTID.TOUCHABLE_ACTION_ADD_ITEM_FAVORITE}-${sensor.id}`}
+    >
       <View style={[styles.container, isActive]}>
         <View style={styles.boxIcon}>
           <IconComponent

package/src/screens/AddNewAction/SelectAction.js

@@ -10,7 +10,7 @@ import ActionTemplate from '../../commons/ActionTemplate';
 import NumberUpDownActionTemplate from '../../commons/OneTapTemplate/NumberUpDownActionTemplate';
 import OptionsDropdownActionTemplate from '../../commons/OneTapTemplate/OptionsDropdownActionTemplate';
 import StatesGridActionTemplate from '../../commons/OneTapTemplate/StatesGridActionTemplate';
-import { axiosGet, axiosPost } from '../../utils/Apis/axios';
+import { axiosGet, axiosPost, axiosPut } from '../../utils/Apis/axios';
 import { API, Images } from '../../configs';
 import {
   CONDITION_TYPES,
@@ -159,19 +159,35 @@ const SelectAction = memo(({ route }) => {
       await checkConditionToContinue();
     } else {
       if (automateId) {
-        let list_action = [...actions];
-        list_action = list_action.map((item) => ({
-          action: item.action,
-          data: item.data,
-        }));
-        const { success } = await axiosPost(
-          API.AUTOMATE.ADD_SCRIPT_ACTION(automateId),
-          {
-            list_action,
-            unit: unit.id,
-          }
-        );
-        success &&
+        let result = false;
+        if (isCreateNewAction) {
+          let list_action = [...actions];
+          list_action = list_action.map((item) => ({
+            action: item.action,
+            data: item.data,
+          }));
+          const { success } = await axiosPost(
+            API.AUTOMATE.ADD_SCRIPT_ACTION(automateId),
+            {
+              list_action,
+              unit: unit.id,
+            }
+          );
+          result = success;
+        } else {
+          const params = {
+            unit: isMultiUnits ? null : unit.id,
+            type: type,
+            name: scriptName,
+            action: actions[0].action,
+          };
+          const { success } = await axiosPut(
+            API.AUTOMATE.UPDATE_AUTOMATE(automateId),
+            params
+          );
+          result = success;
+        }
+        result &&
           navigate(Routes.ScriptDetail, {
             id: automateId,
             name: scriptName,
@@ -226,12 +242,15 @@ const SelectAction = memo(({ route }) => {
       case 'one_button_action_template':
       case 'three_button_action_template':
       case 'OnOffSimpleActionTemplate':
+      case 'curtain_action_template':
         index = newActions.findIndex((item) => {
           return (
             item.template === 'on_off_button_action_template' ||
             item.template === 'one_button_action_template' ||
             item.template === 'three_button_action_template' ||
-            item.template === 'OnOffSimpleActionTemplate'
+            item.template === 'OnOffSimpleActionTemplate' ||
+            item.template === 'curtain_action_template' ||
+            item.template === 'OnOffSmartLockActionTemplate'
           );
         });
         break;
@@ -423,6 +442,8 @@ const RenderActionItem = ({ data, onSelectAction }) => {
       case 'one_button_action_template':
       case 'three_button_action_template':
       case 'OnOffSimpleActionTemplate':
+      case 'curtain_action_template':
+      case 'OnOffSmartLockActionTemplate':
         actionTemplate.push(item);
         break;
       case 'OptionsDropdownActionTemplate':

package/src/screens/AddNewAction/__test__/SelectAction.test.js

@@ -44,6 +44,7 @@ describe('Test SelectAction', () => {
       stationName: 'stationName',
       automateId: 1,
       scriptName: 'scriptName test',
+      isCreateNewAction: true,
     },
   };
 

package/src/screens/AddNewAutoSmart/index.js

@@ -78,9 +78,11 @@ const AddNewAutoSmart = memo(({ route }) => {
       },
     ],
   };
+
   const [data] = useState(
     automate?.id ? typeAutoSmart[AUTOMATE_TYPE.AUTOMATE] : typeAutoSmart[type]
   );
+
   const [selectedIndex, setSelectedIndex] = useState(
     automate?.id ? data.findIndex((obj) => obj.type === type) : -1
   );

package/src/screens/AddNewGateway/PlugAndPlay/GatewayWifiList.js

@@ -4,6 +4,7 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useRef,
 } from 'react';
 import {
   View,
@@ -45,6 +46,7 @@ const GatewayWifiList = memo(({ route }) => {
   const [password, setPassword] = useState('');
   const [selectedWifi, setSelectedWifi] = useState('');
   const [isSendWifi, setIsSendWifi] = useState(false);
+  const isCheckSocketOnOneTime = useRef(true);
   const { setAction } = useContext(SCContext);
 
   const isConnectWifiGateway = useSCContextSelector(
@@ -106,18 +108,26 @@ const GatewayWifiList = memo(({ route }) => {
               }
             },
             () => {
-              ToastBottomHelper.error('Cannot get current SSID!');
+              ToastBottomHelper.error(t('can_not_login_to_current_ssid'));
             }
           );
         }, 3000);
       }
+      if (isCheckSocketOnOneTime.current && data.status === 'error') {
+        isCheckSocketOnOneTime.current = false;
+        setAction(Action.IS_CONNECT_WIFI_GATEWAY, false);
+        setIsShowPopupPassword(false);
+        ToastBottomHelper.error(t('confirm_password_not_match'));
+      }
     },
     [
       chip_id,
       devicePrefixName,
+      isCheckSocketOnOneTime,
       navigate,
       scan_sensor_data,
       setAction,
+      t,
       unit_id,
       unit_name,
       wifi_pass,
@@ -160,6 +170,7 @@ const GatewayWifiList = memo(({ route }) => {
         goBack();
       });
 
+      isCheckSocketOnOneTime.current = true;
       sendConnect(0);
       setAction(Action.IS_CONNECT_WIFI_GATEWAY, true);
       setIsSendWifi(true);
@@ -168,6 +179,7 @@ const GatewayWifiList = memo(({ route }) => {
     goBack,
     handleSocketOnMsg,
     isConnectWifiGateway,
+    isCheckSocketOnOneTime,
     sendConnect,
     setAction,
     socket,