@eohjsc/react-native-smart-city 0.2.97 → 0.3.0

package/src/commons/FieldTemplate/PasscodeField/PasscodeFieldStyles.js

@@ -0,0 +1,30 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  wrapper: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingTop: 30,
+  },
+  invalid: {
+    width: 90,
+    textAlign: 'center',
+    borderWidth: 0,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.Red,
+  },
+  valid: {
+    width: 90,
+    textAlign: 'center',
+    borderWidth: 0,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.Primary,
+  },
+  textHeadLine: {
+    fontSize: 16,
+    color: Colors.Gray9,
+    fontWeight: 'bold',
+  },
+});

package/src/commons/FieldTemplate/PasscodeField/__test__/index.test.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import { TESTID } from '../../../../configs/Constants';
+import { mockSCStore } from '../../../../context/mockStore';
+import { SCProvider } from '../../../../context';
+import PasscodeField from '../index';
+
+const mockSetState = jest.fn();
+
+const wrapComponent = (
+  dataItem = {
+    type: 'passcode',
+    key: 'passcode',
+    action: {
+      type: 'action_zigbee',
+      id: 1,
+    },
+  },
+  index = 0,
+  dataForm = [
+    {
+      type: 'passcode',
+      key: 'passcode',
+      action: {
+        type: 'action_zigbee',
+        id: 1,
+      },
+    },
+  ]
+) => (
+  <SCProvider initState={mockSCStore({})}>
+    <PasscodeField
+      dataItem={dataItem}
+      index={index}
+      setDataForm={mockSetState}
+      dataForm={dataForm}
+    />
+  </SCProvider>
+);
+
+describe('Test PasscodeField', () => {
+  let tree;
+
+  afterEach(() => {
+    mockSetState.mockClear();
+  });
+
+  test('render PasscodeField', async () => {
+    await act(async () => {
+      tree = create(wrapComponent());
+    });
+
+    const instance = tree.root;
+    const inputPasscode = instance.find(
+      (item) => item.props.testID === TESTID.PASSCODE_FIELD
+    );
+
+    await act(async () => {
+      await inputPasscode.props.onChangeText('123');
+    });
+    expect(mockSetState).toBeCalledWith([
+      {
+        key: 'passcode',
+        type: 'passcode',
+        valid: false,
+        action: {
+          id: 1,
+          type: 'action_zigbee',
+        },
+      },
+    ]);
+
+    await act(async () => {
+      await inputPasscode.props.onChangeText('123456');
+    });
+    expect(mockSetState).toBeCalledWith([
+      {
+        key: 'passcode',
+        type: 'passcode',
+        data: '123456',
+        valid: true,
+        action: {
+          id: 1,
+          type: 'action_zigbee',
+        },
+        action_zigbee: 1,
+      },
+    ]);
+  });
+});

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

@@ -0,0 +1,43 @@
+import React, { memo, useCallback, useState } from 'react';
+import { Text, TextInput, View } from 'react-native';
+import { TESTID } from '../../../configs/Constants';
+
+import styles from './PasscodeFieldStyles';
+
+const PasscodeField = ({ dataItem, index, setDataForm, dataForm }) => {
+  const [invalid, setInvaild] = useState(false);
+  const onChangeText = useCallback(
+    (value) => {
+      if (value.length >= 4 && value.length <= 10) {
+        dataItem.data = value;
+        dataItem.valid = true;
+        dataItem[dataItem.action.type] = dataItem.action.id;
+        dataForm[index] = dataItem;
+        setInvaild(false);
+        setDataForm([...dataForm]);
+      } else {
+        dataItem.valid = false;
+        dataForm[index] = dataItem;
+        setInvaild(true);
+        setDataForm([...dataForm]);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  return (
+    <View style={styles.wrapper}>
+      <Text style={styles.textHeadLine}>{'Passcode'}</Text>
+      <TextInput
+        testID={TESTID.PASSCODE_FIELD}
+        style={invalid ? styles.invalid : styles.valid}
+        placeholder={'******'}
+        keyboardType={'numeric'}
+        maxLength={10}
+        onChangeText={onChangeText}
+      />
+    </View>
+  );
+};
+export default memo(PasscodeField);

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

@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  wrapper: {
+    paddingTop: 30,
+  },
+  textHeadLine: {
+    fontSize: 16,
+    color: Colors.Gray9,
+    fontWeight: 'bold',
+  },
+});

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

@@ -0,0 +1,179 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import { mockSCStore } from '../../../../context/mockStore';
+import { SCProvider } from '../../../../context';
+import ScheduleField from '../index';
+import { TESTID } from '../../../../configs/Constants';
+import { TouchableOpacity } from 'react-native';
+
+const mockSetState = jest.fn();
+
+const wrapComponent = (
+  dataItem = {
+    type: 'schedule',
+    key: 'schedule',
+    action: {
+      type: 'action_zigbee',
+      id: {
+        always: 2,
+        recurring: 4,
+        temporary: 5,
+      },
+    },
+  },
+  index = 0,
+  dataForm = [
+    {
+      type: 'schedule',
+      key: 'schedule',
+      action: {
+        type: 'action_zigbee',
+        id: {
+          always: 2,
+          recurring: 4,
+          temporary: 5,
+        },
+      },
+    },
+  ]
+) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ScheduleField
+      dataItem={dataItem}
+      index={index}
+      setDataForm={mockSetState}
+      dataForm={dataForm}
+    />
+  </SCProvider>
+);
+
+describe('Test ScheduleField', () => {
+  let tree;
+  beforeEach(() => {
+    Date.now = jest.fn(() => new Date('2022-05-30T15:50:36+01:00'));
+  });
+  afterEach(() => {
+    mockSetState.mockClear();
+  });
+
+  const onPressRecurring = async (instance, schedule) => {
+    await act(async () => {
+      await schedule.props.onPress();
+    });
+    const recurring = instance.find(
+      (el) =>
+        el.props.testID === '0' + TESTID.RECURRING_REPEAT_ITEM &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      await recurring.props.onPress();
+    });
+    expect(mockSetState).toBeCalledWith([
+      {
+        key: 'schedule',
+        type: 'schedule',
+        data: {
+          access_schedule: 'recurring',
+          recurring_time_end: '2022-05-30T16:50:36+01:00',
+          recurring_time_repeat: ['6'],
+          recurring_time_start: '2022-05-30T15:50:36+01:00',
+        },
+        valid: true,
+        action: {
+          id: {
+            always: 2,
+            recurring: 4,
+            temporary: 5,
+          },
+          type: 'action_zigbee',
+        },
+        action_zigbee: 4,
+      },
+    ]);
+    mockSetState.mockClear();
+  };
+
+  const onPressTemporary = async (instance, schedule) => {
+    await act(async () => {
+      await schedule.props.onPress();
+    });
+
+    expect(mockSetState).toBeCalledWith([
+      {
+        key: 'schedule',
+        type: 'schedule',
+        data: {
+          access_schedule: 'temporary',
+          temporary_time_end: '2022-05-31T15:50:36+01:00',
+          temporary_time_start: '2022-05-30T15:50:36+01:00',
+        },
+        valid: true,
+        action: {
+          id: {
+            always: 2,
+            recurring: 4,
+            temporary: 5,
+          },
+          type: 'action_zigbee',
+        },
+        action_zigbee: 5,
+      },
+    ]);
+    const temporaryEnd = instance.find(
+      (el) =>
+        el.props.testID === TESTID.TEMPORARY_END_TEXT_BUTTON &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      await temporaryEnd.props.onPress();
+    });
+    const dateTimePicker = instance.find(
+      (el) => el.props.testID === TESTID.WHEEL_DATE_TIME_PICKER
+    );
+    expect(dateTimePicker.props.isVisible).toBeTruthy();
+    const popupDateTimePickerDone = instance.find(
+      (el) =>
+        el.props.testID ===
+          `${TESTID.WHEEL_DATE_TIME_PICKER_BUTTON}${TESTID.VIEW_BUTTON_BOTTOM_RIGHT_BUTTON}` &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      await popupDateTimePickerDone.props.onPress();
+    });
+    expect(dateTimePicker.props.isVisible).toBeFalsy();
+    mockSetState.mockClear();
+  };
+
+  test('render ScheduleField choose schedule', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    expect(mockSetState).toBeCalledWith([
+      {
+        key: 'schedule',
+        type: 'schedule',
+        data: { access_schedule: 'always' },
+        valid: true,
+        action: {
+          id: {
+            always: 2,
+            recurring: 4,
+            temporary: 5,
+          },
+          type: 'action_zigbee',
+        },
+        action_zigbee: 2,
+      },
+    ]);
+    mockSetState.mockClear();
+    const instance = tree.root;
+    const schedule = instance.findAll(
+      (el) =>
+        el.props.testID === TESTID.ACCESS_SCHEDULE_RADIO_BUTTON &&
+        el.type === TouchableOpacity
+    );
+    expect(schedule).toHaveLength(3);
+    await onPressRecurring(instance, schedule[1]);
+    await onPressTemporary(instance, schedule[2]);
+  });
+});

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

@@ -7,6 +7,7 @@ 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();
@@ -37,6 +38,7 @@ const PreventAccess = memo(({ headerBodyText, visible, hidePreventAccess }) => {
       transparent={true}
       onBackButtonPress={handleBackPress}
       style={styles.container}
+      testID={TESTID.BUTTON_PREVENT_ACCESS}
     >
       <View style={styles.popoverStyle}>
         <View style={styles.actionTextWrap}>
@@ -48,7 +50,13 @@ const PreventAccess = memo(({ headerBodyText, visible, hidePreventAccess }) => {
           </Text>
         </View>
         <View style={styles.endOfText}>
-          <Text size={16} bold color={Colors.Primary} onPress={handleDonePopup}>
+          <Text
+            testID={TESTID.TEXT_PREVENT_ACCESS}
+            size={16}
+            bold
+            color={Colors.Primary}
+            onPress={handleDonePopup}
+          >
             {dataText?.endOfText}
           </Text>
         </View>

package/src/commons/Sharing/__test__/DevicePermissionsCheckbox.test.js

@@ -15,7 +15,6 @@ const wrapComponent = (sensor, mockFunction) => (
   </SCProvider>
 );
 
-jest.mock('axios');
 describe('Test DevicePermissionsCheckbox', () => {
   let tree;
   let sensor = {