@eohjsc/react-native-smart-city 0.2.89 → 0.2.92

package/src/screens/HanetCamera/MemberInfo.js

@@ -7,7 +7,9 @@ import { AlertAction, FullLoading } from '../../commons';
 import BottomButtonView from '../../commons/BottomButtonView';
 import TextInput from '../../commons/Form/TextInput';
 import Text from '../../commons/Text';
+import RequestFaceIDPopup from './components/RequestFaceIDPopup';
 import { useStateAlertAction } from './hooks';
+import { useBoolean } from '../../hooks/Common';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import useKeyboardAnimated from '../../hooks/Explore/useKeyboardAnimated';
 import styles from './styles/memberInfoStyles';
@@ -30,19 +32,10 @@ const HanetMemberInfo = ({ route }) => {
     setMemberName(hanetMember.name);
   }, [hanetMember]);
 
-  const { stateAlertAction, hideAlertAction, showRename, showDelete } =
-    useStateAlertAction();
-
-  const onShowRename = () => {
-    setInputName(memberName);
-    showRename(isAddNewMember);
-  };
-
-  const onShowDelete = () => {
-    showDelete();
-  };
+  const [showSetFaceIDModal, setShowSetFaceIDModal, setHideSetFaceIDModal] =
+    useBoolean();
 
-  const setFaceID = () => {
+  const onCaptureFaceID = () => {
     navigate(Routes.HanetCaptureFaceID, {
       title: t('set_photo_id'),
       hanetPlace,
@@ -57,6 +50,52 @@ const HanetMemberInfo = ({ route }) => {
     });
   };
 
+  const onChooseFile = async (result) => {
+    const imageUri = result.path;
+    if (isAddNewMember) {
+      setMemberAvatar(imageUri);
+      return;
+    }
+
+    const formData = new FormData();
+    const name = imageUri.split('/').pop();
+    const ext = imageUri.split('.').pop();
+    formData.append('face_id', {
+      name: name,
+      type: `image/${ext}`,
+      uri: imageUri,
+    });
+    setLoading(true);
+    const { success, data } = await axiosPatch(
+      API.CAMERA.HANET.UPDATE_FACE_ID(
+        hanetPlace.place_id,
+        hanetMember.alias_id
+      ),
+      formData,
+      {
+        headers: { 'Content-Type': 'multipart/form-data' },
+      }
+    );
+    if (success) {
+      setMemberAvatar(data.avatar_uri);
+    } else {
+      setError(data.detail);
+    }
+    setLoading(false);
+  };
+
+  const { stateAlertAction, hideAlertAction, showRename, showDelete } =
+    useStateAlertAction();
+
+  const onShowRename = () => {
+    setInputName(memberName);
+    showRename(isAddNewMember);
+  };
+
+  const onShowDelete = () => {
+    showDelete();
+  };
+
   const finishRegister = async () => {
     setLoading(true);
     const formData = new FormData();
@@ -135,7 +174,7 @@ const HanetMemberInfo = ({ route }) => {
         <Image source={{ uri: memberAvatar }} style={styles.avatar} />
       </View>
       <TouchableOpacity
-        onPress={setFaceID}
+        onPress={setShowSetFaceIDModal}
         style={[styles.row, !!error && { borderBottomColor: Colors.Red6 }]}
       >
         <IconFill name="camera" size={27} color={Colors.Primary} />
@@ -201,6 +240,13 @@ const HanetMemberInfo = ({ route }) => {
           />
         )}
       </AlertAction>
+      <RequestFaceIDPopup
+        title={t('set_photo_id')}
+        isVisible={showSetFaceIDModal}
+        setHide={setHideSetFaceIDModal}
+        onCaptureFaceID={onCaptureFaceID}
+        onChooseFile={onChooseFile}
+      />
     </View>
   );
 };

package/src/screens/HanetCamera/__test__/ManageAccess.test.js

@@ -8,6 +8,7 @@ import HanetManageAccess from '../ManageAccess';
 import BottomSheet from '../../../commons/BottomSheet';
 import { TESTID } from '../../../configs/Constants';
 import Routes from '../../../utils/Route';
+import ImagePicker from 'react-native-image-crop-picker';
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
@@ -149,4 +150,22 @@ describe('Test HanetManageAccess', () => {
       isAddNewMember: true,
     });
   });
+
+  test('Test add new member choose file error', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    const bottomSheet = instance.findByType(BottomSheet);
+
+    ImagePicker.openPicker.mockImplementationOnce(async () => {
+      throw new Error();
+    });
+
+    await chooseAddMemberOption(instance, 1);
+
+    expect(bottomSheet.props.isVisible).toBe(false);
+    expect(mockedNavigate).not.toBeCalled();
+  });
 });

package/src/screens/HanetCamera/__test__/MemberInfo.test.js

@@ -8,6 +8,8 @@ import HanetMemberInfo from '../MemberInfo';
 import { AlertAction } from '../../../commons';
 import TextInput from '../../../commons/Form/TextInput';
 import BottomButtonView from '../../../commons/BottomButtonView';
+import BottomSheet from '../../../commons/BottomSheet';
+import { TESTID } from '../../../configs/Constants';
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
@@ -68,7 +70,7 @@ describe('Test HanetMemberInfo', () => {
     });
     const instance = tree.root;
     const touches = instance.findAllByType(TouchableOpacity);
-    expect(touches).toHaveLength(5);
+    expect(touches).toHaveLength(7);
     const alertAction = instance.findByType(AlertAction);
 
     // open alert action
@@ -95,7 +97,7 @@ describe('Test HanetMemberInfo', () => {
     });
     const instance = tree.root;
     const touches = instance.findAllByType(TouchableOpacity);
-    expect(touches).toHaveLength(5);
+    expect(touches).toHaveLength(7);
     const alertAction = instance.findByType(AlertAction);
 
     // open alert action
@@ -115,41 +117,86 @@ describe('Test HanetMemberInfo', () => {
     expect(mockedGoBack).toHaveBeenCalled();
   });
 
-  test('Test navigate CaptureFaceID', async () => {
+  const chooseSetFaceIDOption = async (instance, index) => {
+    const option = instance.find(
+      (el) => el.props.testID === `${TESTID.HANET_ADD_MEMBER_OPTION}_${index}`
+    );
+    await act(async () => {
+      await option.props.onPress();
+    });
+  };
+
+  test('Test set photo id capture face id', async () => {
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
+    const touches = instance.findAllByType(TouchableOpacity);
+    expect(touches).toHaveLength(7);
 
+    await act(async () => {
+      await touches[1].props.onPress();
+    });
+
+    const bottomSheet = instance.findByType(BottomSheet);
+    expect(bottomSheet.props.isVisible).toBe(true);
+    await chooseSetFaceIDOption(instance, 0);
+
+    expect(bottomSheet.props.isVisible).toBe(false);
+    expect(mockedNavigate).toBeCalled(); // navigate to HanetCaptureFaceID
+  });
+
+  test('Test set photo id choose file', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
     const touches = instance.findAllByType(TouchableOpacity);
-    expect(touches).toHaveLength(5);
+    expect(touches).toHaveLength(7);
 
     await act(async () => {
       await touches[1].props.onPress();
     });
-    expect(mockedNavigate).toBeCalled();
+
+    const bottomSheet = instance.findByType(BottomSheet);
+    expect(bottomSheet.props.isVisible).toBe(true);
+
+    axios.patch.mockImplementationOnce(async () => ({
+      status: 200,
+      data: {
+        avatar_uri: 'uri',
+      },
+    }));
+    await chooseSetFaceIDOption(instance, 1);
+
+    expect(bottomSheet.props.isVisible).toBe(false);
+    expect(axios.patch).toBeCalled(); // call api update face id
   });
 
   test('Test register new member', async () => {
     route.params.hanetMember = {
       alias_id: null,
       name: null,
-      avatar_uri: 'avatar_uri',
+      avatar_uri: null,
     };
     route.params.isAddNewMember = true;
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-
     const touches = instance.findAllByType(TouchableOpacity);
-    expect(touches).toHaveLength(5);
+    expect(touches).toHaveLength(7);
 
     // press set face id
     await act(async () => {
       await touches[1].props.onPress();
     });
-    expect(mockedNavigate).toBeCalled();
+
+    const bottomSheet = instance.findByType(BottomSheet);
+    expect(bottomSheet.props.isVisible).toBe(true);
+
+    await chooseSetFaceIDOption(instance, 1);
+    expect(axios.patch).not.toBeCalled(); // not call api
 
     // open alert action
     const alertAction = instance.findByType(AlertAction);
@@ -158,7 +205,7 @@ describe('Test HanetMemberInfo', () => {
     });
     expect(alertAction.props.visible).toBe(true);
 
-    // change name and press rename
+    // change name and press done
     const textInput = instance.findByType(TextInput);
     await act(async () => {
       await textInput.props.onChange('new name');

package/src/screens/HanetCamera/components/RequestFaceIDPopup.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import { TouchableOpacity, StyleSheet } from 'react-native';
+import ImagePicker from 'react-native-image-crop-picker';
+import { IconFill } from '@ant-design/icons-react-native';
+import Text from '../../../commons/Text';
+import BottomSheet from '../../../commons/BottomSheet';
+import { Colors } from '../../../configs';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import SmartPhoneSvg from '../../../../assets/images/Common/SmartPhone.svg';
+import { TESTID } from '../../../configs/Constants';
+
+const RequestFaceIDPopup = ({
+  title,
+  isVisible,
+  setHide,
+  onCaptureFaceID,
+  onChooseFile,
+}) => {
+  const t = useTranslations();
+  const options = [
+    {
+      icon: <IconFill name="camera" color={Colors.Gray9} size={27} />,
+      text: t('capture_image'),
+      onChoose: () => {
+        setHide();
+        onCaptureFaceID && onCaptureFaceID();
+      },
+    },
+    {
+      icon: <SmartPhoneSvg />,
+      text: t('pick_available_image_from_your_phone'),
+      onChoose: async () => {
+        setHide();
+        const options = {
+          mediaType: 'photo',
+          compressImageMaxHeight: 1280,
+          compressImageMaxWidth: 738,
+          compressImageQuality: 0.7,
+          forceJpg: true,
+        };
+        try {
+          const result = await ImagePicker.openPicker(options);
+          onChooseFile && onChooseFile(result);
+        } catch (e) {}
+      },
+    },
+  ];
+
+  return (
+    <BottomSheet
+      isVisible={isVisible}
+      onBackdropPress={setHide}
+      title={title}
+      style={styles.wrap}
+    >
+      {options.map((option, i) => (
+        <TouchableOpacity
+          key={i}
+          onPress={option.onChoose}
+          style={styles.row}
+          testID={`${TESTID.HANET_ADD_MEMBER_OPTION}_${i}`}
+        >
+          {option.icon}
+          <Text type="H4" color={Colors.Gray9} style={styles.textOption}>
+            {option.text}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </BottomSheet>
+  );
+};
+
+export default RequestFaceIDPopup;
+
+const styles = StyleSheet.create({
+  wrap: {
+    paddingBottom: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 16,
+    marginHorizontal: 16,
+    borderBottomColor: Colors.Gray3,
+    borderBottomWidth: 1,
+  },
+  textOption: {
+    marginLeft: 18,
+  },
+});

package/src/screens/HanetCamera/hooks/__test__/useHanetCheckinData.test.js

@@ -38,6 +38,13 @@ describe('Test useHanetCheckinData', () => {
           detected_mask: 'MASK_ON',
           created_at: moment(),
         },
+        {
+          id: 3,
+          person_type: 'IMAGE_FROM_CAMERA',
+          detected_image_uri: 'uri',
+          detected_mask: 'NOT_HANDLE',
+          created_at: moment(),
+        },
       ],
     };
   });
@@ -129,19 +136,9 @@ describe('Test useHanetCheckinData', () => {
     expect(result.current.countMember).toBe(1);
     expect(result.current.countStranger).toBe(1);
 
+    // send old data
     await act(async () => {
-      await result.current.onChangeDate(moment().add(-1, 'days'));
-    });
-    const newData4 = {
-      id: 4,
-      person_name: 'name 2',
-      person_type: 'STRANGER',
-      detected_image_uri: 'uri',
-      detected_mask: 'MASK_ON',
-      created_at: moment(),
-    };
-    await act(async () => {
-      await result.current.onReceiveNewCheckinData(newData4);
+      await result.current.onReceiveNewCheckinData(newData2);
     });
     // no change
     expect(result.current.checkinData).toHaveLength(2);

package/src/screens/HanetCamera/hooks/useHanetCheckinData.js

@@ -48,7 +48,7 @@ const useHanetCheckinData = (hanetCamera) => {
       } else {
         setCanLoadMore(page < Math.ceil(data.count / 20));
         setCheckinData((prevData) =>
-          _.uniqBy(prevData.concat(data.results || []))
+          _.uniqBy(prevData.concat(data.results || []), 'id')
         );
       }
     }
@@ -80,17 +80,20 @@ const useHanetCheckinData = (hanetCamera) => {
   };
 
   const onReceiveNewCheckinData = (data) => {
-    if (!moment(data.created_at).isSame(date, 'date')) {
+    if (!moment(data.created_at).isSame(moment(), 'date')) {
       return;
     }
     setCheckinData((listData) => {
+      const existed = listData.find((i) => i.id === data.id);
+      if (!existed) {
+        if (['EMPLOYEE', 'CUSTOMER'].includes(data.person_type)) {
+          setCountMember((prevData) => prevData + 1);
+        } else {
+          setCountStranger((prevData) => prevData + 1);
+        }
+      }
       return _.uniqBy([data, ...listData], 'id');
     });
-    if (['EMPLOYEE', 'CUSTOMER'].includes(data.person_type)) {
-      setCountMember((prevData) => prevData + 1);
-    } else {
-      setCountStranger((prevData) => prevData + 1);
-    }
   };
 
   useEffect(() => {

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

@@ -32,18 +32,4 @@ export default StyleSheet.create({
     marginLeft: 16,
     flex: 1,
   },
-  addMemberModal: {
-    paddingBottom: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 16,
-    marginHorizontal: 16,
-    borderBottomColor: Colors.Gray3,
-    borderBottomWidth: 1,
-  },
-  textOption: {
-    marginLeft: 18,
-  },
 });

package/src/screens/Unit/Detail.js

@@ -80,7 +80,6 @@ const UnitDetail = ({ route }) => {
   const [showAdd, setShowAdd, setHideAdd] = useBoolean();
   const [isFullScreen, setIsFullScreen] = useState(false);
   const [dataFullScreen, setDataFullScreen] = useState();
-  const [serverDown, setServerDown] = useState(false);
 
   const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
     usePopover();
@@ -125,13 +124,10 @@ const UnitDetail = ({ route }) => {
   const fetchDetails = useCallback(async () => {
     getAutomates();
     await fetchWithCache(API.UNIT.UNIT_DETAIL(unitId), {}, (response) => {
-      const { success, data, resp_status } = response;
+      const { success, data } = response;
       if (success) {
-        setServerDown(false);
         prepareData(data);
         setUnit(data);
-      } else if (resp_status >= 500) {
-        setServerDown(true);
       }
     });
   }, [setUnit, unitId, prepareData, getAutomates]);
@@ -307,7 +303,6 @@ const UnitDetail = ({ route }) => {
           isOwner={isOwner}
           favorites={favorites}
           wrapItemStyle={styles.wrapItemStyle}
-          serverDown={serverDown}
           isGGHomeConnected={isGGHomeConnected}
         />
       );
@@ -334,7 +329,6 @@ const UnitDetail = ({ route }) => {
         <ShortDetailSubUnit
           unit={unit}
           station={station}
-          serverDown={serverDown}
           isGGHomeConnected={isGGHomeConnected}
         />
       );

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

@@ -24,17 +24,19 @@ const MyUnitDevice = ({ sensor, unit }) => {
 
   return (
     <View style={styles.item}>
-      <TouchableOpacity style={styles.rowCenter} onPress={goToSensorDisplay}>
-        <Image style={styles.image} source={Images.mainDoor} />
-        <View style={styles.marginTop3}>
-          <Text semibold style={styles.nameDevice}>
-            {sensor.name}
-          </Text>
-          <View style={styles.roomDevice}>
-            <Text style={styles.roomDevicePart}>
-              {sensor.station_name}
-              {status ? ` - ${status}` : ''}
+      <TouchableOpacity style={styles.flex1} onPress={goToSensorDisplay}>
+        <View style={styles.rowCenter}>
+          <Image style={styles.image} source={Images.mainDoor} />
+          <View style={styles.marginTop3}>
+            <Text semibold style={styles.nameDevice}>
+              {sensor.name}
             </Text>
+            <View style={styles.roomDevice}>
+              <Text style={styles.roomDevicePart}>
+                {sensor.station_name}
+                {status ? ` - ${status}` : ''}
+              </Text>
+            </View>
           </View>
         </View>
       </TouchableOpacity>
@@ -92,6 +94,7 @@ const styles = StyleSheet.create({
     flex: 1,
     marginTop: 3,
   },
+  flex1: { flex: 1 },
 });
 
 export default MyUnitDevice;

package/src/screens/Unit/components/__test__/MyUnitDevice.test.js

@@ -43,7 +43,7 @@ describe('Test MyUnitDevice', () => {
     });
     const instance = tree.root;
     const Views = instance.findAllByType(View);
-    expect(Views).toHaveLength(10);
+    expect(Views).toHaveLength(11);
 
     const touches = instance.findAllByType(TouchableOpacity);
     expect(touches).toHaveLength(1);
@@ -60,6 +60,6 @@ describe('Test MyUnitDevice', () => {
     });
     const instance = tree.root;
     const Views = instance.findAllByType(View);
-    expect(Views).toHaveLength(10);
+    expect(Views).toHaveLength(11);
   });
 });

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

@@ -938,6 +938,7 @@
   "mask_off": "Mask off",
   "mask_on": "Mask on",
   "stranger": "Stranger",
+  "image_from_camera": "Image from camera",
   "icon_unit": "Icon unit",
   "lock": "LOCK",
   "unlock": "UNLOCK",

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

@@ -940,6 +940,7 @@
   "mask_off": "Không có khẩu trang",
   "mask_on": "Có khẩu trang",
   "stranger": "Người lạ",
+  "image_from_camera": "Ảnh chụp",
   "icon_unit": "Ảnh đại diện địa điểm",
   "lock": "KHÓA",
   "unlock": "MỞ KHÓA",