@eohjsc/react-native-smart-city 0.3.39 → 0.3.41

package/assets/images/AddNewDevice/gateway-icon.svg

@@ -0,0 +1,12 @@
+<svg width="30" height="29" viewBox="0 0 30 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.0034 24.0138C28.9656 24.138 28.9203 24.2621 28.8825 24.394C28.5351 25.4879 27.576 26.1862 26.3752 26.2095C26.1336 26.2172 25.8843 26.2095 25.6049 26.2095C25.6049 26.512 25.6049 26.7991 25.6049 27.0862C25.5974 27.6137 25.2273 28.0172 24.744 28.0094C24.2758 28.0017 23.9132 27.606 23.9057 27.0939C23.9057 26.8146 23.9057 26.5353 23.9057 26.2327C17.6375 26.2327 11.3843 26.2327 5.10101 26.2327C5.10101 26.512 5.10101 26.8069 5.10101 27.0939C5.09346 27.6215 4.71586 28.0249 4.24008 28.0094C3.77185 28.0017 3.40935 27.606 3.40179 27.0939C3.40179 26.8146 3.40179 26.5353 3.40179 26.2327C2.99398 26.2095 2.60127 26.2095 2.20856 26.1629C0.992679 26.0233 0.0109086 24.9138 0.00335648 23.6492C-0.0041956 21.9036 0.00335648 20.1579 0.00335648 18.4123C0.00335648 16.8684 1.09086 15.7357 2.59372 15.7046C3.11481 15.6969 3.62836 15.7046 4.14945 15.7046C11.4901 15.7046 18.8307 15.7046 26.1789 15.7046C27.6893 15.7046 28.5427 16.3641 28.9656 17.8537C28.9731 17.8692 28.9882 17.8847 29.0034 17.8925C29.0034 19.9407 29.0034 21.9734 29.0034 24.0138ZM18.808 20.957C18.808 20.6855 18.8156 20.414 18.808 20.1424C18.8005 19.5993 18.4455 19.2269 17.9471 19.2269C17.4638 19.2269 17.1164 19.5993 17.1088 20.1269C17.1013 20.6777 17.1013 21.2363 17.1088 21.7872C17.1164 22.3148 17.4713 22.6872 17.9547 22.6872C18.438 22.6872 18.7929 22.3225 18.808 21.8027C18.8156 21.5156 18.808 21.2363 18.808 20.957ZM22.2065 20.9648C22.2065 20.6777 22.214 20.3829 22.2065 20.0959C22.1838 19.5916 21.8289 19.2347 21.3606 19.2347C20.8924 19.2347 20.5299 19.5916 20.5148 20.1036C20.4997 20.6777 20.4997 21.2519 20.5148 21.8182C20.5224 22.3303 20.8849 22.6872 21.3531 22.6949C21.8364 22.7027 22.1989 22.338 22.214 21.8105C22.214 21.5234 22.2065 21.2441 22.2065 20.9648ZM23.9057 20.957C23.9057 21.2363 23.8981 21.5234 23.9057 21.8027C23.9208 22.3148 24.2682 22.6794 24.7364 22.6872C25.2198 22.6949 25.5898 22.338 25.6049 21.8182C25.62 21.2441 25.62 20.67 25.6049 20.1036C25.5974 19.5916 25.2349 19.2347 24.7666 19.2347C24.2833 19.2347 23.9284 19.5993 23.9132 20.1191C23.8981 20.3907 23.9057 20.6777 23.9057 20.957Z" fill="#00979D"/>
+<path d="M22.9023 5.33144C22.5927 5.3392 22.3737 5.15299 22.1697 4.95128C20.9312 3.71769 19.5039 2.78669 17.8424 2.29791C13.7718 1.09536 10.1393 1.91775 6.95985 4.81938C6.74839 5.01334 6.50673 5.21506 6.2424 5.30816C5.89501 5.4323 5.50985 5.2073 5.33615 4.88145C5.1549 4.53232 5.20777 4.13665 5.48719 3.84183C6.27261 3.03496 7.13355 2.35222 8.08511 1.78586C10.4263 0.389349 12.9487 -0.19253 15.6296 0.0557383C18.6807 0.33504 21.3013 1.60741 23.4838 3.81079C23.7632 4.0901 23.8388 4.42371 23.7028 4.79611C23.5744 5.12972 23.2648 5.3392 22.9023 5.33144Z" fill="#00979D"/>
+<path d="M21.3686 6.7746C21.3535 7.29441 21.1949 7.57372 20.8626 7.72113C20.5152 7.87629 20.2131 7.79871 19.9186 7.55044C19.4126 7.13149 18.9293 6.66599 18.378 6.33237C15.4251 4.54019 11.7623 4.98242 9.25504 7.40303C9.01337 7.63578 8.7717 7.8375 8.41676 7.79095C8.06936 7.7444 7.82014 7.5582 7.70686 7.20907C7.58603 6.85219 7.6691 6.54185 7.92587 6.27807C8.90009 5.27724 10.0254 4.5014 11.3394 4.05917C14.9644 2.8411 18.2118 3.53936 21.0212 6.216C21.1949 6.39444 21.2931 6.65823 21.3686 6.7746Z" fill="#00979D"/>
+<path d="M5.834 13.9822C5.22984 13.9822 4.65588 13.99 4.08947 13.9745C4.0215 13.9745 3.93088 13.8271 3.89312 13.734C2.99442 11.5849 2.09572 9.43583 1.19702 7.279C0.849627 6.44885 0.49468 5.61095 0.154836 4.77304C-0.0566226 4.26875 0.13218 3.75669 0.585304 3.56274C1.03843 3.36878 1.49911 3.57825 1.71057 4.08255C3.06994 7.31779 4.42176 10.553 5.77359 13.7883C5.78869 13.8426 5.80379 13.8969 5.834 13.9822Z" fill="#00979D"/>
+<path d="M23.1582 13.9898C23.4754 13.2218 23.7775 12.5002 24.0796 11.7865C25.1444 9.23396 26.2092 6.68145 27.2741 4.1367C27.5233 3.54706 28.0897 3.32983 28.5579 3.64016C28.928 3.88843 29.0488 4.33066 28.86 4.78841C28.2559 6.23922 27.6517 7.69004 27.0475 9.1331C26.4132 10.6615 25.7712 12.1899 25.1368 13.7261C25.0538 13.92 24.9632 14.0054 24.7441 13.9976C24.2306 13.9743 23.7246 13.9898 23.1582 13.9898Z" fill="#00979D"/>
+<path d="M14.5042 7.03809C16.1128 7.08464 17.4948 7.58893 18.6427 8.7139C18.892 8.95441 19.0204 9.24147 18.9297 9.59835C18.8467 9.93972 18.6352 10.157 18.3105 10.2423C17.9782 10.3354 17.7063 10.2113 17.4646 9.97851C16.075 8.65959 14.0511 8.3958 12.4047 9.34233C12.1026 9.51301 11.8232 9.74576 11.5664 9.97851C11.136 10.3587 10.63 10.3819 10.2826 10.0018C9.93519 9.62163 9.98051 9.10182 10.4034 8.69062C11.5589 7.5579 12.9636 7.06912 14.5042 7.03809Z" fill="#00979D"/>
+<path d="M16.5958 11.8411C16.5429 12.2213 16.3919 12.4851 16.0898 12.6403C15.7726 12.8032 15.4479 12.7721 15.1609 12.5472C14.6171 12.1282 14.3755 12.1282 13.8393 12.5472C13.4768 12.8342 12.9632 12.7877 12.6687 12.4463C12.3817 12.1127 12.3893 11.6006 12.6914 11.2593C13.6052 10.2274 15.4177 10.2274 16.3088 11.267C16.4447 11.4222 16.5052 11.6472 16.5958 11.8411Z" fill="#00979D"/>
+<path d="M18.8084 20.9567C18.8084 21.236 18.816 21.523 18.8084 21.8023C18.7933 22.3299 18.4383 22.6946 17.955 22.6868C17.4717 22.6868 17.1167 22.3144 17.1092 21.7868C17.1016 21.236 17.1016 20.6774 17.1092 20.1265C17.1167 19.599 17.4717 19.2266 17.9475 19.2266C18.4459 19.2266 18.7933 19.5912 18.8084 20.1421C18.816 20.4136 18.8084 20.6851 18.8084 20.9567Z" fill="white"/>
+<path d="M22.2079 20.9645C22.2079 21.2438 22.2155 21.5309 22.2079 21.8102C22.1928 22.33 21.8303 22.6946 21.347 22.6946C20.8788 22.6869 20.5238 22.3222 20.5087 21.8179C20.5012 21.2438 20.4936 20.6697 20.5087 20.1033C20.5238 19.599 20.8863 19.2344 21.3546 19.2344C21.8303 19.2344 22.1853 19.5913 22.2004 20.0956C22.2155 20.3749 22.2079 20.6697 22.2079 20.9645Z" fill="white"/>
+<path d="M23.906 20.9568C23.906 20.6775 23.8984 20.3904 23.906 20.1111C23.9211 19.5913 24.276 19.2189 24.7594 19.2267C25.2276 19.2267 25.5901 19.5913 25.5977 20.0956C25.6128 20.6697 25.6128 21.2439 25.5977 21.8102C25.5826 22.33 25.2125 22.6947 24.7292 22.6792C24.2609 22.6714 23.9135 22.3068 23.8984 21.7947C23.8984 21.5154 23.906 21.2361 23.906 20.9568Z" fill="white"/>
+</svg>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.3.39",
+  "version": "0.3.41",
   "description": "TODO",
   "main": "index.js",
   "files": [

package/src/commons/Header/HeaderCustom.js

@@ -24,6 +24,7 @@ const HeaderCustom = ({
   iconLeft,
   wrapTitleStyle,
   iconBackStyle,
+  isCanBack = true,
 }) => {
   const t = useTranslations();
   const { goBack } = useNavigation();
@@ -43,12 +44,14 @@ const HeaderCustom = ({
 
   return (
     <View style={[styles.wrap, isShowSeparator && styles.separator]}>
-      <TouchableOpacity style={styles.buttonBack} onPress={handleGoback}>
-        <Image
-          source={iconLeft || Images.arrowBack}
-          style={[styles.iconBack, iconBackStyle]}
-        />
-      </TouchableOpacity>
+      {isCanBack && (
+        <TouchableOpacity style={styles.buttonBack} onPress={handleGoback}>
+          <Image
+            source={iconLeft || Images.arrowBack}
+            style={[styles.iconBack, iconBackStyle]}
+          />
+        </TouchableOpacity>
+      )}
       <View style={[styles.wrapTitle, wrapTitleStyle]}>
         <Text
           style={[styles.title, titleStyles, !isShowRight && styles.title2]}

package/src/commons/SelectGateway/index.js

@@ -1,9 +1,12 @@
 import React, { memo, useCallback, useEffect, useState } from 'react';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import { SafeAreaView, ScrollView, TouchableOpacity, View } from 'react-native';
+import { ScrollView, TouchableOpacity, View } from 'react-native';
 
 import { API } from '../../configs';
+import { HeaderCustom } from '../Header';
+import { ModalCustom } from '../Modal';
+import { useBoolean } from '../../hooks/Common';
 import { RadioCircle, Section, ViewButtonBottom } from '../../commons';
 import { axiosGet } from '../../utils/Apis/axios';
 import Text from '../../commons/Text';
@@ -41,13 +44,21 @@ const GatewayItem = memo(({ index, item, selectedIndex, setSelectedIndex }) => {
   );
 });
 
-const SelectGateway = ({ onPressNext, unitId, type, title, subTitle }) => {
+const SelectGateway = ({
+  onPressNext,
+  onPressOk,
+  unitId,
+  type,
+  title,
+  subTitle,
+}) => {
   const t = useTranslations();
   const { goBack } = useNavigation();
   const isFocused = useIsFocused();
-  const [selectedIndex, setSelectedIndex] = useState(-1);
-
+  const [selectedIndex, setSelectedIndex] = useState(0);
   const [gateways, setGateways] = useState([]);
+  const [showPopupGuide, setShowPopupGuide, setHidePopupGuide] =
+    useBoolean(false);
 
   const fetchDetails = useCallback(async () => {
     const { success, data } = await axiosGet(
@@ -58,18 +69,26 @@ const SelectGateway = ({ onPressNext, unitId, type, title, subTitle }) => {
     );
     if (success) {
       setGateways(data);
+      if (!data.length) {
+        setShowPopupGuide();
+      }
+    } else {
+      setShowPopupGuide();
     }
-  }, [type, unitId]);
+  }, [setShowPopupGuide, type, unitId]);
+
+  const handleOk = () => {
+    setHidePopupGuide();
+    onPressOk();
+  };
 
   useEffect(() => {
     isFocused && fetchDetails();
   }, [fetchDetails, isFocused]);
 
   return (
-    <SafeAreaView style={styles.container}>
-      <Text semibold style={styles.title}>
-        {title}
-      </Text>
+    <View style={styles.container}>
+      <HeaderCustom title={title} isShowSeparator />
       <Text style={styles.subtitle}>{subTitle}</Text>
       <View style={styles.contentContainer}>
         <ScrollView
@@ -77,17 +96,19 @@ const SelectGateway = ({ onPressNext, unitId, type, title, subTitle }) => {
           showsVerticalScrollIndicator={false}
           scrollIndicatorInsets={{ right: 1 }}
         >
-          <Section type={'border'}>
-            {gateways.map((item, index) => (
-              <GatewayItem
-                key={index}
-                item={item}
-                setSelectedIndex={setSelectedIndex}
-                selectedIndex={selectedIndex}
-                index={index}
-              />
-            ))}
-          </Section>
+          {gateways.length > 0 && (
+            <Section type={'border'}>
+              {gateways.map((item, index) => (
+                <GatewayItem
+                  key={index}
+                  item={item}
+                  setSelectedIndex={setSelectedIndex}
+                  selectedIndex={selectedIndex}
+                  index={index}
+                />
+              ))}
+            </Section>
+          )}
         </ScrollView>
         <ViewButtonBottom
           leftTitle={t('cancel')}
@@ -97,8 +118,29 @@ const SelectGateway = ({ onPressNext, unitId, type, title, subTitle }) => {
           onRightClick={() => onPressNext(gateways[selectedIndex])}
           accessibilityLabelPrefix={AccessibilityLabel.PREFIX.SELECT_UNIT}
         />
+        <ModalCustom // todo Huy - make reused component
+          onBackButtonPress={goBack}
+          isVisible={showPopupGuide}
+          style={styles.modal}
+        >
+          <View style={styles.modalWrapper}>
+            <View style={styles.modalContent}>
+              <Text type="H4" semibold style={styles.txtCenter}>
+                {t('no_gateway')}
+              </Text>
+              <Text style={styles.txtCenter}>
+                {t('need_add_gateway_before_add_device')}
+              </Text>
+            </View>
+            <ViewButtonBottom
+              rightTitle={t('ok')}
+              onRightClick={handleOk}
+              styleButton={styles.bottomButton}
+            />
+          </View>
+        </ModalCustom>
       </View>
-    </SafeAreaView>
+    </View>
   );
 };
 

package/src/commons/SelectGateway/styles.js

@@ -1,12 +1,11 @@
 import { Colors } from '../../configs';
 
-import { StyleSheet, StatusBar, Platform } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: Colors.Gray2,
-    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
+    backgroundColor: Colors.White,
   },
   contentContainer: {
     flex: 1,
@@ -29,7 +28,7 @@ export default StyleSheet.create({
     fontSize: 14,
     lineHeight: 22,
     marginLeft: 16,
-    marginBottom: 16,
+    marginVertical: 16,
   },
   row: {
     flex: 1,
@@ -52,4 +51,26 @@ export default StyleSheet.create({
   buttonAdd: {
     marginHorizontal: 16,
   },
+  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',
+  },
+  bottomButton: {
+    paddingVertical: 11,
+  },
 });

package/src/commons/SelectSubUnit/index.js

@@ -11,6 +11,7 @@ import Text from '../../commons/Text';
 import AccessibilityLabel from '../../configs/AccessibilityLabel';
 import styles from './styles.js';
 import Routes from '../../utils/Route';
+import { HeaderCustom } from '../Header';
 
 const SubUnitItem = memo(({ item, index, selectedIndex, setSelectedIndex }) => {
   const handleSelectIndex = useCallback(() => {
@@ -78,9 +79,7 @@ const SelectSubUnit = ({ unitId, title, subTitle, onPressNext, route }) => {
 
   return (
     <View style={styles.container}>
-      <Text semibold style={styles.title}>
-        {title}
-      </Text>
+      <HeaderCustom title={title} isShowSeparator />
       <Text style={styles.subtitle}>{subTitle}</Text>
       <View style={styles.contentContainer}>
         <ScrollView

package/src/commons/SelectSubUnit/styles.js

@@ -1,12 +1,10 @@
 import { StyleSheet } from 'react-native';
 import { Colors } from '../../configs';
-import { getStatusBarHeight } from '../../configs/Constants';
 
 export default StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: Colors.Gray2,
-    paddingTop: getStatusBarHeight(),
   },
   contentContainer: {
     flex: 1,
@@ -29,7 +27,7 @@ export default StyleSheet.create({
     fontSize: 14,
     lineHeight: 22,
     marginLeft: 16,
-    marginBottom: 16,
+    marginVertical: 16,
   },
   row: {
     flex: 1,

package/src/commons/StatusBox/index.js

@@ -0,0 +1,19 @@
+import React, { memo } from 'react';
+import { View } from 'react-native';
+
+import Text from '../Text';
+import styles from './styles';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+
+const StatusBox = ({ status }) => {
+  const t = useTranslations();
+  return (
+    <View style={[styles.viewStatus, status && styles.viewOnline]}>
+      <Text style={[styles.textStatus, status && styles.textOnline]}>
+        {t(status ? 'online' : 'offline')}
+      </Text>
+    </View>
+  );
+};
+
+export default memo(StatusBox);

package/src/commons/StatusBox/styles.js

@@ -0,0 +1,30 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  viewStatus: {
+    width: 65,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 54,
+    backgroundColor: Colors.White,
+    borderColor: Colors.Neutral.Neutral3,
+    borderWidth: 1,
+  },
+  textStatus: {
+    fontStyle: 'normal',
+    fontWeight: 600,
+    letterSpacing: 0.04,
+    fontSize: 12,
+    lineHeight: 16,
+    textTransform: 'uppercase',
+    textAlign: 'center',
+  },
+  textOnline: {
+    fontStyle: 'bold',
+  },
+  viewOnline: {
+    backgroundColor: Colors.LightGreen,
+    borderWidth: 0,
+  },
+});

package/src/commons/SubUnit/ShortDetail.js

@@ -21,7 +21,7 @@ const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
   Device.screenWidth - 32
 );
 
-const ShortDetailSubUnit = ({ unit, station }) => {
+const ShortDetailSubUnit = ({ unit, station, isOwner }) => {
   const t = useTranslations();
   const { navigate } = useNavigation();
 
@@ -100,11 +100,12 @@ const ShortDetailSubUnit = ({ unit, station }) => {
 
   const handleOnAddNew = () => {
     navigate(Routes.AddGatewayStack, {
-      screen: Routes.FirstWarning,
+      screen: Routes.SelectDeviceType,
       params: {
-        stationId: station?.id,
         unitId: unit.id,
         unitName: unit.name,
+        stationId: station?.id,
+        stationName: station?.name,
       },
     });
   };
@@ -154,7 +155,9 @@ const ShortDetailSubUnit = ({ unit, station }) => {
                 );
             }
           })}
-        <ItemAddNew title={t('add_new_device')} onAddNew={handleOnAddNew} />
+        {isOwner && (
+          <ItemAddNew title={t('add_new_device')} onAddNew={handleOnAddNew} />
+        )}
       </View>
     </Section>
   );

package/src/commons/SubUnit/__test__/ShortDetail.test.js

@@ -72,6 +72,7 @@ describe('test ShortDetail Subunit', () => {
         id: 71,
         name: 'Station 1',
       },
+      isOwner: true,
       isNetworkConnected: true,
       isGGHomeConnected: true,
     };
@@ -171,8 +172,9 @@ describe('test ShortDetail Subunit', () => {
     });
     await mock.request(keyPermission.CAMERA);
     expect(mockedNavigate).toHaveBeenCalledWith(Routes.AddGatewayStack, {
-      screen: Routes.FirstWarning,
+      screen: Routes.SelectDeviceType,
       params: {
+        stationName: props.station.name,
         stationId: props.station.id,
         unitId: props.unit.id,
         unitName: props.unit.name,

package/src/commons/index.js

@@ -16,7 +16,10 @@ import RadioCircle from './RadioCircle';
 import { CircleButton } from './CircleButton';
 import HorizontalPicker from './HorizontalPicker';
 import FullLoading from './FullLoading';
-
+import Text from './Text';
+import { HeaderCustom } from './Header';
+import StatusBox from './StatusBox';
+import WrapHeaderScrollable from './Sharing/WrapHeaderScrollable';
 export {
   ButtonPopup,
   CircleView,
@@ -36,4 +39,8 @@ export {
   CircleButton,
   HorizontalPicker,
   FullLoading,
+  Text,
+  HeaderCustom,
+  StatusBox,
+  WrapHeaderScrollable,
 };

package/src/configs/API.js

@@ -211,6 +211,10 @@ const API = {
     GET_TEMPLATES: '/property_manager/iot_dashboard/dev_mode/templates/',
     GET_WIDGETS: (templateId) =>
       `/property_manager/iot_dashboard/dev_mode/templates/${templateId}/list_widgets/`,
+    GATEWAY: {
+      LIST: () => '/chip_manager/developer_mode_chips/',
+      DETAIL: (id) => `/chip_manager/developer_mode_chips/${id}/`,
+    },
   },
 };
 

package/src/configs/AccessibilityLabel.js

@@ -638,7 +638,8 @@ export default {
   BUTTON_CANCEL_EDIT_ACTION_LIST: 'BUTTON_CANCEL_EDIT_ACTION_LIST',
   BUTTON_SAVE_EDIT_ACTION_LIST: 'BUTTON_SAVE_EDIT_ACTION_LIST',
   BUTTON_REMOVE_EDIT_ACTION_LIST: 'BUTTON_REMOVE_EDIT_ACTION_LIST',
-
+  // GATEWAY
+  LIST_GATEWAY: 'LIST_GATEWAY',
   //Notification
   CUSTOM_TEXT: 'CUSTOM_TEXT',
   //ButtonWrapper

package/src/configs/Colors.js

@@ -60,6 +60,7 @@ export const Colors = {
   Gray17: '#D3D3D3',
   Gray18: '#9B9A9B',
   Gray19: '#E5E5E5',
+  Gray20: '#808080',
 
   // Range Green
   Green1: '#F6FFED',

package/src/screens/AddCommon/__test__/SelectSubUnit.test.js

@@ -63,7 +63,7 @@ describe('Test SelectSubUnit container', () => {
   let tree;
   const list_type = ['AddHassiDevice'];
   const result = [
-    '',
+    'Add new Sub-unit',
     '',
     'Select a sub-unit that you want to add this device in',
   ];
@@ -76,7 +76,7 @@ describe('Test SelectSubUnit container', () => {
       });
       const instance = tree.root;
       const button = instance.findAllByType(TouchableOpacity);
-      expect(button.length).toBe(3);
+      expect(button.length).toBe(4);
       const button1 = instance.findAllByType(Text);
       expect(button1[1].props.children).toEqual(result[i]);
     });

package/src/screens/AddNewGateway/ConnectingDevice.js

@@ -10,23 +10,27 @@ const ConnectingDevice = ({
   onReady,
   unitId,
   stationId,
+  stationName,
   chipId,
   sensorId,
+  addDeviceType,
 }) => {
   const { navigate } = useNavigation();
 
   const [renameParams, setRenameParams] = useState({
     unitId,
     stationId,
+    stationName,
     chipId,
     sensorId,
+    addDeviceType,
   });
 
   const complete = useCallback(
     (deviceInfo) => {
-      navigate(Routes.RenameNewDevices, renameParams);
+      navigate(Routes.RenameNewDevices, { ...renameParams, chipId, sensorId });
     },
-    [navigate, renameParams]
+    [chipId, navigate, renameParams, sensorId]
   );
 
   const onMessage = useCallback(

package/src/screens/AddNewGateway/ConnectingModbusDevice.js

@@ -8,7 +8,8 @@ import ConnectingDevice from './ConnectingDevice';
 
 const ConnectingModbusDevice = ({ route }) => {
   const t = useTranslations();
-  const { unitId, stationId, chipId, qrData } = route?.params || {};
+  const { unitId, stationId, stationName, chipId, qrData } =
+    route?.params || {};
   const [sensorId, setSensorId] = useState(null);
   const { goBack } = useNavigation();
 
@@ -46,12 +47,13 @@ const ConnectingModbusDevice = ({ route }) => {
 
   return (
     <ConnectingDevice
-      title={t('connecting_modbus_device')}
+      title={t('connect_device')}
       initState={t('connecting_to_gateway')}
       onReady={onReady}
       fail={addingModbusDeviceFail}
       unitId={unitId}
       stationId={stationId}
+      stationName={stationName}
       chipId={chipId}
       sensorId={sensorId}
     />

package/src/screens/AddNewGateway/ConnectingWifiDevice.js

@@ -8,8 +8,15 @@ import ConnectingDevice from './ConnectingDevice';
 
 const ConnectingWifiDevice = ({ route }) => {
   const t = useTranslations();
-  const { unitId, stationId, gateway, selectedWifi, qrData } =
-    route?.params || {};
+  const {
+    unitId,
+    stationId,
+    stationName,
+    gateway,
+    selectedWifi,
+    qrData,
+    addDeviceType,
+  } = route?.params || {};
   const [chipId, setChipId] = useState(null);
   const { goBack } = useNavigation();
 
@@ -47,25 +54,26 @@ const ConnectingWifiDevice = ({ route }) => {
       setChipId(data.id);
     },
     [
-      qrData,
       gateway,
-      addingWifiDeviceFail,
+      selectedWifi,
       unitId,
+      qrData?.secret,
       stationId,
-      selectedWifi.ssid,
-      selectedWifi.password,
+      addingWifiDeviceFail,
     ]
   );
 
   return (
     <ConnectingDevice
-      title={t('connecting_wifi_device')}
+      title={t('connect_device')}
       fail={addingWifiDeviceFail}
       initState={t('connecting_to_device')}
       onReady={onReady}
       unitId={unitId}
       stationId={stationId}
+      stationName={stationName}
       chipId={chipId}
+      addDeviceType={addDeviceType}
     />
   );
 };

package/src/screens/AddNewGateway/ConnectingWifiGuide.js

@@ -23,7 +23,7 @@ import AccessibilityLabel from '../../configs/AccessibilityLabel';
 
 const ConnectingWifiGuide = ({ route }) => {
   const t = useTranslations();
-  const { qrData, unitId, stationId } = route?.params || {};
+  const { qrData, unitId, stationId, addDeviceType } = route?.params || {};
   const { navigate, goBack } = useNavigation();
   const [wifiList, setWifiList] = useState([]);
   const [currentState, setCurrentState] = useState(0);
@@ -84,7 +84,7 @@ const ConnectingWifiGuide = ({ route }) => {
       } catch (e) {
         Alert.alert(
           t('cannot_connect_to_device_wifi'),
-          t('try to turn on device or try again'),
+          t('try_turn_on_device_or_try_again'),
           buttons
         );
         return;
@@ -128,9 +128,10 @@ const ConnectingWifiGuide = ({ route }) => {
         stationId,
         wifiList,
         qrData: qrData,
+        addDeviceType,
       });
     }
-  }, [navigate, qrData, stationId, unitId, wifiList]);
+  }, [addDeviceType, navigate, qrData, stationId, unitId, wifiList]);
 
   return (
     <SafeAreaView style={styles.container}>

package/src/screens/AddNewGateway/ConnectingZigbeeDevice.js

@@ -9,7 +9,7 @@ import ConnectingDevice from './ConnectingDevice';
 const ConnectingZigbeeDevice = ({ route }) => {
   const t = useTranslations();
   const { goBack } = useNavigation();
-  const { unitId, stationId, chipId } = route?.params || {};
+  const { unitId, stationId, stationName, chipId } = route?.params || {};
   const [sensorId, setSensorId] = useState(null);
 
   const fail = useCallback(
@@ -46,12 +46,13 @@ const ConnectingZigbeeDevice = ({ route }) => {
 
   return (
     <ConnectingDevice
-      title={t('connecting_zigbee_device')}
+      title={t('connect_device')}
       fail={fail}
       initState={t('connecting_to_gateway')}
       onReady={onReady}
       unitId={unitId}
       stationId={stationId}
+      stationName={stationName}
       chipId={chipId}
       sensorId={sensorId}
     />