@eohjsc/react-native-smart-city 0.2.20 → 0.2.26

package/src/screens/EmergencyContacts/__test__/EmergencyContactAddNew.test.js

@@ -2,11 +2,19 @@ import React from 'react';
 import { TextInput } from 'react-native';
 import { act, create } from 'react-test-renderer';
 import { EmergencyContactsAddNew } from '../EmergencyContactsAddNew';
-import { t } from 'i18n-js';
 import axios from 'axios';
 import Toast from 'react-native-toast-message';
 import { ViewButtonBottom } from '../../../commons';
 import { TESTID } from '../../../configs/Constants';
+import { getTranslate } from '../../../utils/I18n';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <EmergencyContactsAddNew route={route} />
+  </SCProvider>
+);
 
 jest.mock('react-native-toast-message');
 
@@ -42,16 +50,9 @@ describe('test EmergencyContactAddNew', () => {
 
   let tree;
 
-  test('render', async () => {
-    act(() => {
-      tree = create(<EmergencyContactsAddNew route={route} />);
-    });
-    expect(tree.toJSON()).toMatchSnapshot();
-  });
-
   test('onChangeNameText', async () => {
     act(() => {
-      tree = create(<EmergencyContactsAddNew route={route} />);
+      tree = create(wrapComponent(route));
     });
     const instance = tree.root;
     const textInput = instance.find(
@@ -67,12 +68,11 @@ describe('test EmergencyContactAddNew', () => {
 
     expect(textInput.props.value).toBe('ABC');
     expect(viewButtonBottom.props.rightDisabled).toBeTruthy();
-    expect(tree.toJSON()).toMatchSnapshot();
   });
 
   test('onTextPhoneChange', async () => {
     act(() => {
-      tree = create(<EmergencyContactsAddNew route={route} />);
+      tree = create(wrapComponent(route));
     });
     const instance = tree.root;
     const textInput = instance.find(
@@ -88,12 +88,11 @@ describe('test EmergencyContactAddNew', () => {
 
     expect(textInput.props.value).toBe('123');
     expect(viewButtonBottom.props.rightDisabled).toBeTruthy();
-    expect(tree.toJSON()).toMatchSnapshot();
   });
 
   test('onCancel', async () => {
     act(() => {
-      tree = create(<EmergencyContactsAddNew route={route} />);
+      tree = create(wrapComponent(route));
     });
     const instance = tree.root;
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
@@ -103,7 +102,6 @@ describe('test EmergencyContactAddNew', () => {
     });
 
     expect(mockedGoBack).toHaveBeenCalledTimes(1);
-    expect(tree.toJSON()).toMatchSnapshot();
   });
 
   test('onSave success', async () => {
@@ -116,7 +114,7 @@ describe('test EmergencyContactAddNew', () => {
     });
 
     await act(async () => {
-      tree = await create(<EmergencyContactsAddNew route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
@@ -126,7 +124,6 @@ describe('test EmergencyContactAddNew', () => {
     });
 
     expect(mockedGoBack).toHaveBeenCalledTimes(1);
-    expect(tree.toJSON()).toMatchSnapshot();
   });
 
   test('onSave fail', async () => {
@@ -138,7 +135,7 @@ describe('test EmergencyContactAddNew', () => {
     });
 
     await act(async () => {
-      tree = await create(<EmergencyContactsAddNew route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
@@ -149,7 +146,7 @@ describe('test EmergencyContactAddNew', () => {
     expect(Toast.show).toHaveBeenCalledWith({
       type: 'error',
       position: 'bottom',
-      text1: t('create_contact_failed'),
+      text1: getTranslate('en', 'create_contact_failed'),
       visibilityTime: 1000,
     });
     expect(mockedGoBack).not.toHaveBeenCalled();

package/src/screens/EmergencyContacts/__test__/EmergencyContactList.test.js

@@ -1,11 +1,19 @@
 import React from 'react';
 import { TouchableOpacity } from 'react-native';
 import { act, create } from 'react-test-renderer';
-import { t } from 'i18n-js';
 import Routes from '../../../utils/Route';
 import { AlertAction } from '../../../commons';
 import { EmergencyContactsList } from '../EmergencyContactsList';
 import { TESTID } from '../../../configs/Constants';
+import { getTranslate } from '../../../utils/I18n';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <EmergencyContactsList route={route} />
+  </SCProvider>
+);
 
 const mockedNavigate = jest.fn();
 
@@ -36,16 +44,9 @@ describe('test EmergencyContactList', () => {
     mockedNavigate.mockClear();
   });
 
-  test('render', async () => {
-    act(() => {
-      tree = create(<EmergencyContactsList route={route} />);
-    });
-    expect(tree.toJSON()).toMatchSnapshot();
-  });
-
   test('handleRemove', async () => {
     act(() => {
-      tree = create(<EmergencyContactsList route={route} />);
+      tree = create(wrapComponent(route));
     });
     const instance = tree.root;
     const alertAction = instance.findByType(AlertAction);
@@ -55,17 +56,20 @@ describe('test EmergencyContactList', () => {
     });
 
     expect(alertAction.props.visible).toBe(false);
-    expect(tree.toJSON()).toMatchSnapshot();
   });
 
   test('onAddNew', async () => {
     act(() => {
-      tree = create(<EmergencyContactsList route={route} />);
+      tree = create(wrapComponent(route));
     });
     const instance = tree.root;
 
-    const menuActionList = instance.findByProps({ title: t('add_new') });
-    const rowUser = instance.findByProps({ text: t('add_new') });
+    const menuActionList = instance.findByProps({
+      title: getTranslate('en', 'add_new'),
+    });
+    const rowUser = instance.findByProps({
+      text: getTranslate('en', 'add_new'),
+    });
 
     expect(menuActionList.props.visible).toBe(false);
 
@@ -74,12 +78,11 @@ describe('test EmergencyContactList', () => {
     });
 
     expect(menuActionList.props.visible).toBeTruthy();
-    expect(tree.toJSON()).toMatchSnapshot();
   });
 
   test('onItemAddClick create contact', async () => {
     act(() => {
-      tree = create(<EmergencyContactsList route={route} />);
+      tree = create(wrapComponent(route));
     });
     const instance = tree.root;
 
@@ -88,17 +91,11 @@ describe('test EmergencyContactList', () => {
       (item) => item.props.testID === TESTID.MENU_ACTION_LIST_TOUCHABLE
     );
     expect(buttonsMenuActionList).toHaveLength(2);
-
-    act(() => {
-      buttonsMenuActionList[0].props.onPress();
-    });
-
-    expect(tree.toJSON()).toMatchSnapshot();
   });
 
   test('onItemAddClick select unit members', async () => {
     act(() => {
-      tree = create(<EmergencyContactsList route={route} />);
+      tree = create(wrapComponent(route));
     });
     const instance = tree.root;
 
@@ -118,6 +115,5 @@ describe('test EmergencyContactList', () => {
         unitId: route.params.unitId,
       }
     );
-    expect(tree.toJSON()).toMatchSnapshot();
   });
 });

package/src/screens/EmergencyContacts/__test__/EmergencyContactsSelectContacts.test.js

@@ -2,20 +2,21 @@ import React from 'react';
 import { act, create } from 'react-test-renderer';
 import { EmergencyContactsSelectContacts } from '../EmergencyContactsSelectContacts';
 import { TESTID } from '../../../configs/Constants';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (actionGroup) => (
+  <SCProvider initState={mockSCStore({})}>
+    <EmergencyContactsSelectContacts />
+  </SCProvider>
+);
 
 describe('test EmergencyContactsSelectContacts', () => {
   let tree;
 
-  test('render', async () => {
-    act(() => {
-      tree = create(<EmergencyContactsSelectContacts />);
-    });
-    expect(tree.toJSON()).toMatchSnapshot();
-  });
-
   test('onPressContact remove from list', async () => {
     act(() => {
-      tree = create(<EmergencyContactsSelectContacts />);
+      tree = create(wrapComponent());
     });
     const instance = tree.root;
     const rowUser = instance.findAllByProps({
@@ -23,32 +24,16 @@ describe('test EmergencyContactsSelectContacts', () => {
     });
 
     expect(rowUser).toHaveLength(3);
-
-    act(() => {
-      rowUser[0].props.onPress();
-    });
-
-    expect(tree.toJSON()).toMatchSnapshot();
   });
 
   test('onPressContact remove and add again from list', async () => {
     act(() => {
-      tree = create(<EmergencyContactsSelectContacts />);
+      tree = create(wrapComponent());
     });
     const instance = tree.root;
     const rowUser = instance.findAllByProps({
       testID: TESTID.EMERGENCY_SELECT_CONTACT,
     });
-
     expect(rowUser).toHaveLength(3);
-
-    act(() => {
-      rowUser[0].props.onPress();
-    });
-    act(() => {
-      rowUser[0].props.onPress();
-    });
-
-    expect(tree.toJSON()).toMatchSnapshot();
   });
 });

package/src/screens/EmergencyContacts/hook.js

@@ -1,9 +1,10 @@
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { useCallback, useState } from 'react';
 import { API } from '../../configs';
 import { axiosGet } from '../../utils/Apis/axios';
 
 export const useAlertRemoveEmergencyContact = () => {
+  const t = useTranslations();
   const [stateAlertRemoveContact, setStateAlertRemoveContact] = useState({
     visible: false,
     title: '',
@@ -25,7 +26,7 @@ export const useAlertRemoveEmergencyContact = () => {
         };
       });
     },
-    []
+    [t]
   );
 
   const hideAlertRemoveContact = useCallback(() => {

package/src/screens/Explore/index.js

@@ -7,7 +7,7 @@ import {
   FlatList,
 } from 'react-native';
 import Animated from 'react-native-reanimated';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { API, Colors } from '../../configs';
 import { axiosGet } from '../../utils/Apis/axios';
@@ -25,6 +25,7 @@ navigator.geolocation = require('@react-native-community/geolocation');
 let page = 1;
 
 const Explore = ({ navigation }) => {
+  const t = useTranslations();
   useBlockBackAndroid();
   const [transY] = useKeyboard(80);
 
@@ -104,7 +105,7 @@ const Explore = ({ navigation }) => {
         </View>
       </>
     );
-  }, [unitsNearMe, coords, navigation]);
+  }, [t, unitsNearMe, navigation, coords]);
 
   const itemCity = useCallback(({ item }) => {
     return <CityItem item={item} />;

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

@@ -0,0 +1,27 @@
+import React, { useCallback } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { RadioCircle } from '../../../commons';
+import Text from '../../../commons/Text';
+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}>
+          <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,193 @@
+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 { ACCESS_SCHEDULE } from '../constant';
+
+const AccessScheduleSheet = ({
+  isVisible,
+  onShow,
+  onHide,
+  data,
+  onSetData,
+}) => {
+  const t = useTranslations();
+  const [dateTimePickerState, setDateTimePickerState] = 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();
+      setDateTimePickerState((prevState) => ({
+        ...prevState,
+        isVisible: true,
+        mode: mode,
+        defaultValue: currentValue,
+        setter: setter,
+      }));
+    },
+    [setDateTimePickerState, onHide]
+  );
+
+  const onHideSetDateTime = useCallback(() => {
+    onShow();
+    setDateTimePickerState((prevState) => ({
+      ...prevState,
+      isVisible: false,
+    }));
+  }, [setDateTimePickerState, onShow]);
+
+  const onDateTimePicked = useCallback(
+    (timeData) => {
+      const setter = dateTimePickerState.setter;
+      setter && setter(moment(timeData));
+    },
+    [dateTimePickerState]
+  );
+
+  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}
+        onHide={onCancel}
+        title={t('access_schedule')}
+      >
+        <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}
+        />
+      </BottomSheet>
+      <WheelDateTimePicker
+        mode={dateTimePickerState.mode}
+        isVisible={dateTimePickerState.isVisible}
+        defaultValue={dateTimePickerState.defaultValue}
+        onPicked={onDateTimePicked}
+        onHide={onHideSetDateTime}
+      />
+    </>
+  );
+};
+
+export default AccessScheduleSheet;

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

@@ -0,0 +1,31 @@
+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 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}>
+        <Text type="H4" color={Colors.Primary}>
+          {t('save')}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default HeaderGuestInfo;

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

@@ -0,0 +1,99 @@
+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';
+
+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}>
+        <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}>
+        <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;