@eohjsc/react-native-smart-city 0.7.12 → 0.7.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.7.12",
+  "version": "0.7.13",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -42,7 +42,8 @@
     "pods": "cd example && pod-install --quiet",
     "bootstrap": "yarn example && yarn && yarn pods",
     "build": "syncdir ./src ../EohMobile/node_modules/@eohjsc/react-native-smart-city/src",
-    "watch": "syncdir ./src ../EohMobile/node_modules/@eohjsc/react-native-smart-city/src --watch"
+    "watch": "syncdir ./src ../EohMobile/node_modules/@eohjsc/react-native-smart-city/src --watch",
+    "copy-files": "cp -rfv ./assets/* ../EohMobile/node_modules/@eohjsc/react-native-smart-city/assets && cp -rfv ./src/* ../EohMobile/node_modules/@eohjsc/react-native-smart-city/src"
   },
   "repository": {
     "type": "git",
@@ -87,7 +88,7 @@
     "@react-navigation/drawer": "^6.6.15",
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/native-stack": "^6.11.0",
-    "@sentry/react-native": "^5.24.1",
+    "@sentry/react-native": "^6.2.0",
     "@testing-library/react-hooks": "^6.0.0",
     "@types/jest": "^29.2.1",
     "@types/react": "^17.0.0",

package/src/commons/Header/Styles/HeaderCustomStyles.js

@@ -41,7 +41,7 @@ export default StyleSheet.create({
     height: 20,
   },
   title: {
-    textAlign: 'center',
+    alignSelf: 'center',
     fontSize: 16,
     lineHeight: 24,
     fontWeight: 'bold',
@@ -55,5 +55,6 @@ export default StyleSheet.create({
   },
   wrapTitle: {
     marginHorizontal: 12,
+    flex: 1,
   },
 });

package/src/commons/Sharing/MemberList.js

@@ -1,49 +1,57 @@
 import React, { memo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import { Colors, Constants } from '../../configs';
+import { Constants } from '../../configs';
 import Text from '../../commons/Text';
 import RowMember from './RowMember';
+import { RefreshControl, FlatList } from 'react-native';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
 
 const MemberList = ({
   dataMember,
   ownerId,
   unit,
   currentUserId, //user is using app
+  isRefresh,
+  onRefresh,
 }) => {
   const t = useTranslations();
   return (
-    <View style={styles.box}>
-      {!!dataMember.length &&
-        dataMember.map((item, index) => (
-          <RowMember
-            member={item}
-            unit={unit}
-            index={index}
-            ownerId={ownerId}
-            currentUserId={currentUserId}
-            key={index.toString()}
-          />
-        ))}
-      {!dataMember.length && (
+    <FlatList
+      contentContainerStyle={styles.contentContainer}
+      keyExtractor={(item) => `${item.id}`}
+      data={dataMember}
+      extraData={dataMember}
+      numColumns={1}
+      refreshControl={
+        <RefreshControl refreshing={isRefresh} onRefresh={onRefresh} />
+      }
+      renderItem={({ item, index }) => (
+        <RowMember
+          member={item}
+          unit={unit}
+          index={index}
+          ownerId={ownerId}
+          currentUserId={currentUserId}
+        />
+      )}
+      ListEmptyComponent={() => (
         <View style={styles.viewEmpty}>
-          <Text style={styles.textCenter}>{t('no_member')}</Text>
+          <Text type="H4">{t('no_member')}</Text>
         </View>
       )}
-    </View>
+    />
   );
 };
 export default memo(MemberList);
 
 const styles = StyleSheet.create({
-  box: {
-    backgroundColor: Colors.White,
-    paddingTop: 20,
+  contentContainer: {
+    paddingBottom: getBottomSpace() + 50,
   },
   viewEmpty: {
     justifyContent: 'center',
     alignItems: 'center',
     height: Constants.height - 200,
-    backgroundColor: Colors.White,
   },
 });

package/src/commons/Sharing/RowMember.js

@@ -18,160 +18,108 @@ const arrColor = [
   Colors.Green3,
   Colors.Cyan2,
 ];
-const RowMember = memo(
-  ({
-    member,
-    index,
-    ownerId,
-    unit,
-    currentUserId,
-    type,
-    leftIcon = true,
-    rightComponent = true,
-  }) => {
-    const t = useTranslations();
-    const { navigate } = useNavigation();
-    const { id, name, phone_number, email, share_id, avatar } = member;
-    const [role, roleColor] = useMemo(
-      () =>
-        id === ownerId
-          ? [t('owner'), Colors.Primary]
-          : id === currentUserId
-          ? [t('me'), Colors.Primary]
-          : [t('member'), Colors.Gray6],
-      [currentUserId, id, ownerId, t]
-    );
-    const firstWordsInName = useMemo(() => {
-      const wordTemp = name || shortEmailName(email) || '';
-      return wordTemp?.charAt();
-    }, [email, name]);
+const RowMember = memo(({ member, index, ownerId, unit, currentUserId }) => {
+  const t = useTranslations();
+  const { navigate } = useNavigation();
+  const { id, name, phone_number, email, avatar } = member;
+  const [role, roleColor] = useMemo(
+    () =>
+      id === ownerId
+        ? [t('owner'), Colors.Primary]
+        : id === currentUserId
+        ? [t('me'), Colors.Primary]
+        : [t('member'), Colors.Gray6],
+    [currentUserId, id, ownerId, t]
+  );
+  const firstWordsInName = useMemo(() => {
+    const wordTemp = name || shortEmailName(email) || '';
+    return wordTemp?.charAt();
+  }, [email, name]);
 
-    if (id === ownerId && share_id) {
-      return null;
-    }
-    const circleColorTypes = {
-      primary: 'primary',
-      disable: 'disable',
-      noneBG: 'none',
-    };
-    const circleColor = type
-      ? circleColorTypes[type]
-      : arrColor[index % arrColor.length];
-
-    const onPressInfo = () => {
-      navigate(Routes.UnitMemberInformation, {
-        member,
-        ownerId,
-        unit,
-      });
-    };
-    return (
-      <View style={styles.rowContainer}>
-        <TouchableOpacity
-          onPress={onPressInfo}
-          disabled={type === 'disable'}
-          accessibilityLabel={`${AccessibilityLabel.SELECT_MEMBER_UNIT}-${member?.id}`}
-        >
-          <View style={styles.Border}>
-            {!!leftIcon && (
-              <View style={styles.paddingLeft16}>
-                {avatar ? (
-                  <Image source={{ uri: avatar }} style={styles.avatar} />
-                ) : (
-                  <CircleView size={40} backgroundColor={circleColor} center>
-                    <Text color={Colors.White}>{firstWordsInName}</Text>
-                  </CircleView>
-                )}
-              </View>
-            )}
-            <View style={styles.columnFlex}>
-              <Text style={styles.titleName}>
-                {name || shortEmailName(email) || ''}
+  const onPressInfo = () => {
+    navigate(Routes.UnitMemberInformation, {
+      member,
+      ownerId,
+      unit,
+    });
+  };
+  return (
+    <TouchableOpacity
+      onPress={onPressInfo}
+      accessibilityLabel={`${AccessibilityLabel.SELECT_MEMBER_UNIT}-${member?.id}`}
+    >
+      <View style={styles.border}>
+        <View style={styles.paddingLeft16}>
+          {avatar ? (
+            <Image source={{ uri: avatar }} style={styles.avatar} />
+          ) : (
+            <CircleView
+              size={40}
+              backgroundColor={arrColor[index % arrColor.length]}
+              center
+            >
+              <Text
+                color={Colors.White}
+                accessibilityLabel={
+                  AccessibilityLabel.UNIT_MEMBER.ROW_TEXT_AVATAR
+                }
+              >
+                {firstWordsInName}
               </Text>
-              {/* Can't write test for this case, use !! to avoid app crash when phone_number is '' */}
-              {!!phone_number && (
-                <Text
-                  style={styles.status}
-                  accessibilityLabel={
-                    AccessibilityLabel.TEXT_PHONE_NUMBER_UNIT_MEMBER
-                  }
-                >
-                  {phone_number}
-                </Text>
-              )}
-            </View>
-            {!!rightComponent && (
-              <View style={styles.endFlex}>
-                {!!role && (
-                  <Text style={[styles.textRole, { color: roleColor }]}>
-                    {role}
-                  </Text>
-                )}
-              </View>
-            )}
-          </View>
-        </TouchableOpacity>
+            </CircleView>
+          )}
+        </View>
+        <View style={styles.columnFlex}>
+          <Text
+            style={styles.titleName}
+            accessibilityLabel={AccessibilityLabel.UNIT_MEMBER.ROW_TEXT_NAME}
+          >
+            {name || shortEmailName(email) || ''}
+          </Text>
+          {/* Can't write test for this case, use !! to avoid app crash when phone_number is '' */}
+          {!!phone_number && (
+            <Text
+              style={styles.status}
+              accessibilityLabel={AccessibilityLabel.UNIT_MEMBER.ROW_TEXT_PHONE}
+            >
+              {'******' + phone_number.slice(-4)}
+            </Text>
+          )}
+        </View>
+        <View style={styles.endFlex}>
+          {!!role && (
+            <Text
+              style={[styles.textRole, { color: roleColor }]}
+              accessibilityLabel={AccessibilityLabel.UNIT_MEMBER.ROW_TEXT_ROLE}
+            >
+              {role}
+            </Text>
+          )}
+        </View>
       </View>
-    );
-  }
-);
+    </TouchableOpacity>
+  );
+});
 
 export default RowMember;
 
 const styles = StyleSheet.create({
-  rowContainer: {
-    flex: 1,
-  },
-  iconContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 16,
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-  },
-  infoContainer: {
-    flex: 1,
-    paddingTop: 17,
-    borderBottomWidth: 1,
-    borderColor: Colors.Gray4,
-  },
-  textName: {
-    fontSize: 16,
-    lineHeight: 24,
-    color: Colors.Gray9,
-    marginBottom: 0,
-  },
   textRole: {
     fontSize: 12,
     lineHeight: 20,
   },
-  buttonRemove: {
-    position: 'absolute',
-    right: 0,
-    top: 10,
-    bottom: 10,
-    paddingHorizontal: 10,
-    justifyContent: 'center',
-  },
-  textCenter: {
-    alignSelf: 'center',
-  },
   columnFlex: {
     paddingLeft: 16,
     justifyContent: 'center',
     flexDirection: 'column',
   },
-  rowFlex: {
-    flexDirection: 'row',
-  },
   endFlex: {
     flex: 1,
     justifyContent: 'flex-start',
     alignItems: 'flex-end',
     paddingRight: 16,
   },
-  Border: {
+  border: {
     display: 'flex',
     width: '100%',
     borderWidth: 0,
@@ -196,9 +144,6 @@ const styles = StyleSheet.create({
     fontWeight: '400',
     color: Colors.Gray7,
   },
-  container: {
-    paddingTop: 0,
-  },
   paddingLeft16: {
     paddingLeft: 16,
   },

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

@@ -1,31 +1,30 @@
-import React from 'react';
 import renderer, { act } from 'react-test-renderer';
+
 import MemberList from '../MemberList';
+import React from 'react';
 import RowMember from '../RowMember';
-import Text from '../../Text';
 import { SCProvider } from '../../../context';
+import Text from '../../Text';
 import { mockSCStore } from '../../../context/mockStore';
 import t from '../../../hooks/Common/useTranslations';
 
-const wrapComponent = (dataMember, ownerId, currentUserId, mockFunc) => (
+const wrapComponent = (dataMember, ownerId, currentUserId) => (
   <SCProvider initState={mockSCStore({})}>
     <MemberList
       dataMember={dataMember}
       ownerId={ownerId}
       currentUserId={currentUserId}
-      onPressRemove={mockFunc}
     />
   </SCProvider>
 );
 
 describe('MemberList', () => {
   let tree;
-  const mockFunc = jest.fn();
 
   it('MemberList snapshot id dataMember === ownerId', async () => {
     const dataMember = [{ id: 1, name: 'CEO' }];
     await act(async () => {
-      tree = await renderer.create(wrapComponent(dataMember, 1, 2, mockFunc));
+      tree = await renderer.create(wrapComponent(dataMember, 1, 2));
     });
     const instance = tree.root;
     const rowMember = instance.findByType(RowMember);
@@ -38,9 +37,7 @@ describe('MemberList', () => {
   it('MemberList snapshot id dataMember !== ownerId', async () => {
     const dataMember = [{ id: 1, name: 'CEO' }];
     await act(async () => {
-      tree = await renderer.create(
-        wrapComponent(dataMember, 2, null, mockFunc)
-      );
+      tree = await renderer.create(wrapComponent(dataMember, 2, null));
     });
     const instance = tree.root;
     const rowMember = instance.findByType(RowMember);
@@ -53,7 +50,7 @@ describe('MemberList', () => {
   it('MemberList snapshot id dataMember === currentUserId', async () => {
     const dataMember = [{ id: 1, name: 'CEO' }];
     await act(async () => {
-      tree = await renderer.create(wrapComponent(dataMember, 2, 1, mockFunc));
+      tree = await renderer.create(wrapComponent(dataMember, 2, 1));
     });
     const instance = tree.root;
     const rowMembers = instance.findAllByType(RowMember);

package/src/commons/Sharing/__test__/RowMember.test.js

@@ -1,40 +1,137 @@
-import React from 'react';
+import { Image, TouchableOpacity } from 'react-native';
 import renderer, { act } from 'react-test-renderer';
+
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+import React from 'react';
+import Routes from '../../../utils/Route';
 import RowMember from '../RowMember';
-import Text from '../../Text';
 import { SCProvider } from '../../../context';
+import Text from '../../Text';
 import { mockSCStore } from '../../../context/mockStore';
+import { useNavigation } from '@react-navigation/native';
 
-const wrapComponent = (member, ownerId, currentUserId, mockFunc) => (
+const wrapComponent = ({ member, ownerId, currentUserId, index = 0 }) => (
   <SCProvider initState={mockSCStore({})}>
     <RowMember
       member={member}
       ownerId={ownerId}
       currentUserId={currentUserId}
-      onPressRemove={mockFunc}
+      index={index}
     />
   </SCProvider>
 );
 
 describe('RowMember', () => {
   let tree;
-  const mockFunc = jest.fn();
+  const mockedNavigate = useNavigation().navigate;
+  const assertTextItems = ({ instance, avatar, name, phone, role }) => {
+    const avatarText = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.UNIT_MEMBER.ROW_TEXT_AVATAR && el.type === Text
+    );
+    const nameText = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.UNIT_MEMBER.ROW_TEXT_NAME && el.type === Text
+    );
+    const phoneText = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.UNIT_MEMBER.ROW_TEXT_PHONE && el.type === Text
+    );
+    const roleText = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.UNIT_MEMBER.ROW_TEXT_ROLE && el.type === Text
+    );
+
+    avatar !== null
+      ? expect(avatarText[0].props.children).toEqual(avatar)
+      : expect(avatarText.length).toEqual(0);
+    name !== null
+      ? expect(nameText[0].props.children).toEqual(name)
+      : expect(nameText.length).toEqual(0);
+    phone !== null
+      ? expect(phoneText[0].props.children).toEqual(phone)
+      : expect(phoneText.length).toEqual(0);
+    role !== null
+      ? expect(roleText[0].props.children).toEqual(role)
+      : expect(roleText.length).toEqual(0);
+  };
+
+  beforeEach(() => {
+    mockedNavigate.mockClear();
+  });
+
   it('RowMember owner have name', async () => {
-    const dataMember = { id: 1, name: 'CEO' };
+    const dataMember = {
+      id: 1,
+      name: 'CEO',
+      avatar: 'https://image.jpg',
+      phone_number: '0123456789',
+    };
     await act(async () => {
-      tree = await renderer.create(wrapComponent(dataMember, 1, 1, mockFunc));
+      tree = await renderer.create(
+        wrapComponent({ member: dataMember, ownerId: 1, currentUserId: 1 })
+      );
     });
     const instance = tree.root;
-    const textInputs = instance.findAllByType(Text);
-    expect(textInputs[1].props.children).toEqual('CEO');
+    const image = instance.findByType(Image);
+    assertTextItems({
+      instance,
+      avatar: null,
+      name: 'CEO',
+      phone: '******6789',
+      role: 'Owner',
+    });
+    expect(image.props.source.uri).toEqual('https://image.jpg');
+
+    const touchable = instance.findByType(TouchableOpacity);
+    await act(async () => {
+      touchable.props.onPress();
+    });
+
+    expect(global.mockedNavigate).toHaveBeenCalledWith(
+      Routes.UnitMemberInformation,
+      {
+        member: dataMember,
+        ownerId: 1,
+        unit: undefined,
+      }
+    );
+  });
+  it('render RowMember with null name', async () => {
+    const dataMember = { id: 2, name: '', email: 'abc@gmail.com' };
+    await act(async () => {
+      tree = await renderer.create(
+        wrapComponent({ member: dataMember, ownerId: 1, currentUserId: 2 })
+      );
+    });
+    const instance = tree.root;
+
+    assertTextItems({
+      instance,
+      avatar: 'a',
+      name: 'abc',
+      phone: null,
+      role: 'Me',
+    });
   });
-  it('RowMember owner dont have name show start of email ', async () => {
-    const dataMember = { id: 1, name: '', email: 'abc@gmail.com' };
+  it('render RowMember with null name and email', async () => {
+    const dataMember = { id: 3, name: null, email: null };
     await act(async () => {
-      tree = await renderer.create(wrapComponent(dataMember, 1, 1, mockFunc));
+      tree = await renderer.create(
+        wrapComponent({ member: dataMember, ownerId: 1, currentUserId: 1 })
+      );
     });
     const instance = tree.root;
-    const textInputs = instance.findAllByType(Text);
-    expect(textInputs[1].props.children).toEqual('abc');
+    assertTextItems({
+      instance,
+      avatar: '',
+      name: '',
+      phone: null,
+      role: 'Member',
+    });
   });
 });

package/src/configs/AccessibilityLabel.js

@@ -50,8 +50,12 @@ export default {
   SHARING_MEMBER: 'SHARING_MEMBER',
   REMOVE_MEMBER: 'REMOVE_MEMBER',
   CHECK_BOX_CUSTOM: 'CHECK_BOX_CUSTOM',
-  TEXT_PHONE_NUMBER_ITEM: 'TEXT_PHONE_NUMBER_ITEM',
-  TEXT_PHONE_NUMBER_UNIT_MEMBER: 'TEXT_PHONE_NUMBER_UNIT_MEMBER',
+  UNIT_MEMBER: {
+    ROW_TEXT_AVATAR: 'ROW_TEXT_AVATAR',
+    ROW_TEXT_NAME: 'ROW_TEXT_NAME',
+    ROW_TEXT_PHONE: 'ROW_TEXT_PHONE',
+    ROW_TEXT_ROLE: 'ROW_TEXT_ROLE',
+  },
 
   // SmartTiviTemplate
   SMART_TIVI_TEMPLATE: {

package/src/hooks/Common/useIsOwnerOfUnit.js

@@ -6,7 +6,6 @@ export const useIsOwnerOfUnit = (unitOwnerId) => {
     (state) => state?.auth?.account?.user?.id
   );
   let isOwner = unitOwnerId && idUser === unitOwnerId;
-
   return {
     isOwner,
   };

package/src/screens/Automate/AddNewAction/SetupScriptReceiverEmail.js

@@ -104,12 +104,13 @@ const SetupScriptReceiverEmail = ({ route }) => {
 
     return (
       <View style={styles.rowContainer}>
-        <View style={styles.Border}>
+        <View style={styles.border}>
           <CheckBox
             disabled={!email}
             lineWidth={4}
             value={listUser.includes(id)}
             onValueChange={onValueChange(id)}
+            style={styles.checkbox}
           />
           <View style={styles.paddingLeft16}>
             {avatar ? (

package/src/screens/Automate/AddNewAction/Styles/SetupScriptReceiverEmailStyles.js

@@ -41,10 +41,12 @@ export default StyleSheet.create({
     justifyContent: 'flex-start',
     alignItems: 'flex-end',
   },
-  Border: {
+  border: {
     flexDirection: 'row',
     paddingBottom: 16,
     paddingHorizontal: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   titleName: {
     fontSize: 16,
@@ -76,4 +78,8 @@ export default StyleSheet.create({
     borderRadius: 40,
     backgroundColor: Colors.Primary,
   },
+  checkbox: {
+    width: 24,
+    height: 24,
+  },
 });

package/src/screens/Automate/EditActionsList/Styles/UpdateReceiverEmailScriptStyles.js

@@ -36,6 +36,8 @@ export default StyleSheet.create({
     flexDirection: 'row',
     paddingBottom: 16,
     paddingHorizontal: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   paddingLeft16: {
     paddingLeft: 16,
@@ -75,4 +77,8 @@ export default StyleSheet.create({
     fontSize: 12,
     lineHeight: 20,
   },
+  checkbox: {
+    width: 24,
+    height: 24,
+  },
 });

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

@@ -12,6 +12,7 @@ export default StyleSheet.create({
   wrapContent: {
     flex: 1,
     paddingHorizontal: 20,
+    marginBottom: 100,
   },
   wrapItem: {
     flexDirection: 'row',
@@ -50,12 +51,14 @@ export default StyleSheet.create({
   noBorder: {
     borderWidth: 0,
   },
+  icon: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 10,
+  },
   iconItem: {
     width: 35,
     height: 35,
-    marginTop: 6,
-    marginRight: 15,
-    alignItems: 'center',
   },
   contentItem: {
     flex: 1,

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

@@ -20,7 +20,7 @@ const UpdateNotifyScript = ({
   updateIndex,
   setNeedRefresh,
 }) => {
-  const { title, message } = notify_script;
+  const { title, message, unit_id, unit_name } = notify_script;
   const [newValue, setNewValue] = useState({
     newTitle: title,
     newMessage: message,
@@ -31,7 +31,7 @@ const UpdateNotifyScript = ({
       API.AUTOMATE.UPDATE_SCRIPT_NOTIFY(automateId),
       {
         id: scriptItemId,
-        unit: unitId,
+        unit: unit_id,
         title: newValue.newTitle,
         message: newValue.newMessage,
       }
@@ -40,6 +40,7 @@ const UpdateNotifyScript = ({
       actionsList[updateIndex].notify_script = {
         title: newValue.newTitle,
         message: newValue.newMessage,
+        unit_name: unit_name,
       };
       setActionList(actionsList);
       onClosePopup();
@@ -56,7 +57,8 @@ const UpdateNotifyScript = ({
     setActionList,
     setNeedRefresh,
     t,
-    unitId,
+    unit_id,
+    unit_name,
     updateIndex,
   ]);
 

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

@@ -123,6 +123,7 @@ const UpdateReceiverEmailScript = ({ route }) => {
             lineWidth={4}
             value={listUser.includes(id)}
             onValueChange={onValueChange(id)}
+            style={styles.checkbox}
           />
           <View style={styles.paddingLeft16}>
             {avatar ? (

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

@@ -124,7 +124,7 @@ const EditActionsList = () => {
         onLongPress={onPressUpdate}
         accessibilityLabel={AccessibilityLabel.BUTTON_UPDATE}
       >
-        {icon}
+        <View style={styles.icon}>{icon}</View>
         <View style={styles.contentItem}>{content}</View>
         <TouchableOpacity
           accessibilityLabel={AccessibilityLabel.BUTTON_REMOVE_EDIT_ACTION_LIST}
@@ -183,7 +183,7 @@ const EditActionsList = () => {
       }
 
       if (notify_script) {
-        const { title, message } = notify_script;
+        const { title, message, unit_name } = notify_script;
 
         return (
           <CommonItem
@@ -201,6 +201,9 @@ const EditActionsList = () => {
                 <Text numberOfLines={1} type="H4" color={Colors.Gray9}>
                   {message}
                 </Text>
+                <Text numberOfLines={1} type="H4" color={Colors.Gray9}>
+                  {unit_name}
+                </Text>
               </>
             }
             onPress={() => onPressRemove(item)}

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

@@ -89,6 +89,8 @@ export default StyleSheet.create({
     paddingHorizontal: 16,
     marginLeft: 4,
     flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   leftItem: {
     width: 41,
@@ -179,5 +181,7 @@ export default StyleSheet.create({
     height: 35,
     marginTop: 6,
     marginRight: 15,
+    justifyContent: 'center',
+    alignItems: 'center',
   },
 });

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

@@ -447,7 +447,7 @@ const Item = ({ item, index, enableScript, t }) => {
       </View>
     );
   } else if (notify_script) {
-    const { title, message } = notify_script;
+    const { title, message, unit_name } = notify_script;
     return (
       <View style={styles.wrapItem}>
         <View style={styles.leftItem}>
@@ -469,6 +469,9 @@ const Item = ({ item, index, enableScript, t }) => {
               </Text>
             </View>
           </View>
+          <Text numberOfLines={1} type="H4" color={color}>
+            {unit_name}
+          </Text>
         </View>
       </View>
     );
@@ -481,7 +484,7 @@ const Item = ({ item, index, enableScript, t }) => {
             {paddedIndex}
           </Text>
         </View>
-        <View style={styles.rightItem}>
+        <View style={styles.rightItemAction}>
           <View style={styles.iconEndDevice}>
             <Delay />
           </View>

package/src/screens/Sharing/UnitMemberList.js

@@ -1,33 +1,41 @@
-import React, { useCallback, useEffect } from 'react';
-import { IconOutline } from '@ant-design/icons-react-native';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
-import { useNavigation, useIsFocused } from '@react-navigation/native';
+import React, {
+  Fragment,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
-import { useTranslations } from '../../hooks/Common/useTranslations';
+import { useDataMember, useStateAlertAction } from './hooks';
+import { useIsFocused, useNavigation } from '@react-navigation/native';
 
+import { AccessibilityLabel } from '../../configs/Constants';
+import AlertAction from '../../commons/AlertAction';
 import { Colors } from '../../configs';
-import Routes from '../../utils/Route';
+import { HeaderCustom } from '../../commons';
+import { IconOutline } from '@ant-design/icons-react-native';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import MemberList from '../../commons/Sharing/MemberList';
-import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
+import Routes from '../../utils/Route';
+import { Search } from '../../commons/DevMode';
+import { ToastBottomHelper } from '../../utils/Utils';
+import { convertToSlug } from '../../utils/Functions/Search';
+import { useBackendPermission } from '../../utils/Permission/backend';
 import { useIsOwnerOfUnit } from '../../hooks/Common';
-import AlertAction from '../../commons/AlertAction';
-
-import { useDataMember, useStateAlertAction } from './hooks';
-import { AccessibilityLabel } from '../../configs/Constants';
 import { useSCContextSelector } from '../../context';
-import { useBackendPermission } from '../../utils/Permission/backend';
-import { ToastBottomHelper } from '../../utils/Utils';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 const UnitMemberList = ({ route }) => {
   const t = useTranslations();
   const { navigate } = useNavigation();
   const isFocused = useIsFocused();
   const account = useSCContextSelector((state) => state.auth.account);
-  const { unitId, unit } = route?.params || {};
+  const { unitId, unit } = route?.params;
   const { dataMembers, isRefresh, onRefresh, leaveUnit, loading } =
     useDataMember(unitId, unit?.user_id);
   const { isOwner } = useIsOwnerOfUnit(unit?.user_id);
   const permissions = useBackendPermission();
+  const [searchText, setSearchText] = useState('');
 
   const { stateAlertSharingMenu, hideStateAlertSharingMenu, stateLeaveUnit } =
     useStateAlertAction();
@@ -71,45 +79,59 @@ const UnitMemberList = ({ route }) => {
   }, [hideStateAlertSharingMenu, isOwner, leaveUnit, unit.name]);
 
   useEffect(() => {
-    if (isFocused) {
-      onRefresh();
-    }
+    isFocused && onRefresh();
   }, [isFocused, onRefresh]);
 
-  const rightHeader = (
-    <TouchableOpacity
-      accessibilityLabel={AccessibilityLabel.MEMBER_LIST_RIGHT_HEADER_TOUCH}
-      onPress={onPressRightHeader}
-      style={styles.rightHeader}
-    >
-      {isOwner ? (
-        <IconOutline name={'plus'} size={27} color={Colors.Black} />
-      ) : (
-        <MaterialIcons name={'more-vert'} size={27} color={Colors.Black} />
-      )}
-    </TouchableOpacity>
+  const matchedMembers = useMemo(() => {
+    return dataMembers.filter((member) => {
+      const text = convertToSlug(searchText);
+      const isPhoneMatch = convertToSlug(member.phone_number ?? '').includes(
+        text
+      );
+      const isNameMatch = convertToSlug(member.name ?? '').includes(text);
+      return isPhoneMatch || isNameMatch;
+    });
+  }, [dataMembers, searchText]);
+  const rightComponent = useMemo(
+    () => (
+      <TouchableOpacity
+        accessibilityLabel={AccessibilityLabel.MEMBER_LIST_RIGHT_HEADER_TOUCH}
+        onPress={onPressRightHeader}
+      >
+        {isOwner ? (
+          <IconOutline name={'plus'} size={27} color={Colors.Black} />
+        ) : (
+          <MaterialIcons name={'more-vert'} size={27} color={Colors.Black} />
+        )}
+      </TouchableOpacity>
+    ),
+    [isOwner, onPressRightHeader]
   );
 
   return (
     <View style={styles.container}>
-      <WrapHeaderScrollable
+      <HeaderCustom
         title={t('unit_member')}
-        rightComponent={rightHeader}
-        loading={isRefresh}
-        onRefresh={onRefresh}
-        headerAniStyle={styles.headerAniStyle}
-        styleScrollView={{ backgroundColor: Colors.White }}
-      >
+        isShowSeparator
+        rightComponent={rightComponent}
+        titleStyles={styles.headerTitle}
+      />
+      <View style={styles.content}>
         {!loading && (
-          <MemberList
-            accessibilityLabel={AccessibilityLabel.SHARING_MEMBER}
-            dataMember={dataMembers}
-            unit={unit}
-            ownerId={unit.user_id}
-            currentUserId={account.user.id}
-          />
+          <Fragment>
+            <Search onSearch={setSearchText} />
+            <MemberList
+              accessibilityLabel={AccessibilityLabel.SHARING_MEMBER}
+              dataMember={matchedMembers}
+              unit={unit}
+              ownerId={unit.user_id}
+              currentUserId={account.user.id}
+              isRefresh={isRefresh}
+              onRefresh={onRefresh}
+            />
+          </Fragment>
         )}
-      </WrapHeaderScrollable>
+      </View>
       <AlertAction
         visible={stateAlertSharingMenu.visible}
         hideModal={hideStateAlertSharingMenu}
@@ -130,18 +152,19 @@ export default UnitMemberList;
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: Colors.Gray2,
+    backgroundColor: Colors.White,
   },
-  rightHeader: {
-    alignItems: 'center',
-    width: 44,
-    justifyContent: 'center',
+  content: {
     flex: 1,
-  },
-  headerAniStyle: {
-    borderBottomWidth: 0,
+    marginHorizontal: 16,
   },
   rightButtonStyle: {
     color: Colors.Red,
   },
+  headerTitle: {
+    alignSelf: 'flex-start',
+    marginLeft: 0,
+    fontSize: 20,
+    lineHeight: 28,
+  },
 });

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

@@ -1,25 +1,23 @@
-import React from 'react';
-import { create, act } from 'react-test-renderer';
+import { act, create } from 'react-test-renderer';
 
-import UnitMemberList from '../UnitMemberList';
+import { API } from '../../../configs';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import { AlertAction } from '../../../commons';
+import MemberList from '../../../commons/Sharing/MemberList';
+import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+import Routes from '../../../utils/Route';
 import { SCProvider } from '../../../context';
-import { mockSCStore } from '../../../context/mockStore';
+import { Search } from '../../../commons/DevMode';
+import { ToastBottomHelper } from '../../../utils/Utils';
 import { TouchableOpacity } from 'react-native';
-import Routes from '../../../utils/Route';
-import MockAdapter from 'axios-mock-adapter';
+import UnitMemberList from '../UnitMemberList';
 import api from '../../../utils/Apis/axios';
-import { useNavigation } from '@react-navigation/native';
-import { ToastBottomHelper } from '../../../utils/Utils';
 import { getTranslate } from '../../../utils/I18n';
+import { mockSCStore } from '../../../context/mockStore';
+import { useNavigation } from '@react-navigation/native';
 
-new MockAdapter(api.axiosInstance);
-
-jest.mock('../../../hooks/Common', () => {
-  return {
-    useIsOwnerOfUnit: () => ({ isOwner: true }),
-  };
-});
+const mockAxios = new MockAdapter(api.axiosInstance);
 
 const wrapComponent = (route, state = {}) => (
   <SCProvider initState={mockSCStore(state)}>
@@ -29,21 +27,17 @@ const wrapComponent = (route, state = {}) => (
 
 describe('test MemberList', () => {
   let route;
-  let localState = {
-    auth: {
-      account: {
-        user: {
-          id: 2,
-        },
-      },
-    },
-  };
-
-  const mockedNavigate = useNavigation().navigate;
+  let localState;
 
+  const mockNavigate = useNavigation().navigate;
+  const spyToastError = jest.spyOn(ToastBottomHelper, 'error');
+  const spyToastSuccess = jest.spyOn(ToastBottomHelper, 'success');
   beforeEach(() => {
-    mockedNavigate.mockClear();
-
+    mockNavigate.mockClear();
+    mockAxios.reset();
+    spyToastError.mockClear();
+    spyToastSuccess.mockClear();
+    jest.clearAllMocks();
     route = {
       params: {
         unitId: 1,
@@ -54,6 +48,16 @@ describe('test MemberList', () => {
         },
       },
     };
+
+    localState = {
+      auth: {
+        account: {
+          user: {
+            id: 2,
+          },
+        },
+      },
+    };
   });
 
   it('AlertAction rightButtonClick', async () => {
@@ -70,7 +74,7 @@ describe('test MemberList', () => {
     await act(async () => {
       await memberListButtons[1].props.onPress();
     });
-    expect(global.mockedNavigate).toBeCalledWith(Routes.AddMemberStack, {
+    expect(mockNavigate).toHaveBeenCalledWith(Routes.AddMemberStack, {
       screen: Routes.SelectShareDevice,
       params: { unit: { id: 1 } },
     });
@@ -84,6 +88,7 @@ describe('test MemberList', () => {
           auth: {
             account: {
               user: {
+                id: 2,
                 permissions: {
                   max_members_per_unit: 0,
                 },
@@ -94,16 +99,108 @@ describe('test MemberList', () => {
       );
     });
     const instance = tree.root;
-    const spyToastError = jest.spyOn(ToastBottomHelper, 'error');
     const memberListButtons = instance.findAllByType(TouchableOpacity);
     await act(async () => {
       await memberListButtons[1].props.onPress();
     });
-    expect(global.mockedNavigate).not.toBeCalled();
-    expect(spyToastError).toBeCalledWith(
+    expect(mockNavigate).not.toHaveBeenCalled();
+    expect(spyToastError).toHaveBeenCalledWith(
       getTranslate('en', 'reach_max_members_per_unit', { length: 0 }),
       '',
       7000
     );
   });
+
+  it('test member leaves unit', async () => {
+    mockAxios.onDelete(API.SHARE.UNITS_MEMBER_DETAIL(1, 'me')).reply(200);
+
+    localState = {
+      auth: {
+        account: {
+          user: {
+            id: 5,
+          },
+        },
+      },
+    };
+
+    let tree;
+    await act(async () => {
+      tree = await create(wrapComponent(route, localState));
+    });
+    const instance = tree.root;
+
+    const alertAction = instance.findByType(AlertAction);
+    await act(async () => {
+      alertAction.props.rightButtonClick();
+    });
+
+    const rightHeaderButton = instance.find(
+      (el) =>
+        el.type === TouchableOpacity &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.MEMBER_LIST_RIGHT_HEADER_TOUCH
+    );
+    await act(async () => {
+      await rightHeaderButton.props.onPress();
+    });
+    expect(mockNavigate).toHaveBeenCalledWith(Routes.Dashboard);
+    expect(spyToastSuccess).toHaveBeenCalledTimes(1);
+  });
+
+  it('test search member by name and phone', async () => {
+    const dataMember = [
+      {
+        id: 1,
+        name: 'user 1',
+        avatar: 'https://image1.jpg',
+        phone_number: '0933123456',
+      },
+      {
+        id: 2,
+        name: 'user 2',
+        avatar: 'https://image1.jpg',
+        phone_number: '0933777111',
+      },
+      {
+        id: 3,
+        name: null,
+        avatar: 'https://image1.jpg',
+        phone_number: null,
+      },
+    ];
+
+    mockAxios.onGet(API.SHARE.UNITS_MEMBERS(1)).reply(200, dataMember);
+
+    let tree;
+    await act(async () => {
+      tree = await create(wrapComponent(route, localState));
+    });
+    const instance = tree.root;
+
+    const search = instance.findByType(Search);
+    const memberList = instance.findByType(MemberList);
+    await act(async () => {
+      search.props.onSearch('user 1');
+    });
+
+    expect(memberList.props.dataMember).toEqual([dataMember[0]]);
+
+    await act(async () => {
+      search.props.onSearch('3777');
+    });
+
+    expect(memberList.props.dataMember).toEqual([dataMember[1]]);
+
+    await act(async () => {
+      search.props.onSearch('');
+    });
+
+    //move owner to top
+    expect(memberList.props.dataMember).toEqual([
+      dataMember[1],
+      dataMember[0],
+      dataMember[2],
+    ]);
+  });
 });

package/src/screens/Sharing/hooks/__test__/index.test.js

@@ -1,12 +1,13 @@
-import React from 'react';
 import { act, renderHook } from '@testing-library/react-hooks';
-import MockAdapter from 'axios-mock-adapter';
-import { useDataMember } from '..';
+
 import API from '../../../../configs/API';
-import api from '../../../../utils/Apis/axios';
+import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+import Routes from '../../../../utils/Route';
 import { SCProvider } from '../../../../context';
+import api from '../../../../utils/Apis/axios';
 import { mockSCStore } from '../../../../context/mockStore';
-import Routes from '../../../../utils/Route';
+import { useDataMember } from '..';
 
 const mock = new MockAdapter(api.axiosInstance);
 

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

@@ -1,12 +1,13 @@
+import { axiosDelete, axiosGet } from '../../../utils/Apis/axios';
 import { useCallback, useState } from 'react';
-import { useTranslations } from '../../../hooks/Common/useTranslations';
-import { useNavigation } from '@react-navigation/native';
+
 import { API } from '../../../configs';
 import Routes from '../../../utils/Route';
-import { axiosDelete, axiosGet } from '../../../utils/Apis/axios';
 import { ToastBottomHelper } from '../../../utils/Utils';
-import { useSCContextSelector } from '../../../context';
 import { useIsOwnerOfUnit } from '../../../hooks/Common';
+import { useNavigation } from '@react-navigation/native';
+import { useSCContextSelector } from '../../../context';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 
 const useDataMember = (unitId, userUnitId = undefined) => {
   const t = useTranslations();