@eohjsc/react-native-smart-city 0.2.86 → 0.2.87

package/src/commons/ActionGroup/OnOffSmartLock/PasscodeList/index.js

@@ -0,0 +1,66 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import { SafeAreaView, TextInput, View, TouchableOpacity } from 'react-native';
+import { IconOutline } from '@ant-design/icons-react-native';
+import { useNavigation } from '@react-navigation/native';
+
+import Text from '../../../Text';
+import { HeaderCustom } from '../../../Header';
+import t from '../../../../hooks/Common/useTranslations';
+import { Colors } from '../../../../configs';
+import Routes from '../../../../utils/Route';
+import styles from './PasscodeListStyles';
+
+const PasscodeList = memo(() => {
+  const navigation = useNavigation();
+  const dataPasscodeList = useMemo(
+    () => [
+      { code: 123361, name: 'Do Loi' },
+      { code: 128232, name: 'Phuong Nam' },
+      { code: 123651, name: 'Jhonny Tam' },
+    ],
+    []
+  );
+
+  const handleClickButton = useCallback(
+    (item) => () => {
+      navigation.navigate(Routes.SmartLockStack, {
+        screen: Routes.ItemPasscode,
+        params: {
+          item,
+        },
+      });
+    },
+    [navigation]
+  );
+  return (
+    <SafeAreaView style={styles.container}>
+      <HeaderCustom title={t('passcode_list')} />
+      <View style={styles.wrap}>
+        <View style={styles.searchBox}>
+          <View>
+            <IconOutline name="search" size={24} style={styles.search} />
+          </View>
+          <TextInput
+            placeholder={t('search')}
+            placeholderTextColor={Colors.Gray8}
+            style={styles.textSearchInput}
+          />
+        </View>
+        {dataPasscodeList.map((item) => (
+          <TouchableOpacity
+            onPress={handleClickButton(item)}
+            style={styles.buttonWrapper}
+          >
+            <View>
+              <Text style={styles.textCode}>{item.code}</Text>
+              <Text style={styles.textName}>{item.name}</Text>
+            </View>
+            <IconOutline name="right" size={20} color={Colors.Gray8} />
+          </TouchableOpacity>
+        ))}
+      </View>
+    </SafeAreaView>
+  );
+});
+
+export default PasscodeList;

package/src/commons/ActionGroup/OnOffSmartLock/SetupGeneratePasscode/ButtonWrapper.js

@@ -0,0 +1,96 @@
+import React, { memo } from 'react';
+import { IconOutline } from '@ant-design/icons-react-native';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+import { RadioCircle } from '../../..';
+import { Colors } from '../../../../configs';
+import styles from './SetupGeneratePasscodeStyles';
+
+const ButtonWrapper = memo(
+  ({
+    testID,
+    textHeadline,
+    textMinutes,
+    value,
+    isButtonChooseUser,
+    isButtonSetTime,
+    valueTime,
+    isButtonDuration,
+    onPressSetTime,
+    onPressSetMinute,
+    valueMinute,
+    isSelectCircle,
+    onPressSelectCircle,
+  }) => {
+    const textMinutesCapitalized =
+      textMinutes?.charAt(0).toUpperCase() + textMinutes?.slice(1);
+    const boxNotSelect = { ...styles.boxSetTime, ...styles.boxSetTimeDuration };
+    return (
+      <View
+        testID={testID}
+        style={
+          !isButtonDuration
+            ? styles.buttonWrapper
+            : { ...styles.buttonWrapper, ...styles.rowWrapperSchedule }
+        }
+      >
+        {!isButtonDuration ? (
+          <Text style={styles.textHeadLine}>{textHeadline}</Text>
+        ) : (
+          <TouchableOpacity
+            onPress={onPressSelectCircle}
+            style={styles.wrapDuration}
+          >
+            <View style={styles.circleDuration}>
+              <RadioCircle active={isSelectCircle} />
+            </View>
+            <Text style={styles.textDuration}>{textHeadline}</Text>
+          </TouchableOpacity>
+        )}
+        {isButtonChooseUser && (
+          <TouchableOpacity style={styles.buttonValue}>
+            <Text style={styles.value}>{value}</Text>
+            <IconOutline name="right" size={20} color={Colors.Gray8} />
+          </TouchableOpacity>
+        )}
+        {isButtonSetTime && (
+          <TouchableOpacity onPress={onPressSetTime} style={styles.boxSetTime}>
+            <Text style={styles.textBoxSetTime}>{valueTime}</Text>
+          </TouchableOpacity>
+        )}
+        {isButtonDuration && (
+          <View style={styles.wrapDuration}>
+            <TouchableOpacity
+              disabled={!isSelectCircle}
+              onPress={onPressSetMinute}
+              style={isSelectCircle ? styles.boxSetTime : boxNotSelect}
+            >
+              <Text
+                style={
+                  isSelectCircle
+                    ? styles.textDurationNotSelect
+                    : styles.textTimeDuration
+                }
+              >
+                {valueMinute}
+              </Text>
+            </TouchableOpacity>
+            <View style={isSelectCircle ? styles.boxSetTime : boxNotSelect}>
+              <Text
+                style={
+                  isSelectCircle
+                    ? styles.textDurationNotSelect
+                    : styles.textTimeDuration
+                }
+              >
+                {textMinutesCapitalized}
+              </Text>
+            </View>
+          </View>
+        )}
+      </View>
+    );
+  }
+);
+
+export default ButtonWrapper;

package/src/commons/ActionGroup/OnOffSmartLock/SetupGeneratePasscode/SetupGeneratePasscodeStyles.js

@@ -0,0 +1,98 @@
+import { Colors } from '../../../../configs';
+import { StyleSheet } from 'react-native';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  scrollview: {
+    flex: 1,
+    marginHorizontal: 16,
+  },
+  buttonWrapper: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderBottomWidth: 0.5,
+    borderBottomColor: Colors.Gray3,
+    paddingTop: 24,
+    paddingBottom: 24,
+  },
+  rowWrapperSchedule: {
+    borderBottomWidth: 0,
+  },
+  buttonValue: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+  value: {
+    marginRight: 20,
+    fontSize: 14,
+    color: Colors.Gray8,
+  },
+  textHeadLine: {
+    fontSize: 16,
+    color: Colors.Gray9,
+    fontWeight: 'bold',
+  },
+  textDuration: {
+    fontSize: 16,
+    color: Colors.Gray9,
+    marginLeft: 7,
+  },
+  boxSetTime: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 36,
+    width: 78,
+    borderRadius: 5,
+    borderWidth: 1,
+    borderColor: Colors.Green7,
+    marginLeft: 3,
+  },
+  boxSetTimeDuration: {
+    borderColor: Colors.Gray6,
+  },
+  textBoxSetTime: {
+    fontSize: 18,
+    color: Colors.Green7,
+    fontWeight: '500',
+  },
+  textTimeDuration: {
+    fontSize: 18,
+    color: Colors.Gray6,
+    fontWeight: '500',
+  },
+  textDurationNotSelect: {
+    fontSize: 18,
+    color: Colors.Primary,
+    fontWeight: '500',
+  },
+  circleDuration: {
+    marginTop: 6,
+  },
+  wrapDuration: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignSelf: 'center',
+  },
+  wrap: {
+    paddingBottom: 100,
+  },
+  viewBottomFixed: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    paddingBottom: getBottomSpace() > 0 ? getBottomSpace() : 32,
+    paddingTop: 29,
+    backgroundColor: Colors.White,
+    borderColor: Colors.ShadownTransparent,
+    borderTopWidth: 1,
+  },
+});

package/src/commons/ActionGroup/OnOffSmartLock/SetupGeneratePasscode/__test__/index.test.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+
+import SetupGeneratePasscode from '../index';
+import { mockSCStore } from '../../../../../context/mockStore';
+import { TESTID } from '../../../../../configs/Constants';
+import { SCProvider } from '../../../../../context';
+
+const mockNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useRoute: jest.fn(),
+    useNavigation: () => ({
+      navigate: mockNavigate,
+    }),
+  };
+});
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <SetupGeneratePasscode />
+  </SCProvider>
+);
+
+describe('Test SetupGeneratePasscode', () => {
+  let tree;
+
+  beforeEach(() => {
+    mockNavigate.mockClear();
+  });
+
+  const getElement = (instance) => {
+    const changeName = instance.findAll(
+      (item) => item.props.testID === TESTID.GENERATE_PASSCODE_CHOOSE_USER
+    );
+    const changeTime = instance.findAll(
+      (item) => item.props.testID === TESTID.GENERATE_PASSCODE_SET_TIME
+    );
+    const changeDuration = instance.findAll(
+      (item) => item.props.testID === TESTID.GENERATE_PASSCODE_SET_DURATION
+    );
+    return {
+      changeName,
+      changeTime,
+      changeDuration,
+    };
+  };
+
+  test('render SetupGeneratePasscode', async () => {
+    await act(async () => {
+      tree = create(wrapComponent());
+    });
+
+    const instance = tree.root;
+    const { changeName, changeTime, changeDuration } = getElement(instance);
+
+    expect(changeName[0]).toBeDefined();
+    expect(changeTime[0]).toBeDefined();
+    expect(changeDuration[0]).toBeDefined();
+  });
+});

package/src/commons/ActionGroup/OnOffSmartLock/SetupGeneratePasscode/index.js

@@ -0,0 +1,249 @@
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import { SafeAreaView, View, ScrollView } from 'react-native';
+import { useTranslations } from '../../../../hooks/Common/useTranslations';
+
+import Text from '../../../Text';
+import { HeaderCustom } from '../../../Header';
+import { useBoolean } from '../../../../hooks/Common';
+import WheelDateTimePicker from '../../../WheelDateTimePicker';
+import RecurringDetail from '../../../../screens/GuestInfo/components/RecurringDetail';
+import TemporaryDetail from '../../../../screens/GuestInfo/components/TemporaryDetail';
+import AccessScheduleItem from '../../../../screens/GuestInfo/components/AccessScheduleItem';
+import BottomButtonView from '../../../BottomButtonView';
+import { ACCESS_SCHEDULE } from '../../../../screens/GuestInfo/constant';
+import { TESTID } from '../../../../configs/Constants';
+import ButtonWrapper from './ButtonWrapper';
+import moment from 'moment';
+import styles from './SetupGeneratePasscodeStyles';
+
+const SetupGeneratePasscode = memo(() => {
+  const t = useTranslations();
+  const [accessSchedule, setAccessSchedule] = useState('always');
+  const [isSelectCircle, setIsSelectCircle] = useState(false);
+  const [showTimePicker, setShowTimePicker, setHideTimePicker] = useBoolean();
+  const [
+    showTimePickerMinute,
+    setShowTimePickerMinute,
+    setHideTimePickerMinute,
+  ] = useBoolean();
+  const [lockShowing, releaseLockShowing, acquireLockShowing] =
+    useBoolean(true);
+
+  const [stateDateTimePicker, setStateDateTimePicker] = useState({
+    isVisible: false,
+    mode: 'time',
+    defaultValue: moment().valueOf(),
+    setter: null,
+  });
+  const [recurringTimeStart, setRecurringTimeStart] = useState(
+    '2022-03-08T17:00:00.551Z'
+  );
+  const [recurringTimeEnd, setRecurringTimeEnd] = useState(
+    '2022-03-08T17:00:00.902Z'
+  );
+  const [recurringTimeRepeat, setRecurringTimeRepeat] = useState(
+    '2022-03-08T17:00:00.902Z'
+  );
+  const [temporaryTimeStart, setTemporaryTimeStart] = useState(
+    '2022-03-08T17:00:00.902Z'
+  );
+  const [temporaryTimeEnd, setTemporaryTimeEnd] = useState(
+    '2022-03-08T17:00:00.902Z'
+  );
+
+  const [time, setTime] = useState(
+    '22-10-2019'.time_repeat
+      ? moment(22 - 10 - 2019, 'HH:mm:ss')
+      : moment().second(0)
+  );
+
+  const [minute, setMinute] = useState(0);
+
+  const onTimePicked = useCallback(
+    (timeData) => {
+      setTime(moment(timeData));
+    },
+    [setTime]
+  );
+
+  const onMinutePicked = useCallback((timeData) => {
+    const date = new Date(moment(timeData));
+    const minutes = date.getMinutes();
+    setMinute(minutes);
+  }, []);
+
+  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}
+          />
+        ),
+      },
+    ],
+    [
+      onShowSetDateTime,
+      recurringTimeEnd,
+      recurringTimeRepeat,
+      recurringTimeStart,
+      t,
+      temporaryTimeEnd,
+      temporaryTimeStart,
+    ]
+  );
+
+  const handleSetTime = useCallback(() => {
+    setShowTimePicker();
+    setStateDateTimePicker((state) => ({
+      ...state,
+      mode: 'time',
+    }));
+  }, [setShowTimePicker]);
+
+  const handleSetMinute = useCallback(() => {
+    setShowTimePickerMinute();
+    setStateDateTimePicker((state) => ({
+      ...state,
+      mode: 'minute',
+    }));
+  }, [setShowTimePickerMinute]);
+
+  const handleSelectCircle = useCallback(() => {
+    setIsSelectCircle(!isSelectCircle);
+  }, [isSelectCircle]);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <HeaderCustom
+        title={t('setup_generate_passcode')}
+        titleStyle={styles.title}
+        isShowSeparator
+      />
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        showsHorizontalScrollIndicator={false}
+        style={styles.scrollview}
+      >
+        <View style={styles.wrap}>
+          <ButtonWrapper
+            textHeadline={t('choose_user')}
+            value={'Name'}
+            isButtonChooseUser
+            testID={TESTID.GENERATE_PASSCODE_CHOOSE_USER}
+          />
+          <ButtonWrapper
+            textHeadline={t('set_time')}
+            valueTime={time.format('HH:mm')}
+            onPressSetTime={handleSetTime}
+            isButtonSetTime
+            testID={TESTID.GENERATE_PASSCODE_SET_TIME}
+          />
+          <ButtonWrapper
+            textHeadline={t('duration')}
+            textMinutes={t('minutes')}
+            valueMinute={minute}
+            onPressSetMinute={handleSetMinute}
+            onPressSelectCircle={handleSelectCircle}
+            isButtonDuration
+            isSelectCircle={isSelectCircle}
+            testID={TESTID.GENERATE_PASSCODE_SET_DURATION}
+          />
+          <View>
+            <Text style={styles.textHeadLine}>{t('access_schedule')}</Text>
+            {listAccessSchedule.map((item, index) => (
+              <AccessScheduleItem
+                key={index}
+                item={item}
+                isSelected={item.value === accessSchedule}
+                onSelect={setAccessSchedule}
+                isSetupGeneratePasscode
+              />
+            ))}
+          </View>
+        </View>
+      </ScrollView>
+      <WheelDateTimePicker
+        mode={stateDateTimePicker.mode}
+        isVisible={showTimePicker}
+        defaultValue={time.valueOf()}
+        onCancel={setHideTimePicker}
+        onPicked={onTimePicked}
+      />
+      <WheelDateTimePicker
+        mode={stateDateTimePicker.mode}
+        isVisible={showTimePickerMinute}
+        defaultValue={minute.valueOf()}
+        onCancel={setHideTimePickerMinute}
+        onPicked={onMinutePicked}
+      />
+      <WheelDateTimePicker
+        mode={stateDateTimePicker.mode}
+        isVisible={stateDateTimePicker.isVisible && lockShowing}
+        defaultValue={stateDateTimePicker.defaultValue}
+        onPicked={onDateTimePicked}
+        onCancel={onHideSetDateTime}
+        onHide={releaseLockShowing}
+      />
+      <BottomButtonView style={styles.viewBottomFixed} mainTitle={t('done')} />
+    </SafeAreaView>
+  );
+});
+
+export default SetupGeneratePasscode;

package/src/commons/ActionGroup/OnOffTemplate/index.js

@@ -34,14 +34,16 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
     }
     if (action_on_data && action_off_data) {
       if (isOn) {
-        const actionName = `${
+        let actionName = `${
           sensor?.name
         } ${actionGroup?.title?.toLowerCase()} off`;
+        actionName = actionName.replace(/\s+/g, ' ').trim();
         doAction(action_off_data, null, actionName);
       } else {
-        const actionName = `${
+        let actionName = `${
           sensor?.name
         } ${actionGroup?.title?.toLowerCase()} on`;
+        actionName = actionName.replace(/\s+/g, ' ').trim();
         doAction(action_on_data, null, actionName);
       }
     }

package/src/commons/ActionGroup/OptionsDropdownActionTemplate.js

@@ -56,7 +56,8 @@ const OptionsDropdownActionTemplate = ({ actionGroup, doAction, sensor }) => {
   const onDone = useCallback(() => {
     const newOption = options[selectedIndex];
     const value = getOptionValue(newOption);
-    const actionName = `${sensor?.name} ${title?.toLowerCase()} ${value}`;
+    let actionName = `${sensor?.name} ${title?.toLowerCase()} ${value}`;
+    actionName = actionName.replace(/\s+/g, ' ').trim();
     doAction(action_data, value, actionName);
     if (sensor?.is_managed_by_backend) {
       configuration.config && watchMultiConfigs([configuration.config]);