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

package/src/screens/Device/detail.js

@@ -46,7 +46,7 @@ import { useSCContextSelector } from '../../context';
 import { EmergencyCountdown } from './components/EmergencyCountdown';
 import { SensorConnectStatusViewHeader } from './components/SensorConnectStatusViewHeader';
 import { useDisconnectedDevice } from './hooks/useDisconnectedDevice';
-import { useNetInfo } from '@react-native-community/netinfo';
+import { Card } from '../../commons/CardShadow';
 
 const DeviceDetail = ({ route }) => {
   const t = useTranslations();
@@ -79,10 +79,20 @@ const DeviceDetail = ({ route }) => {
     isConnected: true,
     displayTemplate: true,
   });
+  const [serverDown, setServerDown] = useState(false);
+
+  const isNetworkConnected = useSCContextSelector(
+    (state) => state.app.isNetworkConnected
+  );
+  const isBluetoothEnabled = useSCContextSelector(
+    (state) => state.app.isBluetoothEnabled
+  );
 
   const isDeviceConnectedViaBle = useMemo(
-    () => isDeviceConnected(sensor?.remote_control_options?.bluetooth?.address),
-    [sensor]
+    () =>
+      isBluetoothEnabled &&
+      isDeviceConnected(sensor?.remote_control_options?.bluetooth?.address),
+    [sensor, isBluetoothEnabled]
   );
 
   const isDeviceHasBle = useMemo(() => {
@@ -99,15 +109,21 @@ const DeviceDetail = ({ route }) => {
     });
   }, [display]);
 
-  useDisconnectedDevice(sensorName, isDeviceHasBle);
-
-  const netInfo = useNetInfo();
+  useDisconnectedDevice(sensorName, isDeviceHasBle, serverDown);
 
-  const isShowSetupEmergencyContact =
+  const isShowSetupEmergencyContact = useMemo(() => {
     display.items.filter(
       (item) =>
         item.type === 'emergency' && item.configuration.type === 'button'
     ).length > 0;
+  }, [display.items]);
+
+  const isShowSetUpSmartLock = useMemo(() => {
+    display.items.filter(
+      (item) =>
+        item.type === 'smartLock' && item.configuration.type === 'button'
+    ).length > 0;
+  }, [display.items]);
 
   const addToFavorites = useCallback(async () => {
     const { success } = await axiosPost(
@@ -140,31 +156,31 @@ const DeviceDetail = ({ route }) => {
   }, [currentUserId, unit]);
 
   const fetchUnitDetail = useCallback(async () => {
-    const { success, data } = await axiosGet(API.UNIT.UNIT_DETAIL(unit?.id));
+    const { success, data } = await axiosGet(API.UNIT.UNIT_DETAIL(unitId));
     if (success) {
       setUnit(data);
     }
-  }, [unit?.id]);
+  }, [unitId]);
 
   useEffect(() => {
-    if (!unitData && unitId) {
+    if (unitId) {
       fetchUnitDetail();
     }
   }, [fetchUnitDetail, unitData, unitId]);
 
   const fetchSensorDetail = useCallback(async () => {
     const { success, data } = await axiosGet(
-      API.SENSOR.SENSOR_DETAIL(sensor?.id)
+      API.SENSOR.SENSOR_DETAIL(sensorId)
     );
     if (success) {
       setSensor(data);
       setSensorName(data.name);
       setStation(data.station);
     }
-  }, [sensor?.id]);
+  }, [sensorId]);
 
   useEffect(() => {
-    if (!sensorData && sensorId) {
+    if (sensorId) {
       fetchSensorDetail();
     }
   }, [fetchSensorDetail, sensorData, sensorId]);
@@ -177,16 +193,16 @@ const DeviceDetail = ({ route }) => {
       return;
     }
 
-    const displayResult = await axiosGet(
+    const { success, data, resp_status } = await axiosGet(
       API.SENSOR.DISPLAY(sensor?.id),
       {},
       true
     );
-
-    if (displayResult.success) {
-      setDisplay(displayResult.data);
-      if (displayResult.data.items.length) {
-        const config = displayResult.data.items[0].configuration;
+    if (success) {
+      setDisplay(data);
+      setServerDown(false);
+      if (data.items.length) {
+        const config = data.items[0].configuration;
         if (config.hasOwnProperty('max_value')) {
           setMaxValue(config.max_value);
         }
@@ -201,6 +217,8 @@ const DeviceDetail = ({ route }) => {
           }
         }
       }
+    } else if (resp_status >= 500) {
+      setServerDown(true);
     }
     setLoading((preState) => ({ ...preState, displayTemplate: false }));
 
@@ -303,6 +321,33 @@ const DeviceDetail = ({ route }) => {
         deviceInfo: display.items.filter((item) => item.type === 'device_info'),
       },
     });
+    if (isShowSetUpSmartLock) {
+      menuItems.push({
+        route: Routes.SmartLockStack,
+        data: {
+          screen: Routes.AutoLock,
+        },
+        text: t('auto_lock'),
+      });
+    }
+    if (isOwner && isShowSetUpSmartLock) {
+      menuItems.push({
+        route: Routes.SmartLockStack,
+        data: {
+          screen: Routes.SetupGeneratePasscode,
+        },
+        text: t('setup_generate_passcode'),
+      });
+    }
+    if (isShowSetUpSmartLock) {
+      menuItems.push({
+        route: Routes.SmartLockStack,
+        data: {
+          screen: Routes.PasscodeList,
+        },
+        text: t('passcode_list'),
+      });
+    }
     if (!isFavourite) {
       menuItems.unshift({
         doAction: addToFavorites,
@@ -319,11 +364,12 @@ const DeviceDetail = ({ route }) => {
     display.items,
     isOwner,
     isShowSetupEmergencyContact,
+    isShowSetUpSmartLock,
     t,
     isFavourite,
     sensor,
-    sensorName,
     unit,
+    sensorName,
     station,
     emergencyDeviceId,
     addToFavorites,
@@ -456,31 +502,65 @@ const DeviceDetail = ({ route }) => {
     return (
       <SensorConnectStatusViewHeader
         sensor={sensor}
-        connected={netInfo.isConnected && isConnected}
+        connected={isNetworkConnected && isConnected}
         connectedBlt={
-          (!netInfo.isConnected || (netInfo.isConnected && !isConnected)) &&
+          (!isNetworkConnected || (isNetworkConnected && !isConnected)) &&
           isDeviceConnectedViaBle
         }
         lastUpdated={lastUpdated}
         isDisplayTime={isShowSetupEmergencyContact ? false : isDisplayTime}
         showWindDirection={showWindDirection}
         isGGHomeConnected={isGGHomeConnected}
+        isDeviceHasBle={isDeviceHasBle}
       >
-        {display.items.map((item) => (
-          <SensorDisplayItem
-            testID={TESTID.SENSOR_DISPLAY_ITEM}
-            key={item.id.toString()}
-            item={item}
-            emergency={onEmergencyButtonPress}
-            sensor={sensor}
-            getData={getData}
-            maxValue={maxValue}
-            offsetTitle={offsetTitle}
-            setOffsetTitle={setOffsetTitle}
-            setShowWindDirection={setShowWindDirection}
-            background={station?.background}
-          />
-        ))}
+        {display.items.map((item) => {
+          switch (item?.configuration?.template) {
+            case 'color_picker_template':
+            case 'slider_range_template':
+              return <></>;
+            default:
+              return (
+                <SensorDisplayItem
+                  testID={TESTID.SENSOR_DISPLAY_ITEM}
+                  key={item.id.toString()}
+                  item={item}
+                  emergency={onEmergencyButtonPress}
+                  sensor={sensor}
+                  getData={getData}
+                  maxValue={maxValue}
+                  offsetTitle={offsetTitle}
+                  setOffsetTitle={setOffsetTitle}
+                  setShowWindDirection={setShowWindDirection}
+                  background={station?.background}
+                />
+              );
+          }
+        })}
+        <Card title={t('controller')}>
+          {display.items.map((item) => {
+            switch (item?.configuration?.template) {
+              case 'color_picker_template':
+              case 'slider_range_template':
+                return (
+                  <SensorDisplayItem
+                    testID={TESTID.SENSOR_DISPLAY_ITEM}
+                    key={item.id.toString()}
+                    item={item}
+                    emergency={onEmergencyButtonPress}
+                    sensor={sensor}
+                    getData={getData}
+                    maxValue={maxValue}
+                    offsetTitle={offsetTitle}
+                    setOffsetTitle={setOffsetTitle}
+                    setShowWindDirection={setShowWindDirection}
+                    background={station?.background}
+                  />
+                );
+              default:
+                return <></>;
+            }
+          })}
+        </Card>
       </SensorConnectStatusViewHeader>
     );
   };
@@ -576,7 +656,7 @@ const DeviceDetail = ({ route }) => {
         <View style={styles.wrapTemplate}>
           {loading.displayTemplate === false &&
             loading.isConnected === false &&
-            netInfo.isConnected !== null &&
+            isNetworkConnected !== null &&
             renderSensorConnected()}
         </View>
         {isShowSetupEmergencyContact && canManageSubUnit && (

package/src/screens/Device/hooks/useDisconnectedDevice.js

@@ -1,23 +1,27 @@
-import NetInfo from '@react-native-community/netinfo';
+import { useNavigation } from '@react-navigation/native';
 import { useCallback, useEffect } from 'react';
 import { Alert, Linking, Platform } from 'react-native';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
-import {
-  enableBluetoothForAndroid,
-  useIsBluetoothEnabled,
-} from '../../../iot/RemoteControl/Bluetooth';
+import { useSCContextSelector } from '../../../context';
+import { enableBluetoothForAndroid } from '../../../iot/RemoteControl/Bluetooth';
 import { ToastBottomHelper } from '../../../utils/Utils';
 
-export const useDisconnectedDevice = (sensorName, isDeviceHasBle) => {
+export const useDisconnectedDevice = (
+  sensorName,
+  isDeviceHasBle,
+  serverDown
+) => {
   const t = useTranslations();
   const openBluetoothIOS = () => {
     Linking.openURL('App-Prefs:Bluetooth');
   };
+  const { goBack } = useNavigation();
   const actions =
     Platform.OS === 'ios'
       ? [
           {
             text: 'Skip',
+            onPress: () => goBack(),
           },
           {
             text: 'Open',
@@ -27,6 +31,7 @@ export const useDisconnectedDevice = (sensorName, isDeviceHasBle) => {
       : [
           {
             text: 'Skip',
+            onPress: () => goBack(),
           },
           {
             text: 'Open',
@@ -34,21 +39,28 @@ export const useDisconnectedDevice = (sensorName, isDeviceHasBle) => {
           },
         ];
 
-  const netState = NetInfo.useNetInfo();
-  const isBluetoothEnabled = useIsBluetoothEnabled();
+  const isBluetoothEnabled = useSCContextSelector(
+    (state) => state.app.isBluetoothEnabled
+  );
+  const isNetworkConnected = useSCContextSelector(
+    (state) => state.app.isNetworkConnected
+  );
 
-  const checkNetWorkConnect = useCallback(
-    async (isHavingInternet, isBtEnabled) => {
-      if (isHavingInternet === false && isDeviceHasBle) {
-        // TODO avoid case first render isHavingInternet == null
-        if (isBtEnabled === true) {
+  const checkNetworkConnect = useCallback(
+    async (isNetworkConnected, isBluetoothEnabled, serverDown) => {
+      if (!isDeviceHasBle) {
+        return;
+      }
+      if (isNetworkConnected === false || serverDown) {
+        // TODO avoid case first render isNetworkConnected == null
+        if (isBluetoothEnabled === true) {
           ToastBottomHelper.info(
             t('your_internet_is_disconnected', { name: sensorName }),
             t('change_to_control_via_bluetooth_connection', {
               name: sensorName,
             })
           );
-        } else if (isBtEnabled === false) {
+        } else if (isBluetoothEnabled === false) {
           Alert.alert(
             '',
             t(
@@ -64,6 +76,6 @@ export const useDisconnectedDevice = (sensorName, isDeviceHasBle) => {
   );
 
   useEffect(() => {
-    checkNetWorkConnect(netState.isConnected, isBluetoothEnabled);
-  }, [netState.isConnected, isBluetoothEnabled, checkNetWorkConnect]);
+    checkNetworkConnect(isNetworkConnected, isBluetoothEnabled, serverDown);
+  }, [isNetworkConnected, isBluetoothEnabled, checkNetworkConnect, serverDown]);
 };

package/src/screens/GuestInfo/components/AccessScheduleItem.js

@@ -5,14 +5,21 @@ import Text from '../../../commons/Text';
 import { TESTID } from '../../../configs/Constants';
 import styles from '../styles/AccessScheduleItemStyles';
 
-const AccessScheduleItem = ({ item, isSelected, onSelect }) => {
+const AccessScheduleItem = ({
+  item,
+  isSelected,
+  onSelect,
+  isSetupGeneratePasscode,
+}) => {
   const DetailComponent = item.detail;
   const handleOnSelect = useCallback(() => {
     onSelect(item.value);
   }, [item.value, onSelect]);
 
   return (
-    <View style={styles.rowWrap}>
+    <View
+      style={isSetupGeneratePasscode ? styles.WrapnotPadding : styles.rowWrap}
+    >
       <View style={styles.rowContent}>
         <TouchableOpacity
           style={styles.row}

package/src/screens/GuestInfo/components/RecurringDetail.js

@@ -7,6 +7,7 @@ import { Colors } from '../../../configs';
 import { REPEAT_ITEMS } from '../constant';
 import styles from '../styles/AccessScheduleDetailStyles';
 import { TESTID } from '../../../configs/Constants';
+import moment from 'moment';
 
 const RecurringDetail = ({
   onShowSetDateTime,
@@ -73,7 +74,7 @@ const RecurringDetail = ({
         testID={TESTID.RECURRING_TEXT_BUTTON}
       >
         <Text type="Body" color={Colors.Orange} style={styles.value}>
-          {recurringTimeStart.format('hh:mm A')}
+          {moment(recurringTimeStart).format('hh:mm A')}
         </Text>
       </TouchableOpacity>
       <Text type="Body" color={Colors.Gray8} style={styles.title}>
@@ -84,7 +85,7 @@ const RecurringDetail = ({
         testID={TESTID.RECURRING_TEXT_BUTTON}
       >
         <Text type="Body" color={Colors.Orange} style={styles.value}>
-          {recurringTimeEnd.format('hh:mm A')}
+          {moment(recurringTimeEnd).format('hh:mm A')}
         </Text>
       </TouchableOpacity>
       <Text type="Body" color={Colors.Gray8} style={styles.title}>

package/src/screens/GuestInfo/components/TemporaryDetail.js

@@ -5,6 +5,7 @@ import Text from '../../../commons/Text';
 import { Colors } from '../../../configs';
 import styles from '../styles/AccessScheduleDetailStyles';
 import { TESTID } from '../../../configs/Constants';
+import moment from 'moment';
 
 const TemporaryDetail = ({
   onShowSetDateTime,
@@ -32,7 +33,7 @@ const TemporaryDetail = ({
         testID={TESTID.TEMPORARY_TEXT_BUTTON}
       >
         <Text type="Body" color={Colors.Orange} style={styles.value}>
-          {temporaryTimeStart.format('hh:mm A DD/MM/YYYY')}
+          {moment(temporaryTimeStart).format('hh:mm A DD/MM/YYYY')}
         </Text>
       </TouchableOpacity>
       <Text type="Body" color={Colors.Gray8} style={styles.title}>
@@ -43,7 +44,7 @@ const TemporaryDetail = ({
         testID={TESTID.TEMPORARY_TEXT_BUTTON}
       >
         <Text type="Body" color={Colors.Orange} style={styles.value}>
-          {temporaryTimeEnd.format('hh:mm A DD/MM/YYYY')}
+          {moment(temporaryTimeEnd).format('hh:mm A DD/MM/YYYY')}
         </Text>
       </TouchableOpacity>
     </View>

package/src/screens/GuestInfo/styles/AccessScheduleItemStyles.js

@@ -5,6 +5,9 @@ export default StyleSheet.create({
   rowWrap: {
     paddingHorizontal: 16,
   },
+  WrapnotPadding: {
+    paddingHorizontal: 0,
+  },
   rowContent: {
     paddingVertical: 24,
   },

package/src/screens/HanetCamera/CaptureFaceID.js

@@ -0,0 +1,210 @@
+import React, { memo, useState, useRef } from 'react';
+import { View, ActivityIndicator, TouchableOpacity } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { RNCamera } from 'react-native-camera';
+import { HeaderCustom } from '../../commons/Header';
+import { FullLoading } from '../../commons';
+import Text from '../../commons/Text';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import CaptureFaceIDSvg from '../../../assets/images/Hanet/CaptureFaceID.svg';
+import FaceFrameSvg from '../../../assets/images/Hanet/FaceFrame.svg';
+import { axiosPatch } from '../../utils/Apis/axios';
+import { Colors, Constants, API } from '../../configs';
+import styles from './styles/captureFaceIDStyles';
+import Routes from '../../utils/Route';
+
+const LoadingCamera = memo(() => {
+  return (
+    <View style={styles.containerLoading}>
+      <ActivityIndicator />
+    </View>
+  );
+});
+
+const CaptureFaceID = ({ route }) => {
+  const t = useTranslations();
+  const { navigate, goBack } = useNavigation();
+  const { title, hanetPlace, hanetMember, setMemberAvatar, isAddNewMember } =
+    route.params;
+  const [openCamera, setOpenCamera] = useState(false);
+  const [capturing, setCapturing] = useState(false);
+  const [imageUri, setImageUri] = useState();
+  const [loading, setLoading] = useState(false);
+
+  const refCamera = useRef();
+
+  const beginCaptureFace = async () => {
+    setCapturing(true);
+    setOpenCamera(true);
+  };
+
+  const captureFace = async () => {
+    if (refCamera.current) {
+      const options = {
+        quality: 0.7,
+        height: 1280,
+        width: 736,
+        imageType: 'jpg',
+        pauseAfterCapture: true,
+        forceUpOrientation: true,
+        fixOrientation: true,
+        orientation: 'portrait',
+      };
+      const data = await refCamera.current.takePictureAsync(options);
+      setImageUri(data.uri);
+      setCapturing(false);
+    }
+  };
+
+  const resumeCapture = () => {
+    if (refCamera.current) {
+      setCapturing(true);
+      refCamera.current.resumePreview();
+    }
+  };
+
+  const updateMemberFaceID = async () => {
+    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);
+      goBack();
+    }
+    setLoading(false);
+  };
+
+  const newMemberDoneGetFaceID = () => {
+    navigate(Routes.HanetMemberInfo, {
+      hanetPlace: hanetPlace,
+      hanetMember: {
+        ...hanetMember,
+        avatar_uri: imageUri,
+      },
+      isAddNewMember: true,
+    });
+  };
+
+  const processFaceID = async () => {
+    if (isAddNewMember) {
+      newMemberDoneGetFaceID();
+    } else {
+      await updateMemberFaceID();
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <HeaderCustom title={title} isShowSeparator />
+      {openCamera && (
+        <View style={styles.wrapCamera}>
+          <RNCamera
+            ref={refCamera}
+            style={{
+              height: Constants.height,
+              width: Constants.width,
+            }}
+            type={RNCamera.Constants.Type.back}
+          >
+            {({ camera, status, recordAudioPermissionStatus }) => {
+              if (status !== 'READY') {
+                return <LoadingCamera />;
+              }
+              return (
+                <View style={styles.maskOutter}>
+                  <FaceFrameSvg />
+                </View>
+              );
+            }}
+          </RNCamera>
+        </View>
+      )}
+      {!openCamera && (
+        <View style={styles.center}>
+          <CaptureFaceIDSvg />
+          <Text type="H3" color={Colors.Gray9} bold style={styles.textDes}>
+            {t('text_des_capture_face_id')}
+          </Text>
+        </View>
+      )}
+      <View
+        style={[
+          styles.wrapBottom,
+          // eslint-disable-next-line react-native/no-inline-styles
+          openCamera && { height: '30%' },
+          openCamera &&
+            // eslint-disable-next-line react-native/no-inline-styles
+            !capturing && { justifyContent: 'flex-end', paddingBottom: 0 },
+        ]}
+      >
+        {!openCamera && (
+          <TouchableOpacity
+            onPress={beginCaptureFace}
+            style={styles.bottomButton}
+          >
+            <Text type="H4" semibold color={Colors.White}>
+              {t('begin')}
+            </Text>
+          </TouchableOpacity>
+        )}
+        {openCamera && capturing && (
+          <>
+            <Text
+              type="H3"
+              color={Colors.Gray9}
+              bold
+              center
+              style={styles.textLocateFace}
+            >
+              {t('text_des_locate_hanet_face_id')}
+            </Text>
+            <TouchableOpacity onPress={captureFace} style={styles.bottomButton}>
+              <Text type="H4" semibold color={Colors.White}>
+                {t('capture')}
+              </Text>
+            </TouchableOpacity>
+          </>
+        )}
+        {openCamera && !capturing && (
+          <>
+            <TouchableOpacity
+              onPress={processFaceID}
+              style={styles.bottomButton}
+            >
+              <Text type="H4" semibold color={Colors.White}>
+                {t('continue')}
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={resumeCapture}
+              style={[styles.bottomButton, styles.bottomButton2]}
+            >
+              <Text type="H4" semibold color={Colors.Primary}>
+                {t('capture_again')}
+              </Text>
+            </TouchableOpacity>
+          </>
+        )}
+      </View>
+      {loading && <FullLoading />}
+    </View>
+  );
+};
+
+export default CaptureFaceID;