@eohjsc/react-native-smart-city 0.7.14 → 0.7.16

package/assets/images/Sms.svg

@@ -0,0 +1,9 @@
+<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.3334 0.333313H3.66671C1.83337 0.333313 0.350041 1.83331 0.350041 3.66665L0.333374 33.6666L7.00004 27H30.3334C32.1667 27 33.6667 25.5 33.6667 23.6666V3.66665C33.6667 1.83331 32.1667 0.333313 30.3334 0.333313ZM12 15.3333H8.66671V12H12V15.3333ZM18.6667 15.3333H15.3334V12H18.6667V15.3333ZM25.3334 15.3333H22V12H25.3334V15.3333Z" fill="url(#paint0_linear_3441_1581)"/>
+<defs>
+<linearGradient id="paint0_linear_3441_1581" x1="0.333374" y1="0.333313" x2="33.6298" y2="33.6667" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2B6B9F"/>
+<stop offset="1" stop-color="#D5FFCB"/>
+</linearGradient>
+</defs>
+</svg>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.7.14",
+  "version": "0.7.16",
   "description": "TODO",
   "main": "index.js",
   "files": [

package/src/commons/Automate/ItemConditionScriptDetailStyles.js

@@ -11,6 +11,7 @@ export default StyleSheet.create({
     justifyContent: 'space-between',
     borderRadius: 8,
     marginTop: 16,
+    marginBottom: 16,
     shadowColor: Colors.Gray6,
     shadowOffset: {
       width: 0,

package/src/commons/Widgets/IFrame/IFrame.js

@@ -29,13 +29,13 @@ const IFrame = memo(({ item = {} }) => {
   }, [id, url]);
 
   return (
-    <View>
+    <View style={styles.viewIframe}>
       <TouchableOpacity style={styles.reloadButton} onClick={reload}>
         <IconComponent size={20} icon="ReloadOutlined" />
       </TouchableOpacity>
       <WebView
         source={{ uri: urlWithEnv }}
-        style={styles.iframe}
+        className={styles.iframe}
         ref={ref}
         title={title}
         javaScriptEnabled

package/src/commons/Widgets/IFrame/IFrameStyles.js

@@ -30,4 +30,9 @@ export const styles = StyleSheet.create({
   settingWidget: {
     width: 256,
   },
+  viewIframe: {
+    width: '100%',
+    display: 'flex',
+    height: 200,
+  },
 });

package/src/configs/API.js

@@ -21,7 +21,8 @@ const API = {
     AUTOMATE: (id) => `/property_manager/units/${id}/automate/`,
     DEVICE_CONTROL: (id) => `/property_manager/units/${id}/device_control/`,
     DEVICE_SENSOR: (id) => `/property_manager/units/${id}/device_sensor/`,
-    SENSORS_STATUS: (id) => `/property_manager/units/${id}/sensors_status/`,
+    END_DEVICES_STATUS: (id) =>
+      `/property_manager/units/${id}/end_devices_status/`,
     CHANGE_OWNER: (id) => `/property_manager/units/${id}/change_owner/`,
     FAVOURITE_DEVICES: (id) =>
       `/property_manager/units/${id}/favourite_devices/`,
@@ -107,6 +108,8 @@ const API = {
       `/property_manager/automate/${automateId}/update_script_action/`,
     UPDATE_SCRIPT_EMAIL: (automateId) =>
       `/property_manager/automate/${automateId}/update_script_email/`,
+    UPDATE_SCRIPT_SMS: (automateId) =>
+      `/property_manager/automate/${automateId}/update_script_sms/`,
     ADD_SCRIPT_ACTION: (id) =>
       `/property_manager/automate/${id}/add_script_action/`,
     ADD_SCRIPT_NOTIFY: (id) =>
@@ -115,7 +118,7 @@ const API = {
       `/property_manager/automate/${id}/add_script_delay/`,
     ADD_SCRIPT_EMAIL: (id) =>
       `/property_manager/automate/${id}/add_script_email/`,
-
+    ADD_SCRIPT_SMS: (id) => `/property_manager/automate/${id}/add_script_sms/`,
     FETCH_AUTOMATE: (automateId) => `/property_manager/automate/${automateId}/`,
     CREATE_AUTOMATE: () => '/property_manager/automate/',
     UPDATE_AUTOMATE: (automateId) =>
@@ -130,6 +133,8 @@ const API = {
     GET_MULTI_UNITS: () => '/property_manager/automate/multi_unit/',
     ACTIVITY_LOG: (id) => `/property_manager/automate/${id}/logs/`,
     STARRED_SCRIPTS: () => '/property_manager/automate/starred_scripts/',
+    ENABLE_LOCAL_CONTROL: (id) =>
+      `/property_manager/automate/${id}/enable_local_control/`,
   },
   HOME_ASSISTANT: {
     CHECK_SEND_EMAIL: () =>
@@ -244,6 +249,7 @@ const API = {
       COUNT: () => '/chip_manager/developer_mode_chips/count/',
       DETAIL: (id) => `/chip_manager/developer_mode_chips/${id}/`,
       REBOOT: (id) => `/chip_manager/developer_mode_chips/${id}/reboot_chip/`,
+      SHARED: () => '/property_manager/iot_dashboard/filters/chip_shared/',
     },
     ARDUINO: {
       DETAIL: (id) => `/iot/modules/arduino/gateways/${id}/`,

package/src/hooks/Common/useBlockBack.js

@@ -1,36 +1,51 @@
 import { useFocusEffect, useNavigation } from '@react-navigation/native';
 import { useCallback, useRef } from 'react';
-import { BackHandler } from 'react-native';
+import { BackHandler, Platform } from 'react-native';
 
 export const useBlockBack = (actionBack) => {
   const navigation = useNavigation();
-  const isBeforeRemoveHandled = useRef(false);
+  const isListening = useRef(false);
 
   const blockBack = useCallback(() => {
     actionBack && actionBack();
     return true;
   }, [actionBack]);
 
+  const blockBeforeRemove = useCallback(
+    (e) => {
+      e.preventDefault();
+      blockBack();
+    },
+    [blockBack]
+  );
+
   useFocusEffect(
     useCallback(() => {
-      const onBeforeRemove = (e) => {
-        if (!isBeforeRemoveHandled.current) {
-          isBeforeRemoveHandled.current = true;
-          e.preventDefault();
-          blockBack();
-        }
-      };
-
-      BackHandler.addEventListener('hardwareBackPress', blockBack);
-      const unsubscribe = navigation.addListener(
-        'beforeRemove',
-        onBeforeRemove
-      );
-
-      return () => {
-        BackHandler.removeEventListener('hardwareBackPress', blockBack);
-        unsubscribe();
-      };
-    }, [blockBack, navigation])
+      if (isListening.current) {
+        return;
+      }
+      isListening.current = true;
+
+      if (Platform.OS === 'ios') {
+        const unsubscribe = navigation.addListener(
+          'beforeRemove',
+          blockBeforeRemove
+        );
+
+        return () => {
+          unsubscribe();
+          isListening.current = false;
+        };
+      }
+
+      if (Platform.OS === 'android') {
+        BackHandler.addEventListener('hardwareBackPress', blockBack);
+
+        return () => {
+          BackHandler.removeEventListener('hardwareBackPress', blockBack);
+          isListening.current = false;
+        };
+      }
+    }, [blockBack, blockBeforeRemove, navigation])
   );
 };

package/src/hooks/Common/useDevicesStatus.js

@@ -1,7 +1,7 @@
 import { useCallback, useContext, useEffect, useRef } from 'react';
 import { useIsFocused } from '@react-navigation/native';
 import { SCContext, useSCContextSelector } from '../../context';
-import { axiosGet } from '../../utils/Apis/axios';
+import { axiosPost } from '../../utils/Apis/axios';
 import { API } from '../../configs';
 import { Action } from '../../context/actionType';
 
@@ -13,7 +13,7 @@ const useDevicesStatus = (unit, devices) => {
     (state) => state.app.isNetworkConnected
   );
   const isFocused = useIsFocused();
-  const hasFetched = useRef(false); // Track if data has been fetched
+  const hasFetched = useRef([]); // Track if data has been fetched
 
   const getDevicesStatus = useCallback(
     async (_unit, _devices) => {
@@ -21,24 +21,29 @@ const useDevicesStatus = (unit, devices) => {
         clearTimeout(timeoutId);
         timeoutId = null;
       }
-      const params = new URLSearchParams();
-      _devices.forEach((device) => {
-        params.append('sensors', device.id);
-      });
-      const { success, data } = await axiosGet(
-        API.UNIT.SENSORS_STATUS(_unit.id),
+      const end_device_ids = _devices.map((item) => item.id);
+
+      if (hasFetched.current.toString() === end_device_ids.toString()) {
+        return;
+      }
+      const { success, data } = await axiosPost(
+        API.UNIT.END_DEVICES_STATUS(_unit.id),
         {
-          params: params,
+          end_device_ids,
         }
       );
-      success && setAction(Action.SET_DEVICES_STATUS, data);
+
+      if (success) {
+        hasFetched.current = end_device_ids;
+        setAction(Action.SET_DEVICES_STATUS, data);
+      }
       timeoutId = setTimeout(() => getDevicesStatus(_unit, _devices), 10000);
     },
     [setAction]
   );
 
   useEffect(() => {
-    if (!isFocused || !isNetworkConnected || hasFetched.current) {
+    if (!isFocused || !isNetworkConnected) {
       return;
     }
     if (!devices?.length) {
@@ -53,7 +58,6 @@ const useDevicesStatus = (unit, devices) => {
     }
 
     getDevicesStatus(unit, devices);
-    hasFetched.current = true; // Mark as fetched
     return () => {
       if (timeoutId) {
         clearTimeout(timeoutId);
@@ -65,7 +69,6 @@ const useDevicesStatus = (unit, devices) => {
   useEffect(() => {
     // Reset the hasFetched flag when the component is no longer focused
     if (!isFocused) {
-      hasFetched.current = false;
       if (timeoutId) {
         clearTimeout(timeoutId); // Clear timeout when losing focus
         timeoutId = null;

package/src/navigations/UnitStack.js

@@ -72,6 +72,9 @@ import { HanetCameraStack } from './HanetCameraStack';
 import { styles } from './UnitStackStyles';
 import { bleManager } from '../utils/bluetooth';
 import UpdateReceiverEmailScript from '../screens/Automate/EditActionsList/UpdateReceiverEmailScript';
+import SetupScriptSms from '../screens/Automate/AddNewAction/SetupScriptSms';
+import SetupScriptReceiverSms from '../screens/Automate/AddNewAction/SetupScriptReceiverSms';
+import UpdateReceiverSmsScript from '../screens/Automate/EditActionsList/UpdateReceiverSmsScript';
 
 const Stack = createNativeStackNavigator();
 
@@ -446,6 +449,27 @@ export const UnitStack = memo((props) => {
           headerShown: false,
         }}
       />
+      <Stack.Screen
+        name={Route.SetupScriptSms}
+        component={SetupScriptSms}
+        options={{
+          headerShown: false,
+        }}
+      />
+      <Stack.Screen
+        name={Route.SetupScriptReceiverSms}
+        component={SetupScriptReceiverSms}
+        options={{
+          headerShown: false,
+        }}
+      />
+      <Stack.Screen
+        name={Route.UpdateReceiverSmsScript}
+        component={UpdateReceiverSmsScript}
+        options={{
+          headerShown: false,
+        }}
+      />
       <Stack.Screen
         name={Route.AddAutomationTypeSmart}
         component={AddAutomationTypeSmart}

package/src/screens/AddNewGateway/ScanDeviceLocal.js

@@ -221,23 +221,21 @@ const ScanDeviceLocal = ({ route }) => {
         title={t('device_scaned')}
         isShowSeparator
       />
-      {!deviceList.length ? (
+
+      <View style={styles.rowContainer}>
+        <Text style={styles.subTitle} type="Body">
+          {t('select_device_and_connect')}
+        </Text>
         <ActivityIndicator style={styles.containerLoading} />
-      ) : (
-        <>
-          <Text style={styles.subTitle} type="Body">
-            {t('select_device_and_connect')}
-          </Text>
-          <FlatList
-            style={styles.listContainer}
-            keyExtractor={(item) => item?.host}
-            data={deviceList}
-            renderItem={renderItem}
-            extraData={deviceList}
-            numColumns={1}
-          />
-        </>
-      )}
+      </View>
+      <FlatList
+        style={styles.listContainer}
+        keyExtractor={(item) => item?.host}
+        data={deviceList}
+        renderItem={renderItem}
+        extraData={deviceList}
+        numColumns={1}
+      />
 
       <ViewButtonBottom
         leftTitle={t('cancel')}

package/src/screens/AddNewGateway/ScanDeviceLocalStyles.js

@@ -6,6 +6,10 @@ export default StyleSheet.create({
     flex: 1,
     backgroundColor: Colors.Gray2,
   },
+  rowContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
   title: {
     marginVertical: 16,
     marginLeft: 16,
@@ -53,6 +57,7 @@ export default StyleSheet.create({
   containerLoading: {
     flex: 1,
     justifyContent: 'center',
-    alignItems: 'center',
+    alignItems: 'flex-start',
+    marginLeft: 16,
   },
 });

package/src/screens/AddNewGateway/__test__/ScanDeviceLocal.test.js

@@ -105,6 +105,9 @@ describe('test ScanDeviceLocal', () => {
     );
     expect(zeroconfMock.on).toHaveBeenCalledWith('error', expect.any(Function));
     expect(zeroconfMock.scan).toHaveBeenCalledWith('plugandplay', 'tcp');
+
+    const activityIndicator = instance.findByType(ActivityIndicator);
+    expect(activityIndicator).toBeTruthy();
   };
 
   it('test connect gateway and navigate', async () => {
@@ -382,17 +385,6 @@ describe('test ScanDeviceLocal', () => {
     expect(mockedGoBack).toHaveBeenCalled();
   });
 
-  it('test renders loading indicator when device list is empty', async () => {
-    const route = { params: { unit: 1 } };
-    await act(async () => {
-      tree = await renderer.create(wrapComponent(route));
-    });
-    const instance = tree.root;
-
-    const activityIndicator = instance.findByType(ActivityIndicator);
-    expect(activityIndicator).toBeTruthy();
-  });
-
   it('test renders device list when devices are available', async () => {
     const route = { params: { unit: 1 } };
     await act(async () => {
@@ -451,8 +443,7 @@ describe('test ScanDeviceLocal', () => {
       await removeCallback('Device 1');
     });
 
-    const flatListAfter = instance.findAllByType(FlatList);
-    expect(flatListAfter.length).toBe(0);
+    expect(flatList.props.data).toEqual([]);
 
     const activityIndicator = instance.findByType(ActivityIndicator);
     expect(activityIndicator).toBeTruthy();

package/src/screens/Automate/AddNewAction/SetupScriptReceiverSms.js

@@ -0,0 +1,167 @@
+import React, { useCallback, useMemo, useState, useEffect, memo } from 'react';
+import { FlatList, View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import styles from './Styles/SetupScriptReceiverEmailStyles';
+import { CircleView, HeaderCustom, Text } from '../../../commons';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+import BottomButtonView from '../../../commons/BottomButtonView';
+import { axiosPost, axiosGet } from '../../../utils/Apis/axios';
+import { API, Colors } from '../../../configs';
+import { ToastBottomHelper } from '../../../utils/Utils';
+import Routes from '../../../utils/Route';
+import moment from 'moment';
+import CheckBox from '@react-native-community/checkbox';
+import { useSCContextSelector } from '../../../context';
+import { Image } from 'react-native';
+
+const SetupScriptReceiverSms = ({ route }) => {
+  const t = useTranslations();
+  const { goBack, navigate } = useNavigation();
+  const { automate = {}, unitId, formData } = route.params || {};
+  const { id: automateId } = automate;
+  const [members, setMembers] = useState([]);
+  const [listUser, setListUser] = useState([]);
+  const currentUserId = useSCContextSelector(
+    (state) => state.auth.account.user.id
+  );
+
+  const loadMembers = useCallback(async () => {
+    const { success, data } = await axiosGet(API.SHARE.UNITS_MEMBERS(unitId));
+    if (success) {
+      setMembers(data);
+    }
+  }, [unitId]);
+
+  useEffect(() => {
+    loadMembers();
+  }, [loadMembers]);
+
+  const onNext = useCallback(async () => {
+    formData.receiver = listUser;
+    const { success } = await axiosPost(
+      API.AUTOMATE.ADD_SCRIPT_SMS(automateId),
+      formData
+    );
+    if (success) {
+      ToastBottomHelper.success(t('text_done'));
+      navigate({
+        name: Routes.ScriptDetail,
+        merge: true,
+        params: { saveAt: moment().valueOf() },
+      });
+    } else {
+      ToastBottomHelper.error(t('error_please_try_later'));
+    }
+  }, [automateId, formData, listUser, navigate, t]);
+
+  const canSave = useMemo(() => {
+    const { message } = formData;
+    return !!message && !!listUser.length;
+  }, [formData, listUser.length]);
+
+  const arrColor = useMemo(
+    () => [
+      Colors.GeekBlue3,
+      Colors.Purple3,
+      Colors.Orange3,
+      Colors.Volcano3,
+      Colors.Blue9,
+      Colors.Green3,
+      Colors.Cyan2,
+    ],
+    []
+  );
+
+  const onChecked = useCallback(
+    (id) => (checked) => {
+      setListUser((prevListUser) =>
+        checked
+          ? [...prevListUser, id]
+          : prevListUser.filter((userId) => userId !== id)
+      );
+    },
+    []
+  );
+
+  const RowMember = memo(({ member, index, onValueChange }) => {
+    const { id, name, avatar, share_id, phone_number } = member;
+    const [role, roleColor] = useMemo(() => {
+      if (!share_id) {
+        return [t('owner'), Colors.Primary];
+      }
+      if (id === currentUserId) {
+        return [t('me'), Colors.Primary];
+      }
+      return [t('member'), Colors.Gray6];
+    }, [share_id, id]);
+
+    const firstWordsInName = useMemo(() => {
+      return name.charAt();
+    }, [name]);
+
+    const circleColor = arrColor[index % arrColor.length];
+
+    return (
+      <View style={styles.rowContainer}>
+        <View style={styles.border}>
+          <CheckBox
+            disabled={!phone_number}
+            lineWidth={4}
+            value={listUser.includes(id)}
+            onValueChange={onValueChange(id)}
+            style={styles.checkbox}
+          />
+          <View style={styles.paddingLeft16}>
+            {avatar ? (
+              <Image source={{ uri: avatar }} style={styles.avatar} />
+            ) : (
+              <CircleView size={40} backgroundColor={circleColor} center>
+                <Text color={Colors.White}>{firstWordsInName}</Text>
+              </CircleView>
+            )}
+          </View>
+          <View style={styles.paddingLeft16}>
+            <Text style={styles.titleName}>{name}</Text>
+            {phone_number ? (
+              <Text style={styles.status}>{phone_number}</Text>
+            ) : (
+              <Text style={styles.invalid}>{t('no_phone_number')}</Text>
+            )}
+          </View>
+          <View style={styles.endFlex}>
+            <Text style={[styles.textRole, { color: roleColor }]}>{role}</Text>
+          </View>
+        </View>
+      </View>
+    );
+  });
+
+  return (
+    <View style={styles.wrap}>
+      <HeaderCustom isShowClose onClose={goBack} title={t('sms_to')} />
+      <FlatList
+        data={members}
+        renderItem={({ item, index }) => (
+          <RowMember member={item} index={index} onValueChange={onChecked} />
+        )}
+        keyExtractor={(item) => item.id.toString()}
+        ListEmptyComponent={
+          <View style={styles.viewEmpty}>
+            <Text style={styles.textCenter}>{t('no_member')}</Text>
+          </View>
+        }
+      />
+      <View style={styles.container}>
+        <BottomButtonView
+          style={styles.bottomButtonView}
+          mainTitle={t('done')}
+          onPressMain={onNext}
+          typeMain={canSave ? 'primary' : 'disabled'}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default SetupScriptReceiverSms;

package/src/screens/Automate/AddNewAction/SetupScriptSms.js

@@ -0,0 +1,73 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { Keyboard, TouchableWithoutFeedback, View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import styles from './Styles/SetupScriptEmailStyles';
+import { HeaderCustom, Text } from '../../../commons';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+import _TextInput from '../../../commons/Form/TextInput';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+import BottomButtonView from '../../../commons/BottomButtonView';
+import Routes from '../../../utils/Route';
+import { Colors } from '../../../configs';
+
+const SetupScriptSms = ({ route }) => {
+  const t = useTranslations();
+  const { goBack, navigate } = useNavigation();
+  const { automate, unitId, multiUnit } = route.params || {};
+  const initialUnitId = useMemo(
+    () => unitId || multiUnit.id,
+    [unitId, multiUnit?.id]
+  );
+  const [formData, setFormData] = useState({ unit: initialUnitId });
+
+  const onChangeMessage = (value) => {
+    setFormData((state) => ({
+      ...state,
+      message: value,
+    }));
+  };
+
+  const onNext = useCallback(async () => {
+    navigate(Routes.SetupScriptReceiverSms, {
+      automate,
+      unitId: initialUnitId,
+      formData,
+    });
+  }, [navigate, automate, initialUnitId, formData]);
+
+  const canSave = useMemo(() => {
+    const { message } = formData || {};
+    return !!message;
+  }, [formData]);
+
+  return (
+    <View style={styles.wrap}>
+      <HeaderCustom isShowClose onClose={goBack} title={t('sms_content')} />
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
+        <View style={styles.container}>
+          <_TextInput
+            placeholder={t('message_sms')}
+            onChange={onChangeMessage}
+            textInputStyle={styles.textMessage}
+            value={formData?.message}
+            accessibilityLabel={AccessibilityLabel.AUTOMATE_MESSAGE_NOTIFY}
+            multiline={true}
+            maxLength={255}
+          />
+          <View style={styles.textWarning}>
+            <Text color={Colors.Gray}>{t('only_in_local_control')}</Text>
+          </View>
+          <BottomButtonView
+            style={styles.bottomButtonView}
+            mainTitle={t('next')}
+            onPressMain={onNext}
+            typeMain={canSave ? 'primary' : 'disabled'}
+          />
+        </View>
+      </TouchableWithoutFeedback>
+    </View>
+  );
+};
+
+export default SetupScriptSms;

package/src/screens/Automate/AddNewAction/Styles/SetupScriptEmailStyles.js

@@ -27,6 +27,11 @@ export default StyleSheet.create({
     borderStyle: 'solid',
     borderRadius: 10,
   },
+  textWarning: {
+    marginTop: 5,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
   bottomButtonView: {
     paddingTop: 24,
     paddingBottom: 32,