@eohjsc/react-native-smart-city 0.2.21 → 0.2.27

package/src/screens/GuestInfo/__test__/index.test.js

@@ -0,0 +1,176 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import { create, act } from 'react-test-renderer';
+import axios from 'axios';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import GuestInfo from '..';
+import RowGuestInfo from '../components/RowGuestInfo';
+import AccessScheduleItem from '../components/AccessScheduleItem';
+import WheelDateTimePicker from '../../../commons/WheelDateTimePicker';
+import Text from '../../../commons/Text';
+import { TESTID } from '../../../configs/Constants';
+import { API } from '../../../configs';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <GuestInfo route={route} />
+  </SCProvider>
+);
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+
+const mockGoBack = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      goBack: mockGoBack,
+    }),
+  };
+});
+
+jest.mock('axios');
+
+const getButton = (instance, testID, many = false) => {
+  if (many) {
+    return instance.findAll(
+      (el) => el.props.testID === testID && el.type === TouchableOpacity
+    );
+  }
+  return instance.find(
+    (el) => el.props.testID === testID && el.type === TouchableOpacity
+  );
+};
+
+describe('Test GuestInfo', () => {
+  let route;
+  let tree;
+  let data;
+
+  beforeEach(() => {
+    axios.get.mockClear();
+    axios.put.mockClear();
+    mockGoBack.mockClear();
+    route = {
+      params: { id: 1 },
+    };
+    data = {
+      user: {
+        id: 1,
+        name: 'name',
+        avatar: 'avatar',
+      },
+      access_schedule: 'always',
+      recurring_time_start: '07:00:00',
+      recurring_time_end: '07:00:00',
+      recurring_time_repeat: [0, 1, 2],
+      temporary_time_start: '2021-01-24T12:00:00.000Z',
+      temporary_time_end: '2021-01-24T12:00:00.000Z',
+    };
+  });
+
+  test('test render GuestInfo', async () => {
+    const response = {
+      status: 200,
+      data: data,
+    };
+    axios.get.mockImplementation(async () => {
+      return response;
+    });
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    expect(axios.get).toHaveBeenCalledWith(API.SHARED_SENSOR.ACCESS(1), {});
+    const texts = instance.findAllByType(Text);
+    expect(texts[4].props.children).toBe(data.user.id);
+    expect(texts[6].props.children).toBe('Always');
+
+    const accessScheduleItems = instance.findAllByType(AccessScheduleItem);
+    const radioButtons = getButton(
+      instance,
+      TESTID.ACCESS_SCHEDULE_RADIO_BUTTON,
+      true
+    );
+    expect(accessScheduleItems).toHaveLength(3);
+    expect(radioButtons).toHaveLength(3);
+  });
+
+  test('test open and close 2 modal', async () => {
+    const response = {
+      status: 200,
+      data: data,
+    };
+    axios.get.mockImplementation(async () => {
+      return response;
+    });
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const rows = instance.findAllByType(RowGuestInfo);
+    const accessScheduleSheet = instance.find(
+      (el) => el.props.testID === TESTID.ACCESS_SCHEDULE_SHEET
+    );
+    const dateTimePicker = instance.findByType(WheelDateTimePicker);
+    const radioButtons = getButton(
+      instance,
+      TESTID.ACCESS_SCHEDULE_RADIO_BUTTON,
+      true
+    );
+    const accessScheduleSheetDone = getButton(
+      instance,
+      `${TESTID.ACCESS_SCHEDULE_SHEET}${TESTID.VIEW_BUTTON_BOTTOM_RIGHT_BUTTON}`
+    );
+    const dateTimePickerDone = getButton(
+      instance,
+      `${TESTID.WHEEL_DATE_TIME_PICKER}${TESTID.VIEW_BUTTON_BOTTOM_RIGHT_BUTTON}`
+    );
+
+    // show AccessScheduleSheet
+    await act(async () => {
+      await rows[1].props.onPress();
+    });
+    expect(accessScheduleSheet.props.isVisible).toBeTruthy();
+
+    // select recurring
+    await act(async () => {
+      await radioButtons[1].props.onPress();
+    });
+
+    // click recurring time start
+    const recurringTextButtons = getButton(
+      instance,
+      TESTID.RECURRING_TEXT_BUTTON,
+      true
+    );
+    await act(async () => {
+      await recurringTextButtons[0].props.onPress();
+      await accessScheduleSheet.props.onHide();
+    });
+    expect(accessScheduleSheet.props.isVisible).toBeFalsy();
+    expect(dateTimePicker.props.isVisible).toBeTruthy();
+
+    // WheelDateTimePicker -> click done
+    await act(async () => {
+      await dateTimePickerDone.props.onPress();
+      await dateTimePicker.props.onHide();
+    });
+    expect(accessScheduleSheet.props.isVisible).toBeTruthy();
+    expect(dateTimePicker.props.isVisible).toBeFalsy();
+
+    // AccessScheduleSheet -> click done
+    await act(async () => {
+      await accessScheduleSheetDone.props.onPress();
+      await accessScheduleSheet.props.onHide();
+    });
+    expect(accessScheduleSheet.props.isVisible).toBeFalsy();
+  });
+});

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

@@ -0,0 +1,32 @@
+import React, { useCallback } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { RadioCircle } from '../../../commons';
+import Text from '../../../commons/Text';
+import { TESTID } from '../../../configs/Constants';
+import styles from '../styles/AccessScheduleItemStyles';
+
+const AccessScheduleItem = ({ item, isSelected, onSelect }) => {
+  const DetailComponent = item.detail;
+  const handleOnSelect = useCallback(() => {
+    onSelect(item.value);
+  }, [item.value, onSelect]);
+
+  return (
+    <View style={styles.rowWrap}>
+      <View style={styles.rowContent}>
+        <TouchableOpacity
+          style={styles.row}
+          onPress={handleOnSelect}
+          testID={TESTID.ACCESS_SCHEDULE_RADIO_BUTTON}
+        >
+          <RadioCircle active={isSelected} />
+          <Text style={styles.textAccessSchedule}>{item.text}</Text>
+        </TouchableOpacity>
+        {isSelected && <DetailComponent />}
+      </View>
+      <View style={styles.separator} />
+    </View>
+  );
+};
+
+export default AccessScheduleItem;

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

@@ -0,0 +1,204 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import moment from 'moment';
+
+import BottomSheet from '../../../commons/BottomSheet';
+import ViewButtonBottom from '../../../commons/ViewButtonBottom';
+import AccessScheduleItem from './AccessScheduleItem';
+import RecurringDetail from './RecurringDetail';
+import TemporaryDetail from './TemporaryDetail';
+import WheelDateTimePicker from '../../../commons/WheelDateTimePicker';
+import { useBoolean } from '../../../hooks/Common';
+
+import { ACCESS_SCHEDULE } from '../constant';
+import { TESTID } from '../../../configs/Constants';
+
+const AccessScheduleSheet = ({
+  isVisible,
+  onShow,
+  onHide,
+  data,
+  onSetData,
+}) => {
+  const t = useTranslations();
+  const [lockShowing, releaseLockShowing, acquireLockShowing] =
+    useBoolean(true);
+  const [stateDateTimePicker, setStateDateTimePicker] = useState({
+    isVisible: false,
+    mode: 'time',
+    defaultValue: moment().valueOf(),
+    setter: null,
+  });
+
+  const [accessSchedule, setAccessSchedule] = useState(data.access_schedule);
+  const [recurringTimeStart, setRecurringTimeStart] = useState(
+    data.recurring_time_start
+  );
+  const [recurringTimeEnd, setRecurringTimeEnd] = useState(
+    data.recurring_time_end
+  );
+  const [recurringTimeRepeat, setRecurringTimeRepeat] = useState(
+    data.recurring_time_repeat
+  );
+  const [temporaryTimeStart, setTemporaryTimeStart] = useState(
+    data.temporary_time_start
+  );
+  const [temporaryTimeEnd, setTemporaryTimeEnd] = useState(
+    data.temporary_time_end
+  );
+
+  const onShowSetDateTime = useCallback(
+    (currentValue, setter, mode) => {
+      onHide();
+      acquireLockShowing();
+      setStateDateTimePicker((state) => ({
+        ...state,
+        isVisible: true,
+        mode: mode,
+        defaultValue: currentValue,
+        setter: setter,
+      }));
+    },
+    [setStateDateTimePicker, acquireLockShowing, onHide]
+  );
+
+  const onHideSetDateTime = useCallback(() => {
+    onShow();
+    acquireLockShowing();
+    setStateDateTimePicker((state) => ({
+      ...state,
+      isVisible: false,
+    }));
+  }, [setStateDateTimePicker, acquireLockShowing, onShow]);
+
+  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}
+          />
+        ),
+      },
+    ],
+    [
+      t,
+      onShowSetDateTime,
+      recurringTimeStart,
+      recurringTimeEnd,
+      recurringTimeRepeat,
+      temporaryTimeStart,
+      temporaryTimeEnd,
+    ]
+  );
+
+  const resetData = useCallback(() => {
+    setAccessSchedule(data.access_schedule);
+    setRecurringTimeStart(data.recurring_time_start);
+    setRecurringTimeEnd(data.recurring_time_end);
+    setRecurringTimeRepeat(data.recurring_time_repeat);
+    setTemporaryTimeStart(data.temporary_time_start);
+    setTemporaryTimeEnd(data.temporary_time_end);
+  }, [data]);
+
+  const onCancel = useCallback(() => {
+    onHide();
+    resetData();
+  }, [onHide, resetData]);
+
+  const onDone = useCallback(() => {
+    onSetData({
+      access_schedule: accessSchedule,
+      recurring_time_start: recurringTimeStart,
+      recurring_time_end: recurringTimeEnd,
+      recurring_time_repeat: recurringTimeRepeat,
+      temporary_time_start: temporaryTimeStart,
+      temporary_time_end: temporaryTimeEnd,
+    });
+    onHide();
+  }, [
+    accessSchedule,
+    recurringTimeStart,
+    recurringTimeEnd,
+    recurringTimeRepeat,
+    temporaryTimeStart,
+    temporaryTimeEnd,
+    onHide,
+    onSetData,
+  ]);
+
+  return (
+    <>
+      <BottomSheet
+        isVisible={isVisible && lockShowing}
+        onBackdropPress={onCancel}
+        onHide={releaseLockShowing}
+        title={t('access_schedule')}
+        testID={TESTID.ACCESS_SCHEDULE_SHEET}
+      >
+        <View>
+          {listAccessSchedule.map((item, index) => (
+            <AccessScheduleItem
+              key={index}
+              item={item}
+              isSelected={item.value === accessSchedule}
+              onSelect={setAccessSchedule}
+            />
+          ))}
+        </View>
+        <ViewButtonBottom
+          leftTitle={t('cancel')}
+          onLeftClick={onCancel}
+          rightTitle={t('done')}
+          onRightClick={onDone}
+          testIDPrefix={TESTID.ACCESS_SCHEDULE_SHEET}
+        />
+      </BottomSheet>
+      <WheelDateTimePicker
+        mode={stateDateTimePicker.mode}
+        isVisible={stateDateTimePicker.isVisible && lockShowing}
+        defaultValue={stateDateTimePicker.defaultValue}
+        onPicked={onDateTimePicked}
+        onCancel={onHideSetDateTime}
+        onHide={releaseLockShowing}
+      />
+    </>
+  );
+};
+
+export default AccessScheduleSheet;

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { View, TouchableOpacity, Image } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import Text from '../../../commons/Text';
+import { Images, Colors } from '../../../configs';
+import { TESTID } from '../../../configs/Constants';
+import styles from '../styles/HeaderGuestInfoStyles';
+
+const HeaderGuestInfo = ({ onSave }) => {
+  const t = useTranslations();
+  const { goBack } = useNavigation();
+  return (
+    <View style={styles.wrap}>
+      <TouchableOpacity style={styles.button} onPress={goBack}>
+        <Image source={Images.arrowBack} style={styles.icon} />
+      </TouchableOpacity>
+      <View style={styles.wrapTitle}>
+        <Text type="H4" bold>
+          {t('guest_info')}
+        </Text>
+      </View>
+      <TouchableOpacity
+        style={styles.button}
+        onPress={onSave}
+        testID={TESTID.SAVE_ACCESS_SCHEDULE}
+      >
+        <Text type="H4" color={Colors.Primary}>
+          {t('save')}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default HeaderGuestInfo;

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

@@ -0,0 +1,106 @@
+import React, { useCallback } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+import Text from '../../../commons/Text';
+import { Colors } from '../../../configs';
+import { REPEAT_ITEMS } from '../constant';
+import styles from '../styles/AccessScheduleDetailStyles';
+import { TESTID } from '../../../configs/Constants';
+
+const RecurringDetail = ({
+  onShowSetDateTime,
+  recurringTimeStart,
+  recurringTimeEnd,
+  recurringTimeRepeat,
+  setRecurringTimeStart,
+  setRecurringTimeEnd,
+  setRecurringTimeRepeat,
+}) => {
+  const t = useTranslations();
+  const onSetTimeStart = useCallback(() => {
+    onShowSetDateTime(recurringTimeStart, setRecurringTimeStart, 'time');
+  }, [onShowSetDateTime, recurringTimeStart, setRecurringTimeStart]);
+
+  const onSetTimeEnd = useCallback(() => {
+    onShowSetDateTime(recurringTimeEnd, setRecurringTimeEnd, 'time');
+  }, [onShowSetDateTime, recurringTimeEnd, setRecurringTimeEnd]);
+
+  const onSetRepeat = useCallback(
+    (item) => {
+      const index = recurringTimeRepeat.indexOf(item.value);
+      if (index !== -1) {
+        setRecurringTimeRepeat([
+          ...recurringTimeRepeat.slice(0, index),
+          ...recurringTimeRepeat.slice(index + 1),
+        ]);
+      } else {
+        setRecurringTimeRepeat([...recurringTimeRepeat, item.value]);
+      }
+    },
+    [recurringTimeRepeat, setRecurringTimeRepeat]
+  );
+
+  const renderRepeatItem = useCallback(
+    (item, index, isSelected) => {
+      return (
+        <TouchableOpacity
+          key={index}
+          style={[styles.repeatItem, isSelected && styles.repeatItemSelected]}
+          onPress={() => onSetRepeat(item)}
+        >
+          <Text
+            type="Body"
+            lineHeight={16}
+            color={isSelected ? Colors.Orange : item.color}
+            style={styles.repeatText}
+          >
+            {item.text}
+          </Text>
+        </TouchableOpacity>
+      );
+    },
+    [onSetRepeat]
+  );
+
+  return (
+    <View>
+      <Text type="Body" color={Colors.Gray8} style={styles.title}>
+        {t('start')}
+      </Text>
+      <TouchableOpacity
+        onPress={onSetTimeStart}
+        testID={TESTID.RECURRING_TEXT_BUTTON}
+      >
+        <Text type="Body" color={Colors.Orange} style={styles.value}>
+          {recurringTimeStart.format('HH:mm')}
+        </Text>
+      </TouchableOpacity>
+      <Text type="Body" color={Colors.Gray8} style={styles.title}>
+        {t('end')}
+      </Text>
+      <TouchableOpacity
+        onPress={onSetTimeEnd}
+        testID={TESTID.RECURRING_TEXT_BUTTON}
+      >
+        <Text type="Body" color={Colors.Orange} style={styles.value}>
+          {recurringTimeEnd.format('HH:mm')}
+        </Text>
+      </TouchableOpacity>
+      <Text type="Body" color={Colors.Gray8} style={styles.title}>
+        {t('repeat')}
+      </Text>
+      <View style={styles.repeatWrap}>
+        {REPEAT_ITEMS.map((item, index) =>
+          renderRepeatItem(
+            item,
+            index,
+            recurringTimeRepeat.includes(item.value)
+          )
+        )}
+      </View>
+    </View>
+  );
+};
+
+export default RecurringDetail;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { IconOutline } from '@ant-design/icons-react-native';
+import Text from '../../../commons/Text';
+import styles from '../styles/indexStyles';
+
+const RowGuestInfo = ({
+  textLeft,
+  textRight,
+  rightArrow = false,
+  onPress = () => {},
+}) => {
+  return (
+    <TouchableOpacity onPress={onPress}>
+      <View style={styles.row}>
+        <Text type="H4" bold>
+          {textLeft}
+        </Text>
+        <View style={styles.rowRight}>
+          <Text type="Body">{textRight}</Text>
+          {rightArrow && (
+            <IconOutline name="right" size={20} style={styles.icon} />
+          )}
+        </View>
+      </View>
+      <View style={styles.separator} />
+    </TouchableOpacity>
+  );
+};
+
+export default RowGuestInfo;

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

@@ -0,0 +1,53 @@
+import React, { useCallback } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import Text from '../../../commons/Text';
+import { Colors } from '../../../configs';
+import styles from '../styles/AccessScheduleDetailStyles';
+import { TESTID } from '../../../configs/Constants';
+
+const TemporaryDetail = ({
+  onShowSetDateTime,
+  temporaryTimeStart,
+  temporaryTimeEnd,
+  setTemporaryTimeStart,
+  setTemporaryTimeEnd,
+}) => {
+  const t = useTranslations();
+  const onSetTimeStart = useCallback(() => {
+    onShowSetDateTime(temporaryTimeStart, setTemporaryTimeStart, 'datetime');
+  }, [onShowSetDateTime, temporaryTimeStart, setTemporaryTimeStart]);
+
+  const onSetTimeEnd = useCallback(() => {
+    onShowSetDateTime(temporaryTimeEnd, setTemporaryTimeEnd, 'datetime');
+  }, [onShowSetDateTime, temporaryTimeEnd, setTemporaryTimeEnd]);
+
+  return (
+    <View>
+      <Text type="Body" color={Colors.Gray8} style={styles.title}>
+        {t('start')}
+      </Text>
+      <TouchableOpacity
+        onPress={onSetTimeStart}
+        testID={TESTID.TEMPORARY_TEXT_BUTTON}
+      >
+        <Text type="Body" color={Colors.Orange} style={styles.value}>
+          {temporaryTimeStart.format('hh:mm A DD/MM/YYYY')}
+        </Text>
+      </TouchableOpacity>
+      <Text type="Body" color={Colors.Gray8} style={styles.title}>
+        {t('end')}
+      </Text>
+      <TouchableOpacity
+        onPress={onSetTimeEnd}
+        testID={TESTID.TEMPORARY_TEXT_BUTTON}
+      >
+        <Text type="Body" color={Colors.Orange} style={styles.value}>
+          {temporaryTimeEnd.format('hh:mm A DD/MM/YYYY')}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default TemporaryDetail;

package/src/screens/GuestInfo/constant.js

@@ -0,0 +1,59 @@
+import moment from 'moment';
+import { Colors } from '../../configs';
+
+export const ACCESS_SCHEDULE = {
+  ALWAYS: 'always',
+  RECURRING: 'recurring',
+  TEMPORARY: 'temporary',
+};
+
+export const ACCESS_SCHEDULE_PROPERTIES = {
+  [ACCESS_SCHEDULE.ALWAYS]: ['access_schedule'],
+  [ACCESS_SCHEDULE.RECURRING]: [
+    'access_schedule',
+    'recurring_time_start',
+    'recurring_time_end',
+    'recurring_time_repeat',
+  ],
+  [ACCESS_SCHEDULE.TEMPORARY]: [
+    'access_schedule',
+    'temporary_time_start',
+    'temporary_time_end',
+  ],
+};
+
+export const typeMaps = {
+  recurring_time_start: 'time',
+  recurring_time_end: 'time',
+  recurring_time_repeat: 'array',
+  temporary_time_start: 'datetime',
+  temporary_time_end: 'datetime',
+};
+
+export const formatterMaps = {
+  time: (value) => moment(`2020-01-01T${value}`),
+  datetime: (value) => moment(value),
+  array: (value) => value,
+};
+
+export const formatterForUpdateMaps = {
+  time: (value) => moment(value).format('HH:mm:ss'),
+  datetime: (value) => moment(value).utc().format('YYYY-MM-DD HH:mm:ss'),
+  array: (value) => value,
+};
+
+export const getDefaultValueMaps = {
+  time: () => moment().hour(0).minute(0).second(0),
+  datetime: () => moment().hour(0).minute(0).second(0),
+  array: () => [],
+};
+
+export const REPEAT_ITEMS = [
+  { value: '6', text: 'S', color: Colors.Red6 },
+  { value: '0', text: 'M', color: Colors.Gray8 },
+  { value: '1', text: 'T', color: Colors.Gray8 },
+  { value: '2', text: 'W', color: Colors.Gray8 },
+  { value: '3', text: 'T', color: Colors.Gray8 },
+  { value: '4', text: 'F', color: Colors.Gray8 },
+  { value: '5', text: 'S', color: Colors.Gray8 },
+];