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

package/src/screens/Device/detail.js

@@ -79,7 +79,7 @@ const DeviceDetail = ({ route }) => {
     isConnected: true,
     displayTemplate: true,
   });
-
+  const [serverDown, setServerDown] = useState(false);
   const isDeviceConnectedViaBle = useMemo(
     () => isDeviceConnected(sensor?.remote_control_options?.bluetooth?.address),
     [sensor]
@@ -99,15 +99,23 @@ const DeviceDetail = ({ route }) => {
     });
   }, [display]);
 
-  useDisconnectedDevice(sensorName, isDeviceHasBle);
+  useDisconnectedDevice(sensorName, isDeviceHasBle, serverDown);
 
   const netInfo = useNetInfo();
 
-  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(
@@ -177,16 +185,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 +209,8 @@ const DeviceDetail = ({ route }) => {
           }
         }
       }
+    } else if (resp_status >= 500) {
+      setServerDown(true);
     }
     setLoading((preState) => ({ ...preState, displayTemplate: false }));
 
@@ -303,6 +313,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 +356,12 @@ const DeviceDetail = ({ route }) => {
     display.items,
     isOwner,
     isShowSetupEmergencyContact,
+    isShowSetUpSmartLock,
     t,
     isFavourite,
     sensor,
-    sensorName,
     unit,
+    sensorName,
     station,
     emergencyDeviceId,
     addToFavorites,
@@ -465,6 +503,7 @@ const DeviceDetail = ({ route }) => {
         isDisplayTime={isShowSetupEmergencyContact ? false : isDisplayTime}
         showWindDirection={showWindDirection}
         isGGHomeConnected={isGGHomeConnected}
+        isDeviceHasBle={isDeviceHasBle}
       >
         {display.items.map((item) => (
           <SensorDisplayItem

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

@@ -1,4 +1,5 @@
 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';
@@ -8,16 +9,22 @@ import {
 } 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 +34,7 @@ export const useDisconnectedDevice = (sensorName, isDeviceHasBle) => {
       : [
           {
             text: 'Skip',
+            onPress: () => goBack(),
           },
           {
             text: 'Open',
@@ -38,8 +46,11 @@ export const useDisconnectedDevice = (sensorName, isDeviceHasBle) => {
   const isBluetoothEnabled = useIsBluetoothEnabled();
 
   const checkNetWorkConnect = useCallback(
-    async (isHavingInternet, isBtEnabled) => {
-      if (isHavingInternet === false && isDeviceHasBle) {
+    async (isHavingInternet, isBtEnabled, serverDown) => {
+      if (!isDeviceHasBle) {
+        return;
+      }
+      if (isHavingInternet === false || serverDown) {
         // TODO avoid case first render isHavingInternet == null
         if (isBtEnabled === true) {
           ToastBottomHelper.info(
@@ -64,6 +75,11 @@ export const useDisconnectedDevice = (sensorName, isDeviceHasBle) => {
   );
 
   useEffect(() => {
-    checkNetWorkConnect(netState.isConnected, isBluetoothEnabled);
-  }, [netState.isConnected, isBluetoothEnabled, checkNetWorkConnect]);
+    checkNetWorkConnect(netState.isConnected, isBluetoothEnabled, serverDown);
+  }, [
+    netState.isConnected,
+    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/Notification/__test__/NotificationItem.test.js

@@ -191,6 +191,7 @@ describe('test NotificationItem', () => {
     SENSOR_TYPE.SMOKE,
     SENSOR_TYPE.FIRE,
     SENSOR_TYPE.SOS,
+    SENSOR_TYPE.FILTER_WATER,
   ];
   for (const sensorType of listSensorType2) {
     test(`create ItemNotification NOTIFY_INDICATOR sensor_type ${sensorType}`, () => {

package/src/screens/Notification/components/NotificationItem.js

@@ -352,6 +352,22 @@ const NotificationItem = memo(({ item }) => {
                 }),
               iconContent: <Image source={Images.logo} style={styles.logo} />,
             };
+          case SENSOR_TYPE.FILTER_WATER:
+            return {
+              content: customColorText(
+                t('text_notification_content_replace_water_filter'),
+                arrParams
+              ),
+              redirect: () =>
+                navigation.navigate(Routes.UnitStack, {
+                  screen: Routes.DeviceDetail,
+                  params: {
+                    unitId,
+                    sensorId,
+                  },
+                }),
+              iconContent: <Image source={Images.logo} style={styles.logo} />,
+            };
           default:
             return {
               content: customColorText(

package/src/screens/SmartIr/__test__/GroupButtonByType.test.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import GroupButtonByType from '../components/GroupButtonByType/GroupButtonByType';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import WrapHeaderScrollable from '../../../commons/Sharing/WrapHeaderScrollable';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <GroupButtonByType route={route} />
+  </SCProvider>
+);
+
+const mockNavigate = jest.fn();
+const mockSetState = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockNavigate,
+    }),
+  };
+});
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+    useState: jest.fn((init) => [init, mockSetState]),
+  };
+});
+describe('Test GroupButtonByType', () => {
+  let tree;
+  beforeEach(() => {
+    mockNavigate.mockClear();
+  });
+  afterEach(() => {
+    mockSetState.mockClear();
+  });
+
+  test('render GroupButtonByType', () => {
+    const route = {
+      params: {
+        device_type: { id: 1, name: '', icon: '' },
+        brand: { id: 1, name: '' },
+      },
+    };
+    act(() => {
+      tree = renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const wrapHeaderScrollable = instance.findAllByType(WrapHeaderScrollable);
+    expect(wrapHeaderScrollable).toHaveLength(1);
+  });
+});

package/src/screens/SmartIr/__test__/SelectBrand.test.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { ScrollView } from 'react-native';
+import renderer, { act } from 'react-test-renderer';
+import SelectBrand from '../components/SelectBrand';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import { RowItem } from '../../../commons/RowItem';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <SelectBrand route={route} />
+  </SCProvider>
+);
+
+const mockNavigate = jest.fn();
+const mockSetState = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockNavigate,
+    }),
+  };
+});
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+    useState: jest.fn((init) => [init, mockSetState]),
+  };
+});
+describe('Test SelectBrand', () => {
+  let tree;
+  beforeEach(() => {
+    mockNavigate.mockClear();
+  });
+  afterEach(() => {
+    mockSetState.mockClear();
+  });
+
+  test('render SelectBrand', () => {
+    const route = {
+      params: {
+        device_type: { id: 1, name: '' },
+      },
+    };
+    act(() => {
+      tree = renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const scrollView = instance.findAllByType(ScrollView);
+    expect(scrollView).toHaveLength(1);
+  });
+
+  test('Row SmartIr onPress', () => {
+    const route = {
+      params: {
+        device_type: { id: 1, name: '' },
+      },
+    };
+    act(() => {
+      tree = renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const scrollView = instance.findAllByType(ScrollView);
+    expect(scrollView).toHaveLength(1);
+    const rowItem = instance.findAllByType(RowItem);
+    expect(rowItem).toHaveLength(3);
+    act(() => {
+      rowItem[0].props.onPress();
+    });
+    expect(mockNavigate).toHaveBeenCalled();
+  });
+});

package/src/screens/SmartIr/__test__/SelectDeviceType.test.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { ScrollView, TouchableOpacity } from 'react-native';
+import renderer, { act } from 'react-test-renderer';
+import SelectDeviceType from '../components/SelectDeviceType';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <SelectDeviceType />
+  </SCProvider>
+);
+
+const mockNavigate = jest.fn();
+const mockSetState = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockNavigate,
+    }),
+  };
+});
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+    useState: jest.fn((init) => [init, mockSetState]),
+  };
+});
+describe('Test SelectDeviceType', () => {
+  let tree;
+  beforeEach(() => {
+    mockNavigate.mockClear();
+  });
+  afterEach(() => {
+    mockSetState.mockClear();
+  });
+
+  test('render SelectDeviceType', () => {
+    act(() => {
+      tree = renderer.create(wrapComponent());
+    });
+    const instance = tree.root;
+    const scrollView = instance.findAllByType(ScrollView);
+    expect(scrollView).toHaveLength(1);
+  });
+
+  test('itemDevice SelectDeviceType onPress', () => {
+    act(() => {
+      tree = renderer.create(wrapComponent());
+    });
+    const instance = tree.root;
+    const scrollView = instance.findAllByType(ScrollView);
+    expect(scrollView).toHaveLength(1);
+    const touchableOpacity = instance.findAllByType(TouchableOpacity);
+    expect(touchableOpacity).toHaveLength(7);
+    const itemDevice = touchableOpacity[1];
+    act(() => {
+      itemDevice.props.onPress();
+    });
+    expect(mockNavigate).toHaveBeenCalled();
+  });
+});

package/src/screens/SmartIr/__test__/SmartIr.test.js

@@ -57,5 +57,6 @@ describe('Test SmartIr', () => {
     act(() => {
       itemAddNew[0].props.onPress();
     });
+    expect(mockNavigate).toHaveBeenCalled();
   });
 });

package/src/screens/SmartIr/components/GroupButtonByType/GroupButtonByType.js

@@ -0,0 +1,86 @@
+import React, { memo, useCallback, useState, useMemo } from 'react';
+import { View, TouchableOpacity, Alert } from 'react-native';
+import WrapHeaderScrollable from '../../../../commons/Sharing/WrapHeaderScrollable';
+import { useTranslations } from '../../../../hooks/Common/useTranslations';
+import SmartTiviActionTemplate from '../../../../commons/ActionGroup/SmartTiviActionTemplate/SmartTiviActionTemplate';
+import Text from '../../../../commons/Text';
+
+import { IconOutline } from '@ant-design/icons-react-native';
+import { Colors } from '../../../../configs';
+
+import styles from './GroupButtonByTypeStyles';
+
+const GroupButtonByType = memo(({ route }) => {
+  const t = useTranslations();
+  const [groupButton] = useState({ id: 1, template: 'tivi' });
+  const GroupButtonTemplate = useCallback(() => {
+    switch (groupButton?.template) {
+      case 'tivi':
+        return <SmartTiviActionTemplate />;
+      default:
+        return <></>;
+    }
+  }, [groupButton]);
+  const rightComponent = useMemo(
+    () => (
+      <View style={styles.rightComponent}>
+        <>
+          <TouchableOpacity
+            onPress={() => Alert.alert(t('feature_under_development'))}
+            style={[styles.headerButton]}
+          >
+            <IconOutline name={'reload'} size={27} color={Colors.Black} />
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={() => Alert.alert(t('feature_under_development'))}
+            style={[styles.headerButton]}
+          >
+            <IconOutline name={'more'} size={27} color={Colors.Black} />
+          </TouchableOpacity>
+        </>
+        )
+      </View>
+    ),
+    [t]
+  );
+  const AlertBottom = useCallback(() => {
+    return (
+      <View style={styles.alertBottom}>
+        <View style={styles.alertContent}>
+          <Text>{t('make_sure_3_button_available')}</Text>
+          <View style={styles.alertButtons}>
+            <TouchableOpacity
+              style={styles.selectButton}
+              onPress={() => Alert.alert(t('feature_under_development'))}
+            >
+              <Text color={Colors.White}>{t('select_this_one')}</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={styles.nextButton}
+              onPress={() => Alert.alert(t('feature_under_development'))}
+            >
+              <Text color={Colors.Gray8}>{t('next_one')}</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    );
+  }, [t]);
+  return (
+    <View style={styles.container}>
+      <WrapHeaderScrollable
+        title={t('Tivi')}
+        headerAniStyle={styles.header}
+        styleScrollView={styles.scrollView}
+        rightComponent={rightComponent}
+      >
+        <View style={styles.wrapItem}>
+          <GroupButtonTemplate />
+        </View>
+      </WrapHeaderScrollable>
+      <AlertBottom />
+    </View>
+  );
+});
+
+export default GroupButtonByType;

package/src/screens/SmartIr/components/GroupButtonByType/GroupButtonByTypeStyles.js

@@ -0,0 +1,76 @@
+import { StyleSheet } from 'react-native';
+import { Colors, Constants } from '../../../../configs';
+import { getStatusBarHeight } from 'react-native-iphone-x-helper';
+export const heightHeader = 44 + 44 + getStatusBarHeight() + 10;
+
+const flexCenter = {
+  justifyContent: 'center',
+  alignItems: 'center',
+};
+const styleButton = {
+  width: Constants.width / 2 - 32,
+  paddingVertical: 8,
+  paddingHorizontal: 32,
+  borderRadius: 30,
+  marginHorizontal: 8,
+  ...flexCenter,
+};
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    borderBottomWidth: 0,
+  },
+  scrollView: {
+    backgroundColor: Colors.White,
+    position: 'relative',
+  },
+  wrapItem: {
+    flex: 1,
+  },
+  rightComponent: {
+    flexDirection: 'row',
+    paddingRight: 8,
+  },
+  headerButton: {
+    paddingHorizontal: 10,
+  },
+  alertBottom: {
+    backgroundColor: Colors.White,
+    height: 120,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: 10,
+  },
+  alertContent: {
+    flex: 1,
+    backgroundColor: Colors.Blue13,
+    ...flexCenter,
+    borderRadius: 10,
+    shadowColor: Colors.Shadow,
+    shadowOffset: {
+      width: 0,
+      height: 20,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4.84,
+    elevation: 5,
+  },
+  alertButtons: {
+    marginTop: 16,
+    flexDirection: 'row',
+  },
+  selectButton: {
+    backgroundColor: Colors.Primary,
+    ...styleButton,
+  },
+  nextButton: {
+    backgroundColor: Colors.Gray1,
+    borderColor: Colors.Gray5,
+    borderWidth: 1,
+    ...styleButton,
+  },
+});