@eohjsc/react-native-smart-city 0.7.7 → 0.7.9

package/assets/images/AddNewDevice/add-scan-device-icon.svg

@@ -0,0 +1,13 @@
+<svg width="34" height="32" viewBox="0 0 34 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.7581 18.3705H23.8992L23.5948 18.0505C24.6602 16.6994 25.3017 14.9453 25.3017 13.0372C25.3017 8.78239 22.1379 5.3335 18.2348 5.3335C14.3317 5.3335 11.168 8.78239 11.168 13.0372C11.168 17.292 14.3317 20.7409 18.2348 20.7409C19.9852 20.7409 21.5943 20.0416 22.8337 18.8802L23.1273 19.212V20.1483L28.5633 26.0624L30.1833 24.2965L24.7581 18.3705V18.3705ZM18.2348 18.3705C15.5277 18.3705 13.3424 15.9883 13.3424 13.0372C13.3424 10.0861 15.5277 7.70387 18.2348 7.70387C20.942 7.70387 23.1273 10.0861 23.1273 13.0372C23.1273 15.9883 20.942 18.3705 18.2348 18.3705Z" fill="#00979D"/>
+<path d="M22.0075 15.636C21.9871 15.7077 21.9626 15.7793 21.9422 15.8554C21.7544 16.4867 21.2359 16.8897 20.5867 16.9031C20.4561 16.9076 20.3213 16.9031 20.1703 16.9031C20.1703 17.0777 20.1703 17.2434 20.1703 17.409C20.1662 17.7135 19.9661 17.9463 19.7048 17.9418C19.4517 17.9374 19.2557 17.709 19.2517 17.4135C19.2517 17.2523 19.2517 17.0912 19.2517 16.9165C15.863 16.9165 12.4826 16.9165 9.08576 16.9165C9.08576 17.0777 9.08576 17.2479 9.08576 17.4135C9.08168 17.718 8.87754 17.9508 8.62033 17.9418C8.3672 17.9374 8.17123 17.709 8.16715 17.4135C8.16715 17.2523 8.16715 17.0912 8.16715 16.9165C7.94669 16.9031 7.73439 16.9031 7.52209 16.8762C6.86477 16.7957 6.33402 16.1554 6.32994 15.4256C6.32586 14.4182 6.32994 13.4108 6.32994 12.4034C6.32994 11.5125 6.91785 10.8588 7.7303 10.8409C8.01201 10.8364 8.28963 10.8409 8.57134 10.8409C12.5397 10.8409 16.5081 10.8409 20.4806 10.8409C21.2971 10.8409 21.7584 11.2214 21.9871 12.0811C21.9912 12.09 21.9993 12.099 22.0075 12.1035C22.0075 13.2855 22.0075 14.4585 22.0075 15.636ZM16.4958 13.872C16.4958 13.7153 16.4999 13.5586 16.4958 13.4019C16.4918 13.0885 16.2999 12.8735 16.0304 12.8735C15.7691 12.8735 15.5813 13.0885 15.5772 13.3929C15.5732 13.7108 15.5732 14.0332 15.5772 14.3511C15.5813 14.6555 15.7732 14.8704 16.0345 14.8704C16.2958 14.8704 16.4877 14.66 16.4958 14.36C16.4999 14.1943 16.4958 14.0332 16.4958 13.872ZM18.3331 13.8765C18.3331 13.7108 18.3371 13.5407 18.3331 13.375C18.3208 13.084 18.1289 12.878 17.8758 12.878C17.6227 12.878 17.4267 13.084 17.4185 13.3795C17.4104 13.7108 17.4104 14.0421 17.4185 14.369C17.4226 14.6645 17.6186 14.8704 17.8717 14.8749C18.133 14.8794 18.329 14.6689 18.3371 14.3645C18.3371 14.1988 18.3331 14.0376 18.3331 13.8765ZM19.2517 13.872C19.2517 14.0332 19.2476 14.1988 19.2517 14.36C19.2598 14.6555 19.4476 14.8659 19.7008 14.8704C19.9621 14.8749 20.1621 14.6689 20.1703 14.369C20.1784 14.0376 20.1784 13.7063 20.1703 13.3795C20.1662 13.084 19.9702 12.878 19.7171 12.878C19.4558 12.878 19.2639 13.0885 19.2557 13.3884C19.2476 13.5451 19.2517 13.7108 19.2517 13.872Z" fill="#00979D"/>
+<path d="M18.7097 4.85407C18.5423 4.85855 18.4239 4.75109 18.3137 4.63468C17.6441 3.92279 16.8725 3.38552 15.9743 3.10345C13.7738 2.40947 11.81 2.88406 10.0912 4.55857C9.97685 4.6705 9.8462 4.78691 9.70331 4.84064C9.5155 4.91227 9.30729 4.78243 9.21338 4.59439C9.1154 4.39291 9.14398 4.16457 9.29504 3.99443C9.71964 3.52879 10.1851 3.13479 10.6995 2.80795C11.9651 2.00203 13.3287 1.66624 14.7781 1.80951C16.4275 1.97069 17.8442 2.70497 19.0241 3.97652C19.1752 4.1377 19.216 4.33023 19.1425 4.54514C19.0731 4.73766 18.9057 4.85855 18.7097 4.85407Z" fill="#00979D"/>
+<path d="M17.878 5.68666C17.8698 5.98664 17.7841 6.14782 17.6044 6.23289C17.4166 6.32244 17.2533 6.27766 17.0941 6.13439C16.8205 5.89262 16.5592 5.62398 16.2612 5.43145C14.6649 4.3972 12.6848 4.65241 11.3293 6.04932C11.1987 6.18364 11.068 6.30005 10.8761 6.27319C10.6883 6.24632 10.5536 6.13887 10.4924 5.93739C10.427 5.73143 10.4719 5.55234 10.6108 5.40011C11.1374 4.82254 11.7457 4.37481 12.4561 4.11961C14.4158 3.41667 16.1714 3.81963 17.6902 5.36429C17.7841 5.46727 17.8371 5.6195 17.878 5.68666Z" fill="#00979D"/>
+<path d="M9.48217 9.84627C9.15555 9.84627 8.84527 9.85075 8.53907 9.8418C8.50232 9.8418 8.45333 9.75673 8.43292 9.703C7.94708 8.46279 7.46124 7.22258 6.9754 5.97789C6.78759 5.49882 6.59571 5.01527 6.41198 4.53173C6.29767 4.2407 6.39974 3.9452 6.6447 3.83327C6.88966 3.72134 7.1387 3.84222 7.25302 4.13325C7.9879 6.00028 8.71871 7.86731 9.44951 9.73434C9.45767 9.76568 9.46584 9.79702 9.48217 9.84627Z" fill="#00979D"/>
+<path d="M18.8477 9.85006C19.0191 9.40681 19.1824 8.99042 19.3457 8.57851C19.9214 7.10548 20.4971 5.63245 21.0727 4.1639C21.2075 3.82362 21.5137 3.69826 21.7668 3.87735C21.9668 4.02062 22.0322 4.27583 21.9301 4.53999C21.6035 5.37724 21.2769 6.2145 20.9502 7.04727C20.6073 7.9293 20.2603 8.81133 19.9173 9.69783C19.8724 9.80976 19.8234 9.85901 19.705 9.85454C19.4274 9.8411 19.1539 9.85006 18.8477 9.85006Z" fill="#00979D"/>
+<path d="M14.1693 5.83936C15.0389 5.86622 15.786 6.15724 16.4066 6.80645C16.5413 6.94525 16.6107 7.11091 16.5617 7.31686C16.5168 7.51386 16.4025 7.63923 16.2269 7.68848C16.0473 7.74221 15.9003 7.67057 15.7697 7.53625C15.0185 6.77511 13.9243 6.62288 13.0343 7.16911C12.871 7.26761 12.7199 7.40193 12.5811 7.53625C12.3484 7.75564 12.0748 7.76907 11.887 7.54968C11.6992 7.33029 11.7237 7.03032 11.9524 6.79302C12.577 6.13933 13.3364 5.85726 14.1693 5.83936Z" fill="#00979D"/>
+<path d="M15.2989 8.60949C15.2703 8.82887 15.1886 8.9811 15.0253 9.07065C14.8539 9.16467 14.6783 9.14676 14.5232 9.01692C14.2292 8.77515 14.0986 8.77515 13.8087 9.01692C13.6127 9.18258 13.3351 9.15571 13.1759 8.95871C13.0207 8.76619 13.0248 8.47069 13.1881 8.27369C13.6821 7.67821 14.662 7.67821 15.1437 8.27817C15.2172 8.36771 15.2499 8.49755 15.2989 8.60949Z" fill="#00979D"/>
+<path d="M16.4959 13.8705C16.4959 14.0317 16.5 14.1973 16.4959 14.3585C16.4877 14.663 16.2958 14.8734 16.0345 14.8689C15.7732 14.8689 15.5814 14.654 15.5773 14.3496C15.5732 14.0317 15.5732 13.7093 15.5773 13.3914C15.5814 13.087 15.7733 12.8721 16.0305 12.8721C16.2999 12.8721 16.4877 13.0825 16.4959 13.4004C16.5 13.5571 16.4959 13.7138 16.4959 13.8705Z" fill="white"/>
+<path d="M18.3315 13.8764C18.3315 14.0375 18.3356 14.2032 18.3315 14.3644C18.3234 14.6644 18.1274 14.8748 17.8661 14.8748C17.613 14.8703 17.4211 14.6599 17.4129 14.3689C17.4088 14.0375 17.4048 13.7062 17.4129 13.3794C17.4211 13.0884 17.6171 12.8779 17.8702 12.8779C18.1274 12.8779 18.3193 13.0839 18.3274 13.3749C18.3356 13.5361 18.3315 13.7062 18.3315 13.8764Z" fill="white"/>
+<path d="M19.2521 13.8706C19.2521 13.7094 19.248 13.5437 19.2521 13.3826C19.2603 13.0826 19.4522 12.8677 19.7135 12.8721C19.9666 12.8721 20.1626 13.0826 20.1667 13.3736C20.1748 13.7049 20.1748 14.0362 20.1667 14.3631C20.1585 14.6631 19.9584 14.8735 19.6971 14.8645C19.444 14.8601 19.2562 14.6496 19.248 14.3541C19.248 14.1929 19.2521 14.0318 19.2521 13.8706Z" fill="white"/>
+</svg>

package/assets/images/Email.svg

@@ -0,0 +1,9 @@
+<svg width="34" height="28" viewBox="0 0 34 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.3334 0.666656H3.66671C1.83337 0.666656 0.350041 2.16666 0.350041 3.99999L0.333374 24C0.333374 25.8333 1.83337 27.3333 3.66671 27.3333H30.3334C32.1667 27.3333 33.6667 25.8333 33.6667 24V3.99999C33.6667 2.16666 32.1667 0.666656 30.3334 0.666656ZM30.3334 7.33332L17 15.6667L3.66671 7.33332V3.99999L17 12.3333L30.3334 3.99999V7.33332Z" fill="url(#paint0_linear_3319_1483)"/>
+<defs>
+<linearGradient id="paint0_linear_3319_1483" x1="0.333374" y1="0.666656" x2="26.3145" y2="33.1791" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2B6B9F"/>
+<stop offset="1" stop-color="#D5FFCB"/>
+</linearGradient>
+</defs>
+</svg>

package/assets/images/lan.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 20V13H3V9H8V7H5V0H13V7H10V9H15V13H18V20H10V13H13V11H5V13H8V20H0ZM7 5H11V2H7V5ZM2 18H6V15H2V18ZM12 18H16V15H12V18Z" fill="#1C1B1F"/>
+</svg>

package/assets/images/wifi-open.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 19.0245L24 3.80586C14 -3.04253 3.83333 0.95236 0 3.80586L12 19.0245Z" fill="#262626"/>
+</svg>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.7.7",
+  "version": "0.7.9",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -118,8 +118,8 @@
     "lint-staged": "^12.4.1",
     "lodash": "^4.17.19",
     "lottie-react-native": "^6.7.2",
-    "metro-react-native-babel-preset": "0.73.9",
     "md5": "^2.3.0",
+    "metro-react-native-babel-preset": "0.73.9",
     "moment": "^2.27.0",
     "moment-timezone": "^0.5.32",
     "node-html-parser": "^2.0.2",
@@ -155,7 +155,7 @@
     "react-native-geocoder": "^0.5.0",
     "react-native-gesture-handler": "^2.17.1",
     "react-native-get-location": "^2.0.0",
-    "react-native-image-crop-picker": "^0.37.2",
+    "react-native-image-crop-picker": "^0.41.4",
     "react-native-image-resizer": "^1.4.5",
     "react-native-input-credit-card": "^0.5.5",
     "react-native-iphone-x-helper": "^1.2.1",
@@ -188,6 +188,7 @@
     "react-native-wheel-color-picker": "^1.2.0",
     "react-native-wheel-scrollview-picker": "^1.2.2",
     "react-native-wifi-reborn": "4.5.0",
+    "react-native-zeroconf": "^0.13.8",
     "react-test-renderer": "18.3.1",
     "string-format": "^2.0.0",
     "sync-directory": "^5.1.7",

package/src/commons/ActionGroup/StatesGridActionTemplate.js

@@ -38,11 +38,15 @@ const GridItem = ({ item, doAction, sensor }) => {
 
   const doActionAndWatchConfig = useCallback(
     (actionData) => {
-      let data = null;
+      let data = { value: is_on_value };
       if (allow_config_store_value && config) {
-        data = JSON.stringify({ config_id: config, config_value: is_on_value });
+        data = {
+          config_id: config,
+          config_value: is_on_value,
+          value: is_on_value,
+        };
       }
-      doAction(actionData, data);
+      doAction(actionData, JSON.stringify(data));
       if (sensor?.is_managed_by_backend) {
         if (config && sensor.device_type === DEVICE_TYPE.LG_THINQ) {
           watchMultiConfigs([config]);

package/src/commons/ActionGroup/__test__/StatesGridActionTemplate.test.js

@@ -25,6 +25,7 @@ describe('Test StatesGridActionTemplate', () => {
             icon_kit_data: 'icon_kit_data',
             icon: '123',
             action_data: mockActionData,
+            is_on_value: 1,
           },
           {
             config: 2,
@@ -33,9 +34,9 @@ describe('Test StatesGridActionTemplate', () => {
             icon_kit_data: 'icon_kit_data',
             icon: 'icon',
             action_data: mockActionData,
+            is_on_value: 0,
           },
         ],
-        is_on_value: true,
       },
       title: 'Title',
     };
@@ -74,7 +75,10 @@ describe('Test StatesGridActionTemplate', () => {
     await act(async () => {
       await touchableOpacities[0].props.onPress();
     });
-    expect(mockDoAction).toHaveBeenCalledWith(mockActionData, null);
+    expect(mockDoAction).toHaveBeenCalledWith(
+      mockActionData,
+      JSON.stringify({ value: 1 })
+    );
   });
 
   it('test trigger special action', async () => {
@@ -98,7 +102,7 @@ describe('Test StatesGridActionTemplate', () => {
     });
     expect(mockDoAction).toHaveBeenCalledWith(
       mockActionData,
-      JSON.stringify({ config_id: 1, config_value: undefined })
+      JSON.stringify({ config_id: 1, config_value: 1, value: 1 })
     );
   });
 });

package/src/commons/AlertAction/index.js

@@ -109,6 +109,7 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     backgroundColor: Colors.White,
     borderRadius: 10,
+    /* istanbul ignore next */
     marginBottom: Device.isIphoneX ? 20 : 0,
   },
   modalHeader: {

package/src/commons/Auth/AccountItem.js

@@ -1,13 +1,19 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { View, StyleSheet, Text } from 'react-native';
 
 import { Colors } from '../../configs';
 import { shortEmailName } from '../../utils/Utils';
 import Avatar from '../../../assets/images/avatar.svg';
 import AccessibilityLabel from '../../configs/AccessibilityLabel';
+import { IconOutline } from '@ant-design/icons-react-native';
 
-const AccountItem = ({ account }) => {
+const AccountItem = ({ account, setUsers }) => {
   const { name, email, phone_number } = account;
+
+  const handleRemoveUserItem = useCallback(() => {
+    setUsers((prevUsers) => prevUsers.filter((el) => el.id !== account.id));
+  }, [account.id, setUsers]);
+
   return (
     <View style={styles.container}>
       <View styles={styles.wrap}>
@@ -30,15 +36,23 @@ const AccountItem = ({ account }) => {
           </Text>
         )}
       </View>
+
+      <IconOutline
+        name={'close'}
+        color={Colors.Gray8}
+        size={22}
+        onPress={handleRemoveUserItem}
+      />
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    marginBottom: 10,
+    marginBottom: 15,
     flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'space-between',
   },
   wrap: {
     flex: 1,

package/src/commons/Auth/AccountList.js

@@ -3,18 +3,14 @@ import { ScrollView } from 'react-native';
 
 import AccountItem from './AccountItem';
 
-const AccountList = ({ accounts }) => {
+const AccountList = ({ accounts, setUsers }) => {
   return (
     <ScrollView scrollIndicatorInsets={{ right: 1 }}>
-      {accounts.map((account) => (
-        <AccountItem key={account.id} account={account} />
+      {accounts.map((account, index) => (
+        <AccountItem key={account.id} account={account} setUsers={setUsers} />
       ))}
     </ScrollView>
   );
 };
 
-AccountList.defaultPropTypes = {
-  accounts: [],
-};
-
 export default AccountList;

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

@@ -0,0 +1,373 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { TouchableOpacity, ActivityIndicator } from 'react-native';
+
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+import { ToastBottomHelper } from '../../../utils/Utils';
+import { getTranslate } from '../../../utils/I18n';
+import { FullLoading } from '../../../commons';
+import _TextInput from '../../Form/TextInput';
+import _TextInputPassword from '../../Form/TextInputPassword';
+
+import ConnectWifi from '../index';
+
+const wrapComponent = ({ props }) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ConnectWifi {...props} />
+  </SCProvider>
+);
+
+describe('Test ConnectWifi', () => {
+  let tree;
+
+  const spyToastError = jest.spyOn(ToastBottomHelper, 'error');
+
+  const props = {
+    title: 'Connect to WiFi',
+    wifiList: [
+      { ssid: 'HomeWiFi', encryption: 'WPA2/PSK' },
+      { ssid: 'OpenWiFi', encryption: 'OPEN' },
+    ],
+    onConnect: jest.fn(),
+    onGoBack: jest.fn(),
+    isShowLoading: false,
+    setIsShowLoading: jest.fn(),
+  };
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('test shows ActivityIndicator when wifiList is empty', async () => {
+    const emptyProps = { ...props, wifiList: [] };
+    await act(async () => {
+      tree = await renderer.create(wrapComponent({ props: emptyProps }));
+    });
+    const instance = tree.root;
+    const activityIndicator = instance.findByType(ActivityIndicator);
+    expect(activityIndicator).toBeTruthy();
+  });
+
+  it('test handles selecting an open WiFi network', async () => {
+    await act(async () => {
+      tree = await renderer.create(wrapComponent({ props }));
+    });
+
+    const instance = tree.root;
+    const openWifiItem = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+          `${AccessibilityLabel.SELECT_WIFI}-OpenWiFi` &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      openWifiItem.props.onPress();
+    });
+
+    const buttonPopup = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.GATEWAY_WIFI_LIST.BUTTON_POPUP
+    );
+    expect(buttonPopup.props.visible).toBeTruthy();
+    expect(buttonPopup.props.mainTitle).toBe(getTranslate('en', 'connect'));
+    expect(buttonPopup.props.children[0].props.children).toBe(
+      `${getTranslate('en', 'connect_to_wifi')} 'OpenWiFi'`
+    );
+
+    const textInput = instance.findAllByType(_TextInput);
+    expect(textInput).toHaveLength(0);
+    const textInputPassword = instance.findAllByType(_TextInputPassword);
+    expect(textInputPassword).toHaveLength(0);
+
+    await act(async () => {
+      buttonPopup.props.onPressMain();
+    });
+
+    expect(props.onConnect).toHaveBeenCalledWith({
+      wifiSsid: 'OpenWiFi',
+      wifiPassword: '',
+    });
+    expect(props.setIsShowLoading).toHaveBeenCalledWith(true);
+    expect(buttonPopup.props.visible).toBeFalsy();
+  });
+
+  it('test handles selecting a secured WiFi network', async () => {
+    await act(async () => {
+      tree = await renderer.create(wrapComponent({ props }));
+    });
+
+    const instance = tree.root;
+    const securedWifiItem = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+          `${AccessibilityLabel.SELECT_WIFI}-HomeWiFi` &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      securedWifiItem.props.onPress();
+    });
+
+    const buttonPopup = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.GATEWAY_WIFI_LIST.BUTTON_POPUP
+    );
+    expect(buttonPopup.props.visible).toBeTruthy();
+    expect(buttonPopup.props.children[0].props.children).toBe(
+      `${getTranslate('en', 'enter_wifi_password')} 'HomeWiFi'`
+    );
+
+    const textInput = instance.findAllByType(_TextInput);
+    expect(textInput).toHaveLength(0);
+    const textInputPassword = instance.findByType(_TextInputPassword);
+    expect(textInputPassword.props.placeholder).toBe(
+      getTranslate('en', 'password')
+    );
+    expect(textInputPassword.props.autoFocus).toBeTruthy();
+    expect(textInputPassword.props.value).toBe('');
+
+    // Empty password
+    await act(async () => {
+      buttonPopup.props.onPressMain();
+    });
+    expect(spyToastError).toHaveBeenCalledWith(
+      getTranslate('en', 'please_enter_wifi_password')
+    );
+    expect(props.onConnect).not.toHaveBeenCalled();
+
+    // Short password
+    await act(async () => {
+      textInputPassword.props.onChange('123');
+    });
+    expect(textInputPassword.props.value).toBe('123');
+    await act(async () => {
+      buttonPopup.props.onPressMain();
+    });
+    expect(spyToastError).toHaveBeenCalledWith(
+      getTranslate('en', 'password_must_be_at_least_8_characters')
+    );
+    expect(props.onConnect).not.toHaveBeenCalled();
+
+    await act(async () => {
+      textInputPassword.props.onChange('NewPassword123');
+    });
+    await act(async () => {
+      buttonPopup.props.onPressMain();
+    });
+    expect(props.onConnect).toHaveBeenCalledWith({
+      wifiSsid: 'HomeWiFi',
+      wifiPassword: 'NewPassword123',
+    });
+    expect(props.setIsShowLoading).toHaveBeenCalledWith(true);
+    expect(buttonPopup.props.visible).toBeFalsy();
+  });
+
+  it('test handles selecting the "Other" WiFi option and connect OPEN Wi-Fi', async () => {
+    await act(async () => {
+      tree = await renderer.create(wrapComponent({ props }));
+    });
+
+    const instance = tree.root;
+    const otherWifiItem = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+          `${AccessibilityLabel.SELECT_WIFI}-other` &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      otherWifiItem.props.onPress();
+    });
+
+    const buttonPopup = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.GATEWAY_WIFI_LIST.BUTTON_POPUP
+    );
+    expect(buttonPopup.props.visible).toBeTruthy();
+    expect(buttonPopup.props.children[0].props.children).toBe(
+      getTranslate('en', 'enter_wifi_name_password')
+    );
+
+    const textInput = instance.findByType(_TextInput);
+    expect(textInput.props.placeholder).toBe(getTranslate('en', 'wifi_name'));
+    expect(textInput.props.autoFocus).toBeTruthy();
+    expect(textInput.props.value).toBe('');
+    const textInputPassword = instance.findByType(_TextInputPassword);
+    expect(textInputPassword.props.placeholder).toBe(
+      getTranslate('en', 'password')
+    );
+    expect(textInputPassword.props.autoFocus).toBeFalsy();
+    expect(textInputPassword.props.value).toBe('');
+
+    // Empty name
+    await act(async () => {
+      buttonPopup.props.onPressMain();
+    });
+    expect(spyToastError).toHaveBeenCalledWith(
+      getTranslate('en', 'please_enter_wifi_name')
+    );
+    expect(props.onConnect).not.toHaveBeenCalled();
+
+    await act(async () => {
+      textInput.props.onChange('OpenWiFi');
+    });
+    expect(textInput.props.value).toBe('OpenWiFi');
+    await act(async () => {
+      buttonPopup.props.onPressMain();
+    });
+    expect(props.onConnect).toHaveBeenCalledWith({
+      wifiSsid: 'OpenWiFi',
+      wifiPassword: '',
+    });
+    expect(props.setIsShowLoading).toHaveBeenCalledWith(true);
+    expect(buttonPopup.props.visible).toBeFalsy();
+  });
+
+  it('test handles selecting the "Other" WiFi option and connect Secured Wi-Fi', async () => {
+    await act(async () => {
+      tree = await renderer.create(wrapComponent({ props }));
+    });
+
+    const instance = tree.root;
+    const otherWifiItem = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+          `${AccessibilityLabel.SELECT_WIFI}-other` &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      otherWifiItem.props.onPress();
+    });
+
+    const buttonPopup = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.GATEWAY_WIFI_LIST.BUTTON_POPUP
+    );
+    expect(buttonPopup.props.visible).toBeTruthy();
+    expect(buttonPopup.props.children[0].props.children).toBe(
+      getTranslate('en', 'enter_wifi_name_password')
+    );
+
+    const textInput = instance.findByType(_TextInput);
+    expect(textInput.props.placeholder).toBe(getTranslate('en', 'wifi_name'));
+    expect(textInput.props.autoFocus).toBeTruthy();
+    expect(textInput.props.value).toBe('');
+    const textInputPassword = instance.findByType(_TextInputPassword);
+    expect(textInputPassword.props.placeholder).toBe(
+      getTranslate('en', 'password')
+    );
+    expect(textInputPassword.props.autoFocus).toBeFalsy();
+    expect(textInputPassword.props.value).toBe('');
+
+    // Empty name
+    await act(async () => {
+      buttonPopup.props.onPressMain();
+    });
+    expect(spyToastError).toHaveBeenCalledWith(
+      getTranslate('en', 'please_enter_wifi_name')
+    );
+    expect(props.onConnect).not.toHaveBeenCalled();
+
+    await act(async () => {
+      textInput.props.onChange('SecuredWiFi');
+    });
+    expect(textInput.props.value).toBe('SecuredWiFi');
+    // Short password
+    await act(async () => {
+      textInputPassword.props.onChange('123');
+    });
+    expect(textInputPassword.props.value).toBe('123');
+    await act(async () => {
+      buttonPopup.props.onPressMain();
+    });
+    expect(spyToastError).toHaveBeenCalledWith(
+      getTranslate('en', 'password_must_be_at_least_8_characters')
+    );
+    expect(props.onConnect).not.toHaveBeenCalled();
+
+    await act(async () => {
+      textInputPassword.props.onChange('NewPassword123');
+    });
+    await act(async () => {
+      buttonPopup.props.onPressMain();
+    });
+    expect(props.onConnect).toHaveBeenCalledWith({
+      wifiSsid: 'SecuredWiFi',
+      wifiPassword: 'NewPassword123',
+    });
+    expect(props.setIsShowLoading).toHaveBeenCalledWith(true);
+    expect(buttonPopup.props.visible).toBeFalsy();
+  });
+
+  it('test handles cancelling the password popup', async () => {
+    await act(async () => {
+      tree = await renderer.create(wrapComponent({ props }));
+    });
+
+    const instance = tree.root;
+    const securedWifiItem = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+          `${AccessibilityLabel.SELECT_WIFI}-HomeWiFi` &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      securedWifiItem.props.onPress();
+    });
+
+    const buttonPopup = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.GATEWAY_WIFI_LIST.BUTTON_POPUP
+    );
+    await act(async () => {
+      buttonPopup.props.onPressSecondary();
+    });
+    expect(buttonPopup.props.visible).toBeFalsy();
+  });
+
+  it('test handles with onConnect is not provided', async () => {
+    const emptyOnConnectProps = { ...props, onConnect: undefined };
+    await act(async () => {
+      tree = await renderer.create(
+        wrapComponent({ props: emptyOnConnectProps })
+      );
+    });
+
+    const instance = tree.root;
+    const securedWifiItem = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+          `${AccessibilityLabel.SELECT_WIFI}-HomeWiFi` &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      securedWifiItem.props.onPress();
+    });
+
+    const buttonPopup = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.GATEWAY_WIFI_LIST.BUTTON_POPUP
+    );
+    await act(async () => {
+      buttonPopup.props.onPressMain();
+    });
+    expect(spyToastError).not.toHaveBeenCalled();
+  });
+
+  it('test handles with isShowLoading is true', async () => {
+    const loadingProps = { ...props, isShowLoading: true };
+    await act(async () => {
+      tree = await renderer.create(wrapComponent({ props: loadingProps }));
+    });
+
+    const instance = tree.root;
+    const fullLoading = instance.findByType(FullLoading);
+    expect(fullLoading).toBeTruthy();
+  });
+});