@eohjsc/react-native-smart-city 0.3.93 → 0.3.94

package/package.json

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

package/src/commons/SubUnit/OneTap/ItemOneTap.js

@@ -19,99 +19,97 @@ import { useNavigation } from '@react-navigation/native';
 import Routes from '../../../utils/Route';
 import { AccessibilityLabel, AUTOMATE_TYPE } from '../../../configs/Constants';
 
-const ItemOneTap = memo(
-  ({ isOwner, automate = {}, unit, wrapSyles, onPressItem }) => {
-    const { navigate } = useNavigation();
-    const { id, type, script, activate_at, author = '' } = automate;
-    const t = useTranslations();
+const ItemOneTap = memo(({ automate = {}, wrapSyles, onPressItem }) => {
+  const { navigate } = useNavigation();
+  const { id, type, script, activate_at, author = '' } = automate;
+  const t = useTranslations();
 
-    const goToDetail = useCallback(() => {
-      navigate(Routes.ScriptDetail, {
-        id,
-        preAutomate: automate,
-      });
-    }, [automate, navigate, id]);
+  const goToDetail = useCallback(() => {
+    navigate(Routes.ScriptDetail, {
+      id,
+      preAutomate: automate,
+    });
+  }, [automate, navigate, id]);
 
-    const handleScriptAction = useCallback(async () => {
-      const { success } = await axiosPost(API.AUTOMATE.ACTION_ONE_TAP(id));
-      if (success) {
-        ToastBottomHelper.success(t('Activated successfully.'));
-      } else {
-        ToastBottomHelper.error(t('Activation failed.'));
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [id]);
+  const handleScriptAction = useCallback(async () => {
+    const { success } = await axiosPost(API.AUTOMATE.ACTION_ONE_TAP(id));
+    if (success) {
+      ToastBottomHelper.success(t('activated_successfully'));
+    } else {
+      ToastBottomHelper.error(t('activation_failed'));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
 
-    const displayIcon = () => {
-      const iconKit = script?.icon_kit;
-      if (iconKit) {
-        return <FImage source={{ uri: iconKit }} style={styles.iconSensor} />;
-      }
-      if (type === AUTOMATE_TYPE.ONE_TAP) {
-        return <OneTap />;
-      }
-      if (type === AUTOMATE_TYPE.VALUE_CHANGE) {
-        return <ValueChange />;
-      }
-      if ([AUTOMATE_TYPE.EVENT].includes(type)) {
-        return <Event />;
-      }
-      return <Schedule />;
-    };
-    const activateAt = activate_at
-      ? timeDifference(new Date(), moment(activate_at), true)
-      : null;
-    return (
-      <TouchableWithoutFeedback
-        onPress={onPressItem || goToDetail}
-        accessibilityLabel={`${AccessibilityLabel.AUTOMATE_SCRIPT_NAME}-${id}`}
-      >
-        <View style={[styles.container, wrapSyles]}>
-          <View style={styles.boxIcon}>
-            {displayIcon()}
-            {type === AUTOMATE_TYPE.ONE_TAP && (
-              <TouchableOpacity
-                accessibilityLabel={AccessibilityLabel.AUTOMATE_SCRIPT_ACTION}
-                onPress={handleScriptAction}
-              >
-                <CheckCircle />
-              </TouchableOpacity>
-            )}
-          </View>
-          <TouchableOpacity
-            accessibilityLabel={AccessibilityLabel.GO_DETAIL}
-            onPress={onPressItem || goToDetail}
+  const displayIcon = () => {
+    const iconKit = script?.icon_kit;
+    if (iconKit) {
+      return <FImage source={{ uri: iconKit }} style={styles.iconSensor} />;
+    }
+    if (type === AUTOMATE_TYPE.ONE_TAP) {
+      return <OneTap />;
+    }
+    if (type === AUTOMATE_TYPE.VALUE_CHANGE) {
+      return <ValueChange />;
+    }
+    if ([AUTOMATE_TYPE.EVENT].includes(type)) {
+      return <Event />;
+    }
+    return <Schedule />;
+  };
+  const activateAt = activate_at
+    ? timeDifference(new Date(), moment(activate_at), true)
+    : null;
+  return (
+    <TouchableWithoutFeedback
+      onPress={onPressItem || goToDetail}
+      accessibilityLabel={`${AccessibilityLabel.AUTOMATE_SCRIPT_NAME}-${id}`}
+    >
+      <View style={[styles.container, wrapSyles]}>
+        <View style={styles.boxIcon}>
+          {displayIcon()}
+          {type === AUTOMATE_TYPE.ONE_TAP && (
+            <TouchableOpacity
+              accessibilityLabel={AccessibilityLabel.AUTOMATE_SCRIPT_ACTION}
+              onPress={handleScriptAction}
+            >
+              <CheckCircle />
+            </TouchableOpacity>
+          )}
+        </View>
+        <TouchableOpacity
+          accessibilityLabel={AccessibilityLabel.GO_DETAIL}
+          onPress={onPressItem || goToDetail}
+        >
+          <Text
+            numberOfLines={1}
+            semibold
+            size={14}
+            color={Colors.Gray9}
+            type="Body"
+            style={styles.name}
           >
+            {script?.name}
+          </Text>
+          <Text numberOfLines={1} type={'Label'} color={Colors.Gray7}>
+            {t('created_by', { name: author })}
+          </Text>
+          <View style={styles.descriptionContainer}>
             <Text
               numberOfLines={1}
               semibold
-              size={14}
-              color={Colors.Gray9}
-              type="Body"
-              style={styles.name}
+              size={12}
+              color={Colors.Gray8}
+              type="Label"
             >
-              {script?.name}
+              {activateAt && t('activated_time', { time: activateAt })}
             </Text>
-            <Text numberOfLines={1} type={'Label'} color={Colors.Gray7}>
-              {`${t('create_by')} ${author}`}
-            </Text>
-            <View style={styles.descriptionContainer}>
-              <Text
-                numberOfLines={1}
-                semibold
-                size={12}
-                color={Colors.Gray8}
-                type="Label"
-              >
-                {activateAt && t('activated_time', { time: activateAt })}
-              </Text>
-              <IconOutline name="right" size={12} />
-            </View>
-          </TouchableOpacity>
-        </View>
-      </TouchableWithoutFeedback>
-    );
-  }
-);
+            <IconOutline name="right" size={12} />
+          </View>
+        </TouchableOpacity>
+      </View>
+    </TouchableWithoutFeedback>
+  );
+});
 
 export default ItemOneTap;

package/src/commons/SubUnit/OneTap/__test__/SubUnitAutomate.test.js

@@ -16,11 +16,13 @@ import Routes from '../../../../utils/Route';
 import api from '../../../../utils/Apis/axios';
 import { API } from '../../../../configs';
 import { useNavigation } from '@react-navigation/native';
+import { ToastBottomHelper } from '../../../../utils/Utils';
+import { getTranslate } from '../../../../utils/I18n';
 
 const mock = new MockAdapter(api.axiosInstance);
 
-const wrapComponent = (data) => (
-  <SCProvider initState={mockSCStore({})}>
+const wrapComponent = (data, storeData = {}) => (
+  <SCProvider initState={mockSCStore(storeData)}>
     <SubUnitAutomate {...data} />
   </SCProvider>
 );
@@ -33,33 +35,34 @@ jest.mock('react-redux', () => {
 });
 
 let tree;
-let data = {
-  isOwner: true,
-  listAutomate: [
-    {
-      text: 'Scenario',
-      data: [
-        {
-          id: 1,
-          user: 6,
-          type: 'one_tap',
-          activate_at: '2021-09-17T05:30:00Z',
-          script: {
-            name: 'Joshua Ray',
-            icon: '',
-            icon_kit: '',
-          },
-        },
-      ],
-      type: AUTOMATE_TABS.SCENARIO,
-    },
-  ],
-};
+let data;
 
 describe('test Item', () => {
   const mockedNavigate = useNavigation().navigate;
   beforeEach(() => {
     mockedNavigate.mockClear();
+    data = {
+      isOwner: true,
+      listAutomate: [
+        {
+          text: 'Scenario',
+          data: [
+            {
+              id: 1,
+              user: 6,
+              type: 'one_tap',
+              activate_at: '2021-09-17T05:30:00Z',
+              script: {
+                name: 'Joshua Ray',
+                icon: '',
+                icon_kit: '',
+              },
+            },
+          ],
+          type: AUTOMATE_TABS.SCENARIO,
+        },
+      ],
+    };
   });
 
   it('render SubUnitAutomate isOwner and handleOnAddNew', async () => {
@@ -189,6 +192,7 @@ describe('test Item', () => {
       preAutomate: data.listAutomate[0].data[0],
     });
   });
+
   it('render SubUnitAutomate script schedule and handleOnAddNew item automate', async () => {
     data.isOwner = false;
     data.type = 'schedule';
@@ -242,6 +246,46 @@ describe('test Item', () => {
     expect(goDetail).toHaveLength(1);
   });
 
+  it('add new automate when reach maximum', async () => {
+    data.isOwner = false;
+    data.type = 'schedule';
+    data.unit = { id: 1 };
+
+    await act(async () => {
+      tree = await create(
+        wrapComponent(data, {
+          auth: {
+            account: {
+              user: {
+                permissions: {
+                  max_automations_per_unit: 0,
+                },
+              },
+            },
+          },
+        })
+      );
+    });
+
+    const instance = tree.root;
+    const item = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.SUB_UNIT_ADD_DEVICE &&
+        el.type === TouchableWithoutFeedback
+    );
+
+    expect(item).toHaveLength(1);
+    const spyToastError = jest.spyOn(ToastBottomHelper, 'error');
+    await act(async () => {
+      await item[0].props.onPress();
+    });
+    expect(mockedNavigate).not.toBeCalled();
+    expect(spyToastError).toBeCalledWith(
+      getTranslate('en', 'reach_max_automations_per_unit')
+    );
+  });
+
   it('render click select option by automation', async () => {
     await act(async () => {
       tree = await create(wrapComponent(data));

package/src/commons/SubUnit/OneTap/index.js

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { TouchableOpacity, View } from 'react-native';
 
 import { Section } from '../..';
@@ -15,15 +21,29 @@ import {
 import Text from '../../Text/index.js';
 
 import styles from './OneTapStyles.js';
+import { ToastBottomHelper } from '../../../utils/Utils';
+import { useBackendPermission } from '../../../utils/Permission/backend';
 
 const SubUnitAutomate = ({ isOwner, listAutomate, unit, wrapItemStyle }) => {
   const t = useTranslations();
   const { navigate } = useNavigation();
   const [automates, setAutomates] = useState(listAutomate[0]);
   const [indexAutomate, setIndexAutomate] = useState(0);
+  const permissions = useBackendPermission();
   const { name: currentScreen } = useRoute();
 
+  const totalAutomates = useMemo(
+    () => listAutomate.reduce((acc, item) => item.data.length + acc, 0),
+    [listAutomate]
+  );
+
   const handleOnAddNew = () => {
+    if (unit?.id) {
+      if (permissions.max_automations_per_unit <= totalAutomates) {
+        ToastBottomHelper.error(t('reach_max_automations_per_unit'));
+        return;
+      }
+    }
     switch (automates.type) {
       case AUTOMATE_TABS.SCENARIO:
         navigate(Routes.ScenarioName, {

package/src/configs/API.js

@@ -215,6 +215,7 @@ const API = {
     },
     GATEWAY: {
       LIST: () => '/chip_manager/developer_mode_chips/',
+      COUNT: () => '/chip_manager/developer_mode_chips/count/',
       DETAIL: (id) => `/chip_manager/developer_mode_chips/${id}/`,
       REBOOT: (id) => `/chip_manager/developer_mode_chips/${id}/reboot_chip/`,
     },

package/src/screens/AddNewGateway/ConnectingDevice.js

@@ -81,6 +81,13 @@ const ConnectingDevice = ({
         if (found) {
           return { ...oldParams };
         }
+        if (data?.type === 'rejoin') {
+          return {
+            ...oldParams,
+            isRejoin: true,
+            sensorId: data?.sensor?.id,
+          };
+        }
         return oldParams;
       });
     },

package/src/screens/AddNewGateway/RenameNewDevices.js

@@ -21,7 +21,7 @@ const RenameNewDevices = memo(({ route }) => {
   const t = useTranslations();
   const { dispatch } = useNavigation();
 
-  const { unit, subUnit, chipId, sensorId, addDeviceType } =
+  const { unit, subUnit, chipId, sensorId, addDeviceType, isRejoin } =
     route?.params || {};
   const [selectedItem, setSelectedItem] = useState({});
   const [isCanRename, setIsCanRename] = useState(false);
@@ -268,7 +268,7 @@ const RenameNewDevices = memo(({ route }) => {
             size={20}
             style={styles.textStatus}
           >
-            {t('successfully_connected')}
+            {t(`successfully_${isRejoin ? 'rejoined' : 'connected'}`)}
           </Text>
           <Text size={14} color={Colors.Gray9}>
             {[unit?.name, subUnit?.name].filter(Boolean).join(' - ')}

package/src/screens/AddNewGateway/SelectDeviceType.js

@@ -14,13 +14,19 @@ import AddZigbeeDeviceIcon from '../../../assets/images/AddNewDevice/add-zigbee-
 import styles from './SelectDeviceTypeStyles';
 import AccessibilityLabel from '../../configs/AccessibilityLabel';
 import { DEVICE_TYPE } from '../../configs/Constants';
+import { useBackendPermission } from '../../utils/Permission/backend';
+import { axiosGet } from '../../utils/Apis/axios';
+import API from '../../configs/API';
+import { ToastBottomHelper } from '../../utils/Utils';
 
 const SelectDeviceGrid = ({ options, onSelect }) => {
   const [selectIndexes, setSelectIndexes] = useState();
   const onSelectOption = useCallback(
     (value) => () => {
+      if (onSelect(value) === false) {
+        return;
+      }
       setSelectIndexes(value);
-      onSelect(value);
     },
     [onSelect]
   );
@@ -51,17 +57,33 @@ const SelectDeviceGrid = ({ options, onSelect }) => {
   );
 };
 
+const getPermissionCode = (deviceType) => {
+  switch (deviceType) {
+    case 'gateway_qr':
+      return 'plug_and_play_gateway';
+    case 'wifi_device_qr':
+      return 'plug_and_play_wifi';
+    case 'modbus_device_qr':
+      return 'plug_and_play_modbus';
+    case 'zigbee':
+    default:
+      return 'plug_and_play_zigbee';
+  }
+};
+
 const SelectDeviceType = ({ route }) => {
   const t = useTranslations();
   const { unit, subUnit } = route?.params || {};
   const { navigate, goBack } = useNavigation();
+  const [unitCountSummary, setUnitCountSummary] = useState();
   const [addType, setAddType] = useState();
   const [selectedAddType, setSelectedAddType] = useState();
+  const permissions = useBackendPermission();
 
   const listDeviceType = useMemo(() => {
     const list = [
       {
-        id: 1,
+        id: 'gateway_qr',
         image: <AddGatewayIcon width={60} height={60} />,
         route: Routes.ScanGatewayQR,
         data: {
@@ -71,7 +93,7 @@ const SelectDeviceType = ({ route }) => {
         subtitle: t('central_controller'),
       },
       {
-        id: 2,
+        id: 'wifi_device_qr',
         image: <AddWifiDeviceIcon width={60} height={60} />,
         route: subUnit?.id
           ? Routes.ScanWifiDeviceQR
@@ -85,7 +107,7 @@ const SelectDeviceType = ({ route }) => {
         subtitle: t('device_connect_without_gateway'),
       },
       {
-        id: 3,
+        id: 'modbus_device_qr',
         image: <AddModbusDeviceIcon width={60} height={60} />,
         route: subUnit?.id ? Routes.ScanModbusQR : Routes.SelectDeviceSubUnit,
         data: {
@@ -97,7 +119,7 @@ const SelectDeviceType = ({ route }) => {
         subtitle: t('device_connect_directly_to_the_gateway'),
       },
       {
-        id: 4,
+        id: 'zigbee',
         image: <AddZigbeeDeviceIcon width={60} height={60} />,
         route: subUnit?.id
           ? Routes.ConnectRouterGuide
@@ -111,19 +133,43 @@ const SelectDeviceType = ({ route }) => {
         subtitle: t('device_connect_remotely_to_the_gateway'),
       },
     ];
-    if (!!subUnit?.id) {
+    if (subUnit?.id) {
       list.shift();
     }
     return list;
   }, [unit, t, subUnit]);
 
   const onRight = useCallback(() => {
-    if (selectedAddType?.route && selectedAddType?.data) {
-      navigate(selectedAddType?.route, selectedAddType?.data);
+    if (!selectedAddType?.route) {
+      return;
     }
+
+    navigate(selectedAddType?.route, selectedAddType?.data);
   }, [navigate, selectedAddType?.data, selectedAddType?.route]);
 
   const handleOnSelect = (itemSelect) => {
+    const needPermission = getPermissionCode(itemSelect);
+    if (!permissions?.[needPermission]) {
+      ToastBottomHelper.error(t(`no_permission_${needPermission}`));
+      return false;
+    }
+
+    if (['gateway_qr', 'wifi_device_qr'].includes(itemSelect)) {
+      if (permissions?.max_chips_per_unit <= unitCountSummary?.total_chips) {
+        ToastBottomHelper.error(t('reach_max_chips_per_unit'));
+        return false;
+      }
+    }
+
+    if (['wifi_device_qr', 'modbus_device_qr', 'zigbee'].includes(itemSelect)) {
+      if (
+        permissions?.max_configs_per_unit <= unitCountSummary?.total_configs
+      ) {
+        ToastBottomHelper.error(t('reach_max_configs_per_unit'));
+        return false;
+      }
+    }
+
     setAddType(itemSelect);
   };
 
@@ -131,6 +177,18 @@ const SelectDeviceType = ({ route }) => {
     setSelectedAddType(listDeviceType.find((item) => item.id === addType));
   }, [addType, listDeviceType]);
 
+  useEffect(() => {
+    const fetchCountSummary = async () => {
+      const { success, data } = await axiosGet(API.DEV_MODE.GATEWAY.COUNT(), {
+        unit: unit?.id,
+      });
+      if (success) {
+        setUnitCountSummary(data);
+      }
+    };
+    fetchCountSummary();
+  }, [unit?.id]);
+
   return (
     <View style={styles.container}>
       <HeaderCustom title={t('choose_type_of_device')} isShowSeparator />
@@ -141,7 +199,7 @@ const SelectDeviceType = ({ route }) => {
         leftTitle={t('cancel')}
         onLeftClick={goBack}
         rightTitle={t('text_next')}
-        rightDisabled={!addType}
+        rightDisabled={!unitCountSummary || !addType}
         onRightClick={onRight}
       />
     </View>

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

@@ -121,4 +121,39 @@ describe('Test connecting modbus device', () => {
       sensorId: 1,
     });
   });
+
+  it('receive sensor from channel after rejoin zigbee', async () => {
+    mock.onPost().reply(200, {});
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const channels = getPusher().channels;
+    let channel;
+    for (const key in channels) {
+      if (key.indexOf('cache-') === 0) {
+        channel = channels[key];
+      }
+    }
+    await act(async () => {
+      await channel.trigger('progress', {
+        data: { sensor: { id: 1, name: 'sensor' }, type: 'rejoin' },
+      });
+    });
+    await act(async () => {
+      await channel.trigger('progress', { success: 1 });
+    });
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.RenameNewDevices, {
+      addDeviceType: undefined,
+      unit: {
+        id: 1,
+      },
+      subUnit: {
+        id: 2,
+        station: 'Station 2',
+      },
+      chipId: 3,
+      sensorId: 1,
+      isRejoin: true,
+    });
+  });
 });