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

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

@@ -8,6 +8,7 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import Close from '../../../../assets/images/Close.svg';
 import Delay from '../../../../assets/images/Delay.svg';
 import Notify from '../../../../assets/images/Notify.svg';
+import Email from '../../../../assets/images/Email.svg';
 import Rearrange from '../../../../assets/images/Rearrange.svg';
 import { FullLoading } from '../../../commons';
 import FImage from '../../../commons/FImage';
@@ -23,6 +24,7 @@ import { ToastBottomHelper } from '../../../utils/Utils';
 import styles from './Styles/indexStyles';
 import UpdateDelayScript from './UpdateDelayScript';
 import UpdateNotifyScript from './UpdateNotifyScript';
+import UpdateEmailScript from './UpdateEmailScript';
 
 const EditActionsList = () => {
   const t = useTranslations();
@@ -138,7 +140,7 @@ const EditActionsList = () => {
     ({ item, getIndex, drag, isActive }) => {
       const index = getIndex();
       const paddedIndex = (index + 1).toString().padStart(2, '0');
-      const { action_script, notify_script, delay_script } = item;
+      const { action_script, notify_script, delay_script, email_script } = item;
       if (action_script) {
         const {
           sensor_icon_kit,
@@ -236,6 +238,37 @@ const EditActionsList = () => {
           />
         );
       }
+      if (email_script) {
+        const { title, message, str_emails } = email_script;
+
+        return (
+          <CommonItem
+            paddedIndex={paddedIndex}
+            icon={
+              <View style={styles.iconItem}>
+                <Email />
+              </View>
+            }
+            content={
+              <>
+                <Text numberOfLines={1} type="H4" color={Colors.Gray9} semibold>
+                  {title}
+                </Text>
+                <Text numberOfLines={1} type="H4" color={Colors.Gray9}>
+                  {message}
+                </Text>
+                <Text numberOfLines={1} type="H4" color={Colors.Gray9}>
+                  {str_emails}
+                </Text>
+              </>
+            }
+            onPress={() => onPressRemove(item)}
+            onPressUpdate={() => onShowPopupUpdate(item, index)}
+            isActive={isActive}
+            drag={drag}
+          />
+        );
+      }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [needRefresh]
@@ -246,6 +279,7 @@ const EditActionsList = () => {
       action_script,
       notify_script,
       delay_script,
+      email_script,
       id: scriptItemId,
     } = scriptItem;
 
@@ -294,6 +328,18 @@ const EditActionsList = () => {
         />
       );
     }
+    if (email_script) {
+      return (
+        <UpdateEmailScript
+          unitId={unitId}
+          automateId={id}
+          scriptItemId={scriptItemId}
+          email_script={email_script}
+          t={t}
+          onClosePopup={onClosePopup}
+        />
+      );
+    }
   }, [actionsList, id, navigate, scriptItem, t, unitId, updateIndex]);
 
   const onDragEnd = useCallback(
@@ -309,7 +355,8 @@ const EditActionsList = () => {
   );
 
   const renderMessageRemove = useMemo(() => {
-    const { action_script, notify_script, delay_script } = itemRemove;
+    const { action_script, notify_script, delay_script, email_script } =
+      itemRemove;
     if (action_script) {
       return (
         <ParsedText
@@ -353,6 +400,16 @@ const EditActionsList = () => {
         </ParsedText>
       );
     }
+    if (email_script) {
+      return (
+        <ParsedText
+          style={styles.messageDelete}
+          childrenProps={{ allowFontScaling: false }}
+        >
+          {t('message_delete_notify', { title: email_script.title })}
+        </ParsedText>
+      );
+    }
   }, [itemRemove, t]);
 
   return (

package/src/screens/Automate/ScriptDetail/Components/AddActionScript.js

@@ -10,6 +10,7 @@ import { useBackendPermission } from '../../../../utils/Permission/backend';
 import Event from '../../../../../assets/images/Event.svg';
 import Notify from '../../../../../assets/images/Notify.svg';
 import Delay from '../../../../../assets/images/Delay.svg';
+import Email from '../../../../../assets/images/Email.svg';
 import { TouchableOpacity } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { Text } from '../../../../commons';
@@ -79,6 +80,25 @@ const AddActionScript = memo(
             });
           },
         },
+        {
+          id: 'send_email',
+          text: t('send_email'),
+          image: <Email />,
+          onClick: () => {
+            setIsVisible(false);
+            if (unit) {
+              navigate(Routes.SetupScriptEmail, {
+                automate,
+                unitId: unit,
+              });
+            } else {
+              navigate(Routes.SelectUnit, {
+                automate,
+                routeName: Routes.SetupScriptEmail,
+              });
+            }
+          },
+        },
       ];
     }, [
       automate,

package/src/screens/Automate/ScriptDetail/Styles/indexStyles.js

@@ -101,13 +101,15 @@ export default StyleSheet.create({
   },
   rightItem: {
     flex: 1,
-    marginLeft: 4,
-    borderRadius: 4,
     borderColor: Colors.Gray4,
     borderWidth: 1,
-    flexDirection: 'row',
+    borderRadius: 4,
     paddingVertical: 15,
     paddingHorizontal: 16,
+    marginLeft: 4,
+  },
+  insideItemRight: {
+    flexDirection: 'row',
   },
   rightItemAdd: {
     flex: 1,

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

@@ -38,10 +38,13 @@ describe('Test ScriptDetail', () => {
   let tree;
 
   const mockGoBack = useNavigation().goBack;
+  const mockAddListener = useNavigation().addListener;
   const mockedNavigate = useNavigation().navigate;
   beforeEach(() => {
     mockGoBack.mockClear();
+    mockAddListener.mockClear();
     mockedNavigate.mockClear();
+    global.mockedNavigate.mockClear();
     mock.reset();
     route = {
       params: {
@@ -91,6 +94,16 @@ describe('Test ScriptDetail', () => {
           notify_script: null,
           delay_script: { delay: 10 },
         },
+        {
+          action_script: null,
+          notify_script: null,
+          email_script: {
+            title: 'title',
+            message: 'message',
+            unit_id: 60,
+            str_emails: 'email0@eoh.io',
+          },
+        },
       ],
     };
   });
@@ -165,12 +178,12 @@ describe('Test ScriptDetail', () => {
     await act(async () => {
       await menu.props.onPress();
     });
-    expect(spyToastError).toBeCalledWith(
+    expect(spyToastError).toHaveBeenCalledWith(
       getTranslate('en', 'only_owner_has_permission_to_edit_this_script')
     );
   });
 
-  it('test cannot change type script', async () => {
+  it('test cannot edit condition because not owner', async () => {
     route.params.preAutomate.can_edit = false;
     const spyToastError = jest.spyOn(ToastBottomHelper, 'error');
 
@@ -194,14 +207,46 @@ describe('Test ScriptDetail', () => {
 
     await act(async () => {
       menuActionMore.props.onItemClick({ doAction: jest.fn() });
-      menuActionMore.props.listMenuItem[1].doAction();
+      menuActionMore.props.listMenuItem[0].doAction();
     });
 
-    expect(spyToastError).toBeCalledWith(
+    expect(spyToastError).toHaveBeenCalledWith(
       getTranslate('en', 'only_owner_has_permission_to_edit_this_script')
     );
   });
 
+  it('test cannot edit condition because script disabled', async () => {
+    route.params.preAutomate.script.enable = false;
+    const spyToastError = jest.spyOn(ToastBottomHelper, 'error');
+
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const button = instance.find(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.ICON_MENU_POPUP &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      await button.props.onPress();
+    });
+
+    const menuActionMore = instance.find(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.MENU_POPPER_MORE_2
+    );
+
+    await act(async () => {
+      menuActionMore.props.onItemClick({ doAction: jest.fn() });
+      menuActionMore.props.listMenuItem[0].doAction();
+    });
+
+    expect(spyToastError).toBeCalledWith(
+      getTranslate('en', 'this_script_has_been_disabled')
+    );
+  });
+
   it('test delete script', async () => {
     await act(async () => {
       tree = await create(wrapComponent(route));
@@ -322,7 +367,7 @@ describe('Test ScriptDetail', () => {
           AccessibilityLabel.AUTOMATE_LIST_SCRIPT_ACTION &&
         el.type === TouchableOpacity
     );
-    expect(listScriptActions).toHaveLength(3);
+    expect(listScriptActions).toHaveLength(4);
     await act(async () => {
       await listScriptActions[0].props.onPress();
     });
@@ -360,6 +405,18 @@ describe('Test ScriptDetail', () => {
         automate: route.params.preAutomate,
       }
     );
+    mockedNavigate.mockClear();
+    await act(async () => {
+      await listScriptActions[3].props.onPress();
+    });
+
+    expect(global.mockedNavigate).toHaveBeenCalledWith(
+      Routes.SetupScriptEmail,
+      {
+        automate: route.params.preAutomate,
+        unitId: route.params.preAutomate.unit,
+      }
+    );
   });
 
   it('test press disable script', async () => {
@@ -418,8 +475,8 @@ describe('Test ScriptDetail', () => {
     await act(async () => {
       await button.props.onPress();
     });
-    expect(global.mockedNavigate).not.toBeCalled();
-    expect(spyToastError).toBeCalledWith(
+    expect(global.mockedNavigate).not.toHaveBeenCalled();
+    expect(spyToastError).toHaveBeenCalledWith(
       getTranslate('en', 'reach_max_actions_per_automation', { length: 0 }),
       '',
       7000
@@ -500,21 +557,24 @@ describe('Test ScriptDetail', () => {
   _testGoToActivityLog(3, AUTOMATE_TYPE.VALUE_CHANGE, 'automate', undefined);
 
   it('Test render textCondition value change >', async () => {
+    const automate = {
+      can_edit: true,
+      type: AUTOMATE_TYPE.VALUE_CHANGE,
+      value_change: {
+        config_name: 'Light Value',
+        value: 3,
+        condition: '>',
+        end_device_id: 1,
+        unit_id: 1,
+      },
+      script: {
+        name: 'name',
+        enable: true,
+      },
+    };
     route.params = {
       ...route.params,
-      preAutomate: {
-        can_edit: true,
-        type: AUTOMATE_TYPE.VALUE_CHANGE,
-        value_change: {
-          config_name: 'Light Value',
-          value: 3,
-          condition: '>',
-        },
-        script: {
-          name: 'name',
-          enable: true,
-        },
-      },
+      preAutomate: automate,
     };
     await act(async () => {
       tree = await create(wrapComponent(route));
@@ -534,9 +594,29 @@ describe('Test ScriptDetail', () => {
     );
     await act(async () => {
       menuActionMore.props.onItemClick({ doAction: jest.fn() });
+      menuActionMore.props.listMenuItem[2].doAction();
+    });
+    expect(global.mockedNavigate).toBeCalledWith(Routes.AddUnknownTypeSmart, {
+      automate,
+      closeScreen: undefined,
+    });
+    global.mockedNavigate.mockClear();
+    expect(menuActionMore.props.listMenuItem[0].text).toEqual('Device display');
+    await act(async () => {
       menuActionMore.props.listMenuItem[0].doAction();
     });
-    expect(global.mockedNavigate).toBeCalled();
+    expect(global.mockedNavigate).toBeCalledWith(Routes.DeviceDetail, {
+      sensorId: 1,
+      unitId: 1,
+    });
+    global.mockedNavigate.mockClear();
+    expect(menuActionMore.props.listMenuItem[1].text).toEqual('Unit');
+    await act(async () => {
+      menuActionMore.props.listMenuItem[1].doAction();
+    });
+    expect(global.mockedNavigate).toBeCalledWith(Routes.UnitDetail, {
+      unitId: 1,
+    });
   });
 
   it('Test render textCondition value change =', async () => {
@@ -623,4 +703,30 @@ describe('Test ScriptDetail', () => {
       'Mon, Tue, Thu, Sat at 19:00'
     );
   });
+
+  it('test navigate to UnitDetail on event beforeRemove', async () => {
+    route.params.closeScreen = Routes.UnitDetail;
+    route.params.preAutomate.unit = 2;
+
+    await act(async () => {
+      await create(wrapComponent(route));
+    });
+
+    // beforeRemove test when swipe to back
+    const navigation = useNavigation();
+    const beforeRemoveEvent = { preventDefault: jest.fn() };
+    const beforeRemoveListener = navigation.addListener.mock.calls.find(
+      ([event]) => event === 'beforeRemove'
+    )[1];
+
+    await act(async () => {
+      beforeRemoveListener(beforeRemoveEvent);
+    });
+
+    expect(mockAddListener).toHaveBeenCalled();
+    expect(beforeRemoveEvent.preventDefault).toHaveBeenCalled();
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.UnitDetail, {
+      unitId: 2,
+    });
+  });
 });

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

@@ -14,6 +14,7 @@ import { useIsFocused, useNavigation } from '@react-navigation/native';
 import Add from '../../../../assets/images/Add.svg';
 import Delay from '../../../../assets/images/Delay.svg';
 import Notify from '../../../../assets/images/Notify.svg';
+import Email from '../../../../assets/images/Email.svg';
 import IconComponent from '../../../commons/IconComponent';
 import MenuActionMore from '../../../commons/MenuActionMore';
 import WrapHeaderScrollable from '../../../commons/Sharing/WrapHeaderScrollable';
@@ -22,7 +23,7 @@ import withPreventDoubleClick from '../../../commons/WithPreventDoubleClick';
 import { API, Colors } from '../../../configs';
 import { AccessibilityLabel, AUTOMATE_TYPE } from '../../../configs/Constants';
 import Images from '../../../configs/Images';
-import { usePopover } from '../../../hooks/Common';
+import { useBlockBack, usePopover } from '../../../hooks/Common';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { axiosGet, axiosPost } from '../../../utils/Apis/axios';
 import { useBackendPermission } from '../../../utils/Permission/backend';
@@ -127,7 +128,16 @@ const ScriptDetail = ({ route }) => {
     const items = [
       { text: t('edit_condition'), doAction: () => handleUpdateAutomate() },
     ];
-    if (value_change) {
+    if (unit_id) {
+      items.unshift({
+        text: t('text_unit'),
+        doAction: () =>
+          navigate(Routes.UnitDetail, {
+            unitId: unit_id,
+          }),
+      });
+    }
+    if (end_device_id) {
       items.unshift({
         text: t('device_display'),
         doAction: () =>
@@ -138,7 +148,7 @@ const ScriptDetail = ({ route }) => {
       });
     }
     return items;
-  }, [t, handleUpdateAutomate, value_change, navigate, unit_id, end_device_id]);
+  }, [t, handleUpdateAutomate, navigate, unit_id, end_device_id]);
 
   const handleShowMenuAction = useCallback(() => {
     if (!can_edit) {
@@ -219,6 +229,8 @@ const ScriptDetail = ({ route }) => {
     [automateId]
   );
 
+  useBlockBack(handleGoBack);
+
   useEffect(() => {
     if (isFocused) {
       fetchAutomate();
@@ -385,7 +397,7 @@ const ScriptDetail = ({ route }) => {
 const Item = ({ item, index, enableScript, t }) => {
   const color = enableScript ? Colors.Gray9 : Colors.Gray7;
   const paddedIndex = (index + 1).toString().padStart(2, '0');
-  const { action_script, notify_script, delay_script } = item;
+  const { action_script, notify_script, delay_script, email_script } = item;
   if (action_script) {
     const {
       sensor_icon_kit,
@@ -444,16 +456,18 @@ const Item = ({ item, index, enableScript, t }) => {
           </Text>
         </View>
         <View style={styles.rightItem}>
-          <View style={styles.iconEndDevice}>
-            <Notify />
-          </View>
-          <View style={styles.contentItem}>
-            <Text numberOfLines={1} type="H4" color={color} semibold>
-              {title}
-            </Text>
-            <Text numberOfLines={1} type="H4" color={color}>
-              {message}
-            </Text>
+          <View style={styles.insideItemRight}>
+            <View style={styles.iconEndDevice}>
+              <Notify />
+            </View>
+            <View style={styles.contentItem}>
+              <Text numberOfLines={1} type="H4" color={color} semibold>
+                {title}
+              </Text>
+              <Text numberOfLines={1} type="H4" color={color}>
+                {message}
+              </Text>
+            </View>
           </View>
         </View>
       </View>
@@ -482,6 +496,35 @@ const Item = ({ item, index, enableScript, t }) => {
         </View>
       </View>
     );
+  } else if (email_script) {
+    const { title, message, str_emails } = email_script;
+    return (
+      <View style={styles.wrapItem}>
+        <View style={styles.leftItem}>
+          <Text color={color} type="H4" semibold>
+            {paddedIndex}
+          </Text>
+        </View>
+        <View style={styles.rightItem}>
+          <View style={styles.insideItemRight}>
+            <View style={styles.iconEndDevice}>
+              <Email />
+            </View>
+            <View style={styles.contentItem}>
+              <Text numberOfLines={1} type="H4" color={color} semibold>
+                {title}
+              </Text>
+              <Text numberOfLines={1} type="H4" color={color}>
+                {message}
+              </Text>
+            </View>
+          </View>
+          <Text numberOfLines={1} type="H4" color={color}>
+            {str_emails}
+          </Text>
+        </View>
+      </View>
+    );
   }
 };
 

package/src/screens/SharedUnit/index.js

@@ -7,7 +7,7 @@ import { useTranslations } from '../../hooks/Common/useTranslations';
 import { API } from '../../configs';
 import Text from '../../commons/Text';
 import SharedUnit from '../../commons/Unit/SharedUnit';
-import { useBlockBackAndroid } from '../../hooks/Common';
+import { useBlockBack } from '../../hooks/Common';
 import { AccessibilityLabel } from '../../configs/Constants';
 
 import styles from './styles';
@@ -17,7 +17,7 @@ import { ModalCustom } from '../../commons/Modal';
 import useTitleHeader from '../../hooks/Common/useTitleHeader';
 
 const Shared = () => {
-  useBlockBackAndroid();
+  useBlockBack();
   const t = useTranslations();
   useTitleHeader(t('text_shared_with_me'));
   const navigation = useNavigation();

package/src/screens/Sharing/SelectUser.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import {
   Keyboard,
   StyleSheet,
@@ -17,7 +17,7 @@ import {
   isValidEmailAddress,
   isValidPhoneNumber,
 } from '../../utils/Validation';
-import { axiosPost } from '../../utils/Apis/axios';
+import { axiosGet, axiosPost } from '../../utils/Apis/axios';
 import { AccessibilityLabel } from '../../configs/Constants';
 import Text from '../../commons/Text';
 import { ToastBottomHelper } from '../../utils/Utils';
@@ -30,49 +30,45 @@ const SharingInviteMembers = ({ route }) => {
   const [errorText, setErrorText] = useState('');
   const [content, setContent] = useState('');
   const [users, setUsers] = useState([]);
-  const sharePermissions = useCallback(
-    async (phone, email) => {
-      Keyboard.dismiss();
-      let userSharedPermission = await users.filter(
-        (user) => user.phone_number === phone || user.email === email
-      );
-      if (userSharedPermission.length) {
-        return false;
-      }
-      const { success, data } = await axiosPost(API.SHARE.SHARE(), {
-        phone,
-        email,
-        unit: unit.id,
-        permissions,
-      });
-      if (success) {
-        ToastBottomHelper.success(t('invited_user', { user: phone || email }));
-        setUsers([...users, data.user]);
-      }
-    },
-    [users, unit.id, permissions, t]
-  );
 
-  const validate = useCallback(() => {
-    let phone = '';
-    let email = '';
-    if (!isValidPhoneNumber(content)) {
-      if (!isValidEmailAddress(content)) {
-        setErrorText(t('invalid_phone_number_or_email'));
-        return;
-      } else {
-        email = content;
+  const handleSearchUser = useCallback(async () => {
+    if (!isValidPhoneNumber(content) && !isValidEmailAddress(content)) {
+      setErrorText(t('invalid_phone_number_or_email'));
+      return;
+    }
+    const apiUrl = isValidPhoneNumber(content)
+      ? API.SHARE.SEARCH_USER_BY_PHONE(content)
+      : API.SHARE.SEARCH_USER_BY_EMAIL(content);
+
+    const { success, data } = await axiosGet(apiUrl);
+    if (success) {
+      const userExists = users.some((user) => user.id === data.id);
+      if (!userExists) {
+        setUsers((prevUsers) => [data, ...prevUsers]);
       }
     } else {
-      phone = content;
+      ToastBottomHelper.error(t('not_found'));
     }
     setErrorText('');
-    sharePermissions(phone, email);
-  }, [content, sharePermissions, t]);
+  }, [content, t, users]);
 
-  const onPressNext = useCallback(() => {
-    navigate(Routes.UnitDetail, { unitId: unit.id });
-  }, [navigate, unit?.id]);
+  const onPressInvite = useCallback(async () => {
+    const userIds = users.map((item) => item.id);
+
+    const { success } = await axiosPost(API.SHARE.SHARE_V2(), {
+      user_ids: userIds,
+      unit: unit.id,
+      permissions,
+      is_remove_old_permission: true,
+    });
+    if (success) {
+      ToastBottomHelper.success(t('invited_user'));
+      navigate(Routes.UnitDetail, { unitId: unit.id });
+      setUsers([]);
+    }
+  }, [navigate, permissions, t, unit.id, users]);
+
+  const isInValid = useMemo(() => users.length === 0, [users]);
 
   return (
     <View style={styles.wrapContainer}>
@@ -116,8 +112,8 @@ const SharingInviteMembers = ({ route }) => {
               <View style={styles.buttonWrapper}>
                 <Button
                   type="primary"
-                  title={t('add_user_invite')}
-                  onPress={validate}
+                  title={t('check')}
+                  onPress={handleSearchUser}
                   style={Theme.shadow}
                   accessibilityLabel={AccessibilityLabel.INVITE_PHONE_NUMBER}
                 />
@@ -141,7 +137,7 @@ const SharingInviteMembers = ({ route }) => {
                   </Text>
                 </View>
                 <View style={[styles.addedWrapper]}>
-                  <AccountList accounts={users} />
+                  <AccountList accounts={users} setUsers={setUsers} />
                 </View>
               </View>
             )}
@@ -152,10 +148,10 @@ const SharingInviteMembers = ({ route }) => {
         disableKeyBoardAnimated={true}
         leftTitle={t('back')}
         onLeftClick={goBack}
-        rightTitle={t('done')}
-        rightDisabled={false}
-        onRightClick={onPressNext}
-        accessibilityLabelPrefix={AccessibilityLabel.PREFIX.BUTTON_ADD_MEMBER}
+        rightTitle={t('add_user_invite')}
+        rightDisabled={isInValid}
+        onRightClick={onPressInvite}
+        accessibilityLabel={AccessibilityLabel.PREFIX.BUTTON_ADD_MEMBER}
       />
     </View>
   );
@@ -203,8 +199,12 @@ const styles = StyleSheet.create({
     color: Colors.Gray8,
   },
   addedWrapper: {
-    ...Theme.whiteBoxRadius,
     marginTop: 8,
+    paddingTop: 15,
+    paddingHorizontal: 15,
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: Colors.Gray5,
   },
   containerUsers: {
     marginTop: 24,