@eohjsc/react-native-smart-city 0.2.20 → 0.2.26

package/src/screens/AddNewGateway/ConnectedGateway.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
@@ -11,6 +11,7 @@ import { useConnectGateway } from './hooks';
 import { TESTID } from '../../configs/Constants';
 
 const ConnectedGateway = memo(({ route }) => {
+  const t = useTranslations();
   const { new_chip, unit_id, unit_name } = route.params;
   const { onPressDone } = useConnectGateway(unit_id);
 

package/src/screens/AddNewGateway/ConnectingGateway.js

@@ -1,19 +1,50 @@
-import React, { memo, useEffect } from 'react';
-import { View, StyleSheet } from 'react-native';
+import React, { memo, useEffect, useMemo, useState } from 'react';
+import { View } from 'react-native';
 import { API, Colors } from '../../configs';
 import Text from '../../commons/Text';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { useNavigation } from '@react-navigation/native';
 import Routes from '../../utils/Route';
 import { axiosGet } from '../../utils/Apis/axios';
+import { IconOutline } from '@ant-design/icons-react-native';
+import styles from './ConnectingGatewayStyles';
+
+const ProcessItem = ({ title, active, line }) => {
+  return (
+    <>
+      <View style={styles.processItem}>
+        <View
+          style={[styles.processCircle, active && styles.processCircleActive]}
+        >
+          <IconOutline
+            name="radar-chart"
+            size={16}
+            color={active ? Colors.White : Colors.Gray5}
+          />
+        </View>
+        <Text
+          center
+          type="Label"
+          color={Colors.Gray7}
+          style={styles.textProcessItem}
+        >
+          {title}
+        </Text>
+      </View>
+      {line && <View style={[styles.line, active && styles.lineActive]} />}
+    </>
+  );
+};
 
 const ConnectingGateway = memo(({ route }) => {
+  const t = useTranslations();
   const { navigate } = useNavigation();
   const { new_chip } = route.params;
+  const [finalizeStatus, setFinalizeStatus] = useState(0);
 
   useEffect(() => {
     const checkChipFinalized = setInterval(async () => {
-      const { success } = await axiosGet(
+      const { success, data } = await axiosGet(
         API.CHIP.CHECK_FINALIZED(),
         {
           params: {
@@ -23,40 +54,84 @@ const ConnectingGateway = memo(({ route }) => {
         true
       );
       if (success) {
-        navigate(Routes.ConnectedGateway, route.params);
+        const { control, config, bluetooth } = data;
+        if (control) {
+          setFinalizeStatus(1);
+        }
+        if (config) {
+          setFinalizeStatus(2);
+        }
+        if (bluetooth) {
+          setFinalizeStatus(3);
+        }
+        if (control && config && bluetooth) {
+          navigate(Routes.ConnectedGateway, route.params);
+        }
       }
     }, 3000);
     return () => clearInterval(checkChipFinalized);
   }, [navigate, new_chip.id, route.params]);
 
+  const percent = useMemo(() => {
+    if (finalizeStatus === 0) {
+      return '0%';
+    }
+    if (finalizeStatus === 1) {
+      return '30%';
+    }
+    if (finalizeStatus === 2) {
+      return '60%';
+    }
+    return '100%';
+  }, [finalizeStatus]);
+
   return (
     <View style={styles.wrap}>
       <Text semibold size={20} color={Colors.Black} style={styles.txtHeader}>
         {t('connecting_your_gateway')}
       </Text>
-      <Text size={14} color={Colors.Gray8} style={styles.txtNote}>
+      <Text size={14} color={Colors.Gray} style={styles.txtNote}>
         {t('dont_turn_off_the_device_or_close_this_app')}
       </Text>
+      <View style={styles.scan}>
+        <View style={styles.layout}>
+          <View style={styles.layout1}>
+            <View style={styles.outsideCircle}>
+              <View style={styles.circle}>
+                <IconOutline name="search" size={28} color={Colors.White} />
+              </View>
+            </View>
+            <Text
+              style={styles.textPercent}
+              color={Colors.Gray7}
+              semibold
+              center
+            >
+              {percent}
+            </Text>
+          </View>
+        </View>
+        <View style={styles.layoutProcess}>
+          <View style={styles.layoutProcess1}>
+            <ProcessItem
+              title="Finalize control"
+              line
+              active={[1, 2, 3].includes(finalizeStatus)}
+            />
+            <ProcessItem
+              title="Finalize config"
+              line
+              active={[2, 3].includes(finalizeStatus)}
+            />
+            <ProcessItem
+              title="Finalize bluetooth"
+              active={[3].includes(finalizeStatus)}
+            />
+          </View>
+        </View>
+      </View>
     </View>
   );
 });
 
 export default ConnectingGateway;
-
-const styles = StyleSheet.create({
-  wrap: {
-    flex: 1,
-    backgroundColor: Colors.Gray2,
-  },
-  txtHeader: {
-    marginTop: 16,
-    marginLeft: 16,
-    marginBottom: 8,
-    lineHeight: 28,
-  },
-  txtNote: {
-    marginHorizontal: 16,
-    marginBottom: 8,
-    lineHeight: 22,
-  },
-});

package/src/screens/AddNewGateway/ConnectingGatewayStyles.js

@@ -0,0 +1,92 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+import { colorOpacity } from '../../utils/Converter/color';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+  },
+  txtHeader: {
+    marginTop: 16,
+    marginLeft: 16,
+    marginBottom: 8,
+    lineHeight: 28,
+  },
+  txtNote: {
+    marginHorizontal: 16,
+    marginBottom: 8,
+    lineHeight: 22,
+  },
+  scan: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 50,
+  },
+  layout: {
+    height: 75,
+    marginBottom: 50,
+  },
+  layout1: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  layoutProcess: {
+    height: 100,
+  },
+  layoutProcess1: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  outsideCircle: {
+    width: 75,
+    height: 75,
+    borderRadius: 75,
+    backgroundColor: colorOpacity(Colors.Blue10, 0.3),
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  circle: {
+    width: 50,
+    maxHeight: 50,
+    borderRadius: 50,
+    backgroundColor: Colors.Blue10,
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  processItem: {},
+  processCircle: {
+    borderWidth: 1,
+    borderColor: Colors.Gray5,
+    borderRadius: 15,
+    padding: 5,
+  },
+  processCircleActive: {
+    borderColor: Colors.Blue10,
+    backgroundColor: Colors.Blue10,
+    color: Colors.White,
+  },
+  line: {
+    width: 85,
+    height: 1,
+    backgroundColor: Colors.Gray5,
+  },
+  lineActive: {
+    backgroundColor: Colors.Blue10,
+  },
+  textProcessItem: {
+    position: 'absolute',
+    width: 50,
+    bottom: -45,
+    left: '-40%',
+  },
+  textPercent: {
+    position: 'absolute',
+    bottom: -30,
+  },
+});

package/src/screens/AddNewGateway/SetupGatewayWifi.js

@@ -2,7 +2,7 @@ import React, { memo, useCallback, useEffect, useState } from 'react';
 import { ScrollView, SafeAreaView, PermissionsAndroid } from 'react-native';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
 import wifi from 'react-native-android-wifi';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
 import { AlertAction, Section, ViewButtonBottom } from '../../commons';
@@ -23,6 +23,7 @@ import {
 import styles from './SetupGatewayWifiStyles';
 
 const SetupGatewayWifi = memo(({ route }) => {
+  const t = useTranslations();
   const { unit_id } = route.params;
   const isFocused = useIsFocused();
   const { navigate, goBack } = useNavigation();
@@ -50,7 +51,7 @@ const SetupGatewayWifi = memo(({ route }) => {
       } catch (err) {}
     };
     wifiPermission();
-  }, []);
+  }, [t]);
 
   useEffect(() => {
     if (isFocused) {

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

@@ -2,14 +2,20 @@ import React from 'react';
 import { act, create } from 'react-test-renderer';
 import axios from 'axios';
 
-import { t } from 'i18n-js';
 import AddNewGateway from '../index';
 import GroupCheckBox from '../../../commons/GroupCheckBox';
 import { TESTID } from '../../../configs/Constants';
-import API from '../../../configs/API';
 import { ViewButtonBottom } from '../../../commons';
-import Routes from '../../../utils/Route';
 import { TextInput } from 'react-native';
+import { getTranslate } from '../../../utils/I18n';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <AddNewGateway route={route} />
+  </SCProvider>
+);
 
 jest.mock('axios');
 
@@ -53,22 +59,25 @@ describe('Test AddNewGateway', () => {
 
   test('create', async () => {
     await act(async () => {
-      tree = await create(<AddNewGateway route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const textAdd = getText(instance, TESTID.ADD_NEW_GATEWAY_ADD);
     const textThen = getText(instance, TESTID.ADD_NEW_GATEWAY_THEN_SELECT);
-    expect(textAdd.props.children).toEqual(t('add_new_gateway'));
-    expect(textThen.props.children).toEqual(t('then_select_a_sub_unit_to_add'));
+    expect(textAdd.props.children).toEqual(
+      getTranslate('en', 'add_new_gateway')
+    );
+    expect(textThen.props.children).toEqual(
+      getTranslate('en', 'please_add_your_phone_number_and_chip_name')
+    );
 
     const groupCheckBox = instance.findAllByType(GroupCheckBox);
-    expect(groupCheckBox).toHaveLength(1);
-    expect(groupCheckBox[0].props.data).toEqual([]);
+    expect(groupCheckBox).toHaveLength(0);
   });
 
   test('onChange chipName and phoneNumber', async () => {
     await act(async () => {
-      tree = await create(<AddNewGateway route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(TextInput);
@@ -76,8 +85,12 @@ describe('Test AddNewGateway', () => {
     expect(textInputs[0].props.value).toEqual('');
     expect(textInputs[1].props.value).toEqual('');
 
-    expect(textInputs[0].props.placeholder).toEqual(t('phone_number'));
-    expect(textInputs[1].props.placeholder).toEqual(t('chip_name'));
+    expect(textInputs[0].props.placeholder).toEqual(
+      getTranslate('en', 'phone_number_of_data_sim')
+    );
+    expect(textInputs[1].props.placeholder).toEqual(
+      getTranslate('en', 'gateway_name')
+    );
 
     await act(async () => {
       await textInputs[0].props.onChangeText('New phone number');
@@ -88,63 +101,24 @@ describe('Test AddNewGateway', () => {
     expect(textInputs[1].props.value).toEqual('New chip name');
   });
 
-  test('fetchDetails success', async () => {
-    const response = {
-      status: 200,
-      data: {
-        id: 1,
-        name: 'Unit name',
-        stations: [{ id: 2, name: 'Station name' }],
-      },
-    };
-    axios.get.mockImplementation(async () => {
-      return response;
-    });
-
-    await act(async () => {
-      tree = await create(<AddNewGateway route={route} />);
-    });
-    const instance = tree.root;
-    expect(axios.get).toHaveBeenCalledWith(API.UNIT.UNIT_DETAIL(1), {});
-
-    const groupCheckBox = instance.findByType(GroupCheckBox);
-    expect(groupCheckBox.props.data).toEqual([
-      { id: 2, name: 'Station name', title: 'Station name' },
-    ]);
-  });
-
-  test('fetchDetails fail', async () => {
-    const response = {
-      data: {},
-    };
-    axios.get.mockImplementation(async () => {
-      return response;
-    });
-
-    await act(async () => {
-      tree = await create(<AddNewGateway route={route} />);
-    });
-    const instance = tree.root;
-    expect(axios.get).toHaveBeenCalledWith(API.UNIT.UNIT_DETAIL(1), {});
-
-    const groupCheckBox = instance.findByType(GroupCheckBox);
-    expect(groupCheckBox.props.data).toEqual([]);
-  });
-
   test('ViewButtonBottom', async () => {
     await act(async () => {
-      tree = await create(<AddNewGateway route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
 
-    expect(viewButtonBottom.props.leftTitle).toEqual(t('text_back'));
-    expect(viewButtonBottom.props.rightTitle).toEqual(t('text_next'));
+    expect(viewButtonBottom.props.leftTitle).toEqual(
+      getTranslate('en', 'text_back')
+    );
+    expect(viewButtonBottom.props.rightTitle).toEqual(
+      getTranslate('en', 'text_next')
+    );
   });
 
   test('ViewButtonBottom onLeftClick', async () => {
     await act(async () => {
-      tree = await create(<AddNewGateway route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
@@ -156,7 +130,7 @@ describe('Test AddNewGateway', () => {
 
   test('ViewButtonBottom onRightClick without select stationId', async () => {
     await act(async () => {
-      tree = await create(<AddNewGateway route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
@@ -180,25 +154,14 @@ describe('Test AddNewGateway', () => {
     });
 
     await act(async () => {
-      tree = await create(<AddNewGateway route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
 
-    const groupCheckBox = instance.findByType(GroupCheckBox);
-    await act(async () => {
-      groupCheckBox.props.onSelect({ id: 2 }); // select stationId
-    });
-
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
     await act(async () => {
       viewButtonBottom.props.onRightClick();
     });
-    expect(mockedNavigate).toHaveBeenCalledWith(Routes.ScanChipQR, {
-      chipName: '',
-      phoneNumber: '',
-      station_id: 2,
-      unit_id: 1,
-      unit_name: 'Unit name',
-    });
+    expect(mockedNavigate).not.toBeCalled();
   });
 });

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

@@ -2,9 +2,11 @@ import React from 'react';
 import { act, create } from 'react-test-renderer';
 import axios from 'axios';
 
-import { t } from 'i18n-js';
 import { TESTID } from '../../../configs/Constants';
 import ConnectedGateway from '../ConnectedGateway';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import { getTranslate } from '../../../utils/I18n';
 
 jest.mock('axios');
 
@@ -18,6 +20,12 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ConnectedGateway route={route} />
+  </SCProvider>
+);
+
 describe('Test ConnectedGateway', () => {
   let tree;
   let route;
@@ -48,7 +56,7 @@ describe('Test ConnectedGateway', () => {
 
   test('create', async () => {
     await act(async () => {
-      tree = await create(<ConnectedGateway route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
 
@@ -57,9 +65,11 @@ describe('Test ConnectedGateway', () => {
     const textChipName = getText(instance, TESTID.CONNECTED_GATEWAY_CHIP_NAME);
     const textDone = getText(instance, TESTID.CONNECTED_GATEWAY_DONE);
 
-    expect(textSuccess.props.children).toEqual(t('successfully_connected'));
+    expect(textSuccess.props.children).toEqual(
+      getTranslate('en', 'successfully_connected')
+    );
     expect(textUnitName.props.children).toEqual('Unit name');
     expect(textChipName.props.children).toEqual('Chip name - ABC123');
-    expect(textDone.props.children).toEqual(t('done'));
+    expect(textDone.props.children).toEqual(getTranslate('en', 'done'));
   });
 });

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

@@ -4,9 +4,11 @@ import axios from 'axios';
 
 import ConnectingGateway from '../ConnectingGateway';
 import Text from '../../../commons/Text';
-import { t } from 'i18n-js';
 import API from '../../../configs/API';
 import Routes from '../../../utils/Route';
+import { getTranslate } from '../../../utils/I18n';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 
 jest.mock('axios');
 
@@ -20,6 +22,12 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ConnectingGateway route={route} />
+  </SCProvider>
+);
+
 describe('Test ConnectingGateway', () => {
   let tree;
   let route;
@@ -41,14 +49,16 @@ describe('Test ConnectingGateway', () => {
 
   test('create', async () => {
     await act(async () => {
-      tree = await create(<ConnectingGateway route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const texts = instance.findAllByType(Text);
-    expect(texts).toHaveLength(2);
-    expect(texts[0].props.children).toEqual(t('connecting_your_gateway'));
+    expect(texts).toHaveLength(6);
+    expect(texts[0].props.children).toEqual(
+      getTranslate('en', 'connecting_your_gateway')
+    );
     expect(texts[1].props.children).toEqual(
-      t('dont_turn_off_the_device_or_close_this_app')
+      getTranslate('en', 'dont_turn_off_the_device_or_close_this_app')
     );
   });
 
@@ -63,18 +73,18 @@ describe('Test ConnectingGateway', () => {
     });
 
     await act(async () => {
-      tree = await create(<ConnectingGateway route={route} />);
+      tree = await create(wrapComponent(route));
     });
     await act(async () => {
       await jest.runOnlyPendingTimers();
     });
     expect(setInterval).toHaveBeenCalled();
-    expect(axios.get).toHaveBeenCalledWith(API.CHIP.CHECK_FINALIZED, {
+    expect(axios.get).toHaveBeenCalledWith(API.CHIP.CHECK_FINALIZED(), {
       params: {
         chip_id: 1,
       },
     });
-    expect(mockedNavigate).toHaveBeenCalledWith(
+    expect(mockedNavigate).not.toHaveBeenCalledWith(
       Routes.ConnectedGateway,
       route.params
     );
@@ -91,13 +101,13 @@ describe('Test ConnectingGateway', () => {
     });
 
     await act(async () => {
-      tree = await create(<ConnectingGateway route={route} />);
+      tree = await create(wrapComponent(route));
     });
     await act(async () => {
       await jest.runOnlyPendingTimers();
     });
     expect(setInterval).toHaveBeenCalled();
-    expect(axios.get).toHaveBeenCalledWith(API.CHIP.CHECK_FINALIZED, {
+    expect(axios.get).toHaveBeenCalledWith(API.CHIP.CHECK_FINALIZED(), {
       params: {
         chip_id: 1,
       },

package/src/screens/AddNewGateway/hooks/useStateAlertRename.js

@@ -1,7 +1,8 @@
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { useCallback, useState } from 'react';
 
 export const useStateAlertRename = () => {
+  const t = useTranslations();
   const [stateAlertRename, setStateAlertRename] = useState({
     visible: false,
     title: t('rename_device'),

package/src/screens/AddNewGateway/index.js

@@ -1,7 +1,7 @@
 import React, { memo, useCallback, useMemo, useState } from 'react';
 import { ScrollView, SafeAreaView, TextInput } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
 import { Section, ViewButtonBottom } from '../../commons';
@@ -11,6 +11,7 @@ import { TESTID } from '../../configs/Constants';
 import styles from './AddNewGatewayStyles';
 
 const AddNewGateway = memo(({ route }) => {
+  const t = useTranslations();
   const { unit_id, wifiName, wifiPass, imei } = route.params;
   const { navigate, goBack } = useNavigation();
   const [phoneNumber, setPhoneNumber] = useState('');

package/src/screens/AddNewOneTap/AddNewOneTapStyles.js

@@ -0,0 +1,43 @@
+import { StatusBar, StyleSheet } from 'react-native';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  containerAndroid: {
+    flex: 1,
+    backgroundColor: Colors.Gray2,
+    paddingTop: StatusBar.currentHeight,
+  },
+  containerIOS: {
+    flex: 1,
+    backgroundColor: Colors.Gray2,
+    paddingTop: 0,
+  },
+  textHeader: {
+    marginTop: 16,
+    marginLeft: 16,
+    marginBottom: 8,
+    lineHeight: 28,
+  },
+  noMarginTop: {
+    margin: 16,
+  },
+  textInput: {
+    marginTop: 0,
+    borderWidth: 0,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.Gray4,
+    paddingLeft: 0,
+    backgroundColor: Colors.Gray2,
+  },
+  viewBottomFixed: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    paddingBottom: getBottomSpace() > 0 ? getBottomSpace() : 24,
+    paddingTop: 16,
+    backgroundColor: Colors.White,
+    marginHorizontal: 16,
+  },
+});