@eohjsc/react-native-smart-city 0.4.78 → 0.4.79

package/package.json

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

package/src/commons/ActionTemplate/SwitchButtonAction.js

@@ -0,0 +1,55 @@
+import React, { useCallback } from 'react';
+import { TouchableOpacity } from 'react-native';
+import AccessibilityLabel from '../../configs/AccessibilityLabel';
+import Text from '../Text';
+import styles from './OnOffButtonActionStyles';
+
+const SwitchButtonAction = ({ title, configuration, onPress, template }) => {
+  const { text_on, text_off, action_on, action_off } = configuration;
+  const onPressActionOn = useCallback(() => {
+    onPress &&
+      onPress({
+        ...configuration,
+        name: text_on,
+        action: action_on,
+        action_off: null,
+        template,
+      });
+  }, [onPress, configuration, text_on, action_on, template]);
+
+  const onPressActionOff = useCallback(() => {
+    onPress &&
+      onPress({
+        ...configuration,
+        name: text_off,
+        action: action_off,
+        action_on: null,
+        template,
+      });
+  }, [onPress, configuration, text_off, action_off, template]);
+
+  return (
+    <>
+      <TouchableOpacity onPress={onPressActionOn}>
+        <Text
+          type="H4"
+          style={styles.textWithLine}
+          accessibilityLabel={AccessibilityLabel.ON_OFF_BUTTON_ACTION_TITLE}
+        >
+          {title} {text_on}
+        </Text>
+      </TouchableOpacity>
+      <TouchableOpacity onPress={onPressActionOff}>
+        <Text
+          type="H4"
+          style={styles.textWithLine}
+          accessibilityLabel={AccessibilityLabel.ON_OFF_BUTTON_ACTION_TITLE}
+        >
+          {title} {text_off}
+        </Text>
+      </TouchableOpacity>
+    </>
+  );
+};
+
+export default SwitchButtonAction;

package/src/commons/ActionTemplate/__test__/SwitchButtonAction.test.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { TouchableOpacity } from 'react-native';
+
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import Text from '../../Text';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+import SwitchButtonAction from '../SwitchButtonAction';
+
+const wrapComponent = (configuration, onPress) => (
+  <SCProvider initState={mockSCStore({})}>
+    <SwitchButtonAction
+      configuration={configuration}
+      onPress={onPress}
+      title={'Cong tac 1'}
+      template={'switch_button_action_template'}
+    />
+  </SCProvider>
+);
+
+describe('Test SwitchButtonAction', () => {
+  let tree;
+
+  it('test onPress', async () => {
+    const configuration = {
+      text_on: 'On',
+      text_off: 'Off',
+      action_off: 'f49e1577-493d-4bae-a9ab-3b0f96a4ec52',
+      action_on: '94600cbe-2035-47d5-bd43-89ace5d59796',
+    };
+    const mockFuntion = jest.fn();
+    await act(async () => {
+      tree = await renderer.create(wrapComponent(configuration, mockFuntion));
+    });
+    const instance = tree.root;
+    const touchOpacity = instance.findAllByType(TouchableOpacity);
+
+    expect(touchOpacity).toHaveLength(2);
+    await act(async () => {
+      touchOpacity[0].props.onPress();
+      touchOpacity[1].props.onPress();
+    });
+    expect(mockFuntion).toHaveBeenCalled();
+
+    const textTitle = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.ON_OFF_BUTTON_ACTION_TITLE && el.type === Text
+    );
+    expect(textTitle).toHaveLength(2);
+    expect(textTitle[0].props.children).toEqual(['Cong tac 1', ' ', 'On']);
+    expect(textTitle[1].props.children).toEqual(['Cong tac 1', ' ', 'Off']);
+  });
+});

package/src/commons/ActionTemplate/__test__/index.test.js

@@ -7,6 +7,8 @@ import { mockSCStore } from '../../../context/mockStore';
 import SelectActionCard from '../../SelectActionCard';
 import Modal from 'react-native-modal';
 import ThreeButtonAction from '../ThreeButtonAction';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+import Text from '../../Text';
 
 const mockOnSelectAction = jest.fn();
 
@@ -35,6 +37,16 @@ describe('Test ActionTemplate', () => {
       is_display_lock: true,
     },
   };
+  let switchTemplate = {
+    title: '',
+    template: 'switch_button_action_template',
+    configuration: {
+      text_on: 'On',
+      text_off: 'Off',
+      action_off: 'f49e1577-493d-4bae-a9ab-3b0f96a4ec52',
+      action_on: '94600cbe-2035-47d5-bd43-89ace5d59796',
+    },
+  };
 
   it('test onPress SelectActionCard', async () => {
     await act(async () => {
@@ -75,4 +87,16 @@ describe('Test ActionTemplate', () => {
       template: 'three_button_action_template',
     });
   });
+  it('test render SwitchButtonAction', async () => {
+    await act(async () => {
+      tree = await renderer.create(wrapComponent(switchTemplate));
+    });
+    const instance = tree.root;
+    const textTitle = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.ON_OFF_BUTTON_ACTION_TITLE && el.type === Text
+    );
+    expect(textTitle).toHaveLength(2);
+  });
 });

package/src/commons/ActionTemplate/index.js

@@ -12,6 +12,7 @@ import { ModalCustom } from '../Modal';
 import CurtainAction from './CurtainAction';
 import OnOffSmartLockAction from './OnOffSmartLockAction';
 import { DEVICE_TYPE } from '../../configs/Constants';
+import SwitchButtonAction from './SwitchButtonAction';
 
 const ActionTemplate = memo(({ device, item, onSelectAction }) => {
   const t = useTranslations();
@@ -61,6 +62,8 @@ const ActionTemplate = memo(({ device, item, onSelectAction }) => {
         return <CurtainAction {...item} onPress={onPressSelectAction} />;
       case 'OnOffSmartLockActionTemplate':
         return <OnOffSmartLockAction {...item} onPress={onPressSelectAction} />;
+      case 'switch_button_action_template':
+        return <SwitchButtonAction {...item} onPress={onPressSelectAction} />;
       default:
         return null;
     }

package/src/commons/Auth/AccountItem.js

@@ -7,6 +7,7 @@ import Avatar from '../../../assets/images/avatar.svg';
 import AccessibilityLabel from '../../configs/AccessibilityLabel';
 
 const AccountItem = ({ account }) => {
+  const { name, email, phone_number } = account;
   return (
     <View style={styles.container}>
       <View styles={styles.wrap}>
@@ -14,18 +15,18 @@ const AccountItem = ({ account }) => {
       </View>
       <View style={styles.space} />
       <View style={styles.wrap}>
-        {(account?.name || account?.email) && (
+        {(name || email) && (
           <Text style={{ color: Colors.Gray9 }}>
-            {account?.name || shortEmailName(account?.email)}
+            {name || shortEmailName(email)}
           </Text>
         )}
 
-        {account?.phone_number && (
+        {!!phone_number /* Can't write test for this case, use !! to avoid app crash when phone_number is ''  */ && (
           <Text
             style={{ color: Colors.Gray8 }}
             accessibilityLabel={AccessibilityLabel.TEXT_PHONE_NUMBER_ITEM}
           >
-            {account?.phone_number}
+            {phone_number}
           </Text>
         )}
       </View>

package/src/commons/ChartAggregationOption/index.js

@@ -9,7 +9,6 @@ const defaultOptions = [
     title: 'D',
     data: 'date',
   },
-
   {
     title: 'W',
     data: 'week',
@@ -33,7 +32,7 @@ const ItemButton = ({ title, onPress, isSelected }) => {
       style={[styles.button, isSelected && styles.selectedButton]}
     >
       <View>
-        <Text bold color={isSelected && Colors.Primary}>
+        <Text bold color={isSelected ? Colors.Primary : Colors.Gray9}>
           {title}
         </Text>
       </View>

package/src/commons/Sharing/MemberList.js

@@ -38,6 +38,7 @@ export default memo(MemberList);
 const styles = StyleSheet.create({
   box: {
     backgroundColor: Colors.White,
+    paddingTop: 20,
   },
   viewEmpty: {
     justifyContent: 'center',

package/src/commons/Sharing/RowMember.js

@@ -31,21 +31,22 @@ const RowMember = memo(
   }) => {
     const t = useTranslations();
     const { navigate } = useNavigation();
+    const { id, name, phone_number, email, share_id, avatar } = member;
     const [role, roleColor] = useMemo(
       () =>
-        member?.id === ownerId
+        id === ownerId
           ? [t('owner'), Colors.Primary]
-          : member?.id === currentUserId
+          : id === currentUserId
           ? [t('me'), Colors.Primary]
           : [t('member'), Colors.Gray6],
-      [currentUserId, member?.id, ownerId, t]
+      [currentUserId, id, ownerId, t]
     );
     const firstWordsInName = useMemo(() => {
-      const wordTemp = member?.name || shortEmailName(member?.email) || '';
+      const wordTemp = name || shortEmailName(email) || '';
       return wordTemp?.charAt();
-    }, [member?.email, member?.name]);
+    }, [email, name]);
 
-    if (member?.id === ownerId && member?.share_id) {
+    if (id === ownerId && share_id) {
       return null;
     }
     const circleColorTypes = {
@@ -74,11 +75,8 @@ const RowMember = memo(
           <View style={styles.Border}>
             {!!leftIcon && (
               <View style={styles.paddingLeft16}>
-                {member?.avatar ? (
-                  <Image
-                    source={{ uri: member?.avatar }}
-                    style={styles.avatar}
-                  />
+                {avatar ? (
+                  <Image source={{ uri: avatar }} style={styles.avatar} />
                 ) : (
                   <CircleView size={40} backgroundColor={circleColor} center>
                     <Text color={Colors.White}>{firstWordsInName}</Text>
@@ -88,16 +86,17 @@ const RowMember = memo(
             )}
             <View style={styles.columnFlex}>
               <Text style={styles.titleName}>
-                {member?.name || shortEmailName(member?.email) || ''}
+                {name || shortEmailName(email) || ''}
               </Text>
-              {member?.phone_number && (
+              {/* 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
                   }
                 >
-                  {member?.phone_number}
+                  {phone_number}
                 </Text>
               )}
             </View>

package/src/navigations/AddMemberStack.js

@@ -2,10 +2,10 @@ import { createStackNavigator } from '@react-navigation/stack';
 import React, { memo } from 'react';
 
 import AddCommonSelectUnit from '../screens/AddCommon/SelectUnit';
-import SharingSelectPermission from '../screens/Sharing/SelectPermission';
-import SharingInviteMembers from '../screens/Sharing/SelectUser';
 import Route from '../utils/Route';
 import { screenOptions } from './utils';
+import SharingInviteMembers from '../screens/Sharing/SelectUser';
+import SharingSelectPermission from '../screens/Sharing/SharingSelectPermission';
 
 const Stack = createStackNavigator();
 

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

@@ -14,7 +14,7 @@ import NewActionWrapper from './NewActionWrapper';
 import moment from 'moment';
 import { ToastBottomHelper } from '../../../utils/Utils';
 
-const RenderActionItem = ({ device, item, handleOnSelectAction, index }) => {
+const RenderActionItem = ({ device, item, handleOnSelectAction, index, t }) => {
   item.index = index;
   switch (item.template) {
     case 'on_off_button_action_template':
@@ -23,6 +23,7 @@ const RenderActionItem = ({ device, item, handleOnSelectAction, index }) => {
     case 'OnOffSimpleActionTemplate':
     case 'curtain_action_template':
     case 'OnOffSmartLockActionTemplate':
+    case 'switch_button_action_template':
       return (
         <ActionTemplate
           device={device}
@@ -57,14 +58,20 @@ const RenderActionItem = ({ device, item, handleOnSelectAction, index }) => {
           onSelectAction={handleOnSelectAction}
         />
       );
+    default:
+      ToastBottomHelper.error(
+        t('template_not_supported', { template: item.template }),
+        '',
+        3000
+      );
+      return null;
   }
 };
 
 const ChooseAction = ({ route }) => {
   const t = useTranslations();
   const { navigate } = useNavigation();
-  const { unitId, device, automateId, numberActionCanAdd } =
-    route?.params || {};
+  const { unitId, device, automateId, numberActionCanAdd } = route?.params;
   const [data, setData] = useState([]);
   const [actions, setActions] = useState([]);
 
@@ -141,10 +148,12 @@ const ChooseAction = ({ route }) => {
         {!!data?.length &&
           data.map((item, index) => (
             <RenderActionItem
+              key={`action_item_${index}`}
               device={device}
               item={item}
               index={index}
               handleOnSelectAction={handleOnSelectAction}
+              t={t}
             />
           ))}
       </View>

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

@@ -43,11 +43,9 @@ const valueEvaluationToOptions = (valueEvaluation) => {
 
 const SetupConfigCondition = () => {
   const t = useTranslations();
-  //
   const { navigate } = useNavigation();
   const { params = {} } = useRoute();
   const { config, automate, closeScreen } = params;
-  //
   const [selectedCondition, setSelectedCondition] = useState(undefined);
   const [customCondition, setCustomCondition] = useState(undefined);
   const [isShowModal, setIsShowModal] = useState(false);

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

@@ -10,6 +10,7 @@ export default StyleSheet.create({
     color: Colors.Black,
   },
   numberInput: {
+    borderRadius: 5,
     borderWidth: 1,
     borderColor: Colors.Black,
     height: 38,

package/src/screens/Automate/AddNewAction/__test__/ChooseAction.test.js

@@ -13,6 +13,7 @@ import { TouchableOpacity } from 'react-native';
 import SelectActionCard from '../../../../commons/SelectActionCard';
 import { useNavigation } from '@react-navigation/native';
 import { ToastBottomHelper } from '../../../../utils/Utils';
+import { getTranslate } from '../../../../utils/I18n';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -370,6 +371,35 @@ describe('Test ChooseAction', () => {
     );
   });
 
+  test('test press template wrong', async () => {
+    const config1 = 1;
+    const response = [
+      {
+        id: 1,
+        title: '',
+        template: 'TeamplateWorng',
+        configuration: {
+          allow_config_store_value: true,
+          config: config1,
+          action_on: '94ae262d-46e3-42ff-9d10-516831ecc830',
+          action_off: '94ae262d-46e3-42ff-9d10-516831ecc830',
+        },
+      },
+    ];
+    mock.onGet(API.DEVICE.DISPLAY_ACTIONS(1)).reply(200, response);
+    const spyToastError = jest.spyOn(ToastBottomHelper, 'error');
+    await act(async () => {
+      tree = await renderer.create(wrapComponent(route));
+    });
+    expect(spyToastError).toBeCalledWith(
+      getTranslate('en', 'template_not_supported', {
+        template: response[0].template,
+      }),
+      '',
+      3000
+    );
+  });
+
   test('test reach max can add', async () => {
     const spyToastError = jest.spyOn(ToastBottomHelper, 'error');
 
@@ -435,4 +465,162 @@ describe('Test ChooseAction', () => {
       3000
     );
   });
+  test('reach max can add actions', async () => {
+    const spyToastError = jest.spyOn(ToastBottomHelper, 'error');
+
+    const config1 = 1,
+      config2 = 2,
+      config3 = 3,
+      config4 = 4;
+    const response = [
+      {
+        id: 1,
+        title: '',
+        template: 'OnOffSimpleActionTemplate',
+        configuration: {
+          allow_config_store_value: true,
+          config: config1,
+          action_on: '94ae262d-46e3-42ff-9d10-516831ecc830',
+          action_off: '94ae262d-46e3-42ff-9d10-516831ecc830',
+        },
+      },
+      {
+        id: 2,
+        title: 'Fan Speed',
+        template: 'OptionsDropdownActionTemplate',
+        configuration: {
+          config: config2,
+          action: '05195362-75de-4db5-9e5e-98fef9d4910c',
+          allow_config_store_value: true,
+          options: [
+            {
+              text: 'Auto',
+              value_int: 1,
+              value_text: 'auto',
+            },
+            {
+              text: 'Level1',
+              value_int: 2,
+              value_text: 'level1',
+            },
+          ],
+          icon: 'up',
+          icon_kit: 43,
+        },
+      },
+      {
+        id: 3,
+        title: '',
+        template: 'NumberUpDownActionTemplate',
+        configuration: {
+          keep_track_config: true,
+          config: config3,
+          allow_config_store_value: true,
+          action: 'b498234c-6c1a-452d-a1d1-87a314c20528',
+          min_value: 16,
+          max_value: 30,
+          text_format: '{number} \u00b0C',
+        },
+      },
+      {
+        id: 4,
+        title: '',
+        template: 'NumberUpDownActionTemplate',
+        configuration: {
+          config: config4,
+          allow_config_store_value: true,
+          action: '11111111-6c1a-452d-a1d1-87a314c20528',
+          min_value: 12,
+          max_value: 20,
+          text_format: '{number} \u00b0C',
+        },
+      },
+    ];
+    mock.onGet(API.DEVICE.DISPLAY_ACTIONS(1)).reply(200, response);
+    route.params.numberActionCanAdd = 2;
+    await act(async () => {
+      tree = await renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    const cards = instance.findAllByType(SelectActionCard);
+
+    await act(async () => {
+      cards.map((card) => card.props.onPress());
+    });
+
+    const simpleActionOn = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.ON_OFF_SIMPLE_ACTION_ON &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      await simpleActionOn.props.onPress();
+    });
+
+    const simpleActionOnOff = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.ON_OFF_SIMPLE_ACTION_OFF &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      await simpleActionOnOff.props.onPress();
+    });
+    const selectOptions = instance.findAll(
+      (item) =>
+        item.props.accessibilityLabel ===
+          AccessibilityLabel.OPTIONS_DROPDOWN_ACTION_CHOOSING_ITEM &&
+        item.type === TouchableOpacity
+    );
+    const touchOpacity = instance.find(
+      (item) =>
+        item.props.accessibilityLabel ===
+          AccessibilityLabel.OPTIONS_DROPDOWN_ACTION_DONE &&
+        item.type === TouchableOpacity
+    );
+
+    await act(async () => {
+      await selectOptions[0].props.onPress(0);
+      await touchOpacity.props.onPress();
+    });
+
+    const buttonNumberUp = instance.findAll(
+      (item) =>
+        item.props.accessibilityLabel ===
+          AccessibilityLabel.NUMBER_UP_DOWN_ACTION_UP &&
+        item.type === TouchableOpacity
+    );
+    expect(buttonNumberUp).toHaveLength(2);
+
+    const buttonSaveNumberAction = instance.findAll(
+      (item) =>
+        item.props.accessibilityLabel ===
+          AccessibilityLabel.NUMBER_UP_DOWN_ACTION_DONE &&
+        item.type === TouchableOpacity
+    );
+    expect(buttonSaveNumberAction).toHaveLength(2);
+
+    await act(async () => {
+      await buttonNumberUp[0].props.onPress();
+      await buttonNumberUp[1].props.onPress();
+      await buttonSaveNumberAction[0].props.onPress();
+      await buttonSaveNumberAction[1].props.onPress();
+    });
+    const buttonSave = instance.find(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.BOTTOM_VIEW_MAIN &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      await buttonSave.props.onPress();
+    });
+
+    expect(spyToastError).toBeCalledWith(
+      'You can only add more 2 actions',
+      null,
+      3000
+    );
+  });
 });

package/src/screens/Device/components/VisualChart.js

@@ -123,6 +123,11 @@ const styles = StyleSheet.create({
     width: 300,
     height: 250,
   },
+  titleView: {
+    flexDirection: 'row',
+    flex: 1,
+    lineHeight: 24,
+  },
 });
 
 const chartOptions = {
@@ -286,9 +291,11 @@ const VisualChart = ({ item, isDemo = false, isWidgetOrder }) => {
   return (
     <View style={styles.container}>
       <View style={styles.titleHistory}>
-        <Text size={20} semibold color={Colors.Gray9}>
-          {item.label}
-        </Text>
+        <View style={styles.titleView}>
+          <Text size={20} semibold color={Colors.Gray9}>
+            {item.label}
+          </Text>
+        </View>
         {canChooseGroup && (
           <ChartAggregationOption
             groupBy={groupBy}

package/src/screens/HanetCamera/styles/memberInfoStyles.js

@@ -47,7 +47,7 @@ export default StyleSheet.create({
   buttonRemove: {
     position: 'absolute',
     alignItems: 'center',
-    padding: 32,
+    paddingBottom: 92,
     bottom: 0,
     left: 0,
     right: 0,

package/src/screens/Notification/styles/indexStyles.js

@@ -1,6 +1,7 @@
 import { StyleSheet } from 'react-native';
 
 import { Colors } from '../../../configs';
+import { getStatusBarHeight } from '../../../configs/Constants';
 
 export default StyleSheet.create({
   wrap: {
@@ -17,6 +18,6 @@ export default StyleSheet.create({
     marginRight: 22,
   },
   styleScrollView: {
-    marginTop: -10,
+    marginTop: getStatusBarHeight(),
   },
 });

package/src/screens/Sharing/SelectUser.js

@@ -20,15 +20,15 @@ import {
 import { axiosPost } from '../../utils/Apis/axios';
 import { AccessibilityLabel } from '../../configs/Constants';
 import Text from '../../commons/Text';
+import { ToastBottomHelper } from '../../utils/Utils';
 
-const SelectUser = ({ route }) => {
+const SharingInviteMembers = ({ route }) => {
   const t = useTranslations();
   const navigation = useNavigation();
   const { unit, permissions } = route?.params || {};
   const [errorText, setErrorText] = useState('');
   const [content, setContent] = useState('');
   const [users, setUsers] = useState([]);
-
   const sharePermissions = useCallback(
     async (phone, email) => {
       Keyboard.dismiss();
@@ -44,9 +44,12 @@ const SelectUser = ({ route }) => {
         unit: unit.id,
         permissions,
       });
-      success && setUsers([...users, data.user]);
+      if (success) {
+        ToastBottomHelper.success(t('invited_user', { user: phone || email }));
+        setUsers([...users, data.user]);
+      }
     },
-    [users, unit.id, permissions]
+    [users, unit.id, permissions, t]
   );
 
   const validate = useCallback(() => {
@@ -145,7 +148,7 @@ const SelectUser = ({ route }) => {
         </View>
       </TouchableWithoutFeedback>
       <ViewButtonBottom
-        leftTitle={t('cancel')}
+        leftTitle={t('back')}
         onLeftClick={() => navigation.goBack()}
         rightTitle={t('done')}
         rightDisabled={false}
@@ -217,4 +220,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default SelectUser;
+export default SharingInviteMembers;

package/src/screens/Sharing/{SelectPermission.js → SharingSelectPermission.js}

@@ -15,7 +15,7 @@ import { AccessibilityLabel } from '../../configs/Constants';
 
 let dataStationTemp = [];
 
-const SelectPermission = ({ route }) => {
+const SharingSelectPermission = ({ route }) => {
   const t = useTranslations();
   const { unit, type = '', member } = route?.params || {};
   const navigation = useNavigation();
@@ -389,6 +389,8 @@ const SelectPermission = ({ route }) => {
             {t('no_data')}
           </Text>
         )}
+      </View>
+      <View style={styles.wrapViewButtonStyle}>
         <ViewButtonBottom
           accessibilityLabelPrefix={
             AccessibilityLabel.PREFIX.SHARING_SELECT_PERMISSION
@@ -404,4 +406,4 @@ const SelectPermission = ({ route }) => {
   );
 };
 
-export default memo(SelectPermission);
+export default memo(SharingSelectPermission);

package/src/screens/Sharing/Styles/SelectPermissionStyles.js

@@ -63,4 +63,8 @@ export default StyleSheet.create({
     fontFamily: FONT_PREFIX + '-' + 'Semibold',
     fontStyle: 'normal',
   },
+  wrapViewButtonStyle: {
+    paddingTop: 90,
+    marginBottom: 30,
+  },
 });

package/src/screens/Sharing/Styles/inforMemberUnitStyles.js

@@ -71,7 +71,7 @@ export default StyleSheet.create({
     bottom: 0,
     borderWidth: 0,
     alignSelf: 'center',
-    paddingBottom: 16 + getBottomSpace(),
+    paddingBottom: 36 + getBottomSpace(),
   },
   removeBorderBottom: {
     borderBottomWidth: 1,

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

@@ -2,7 +2,6 @@ import React from 'react';
 import { create, act } from 'react-test-renderer';
 import MockAdapter from 'axios-mock-adapter';
 
-import SelectUser from '../SelectUser';
 import { AccessibilityLabel } from '../../../configs/Constants';
 import { ViewButtonBottom, Button } from '../../../commons';
 import _TextInput from '../../../commons/Form/TextInput';
@@ -12,10 +11,12 @@ import { getTranslate } from '../../../utils/I18n';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import api from '../../../utils/Apis/axios';
+import { Text } from 'react-native';
+import SharingInviteMembers from '../SelectUser';
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
-    <SelectUser route={route} />
+    <SharingInviteMembers route={route} />
   </SCProvider>
 );
 
@@ -41,7 +42,7 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
-describe('test SelectUser container', () => {
+describe('test SharingInviteMembers container', () => {
   let tree;
   let route;
 
@@ -91,7 +92,7 @@ describe('test SelectUser container', () => {
     const instance = tree.root;
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
     expect(viewButtonBottom.props.leftTitle).toEqual(
-      getTranslate('en', 'cancel')
+      getTranslate('en', 'back')
     );
     expect(viewButtonBottom.props.rightTitle).toEqual(
       getTranslate('en', 'done')
@@ -174,5 +175,46 @@ describe('test SelectUser container', () => {
       await button.props.onPress();
     });
     expect(accountList[0].props.accounts).toHaveLength(1);
+
+    await act(async () => {
+      await textInput.props.onChange('0909123456'); // In case you have invited and then intentionally invite again
+    });
+    mock.onPost(API.SHARE.SHARE()).reply(400);
+    await act(async () => {
+      await button.props.onPress();
+    });
+    expect(accountList[0].props.accounts).toHaveLength(1);
+  });
+
+  it('_TextInput onChange email, validated and call api sharedPermission', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const textInput = instance.findByType(_TextInput);
+    const button = instance.findByType(Button);
+    let accountList = instance.findAllByType(AccountList);
+    expect(accountList).toHaveLength(0);
+    await act(async () => {
+      await textInput.props.onChange('test@eoh.io');
+    });
+    mock.onPost(API.SHARE.SHARE()).reply(200, {
+      user: {
+        id: 3,
+        name: 'user add',
+        phone_number: '',
+        email: 'test@eoh.io',
+      },
+    });
+    await act(async () => {
+      await button.props.onPress();
+    });
+
+    const textPhone = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.TEXT_PHONE_NUMBER_ITEM && el.type === Text
+    );
+    expect(textPhone).toHaveLength(0);
   });
 });

package/src/screens/Sharing/__test__/{SelectPermission.test.js → SharingSelectPermission.test.js}

@@ -3,14 +3,13 @@ import React, { useState } from 'react';
 import { FlatList, Text, Platform } from 'react-native';
 import { create } from 'react-test-renderer';
 import MockAdapter from 'axios-mock-adapter';
-
-import SelectPermission from '../SelectPermission';
 import { DeviceItem, TitleCheckBox } from '../Components';
 import { ViewButtonBottom } from '../../../commons';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import API from '../../../configs/API';
 import api from '../../../utils/Apis/axios';
+import SharingSelectPermission from '../SharingSelectPermission';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -37,11 +36,11 @@ jest.mock('@react-navigation/native', () => {
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
-    <SelectPermission route={route} />
+    <SharingSelectPermission route={route} />
   </SCProvider>
 );
 
-describe('Test SelectPermission', () => {
+describe('Test SharingSelectPermission', () => {
   let tree;
   let route = { params: { unit: { id: 1, name: 'unit 1' } } };
   let listDevices = [
@@ -242,7 +241,7 @@ describe('Test SelectPermission', () => {
     expect(mockGoBack).toBeCalled();
   });
 
-  it('test selectPermission type share_device', async () => {
+  it('test SharingSelectPermission type share_device', async () => {
     mocSetdata();
     useState.mockImplementationOnce((init) => [true, mockSetState]);
     const response = {

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

@@ -1448,4 +1448,6 @@ export default {
   'customize...': 'Customize...',
   uri_invalid: 'URI invalid',
   when_value_is: 'When value is',
+  template_not_supported: '"{template}" not yet supported',
+  invited_user: 'Invited user {user}',
 };

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

@@ -95,6 +95,7 @@ export default {
   text_new_unit: 'Địa điểm',
   text_sub_units: 'Khu vực',
   is_below: 'dưới',
+  is: 'bằng',
   is_above: 'trên',
   edit_actions_list: 'Chỉnh sửa danh sách hành động',
   des_edit_actions_list:
@@ -1458,4 +1459,6 @@ export default {
   'customize...': 'Tùy chỉnh...',
   uri_invalid: 'URI không hợp lệ',
   when_value_is: 'Khi giá trị là',
+  template_not_supported: '"{template}" chưa được hỗ trợ',
+  invited_user: 'Đã mời người dùng {user}',
 };