@eohjsc/react-native-smart-city 0.3.96 → 0.3.98

package/package.json

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

package/src/commons/ActionGroup/__test__/OnOffTemplate.test.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { View } from 'react-native';
-import { useSelector } from 'react-redux';
 import { act, create } from 'react-test-renderer';
 
 import { DEVICE_TYPE, AccessibilityLabel } from '../../../configs/Constants';
@@ -92,11 +91,6 @@ describe('Test OnOffTemplate', () => {
     };
 
     sensor = { name: 'Sensor' };
-
-    const localState = {
-      isOnSwich: false,
-    };
-    useSelector.mockImplementation((getter) => getter(localState));
   });
 
   it('render with template OnOffSimpleActionTemplate', async () => {

package/src/commons/ActionGroup/__test__/OneBigButtonTemplate.test.js

@@ -1,8 +1,6 @@
-/* eslint-disable promise/prefer-await-to-callbacks */
 import React from 'react';
 import { create, act } from 'react-test-renderer';
 import { TouchableOpacity } from 'react-native';
-import { useSelector } from 'react-redux';
 
 import OneBigButtonTemplate from '../OneBigButtonTemplate';
 import { mockSCStore } from '../../../context/mockStore';
@@ -46,12 +44,6 @@ describe('Test OneBigButtonTemplate', () => {
   let sensor;
 
   beforeEach(() => {
-    const localState = {
-      isOnSwich: false,
-    };
-    useSelector.mockImplementation((cb) => {
-      return cb(localState);
-    });
     sensor = { name: 'Sensor' };
   });
 

package/src/commons/Dashboard/MyUnit/index.js

@@ -67,11 +67,17 @@ const MyUnit = ({ refreshing }) => {
     if (isNeedUpdateCache) {
       setAction(Action.IS_CHECK_CLEAR_CACHE_UNITS, false);
       const { success, data } = await axiosGet(API.UNIT.MY_UNITS(), {}, true);
-      success && setMyUnits(data);
+      if (success) {
+        setMyUnits(data);
+        setAction(Action.SET_MY_UNITS, data);
+      }
     } else {
       await fetchWithCache(API.UNIT.MY_UNITS(), {}, (response) => {
         const { success, data } = response;
-        success && setMyUnits(data);
+        if (success) {
+          setMyUnits(data);
+          setAction(Action.SET_MY_UNITS, data);
+        }
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/commons/Device/ProgressBar/__test__/ProgressBar.test.js

@@ -1,6 +1,4 @@
-/* eslint-disable promise/prefer-await-to-callbacks */
 import React from 'react';
-import { useSelector } from 'react-redux';
 import renderer, { act } from 'react-test-renderer';
 
 import ProgressBar from '..';
@@ -21,14 +19,6 @@ const wrapComponent = (item, data) => (
 
 describe('Test ProgressBar', () => {
   let tree;
-  beforeEach(() => {
-    const localState = {
-      language: 'en',
-    };
-    useSelector.mockImplementation((cb) => {
-      return cb(localState);
-    });
-  });
 
   it('render ProgressBar', async () => {
     const item = {

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

@@ -282,7 +282,9 @@ describe('test Item', () => {
     });
     expect(mockedNavigate).not.toBeCalled();
     expect(spyToastError).toBeCalledWith(
-      getTranslate('en', 'reach_max_automations_per_unit')
+      getTranslate('en', 'reach_max_automations_per_unit'),
+      '',
+      7000
     );
   });
 

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

@@ -40,7 +40,13 @@ const SubUnitAutomate = ({ isOwner, listAutomate, unit, wrapItemStyle }) => {
   const handleOnAddNew = () => {
     if (unit?.id) {
       if (permissions.max_automations_per_unit <= totalAutomates) {
-        ToastBottomHelper.error(t('reach_max_automations_per_unit'));
+        ToastBottomHelper.error(
+          t('reach_max_automations_per_unit', {
+            length: permissions.max_automations_per_unit,
+          }),
+          '',
+          7000
+        );
         return;
       }
     }

package/src/configs/Constants.js

@@ -220,6 +220,8 @@ export const NOTIFICATION_TYPES = {
   NOTIFY_UPGRADE_SYSTEM: 'NOTIFY_UPGRADE_SYSTEM',
   NOTIFY_CHANGE_UNIT_OLD_OWNER: 'NOTIFY_CHANGE_UNIT_OLD_OWNER',
   NOTIFY_CHANGE_UNIT_NEW_OWNER: 'NOTIFY_CHANGE_UNIT_NEW_OWNER',
+  TRIAL_WILL_END: 'TRIAL_WILL_END',
+  FREE_TRIAL_SUBSCRIPTION: 'FREE_TRIAL_SUBSCRIPTION',
   AIR_QUALITY: 'AIR_QUALITY',
   TURBIDITY: 'TURBIDITY',
   PH: 'PH',
@@ -230,6 +232,7 @@ export const NOTIFICATION_TYPES = {
   SOS: 'SOS',
   FILTER_WATER: 'FILTER_WATER',
   LOW_BATTERY: 'LOW_BATTERY',
+  BROADCAST_NOTIFICATION: 'BROADCAST_NOTIFICATION',
 };
 
 export const ACTIVITY_LOG_TYPES = {

package/src/context/actionType.ts

@@ -41,6 +41,7 @@ export const Action = {
   SET_IS_IN_EDIT_TEMPLATE_SCREEN: 'SET_IS_IN_EDIT_TEMPLATE_SCREEN',
   LOGOUT: 'LOGOUT',
   SET_APP_STATE_CHANGE: 'SET_APP_STATE_CHANGE',
+  SET_MY_UNITS: 'SET_MY_UNITS',
 };
 
 export type AuthData = {

package/src/context/mockStore.ts

@@ -25,6 +25,7 @@ export const mockDataStore: ContextData = {
     barStyle: '',
   },
   listAction: [],
+  myUnits: [],
   unit: {
     favoriteDeviceIds: [],
   },
@@ -95,6 +96,7 @@ export const mockSCStore = (data: ContextData): ContextData => {
       appState: 'active',
       ...data.app,
     },
+    myUnits: [...mockDataStore.myUnits, ...(data?.myUnits || [])],
     unit: {
       favoriteDeviceIds: [
         ...mockDataStore.unit.favoriteDeviceIds,
@@ -130,5 +132,6 @@ export const mockSCStore = (data: ContextData): ContextData => {
     bluetooth: {
       ...mockDataStore.bluetooth,
     },
+    percent: mockDataStore.percent,
   };
 };

package/src/context/reducer.ts

@@ -33,6 +33,7 @@ export type ContextData = {
   devMode: DevModeType;
   bluetooth: BluetoothType;
   percent: number;
+  myUnits: [];
 };
 
 export type Action = {
@@ -54,6 +55,7 @@ export const initialState = {
   listDevice: {} as ListDevice,
   listAction: [] as ListAction,
   percent: 0,
+  myUnits: [],
   unit: {
     favoriteDeviceIds: [],
   },
@@ -537,7 +539,11 @@ export const reducer = (currentState: ContextData, action: Action) => {
           appState: payload,
         },
       };
-
+    case Action.SET_MY_UNITS:
+      return {
+        ...currentState,
+        myUnits: payload,
+      };
     default:
       return currentState;
   }

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

@@ -1,6 +1,4 @@
-/* eslint-disable promise/prefer-await-to-callbacks */
 import React from 'react';
-import { useSelector } from 'react-redux';
 import { act, create } from 'react-test-renderer';
 import AQIGuide from '..';
 import Text from '../../../commons/Text';
@@ -25,15 +23,6 @@ jest.mock('react', () => ({
 }));
 
 describe('test AQIGuide', () => {
-  beforeEach(() => {
-    const localState = {
-      language: 'en',
-    };
-    useSelector.mockImplementation((cb) => {
-      return cb(localState);
-    });
-  });
-
   it('render', async () => {
     let tree;
     await act(async () => {

package/src/screens/ActivityLog/hooks/index.js

@@ -62,7 +62,11 @@ export default ({ id, type, share, filterEnabled }) => {
     if (api?.needPermission && !permissions?.[api?.needPermission]) {
       setIsLoading(false);
       setIsRefreshing(false);
-      ToastBottomHelper.error(t(`no_permission_${api?.needPermission}`));
+      ToastBottomHelper.error(
+        t(`no_permission_${api?.needPermission}`),
+        '',
+        7000
+      );
       return;
     }
 

package/src/screens/AddNewGateway/SelectDeviceType.js

@@ -150,13 +150,19 @@ const SelectDeviceType = ({ route }) => {
   const handleOnSelect = (itemSelect) => {
     const needPermission = getPermissionCode(itemSelect);
     if (!permissions?.[needPermission]) {
-      ToastBottomHelper.error(t(`no_permission_${needPermission}`));
+      ToastBottomHelper.error(t(`no_permission_${needPermission}`), '', 7000);
       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'));
+        ToastBottomHelper.error(
+          t('reach_max_chips_per_unit', {
+            length: permissions?.max_chips_per_unit,
+          }),
+          '',
+          7000
+        );
         return false;
       }
     }
@@ -165,7 +171,13 @@ const SelectDeviceType = ({ route }) => {
       if (
         permissions?.max_configs_per_unit <= unitCountSummary?.total_configs
       ) {
-        ToastBottomHelper.error(t('reach_max_configs_per_unit'));
+        ToastBottomHelper.error(
+          t('reach_max_configs_per_unit', {
+            length: permissions?.max_configs_per_unit,
+          }),
+          '',
+          7000
+        );
         return false;
       }
     }

package/src/screens/AddNewGateway/ShareWifiPassword.js

@@ -132,7 +132,7 @@ const ShareWifiPassword = ({ route }) => {
             gateway: [data.gateway],
           }));
         }
-        if (data?.status && !data?.gateway) {
+        if (data?.status === 'error' && !data?.gateway) {
           isWrongPassword.current = false;
           setDataGateway((prev) => ({
             ...prev,

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

@@ -14,6 +14,7 @@ import api from '../../../utils/Apis/axios';
 import API from '../../../configs/API';
 import { ToastBottomHelper } from '../../../utils/Utils';
 import { getTranslate } from '../../../utils/I18n';
+
 const wrapComponent = (route, storeData = {}) => (
   <SCProvider initState={mockSCStore(storeData)}>
     <SelectDeviceType route={route} />
@@ -147,7 +148,9 @@ describe('Test select device type', () => {
     });
     expect(mockedNavigate).not.toBeCalled();
     expect(spyToastError).toBeCalledWith(
-      getTranslate('en', 'reach_max_configs_per_unit')
+      getTranslate('en', 'reach_max_configs_per_unit'),
+      '',
+      7000
     );
   });
 
@@ -186,7 +189,9 @@ describe('Test select device type', () => {
     });
     expect(mockedNavigate).not.toBeCalled();
     expect(spyToastError).toBeCalledWith(
-      getTranslate('en', 'reach_max_chips_per_unit')
+      getTranslate('en', 'reach_max_chips_per_unit'),
+      '',
+      7000
     );
   });
 
@@ -203,7 +208,9 @@ describe('Test select device type', () => {
       },
     });
     expect(spyToastError).toBeCalledWith(
-      getTranslate('en', 'no_permission_plug_and_play_gateway')
+      getTranslate('en', 'no_permission_plug_and_play_gateway'),
+      '',
+      7000
     );
   });
 
@@ -220,7 +227,9 @@ describe('Test select device type', () => {
       },
     });
     expect(spyToastError).toBeCalledWith(
-      getTranslate('en', 'no_permission_plug_and_play_zigbee')
+      getTranslate('en', 'no_permission_plug_and_play_zigbee'),
+      '',
+      7000
     );
   });
 
@@ -237,7 +246,9 @@ describe('Test select device type', () => {
       },
     });
     expect(spyToastError).toBeCalledWith(
-      getTranslate('en', 'no_permission_plug_and_play_wifi')
+      getTranslate('en', 'no_permission_plug_and_play_wifi'),
+      '',
+      7000
     );
   });
 
@@ -254,7 +265,9 @@ describe('Test select device type', () => {
       },
     });
     expect(spyToastError).toBeCalledWith(
-      getTranslate('en', 'no_permission_plug_and_play_modbus')
+      getTranslate('en', 'no_permission_plug_and_play_modbus'),
+      '',
+      7000
     );
   });
 

package/src/screens/Automate/MultiUnits.js

@@ -78,11 +78,21 @@ const MultiUnits = () => {
   const handleOnAddNew = useCallback(() => {
     if (unit?.id) {
       if (permissions?.max_automations_per_unit <= data.length) {
-        ToastBottomHelper.error(t('reach_max_automations_per_unit'));
+        ToastBottomHelper.error(
+          t('reach_max_automations_per_unit', {
+            length: permissions.max_automations_per_unit,
+          }),
+          '',
+          7000
+        );
         return;
       }
     } else if (!permissions?.smart_script_for_multi_unit) {
-      ToastBottomHelper.error(t('no_permission_smart_script_for_multi_unit'));
+      ToastBottomHelper.error(
+        t('no_permission_smart_script_for_multi_unit'),
+        '',
+        7000
+      );
       return;
     }
     if (tabActive === AUTOMATE_TABS.SCENARIO) {

package/src/screens/Automate/ScriptDetail/__test__/index.test.js

@@ -271,7 +271,9 @@ describe('Test ScriptDetail', () => {
     });
     expect(mockNavigate).not.toBeCalled();
     expect(spyToastError).toBeCalledWith(
-      getTranslate('en', 'reach_max_actions_per_automation')
+      getTranslate('en', 'reach_max_actions_per_automation'),
+      '',
+      7000
     );
   });
 

package/src/screens/Automate/ScriptDetail/index.js

@@ -302,7 +302,13 @@ const ItemAdd = ({ automate, index }) => {
 
   const onPressAddAction = useCallback(() => {
     if (permissions?.max_actions_per_automation <= index) {
-      ToastBottomHelper.error(t('reach_max_actions_per_automation'));
+      ToastBottomHelper.error(
+        t('reach_max_actions_per_automation', {
+          length: permissions?.max_actions_per_automation,
+        }),
+        '',
+        7000
+      );
       return;
     }
     const navParams = {

package/src/screens/Automate/__test__/MultiUnits.test.js

@@ -252,7 +252,9 @@ describe('Test MultiUnits', () => {
     });
     expect(mockedNavigate).not.toBeCalled();
     expect(spyToastError).toBeCalledWith(
-      getTranslate('en', 'reach_max_automations_per_unit')
+      getTranslate('en', 'reach_max_automations_per_unit'),
+      '',
+      7000
     );
   });
 
@@ -288,7 +290,9 @@ describe('Test MultiUnits', () => {
     });
     expect(mockedNavigate).not.toBeCalled();
     expect(spyToastError).toBeCalledWith(
-      getTranslate('en', 'no_permission_smart_script_for_multi_unit')
+      getTranslate('en', 'no_permission_smart_script_for_multi_unit'),
+      '',
+      7000
     );
   });
 

package/src/screens/Automate/__test__/index.test.js

@@ -148,7 +148,9 @@ describe('Test Automate', () => {
     });
     expect(mockedNavigate).not.toBeCalled();
     expect(spyToastError).toBeCalledWith(
-      getTranslate('en', 'reach_max_automations_per_unit')
+      getTranslate('en', 'reach_max_automations_per_unit'),
+      '',
+      7000
     );
   });
 
@@ -292,7 +294,9 @@ describe('Test Automate', () => {
     });
     expect(mockedNavigate).not.toBeCalled();
     expect(spyToastError).toBeCalledWith(
-      getTranslate('en', 'no_permission_smart_script_for_multi_unit')
+      getTranslate('en', 'no_permission_smart_script_for_multi_unit'),
+      '',
+      7000
     );
   });
 });

package/src/screens/Automate/index.js

@@ -85,11 +85,21 @@ const Automate = () => {
       if (id) {
         // only limit per unit
         if (permissions.max_automations_per_unit <= automates.length) {
-          ToastBottomHelper.error(t('reach_max_automations_per_unit'));
+          ToastBottomHelper.error(
+            t('reach_max_automations_per_unit', {
+              length: permissions.max_automations_per_unit,
+            }),
+            '',
+            7000
+          );
           return;
         }
       } else if (!permissions?.smart_script_for_multi_unit) {
-        ToastBottomHelper.error(t('no_permission_smart_script_for_multi_unit'));
+        ToastBottomHelper.error(
+          t('no_permission_smart_script_for_multi_unit'),
+          '',
+          7000
+        );
         return;
       }
       navigate(Routes.UnitStack, {

package/src/screens/Notification/__test__/NotificationItem.test.js

@@ -12,8 +12,8 @@ import { API } from '../../../configs';
 import api from '../../../utils/Apis/axios';
 import { AccessibilityLabel } from '../../../configs/Constants';
 
-const wrapComponent = (item) => (
-  <SCProvider initState={mockSCStore({})}>
+const wrapComponent = (item, stateData = {}) => (
+  <SCProvider initState={mockSCStore(stateData)}>
     <NotificationItem item={item} />
   </SCProvider>
 );
@@ -321,4 +321,44 @@ describe('test NotificationItem', () => {
       '. You cannot access to this unit anymore.'
     );
   });
+
+  test('test case BROADCAST_NOTIFICATION', async () => {
+    item.content_code = NOTIFICATION_TYPES.BROADCAST_NOTIFICATION;
+    item.params = {
+      message: {
+        vi: 'vi message',
+        en: 'en message',
+      },
+    };
+    await act(async () => {
+      tree = await create(wrapComponent(item));
+    });
+    const instance = tree.root;
+    const customText = instance.findByProps({
+      accessibilityLabel: AccessibilityLabel.CUSTOM_TEXT,
+    });
+    expect(customText.props.children).toEqual('en message');
+  });
+
+  test('test case BROADCAST_NOTIFICATION language is vi', async () => {
+    item.content_code = NOTIFICATION_TYPES.BROADCAST_NOTIFICATION;
+    item.params = {
+      message: {
+        vi: 'vi message',
+        en: 'en message',
+      },
+    };
+
+    const localState = {
+      language: 'vi',
+    };
+    await act(async () => {
+      tree = await create(wrapComponent(item, localState));
+    });
+    const instance = tree.root;
+    const customText = instance.findByProps({
+      accessibilityLabel: AccessibilityLabel.CUSTOM_TEXT,
+    });
+    expect(customText.props.children).toEqual('vi message');
+  });
 });

package/src/screens/Notification/components/NotificationItem.js

@@ -12,10 +12,12 @@ import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { axiosPost } from '../../../utils/Apis/axios';
 import Routes from '../../../utils/Route';
 import { AccessibilityLabel } from '../../../configs/Constants';
+import { useSCContextSelector } from '../../../context';
 
 const NotificationItem = memo(({ item }) => {
   const t = useTranslations();
   const navigation = useNavigation();
+  const language = useSCContextSelector((state) => state.language);
   const { id, icon, created_at, is_read, params, content_code } = item;
   const [isRead, setIsRead] = useState(is_read);
   const timeFormat = moment(created_at).format('LT DD/MM/YYYY');
@@ -386,10 +388,30 @@ const NotificationItem = memo(({ item }) => {
           },
           iconContent: <Image source={Images.logo} style={styles.logo} />,
         };
+      case NOTIFICATION_TYPES.TRIAL_WILL_END: // to do Canh remove later
+        return {
+          content: customColorText(
+            t('text_notification_content_when_trial_will_end')
+          ),
+          redirect: () => null,
+          iconContent: <Image source={Images.logo} style={styles.logo} />,
+        };
+      case NOTIFICATION_TYPES.FREE_TRIAL_SUBSCRIPTION:
+        return {
+          content: customColorText(
+            t('text_notification_content_your_account_upgraded_3_month')
+          ),
+        };
+      case NOTIFICATION_TYPES.BROADCAST_NOTIFICATION:
+        return {
+          content: params?.message[language],
+          redirect: () => null,
+          iconContent: <Image source={Images.logo} style={styles.logo} />,
+        };
       default:
         return null;
     }
-  }, [content_code, customColorText, icon, navigation, params, t]);
+  }, [content_code, customColorText, icon, navigation, params, t, language]);
 
   const { content, redirect, iconContent } = renderItem() || {};
 

package/src/screens/Sharing/MemberList.js

@@ -40,8 +40,10 @@ const MemberList = ({ route }) => {
     if (permissions?.max_members_per_unit <= dataMembers.length) {
       ToastBottomHelper.error(
         t('reach_max_members_per_unit', {
-          max: permissions?.max_members_per_unit,
-        })
+          length: permissions?.max_members_per_unit,
+        }),
+        '',
+        7000
       );
       return;
     }

package/src/screens/Sharing/__test__/MemberList.test.js

@@ -101,7 +101,9 @@ describe('test MemberList', () => {
     });
     expect(mockedNavigate).not.toBeCalled();
     expect(spyToastError).toBeCalledWith(
-      getTranslate('en', 'reach_max_members_per_unit')
+      getTranslate('en', 'reach_max_members_per_unit'),
+      '',
+      7000
     );
   });
 });

package/src/screens/SubUnit/AddSubUnit.js

@@ -20,11 +20,16 @@ import { AccessibilityLabel } from '../../configs/Constants';
 import styles from './AddSubUnitStyles';
 import useKeyboardShow from '../../hooks/Common/useKeyboardShow';
 import { replace } from '../../navigations/utils';
+import { useBackendPermission } from '../../utils/Permission/backend';
+import { useSCContextSelector } from '../../context';
 
 const AddSubUnit = ({ route }) => {
   const t = useTranslations();
   const { dismissKeyboard } = useKeyboardShow();
   const { navigate, goBack, dispatch } = useNavigation();
+  const permissions = useBackendPermission();
+  const myUnits = useSCContextSelector((state) => state.myUnits);
+
   const {
     unit,
     addType,
@@ -38,6 +43,10 @@ const AddSubUnit = ({ route }) => {
   const [showImagePicker, setShowImagePicker] = useState(false);
   let awaitCreate = useRef(false);
 
+  const unitChoose = useMemo(() => {
+    return myUnits?.find((item) => item?.id === unit?.id);
+  }, [myUnits, unit?.id]);
+
   const cleanData = () => {
     setRoomName('');
     setWallpaper('');
@@ -124,7 +133,11 @@ const AddSubUnit = ({ route }) => {
           cleanData();
         } else {
           awaitCreate.current = false;
-          ToastBottomHelper.error(t('text_create_sub_unit_fail'));
+          if (
+            unitChoose?.stations?.length >= permissions?.max_stations_per_unit
+          ) {
+            ToastBottomHelper.error(t('reach_max_stations_per_unit'), '', 7000);
+          }
         }
       }
     }
@@ -141,6 +154,8 @@ const AddSubUnit = ({ route }) => {
     goBack,
     navigate,
     route.params,
+    unitChoose?.stations?.length,
+    permissions?.max_stations_per_unit,
   ]);
 
   const onChoosePhoto = useCallback(() => {

package/src/screens/SubUnit/__test__/AddSubUnit.test.js

@@ -14,9 +14,10 @@ import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import api from '../../../utils/Apis/axios';
 import { API } from '../../../configs';
+import { ToastBottomHelper } from '../../../utils/Utils';
 
-const wrapComponent = (route) => (
-  <SCProvider initState={mockSCStore({})}>
+const wrapComponent = (route, storeData = {}) => (
+  <SCProvider initState={mockSCStore(storeData)}>
     <AddSubUnit route={route} />
   </SCProvider>
 );
@@ -182,7 +183,8 @@ describe('Test AddSubUnit', () => {
     expect(Toast.show).toHaveBeenCalledWith({
       type: 'error',
       position: 'bottom',
-      text1: getTranslate('en', 'text_create_sub_unit_fail'),
+      text1: 'CLIENT_ERROR',
+      text2: undefined,
       visibilityTime: 1000,
     });
   });
@@ -296,7 +298,19 @@ describe('Test AddSubUnit', () => {
     };
     mock.onPost(API.SUB_UNIT.CREATE_SUB_UNIT(1)).reply(200, {});
     await act(async () => {
-      tree = await create(wrapComponent(route));
+      tree = await create(
+        wrapComponent(route, {
+          auth: {
+            account: {
+              user: {
+                permissions: {
+                  max_stations_per_unit: 100,
+                },
+              },
+            },
+          },
+        })
+      );
     });
     const instance = tree.root;
     const viewButtonBottom = await makeValidateData(instance);
@@ -306,6 +320,45 @@ describe('Test AddSubUnit', () => {
     expect(mockNavigationDispatch).toBeCalledWith(mockReplace);
   });
 
+  it('test no permission create fail sub-unit is out side Unit', async () => {
+    route.params = {
+      ...route.params,
+      isInsideUnit: false,
+    };
+    const spyToastError = jest.spyOn(ToastBottomHelper, 'error');
+    mock.onPost(API.SUB_UNIT.CREATE_SUB_UNIT(1)).reply(400, {});
+    await act(async () => {
+      tree = await create(
+        wrapComponent(route, {
+          auth: {
+            account: {
+              user: {
+                permissions: {
+                  max_stations_per_unit: 0,
+                },
+              },
+            },
+          },
+          myUnits: [
+            { id: 1, name: 'unit 1', stations: [{ id: 1, name: 'station' }] },
+          ],
+        })
+      );
+    });
+    const instance = tree.root;
+    const viewButtonBottom = await makeValidateData(instance);
+
+    await act(async () => {
+      await viewButtonBottom.props.onRightClick();
+    });
+    expect(spyToastError).toBeCalledWith(
+      getTranslate('en', 'reach_max_stations_per_unit'),
+      '',
+      7000
+    );
+    expect(mockNavigationDispatch).not.toBeCalled();
+  });
+
   it('test create sub-unit type AddHassiDevice', async () => {
     route.params = {
       ...route.params,

package/src/screens/SubUnit/__test__/Detail.test.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 import { act, create } from 'react-test-renderer';
 import Toast from 'react-native-toast-message';
 import SubUnitDetail from '../Detail';
@@ -47,23 +46,6 @@ const wrapComponent = (route) => (
 
 describe('Test SubUnitDetail', () => {
   let route;
-  let stationState = {
-    id: 2,
-    camera: {
-      id: 1,
-      uri: 'camera-uri',
-      preview_uri: 'camera-preview-uri',
-    },
-    sensors: [
-      {
-        icon: '',
-        id: 1,
-        action: { icon: '', color: '' },
-        name: '',
-        value: '',
-      },
-    ],
-  };
 
   beforeEach(() => {
     route = {
@@ -80,26 +62,6 @@ describe('Test SubUnitDetail', () => {
         },
       },
     };
-
-    const localState = {
-      language: 'en',
-      auth: {
-        account: {
-          user: {
-            id: 2,
-          },
-        },
-      },
-      unit: {
-        unitDetail: {
-          id: 1,
-          stations: [stationState],
-        },
-      },
-    };
-    useSelector.mockImplementation((getter) => {
-      return getter(localState);
-    });
   });
 
   afterEach(() => {

package/src/screens/SubUnit/__test__/EditSubUnit.test.js

@@ -3,7 +3,6 @@ import { TouchableOpacity, Image } from 'react-native';
 import MockAdapter from 'axios-mock-adapter';
 import { AlertAction, ImagePicker, ViewButtonBottom } from '../../../commons';
 import { API } from '../../../configs';
-import { useSelector } from 'react-redux';
 import { act, create } from 'react-test-renderer';
 import Toast from 'react-native-toast-message';
 
@@ -78,15 +77,6 @@ describe('Test EditSubUnit', () => {
         },
       },
     };
-    const localState = {
-      language: 'en',
-      unit: {
-        unitDetail: {
-          id: 1,
-        },
-      },
-    };
-    useSelector.mockImplementation((getter) => getter(localState));
 
     mockedDispatch.mockClear();
     mock.reset();

package/src/screens/Unit/AddMenu.js

@@ -33,7 +33,13 @@ const AddMenu = memo(({ unit, afterItemClick, showAdd, setHideAdd }) => {
         onClick: () => {
           // 2 is station favorite and smart
           if (unit.stations.length - 2 >= permissions.max_stations_per_unit) {
-            ToastBottomHelper.error(t('reach_max_stations_per_unit'));
+            ToastBottomHelper.error(
+              t('reach_max_stations_per_unit', {
+                length: permissions.max_stations_per_unit,
+              }),
+              '',
+              7000
+            );
             return;
           }
           navigation.navigate(Routes.AddSubUnitStack, {

package/src/screens/WaterQualityGuide/__test__/index.test.js

@@ -1,6 +1,4 @@
-/* eslint-disable promise/prefer-await-to-callbacks */
 import React from 'react';
-import { useSelector } from 'react-redux';
 import WaterQualityGuide from '../index';
 import { create, act } from 'react-test-renderer';
 import { AccessibilityLabel } from '../../../configs/Constants';
@@ -28,12 +26,6 @@ describe('Test WaterQualityGuide', () => {
   let route;
 
   beforeEach(() => {
-    const localState = {
-      language: 'en',
-    };
-    useSelector.mockImplementation((cb) => {
-      return cb(localState);
-    });
     Date.now = jest.fn(() => new Date('2021-01-24T12:00:00.000Z'));
     route = {
       params: {

package/src/utils/Apis/axios.js

@@ -78,6 +78,9 @@ const parseErrorResponse = async (error) => {
     if (firstKey !== 'non_field_errors') {
       message = `${firstKey}: ${message}`;
     }
+    if (firstKey === 'detail') {
+      message = error.data[firstKey];
+    }
   } else {
     message = error.data || error.problem;
   }

package/src/utils/I18n/translations/en.js

@@ -882,6 +882,13 @@ export default {
     'Your ownership of **unit_name** has been assigned to **new_owner_name**.',
   text_notification_content_change_unit_for_new_owner:
     'You are now the owner of **unit_name**.',
+  text_notification_content_when_trial_will_end:
+    'The service usage period is only **days** days left, ' +
+    'Package **product_name** will automatically renew on **trial_end** with **amount** **currency**',
+  text_notification_content_your_account_upgraded_3_month:
+    'Congratulations! Your account has just been upgraded to a 3-month free PREMIUM plan ' +
+    'as a sincere thanking word to your loyalty of the BETA version of E-Ra IoT Platform. ' +
+    "Let's experience the new features now!",
   this_spot_does_not_exsit: 'This spot does not exist',
   please_scan_again_or_contact_the_parking_manager:
     'Please scan again or contact the parking manager',
@@ -1389,27 +1396,28 @@ export default {
   value_must_be_less_than_max: 'Value must be less than {max}',
   value_must_be_a_number: 'Value must be a number',
   reach_max_stations_per_unit:
-    'You have reached the maximum number of sub-units',
+    'Sub-unit is incomplete. Please visit e-ra to complete your operation.',
   not_support_plug_and_play: 'Not support plug and play',
   reach_max_actions_per_automation:
-    'You have reached the maximum number of actions',
+    'Action is incomplete. Please visit e-ra to complete your operation.',
   reach_max_automations_per_unit:
-    'You have reached the maximum number of automations',
-  reach_max_members_per_unit: 'You have reached the maximum number of members',
-  reach_max_chips_per_unit: 'You have reached the maximum number of gateway',
-  reach_max_configs_per_unit: 'You have reached the maximum number of tags',
+    'Automation is incomplete. Please visit e-ra to complete your operation.',
+  reach_max_members_per_unit:
+    'Member is incomplete. Please visit e-ra to complete your operation.',
+  reach_max_chips_per_unit:
+    'Chip is incomplete. Please visit e-ra to complete your operation.',
+  reach_max_configs_per_unit:
+    'Config is incomplete. Please visit e-ra to complete your operation.',
   no_permission_plug_and_play_modbus:
-    'Add modbus is currently not available on your Subscription. Please upgrade your plan for a better experience!',
+    'Add modbus is incomplete. Please visit e-ra to complete your operation.',
   no_permission_plug_and_play_zigbee:
-    'Add zigbee is currently not available on your Subscription. Please upgrade your plan for a better experience!',
+    'Add zigbee is incomplete. Please visit e-ra to complete your operation.',
   no_permission_plug_and_play_wifi:
-    'Add wifi is currently not available on your Subscription. Please upgrade your plan for a better experience!',
+    'Add wifi is incomplete. Please visit e-ra to complete your operation.',
   no_permission_plug_and_play_gateway:
-    'Add gateway is currently not available on your Subscription. Please upgrade your plan for a better experience!',
+    'Add gateway is incomplete. Please visit e-ra to complete your operation.',
   no_permission_view_action_log:
-    // eslint-disable-next-line max-len
-    'View action log is currently not available on your Subscription. Please upgrade your plan for a better experience!',
+    'View action log is incomplete. Please visit e-ra to complete your operation.',
   no_permission_smart_script_for_multi_unit:
-    // eslint-disable-next-line max-len
-    'Smart script for Multi Unit is currently not available on your Subscription. Please upgrade your plan for a better experience!',
+    'Smart script for Multi Unit is incomplete. Please visit e-ra to complete your operation.',
 };

package/src/utils/I18n/translations/vi.js

@@ -898,6 +898,13 @@ export default {
     'Quyền sở hữu **unit_name** của bạn đã được chỉ định cho **new_owner_name**.',
   text_notification_content_change_unit_for_new_owner:
     'Bạn hiện là chủ sở hữu của **unit_name**.',
+  text_notification_content_when_trial_will_end:
+    'Thời hạn sử dụng dịch vụ chỉ còn **days** ngày, ' +
+    'Gói **product_name** sẽ tự động gia hạn vào ngày **trial_end** với **amount** **currency**',
+  text_notification_content_your_account_upgraded_3_month:
+    'Xin chúc mừng! Tài khoản của bạn vừa được nâng cấp lên gói PREMIUM miễn phí 3 tháng ' +
+    'nhằm tri ân người dùng phiên bản BETA của E-Ra IoT Platform. ' +
+    'Chúng tôi xin cảm ơn sự ủng hộ của bạn. Cùng trải nghiệm các tính năng mới ngay thôi!',
   this_spot_does_not_exsit: 'Vị trí đỗ này không tồn tại',
   please_scan_again_or_contact_the_parking_manager:
     'Vui lòng quét lại hoặc liên hệ với người quản lý bãi đậu xe',
@@ -1397,24 +1404,28 @@ export default {
   value_must_be_less_than_max: 'Giá trị phải nhỏ hơn {max}',
   value_must_be_a_number: 'Giá trị phải là một số',
   reach_max_stations_per_unit:
-    'Đã đạt đến số lượng tối đa của các trạm trong một đơn vị',
+    'Sub-unit chưa hoàn tất. Hãy truy cập e-ra để hoàn thiện thao tác của bạn.',
   not_support_plug_and_play: 'Không hỗ trợ kết nối tự động',
-  reach_max_actions_per_automation: 'Đã đạt đến số lượng tối đa hành động',
-  reach_max_automations_per_unit: 'Đã đạt đến số lượng tối đa tự động hóa',
-  reach_max_members_per_unit: 'Đã đạt đến số lượng tối đa thành viên',
-  reach_max_chips_per_unit: 'Đã đạt đến số lượng tối đa chip',
-  reach_max_configs_per_unit: 'Đã đạt đến số lượng tối đa thông số',
+  reach_max_actions_per_automation:
+    'Action chưa hoàn tất. Hãy truy cập e-ra để hoàn thiện thao tác của bạn.',
+  reach_max_automations_per_unit:
+    'Automation chưa hoàn tất. Hãy truy cập e-ra để hoàn thiện thao tác của bạn.',
+  reach_max_members_per_unit:
+    'Member chưa hoàn tất. Hãy truy cập e-ra để hoàn thiện thao tác của bạn.',
+  reach_max_chips_per_unit:
+    'Chip chưa hoàn tất. Hãy truy cập e-ra để hoàn thiện thao tác của bạn.',
+  reach_max_configs_per_unit:
+    'Config chưa hoàn tất. Hãy truy cập e-ra để hoàn thiện thao tác của bạn.',
   no_permission_plug_and_play_modbus:
-    'Kết nối tự động modbus hiện tại chưa hỗ trợ trên gói của bạn. Vui lòng nâng cấp gói để có trải nghiệm tốt hơn!',
+    'Kết nối tự động modbus chưa hoàn tất. Hãy truy cập e-ra để hoàn thiện thao tác của bạn.',
   no_permission_plug_and_play_zigbee:
-    'Kết nối tự động zigbee hiện tại chưa hỗ trợ trên gói của bạn. Vui lòng nâng cấp gói để có trải nghiệm tốt hơn!',
+    'Kết nối tự động zigbee chưa hoàn tất. Hãy truy cập e-ra để hoàn thiện thao tác của bạn.',
   no_permission_plug_and_play_wifi:
-    'Kết nối tự động wifi hiện tại chưa hỗ trợ trên gói của bạn. Vui lòng nâng cấp gói để có trải nghiệm tốt hơn!',
+    'Kết nối tự động wifi chưa hoàn tất. Hãy truy cập e-ra để hoàn thiện thao tác của bạn.',
   no_permission_plug_and_play_gateway:
-    'Kết nối tự động gateway hiện tại chưa hỗ trợ trên gói của bạn. Vui lòng nâng cấp gói để có trải nghiệm tốt hơn!',
+    'Kết nối tự động gateway chưa hoàn tất. Hãy truy cập e-ra để hoàn thiện thao tác của bạn.',
   no_permission_view_action_log:
-    'Xem lịch sử hoạt động hiện tại chưa hỗ trợ trên gói của bạn. Vui lòng nâng cấp gói để có trải nghiệm tốt hơn!',
+    'Xem lịch sử hoạt động chưa hoàn tất. Hãy truy cập e-ra để hoàn thiện thao tác của bạn.',
   no_permission_smart_script_for_multi_unit:
-    // eslint-disable-next-line max-len
-    'Kịch bản thông minh cho nhiều địa điểm hiện tại chưa hỗ trợ trên gói của bạn. Vui lòng nâng cấp gói để có trải nghiệm tốt hơn!',
+    'Kịch bản thông minh cho nhiều địa điểm chưa hoàn tất. Hãy truy cập e-ra để hoàn thiện thao tác của bạn.',
 };

package/src/utils/Utils.js

@@ -88,31 +88,31 @@ export const openMapDirection = (item) => () => {
 };
 
 export const ToastBottomHelper = {
-  success: (msg, line2) => {
+  success: (msg, line2, visibilityTime = 1000) => {
     Toast.show({
       type: 'success',
       position: 'bottom',
       text1: msg,
       text2: line2,
-      visibilityTime: 1000,
+      visibilityTime: visibilityTime,
     });
   },
-  error: (msg, line2) => {
+  error: (msg, line2, visibilityTime = 1000) => {
     Toast.show({
       type: 'error',
       position: 'bottom',
       text1: msg,
       text2: line2,
-      visibilityTime: 1000,
+      visibilityTime: visibilityTime,
     });
   },
-  info: (msg, line2) => {
+  info: (msg, line2, visibilityTime = 1000) => {
     Toast.show({
       type: 'info',
       position: 'bottom',
       text1: msg,
       text2: line2,
-      visibilityTime: 1000,
+      visibilityTime: visibilityTime,
     });
   },
 };