@eohjsc/react-native-smart-city 0.3.19 → 0.3.22

package/package.json

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

package/src/commons/ActionGroup/OnOffTemplate/index.js

@@ -55,7 +55,6 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
   );
 
   const triggerAction = useCallback(async () => {
-    setTempIsOn((prev) => !prev);
     switch (sensor?.device_type) {
       case DEVICE_TYPE.ZIGBEE:
         if (action_on_data && action_off_data) {
@@ -75,11 +74,10 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
         }
         break;
       case DEVICE_TYPE.LG_THINQ:
+        setTempIsOn((prev) => !prev);
         if (action_data) {
           await doAction(action_data, JSON.stringify({ value: !isOn }));
         }
-
-        updateStatusFromPusher();
         break;
       default:
         if (action_data) {
@@ -98,6 +96,7 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
         }
         break;
     }
+    updateStatusFromPusher();
     if (sensor?.is_managed_by_backend) {
       configuration?.config &&
         sensor?.device_type !== 'GOOGLE_HOME' &&
@@ -130,7 +129,13 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
     if (sensor?.is_managed_by_backend && sensor.device_type !== 'GOOGLE_HOME') {
       watchMultiConfigs([configuration.config]);
     }
-  }, [sensor, configuration.config]);
+  }, [sensor, configuration.config, getIsOnValue]);
+
+  useEffect(() => {
+    if (sensor?.device_type !== DEVICE_TYPE.LG_THINQ) {
+      setTempIsOn(getIsOnValue());
+    }
+  }, [getIsOnValue, sensor?.device_type]);
 
   const Component = useMemo(() => {
     return getComponent(actionGroup.template);

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

@@ -24,7 +24,7 @@ const SubUnitFavorites = ({
   const { getStatus, serverDown } = useSensorsStatus(unit, favoriteDevices);
 
   const handleOnAddNew = () => {
-    navigate(Routes.SelectFavoritesDevices, {
+    navigate(Routes.SelectAddToFavorites, {
       unitId: unit.id,
     });
   };
@@ -58,6 +58,7 @@ const SubUnitFavorites = ({
               isOwner={isOwner}
               automate={automate}
               unit={unit}
+              wrapStyle={wrapItemStyle}
             />
           ))}
         <ItemAddNew

package/src/configs/API.js

@@ -29,9 +29,14 @@ const API = {
     CHANGE_OWNER: (id) => `/property_manager/units/${id}/change_owner/`,
     FAVOURITE_DEVICES: (id) =>
       `/property_manager/units/${id}/favourite_devices/`,
-    DEVICES: (id) => `/property_manager/units/${id}/devices/`,
+    DEVICES_NOT_FAVORITES: (id) =>
+      `/property_manager/units/${id}/devices_not_favourites/`,
     ADD_DEVICES_TO_FAVORITES: (id) =>
       `/property_manager/units/${id}/add_devices_to_favourites/`,
+    AUTOMATE_SCRIPTS_NOT_STARRED: (id) =>
+      `/property_manager/units/${id}/automate_scripts_not_starred/`,
+    STAR_AUTOMATE_SCRIPTS: (id) =>
+      `/property_manager/units/${id}/star_automate_scripts/`,
   },
   SUB_UNIT: {
     REMOVE_SUB_UNIT: (unitId, id) =>

package/src/context/actionType.ts

@@ -15,8 +15,8 @@ export const Action = {
   ADD_DEVICES_TO_FAVORITES: 'ADD_DEVICE_TO_FAVORITES',
   REMOVE_DEVICES_FROM_FAVORITES: 'REMOVE_DEVICE_FROM_FAVORITES',
   SET_STARRED_SCRIPTS: 'SET_STARRED_SCRIPTS',
-  STAR_SCRIPT: 'STAR_SCRIPT',
-  UNSTAR_SCRIPT: 'UNSTAR_SCRIPT',
+  STAR_SCRIPTS: 'STAR_SCRIPTS',
+  UNSTAR_SCRIPTS: 'UNSTAR_SCRIPTS',
   CONNECTING_GOOGLE_HOME: 'CONNECTING_GOOGLE_HOME',
   SET_GOOGLE_HOME_CONNECTIONS: 'SET_GOOGLE_HOME_CONNECTIONS',
   CHANGE_GOOGLE_HOME_CONN_STATE: 'CHANGE_GOOGLE_HOME_CONN_STATE',

package/src/context/reducer.ts

@@ -235,7 +235,7 @@ export const reducer = (currentState: ContextData, action: Action) => {
           starredScriptIds: payload,
         },
       };
-    case Action.STAR_SCRIPT:
+    case Action.STAR_SCRIPTS:
       return {
         ...currentState,
         automate: {
@@ -245,13 +245,13 @@ export const reducer = (currentState: ContextData, action: Action) => {
           ),
         },
       };
-    case Action.UNSTAR_SCRIPT:
+    case Action.UNSTAR_SCRIPTS:
       return {
         ...currentState,
         automate: {
           ...currentState.automate,
           starredScriptIds: currentState.automate.starredScriptIds.filter(
-            (scriptId) => scriptId !== payload
+            (scriptId) => !payload.includes(scriptId)
           ),
         },
       };

package/src/hooks/IoT/useValueEvaluation.js

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { API } from '../../configs';
 import { SCContext, useSCContextSelector } from '../../context';
 import { Action } from '../../context/actionType';
@@ -6,12 +6,14 @@ import { axiosGet } from '../../utils/Apis/axios';
 
 const useValueEvaluations = (unitId) => {
   const { setAction } = useContext(SCContext);
+  const [fetching, setFetching] = useState(false);
 
   const fetchConfigValueEvaluations = useCallback(
     async (page = 1) => {
       if (!unitId) {
         return;
       }
+      setFetching(true);
       const params = new URLSearchParams();
       params.append('config__end_device__station__unit', unitId);
       params.append('page', page);
@@ -24,9 +26,15 @@ const useValueEvaluations = (unitId) => {
           data: data.results,
         });
         if (data.next) {
-          await fetchConfigValueEvaluations(page + 1);
+          return await fetchConfigValueEvaluations(page + 1);
         }
+      } else {
+        setAction(Action.UPDATE_VALUE_EVALUATIONS, {
+          unitId,
+          data: [],
+        });
       }
+      setFetching(false);
     },
     [unitId, setAction]
   );
@@ -36,10 +44,15 @@ const useValueEvaluations = (unitId) => {
   });
 
   useEffect(() => {
-    if (!(fetchedValueEvaluationUnits.indexOf(unitId) !== -1)) {
+    if (!fetching && !(fetchedValueEvaluationUnits.indexOf(unitId) !== -1)) {
       fetchConfigValueEvaluations();
     }
-  }, [unitId, fetchConfigValueEvaluations, fetchedValueEvaluationUnits]);
+  }, [
+    unitId,
+    fetching,
+    fetchConfigValueEvaluations,
+    fetchedValueEvaluationUnits,
+  ]);
 };
 
 export default useValueEvaluations;

package/src/navigations/UnitStack.js

@@ -51,7 +51,7 @@ import EmergencySetting from '../screens/EmergencySetting';
 import ConfirmUnitDeletion from '../screens/ConfirmUnitDeletion';
 import InfoMemberUnit from '../screens/Sharing/InfoMemberUnit';
 import EnterPassword from '../screens/EnterPassword';
-import SelectFavoritesDevices from '../screens/Unit/SelectFavoritesDevices';
+import SelectAddToFavorites from '../screens/Unit/SelectAddToFavorites';
 import { HanetCameraStack } from './HanetCameraStack';
 import { axiosGet } from '../utils/Apis/axios';
 import { API } from '../configs';
@@ -402,8 +402,8 @@ export const UnitStack = memo((props) => {
         }}
       />
       <Stack.Screen
-        name={Route.SelectFavoritesDevices}
-        component={SelectFavoritesDevices}
+        name={Route.SelectAddToFavorites}
+        component={SelectAddToFavorites}
         options={{
           headerShown: false,
         }}

package/src/screens/Device/detail.js

@@ -148,7 +148,7 @@ const DeviceDetail = ({ route }) => {
   );
 
   const canManageSubUnit = useMemo(() => {
-    return currentUserId === unit?.user_id;
+    return Number(currentUserId) === Number(unit?.user_id);
   }, [currentUserId, unit]);
 
   const fetchUnitDetail = useCallback(async () => {
@@ -721,16 +721,19 @@ const DeviceDetail = ({ route }) => {
             isNetworkConnected !== null &&
             renderSensorConnected()}
         </View>
-        {isShowSetupEmergencyContact && canManageSubUnit && (
-          <BottomButtonView
-            style={styles.bottomButtonEmergencyContact}
-            mainIcon={<Icon name="plus" size={16} color={Colors.Primary} />}
-            mainTitle={t('setup_my_emergency_contact')}
-            onPressMain={onSetupContacts}
-            typeMain="primaryBorder"
-            semiboldMain={false}
-          />
-        )}
+        {isNetworkConnected &&
+          isConnected &&
+          isShowSetupEmergencyContact &&
+          canManageSubUnit && (
+            <BottomButtonView
+              style={styles.bottomButtonEmergencyContact}
+              mainIcon={<Icon name="plus" size={16} color={Colors.Primary} />}
+              mainTitle={t('setup_my_emergency_contact')}
+              onPressMain={onSetupContacts}
+              typeMain="primaryBorder"
+              semiboldMain={false}
+            />
+          )}
         <AlertSendConfirm
           showAlertConfirm={showAlertConfirm && !lockShowing}
           countDown={countDown}

package/src/screens/EmergencyContacts/EmergencyContactsAddNew.js

@@ -1,20 +1,19 @@
 import React, { useCallback, useState } from 'react';
-import { SafeAreaView, StyleSheet, TextInput } from 'react-native';
+import { SafeAreaView, StyleSheet, TextInput, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Section, ViewButtonBottom } from '../../commons';
 import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
 import { API, Colors } from '../../configs';
-import { useKeyboardShow } from '../../hooks/Common';
 import { TESTID } from '../../configs/Constants';
 import { axiosPost } from '../../utils/Apis/axios';
 import { ToastBottomHelper } from '../../utils/Utils';
+import { isValidPhoneNumber } from '../../utils/Validation';
 
 export const EmergencyContactsAddNew = ({ route }) => {
   const t = useTranslations();
   const { group } = route.params;
   const { goBack } = useNavigation();
-  const { keyboardBottomPadding } = useKeyboardShow();
   const [textName, setTextName] = useState('');
   const [textPhone, setTextPhone] = useState('');
   const onTextNameChange = useCallback(
@@ -33,22 +32,28 @@ export const EmergencyContactsAddNew = ({ route }) => {
     goBack();
   }, [goBack]);
   const onSave = useCallback(async () => {
-    const { success } = await axiosPost(API.EMERGENCY_BUTTON.CREATE_CONTACT(), {
-      group: group.id,
-      phone_number: textPhone,
-      name: textName,
-    });
-    if (success) {
-      goBack();
+    if (isValidPhoneNumber(textPhone)) {
+      const { success } = await axiosPost(
+        API.EMERGENCY_BUTTON.CREATE_CONTACT(),
+        {
+          group: group.id,
+          phone_number: textPhone,
+          name: textName,
+        }
+      );
+      if (success) {
+        goBack();
+        ToastBottomHelper.success(t('create_contact_success'));
+      } else {
+        ToastBottomHelper.error(t('create_contact_failed'));
+      }
     } else {
-      ToastBottomHelper.error(t('create_contact_failed'));
+      ToastBottomHelper.error(t('invalid_phone_number'));
     }
   }, [goBack, group.id, t, textName, textPhone]);
 
   return (
-    <SafeAreaView
-      style={[styles.wrap, { marginBottom: keyboardBottomPadding }]}
-    >
+    <SafeAreaView style={styles.wrap}>
       <WrapHeaderScrollable title={t('create_contact')}>
         <Section type={'border'}>
           <TextInput
@@ -58,6 +63,7 @@ export const EmergencyContactsAddNew = ({ route }) => {
             placeholder={t('text_name')}
             underlineColorAndroid={null}
             onChangeText={onTextNameChange}
+            maxLength={64}
           />
           <TextInput
             testID={TESTID.ON_CHANGE_PHONE_EMERGENCY_CONTACT}
@@ -67,17 +73,20 @@ export const EmergencyContactsAddNew = ({ route }) => {
             underlineColorAndroid={null}
             keyboardType={'phone-pad'}
             onChangeText={onTextPhoneChange}
+            maxLength={64}
           />
         </Section>
       </WrapHeaderScrollable>
-      <ViewButtonBottom
-        leftTitle={t('cancel')}
-        leftDisabled={false}
-        onLeftClick={onCancel}
-        rightTitle={t('save')}
-        rightDisabled={!textPhone || !textName}
-        onRightClick={onSave}
-      />
+      <View style={styles.viewButtonBottom}>
+        <ViewButtonBottom
+          leftTitle={t('cancel')}
+          leftDisabled={false}
+          onLeftClick={onCancel}
+          rightTitle={t('save')}
+          rightDisabled={!textPhone || !textName}
+          onRightClick={onSave}
+        />
+      </View>
     </SafeAreaView>
   );
 };
@@ -95,4 +104,8 @@ const styles = StyleSheet.create({
     fontFamily: 'SFProDisplay-Regular',
     lineHeight: 24,
   },
+  viewButtonBottom: {
+    borderTopWidth: 1,
+    borderTopColor: Colors.Gray4,
+  },
 });

package/src/screens/EmergencyContacts/EmergencyContactsSelectContacts.js

@@ -27,8 +27,9 @@ export const EmergencyContactsSelectContacts = ({ route }) => {
     setLoading(true);
     const { success, data } = await axiosGet(API.SHARE.UNITS_MEMBERS(id));
     if (success) {
+      const result = data.filter((item) => item?.name && item?.phone_number);
       setLoading(false);
-      setDataContact(data);
+      setDataContact(result);
     }
   }, []);
 

package/src/screens/EmergencyContacts/__test__/EmergencyContactAddNew.test.js

@@ -115,22 +115,40 @@ describe('test EmergencyContactAddNew', () => {
     const instance = tree.root;
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
 
+    const TextInput_ = instance.find(
+      (el) =>
+        el.props.testID === TESTID.ON_CHANGE_PHONE_EMERGENCY_CONTACT &&
+        el.type === TextInput
+    );
+
     await act(async () => {
+      await TextInput_.props.onChangeText('0901603859');
       await viewButtonBottom.props.onRightClick();
     });
 
     expect(mockedGoBack).toHaveBeenCalledTimes(1);
   });
 
-  test('onSave fail', async () => {
+  test('onSave failed', async () => {
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
 
+    const TextInput_ = instance.find(
+      (el) =>
+        el.props.testID === TESTID.ON_CHANGE_PHONE_EMERGENCY_CONTACT &&
+        el.type === TextInput
+    );
+
     mock.onPost(API.EMERGENCY_BUTTON.CREATE_CONTACT()).reply(400);
-    await viewButtonBottom.props.onRightClick();
+
+    await act(async () => {
+      await TextInput_.props.onChangeText('0901603859');
+      await viewButtonBottom.props.onRightClick();
+    });
+
     expect(Toast.show).toHaveBeenCalledWith({
       type: 'error',
       position: 'bottom',
@@ -139,4 +157,20 @@ describe('test EmergencyContactAddNew', () => {
     });
     expect(mockedGoBack).not.toHaveBeenCalled();
   });
+
+  test('invalid phone number', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const viewButtonBottom = instance.findByType(ViewButtonBottom);
+
+    await viewButtonBottom.props.onRightClick();
+    expect(Toast.show).toHaveBeenCalledWith({
+      type: 'error',
+      position: 'bottom',
+      text1: getTranslate('en', 'invalid_phone_number'),
+      visibilityTime: 1000,
+    });
+  });
 });

package/src/screens/ScriptDetail/hooks/useStarredScript.js

@@ -14,14 +14,14 @@ export const useStarredScript = (automate) => {
 
   const starScript = useCallback(async () => {
     const { success } = await axiosPost(API.AUTOMATE.STAR_SCRIPT(automate?.id));
-    success && setAction(Action.STAR_SCRIPT, automate?.script?.id);
+    success && setAction(Action.STAR_SCRIPTS, [automate?.script?.id]);
   }, [automate, setAction]);
 
   const unstarScript = useCallback(async () => {
     const { success } = await axiosPost(
       API.AUTOMATE.UNSTAR_SCRIPT(automate?.id)
     );
-    success && setAction(Action.UNSTAR_SCRIPT, automate?.script?.id);
+    success && setAction(Action.UNSTAR_SCRIPTS, [automate?.script?.id]);
   }, [automate, setAction]);
 
   return {

package/src/screens/Unit/{SelectFavoritesDevices.js → SelectAddToFavorites.js}

@@ -15,14 +15,15 @@ import NavBar from '../../commons/NavBar';
 import BottomButtonView from '../../commons/BottomButtonView';
 import { FullLoading } from '../../commons';
 import Device from '../AddNewAction/Device';
+import AutomateScript from './components/AutomateScript';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { SCContext } from '../../context';
 import { Action } from '../../context/actionType';
 import { axiosGet, axiosPost } from '../../utils/Apis/axios';
 import { API, Colors } from '../../configs';
-import styles from './SelectFavoritesDevicesStyles';
+import styles from './SelectAddToFavoritesStyles';
 
-const SelectFavoritesDevices = memo(({ route }) => {
+const SelectAddToFavorites = memo(({ route }) => {
   const t = useTranslations();
   const { goBack } = useNavigation();
   const { unitId } = route.params;
@@ -31,43 +32,69 @@ const SelectFavoritesDevices = memo(({ route }) => {
   const [listMenuItem, setListMenuItem] = useState([]);
   const [indexStation, setIndexStation] = useState(0);
   const [stations, setStations] = useState([]);
-  const [selectedIds, setSelectedIds] = useState([]);
+  const [automates, setAutomates] = useState([]);
+
+  const [selectedDeviceIds, setSelectedDeviceIds] = useState([]);
+  const [selectedScriptIds, setSelectedScriptIds] = useState([]);
   const [loading, setLoading] = useState(true);
 
   const fetchData = useCallback(async () => {
     setLoading(true);
-    const { success, data } = await axiosGet(API.UNIT.DEVICES(unitId));
-    if (success) {
-      const newData = data.filter((item) => item.devices.length > 0);
+    const { success: successDevice, data: dataDevice } = await axiosGet(
+      API.UNIT.DEVICES_NOT_FAVORITES(unitId)
+    );
+    const { success: successAutomate, data: dataAutomate } = await axiosGet(
+      API.UNIT.AUTOMATE_SCRIPTS_NOT_STARRED(unitId)
+    );
+    if (successDevice && successAutomate) {
+      const newData = dataDevice.filter((item) => item.devices.length > 0);
+      if (dataAutomate.length) {
+        newData.unshift({
+          isSmart: true,
+          name: t('smart'),
+        });
+      }
       const listMenu = newData.map((item, index) => ({
         text: item.name,
         station: item,
         index: index,
       }));
       setStations(newData);
+      setAutomates(dataAutomate);
       setListMenuItem(listMenu);
       setListStation(listMenu);
     }
     setLoading(false);
-  }, [unitId]);
+  }, [unitId, t]);
 
-  const addDevicesToFavorites = useCallback(async () => {
-    if (selectedIds.length === 0) {
+  const addToFavorites = useCallback(async () => {
+    if (!selectedDeviceIds.length && !selectedScriptIds.length) {
       return;
     }
     setLoading(true);
-    const { success } = await axiosPost(
-      API.UNIT.ADD_DEVICES_TO_FAVORITES(unitId),
-      {
-        devices: selectedIds,
-      }
-    );
-    if (success) {
-      setAction(Action.ADD_DEVICES_TO_FAVORITES, selectedIds);
+
+    let response, success1, success2;
+
+    if (selectedDeviceIds.length) {
+      response = await axiosPost(API.UNIT.ADD_DEVICES_TO_FAVORITES(unitId), {
+        devices: selectedDeviceIds,
+      });
+      success1 = response.success;
+    }
+    if (selectedScriptIds.length) {
+      response = await axiosPost(API.UNIT.STAR_AUTOMATE_SCRIPTS(unitId), {
+        scripts: selectedScriptIds,
+      });
+      success2 = response.success;
+    }
+    success1 && setAction(Action.ADD_DEVICES_TO_FAVORITES, selectedDeviceIds);
+    success2 && setAction(Action.STAR_SCRIPTS, selectedScriptIds);
+    if (success1 || success2) {
       goBack();
     }
+
     setLoading(false);
-  }, [unitId, selectedIds, setAction, goBack]);
+  }, [unitId, selectedDeviceIds, selectedScriptIds, setAction, goBack]);
 
   useEffect(() => {
     fetchData();
@@ -83,7 +110,7 @@ const SelectFavoritesDevices = memo(({ route }) => {
 
   const onSelectDevice = useCallback(
     (device) => {
-      setSelectedIds((ids) => {
+      setSelectedDeviceIds((ids) => {
         const index = ids.indexOf(device.id);
         if (index !== -1) {
           return ids.filter((id) => id !== device.id);
@@ -91,7 +118,20 @@ const SelectFavoritesDevices = memo(({ route }) => {
         return [...ids, device.id];
       });
     },
-    [setSelectedIds]
+    [setSelectedDeviceIds]
+  );
+
+  const onSelectAutomateScript = useCallback(
+    (automate) => {
+      setSelectedScriptIds((ids) => {
+        const index = ids.indexOf(automate?.script?.id);
+        if (index !== -1) {
+          return ids.filter((id) => id !== automate?.script?.id);
+        }
+        return [...ids, automate?.script?.id];
+      });
+    },
+    [setSelectedScriptIds]
   );
 
   const rightComponent = useMemo(
@@ -132,13 +172,24 @@ const SelectFavoritesDevices = memo(({ route }) => {
         )}
 
         <View style={styles.boxDevices}>
-          {stations[indexStation]?.devices &&
-            stations[indexStation].devices.map((device) => (
+          {stations[indexStation]?.isSmart &&
+            automates.map((automate, index) => (
+              <AutomateScript
+                key={`automate_script_${index}`}
+                automate={automate}
+                onPress={onSelectAutomateScript}
+                isSelected={selectedScriptIds.includes(automate?.script?.id)}
+              />
+            ))}
+          {!stations[indexStation]?.isSmart &&
+            stations[indexStation]?.devices &&
+            stations[indexStation].devices.map((device, index) => (
               <Device
+                key={`device_${index}`}
                 svgMain={device.icon || 'sensor'}
                 title={device.name}
                 sensor={device}
-                isSelectDevice={selectedIds.includes(device.id)}
+                isSelectDevice={selectedDeviceIds.includes(device.id)}
                 onPress={onSelectDevice}
               />
             ))}
@@ -148,12 +199,16 @@ const SelectFavoritesDevices = memo(({ route }) => {
       <BottomButtonView
         style={styles.bottomButtonView}
         mainTitle={t('done')}
-        onPressMain={addDevicesToFavorites}
-        typeMain={selectedIds.length === 0 ? 'disabled' : 'primary'}
+        onPressMain={addToFavorites}
+        typeMain={
+          !selectedDeviceIds.length && !selectedScriptIds.length
+            ? 'disabled'
+            : 'primary'
+        }
       />
       {loading && <FullLoading />}
     </View>
   );
 });
 
-export default SelectFavoritesDevices;
+export default SelectAddToFavorites;

package/src/screens/Unit/__test__/SelectAddToFavorites.test.js

@@ -0,0 +1,267 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import MockAdapter from 'axios-mock-adapter';
+
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import SelectAddToFavorites from '../SelectAddToFavorites';
+import NavBar from '../../../commons/NavBar';
+import Device from '../../AddNewAction/Device';
+import AutomateScript from '../components/AutomateScript';
+import BottomButtonView from '../../../commons/BottomButtonView';
+import { API } from '../../../configs';
+import api from '../../../utils/Apis/axios';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <SelectAddToFavorites route={route} />
+  </SCProvider>
+);
+
+const mock = new MockAdapter(api.axiosInstance);
+
+const mockGoBack = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      goBack: mockGoBack,
+    }),
+  };
+});
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+
+describe('Test SelectAddToFavorites', () => {
+  let tree, route;
+  let dataDevice = [
+    {
+      id: 1,
+      name: 'station 1',
+      devices: [
+        {
+          id: 1,
+          name: 'device 1',
+          icon: 'sensor',
+          icon_kit: null,
+        },
+        {
+          id: 2,
+          name: 'device 2',
+          icon: null,
+          icon_kit: 'icon',
+        },
+      ],
+    },
+    {
+      id: 2,
+      name: 'station 2',
+      devices: [],
+    },
+  ];
+  let dataAutomate = [
+    {
+      id: 1,
+      script: {
+        id: 1,
+        icon_kit: 'sensor',
+        name: 'script 1',
+      },
+      type: 'one_tap',
+      author: 'author',
+    },
+    {
+      id: 2,
+      script: {
+        id: 2,
+        icon_kit: 'sensor',
+        name: 'script 2',
+      },
+      type: 'value_change',
+      author: 'author',
+    },
+    {
+      id: 3,
+      script: {
+        id: 3,
+        icon_kit: 'sensor',
+        name: 'script 3',
+      },
+      type: 'schedule',
+      author: 'author',
+    },
+    {
+      id: 4,
+      script: {
+        id: 4,
+        icon_kit: 'sensor',
+        name: 'script 4',
+      },
+      type: 'event',
+      author: 'author',
+    },
+  ];
+
+  beforeEach(() => {
+    mockGoBack.mockClear();
+    mock.resetHistory();
+    route = {
+      params: {
+        unitId: 1,
+      },
+    };
+  });
+
+  test('test select then add devices to favorites, star scripts', async () => {
+    mock.onGet(API.UNIT.DEVICES_NOT_FAVORITES(1)).replyOnce(200, dataDevice);
+    mock
+      .onGet(API.UNIT.AUTOMATE_SCRIPTS_NOT_STARRED(1))
+      .replyOnce(200, dataAutomate);
+    mock.onPost(API.UNIT.ADD_DEVICES_TO_FAVORITES(1)).replyOnce(200);
+    mock.onPost(API.UNIT.STAR_AUTOMATE_SCRIPTS(1)).replyOnce(200);
+
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    expect(mock.history.get).toHaveLength(2);
+    const instance = tree.root;
+
+    const navbar = instance.findByType(NavBar);
+    const bottomButton = instance.findByType(BottomButtonView);
+
+    await act(async () => {
+      await bottomButton.props.onPressMain();
+    });
+    expect(mock.history.post).toHaveLength(0);
+
+    const scripts = instance.findAllByType(AutomateScript);
+    expect(scripts).toHaveLength(4);
+
+    await act(async () => {
+      await scripts[0].props.onPress({ script: { id: 1 } });
+    });
+    await act(async () => {
+      await scripts[0].props.onPress({ script: { id: 2 } });
+    });
+    await act(async () => {
+      await scripts[0].props.onPress({ script: { id: 1 } });
+    });
+
+    await act(async () => {
+      await navbar.props.onSnapToItem(null, 1);
+    });
+    const devices = instance.findAllByType(Device);
+    expect(devices).toHaveLength(2);
+
+    await act(async () => {
+      await devices[0].props.onPress({ id: 1 });
+    });
+    await act(async () => {
+      await devices[1].props.onPress({ id: 2 });
+    });
+    await act(async () => {
+      await devices[0].props.onPress({ id: 1 });
+    });
+
+    await act(async () => {
+      await bottomButton.props.onPressMain();
+    });
+    expect(mock.history.post).toHaveLength(2);
+    expect(mockGoBack).toBeCalled();
+  });
+
+  test('test select only devices then click done', async () => {
+    mock.onGet(API.UNIT.DEVICES_NOT_FAVORITES(1)).replyOnce(200, dataDevice);
+    mock
+      .onGet(API.UNIT.AUTOMATE_SCRIPTS_NOT_STARRED(1))
+      .replyOnce(200, dataAutomate);
+    mock.onPost(API.UNIT.ADD_DEVICES_TO_FAVORITES(1)).replyOnce(200);
+    mock.onPost(API.UNIT.STAR_AUTOMATE_SCRIPTS(1)).replyOnce(200);
+
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    expect(mock.history.get).toHaveLength(2);
+    const instance = tree.root;
+
+    const navbar = instance.findByType(NavBar);
+    const bottomButton = instance.findByType(BottomButtonView);
+
+    await act(async () => {
+      await navbar.props.onSnapToItem(null, 1);
+    });
+    const devices = instance.findAllByType(Device);
+    expect(devices).toHaveLength(2);
+
+    await act(async () => {
+      await devices[0].props.onPress({ id: 1 });
+    });
+    await act(async () => {
+      await bottomButton.props.onPressMain();
+    });
+    expect(mock.history.post).toHaveLength(1);
+    expect(mockGoBack).toBeCalled();
+  });
+
+  test('test select only scripts then click done', async () => {
+    mock.onGet(API.UNIT.DEVICES_NOT_FAVORITES(1)).replyOnce(200, dataDevice);
+    mock
+      .onGet(API.UNIT.AUTOMATE_SCRIPTS_NOT_STARRED(1))
+      .replyOnce(200, dataAutomate);
+    mock.onPost(API.UNIT.ADD_DEVICES_TO_FAVORITES(1)).replyOnce(200);
+    mock.onPost(API.UNIT.STAR_AUTOMATE_SCRIPTS(1)).replyOnce(200);
+
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    expect(mock.history.get).toHaveLength(2);
+    const instance = tree.root;
+
+    const bottomButton = instance.findByType(BottomButtonView);
+
+    const scripts = instance.findAllByType(AutomateScript);
+    expect(scripts).toHaveLength(4);
+
+    await act(async () => {
+      await scripts[0].props.onPress({ script: { id: 1 } });
+    });
+    await act(async () => {
+      await bottomButton.props.onPressMain();
+    });
+    expect(mock.history.post).toHaveLength(1);
+    expect(mockGoBack).toBeCalled();
+  });
+
+  test('test click done call api fail not goBack', async () => {
+    mock.onGet(API.UNIT.DEVICES_NOT_FAVORITES(1)).replyOnce(200, dataDevice);
+    mock
+      .onGet(API.UNIT.AUTOMATE_SCRIPTS_NOT_STARRED(1))
+      .replyOnce(200, dataAutomate);
+    mock.onPost(API.UNIT.ADD_DEVICES_TO_FAVORITES(1)).replyOnce(200);
+    mock.onPost(API.UNIT.STAR_AUTOMATE_SCRIPTS(1)).replyOnce(400);
+
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    expect(mock.history.get).toHaveLength(2);
+    const instance = tree.root;
+
+    const bottomButton = instance.findByType(BottomButtonView);
+
+    const scripts = instance.findAllByType(AutomateScript);
+    expect(scripts).toHaveLength(4);
+
+    await act(async () => {
+      await scripts[0].props.onPress({ script: { id: 1 } });
+    });
+    await act(async () => {
+      await bottomButton.props.onPressMain();
+    });
+    expect(mock.history.post).toHaveLength(1);
+  });
+});

package/src/screens/Unit/components/AutomateScript/index.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { View, TouchableWithoutFeedback } from 'react-native';
+import { IconOutline } from '@ant-design/icons-react-native';
+import { useTranslations } from '../../../../hooks/Common/useTranslations';
+import Text from '../../../../commons/Text';
+import FImage from '../../../../commons/FImage';
+import OneTap from '../../../../../assets/images/OneTap.svg';
+import ValueChange from '../../../../../assets/images/ValueChange.svg';
+import Schedule from '../../../../../assets/images/Schedule.svg';
+import Event from '../../../../../assets/images/Event.svg';
+import styles from './styles';
+import { AUTOMATE_TYPE } from '../../../../configs/Constants';
+import { Colors } from '../../../../configs';
+
+const AutomateScript = ({ automate, onPress, isSelected }) => {
+  const t = useTranslations();
+  const { script, type, author = '' } = automate;
+
+  const _onPress = () => {
+    onPress && onPress(automate);
+  };
+
+  const displayIcon = () => {
+    const iconKit = script?.icon_kit;
+    if (iconKit) {
+      return <FImage source={{ uri: iconKit }} style={styles.iconSensor} />;
+    } else if (type === AUTOMATE_TYPE.ONE_TAP) {
+      return <OneTap />;
+    } else if (type === AUTOMATE_TYPE.VALUE_CHANGE) {
+      return <ValueChange />;
+    } else if (type === AUTOMATE_TYPE.EVENT) {
+      return <Event />;
+    } else {
+      return <Schedule />;
+    }
+  };
+
+  return (
+    <TouchableWithoutFeedback onPress={_onPress}>
+      <View style={[styles.container, isSelected && styles.active]}>
+        <View style={styles.boxIcon}>{displayIcon()}</View>
+        <View>
+          <Text
+            numberOfLines={1}
+            semibold
+            size={14}
+            color={Colors.Gray9}
+            type="Body"
+            style={styles.name}
+          >
+            {script?.name}
+          </Text>
+          <View style={styles.descriptionContainer}>
+            <Text numberOfLines={1} type={'Label'} color={Colors.Gray7}>
+              {`${t('create_by')} ${author}`}
+            </Text>
+            <IconOutline name="right" size={12} />
+          </View>
+        </View>
+      </View>
+    </TouchableWithoutFeedback>
+  );
+};
+
+export default AutomateScript;

package/src/screens/Unit/components/AutomateScript/styles.js

@@ -0,0 +1,48 @@
+import { StyleSheet } from 'react-native';
+import { Constants, Colors } from '../../../../configs';
+
+const marginItem = 12;
+const marginHorizontal = 16;
+const widthItem = (Constants.width - marginHorizontal * 2 - marginItem) / 2;
+const heightItem = (widthItem / 166) * 96;
+
+export default StyleSheet.create({
+  active: {
+    borderColor: Colors.Primary,
+    borderWidth: 2,
+  },
+  container: {
+    padding: 12,
+    borderRadius: 10,
+    shadowColor: Colors.Shadow,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3,
+    elevation: 4,
+    width: widthItem,
+    height: heightItem,
+    backgroundColor: Colors.White,
+    justifyContent: 'space-between',
+    marginBottom: 8,
+  },
+  boxIcon: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  descriptionContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  iconSensor: {
+    width: 40,
+    height: 40,
+    resizeMode: 'contain',
+  },
+  name: {
+    marginTop: 6,
+  },
+});

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

@@ -997,5 +997,6 @@
   "activated": "Activated",
   "text_unit_add_to_favorites_no_devices": "You don't have any devices or all your devices was added to your favorites",
   "not_found": "Not found",
-  "not_activated": "Not activated"
+  "not_activated": "Not activated",
+  "create_contact_success": "Create contact success!"
 }

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

@@ -998,5 +998,6 @@
   "activated": "Được kích hoạt",
   "text_unit_add_to_favorites_no_devices": "Bạn không có thiết bị nào hoặc tất cả thiết bị của bạn đã được thêm vào yêu thích",
   "not_found": "Không tìm thấy",
-  "not_activated": "Không kích hoạt"
+  "not_activated": "Không kích hoạt",
+  "create_contact_success": "Tạo liên hệ thành công!"
 }

package/src/utils/Route/index.js

@@ -146,7 +146,7 @@ const Routes = {
   ItemPasscode: 'ItemPasscode',
   UnitMemberInformation: 'UnitMemberInformation',
   EnterPassword: 'EnterPassword',
-  SelectFavoritesDevices: 'SelectFavoritesDevices',
+  SelectAddToFavorites: 'SelectAddToFavorites',
 };
 
 export default Routes;

package/src/screens/Unit/__test__/SelectFavoritesDevices.test.js

@@ -1,110 +0,0 @@
-import React from 'react';
-import { act, create } from 'react-test-renderer';
-import MockAdapter from 'axios-mock-adapter';
-
-import { SCProvider } from '../../../context';
-import { mockSCStore } from '../../../context/mockStore';
-import SelectFavoritesDevices from '../SelectFavoritesDevices';
-import Device from '../../AddNewAction/Device';
-import BottomButtonView from '../../../commons/BottomButtonView';
-import { API } from '../../../configs';
-import api from '../../../utils/Apis/axios';
-
-const wrapComponent = (route) => (
-  <SCProvider initState={mockSCStore({})}>
-    <SelectFavoritesDevices route={route} />
-  </SCProvider>
-);
-
-const mock = new MockAdapter(api.axiosInstance);
-
-const mockGoBack = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      goBack: mockGoBack,
-    }),
-  };
-});
-
-jest.mock('react', () => {
-  return {
-    ...jest.requireActual('react'),
-    memo: (x) => x,
-  };
-});
-
-describe('Test SelectFavoritesDevices', () => {
-  let tree, route;
-
-  beforeAll(() => {
-    mockGoBack.mockClear();
-    mock.resetHistory();
-    route = {
-      params: {
-        unitId: 1,
-      },
-    };
-  });
-
-  test('test select then add devices to favorites', async () => {
-    let data = [
-      {
-        id: 1,
-        name: 'station 1',
-        devices: [
-          {
-            id: 1,
-            name: 'device 1',
-            icon: 'sensor',
-            icon_kit: null,
-          },
-          {
-            id: 2,
-            name: 'device 2',
-            icon: null,
-            icon_kit: 'icon',
-          },
-        ],
-      },
-      {
-        id: 2,
-        name: 'station 2',
-        devices: [],
-      },
-    ];
-    mock.onGet(API.UNIT.DEVICES(1)).replyOnce(200, data);
-    mock.onPost(API.UNIT.ADD_DEVICES_TO_FAVORITES(1)).replyOnce(200);
-
-    await act(async () => {
-      tree = await create(wrapComponent(route));
-    });
-    const instance = tree.root;
-
-    const bottomButton = instance.findByType(BottomButtonView);
-
-    await act(async () => {
-      await bottomButton.props.onPressMain();
-    });
-    expect(mock.history.post).toHaveLength(0);
-
-    const devices = instance.findAllByType(Device);
-    expect(devices).toHaveLength(2);
-
-    await act(async () => {
-      await devices[0].props.onPress({ id: 1 });
-    });
-    await act(async () => {
-      await devices[1].props.onPress({ id: 2 });
-    });
-    await act(async () => {
-      await devices[0].props.onPress({ id: 1 });
-    });
-    await act(async () => {
-      await bottomButton.props.onPressMain();
-    });
-    expect(mock.history.post).toHaveLength(1);
-    expect(mockGoBack).toBeCalled();
-  });
-});