@eohjsc/react-native-smart-city 0.2.45 → 0.2.49

package/src/screens/SetSchedule/index.js

@@ -28,13 +28,27 @@ const getDateString = (date) => {
 
 const SetSchedule = ({ route }) => {
   const t = useTranslations();
-  const { type, unit, isAutomateTab, isMultiUnits, automateId, scriptName } =
-    route.params;
+  const {
+    type,
+    unit,
+    isAutomateTab,
+    isMultiUnits,
+    automateId, // wilk=l remove later
+    automate = {},
+    scriptName,
+  } = route.params;
   const { navigate, dispatch, goBack } = useNavigation();
-  const [repeat, setRepeat] = useState(REPEAT_OPTIONS.ONCE);
-  const [time, setTime] = useState(moment().second(0));
-  const [date, setDate] = useState(moment());
-  const [weekday, setWeekday] = useState([]);
+  const [repeat, setRepeat] = useState(automate.repeat || REPEAT_OPTIONS.ONCE);
+
+  const [time, setTime] = useState(
+    automate.time_repeat
+      ? moment(automate.time_repeat, 'HH:mm:ss')
+      : moment().second(0)
+  );
+  const [date, setDate] = useState(
+    automate.date_repeat ? moment(automate.date_repeat, 'YYYY-MM-DD') : moment()
+  );
+  const [weekday, setWeekday] = useState(automate.weekday_repeat || []);
 
   const [showRepeatOptions, setShowRepeatOptions, setHideRepeatOptions] =
     useBoolean();
@@ -51,6 +65,13 @@ const SetSchedule = ({ route }) => {
         date_repeat: date.format('YYYY-MM-DD'),
         weekday_repeat: weekday,
       },
+      automate: {
+        ...automate,
+        repeat: repeat,
+        time_repeat: time.format('HH:mm:ss'),
+        date_repeat: date.format('YYYY-MM-DD'),
+        weekday_repeat: weekday,
+      },
       isAutomateTab,
       isMultiUnits,
       automateId,
@@ -64,6 +85,7 @@ const SetSchedule = ({ route }) => {
     time,
     date,
     weekday,
+    automate,
     isAutomateTab,
     isMultiUnits,
     automateId,

package/src/screens/Sharing/Components/__test__/TitleCheckBox.test.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { create, act } from 'react-test-renderer';
+
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import TitleCheckBox from '../TitleCheckBox';
+import { CheckBoxCustom } from '..';
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+
+const mockOnPress = jest.fn();
+const wrapComponent = (idGroup, id) => (
+  <SCProvider initState={mockSCStore({})}>
+    <TitleCheckBox idGroup={idGroup} id={id} onPress={mockOnPress} />
+  </SCProvider>
+);
+
+describe('test TitleCheckBox', () => {
+  test('test handleOnPress', () => {
+    let tree;
+    act(() => {
+      tree = create(wrapComponent(1, 2));
+    });
+    const instance = tree.root;
+    const checkBoxCustom = instance.findByType(CheckBoxCustom);
+    act(() => {
+      checkBoxCustom.props.onPress();
+    });
+
+    expect(checkBoxCustom.props.isChecked).toBe(true);
+    expect(mockOnPress).toHaveBeenLastCalledWith(1, true, 2);
+  });
+});

package/src/screens/SubUnit/AddSubUnit.js

@@ -7,6 +7,7 @@ import {
   SafeAreaView,
 } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
+import ImageResizer from 'react-native-image-resizer';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { API, Colors } from '../../configs';
@@ -19,45 +20,103 @@ import { ToastBottomHelper } from '../../utils/Utils';
 import { TESTID } from '../../configs/Constants';
 import styles from './AddSubUnitStyles';
 
+const MAX_FILE_SIZE_BYTES = 1.5 * 1024 * 1024; // 1.5mb
+
+const prepareImageToUpload = async (image) => {
+  if (!image || image.fileSize < MAX_FILE_SIZE_BYTES) {
+    return image;
+  }
+  const result = await ImageResizer.createResizedImage(
+    image.uri,
+    1280,
+    1280,
+    'JPEG',
+    70
+  );
+  return {
+    fileName: result?.name,
+    type: 'image/jpeg',
+    uri: result?.uri,
+  };
+};
+
 const AddSubUnit = ({ route }) => {
   const t = useTranslations();
   const navigation = useNavigation();
-  const { unit, addType } = route.params;
+  const { unit, addType, isAddUnit, location = '' } = route?.params;
   const [roomName, setRoomName] = useState('');
   const [wallpaper, setWallpaper] = useState('');
   const [imageUrl, setImageUrl] = useState('');
   const [showImagePicker, setShowImagePicker] = useState(false);
 
   const goDone = useCallback(async () => {
-    const dataObj = { name: roomName, background: wallpaper };
-    const formData = createFormData(dataObj, ['background']);
-    const { success, data } = await axiosPost(
-      API.SUB_UNIT.CREATE_SUB_UNIT(unit.id),
-      formData,
-      {
-        headers: { 'Content-Type': 'multipart/form-data' },
+    if (isAddUnit) {
+      const dataObj = {
+        name: roomName,
+        address: location,
+        background: wallpaper,
+      };
+      dataObj.background = await prepareImageToUpload(dataObj.background);
+      const formData = createFormData(dataObj, ['background']);
+      const { success, data } = await axiosPost(
+        API.UNIT.CREATE_UNIT(),
+        formData,
+        {
+          headers: { 'Content-Type': 'multipart/form-data' },
+        }
+      );
+      if (success) {
+        navigation.navigate(Routes.UnitStack, {
+          screen: Routes.UnitDetail,
+          params: {
+            unitId: data?.id,
+          },
+        });
+      } else {
+        ToastBottomHelper.error(t('text_create_unit_fail'));
       }
-    );
-    if (success) {
-      ToastBottomHelper.success(t('text_create_sub_unit_success'));
+    } else {
+      const dataObj = { name: roomName, background: wallpaper };
+      dataObj.background = await prepareImageToUpload(dataObj.background);
+      const formData = createFormData(dataObj, ['background']);
+      const { success, data } = await axiosPost(
+        API.SUB_UNIT.CREATE_SUB_UNIT(unit.id),
+        formData,
+        {
+          headers: { 'Content-Type': 'multipart/form-data' },
+        }
+      );
+      if (success) {
+        ToastBottomHelper.success(t('text_create_sub_unit_success'));
 
-      if (addType === 'AddNewGateway') {
-        navigation.navigate(Routes.AddCommonSelectSubUnit, {
-          ...route.params,
+        if (addType === 'AddNewGateway') {
+          navigation.navigate(Routes.AddCommonSelectSubUnit, {
+            ...route.params,
+          });
+          return;
+        }
+        navigation.navigate(Routes.UnitStack, {
+          screen: Routes.SubUnitDetail,
+          params: {
+            unit: unit,
+            station: data,
+          },
         });
-        return;
+      } else {
+        ToastBottomHelper.error(t('text_create_sub_unit_fail'));
       }
-      navigation.navigate(Routes.UnitStack, {
-        screen: Routes.SubUnitDetail,
-        params: {
-          unit: unit,
-          station: data,
-        },
-      });
-    } else {
-      ToastBottomHelper.error(t('text_create_sub_unit_fail'));
     }
-  }, [addType, navigation, roomName, route.params, t, unit, wallpaper]);
+  }, [
+    addType,
+    navigation,
+    roomName,
+    route.params,
+    t,
+    unit,
+    wallpaper,
+    isAddUnit,
+    location,
+  ]);
 
   const onChoosePhoto = useCallback(() => {
     setShowImagePicker(true);
@@ -77,8 +136,16 @@ const AddSubUnit = ({ route }) => {
   );
 
   const validateData = useMemo(() => {
-    return roomName === '' || wallpaper === '';
-  }, [roomName, wallpaper]);
+    if (isAddUnit) {
+      return roomName === '' || wallpaper === '' || location === '';
+    } else {
+      return roomName === '' || wallpaper === '';
+    }
+  }, [roomName, wallpaper, location, isAddUnit]);
+
+  const onChooseLocation = useCallback(() => {
+    navigation.navigate(Routes.AddLocationMaps);
+  }, [navigation]);
 
   return (
     <SafeAreaView style={styles.wrap}>
@@ -90,16 +157,33 @@ const AddSubUnit = ({ route }) => {
               color={Colors.Black}
               style={[styles.title, styles.padding]}
             >
-              {t('add_new_sub_unit')}
+              {isAddUnit ? t('add_new_unit') : t('add_new_sub_unit')}
             </Text>
             <View style={styles.formWrapper}>
               <_TextInput
-                placeholder={t('add_sub_unit_room_name')}
+                placeholder={
+                  isAddUnit ? t('name_your_unit') : t('add_sub_unit_room_name')
+                }
                 onChange={onChangeRoomName}
                 textInputStyle={styles.roomName}
                 wrapStyle={styles.textInput}
                 selectionColor={Colors.Primary}
               />
+
+              {isAddUnit && (
+                <TouchableWithoutFeedback onPress={onChooseLocation}>
+                  <View style={styles.wrapGeolocation}>
+                    <Text style={styles.addWallpaper}>{t('geolocation')}</Text>
+                    <Text
+                      style={styles.textLocation}
+                      color={location && Colors.Primary}
+                    >
+                      {location || t('text_explain_add_geolocation')}
+                    </Text>
+                  </View>
+                </TouchableWithoutFeedback>
+              )}
+
               <TouchableWithoutFeedback
                 testID={TESTID.ADD_SUB_UNIT_BUTTON_CHOOSE_PHOTO}
                 onPress={onChoosePhoto}

package/src/screens/SubUnit/AddSubUnitStyles.js

@@ -65,4 +65,14 @@ export default StyleSheet.create({
     marginRight: 8,
     backgroundColor: Colors.Pink1,
   },
+  wrapGeolocation: {
+    marginTop: 6,
+    borderBottomWidth: 1,
+    borderColor: Colors.Gray4,
+  },
+  textLocation: {
+    fontSize: 16,
+    lineHeight: 24,
+    paddingBottom: 14,
+  },
 });

package/src/screens/SubUnit/__test__/AddSubUnit.test.js

@@ -24,6 +24,7 @@ const mockedGoBack = jest.fn();
 
 jest.mock('axios');
 jest.mock('react-native-toast-message');
+jest.mock('react-native-image-resizer');
 
 jest.mock('react-redux', () => {
   return {

package/src/screens/TDSGuide/index.js

@@ -1,7 +1,6 @@
 import React, { memo } from 'react';
-import { StyleSheet, SafeAreaView } from 'react-native';
+import { StyleSheet, SafeAreaView, ScrollView } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import i18n from 'i18n-js';
 import { TESTID } from '../../configs/Constants';
 
 import { Theme } from '../../configs';
@@ -11,23 +10,22 @@ import useTitleHeader from '../../hooks/Common/useTitleHeader';
 const TDSGuide = memo(() => {
   const t = useTranslations();
   useTitleHeader(t('tds_infomation'));
-  const currentLanguage = i18n.currentLocale();
 
   return (
     <SafeAreaView style={styles.container}>
-      <Text
-        type="H3"
-        semibold
-        style={styles.titlePadding}
-        testID={TESTID.TDS_GUIDE_TITLE}
-      >
-        {t('what_is_tds_title')}
-      </Text>
-      <Text type="Body">{t('what_is_tds_text')}</Text>
-      <Text type="H3" semibold style={styles.titlePadding}>
-        {t('tds_guidlines_title')}
-      </Text>
-      {currentLanguage === 'vi' ? (
+      <ScrollView>
+        <Text
+          type="H3"
+          semibold
+          style={styles.titlePadding}
+          testID={TESTID.TDS_GUIDE_TITLE}
+        >
+          {t('what_is_tds_title')}
+        </Text>
+        <Text type="Body">{t('what_is_tds_text')}</Text>
+        <Text type="H3" semibold style={styles.titlePadding}>
+          {t('tds_guidlines_title')}
+        </Text>
         <>
           <Text type="Body">
             {t('tds_guidlines_text_1')}
@@ -39,9 +37,7 @@ const TDSGuide = memo(() => {
             {t('tds_guidlines_text_3')}
           </Text>
         </>
-      ) : (
-        <Text type="Body">{t('tds_guidlines_text')}</Text>
-      )}
+      </ScrollView>
     </SafeAreaView>
   );
 });

package/src/screens/Unit/MoreMenu.js

@@ -28,8 +28,13 @@ const MoreMenu = memo(
         text: t('members'),
         data: { unitId: unit.id, unit },
       };
+      const ListSmartAccount = {
+        route: Routes.ListSmartAccount,
+        text: t('smart_account'),
+        data: { unitId: unit.id, unit },
+      };
       return isOwner
-        ? [RouteManageUnit, RouteUnitMemberList]
+        ? [RouteManageUnit, RouteUnitMemberList, ListSmartAccount]
         : [RouteUnitMemberList];
     }, [t, unit, isOwner]);
 

package/src/screens/Unit/SelectLocation.js

@@ -8,8 +8,8 @@ import BottomButtonView from '../../commons/BottomButtonView';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { API } from '../../configs';
 import styles from './SelectLocationStyles';
-import SearchBarLocation from './components/SearchLocation';
-import RowLocation from './components/SearchLocation/RowLocation';
+import SearchBarLocation from '../../commons/SearchLocation';
+import RowLocation from '../../commons/SearchLocation/RowLocation';
 import { axiosGet } from '../../utils/Apis/axios';
 import { ScrollView } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
@@ -109,7 +109,6 @@ const SelectLocation = memo(({ route }) => {
     updateLocation(searchedLocation.description);
     goBack();
   }, [goBack, updateLocation, searchedLocation]);
-
   return (
     <View style={styles.wrap}>
       <View style={styles.searchLocation}>

package/src/screens/Unit/SmartAccount.js

@@ -0,0 +1,141 @@
+import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  memo,
+} from 'react';
+import { View } from 'react-native';
+import styles from './SmartAccountStyles';
+import { API, Colors } from '../../configs';
+import Routes from '../../utils/Route';
+import { useNavigation } from '@react-navigation/native';
+import { axiosDelete, axiosGet } from '../../utils/Apis/axios';
+import { SmartAccountItem } from './SmartAccountItem';
+import { usePopover, useBoolean } from '../../hooks/Common';
+import { AlertAction, MenuActionMore } from '../../commons';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { useStateAlertRemove } from '../Unit/hook/useStateAlertRemove';
+
+const ListSmartAccount = ({ route }) => {
+  const { unitId } = route?.params || {};
+  const t = useTranslations();
+  const [data, setData] = useState([]);
+  const smartAccountRef = useRef(null);
+  const { navigate } = useNavigation();
+
+  const getAllSmartAccounts = useCallback(async () => {
+    const { success, data } = await axiosGet(
+      API.SMART_ACCOUNT.LIST_SMART_ACCOUNT()
+    );
+    if (success) {
+      setData(data);
+    }
+  }, []);
+
+  const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
+    usePopover();
+
+  const [lockShowing, acquireLockShowing, releaseLockShowing] = useBoolean();
+  const { stateAlertRemove, onShowRemoveAlert, hideAlertAction } =
+    useStateAlertRemove();
+
+  useEffect(() => {
+    getAllSmartAccounts();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onShowMenuMore = useCallback(
+    (buttonMenuRef, smartAccountItem) => {
+      smartAccountRef.current = smartAccountItem;
+      showPopoverWithRef(buttonMenuRef);
+    },
+    [showPopoverWithRef]
+  );
+
+  const onItemClick = useCallback(
+    (item) => {
+      if (!smartAccountRef?.current) {
+        return;
+      }
+      if (item.action === 'delete') {
+        acquireLockShowing();
+        onShowRemoveAlert(smartAccountRef.current.brand)();
+      }
+    },
+    [acquireLockShowing, onShowRemoveAlert]
+  );
+
+  const deleteSmartAccount = useCallback(async () => {
+    hideAlertAction();
+    if (!smartAccountRef?.current) {
+      return;
+    }
+    const id = smartAccountRef.current.id;
+    const { success } = await axiosDelete(
+      API.SMART_ACCOUNT.REMOVE_SMART_ACCOUNT(id)
+    );
+    success && getAllSmartAccounts();
+  }, [hideAlertAction, getAllSmartAccounts]);
+
+  const listMenuItem = useMemo(() => {
+    return [{ action: 'delete', text: t('delete') }];
+  }, [t]);
+
+  const gotoSmartAccountDetail = useCallback(
+    (item) => {
+      navigate(Routes.ListDeviceSmartAccount, {
+        username: item.username,
+        brand: item.brand,
+        smart_account_id: item.id,
+        unit_id: unitId,
+      });
+    },
+    [navigate, unitId]
+  );
+
+  return (
+    <View style={styles.wrap}>
+      <WrapHeaderScrollable
+        style={{ backgroundColor: Colors.White }}
+        title={t('smart_account')}
+        onRefresh={getAllSmartAccounts}
+        headerAniStyle={styles.headerAniStyle}
+      >
+        <View style={styles.wrapContent}>
+          {data.map((item) => {
+            return (
+              <SmartAccountItem
+                gotoSmartAccountDetail={gotoSmartAccountDetail}
+                item={item}
+                onShowMenuMore={onShowMenuMore}
+              />
+            );
+          })}
+        </View>
+        <AlertAction
+          visible={stateAlertRemove.visible && lockShowing}
+          hideModal={hideAlertAction}
+          title={stateAlertRemove.title}
+          message={stateAlertRemove.message}
+          leftButtonTitle={stateAlertRemove.leftButton}
+          leftButtonClick={hideAlertAction}
+          rightButtonTitle={stateAlertRemove.rightButton}
+          rightButtonClick={deleteSmartAccount}
+        />
+        <MenuActionMore
+          isVisible={showingPopover}
+          hideMore={hidePopover}
+          listMenuItem={listMenuItem}
+          childRef={childRef}
+          onItemClick={onItemClick}
+          onHide={releaseLockShowing}
+        />
+      </WrapHeaderScrollable>
+    </View>
+  );
+};
+
+export default memo(ListSmartAccount);

package/src/screens/Unit/SmartAccountItem.js

@@ -0,0 +1,51 @@
+import FImage from '../../commons/FImage';
+import { TouchableOpacity, View } from 'react-native';
+import React, { memo, useRef } from 'react';
+import styles from './SmartAccountStyles';
+import { Colors } from '../../configs';
+import Text from '../../commons/Text';
+import { Icon } from '@ant-design/react-native';
+import { TESTID } from '../../configs/Constants';
+
+export const SmartAccountItem = memo(
+  ({ item, onShowMenuMore, gotoSmartAccountDetail }) => {
+    const onPressMore = () => {
+      onShowMenuMore(buttonMoreRef, item);
+    };
+
+    const onPressGotoSmartAccountDetail = () => {
+      gotoSmartAccountDetail(item);
+    };
+    const buttonMoreRef = useRef(null);
+
+    return (
+      <View style={styles.wrapItem}>
+        <TouchableOpacity
+          style={styles.wrapText}
+          onPress={onPressGotoSmartAccountDetail}
+        >
+          <FImage
+            source={{ uri: item?.logo }}
+            style={styles.icon}
+            resizeMode={'cover'}
+          />
+          <View style={styles.wrap}>
+            <Text numberOfLines={1} type="H4">
+              {item?.brand}
+            </Text>
+            <Text numberOfLines={2} type="Body" color={Colors.Gray7}>
+              {item?.username}
+            </Text>
+          </View>
+        </TouchableOpacity>
+        <TouchableOpacity
+          testID={TESTID.ITEM_QUICK_ACTION_PRESS}
+          onPress={onPressMore}
+          ref={buttonMoreRef}
+        >
+          <Icon name={'more'} size={27} color={Colors.Black} />
+        </TouchableOpacity>
+      </View>
+    );
+  }
+);

package/src/screens/Unit/SmartAccountStyles.js

@@ -0,0 +1,46 @@
+import { Platform, StyleSheet } from 'react-native';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  headerAniStyle: {
+    borderBottomWidth: 0,
+  },
+  wrapContent: {
+    flex: 1,
+    paddingRight: 48,
+    paddingTop: 32,
+    paddingBottom: Platform.select({
+      ios: getBottomSpace() + 10,
+      android: 120,
+    }),
+  },
+  wrapItem: {
+    marginBottom: 32,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  wrapText: {
+    flexDirection: 'row',
+    alignItems: 'space-arou',
+  },
+  icon: {
+    width: 48,
+    height: 48,
+    borderRadius: 2,
+    marginHorizontal: 16,
+    borderColor: Colors.Gray5,
+    borderWidth: 1,
+  },
+  bottomButtonView: {
+    paddingTop: 24,
+    paddingBottom: 32,
+    backgroundColor: Colors.White,
+    borderColor: Colors.ShadownTransparent,
+    borderTopWidth: 1,
+  },
+});