@eohjsc/react-native-smart-city 0.2.96 → 0.2.99

package/src/commons/FieldTemplate/ScheduleField/index.js

@@ -0,0 +1,176 @@
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { View } from 'react-native';
+import styles from './ScheduleFieldStyles';
+import moment from 'moment';
+
+import Text from '../../Text';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import AccessScheduleItem from '../../../screens/GuestInfo/components/AccessScheduleItem';
+import RecurringDetail from '../../../screens/GuestInfo/components/RecurringDetail';
+import TemporaryDetail from '../../../screens/GuestInfo/components/TemporaryDetail';
+import { useBoolean } from '../../../hooks/Common';
+import WheelDateTimePicker from '../../WheelDateTimePicker';
+import { ACCESS_SCHEDULE } from '../../../screens/GuestInfo/constant';
+
+const ScheduleField = ({ dataItem, index, setDataForm, dataForm }) => {
+  const t = useTranslations();
+  const [accessSchedule, setAccessSchedule] = useState('always');
+  const [lockShowing, releaseLockShowing, acquireLockShowing] =
+    useBoolean(true);
+
+  const [stateDateTimePicker, setStateDateTimePicker] = useState({
+    isVisible: false,
+    mode: 'time',
+    defaultValue: moment(),
+    setter: null,
+  });
+  const [recurringTimeStart, setRecurringTimeStart] = useState(moment());
+  const [recurringTimeEnd, setRecurringTimeEnd] = useState(
+    moment().add(1, 'hours')
+  );
+  const [recurringTimeRepeat, setRecurringTimeRepeat] = useState([]);
+  const [temporaryTimeStart, setTemporaryTimeStart] = useState(moment());
+  const [temporaryTimeEnd, setTemporaryTimeEnd] = useState(
+    moment().add(1, 'days')
+  );
+  useEffect(() => {
+    if (accessSchedule === ACCESS_SCHEDULE.ALWAYS) {
+      dataItem.valid = true;
+      dataItem.data = {
+        access_schedule: accessSchedule,
+      };
+    } else if (accessSchedule === ACCESS_SCHEDULE.RECURRING) {
+      dataItem.valid = true;
+      dataItem.data = {
+        access_schedule: accessSchedule,
+        recurring_time_start: recurringTimeStart.format(),
+        recurring_time_end: recurringTimeEnd.format(),
+        recurring_time_repeat: recurringTimeRepeat,
+      };
+    } else if (accessSchedule === ACCESS_SCHEDULE.TEMPORARY) {
+      if (temporaryTimeStart > temporaryTimeEnd) {
+        dataItem.valid = false;
+      } else {
+        dataItem.valid = true;
+        dataItem.data = {
+          access_schedule: accessSchedule,
+          temporary_time_start: temporaryTimeStart.format(),
+          temporary_time_end: temporaryTimeEnd.format(),
+        };
+      }
+    }
+    dataItem[dataItem.action.type] = dataItem.action.id[accessSchedule];
+    dataForm[index] = dataItem;
+    setDataForm([...dataForm]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    accessSchedule,
+    recurringTimeEnd,
+    recurringTimeRepeat,
+    recurringTimeStart,
+    temporaryTimeEnd,
+    temporaryTimeStart,
+  ]);
+  const onShowSetDateTime = useCallback(
+    (currentValue, setter, mode) => {
+      releaseLockShowing();
+      setStateDateTimePicker((state) => ({
+        ...state,
+        isVisible: true,
+        mode: mode,
+        defaultValue: currentValue,
+        setter: setter,
+      }));
+    },
+    [releaseLockShowing]
+  );
+
+  const onHideSetDateTime = useCallback(() => {
+    acquireLockShowing();
+    setStateDateTimePicker((state) => ({
+      ...state,
+      isVisible: false,
+    }));
+  }, [setStateDateTimePicker, acquireLockShowing]);
+
+  const onDateTimePicked = useCallback(
+    (timeData) => {
+      const setter = stateDateTimePicker.setter;
+      setter && setter(moment(timeData));
+    },
+    [stateDateTimePicker]
+  );
+
+  const listAccessSchedule = useMemo(
+    () => [
+      {
+        text: t(`${ACCESS_SCHEDULE.ALWAYS}`),
+        value: ACCESS_SCHEDULE.ALWAYS,
+        detail: () => <></>,
+      },
+      {
+        text: t(`${ACCESS_SCHEDULE.RECURRING}`),
+        value: ACCESS_SCHEDULE.RECURRING,
+        detail: () => (
+          <RecurringDetail
+            onShowSetDateTime={onShowSetDateTime}
+            recurringTimeStart={recurringTimeStart}
+            recurringTimeEnd={recurringTimeEnd}
+            recurringTimeRepeat={recurringTimeRepeat}
+            setRecurringTimeStart={setRecurringTimeStart}
+            setRecurringTimeEnd={setRecurringTimeEnd}
+            setRecurringTimeRepeat={setRecurringTimeRepeat}
+          />
+        ),
+      },
+      {
+        text: t(`${ACCESS_SCHEDULE.TEMPORARY}`),
+        value: ACCESS_SCHEDULE.TEMPORARY,
+        detail: () => (
+          <TemporaryDetail
+            onShowSetDateTime={onShowSetDateTime}
+            temporaryTimeStart={temporaryTimeStart}
+            temporaryTimeEnd={temporaryTimeEnd}
+            setTemporaryTimeStart={setTemporaryTimeStart}
+            setTemporaryTimeEnd={setTemporaryTimeEnd}
+          />
+        ),
+      },
+    ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      onShowSetDateTime,
+      recurringTimeEnd,
+      recurringTimeRepeat,
+      recurringTimeStart,
+      temporaryTimeEnd,
+      temporaryTimeStart,
+    ]
+  );
+
+  return (
+    <View style={styles.wrapper}>
+      <Text style={styles.textHeadLine}>{t('access_schedule')}</Text>
+
+      {listAccessSchedule.map((item, index) => (
+        <AccessScheduleItem
+          key={index}
+          item={item}
+          isSelected={item.value === accessSchedule}
+          onSelect={setAccessSchedule}
+          isSetupGeneratePasscode
+        />
+      ))}
+      <WheelDateTimePicker
+        mode={stateDateTimePicker.mode}
+        isVisible={stateDateTimePicker.isVisible && lockShowing}
+        defaultValue={stateDateTimePicker.defaultValue}
+        onPicked={onDateTimePicked}
+        onCancel={onHideSetDateTime}
+        onHide={releaseLockShowing}
+      />
+    </View>
+  );
+};
+
+export default memo(ScheduleField);

package/src/commons/FullLoading/index.js

@@ -22,7 +22,8 @@ const styles = StyleSheet.create({
     left: 0,
     bottom: 0,
     right: 0,
-    zIndex: 10,
+    zIndex: 1000, // works on ios
+    elevation: 1000, // works on android
   },
   background: {
     backgroundColor: colorOpacity(Colors.White, 0.8),

package/src/commons/MenuActionAddnew/index.js

@@ -59,6 +59,7 @@ const MenuActionAddnew = memo(
               data={dataActions}
               keyExtractor={keyExtractor}
               renderItem={renderItem}
+              scrollIndicatorInsets={{ right: 1 }}
             />
           </View>
         </View>

package/src/commons/MenuActionList/index.js

@@ -57,6 +57,7 @@ const MenuActionList = memo(
               data={listItem}
               keyExtractor={keyExtractor}
               renderItem={renderItem}
+              scrollIndicatorInsets={{ right: 1 }}
             />
           </View>
         </View>

package/src/commons/MenuActionMore/index.js

@@ -50,7 +50,7 @@ const MenuActionMore = memo(
         isVisible={isVisible}
         arrowStyle={styles.wrap}
       >
-        <ScrollView>
+        <ScrollView scrollIndicatorInsets={{ right: 1 }}>
           {listMenuItem.map((item, index) => {
             return (
               <TouchableOpacity

package/src/commons/PreventAccess/__test__/PreventAccess.test.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { create } from 'react-test-renderer';
+import { act } from 'react-test-renderer';
+import PreventAccess from '..';
+import { TESTID } from '../../../configs/Constants';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import Text from '../../Text';
+
+const mockGoBack = jest.fn();
+
+const wrapComponent = (headerBodyText, visible, hidePreventAccess) => (
+  <SCProvider initState={mockSCStore({})}>
+    <PreventAccess
+      headerBodyText={headerBodyText}
+      visible={visible}
+      hidePreventAccess={hidePreventAccess}
+    />
+  </SCProvider>
+);
+
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useRoute: jest.fn(),
+    useNavigation: () => ({
+      goBack: mockGoBack,
+    }),
+  };
+});
+
+describe('Test PreventAccess.test', () => {
+  let tree;
+  let headerBodyText;
+  let visible;
+  let hidePreventAccess = () => {};
+
+  test('onItemClick MenuActionList', () => {
+    act(() => {
+      tree = create(wrapComponent(headerBodyText, visible, hidePreventAccess));
+    });
+    const instance = tree.root;
+    const text = instance.findAllByType(Text);
+    expect(text).toHaveLength(5);
+    const button1 = instance.find(
+      (el) => el.props.testID === TESTID.BUTTON_PREVENT_ACCESS
+    );
+    const button2 = instance.find(
+      (el) => el.props.testID === TESTID.TEXT_PREVENT_ACCESS
+    );
+    act(() => {
+      button1.props.onBackButtonPress();
+    });
+
+    act(() => {
+      button2.props.onPress();
+    });
+    expect(button1).toBeDefined();
+    expect(button2).toBeDefined();
+    expect(mockGoBack).toHaveBeenCalled();
+  });
+});

package/src/commons/PreventAccess/index.js

@@ -0,0 +1,67 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+import Modal from 'react-native-modal';
+import { useNavigation } from '@react-navigation/native';
+
+import t from '../../hooks/Common/useTranslations';
+import Text from '../Text';
+import { Colors } from '../../configs';
+import { styles } from './styles';
+import { TESTID } from '../../configs/Constants';
+
+const PreventAccess = memo(({ headerBodyText, visible, hidePreventAccess }) => {
+  const { goBack } = useNavigation();
+
+  const dataText = useMemo(() => {
+    return {
+      headerText: t('note'),
+      bodyText: t('This {name} was removed!', {
+        name: headerBodyText ? headerBodyText : '',
+      }),
+      endOfText: t('back'),
+    };
+  }, [headerBodyText]);
+
+  const handleBackPress = useCallback(() => {
+    hidePreventAccess();
+    goBack();
+  }, [goBack, hidePreventAccess]);
+
+  const handleDonePopup = useCallback(() => {
+    goBack();
+    hidePreventAccess();
+  }, [goBack, hidePreventAccess]);
+
+  return (
+    <Modal
+      isVisible={visible}
+      transparent={true}
+      onBackButtonPress={handleBackPress}
+      style={styles.container}
+      testID={TESTID.BUTTON_PREVENT_ACCESS}
+    >
+      <View style={styles.popoverStyle}>
+        <View style={styles.actionTextWrap}>
+          <Text size={17} bold color={Colors.Gray9} style={styles.textHeader}>
+            {dataText?.headerText}
+          </Text>
+          <Text type="H4" color={Colors.Gray8} style={styles.textNotification}>
+            {dataText?.bodyText}
+          </Text>
+        </View>
+        <View style={styles.endOfText}>
+          <Text
+            testID={TESTID.TEXT_PREVENT_ACCESS}
+            size={16}
+            bold
+            color={Colors.Primary}
+            onPress={handleDonePopup}
+          >
+            {dataText?.endOfText}
+          </Text>
+        </View>
+      </View>
+    </Modal>
+  );
+});
+export default PreventAccess;

package/src/commons/PreventAccess/styles.js

@@ -0,0 +1,33 @@
+import { StyleSheet } from 'react-native';
+
+import { Colors } from '../../configs';
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  popoverStyle: {
+    flex: 1,
+    width: '100%',
+    backgroundColor: Colors.White,
+    position: 'absolute',
+    borderRadius: 10,
+  },
+  actionTextWrap: {
+    marginTop: 14,
+    marginHorizontal: 20,
+  },
+  textHeader: {
+    marginVertical: 10,
+  },
+  textNotification: {
+    lineHeight: 20,
+  },
+  endOfText: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    marginTop: 5,
+    marginBottom: 20,
+    marginRight: 20,
+  },
+});

package/src/commons/WheelDateTimePicker/index.js

@@ -104,6 +104,7 @@ const WheelDateTimePicker = ({
 
   return (
     <BottomSheet
+      testID={TESTID.WHEEL_DATE_TIME_PICKER}
       isVisible={isVisible}
       onBackdropPress={onPickerCancel}
       onHide={onHide}
@@ -173,7 +174,7 @@ const WheelDateTimePicker = ({
         onLeftClick={onPickerCancel}
         rightTitle={t('done')}
         onRightClick={onDone}
-        testIDPrefix={TESTID.WHEEL_DATE_TIME_PICKER}
+        testIDPrefix={TESTID.WHEEL_DATE_TIME_PICKER_BUTTON}
       />
     </BottomSheet>
   );

package/src/configs/API.js

@@ -65,6 +65,9 @@ const API = {
       SCConfig.apiRoot + `/property_manager/sensors/${id}/`,
     DISPLAY: (id) =>
       SCConfig.apiRoot + `/property_manager/sensors/${id}/display/`,
+    SIDE_MENU_DETAIL: (id, side_menu_id) =>
+      SCConfig.apiRoot +
+      `/property_manager/sensors/${id}/display/side_menu/${side_menu_id}/`,
     DISPLAY_VALUES: (id) =>
       SCConfig.apiRoot + `/property_manager/sensors/${id}/display_values/`,
     DISPLAY_VALUES_V2: (id) =>

package/src/configs/Constants.js

@@ -674,13 +674,16 @@ export const TESTID = {
 
   // WheelDateTimePicker
   WHEEL_DATE_TIME_PICKER: 'WHEEL_DATE_TIME_PICKER',
+  WHEEL_DATE_TIME_PICKER_BUTTON: 'WHEEL_DATE_TIME_PICKER_BUTTON',
 
   // GuestInfo
   SAVE_ACCESS_SCHEDULE: 'SAVE_ACCESS_SCHEDULE',
   ACCESS_SCHEDULE_RADIO_BUTTON: 'ACCESS_SCHEDULE_RADIO_BUTTON',
   ACCESS_SCHEDULE_SHEET: 'ACCESS_SCHEDULE_SHEET',
   RECURRING_TEXT_BUTTON: 'RECURRING_TEXT_BUTTON',
-  TEMPORARY_TEXT_BUTTON: 'TEMPORARY_TEXT_BUTTON',
+  RECURRING_REPEAT_ITEM: 'RECURRING_REPEAT_ITEM',
+  TEMPORARY_START_TEXT_BUTTON: 'TEMPORARY_START_TEXT_BUTTON',
+  TEMPORARY_END_TEXT_BUTTON: 'TEMPORARY_END_TEXT_BUTTON',
 
   // ActivityLog
   FILTER_BUTTON: 'FILTER_BUTTON',
@@ -722,6 +725,18 @@ export const TESTID = {
   AUTO_LOCK_BUTTON_ENABLE: 'AUTO_LOCK_BUTTON_ENABLE',
   AUTO_LOCK_BUTTON_INSTANT: 'AUTO_LOCK_BUTTON_INSTANT',
   AUTO_LOCK_BUTTON_RELOCK_TIMING: 'AUTO_LOCK_BUTTON_RELOCK_TIMING',
+
+  //PreventAccess
+  BUTTON_PREVENT_ACCESS: 'BUTTON_PREVENT_ACCESS',
+  TEXT_PREVENT_ACCESS: 'TEXT_PREVENT_ACCESS',
+
+  //Template field
+  CHOOSE_FIELD: 'CHOOSE_FIELD',
+  CHOOSE_POPUP: 'CHOOSE_POPUP',
+  CHOOSE_ITEM: 'CHOOSE_ITEM',
+
+  PASSCODE_FIELD: 'PASSCODE_FIELD',
+  SUBMIT: 'SUBMIT',
 };
 
 export const NOTIFICATION_TYPES = {

package/src/iot/RemoteControl/GoogleHome.js

@@ -201,8 +201,22 @@ function getServiceName(message) {
   return serviceSplit.join('_');
 }
 
+async function sendCommandSingleAction(connection, ghAction, data) {
+  const { message } = ghAction || {};
+  const name = getServiceName(message);
+
+  if (name && data) {
+    message.service_data[name] = data;
+  }
+
+  await connection.sendMessagePromise(message);
+}
+
 export async function sendCommandOverGoogleHome(sensor, action, data) {
-  if (!action.googlehome_actions || !action.googlehome_actions.length) {
+  if (
+    !(action.googlehome_actions && action.googlehome_actions.length) &&
+    !action.googlehome_action
+  ) {
     return;
   }
 
@@ -212,20 +226,19 @@ export async function sendCommandOverGoogleHome(sensor, action, data) {
     return;
   }
 
-  for (let i = 0; i < action.googlehome_actions.length; i++) {
-    const ghAction = action.googlehome_actions[i];
-    const { message } = ghAction;
-    const name = getServiceName(ghAction.message);
-
-    if (name && data) {
-      message.service_data[name] = data;
+  if (action.googlehome_actions) {
+    for (let i = 0; i < action.googlehome_actions.length; i++) {
+      await sendCommandSingleAction(
+        connection,
+        action.googlehome_actions[i],
+        data
+      );
     }
-
-    await connection.sendMessagePromise(message);
+  } else if (action.googlehome_action) {
+    await sendCommandSingleAction(connection, action.googlehome_action, data);
   }
 
   const { success } = await axiosPost(API.SENSOR.ACTIVITY_LOG(), {
-    sensor_id: sensor.id,
     action_id: action.id,
     message: 'Trigger by user action with google home',
   });

package/src/iot/RemoteControl/__test__/GoogleHome.test.js

@@ -75,6 +75,9 @@ describe('Remote Control Google Home', () => {
         message: 'message',
       },
     ],
+    googlehome_action: {
+      message: 'message',
+    },
   };
 
   const response = {
@@ -223,6 +226,35 @@ describe('Remote Control Google Home', () => {
     });
   });
 
+  it('Send command over google home action googlehome_action one to one', async () => {
+    action.googlehome_actions = null;
+    action.googlehome_action.message = {
+      type: 'call_service',
+      domain: 'climate',
+      service: 'set_temperature',
+      service_data: {
+        temperature: 0,
+        entity_id: 'climate.dqsmart_0108f6cdde',
+      },
+      id: 20,
+    };
+
+    axios.post.mockImplementation(async () => {
+      return response;
+    });
+    await googleHomeConnect(options);
+    await sendCommandOverGoogleHome(sensor, action, 19);
+
+    action.googlehome_action.message.service_data.temperature = 19;
+    expect(connection.sendMessagePromise).toBeCalledWith(
+      action.googlehome_action.message
+    );
+    expect(axios.post).toHaveBeenCalledWith(API.SENSOR.ACTIVITY_LOG(), {
+      action_id: 1,
+      message: 'Trigger by user action with google home',
+    });
+  });
+
   it('Send command over google home that not connected', async () => {
     await googleHomeConnect(options);
     await sendCommandOverGoogleHome({ chip_id: 2 }, action);

package/src/navigations/UnitStack.js

@@ -55,6 +55,7 @@ import { HanetCameraStack } from './HanetCameraStack';
 
 import { axiosGet } from '../utils/Apis/axios';
 import { API } from '../configs';
+import SideMenuDetail from '../screens/SideMenuDetail';
 
 const Stack = createStackNavigator();
 
@@ -263,6 +264,13 @@ export const UnitStack = memo((props) => {
           headerShown: false,
         }}
       />
+      <Stack.Screen
+        name={Route.SideMenuDetail}
+        component={SideMenuDetail}
+        options={{
+          headerShown: false,
+        }}
+      />
       <Stack.Screen
         name={Route.UnitMemberList}
         component={SharingMemberList}

package/src/screens/AQIGuide/index.js

@@ -83,7 +83,7 @@ const AQIGuide = memo(() => {
 
   return (
     <SafeAreaView style={styles.container}>
-      <ScrollView style={styles.container}>
+      <ScrollView style={styles.container} scrollIndicatorInsets={{ right: 1 }}>
         {titles.map((item, index) => {
           const { title, des } = item;
           return (

package/src/screens/ActivityLog/FilterPopup.js

@@ -257,6 +257,8 @@ const FilterPopup = ({
         onCancel={onPickerCancel}
         onHide={releaseLockShowing}
         display="spinner"
+        cancelTextIOS={t('cancel')}
+        confirmTextIOS={t('confirm')}
       />
     </>
   );

package/src/screens/AddCommon/SelectSubUnit.js

@@ -174,6 +174,7 @@ const AddCommonSelectSubUnit = ({ route }) => {
         <ScrollView
           style={styles.scrollContainer}
           showsVerticalScrollIndicator={false}
+          scrollIndicatorInsets={{ right: 1 }}
         >
           <Section type={'border'}>
             {subUnits.map((item, index) => (

package/src/screens/AddCommon/SelectUnit.js

@@ -159,6 +159,7 @@ const AddCommonSelectUnit = ({ route }) => {
         <ScrollView
           style={styles.scrollContainer}
           showsVerticalScrollIndicator={false}
+          scrollIndicatorInsets={{ right: 1 }}
         >
           <Section type={'border'}>
             {units.map((item, index) => (

package/src/screens/AddLocationMaps/index.js

@@ -169,7 +169,10 @@ const AddLocationMaps = memo(() => {
         </Text>
         <View style={styles.searchLocation}>
           <SearchBarLocation input={input} onTextInput={onTextInput} />
-          <ScrollView style={styles.searchData}>
+          <ScrollView
+            style={styles.searchData}
+            scrollIndicatorInsets={{ right: 1 }}
+          >
             {searchData.map((item) => (
               <RowLocation item={item} onPress={onPressRowLocation} />
             ))}