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

package/src/navigations/UnitStack.js

@@ -27,6 +27,8 @@ import SelectMonitorDevices from '../screens/Automate/AddNewAction/SelectMonitor
 import SetupConfigCondition from '../screens/Automate/AddNewAction/SetupConfigCondition';
 import SetupScriptDelay from '../screens/Automate/AddNewAction/SetupScriptDelay';
 import SetupScriptNotify from '../screens/Automate/AddNewAction/SetupScriptNotify';
+import SetupScriptEmail from '../screens/Automate/AddNewAction/SetupScriptEmail';
+import SetupScriptReceiverEmail from '../screens/Automate/AddNewAction/SetupScriptReceiverEmail';
 import AddAutomationTypeSmart from '../screens/Automate/AddNewAutoSmart/AddAutomationTypeSmart';
 import AddUnknownTypeSmart from '../screens/Automate/AddNewAutoSmart/AddUnknownTypeSmart';
 import EditActionsList from '../screens/Automate/EditActionsList';
@@ -53,6 +55,7 @@ import UnitMemberList from '../screens/Sharing/UnitMemberList';
 import SideMenuDetail from '../screens/SideMenuDetail';
 import EditSubUnit from '../screens/SubUnit/EditSubUnit';
 import ManageSubUnit from '../screens/SubUnit/ManageSubUnit';
+import RearrangeSubUnit from '../screens/SubUnit/RearrageSubUnit';
 import TDSGuide from '../screens/TDSGuide';
 import ChooseLocation from '../screens/Unit/ChooseLocation';
 import UnitDetail from '../screens/Unit/Detail';
@@ -68,6 +71,7 @@ import { ToastBottomHelper } from '../utils/Utils';
 import { HanetCameraStack } from './HanetCameraStack';
 import { styles } from './UnitStackStyles';
 import { bleManager } from '../utils/bluetooth';
+import UpdateReceiverEmailScript from '../screens/Automate/EditActionsList/UpdateReceiverEmailScript';
 
 const Stack = createNativeStackNavigator();
 
@@ -260,6 +264,13 @@ export const UnitStack = memo((props) => {
           headerTitle: '',
         }}
       />
+      <Stack.Screen
+        name={Route.RearrangeSubUnit}
+        component={RearrangeSubUnit}
+        options={{
+          headerShown: false,
+        }}
+      />
       <Stack.Screen
         name={Route.DeviceDetail}
         component={DeviceDetail}
@@ -414,6 +425,27 @@ export const UnitStack = memo((props) => {
           headerShown: false,
         }}
       />
+      <Stack.Screen
+        name={Route.SetupScriptEmail}
+        component={SetupScriptEmail}
+        options={{
+          headerShown: false,
+        }}
+      />
+      <Stack.Screen
+        name={Route.SetupScriptReceiverEmail}
+        component={SetupScriptReceiverEmail}
+        options={{
+          headerShown: false,
+        }}
+      />
+      <Stack.Screen
+        name={Route.UpdateReceiverEmailScript}
+        component={UpdateReceiverEmailScript}
+        options={{
+          headerShown: false,
+        }}
+      />
       <Stack.Screen
         name={Route.AddAutomationTypeSmart}
         component={AddAutomationTypeSmart}

package/src/screens/AddNewGateway/ConnectingWifiDevice.js

@@ -43,10 +43,10 @@ const ConnectingWifiDevice = ({ route }) => {
               code,
               host: qrData?.host,
               secret: qrData?.secret,
-              name: gateway?.model,
+              name: gateway?.name || gateway?.model,
               station: subUnit?.id,
-              wifi_ssid: selectedWifi.ssid, // for storing
-              wifi_pass: selectedWifi.password, // for storing
+              wifi_ssid: selectedWifi?.ssid, // for storing
+              wifi_pass: selectedWifi?.password, // for storing
               channel_name: channelName,
             }
           );
@@ -65,10 +65,11 @@ const ConnectingWifiDevice = ({ route }) => {
       code,
       qrData?.host,
       qrData?.secret,
+      gateway?.name,
       gateway?.model,
       subUnit?.id,
-      selectedWifi.ssid,
-      selectedWifi.password,
+      selectedWifi?.ssid,
+      selectedWifi?.password,
       addingWifiDeviceFail,
     ]
   );
@@ -82,7 +83,7 @@ const ConnectingWifiDevice = ({ route }) => {
     });
     return () => unsubscribe && unsubscribe();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedWifi.ssid, channelName]);
+  }, [selectedWifi?.ssid, channelName]);
 
   return (
     <ConnectingDevice

package/src/screens/AddNewGateway/ScanDeviceLocal.js

@@ -0,0 +1,267 @@
+import { useNavigation } from '@react-navigation/native';
+import LottieView from 'lottie-react-native';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  FlatList,
+  TouchableOpacity,
+  ActivityIndicator,
+  View,
+} from 'react-native';
+import Zeroconf from 'react-native-zeroconf';
+import { v4 as uuidv4 } from 'uuid';
+
+import LanIcon from '../../../assets/images/lan.svg';
+import {
+  FullLoading,
+  RadioCircle,
+  ViewButtonBottom,
+  HeaderCustom,
+  Text,
+} from '../../commons';
+import { DEVICE_TYPE } from '../../configs/Constants';
+import AccessibilityLabel from '../../configs/AccessibilityLabel';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import LoadingCircle from '../../Images/Common/loading-circle.json';
+import Routes from '../../utils/Route';
+import { ToastBottomHelper } from '../../utils/Utils';
+import { useConnectDevice } from './hooks/useConnectDevice';
+import { useGateway } from '../AllGateway/hooks/useGateway';
+import styles from './ScanDeviceLocalStyles';
+
+let zeroconf;
+
+const DeviceItem = ({ item, setSelectedDevice, selectedDevice }) => {
+  const handleSelectDevice = useCallback(
+    (device) => {
+      setSelectedDevice(device);
+    },
+    [setSelectedDevice]
+  );
+
+  return (
+    <TouchableOpacity
+      onPress={() => handleSelectDevice(item)}
+      accessibilityLabel={`${AccessibilityLabel.SELECT_DEVICE}-${item.host}`}
+    >
+      <View style={styles.listItem}>
+        <RadioCircle
+          active={selectedDevice?.host === item.host}
+          accessibilityLabel={`${AccessibilityLabel.SELECT_RADIO_DEVICE}-${item.host}`}
+        />
+        <View style={styles.textItem}>
+          <Text type="H4">{item.name}</Text>
+        </View>
+        <View style={styles.lanIcon}>
+          <LanIcon />
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const ScanDeviceLocal = ({ route }) => {
+  const { unit, subUnit } = route?.params || {};
+  const t = useTranslations();
+  const { navigate, goBack } = useNavigation();
+  const { detailChipQr, fetchChipQrDetail } = useGateway();
+
+  const [deviceList, setDeviceList] = useState([]);
+  const [selectedDevice, setSelectedDevice] = useState();
+  const [isShowLoading, setIsShowLoading] = useState(false);
+
+  const { deviceInfo, fetchDeviceInfo, sendConfigToDevice } = useConnectDevice(
+    selectedDevice?.host
+  );
+
+  const code = useMemo(() => {
+    return uuidv4();
+  }, []);
+
+  const rightDisabled = useMemo(() => {
+    if (!deviceInfo?.secret) {
+      return true;
+    }
+    return deviceInfo.secret !== detailChipQr?.secret;
+  }, [deviceInfo?.secret, detailChipQr?.secret]);
+
+  const goToConnectingDevice = useCallback(() => {
+    navigate(Routes.ConnectingWifiDevice, {
+      unit,
+      subUnit: subUnit,
+      addDeviceType: deviceInfo?.type,
+      qrData: detailChipQr,
+      gateway: deviceInfo,
+      code,
+    });
+  }, [deviceInfo, detailChipQr, code, navigate, subUnit, unit]);
+
+  const goToSelectSubUnit = useCallback(() => {
+    navigate(Routes.SelectDeviceSubUnit, {
+      unit,
+      deviceType: DEVICE_TYPE.SCAN_DEVICE,
+      qrData: detailChipQr,
+      gateway: deviceInfo,
+      code,
+    });
+  }, [deviceInfo, detailChipQr, code, navigate, unit]);
+
+  const onConnectingDevice = useCallback(async () => {
+    setIsShowLoading(true);
+    const success = await sendConfigToDevice({
+      token: code,
+      host: detailChipQr?.host,
+      port: detailChipQr?.port,
+    });
+    setIsShowLoading(false);
+    if (!success) {
+      ToastBottomHelper.error(t('error_sending_data_to_wifi_device'));
+      return;
+    }
+    if (!subUnit && deviceInfo?.type !== 'gateway') {
+      goToSelectSubUnit();
+      return;
+    }
+    goToConnectingDevice();
+  }, [
+    code,
+    subUnit,
+    deviceInfo?.type,
+    detailChipQr,
+    t,
+    sendConfigToDevice,
+    goToSelectSubUnit,
+    goToConnectingDevice,
+  ]);
+
+  const renderItem = useCallback(
+    ({ item }) => {
+      return (
+        <DeviceItem
+          item={item}
+          setSelectedDevice={setSelectedDevice}
+          selectedDevice={selectedDevice}
+        />
+      );
+    },
+    [selectedDevice, setSelectedDevice]
+  );
+
+  const handleGoBack = useCallback(() => {
+    if (zeroconf) {
+      zeroconf.stop();
+      zeroconf = null;
+    }
+    goBack();
+  }, [goBack]);
+
+  useEffect(() => {
+    try {
+      if (!zeroconf) {
+        zeroconf = new Zeroconf();
+      }
+
+      setDeviceList([]);
+
+      zeroconf.on('resolved', (service) => {
+        setDeviceList((prev) => {
+          const newList = [...prev];
+          const index = newList.findIndex(
+            (item) => item.host === service?.host
+          );
+          if (index === -1) {
+            newList.push(service);
+          }
+          return newList;
+        });
+      });
+
+      zeroconf.on('remove', (name) => {
+        setDeviceList((prev) => {
+          const newList = [...prev];
+          const index = newList.findIndex((item) => item.name === name);
+          if (index !== -1) {
+            newList.splice(index, 1);
+          }
+          return newList;
+        });
+      });
+
+      zeroconf.on('error', () => {
+        zeroconf.stop();
+        zeroconf.scan('plugandplay', 'tcp');
+      });
+
+      zeroconf.scan('plugandplay', 'tcp');
+      // eslint-disable-next-line no-empty
+    } catch (error) {}
+    return () => {
+      if (zeroconf) {
+        zeroconf.stop();
+        zeroconf = null;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (selectedDevice) {
+      fetchDeviceInfo();
+    }
+  }, [selectedDevice, fetchDeviceInfo]);
+
+  useEffect(() => {
+    if (deviceInfo) {
+      fetchChipQrDetail(deviceInfo?.secret);
+    }
+  }, [deviceInfo, fetchChipQrDetail]);
+
+  return (
+    <View style={styles.container}>
+      <HeaderCustom
+        onGoBack={handleGoBack}
+        title={t('device_scaned')}
+        isShowSeparator
+      />
+      {!deviceList.length ? (
+        <ActivityIndicator style={styles.containerLoading} />
+      ) : (
+        <>
+          <Text style={styles.subTitle} type="Body">
+            {t('select_device_and_connect')}
+          </Text>
+          <FlatList
+            style={styles.listContainer}
+            keyExtractor={(item) => item?.host}
+            data={deviceList}
+            renderItem={renderItem}
+            extraData={deviceList}
+            numColumns={1}
+          />
+        </>
+      )}
+
+      <ViewButtonBottom
+        leftTitle={t('cancel')}
+        onLeftClick={handleGoBack}
+        rightTitle={t('connect')}
+        rightDisabled={rightDisabled}
+        onRightClick={onConnectingDevice}
+        accessibilityLabelPrefix={AccessibilityLabel.PREFIX.SELECT_DEVICE}
+      />
+      {isShowLoading && (
+        <FullLoading
+          styleBackground={styles.backgroundLoading}
+          customIcon={
+            <LottieView
+              source={LoadingCircle}
+              autoPlay
+              loop
+              style={styles.loading}
+            />
+          }
+        />
+      )}
+    </View>
+  );
+};
+
+export default ScanDeviceLocal;

package/src/screens/AddNewGateway/ScanDeviceLocalStyles.js

@@ -0,0 +1,58 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.Gray2,
+  },
+  title: {
+    marginVertical: 16,
+    marginLeft: 16,
+  },
+  subTitle: {
+    fontSize: 14,
+    lineHeight: 22,
+    marginTop: 16,
+    marginLeft: 16,
+    marginBottom: 16,
+  },
+  listContainer: {
+    flex: 1,
+    borderWidth: 1,
+    backgroundColor: Colors.White,
+    borderRadius: 20,
+    borderColor: Colors.Gray4,
+  },
+  listItem: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderBottomColor: Colors.Gray4,
+    borderBottomWidth: 1,
+    paddingVertical: 16,
+    marginRight: 24,
+    marginLeft: 16,
+  },
+  textItem: {
+    flex: 1,
+    height: 'auto',
+    paddingLeft: 16,
+  },
+  lanIcon: {
+    paddingRight: 16,
+  },
+  loading: {
+    width: 40,
+    height: 40,
+  },
+  backgroundLoading: {
+    backgroundColor: Colors.Gray21,
+  },
+  containerLoading: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/screens/AddNewGateway/SelectDeviceSubUnit.js

@@ -6,7 +6,7 @@ import Routes from '../../utils/Route';
 import { DEVICE_TYPE } from '../../configs/Constants';
 
 const SelectDeviceSubUnit = ({ route }) => {
-  const { unit, deviceType } = route?.params || {};
+  const { unit, deviceType, ...rest } = route?.params || {};
   const t = useTranslations();
   const navigation = useNavigation();
   const onPressNext = useCallback(
@@ -30,9 +30,17 @@ const SelectDeviceSubUnit = ({ route }) => {
             subUnit: chosenSubUnit,
           });
           break;
+        case DEVICE_TYPE.SCAN_DEVICE:
+          navigation.navigate(Routes.ConnectingWifiDevice, {
+            unit,
+            subUnit: chosenSubUnit,
+            deviceType,
+            ...rest,
+          });
+          break;
       }
     },
-    [deviceType, navigation, unit]
+    [deviceType, navigation, unit, rest]
   );
   return (
     <SelectSubUnit

package/src/screens/AddNewGateway/SelectDeviceType.js

@@ -11,6 +11,7 @@ import AddGatewayIcon from '../../../assets/images/AddNewDevice/add-gateway-icon
 import AddWifiDeviceIcon from '../../../assets/images/AddNewDevice/add-wifi-device-icon.svg';
 import AddModbusDeviceIcon from '../../../assets/images/AddNewDevice/add-modbus-device-icon.svg';
 import AddZigbeeDeviceIcon from '../../../assets/images/AddNewDevice/add-zigbee-device-icon.svg';
+import AddScanDeviceIcon from '../../../assets/images/AddNewDevice/add-scan-device-icon.svg';
 import styles from './SelectDeviceTypeStyles';
 import AccessibilityLabel from '../../configs/AccessibilityLabel';
 import { DEVICE_TYPE } from '../../configs/Constants';
@@ -62,6 +63,7 @@ const getPermissionCode = (deviceType) => {
     case 'gateway_qr':
       return 'plug_and_play_gateway';
     case 'wifi_device_qr':
+    case 'scan_device':
       return 'plug_and_play_wifi';
     case 'modbus_device_qr':
       return 'plug_and_play_modbus';
@@ -132,6 +134,17 @@ const SelectDeviceType = ({ route }) => {
         title: t('zigbee'),
         subtitle: t('device_connect_remotely_to_the_gateway'),
       },
+      {
+        id: 'scan_device',
+        image: <AddScanDeviceIcon width={60} height={60} />,
+        route: Routes.ScanDeviceLocal,
+        data: {
+          unit,
+          subUnit,
+        },
+        title: t('scan'),
+        subtitle: t('device_connected_to_local_network'),
+      },
     ];
     if (subUnit?.id) {
       list.shift();
@@ -154,7 +167,7 @@ const SelectDeviceType = ({ route }) => {
       return false;
     }
 
-    if (['gateway_qr', 'wifi_device_qr'].includes(itemSelect)) {
+    if (['gateway_qr', 'wifi_device_qr', 'scan_device'].includes(itemSelect)) {
       if (permissions?.max_chips_per_unit <= unitCountSummary?.total_chips) {
         ToastBottomHelper.error(
           t('reach_max_chips_per_unit', {
@@ -167,7 +180,11 @@ const SelectDeviceType = ({ route }) => {
       }
     }
 
-    if (['wifi_device_qr', 'modbus_device_qr', 'zigbee'].includes(itemSelect)) {
+    if (
+      ['wifi_device_qr', 'scan_device', 'modbus_device_qr', 'zigbee'].includes(
+        itemSelect
+      )
+    ) {
       if (
         permissions?.max_configs_per_unit <= unitCountSummary?.total_configs
       ) {