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

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,93 @@
+import React from 'react';
+import axios from 'axios';
+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';
+
+jest.mock('axios');
+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(() => {
+    axios.get.mockClear();
+    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,182 @@
+import React from 'react';
+import axios from 'axios';
+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';
+
+jest.mock('axios');
+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(() => {
+    axios.get.mockClear();
+    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/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',
@@ -726,6 +729,14 @@ export const TESTID = {
   //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/context/actionType.ts

@@ -17,7 +17,6 @@ export const Action = {
   SET_STARRED_SCRIPTS: 'SET_STARRED_SCRIPTS',
   STAR_SCRIPT: 'STAR_SCRIPT',
   UNSTAR_SCRIPT: 'UNSTAR_SCRIPT',
-  IS_FULL_LOADING: 'IS_FULL_LOADING',
 };
 
 export type AuthData = {

package/src/context/reducer.ts

@@ -42,7 +42,6 @@ export const initialState = {
   statusBar: {} as StatusBar,
   listDevice: {} as ListDevice,
   listAction: [] as ListAction,
-  isFullLoading: false as Boolean,
   unit: {
     favoriteDeviceIds: [],
   },
@@ -67,8 +66,6 @@ export const reducer = (currentState: ContextData, action: Action) => {
       return { ...currentState, auth: payload };
     case Action.STORE_STATUS_BAR:
       return { ...currentState, statusBar: payload };
-    case Action.IS_FULL_LOADING:
-      return { ...currentState, isFullLoading: payload };
     case Action.UPDATE_LANGUAGE:
       return { ...currentState, language: payload };
     case Action.LIST_DEVICE_TYPES:

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/AddNewAction/SelectSensorDevices.js

@@ -28,6 +28,7 @@ const SelectSensorDevices = memo(({ route }) => {
     isAutomateTab,
     isCreateNewAction,
     isMultiUnits,
+    oldType,
   } = route.params;
 
   const [listStation, setListStation] = useState([]);
@@ -137,7 +138,7 @@ const SelectSensorDevices = memo(({ route }) => {
       navigate(Routes.ScriptDetail, {
         id: automateId,
         name: scriptName,
-        type: type,
+        type: oldType,
         havePermission: true,
         unit,
         isMultiUnits,

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

@@ -69,12 +69,13 @@ describe('test AddNewAutoSmart', () => {
       automate: {},
       automateId: undefined,
       title: 'select_sensor',
-      type: 'value_change',
+      oldType: 'value_change',
       scriptName: undefined,
       unit: { id: 1 },
       isAutomateTab: undefined,
       isMultiUnits: undefined,
       routeName: 'SelectSensorDevices',
+      type: 'value_change',
     });
   });
 
@@ -102,6 +103,7 @@ describe('test AddNewAutoSmart', () => {
       automate: {},
       automateId: undefined,
       type: 'schedule',
+      oldType: 'value_change',
       routeName: 'SetSchedule',
       scriptName: undefined,
       unit: route.params.unit,