@eohjsc/react-native-smart-city 0.2.96 → 0.2.99

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

@@ -75,7 +75,25 @@ describe('test EmergencyContactsSelectContacts', () => {
   test('test onSave emergencyContactsSelectContacts', async () => {
     const response = {
       status: 200,
-      success: true,
+    };
+    axios.post.mockImplementation(async () => {
+      return response;
+    });
+    act(() => {
+      tree = create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    const viewButtonBottom = instance.findByType(ViewButtonBottom);
+    await act(async () => {
+      viewButtonBottom.props.onRightClick();
+    });
+    expect(axios.post).toHaveBeenCalled();
+  });
+
+  test('test onSave emergencyContactsSelectContacts fail', async () => {
+    const response = {
+      status: 500,
     };
     axios.post.mockImplementation(async () => {
       return response;

package/src/screens/EmergencySetting/index.js

@@ -63,7 +63,10 @@ const EmergencySetting = () => {
     <View style={styles.wrap}>
       <HeaderCustom title={t('setting')} isShowSeparator />
 
-      <ScrollView contentContainerStyle={styles.contentContainerStyle}>
+      <ScrollView
+        contentContainerStyle={styles.contentContainerStyle}
+        scrollIndicatorInsets={{ right: 1 }}
+      >
         {listData.map((item, index) => (
           <DropDownItem
             {...item}

package/src/screens/Explore/index.js

@@ -92,6 +92,7 @@ const Explore = ({ navigation }) => {
             horizontal={true}
             contentContainerStyle={styles.locationContent}
             showsHorizontalScrollIndicator={false}
+            scrollIndicatorInsets={{ right: 1 }}
           >
             {!!unitsNearMe &&
               unitsNearMe.map((item) => (
@@ -134,6 +135,7 @@ const Explore = ({ navigation }) => {
           onEndReachedThreshold={0.01}
           onMomentumScrollBegin={() => setOnEndReached(false)}
           onEndReached={handleEndReachUnitPublic}
+          scrollIndicatorInsets={{ right: 1 }}
         />
       </Animated.View>
     </SafeAreaView>

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

@@ -152,7 +152,7 @@ describe('Test GuestInfo', () => {
     );
     const dateTimePickerDone = getButton(
       instance,
-      `${TESTID.WHEEL_DATE_TIME_PICKER}${TESTID.VIEW_BUTTON_BOTTOM_RIGHT_BUTTON}`
+      `${TESTID.WHEEL_DATE_TIME_PICKER_BUTTON}${TESTID.VIEW_BUTTON_BOTTOM_RIGHT_BUTTON}`
     );
 
     // show AccessScheduleSheet

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

@@ -47,6 +47,7 @@ const RecurringDetail = ({
       return (
         <TouchableOpacity
           key={index}
+          testID={`${index}${TESTID.RECURRING_REPEAT_ITEM}`}
           style={[styles.repeatItem, isSelected && styles.repeatItemSelected]}
           onPress={() => onSetRepeat(item)}
         >

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

@@ -30,7 +30,7 @@ const TemporaryDetail = ({
       </Text>
       <TouchableOpacity
         onPress={onSetTimeStart}
-        testID={TESTID.TEMPORARY_TEXT_BUTTON}
+        testID={TESTID.TEMPORARY_START_TEXT_BUTTON}
       >
         <Text type="Body" color={Colors.Orange} style={styles.value}>
           {moment(temporaryTimeStart).format('hh:mm A DD/MM/YYYY')}
@@ -41,7 +41,7 @@ const TemporaryDetail = ({
       </Text>
       <TouchableOpacity
         onPress={onSetTimeEnd}
-        testID={TESTID.TEMPORARY_TEXT_BUTTON}
+        testID={TESTID.TEMPORARY_END_TEXT_BUTTON}
       >
         <Text type="Body" color={Colors.Orange} style={styles.value}>
           {moment(temporaryTimeEnd).format('hh:mm A DD/MM/YYYY')}

package/src/screens/ManageAccess/index.js

@@ -46,6 +46,7 @@ const ManageAccessScreen = memo(({ route }) => {
         refreshControl={
           <RefreshControl refreshing={false} onRefresh={onRefresh} />
         }
+        scrollIndicatorInsets={{ right: 1 }}
       >
         <View style={styles.container}>
           <Text semibold style={styles.titleGuest}>

package/src/screens/MoveToAnotherSubUnit/index.js

@@ -62,7 +62,7 @@ const MoveToAnotherSubUnit = memo(({ route }) => {
   return (
     <View style={styles.wrap}>
       <HeaderCustom title={t('move_to_another_sub_unit')} isShowSeparator />
-      <ScrollView>
+      <ScrollView scrollIndicatorInsets={{ right: 1 }}>
         <View style={styles.container}>
           <View>
             {listStationUnit.map((item, index) => (

package/src/screens/ScanChipQR/components/QRScan/index.js

@@ -160,6 +160,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     top: getStatusBarHeight(true) + 16,
     left: 16,
+    zIndex: 10,
   },
   viewVerifing: {
     marginLeft: 16,

package/src/screens/ScriptDetail/index.js

@@ -369,10 +369,10 @@ const ScriptDetail = ({ route }) => {
       return `${config_name} ${t(textCondition)} ${value}`;
     } else if (type === AUTOMATE_TYPE.SCHEDULE) {
       const time =
-        time_repeat.length >= 8
-          ? time_repeat.substring(0, time_repeat.length - 3)
+        time_repeat?.length >= 8
+          ? time_repeat.substring(0, time_repeat?.length - 3)
           : time_repeat;
-      const date = date_repeat.split('-').reverse().join('/');
+      const date = date_repeat?.split('-').reverse().join('/');
       const weekday = {
         1: t('mon'),
         2: t('tue'),

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

@@ -235,7 +235,7 @@ describe('Test Select unit screen', () => {
       isCreateNewAction: true,
       isMultiUnits: undefined,
       name: '1',
-      type: 'value_change',
+      type: undefined,
       unit: {
         id: 1,
       },

package/src/screens/SelectUnit/index.js

@@ -26,9 +26,10 @@ const SelectUnit = () => {
     scriptName,
     routeName,
     isCreateNewAction,
-    unit,
     title,
     automate,
+    oldType,
+    unit,
   } = params;
   const [data, setData] = useState([]);
   const [selectedItem, setSelectedItem] = useState(data[0]);
@@ -49,7 +50,7 @@ const SelectUnit = () => {
       navigate(Routes.ScriptDetail, {
         id: automateId,
         name: scriptName,
-        type: type,
+        type: oldType,
         havePermission: true,
         unit,
         isMultiUnits,
@@ -77,6 +78,7 @@ const SelectUnit = () => {
         unit: selectedItem,
         automateId,
         scriptName,
+        oldType,
       }
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -155,6 +157,7 @@ const SelectUnit = () => {
             keyExtractor={(item) => item.id}
             data={data}
             renderItem={renderItem}
+            scrollIndicatorInsets={{ right: 1 }}
           />
         </View>
       </WrapHeaderScrollable>

package/src/screens/SetSchedule/index.js

@@ -36,6 +36,7 @@ const SetSchedule = ({ route }) => {
     automateId, // wilk=l remove later
     automate = {},
     scriptName,
+    oldType,
   } = route.params;
   const { navigate, dispatch, goBack } = useNavigation();
   const [repeat, setRepeat] = useState(automate.repeat || REPEAT_OPTIONS.ONCE);
@@ -119,7 +120,7 @@ const SetSchedule = ({ route }) => {
       navigate(Routes.ScriptDetail, {
         id: automateId,
         name: scriptName,
-        type: type,
+        type: oldType,
         havePermission: true,
         unit,
         isMultiUnits,
@@ -136,7 +137,10 @@ const SetSchedule = ({ route }) => {
     <>
       <View style={styles.container}>
         <HeaderCustom isShowClose onClose={onClose} />
-        <ScrollView contentContainerStyle={styles.scollView}>
+        <ScrollView
+          contentContainerStyle={styles.scollView}
+          scrollIndicatorInsets={{ right: 1 }}
+        >
           <Text type="H2" bold style={styles.title}>
             {t('set_schedule')}
           </Text>

package/src/screens/SharedUnit/index.js

@@ -139,6 +139,7 @@ const Shared = () => {
             keyExtractor={(item, index) => item.id.toString()}
             ItemSeparatorComponent={() => <View style={styles.seperator} />}
             contentContainerStyle={styles.scrollView}
+            scrollIndicatorInsets={{ right: 1 }}
           />
         ) : (
           <FlatList
@@ -162,6 +163,7 @@ const Shared = () => {
             keyExtractor={(item, index) => item.id.toString()}
             ItemSeparatorComponent={() => <View style={styles.seperator} />}
             contentContainerStyle={styles.scrollView}
+            scrollIndicatorInsets={{ right: 1 }}
           />
         )}
       </View>

package/src/screens/Sharing/MemberList.js

@@ -21,10 +21,8 @@ const MemberList = ({ route }) => {
   const isFocused = useIsFocused();
   const account = useSCContextSelector((state) => state.auth.account);
   const { unitId, unit } = route.params;
-  const { dataMembers, isRefresh, onRefresh, leaveUnit } = useDataMember(
-    unitId,
-    unit?.user_id
-  );
+  const { dataMembers, isRefresh, onRefresh, leaveUnit, loading } =
+    useDataMember(unitId, unit?.user_id);
   const { isOwner } = useIsOwnerOfUnit(unit?.user_id);
 
   const { stateAlertSharingMenu, hideStateAlertSharingMenu, stateLeaveUnit } =
@@ -67,6 +65,7 @@ const MemberList = ({ route }) => {
       />
     </TouchableOpacity>
   );
+
   return (
     <View style={styles.container}>
       <WrapHeaderScrollable
@@ -77,13 +76,15 @@ const MemberList = ({ route }) => {
         headerAniStyle={styles.headerAniStyle}
         styleScrollView={{ backgroundColor: Colors.White }}
       >
-        <SharingMembers
-          testID={TESTID.SHARING_MEMBER}
-          dataMember={dataMembers}
-          unit={unit}
-          ownerId={unit.user_id}
-          currentUserId={account.user.id}
-        />
+        {!loading && (
+          <SharingMembers
+            testID={TESTID.SHARING_MEMBER}
+            dataMember={dataMembers}
+            unit={unit}
+            ownerId={unit.user_id}
+            currentUserId={account.user.id}
+          />
+        )}
       </WrapHeaderScrollable>
       <AlertAction
         visible={stateAlertSharingMenu.visible}

package/src/screens/Sharing/SelectPermission.js

@@ -225,7 +225,6 @@ const SelectPermission = ({ route }) => {
           ? member?.phone_number
           : member?.phone_number || '';
       const email = member?.phone_number ? '' : member?.email || '';
-
       const { success } = await axiosPost(API.SHARE.SHARE(), {
         phone,
         email,
@@ -266,6 +265,7 @@ const SelectPermission = ({ route }) => {
               />
             )
           }
+          scrollIndicatorInsets={{ right: 1 }}
         />
       )
     );

package/src/screens/Sharing/hooks/index.js

@@ -13,6 +13,7 @@ const useDataMember = (unitId, userUnitId = undefined) => {
   const { navigate, goBack } = useNavigation();
   const [dataMembers, setDataMembers] = useState([]);
   const [isRefresh, setRefresh] = useState(false);
+  const [loading, setLoading] = useState(true);
   const user = useSCContextSelector((state) => state?.auth?.account?.user);
   const { isOwner } = useIsOwnerOfUnit(userUnitId);
 
@@ -42,6 +43,7 @@ const useDataMember = (unitId, userUnitId = undefined) => {
         const arrChanged = changePositionOwnerAndMe(data);
         setDataMembers(arrChanged);
       }
+      setLoading(false);
     },
     [changePositionOwnerAndMe]
   );
@@ -82,6 +84,7 @@ const useDataMember = (unitId, userUnitId = undefined) => {
     loadMembers,
     isRefresh,
     onRefresh,
+    loading,
   };
 };
 

package/src/screens/SideMenuDetail/SideMenuDetailStyles.js

@@ -0,0 +1,28 @@
+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,
+  },
+  wrap: {
+    paddingBottom: 100,
+  },
+  viewBottomFixed: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    paddingBottom: getBottomSpace() > 0 ? getBottomSpace() : 32,
+    paddingTop: 24,
+    backgroundColor: Colors.White,
+    borderColor: Colors.ShadownTransparent,
+    borderTopWidth: 1,
+  },
+});

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

@@ -0,0 +1,165 @@
+import React from 'react';
+import axios from 'axios';
+import { act, create } from 'react-test-renderer';
+
+import { TESTID } from '../../../configs/Constants';
+
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import SideMenuDetail from '../index';
+import { API } from '../../../configs';
+import { TouchableOpacity } from 'react-native';
+import { ModalCustom } from '../../../commons/Modal';
+import { ToastBottomHelper } from '../../../utils/Utils';
+
+jest.mock('axios');
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <SideMenuDetail route={route} />
+  </SCProvider>
+);
+
+describe('Test SideMenuDetail', () => {
+  let tree;
+  const spyToastSuccess = jest.spyOn(ToastBottomHelper, 'success');
+  const spyToastError = jest.spyOn(ToastBottomHelper, 'error');
+
+  afterEach(() => {
+    axios.get.mockClear();
+    axios.post.mockClear();
+    spyToastSuccess.mockReset();
+    spyToastSuccess.mockRestore();
+  });
+
+  const chooseUser = async (instance) => {
+    const ChooseField = instance.find(
+      (item) =>
+        item.props.testID === TESTID.CHOOSE_FIELD &&
+        item.type === TouchableOpacity
+    );
+    await act(async () => {
+      await ChooseField.props.onPress();
+    });
+
+    const popup = instance.find(
+      (item) =>
+        item.props.testID === TESTID.CHOOSE_POPUP && item.type === ModalCustom
+    );
+    expect(popup.props.isVisible).toBeTruthy();
+
+    const button_choose_done = instance.find(
+      (el) =>
+        el.props.testID === TESTID.CHOOSE_POPUP + TESTID.BOTTOM_VIEW_MAIN &&
+        el.type === TouchableOpacity
+    );
+
+    await act(async () => {
+      await button_choose_done.props.onPress();
+    });
+    expect(popup.props.isVisible).toBeFalsy();
+  };
+
+  const inputPasscode = async (instance) => {
+    const inputPasscode = instance.find(
+      (item) => item.props.testID === TESTID.PASSCODE_FIELD
+    );
+
+    await act(async () => {
+      await inputPasscode.props.onChangeText('123456');
+    });
+  };
+
+  const onPressSubmitData = async (instance) => {
+    const buttonSubmit = instance.find(
+      (el) =>
+        el.props.testID === TESTID.SUBMIT + TESTID.BOTTOM_VIEW_MAIN &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      await buttonSubmit.props.onPress();
+    });
+  };
+
+  test('render SideMenuDetail template choose field', async () => {
+    const response_side_menu = {
+      status: 200,
+      data: {
+        id: 1,
+        action: '3df74a11-1a95-4a65-8e08-936b88c8b5ca',
+        fields: [
+          {
+            type: 'choose_user',
+            key: 'user_id',
+            action: {
+              type: 'action_zigbee',
+              id: 1,
+            },
+          },
+          {
+            type: 'passcode',
+            key: 'passcode',
+            action: {
+              type: 'action_zigbee',
+              id: 1,
+            },
+          },
+          {
+            type: 'schedule',
+            key: 'schedule',
+            action: {
+              type: 'action_zigbee',
+              id: {
+                always: 2,
+                recurring: 4,
+                temporary: 5,
+              },
+            },
+          },
+        ],
+      },
+    };
+    const response_unit_members = {
+      status: 200,
+      data: [{ id: 1, name: 'Ken' }],
+    };
+
+    axios.get.mockImplementation((url) => {
+      if (url === API.SENSOR.SIDE_MENU_DETAIL(1, 1)) {
+        return response_side_menu;
+      } else if (url === API.SHARE.UNITS_MEMBERS(1)) {
+        return response_unit_members;
+      }
+      return {
+        status: 200,
+        data: [],
+      };
+    });
+
+    axios.post.mockImplementation(() => {
+      return {
+        status: 200,
+        data: [],
+      };
+    });
+    const route = {
+      params: {
+        unit: { id: 1 },
+        sensor: { id: 1 },
+        side_menu: { id: 1, name: 'Setup generate pass code' },
+      },
+    };
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+
+    const instance = tree.root;
+    await chooseUser(instance);
+    await onPressSubmitData(instance);
+    expect(spyToastError).toBeCalled();
+
+    await inputPasscode(instance);
+    await onPressSubmitData(instance);
+    expect(spyToastSuccess).toBeCalled();
+  });
+});

package/src/screens/SideMenuDetail/index.js

@@ -0,0 +1,149 @@
+import React, { memo, useCallback, useEffect, useState } from 'react';
+import { View, ScrollView } from 'react-native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+
+import styles from './SideMenuDetailStyles';
+import { HeaderCustom } from '../../commons/Header';
+import BottomButtonView from '../../commons/BottomButtonView';
+import { axiosGet, axiosPost } from '../../utils/Apis/axios';
+import { API } from '../../configs';
+import PasscodeField from '../../commons/FieldTemplate/PasscodeField';
+import ChooseUserField from '../../commons/FieldTemplate/ChooseUserField';
+import ScheduleField from '../../commons/FieldTemplate/ScheduleField';
+import { TESTID } from '../../configs/Constants';
+import { ToastBottomHelper } from '../../utils/Utils';
+import { useNavigation } from '@react-navigation/native';
+
+const SideMenuDetail = memo(({ route }) => {
+  const t = useTranslations();
+  const { goBack } = useNavigation();
+  const { unit, sensor, side_menu } = route?.params || {};
+  const [sideMenu, setSideMenu] = useState({});
+  const [dataForm, setDataForm] = useState([]);
+
+  const renderTemplateField = useCallback(
+    (item, index) => {
+      const keyItem = item.key;
+      const dataItem = item;
+      switch (item.type) {
+        case 'choose_user':
+          return (
+            <ChooseUserField
+              key={index} // Todo avoid waring unique "key" prop
+              unit={unit}
+              dataItem={dataItem}
+              index={index}
+              setDataForm={setDataForm}
+              dataForm={dataForm}
+            />
+          );
+        case 'passcode':
+          return (
+            <PasscodeField
+              key={index}
+              dataItem={dataItem}
+              index={index}
+              setDataForm={setDataForm}
+              dataForm={dataForm}
+            />
+          );
+        case 'schedule':
+          return (
+            <ScheduleField
+              key={index}
+              dataItem={dataItem}
+              keyItem={keyItem}
+              setDataForm={setDataForm}
+              dataForm={dataForm}
+            />
+          );
+        default:
+          return null;
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [unit, dataForm]
+  );
+
+  const onPressSubmit = useCallback(async () => {
+    const data = {};
+    const actionZigbee = [];
+    for (let i = 0; i < dataForm.length; i++) {
+      if (!dataForm[i].valid) {
+        ToastBottomHelper.error(t('invaild_data'));
+        return;
+      }
+      if (dataForm[i].data) {
+        data[dataForm[i].key] = dataForm[i].data;
+        if (
+          dataForm[i].action_zigbee &&
+          !actionZigbee.includes(dataForm[i].action_zigbee)
+        ) {
+          actionZigbee.push(dataForm[i].action_zigbee);
+        }
+      } else {
+        data[dataForm[i].key] = null;
+      }
+    }
+
+    data.action_zigbee = actionZigbee;
+
+    const { success } = await axiosPost(API.SENSOR.QUICK_ACTION(sensor.id), {
+      key: sideMenu.action,
+      data,
+      source: 'smart_lock',
+    });
+
+    if (success) {
+      ToastBottomHelper.success(t('activated_successfully'));
+      goBack();
+    } else {
+      ToastBottomHelper.error(t('activation_failed'));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dataForm]);
+
+  const fetchSideMenuDetail = useCallback(async () => {
+    const { success, data } = await axiosGet(
+      API.SENSOR.SIDE_MENU_DETAIL(sensor.id, side_menu.id)
+    );
+    if (success) {
+      setSideMenu(data);
+      setDataForm(data.fields);
+    }
+  }, [sensor.id, side_menu.id]);
+
+  useEffect(() => {
+    fetchSideMenuDetail();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <HeaderCustom
+        title={side_menu.name}
+        titleStyle={styles.title}
+        isShowSeparator
+      />
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        showsHorizontalScrollIndicator={false}
+        style={styles.scrollview}
+      >
+        <View style={styles.wrap}>
+          {dataForm.map((item, index) => {
+            return renderTemplateField(item, index);
+          })}
+        </View>
+      </ScrollView>
+      <BottomButtonView
+        style={styles.viewBottomFixed}
+        testIDPrefix={TESTID.SUBMIT}
+        mainTitle={t('done')}
+        onPressMain={onPressSubmit}
+      />
+    </View>
+  );
+});
+
+export default SideMenuDetail;

package/src/screens/SmartIr/components/SelectBrand.js

@@ -36,7 +36,7 @@ const SelectDeviceType = memo(({ route }) => {
   return (
     <View style={styles.container}>
       <HeaderCustom title={t('select_brand')} />
-      <ScrollView>
+      <ScrollView scrollIndicatorInsets={{ right: 1 }}>
         <View style={styles.listBrands}>
           {!!deviceBrand &&
             deviceBrand.map((item, index) => {

package/src/screens/SubUnit/ManageSubUnit.js

@@ -81,6 +81,7 @@ const ManageSubUnit = memo((props) => {
             refreshControl={
               <RefreshControl refreshing={false} onRefresh={onRefresh} />
             }
+            scrollIndicatorInsets={{ right: 1 }}
           >
             <View>
               {!!station.length &&