@eohjsc/react-native-smart-city 0.3.34 → 0.3.37

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

@@ -0,0 +1,51 @@
+import React, { useCallback } from 'react';
+import { View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import Text from '../../../commons/Text';
+import { HeaderCustom } from '../../../commons/Header';
+import { ViewButtonBottom } from '../../../commons';
+import TurnOnIcon from '../../../../assets/images/AddNewDevice/on-icon.svg';
+import Routes from '../../../utils/Route';
+import { Colors } from '../../../configs';
+import styles from './ConnectRouterGuideStyles';
+
+const ZigbeeDeviceConnectGuide = ({ route }) => {
+  const t = useTranslations();
+  const { navigate, goBack } = useNavigation();
+
+  const onRight = useCallback(() => {
+    navigate(Routes.ConnectingZigbeeDevice, {
+      ...route?.params,
+    });
+  }, [navigate, route]);
+
+  return (
+    <View style={styles.container}>
+      <HeaderCustom title={t('turn_on_zigbee_device')} isShowSeparator />
+      <View style={styles.contentContainer}>
+        <View style={styles.guideContent}>
+          <TurnOnIcon />
+          <Text type="H4" semibold style={styles.txtContent}>
+            {t('turn_on_device_to_connect')}
+          </Text>
+          <Text style={styles.txtContent}>
+            {t('turn_on_zigbee_device_content')}
+          </Text>
+          <Text semibold color={Colors.Gray7} style={styles.txtContent}>
+            {t('read_device_manual_guide')}
+          </Text>
+        </View>
+        <ViewButtonBottom
+          leftTitle={t('cancel')}
+          onLeftClick={goBack}
+          rightTitle={t('text_next')}
+          onRightClick={onRight}
+          styleButtonLeftText={styles.buttonLeftText}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default ZigbeeDeviceConnectGuide;

package/src/screens/AddNewGateway/PlugAndPlay/__test__/FirstWarning.test.js

@@ -35,7 +35,7 @@ describe('Test FirstWarning', () => {
     mockedNavigate.mockClear();
   });
 
-  test('create', async () => {
+  it('create', async () => {
     await act(async () => {
       tree = await create(wrapComponent({ params: {} }));
     });
@@ -56,23 +56,23 @@ describe('Test FirstWarning', () => {
     });
     const instance = tree.root;
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
-    act(() => {
+    await act(async () => {
       viewButtonBottom.props.onRightClick();
     });
     expect(mockedNavigate).toHaveBeenCalled();
   };
 
-  test('test ViewButtonBottom onRightClick from dashboard', async () => {
+  it('test ViewButtonBottom onRightClick from dashboard', async () => {
     await rightClick({});
     expect(mockedNavigate.mock.calls[0][0]).toEqual(Routes.SelectDeviceUnit);
   });
 
-  test('test ViewButtonBottom onRightClick from unit', async () => {
+  it('test ViewButtonBottom onRightClick from unit', async () => {
     await rightClick({ unitId: 1 });
     expect(mockedNavigate.mock.calls[0][0]).toEqual(Routes.SelectDeviceType);
   });
 
-  test('test ViewButtonBottom onRightClick from sub-unit', async () => {
+  it('test ViewButtonBottom onRightClick from sub-unit', async () => {
     await rightClick({ unitId: 1, stationId: 1 });
     expect(mockedNavigate.mock.calls[0][0]).toEqual(Routes.SelectDeviceType);
   });

package/src/screens/AddNewGateway/ScanGatewayQR.js

@@ -1,16 +1,13 @@
 import React, { memo, useCallback, useState } from 'react';
 import { View, StyleSheet } from 'react-native';
-import QRScan from '../ScanChipQR/components/QRScan';
-import Routes from '../../utils/Route';
-import { useTranslations } from '../../hooks/Common/useTranslations';
 import { useNavigation } from '@react-navigation/native';
-import BottomSheet from '../../commons/BottomSheet';
-import Text from '../../commons/Text';
-import { ViewButtonBottom } from '../../commons';
+
+import Routes from '../../utils/Route';
+import QRScan from '../ScanChipQR/components/QRScan';
+import InvalidQRCode from '../ScanChipQR/components/InvalidQRCode';
 
 const ScanGatewayQR = memo(({ route }) => {
   // same as Scan Wifi Device, not sure if we should separated it
-  const t = useTranslations();
   const { unitId, stationId } = route?.params || {};
   const [isInvalidQrCode, setIsInvalidQrCode] = useState(false);
   const { navigate, goBack } = useNavigation();
@@ -35,13 +32,13 @@ const ScanGatewayQR = memo(({ route }) => {
       }
       navigate(Routes.ConnectingWifiGuide, {
         unitId,
-        stationId,
+        stationId: stationId,
         prefix: devicePrefixName,
         qrData: data,
       });
       setLoading(true);
     },
-    [navigate, unitId, stationId]
+    [navigate, stationId, unitId]
   );
 
   const onRetry = useCallback(() => {
@@ -53,17 +50,11 @@ const ScanGatewayQR = memo(({ route }) => {
   return (
     <View style={styles.container}>
       <QRScan onScan={onScan} />
-      <BottomSheet isVisible={isInvalidQrCode} title={t('invalid_qr_code')}>
-        <Text style={styles.warningContainer}>
-          {t('invalid_qr_code_warning')}
-        </Text>
-        <ViewButtonBottom
-          leftTitle={t('cancel')}
-          onLeftClick={goBack}
-          rightTitle={t('retry')}
-          onRightClick={onRetry}
-        />
-      </BottomSheet>
+      <InvalidQRCode
+        isInvalidQrCode={isInvalidQrCode}
+        goBack={goBack}
+        onRetry={onRetry}
+      />
     </View>
   );
 });
@@ -72,9 +63,6 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
-  warningContainer: {
-    paddingHorizontal: 16,
-  },
 });
 
 export default ScanGatewayQR;

package/src/screens/AddNewGateway/ScanModbusQR.js

@@ -1,15 +1,23 @@
-import React, { memo, useCallback } from 'react';
+import React, { memo, useCallback, useEffect, useState } from 'react';
 import { View, StyleSheet } from 'react-native';
-import QRScan from '../ScanChipQR/components/QRScan';
+import { useNavigation } from '@react-navigation/native';
+
 import Routes from '../../utils/Route';
-import { ToastBottomHelper } from '../../utils/Utils';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import { useNavigation } from '@react-navigation/native';
+import { ModalCustom } from '../../commons/Modal';
+import { ViewButtonBottom } from '../../commons';
+import useBoolean from '../../hooks/Common/useBoolean';
+import Text from '../../commons/Text';
+import QRScan from '../ScanChipQR/components/QRScan';
+import InvalidQRCode from '../ScanChipQR/components/InvalidQRCode';
+import { Colors } from '../../configs';
 
 const ScanModbusQR = memo(({ route }) => {
   const t = useTranslations();
   const { unitId, stationId, chipId } = route?.params || {};
-  const navigation = useNavigation();
+  const { navigate, goBack } = useNavigation();
+  const [showPopupGuide, setShowPopupGuide, setHidePopupGuide] = useBoolean();
+  const [isInvalidQrCode, setIsInvalidQrCode] = useState(false);
 
   const onScan = useCallback(
     (body, setLoading) => {
@@ -17,29 +25,66 @@ const ScanModbusQR = memo(({ route }) => {
       try {
         data = JSON.parse(body);
       } catch (e) {
-        ToastBottomHelper.error(t('wrong_qr_format'));
+        setIsInvalidQrCode(true);
         setLoading(false);
         return;
       }
       const devicePrefixName = data?.imei?.split('-')[0]; // todo Bang change QR format
       if (devicePrefixName !== 'SENSOR') {
-        ToastBottomHelper.error(t('wrong_qr_format'));
+        setIsInvalidQrCode(true);
         setLoading(false);
         return;
       }
-      navigation.navigate(Routes.ConnectingModbusDevice, {
+      navigate(Routes.ConnectingModbusDevice, {
         unitId,
-        stationId,
+        stationId: stationId,
         chipId,
         qrData: data,
       });
     },
-    [navigation, unitId, stationId, chipId, t]
+    [navigate, unitId, stationId, chipId]
   );
 
+  const onRetry = useCallback(() => {
+    if (isInvalidQrCode) {
+      setIsInvalidQrCode(false);
+    }
+  }, [isInvalidQrCode]);
+
+  useEffect(() => {
+    setShowPopupGuide();
+  }, [setShowPopupGuide]);
+
   return (
     <View style={styles.container}>
-      <QRScan onScan={onScan} />
+      <QRScan isScanReady={!showPopupGuide} onScan={onScan} />
+      <ModalCustom
+        onBackButtonPress={goBack}
+        isVisible={showPopupGuide}
+        style={styles.modal}
+      >
+        <View style={styles.modalWrapper}>
+          <View style={styles.modalContent}>
+            <Text type="H4" semibold style={styles.txtCenter}>
+              {t('turn_off_device')}
+            </Text>
+            <Text style={styles.txtCenter}>
+              {t('turn_off_device_when_scan_qr_guide')}
+            </Text>
+          </View>
+          <ViewButtonBottom
+            leftTitle={t('cancel')}
+            onLeftClick={goBack}
+            rightTitle={t('ok')}
+            onRightClick={setHidePopupGuide}
+          />
+        </View>
+      </ModalCustom>
+      <InvalidQRCode
+        isInvalidQrCode={isInvalidQrCode}
+        goBack={goBack}
+        onRetry={onRetry}
+      />
     </View>
   );
 });
@@ -48,6 +93,25 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  modal: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalWrapper: {
+    backgroundColor: Colors.White,
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 280,
+  },
+  modalContent: {
+    paddingHorizontal: 16,
+    paddingTop: 16,
+  },
+  txtCenter: {
+    textAlign: 'center',
+  },
 });
 
 export default ScanModbusQR;

package/src/screens/AddNewGateway/ScanWifiDeviceQR.js

@@ -1,15 +1,14 @@
-import React, { memo, useCallback } from 'react';
+import React, { memo, useCallback, useState } from 'react';
 import { View, StyleSheet } from 'react-native';
 import QRScan from '../ScanChipQR/components/QRScan';
 import Routes from '../../utils/Route';
-import { ToastBottomHelper } from '../../utils/Utils';
-import { useTranslations } from '../../hooks/Common/useTranslations';
 import { useNavigation } from '@react-navigation/native';
+import InvalidQRCode from '../ScanChipQR/components/InvalidQRCode';
 
 const ScanWifiDeviceQR = memo(({ route }) => {
-  const t = useTranslations();
   const { unitId, stationId } = route?.params || {};
-  const navigation = useNavigation();
+  const [isInvalidQrCode, setIsInvalidQrCode] = useState(false);
+  const { navigate, goBack } = useNavigation();
 
   const onScan = useCallback(
     (body, setLoading) => {
@@ -17,18 +16,18 @@ const ScanWifiDeviceQR = memo(({ route }) => {
       try {
         data = JSON.parse(body);
       } catch (e) {
-        ToastBottomHelper.error(t('wrong_qr_format'));
+        setIsInvalidQrCode(true);
         setLoading(false);
         return;
       }
       const devicePrefixName = data?.imei?.split('-')[0];
       // todo Bang change QR format
       if (['ROBOT'].indexOf(devicePrefixName) === -1) {
-        ToastBottomHelper.error(t('wrong_qr_format'));
+        setIsInvalidQrCode(true);
         setLoading(false);
         return;
       }
-      navigation.navigate(Routes.ShareWifiPassword, {
+      navigate(Routes.ConnectingWifiGuide, {
         unitId,
         stationId,
         prefix: devicePrefixName,
@@ -36,12 +35,23 @@ const ScanWifiDeviceQR = memo(({ route }) => {
       });
       setLoading(true);
     },
-    [navigation, unitId, stationId, t]
+    [navigate, unitId, stationId]
   );
 
+  const onRetry = useCallback(() => {
+    if (isInvalidQrCode) {
+      setIsInvalidQrCode(false);
+    }
+  }, [isInvalidQrCode]);
+
   return (
     <View style={styles.container}>
       <QRScan onScan={onScan} />
+      <InvalidQRCode
+        isInvalidQrCode={isInvalidQrCode}
+        goBack={goBack}
+        onRetry={onRetry}
+      />
     </View>
   );
 });

package/src/screens/AddNewGateway/SelectDeviceSubUnit.js

@@ -4,20 +4,39 @@ import { useCallback } from 'react';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { useNavigation } from '@react-navigation/native';
 import Routes from '../../utils/Route';
+import { DEVICE_TYPE } from '../../configs/Constants';
 
 const SelectDeviceSubUnit = ({ route }) => {
-  const { unitId, unitName } = route?.params || {};
+  const { unitId, unitName, deviceType } = route?.params || {};
   const t = useTranslations();
   const navigation = useNavigation();
   const onPressNext = useCallback(
     (unit, subUnit) => {
-      navigation.navigate(Routes.SelectDeviceType, {
-        unitId,
-        unitName,
-        stationId: subUnit?.id,
-      });
+      switch (deviceType) {
+        case DEVICE_TYPE.WIFI_DEVICE:
+          navigation.navigate(Routes.ScanWifiDeviceQR, {
+            unitId,
+            unitName,
+            stationId: subUnit?.id,
+          });
+          break;
+        case DEVICE_TYPE.MODBUS:
+          navigation.navigate(Routes.SelectModbusGateway, {
+            unitId,
+            unitName,
+            stationId: subUnit?.id,
+          });
+          break;
+        case DEVICE_TYPE.ZIGBEE:
+          navigation.navigate(Routes.ConnectRouterGuide, {
+            unitId,
+            unitName,
+            stationId: subUnit?.id,
+          });
+          break;
+      }
     },
-    [navigation, unitId, unitName]
+    [deviceType, navigation, unitId, unitName]
   );
   return (
     <SelectSubUnit

package/src/screens/AddNewGateway/SelectDeviceType.js

@@ -13,6 +13,7 @@ import AddModbusDeviceIcon from '../../../assets/images/AddNewDevice/add-modbus-
 import AddZigbeeDeviceIcon from '../../../assets/images/AddNewDevice/add-zigbee-device-icon.svg';
 import styles from './SelectDeviceTypeStyles';
 import AccessibilityLabel from '../../configs/AccessibilityLabel';
+import { DEVICE_TYPE } from '../../configs/Constants';
 
 const SelectDeviceGrid = ({ options, onSelect }) => {
   const [selectIndexes, setSelectIndexes] = useState();
@@ -76,6 +77,8 @@ const SelectDeviceType = ({ route }) => {
         data: {
           unitId,
           unitName,
+          stationId,
+          deviceType: DEVICE_TYPE.WIFI_DEVICE,
         },
         title: t('wifi_device'),
         subtitle: t('device_connect_without_gateway'),
@@ -89,6 +92,8 @@ const SelectDeviceType = ({ route }) => {
         data: {
           unitId,
           unitName,
+          stationId,
+          deviceType: DEVICE_TYPE.MODBUS,
         },
         title: t('modbus'),
         subtitle: t('device_connect_directly_to_the_gateway'),
@@ -97,11 +102,13 @@ const SelectDeviceType = ({ route }) => {
         id: 4,
         image: <AddZigbeeDeviceIcon width={60} height={60} />,
         route: stationId
-          ? Routes.SelectZigbeeGateway
+          ? Routes.ConnectRouterGuide
           : Routes.SelectDeviceSubUnit,
         data: {
           unitId,
           unitName,
+          stationId,
+          deviceType: DEVICE_TYPE.ZIGBEE,
         },
         title: t('zigbee'),
         subtitle: t('device_connect_remotely_to_the_gateway'),

package/src/screens/AddNewGateway/SelectZigbeeGateway.js

@@ -11,7 +11,7 @@ const SelectZigbeeGateway = ({ route }) => {
 
   const onPressNext = useCallback(
     (gateway) => {
-      navigation.navigate(Routes.ConnectingZigbeeDevice, {
+      navigation.navigate(Routes.ZigbeeDeviceConnectGuide, {
         unitId,
         stationId,
         chipId: gateway.id,

package/src/screens/AddNewGateway/ShareWifiPassword.js

@@ -92,12 +92,11 @@ const ShareWifiPassword = ({ route }) => {
         } catch (e) {
           return;
         }
-
         if (ssid !== currentSsid) {
           clearInterval(checkWifiInterval);
           navigation.navigate(Routes.ConnectingWifiDevice, {
             unitId,
-            stationId,
+            stationId: stationId,
             gateway: gatewayInfo,
             selectedWifi: {
               ssid: selectedWifi,

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

@@ -57,7 +57,7 @@ describe('Test AddNewGateway', () => {
     return instance.find((el) => el.props.accessibilityLabel === id);
   };
 
-  test('create', async () => {
+  it('create', async () => {
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
@@ -78,7 +78,7 @@ describe('Test AddNewGateway', () => {
     expect(groupCheckBox).toHaveLength(0);
   });
 
-  test('onChange chipName and phoneNumber', async () => {
+  it('onChange chipName and phoneNumber', async () => {
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
@@ -104,7 +104,7 @@ describe('Test AddNewGateway', () => {
     expect(textInputs[1].props.value).toEqual('New chip name');
   });
 
-  test('ViewButtonBottom', async () => {
+  it('ViewButtonBottom', async () => {
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
@@ -119,7 +119,7 @@ describe('Test AddNewGateway', () => {
     );
   });
 
-  test('ViewButtonBottom onLeftClick', async () => {
+  it('ViewButtonBottom onLeftClick', async () => {
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
@@ -131,7 +131,7 @@ describe('Test AddNewGateway', () => {
     expect(mockedGoBack).toHaveBeenCalled();
   });
 
-  test('ViewButtonBottom onRightClick without select stationId', async () => {
+  it('ViewButtonBottom onRightClick without select stationId', async () => {
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
@@ -143,7 +143,7 @@ describe('Test AddNewGateway', () => {
     expect(mockedNavigate).not.toHaveBeenCalled();
   });
 
-  test('ViewButtonBottom onRightClick with stationId', async () => {
+  it('ViewButtonBottom onRightClick with stationId', async () => {
     const response = {
       status: 200,
       data: {

package/src/screens/AddNewGateway/__test__/ConnectingModbusDevice.test.js

@@ -51,7 +51,7 @@ describe('Test connecting modbus device', () => {
     };
   });
 
-  test('rendering', async () => {
+  it('rendering', async () => {
     await act(async () => {
       tree = await create(wrapComponent(route));
     });

package/src/screens/AddNewGateway/__test__/ConnectingWifiDevice.test.js

@@ -51,7 +51,7 @@ describe('Test connecting wifi device', () => {
     };
   });
 
-  test('rendering', async () => {
+  it('rendering', async () => {
     await act(async () => {
       tree = await create(wrapComponent(route));
     });

package/src/screens/AddNewGateway/__test__/ConnectingWifiGuide.test.js

@@ -53,7 +53,7 @@ describe('test share wifi password', () => {
     socket.close.mockClear();
   });
 
-  test('render connect wifi guide', async () => {
+  it('render connect wifi guide', async () => {
     const route = { params: {} };
     await act(async () => {
       tree = renderer.create(wrapComponent(route));
@@ -66,7 +66,7 @@ describe('test share wifi password', () => {
     expect(button).toHaveLength(2);
   });
 
-  test('auto connect to wifi prefix on ios', async () => {
+  it('auto connect to wifi prefix on ios', async () => {
     Platform.OS = 'ios';
     const route = { params: { prefix: 'robot' } };
     await act(async () => {
@@ -83,7 +83,7 @@ describe('test share wifi password', () => {
     expect(socket.bind).toBeCalled();
   });
 
-  test('fail connect to wifi prefix on ios', async () => {
+  it('fail connect to wifi prefix on ios', async () => {
     Platform.OS = 'ios';
     const route = { params: { prefix: 'robot' } };
     WifiManager.connectToProtectedSSIDPrefix.mockImplementationOnce(
@@ -99,7 +99,7 @@ describe('test share wifi password', () => {
     expect(socket.bind).not.toBeCalled();
   });
 
-  test('auto connect to wifi android', async () => {
+  it('auto connect to wifi android', async () => {
     Platform.OS = 'android';
     const route = { params: { prefix: 'robot' } };
     WifiManager.loadWifiList.mockImplementationOnce(async () => [
@@ -120,7 +120,7 @@ describe('test share wifi password', () => {
     expect(socket.bind).toBeCalled();
   });
 
-  test('fail connect to wifi android', async () => {
+  it('fail connect to wifi android', async () => {
     Platform.OS = 'android';
     const route = { params: { prefix: 'robot' } };
     WifiManager.reScanAndLoadWifiList.mockImplementationOnce(async () => [
@@ -140,7 +140,7 @@ describe('test share wifi password', () => {
     expect(socket.bind).not.toBeCalled();
   });
 
-  test('fail load wifi list android', async () => {
+  it('fail load wifi list android', async () => {
     Platform.OS = 'android';
     const route = { params: { prefix: 'robot' } };
     WifiManager.reScanAndLoadWifiList.mockImplementationOnce(async () => {
@@ -155,7 +155,7 @@ describe('test share wifi password', () => {
     expect(socket.bind).not.toBeCalled();
   });
 
-  test('request wifi list from device', async () => {
+  it('request wifi list from device', async () => {
     jest.useFakeTimers();
     Platform.OS = 'android';
     const route = { params: { prefix: 'robot' } };
@@ -170,7 +170,7 @@ describe('test share wifi password', () => {
     expect(data.type).toEqual('scan');
   });
 
-  test('got wifi list from device', async () => {
+  it('got wifi list from device', async () => {
     Platform.OS = 'android';
     const route = {
       params: { prefix: 'robot', qrData: 'abc123', unitId: 1, stationId: 1 },
@@ -204,7 +204,7 @@ describe('test share wifi password', () => {
     // expect(mockedNavigate.mock.calls[0][0]).toEqual(Routes.ShareWifiPassword);
   });
 
-  test('got error while request wifi list from device', async () => {
+  it('got error while request wifi list from device', async () => {
     Platform.OS = 'android';
     const route = { params: { prefix: 'robot' } };
     await act(async () => {

package/src/screens/AddNewGateway/__test__/ConnectingZigbeeDevice.test.js

@@ -51,7 +51,7 @@ describe('Test connecting modbus device', () => {
     };
   });
 
-  test('rendering', async () => {
+  it('rendering', async () => {
     await act(async () => {
       tree = await create(wrapComponent(route));
     });

package/src/screens/AddNewGateway/__test__/RenameNewDevices.test.js

@@ -58,7 +58,7 @@ describe('Test rename new devices', () => {
     };
   });
 
-  test('rendering base', async () => {
+  it('rendering base', async () => {
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
@@ -81,7 +81,7 @@ describe('Test rename new devices', () => {
     expect(mock.history.get).toHaveLength(1);
   });
 
-  test('rendering sensor', async () => {
+  it('rendering sensor', async () => {
     mock.onGet().reply(200, {
       id: 1,
       name: 'chip',
@@ -122,7 +122,7 @@ describe('Test rename new devices', () => {
     ).toHaveLength(1);
   });
 
-  test('render rename chip', async () => {
+  it('render rename chip', async () => {
     mock.onGet().reply(200, {
       can_rename: true,
     });
@@ -149,7 +149,7 @@ describe('Test rename new devices', () => {
     expect(mock.history.get).toHaveLength(1);
   });
 
-  test('update name', async () => {
+  it('update name', async () => {
     mock.onGet().reply(200, {
       id: 1,
       can_rename: true,