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

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

@@ -0,0 +1,57 @@
+import React, { memo, useCallback, useState } from 'react';
+import { SafeAreaView, View } from 'react-native';
+import Slider from 'react-native-slider';
+import Text from '../../../Text';
+import { HeaderCustom } from '../../../Header';
+import ButtonWrapper from './ButtonWrapper';
+import { TESTID } from '../../../../configs/Constants';
+import styles from './AutoLockStyles';
+import t from '../../../../hooks/Common/useTranslations';
+import { Colors } from '../../../../configs';
+
+const AutoLock = memo(() => {
+  const [isEnabled, setIsEnabled] = useState(false);
+
+  const handleToggleSwitch = useCallback(() => {
+    setIsEnabled((previousState) => !previousState);
+  }, []);
+  return (
+    <SafeAreaView style={styles.container}>
+      <HeaderCustom title={t('auto_lock')} isShowSeparator />
+      <View style={styles.wrap}>
+        <Text style={styles.textAutoLock}>{t('auto_lock')}</Text>
+        <Text style={styles.textYourDoor}>{t('your_door_will_lock')}</Text>
+        <ButtonWrapper
+          isButtonEnable
+          toggleSwitch={handleToggleSwitch}
+          isEnabled={isEnabled}
+          testID={TESTID.AUTO_LOCK_BUTTON_ENABLE}
+        />
+        <ButtonWrapper
+          isButtonInstant
+          testID={TESTID.AUTO_LOCK_BUTTON_INSTANT}
+        />
+        <ButtonWrapper
+          isButtonReLockTiming
+          isEnabled={isEnabled}
+          testID={TESTID.AUTO_LOCK_BUTTON_RELOCK_TIMING}
+        />
+        <View style={styles.slider}>
+          <Slider
+            step={1}
+            minimumValue={0}
+            maximumValue={100}
+            thumbTintColor={Colors.Gray3}
+            minimumTrackTintColor={isEnabled ? Colors.Primary : Colors.Gray6}
+            maximumTrackTintColor={Colors.Gray3}
+            trackStyle={styles.trackSlider}
+            thumbStyle={styles.thumbSlider}
+          />
+        </View>
+        <Text style={styles.textReLock}>{t('re_lock_will_lock')}</Text>
+      </View>
+    </SafeAreaView>
+  );
+});
+
+export default AutoLock;

package/src/commons/ActionGroup/{OnOffSmartLock.js → OnOffSmartLock/OnOffSmartLock.js}

@@ -1,11 +1,11 @@
 import React, { memo, useCallback, useState } from 'react';
 import { SafeAreaView, TouchableOpacity, View } from 'react-native';
-import { useTranslations } from '../../hooks/Common/useTranslations';
-import { Section } from '../Section';
-import Text from '../Text';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { Section } from '../../Section';
+import Text from '../../Text';
 import styles from './OnOffSmartLockStyle';
-import ButtonLock from '../../../assets/images/Device/button-lock.svg';
-import ButtonUnLock from '../../../assets/images/Device/button-unlock.svg';
+import ButtonLock from '../../../../assets/images/Device/button-lock.svg';
+import ButtonUnLock from '../../../../assets/images/Device/button-unlock.svg';
 
 const OnOffSmartLock = memo(({ actionGroup, doAction, sensor }) => {
   const t = useTranslations();

package/src/commons/ActionGroup/{OnOffSmartLockStyle.js → OnOffSmartLock/OnOffSmartLockStyle.js}

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { Colors } from '../../configs';
+import { Colors } from '../../../configs';
 
 export default StyleSheet.create({
   container: {

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

@@ -0,0 +1,48 @@
+import React, { memo } from 'react';
+import { SafeAreaView, View, TouchableOpacity } from 'react-native';
+
+import Text from '../../../Text';
+import { HeaderCustom } from '../../../Header';
+import t from '../../../../hooks/Common/useTranslations';
+import { Colors } from '../../../../configs';
+import styles from './ItemPasscodeStyles';
+
+const ButtonWrapper = ({ item, textHeadline }) => {
+  return (
+    <View style={styles.wrap}>
+      <View style={styles.buttonWrap}>
+        <Text style={styles.textHeadline}>{textHeadline}</Text>
+        <Text style={styles.textEndline}>{item}</Text>
+      </View>
+    </View>
+  );
+};
+
+const ItemPasscode = memo(({ route }) => {
+  const { item } = route.params;
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <HeaderCustom isShowSeparator title={item.code} />
+      <ButtonWrapper textHeadline={t('code')} item={item.code} />
+      <ButtonWrapper textHeadline={t('user')} item={item.name} />
+      <ButtonWrapper
+        textHeadline={t('create_time')}
+        item={'29/1/2022 12:00:22'}
+      />
+      <ButtonWrapper textHeadline={t('status')} item={'Active'} />
+      <TouchableOpacity style={styles.removeButton}>
+        <Text
+          type={'H4'}
+          semibold
+          color={Colors.Red}
+          style={styles.removeBorderBottom}
+        >
+          {t('delete_passcode')}
+        </Text>
+      </TouchableOpacity>
+    </SafeAreaView>
+  );
+});
+
+export default ItemPasscode;

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

@@ -0,0 +1,42 @@
+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,
+  },
+  wrap: {
+    marginHorizontal: 16,
+  },
+  buttonWrap: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: 26,
+    paddingBottom: 16,
+    borderBottomWidth: 1,
+    borderColor: Colors.Gray3,
+  },
+  textHeadline: {
+    fontSize: 14,
+    color: Colors.Gray7,
+  },
+  textEndline: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: Colors.Gray9,
+  },
+  removeButton: {
+    position: 'absolute',
+    bottom: 0,
+    borderWidth: 0,
+    alignSelf: 'center',
+    paddingBottom: 16 + getBottomSpace(),
+  },
+  removeBorderBottom: {
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.Red,
+  },
+});

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

@@ -0,0 +1,49 @@
+import { Colors, Theme } from '../../../../configs';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  wrap: {
+    marginHorizontal: 16,
+  },
+  searchBox: {
+    ...Theme.flexRow,
+    paddingHorizontal: 16,
+    backgroundColor: Colors.Gray2,
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    borderRadius: 30,
+    marginTop: 8,
+    height: 48,
+    marginBottom: 22,
+  },
+  search: {
+    marginHorizontal: 10,
+    color: Colors.Gray6,
+  },
+  textSearchInput: {
+    fontSize: 14,
+    width: '90%',
+  },
+  buttonWrapper: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingBottom: 16,
+    marginBottom: 16,
+    borderBottomWidth: 1,
+    borderColor: Colors.Gray3,
+  },
+  textCode: {
+    fontSize: 14,
+    color: Colors.Gray9,
+    fontWeight: 'bold',
+  },
+  textName: {
+    fontSize: 14,
+    color: Colors.Gray8,
+  },
+});

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();
+  });
+});