@eohjsc/react-native-smart-city 0.6.0 → 0.6.1

package/README.md

@@ -21,6 +21,8 @@
 
 1. StackNavigator
 
+- You can see the screens or components that the library is supporting in the folder `/@eohjsc/react-native-smart-city/index.js`
+
 ```javascript
 import {
   UnitStack,
@@ -38,12 +40,9 @@ import {
 import Config from 'react-native-config';
 import { createStackNavigator } from '@react-navigation/stack';
 
-// TODO: What to do with the module?
 const Stack = createStackNavigator();
 
 const YourStack = () => {
-
-
   useEffect(() => {
     const config = {
       apiRoot: Config.API_ROOT,
@@ -58,8 +57,8 @@ const YourStack = () => {
       language,
       setCurrentSensorDisplay,
       appName: Config.APP_NAME,
-      packageName: Config.APP_PACKAGE_NAME,  //  Your package name is required
-      versionCode: Config.APP_VERSION_CODE,  //  Your app version is required
+      packageName: Config.APP_PACKAGE_NAME, //  Your package name is required
+      versionCode: Config.APP_VERSION_CODE, //  Your app version is required
     };
     initSCConfig(config);
   }, [language, setCurrentSensorDisplay]);
@@ -132,7 +131,46 @@ const MyScreen = () => {
 };
 ```
 
-3. Trigger quick action 
+3. Use navigate to the screens included in the '@eohjsc/react-native-smart-city' library
+
+- You can see the list of screens, currently supported by the library in the folder `/@eohjsc/react-native-smart-city/src/navigations/`
+
+```javascript
+import { useNavigation } from '@react-navigation/native';
+const { navigate } = useNavigation();
+const automate_id = 1;
+const unit_id = 1;
+const sensor_id = 1;
+
+const handleNavigateScriptDetail = () => {
+  navigate('UnitStack', {
+    screen: 'ScriptDetail',
+    params: {
+      id: automate_id,
+    },
+  });
+};
+
+const handleNavigateDeviceDetail = () => {
+  navigate('UnitStack', {
+    screen: 'DeviceDetail',
+      params: {
+        unitId: unit_id,
+        sensorId: sensor_id,
+      },
+  });
+};
+
+<TouchableOpacity onPress={handleNavigateScriptDetail}>
+  <Text>{'Navigate to the "ScriptDetail" screen'}</Text>
+</TouchableOpacity>;
+
+<TouchableOpacity onPress={handleNavigateDeviceDetail}>
+  <Text>{'Navigate to the "DeviceDetail" screen'}</Text>
+</TouchableOpacity>;
+```
+
+4. Trigger quick action
 
 ```javascript
 import React from 'react';

package/package.json

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

package/src/commons/Device/PowerConsumptionChart.js

@@ -11,6 +11,7 @@ import DateTimeRangeChange from '../DateTimeRangeChange';
 import HorizontalBarChart from './HorizontalBarChart';
 import ChartAggregationOption from '../ChartAggregationOption';
 import { formatMoney } from '../../utils/Utils';
+import AccessibilityLabel from '../../configs/AccessibilityLabel';
 
 const PowerConsumptionChart = memo(
   ({
@@ -101,6 +102,7 @@ const PowerConsumptionChart = memo(
               onPress={onCalculateCost}
               style={styles.buttonCalculate}
               textSemiBold={false}
+              accessibilityLabel={AccessibilityLabel.BUTTON_CALCULATE_COST}
             />
           </View>
         </View>
@@ -108,7 +110,10 @@ const PowerConsumptionChart = memo(
         {renderChart}
         {!!chartConfig.price && (
           <Text type="H4">
-            {t('total_power_price')} <Text bold>{formatMoney(totalPrice)}</Text>
+            {t('total_power_price')}{' '}
+            <Text bold accessibilityLabel={AccessibilityLabel.TOTAL_PRICE}>
+              {formatMoney(totalPrice)}
+            </Text>
           </Text>
         )}
       </View>

package/src/commons/Device/ProgressBar/__test__/ProgressBar.test.js

@@ -18,8 +18,7 @@ describe('Test ProgressBar', () => {
   it('render ProgressBar', async () => {
     const item = {
       label: 'Value bar',
-      configuration: { max_value: 100 },
-      value: 8,
+      configuration: { min_value: 0, max_value: 100 },
     };
     const data = [{ value: 10, unit: 'oC' }];
     await act(async () => {
@@ -28,6 +27,6 @@ describe('Test ProgressBar', () => {
     const instance = tree.root;
     const texts = instance.findAllByType(Text);
     expect(texts[0].props.children).toBe('Value bar');
-    expect(texts[1].props.children).toEqual('Max value: 100 oC');
+    expect(texts[1].props.children).toEqual('0 oC');
   });
 });

package/src/commons/Device/ProgressBar/index.js

@@ -3,53 +3,51 @@ import { View } from 'react-native';
 import * as Progress from 'react-native-progress';
 
 import { Colors } from '../../../configs';
-import { useTranslations } from '../../../hooks/Common/useTranslations';
 import Text from '../../Text';
 import styles from './styles';
 
 const ProgressBar = memo(({ data = [], item, isWidgetOrder }) => {
-  const t = useTranslations();
-
-  const minValue = useMemo(() => {
-    return Number(item?.configuration?.min_value) || 0;
-  }, [item?.configuration?.min_value]);
-  const maxValue = useMemo(() => {
-    return Number(item?.configuration?.max_value) || 60;
-  }, [item?.configuration?.max_value]);
-
-  let { value = 0, measure, unit } = data.length ? data[0] : {};
-  const isNotValue = ['', null, undefined, NaN].includes(value);
-
-  if (isNotValue) {
-    value = minValue;
-  }
+  const {
+    configuration: { max_value, min_value },
+    label,
+  } = item;
+  const { value = 0, unit } = data.length ? data[0] : {};
+  const isNotValue = useMemo(
+    () => ['', null, undefined, NaN].includes(value),
+    [value]
+  );
 
-  const distance = maxValue - minValue;
-  const percent = (value - minValue) / distance;
+  const displayedValue = isNotValue ? min_value : value;
+  const distance = max_value - min_value;
+  const percent = (displayedValue - min_value) / distance;
 
   return (
-    <View style={(isWidgetOrder && styles.wrapOrderItem) || styles.container}>
-      <Text size={16} style={styles.textLabel}>
-        {item?.label || 'Label'}
+    <>
+      <Text type="H3" semibold color={Colors.Gray9} style={styles.textLabel}>
+        {label}
       </Text>
-
-      <Text size={16} style={styles.textMaxValue}>
-        {`${t('max_value')}: ${maxValue} ${unit || measure}`}
-      </Text>
-
-      <View style={styles.wrapProgressBar}>
-        <Progress.Bar
-          style={styles.progressBar}
-          width={null}
-          height={40}
-          progress={percent}
-          unfilledColor={Colors.Blue15}
-        />
-        <Text numberOfLines={1} style={styles.textValue}>
-          {isNotValue ? '--' : value}
-        </Text>
+      <View style={isWidgetOrder ? styles.wrapOrderItem : styles.container}>
+        <View style={styles.boxProgress}>
+          <View style={styles.boxMaxMinValue}>
+            <Text style={styles.textMaxMinValue}>{`${min_value} ${unit}`}</Text>
+            <Text style={styles.textMaxMinValue}>{`${max_value} ${unit}`}</Text>
+          </View>
+          <Progress.Bar
+            style={styles.progressBar}
+            width={null}
+            height={40}
+            progress={percent}
+            unfilledColor={Colors.Blue15}
+          />
+        </View>
+        <View>
+          <Text
+            bold
+            style={styles.textValue}
+          >{`${displayedValue} ${unit}`}</Text>
+        </View>
       </View>
-    </View>
+    </>
   );
 });
 

package/src/commons/Device/ProgressBar/styles.js

@@ -4,44 +4,38 @@ import { Colors } from '../../../configs';
 
 export default StyleSheet.create({
   container: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  boxProgress: {
     flex: 1,
-    flexDirection: 'column', //column direction
-    marginHorizontal: 30,
-    borderWidth: 1,
-    padding: 16,
-    borderRadius: 8,
-    borderColor: Colors.Gray4,
-    marginBottom: 12,
+    flexDirection: 'column',
+    padding: 15,
+  },
+  boxMaxMinValue: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
   },
   wrapOrderItem: {
     flex: 1,
-    padding: 16,
-    flexDirection: 'column',
+    padding: 15,
+    flexDirection: 'row',
   },
   textLabel: {
-    marginLeft: 8,
+    marginLeft: 15,
     paddingTop: 8,
   },
-  textMaxValue: {
-    marginTop: 20,
+  textMaxMinValue: {
     marginBottom: 2,
     textAlign: 'left',
-    fontWeight: 'bold',
-    textTransform: 'uppercase',
+  },
+  textValue: {
+    paddingTop: 48,
+    marginRight: 8,
   },
   progressBar: {
-    flex: 1,
     color: Colors.Blue16,
     borderWidth: 0,
     borderRadius: 10,
   },
-  wrapProgressBar: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-  },
-  textValue: {
-    marginLeft: 8,
-  },
 });

package/src/commons/Form/CurrencyInput.js

@@ -15,6 +15,7 @@ import {
 import AndroidKeyboardAdjust from 'react-native-android-keyboard-adjust';
 import Text from '../Text';
 import { Colors } from '../../configs';
+import AccessibilityLabel from '../../configs/AccessibilityLabel';
 
 const formatNumber = (input, options) => {
   const {
@@ -151,6 +152,7 @@ const CurrencyInput = ({
           onSubmitEditing={onSubmitEditing}
           style={styles.input}
           maxLength={10}
+          accessibilityLabel={AccessibilityLabel.INPUT_CALCULATE_COST}
         />
         <Text
           semibold

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

@@ -0,0 +1,54 @@
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+
+import { styles } from './IFrameStyles';
+import IconComponent from '../../IconComponent';
+import WebView from 'react-native-webview';
+import { TouchableOpacity, View } from 'react-native';
+
+const IFrame = memo(
+  ({ item = {}, widgetStyle, isWidgetBox, isSetting, isEditing }) => {
+    const ref = useRef();
+    const [urlWithEnv, setUrlWithEnv] = useState();
+
+    const { configuration } = item;
+    const { url } = configuration || {};
+
+    const reload = useCallback(() => {
+      ref.current.reload();
+    }, []);
+
+    useEffect(() => {
+      if (!url) {
+        return;
+      }
+      if (!url.includes('?')) {
+        setUrlWithEnv(
+          `${url}?eraOrigin=${window.location.origin}&eraWidget=${item?.id}`
+        );
+      } else {
+        setUrlWithEnv(
+          `${url}&eraOrigin=${window.location.origin}&eraWidget=${item?.id}`
+        );
+      }
+    }, [item?.id, url]);
+
+    return (
+      <View>
+        <TouchableOpacity
+          style={isEditing ? styles.reloadButtonEditing : styles.reloadButton}
+          onClick={reload}
+        >
+          <IconComponent icon="ReloadOutlined" />
+        </TouchableOpacity>
+        <WebView
+          source={{ uri: urlWithEnv }}
+          style={styles.iframe}
+          ref={ref}
+          title={item?.title}
+        />
+      </View>
+    );
+  }
+);
+
+export default IFrame;

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

@@ -0,0 +1,35 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export const styles = StyleSheet.create({
+  iframe: {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    paddingHorizontal: 16,
+  },
+  reloadButton: {
+    position: 'absolute',
+    right: 16,
+    top: 5,
+    border: '1px solid #E6E6E6',
+    backgroundColor: Colors.White,
+  },
+  reloadButtonEditing: {
+    position: 'absolute',
+    right: 77,
+    top: 0,
+    width: 36,
+    marginLeft: 2,
+    paddingTop: 5,
+    paddingBottom: 5,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 4,
+    backgroundColor: Colors.White,
+    border: '1px solid #E6E6E6',
+  },
+  settingWidget: {
+    width: 256,
+  },
+});

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

@@ -0,0 +1,74 @@
+import React, { useRef } from 'react';
+import { act } from 'react-test-renderer';
+
+import IFrame from '../IFrame';
+import WebView from 'react-native-webview';
+import { TouchableOpacity } from 'react-native';
+import { render } from '../../../../../jest/render';
+
+describe('Test IFrame', () => {
+  let item;
+  beforeEach(() => {
+    item = {
+      id: 1,
+      configuration: {
+        url: 'http://localhost:3000/',
+      },
+    };
+  });
+
+  test('test with widget box', async () => {
+    const { root } = await render(<IFrame isWidgetBox item={item} />);
+
+    const iframes = root.findAllByType(WebView);
+    expect(iframes).toHaveLength(1);
+
+    expect(iframes[0].props.source?.uri).toEqual(
+      'http://localhost:3000/?eraOrigin=http://localhost&eraWidget=1'
+    );
+  });
+
+  test('test with query string', async () => {
+    item.configuration.url = 'http://localhost:3000/?test=1';
+    const { root } = await render(<IFrame isWidgetBox item={item} />);
+
+    const iframes = root.findAllByType(WebView);
+    expect(iframes).toHaveLength(1);
+
+    expect(iframes[0].props.source?.uri).toEqual(
+      'http://localhost:3000/?test=1&eraOrigin=http://localhost&eraWidget=1'
+    );
+  });
+
+  test('test no url', async () => {
+    item.configuration.url = null;
+    const { root } = await render(<IFrame isWidgetBox item={item} />);
+
+    const iframes = root.findAllByType(WebView);
+    expect(iframes).toHaveLength(1);
+
+    expect(iframes[0].props.source?.uri).toEqual(undefined);
+  });
+
+  test('test reload', async () => {
+    const ref = {
+      current: {},
+    };
+    useRef.mockReturnValue(ref);
+
+    const mockReload = jest.fn();
+    const { root } = await render(<IFrame isWidgetBox item={item} />);
+    ref.current = {
+      reload: mockReload,
+    };
+
+    const buttons = root.findAllByType(TouchableOpacity);
+    expect(buttons).toHaveLength(1);
+
+    await act(async () => {
+      buttons[0].props.onClick();
+    });
+
+    expect(mockReload).toHaveBeenCalledTimes(1);
+  });
+});

package/src/commons/Widgets/IFrameWithConfig/IFrameWithConfig.js

@@ -0,0 +1,163 @@
+import moment from 'moment';
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+
+import { styles as useIframeStyle } from '../IFrame/IFrameStyles';
+import { styles } from './IFrameWithConfigStyles';
+import IconComponent from '../../IconComponent';
+import { useConfigGlobalState } from '../../../iot/states';
+import { useFetchConfigHistory } from '../../UnitSummary/ConfigHistoryChart';
+import API from '../../../configs/API';
+import WebView from 'react-native-webview';
+import { TouchableOpacity, View } from 'react-native';
+
+const IFrameWithConfig = memo(
+  ({ item = {}, widgetStyle, isWidgetBox, isSetting, isEditing }) => {
+    const ref = useRef();
+
+    const { configuration } = item;
+    const { url } = configuration || {};
+
+    const [height, setHeight] = useState(200);
+    const [urlWithEnv, setUrlWithEnv] = useState();
+    const [isReady, setIsReady] = useState(false);
+
+    const [configValues] = useConfigGlobalState('configValues');
+    const [chartData, setChartData] = useState(configuration?.history_configs);
+    const fetchDataDisplayHistory = useFetchConfigHistory(
+      configuration?.history_configs,
+      setChartData,
+      API.CONFIG.DISPLAY_HISTORY_V4()
+    );
+
+    const postMessage = useCallback((message) => {
+      ref.current?.injectJavaScript(
+        'window.postMessage(' + JSON.stringify(message) + ', "*")'
+      );
+    }, []);
+
+    useEffect(() => {
+      if (!isReady || !ref.current) {
+        return;
+      }
+      if (!configuration?.history_configs?.length) {
+        return;
+      }
+      postMessage({
+        source: 'eraIframeWidget',
+        type: 'histories',
+        data: chartData,
+        eraWidgetId: item.id,
+      });
+    }, [
+      chartData,
+      configuration?.history_configs?.length,
+      configuration.realtime_configs,
+      isReady,
+      item.id,
+      postMessage,
+    ]);
+
+    useEffect(() => {
+      const appendix = `eraOrigin=http://localhost:3000&eraWidget=${item?.id}`;
+      if (!url.includes('?')) {
+        setUrlWithEnv(`${url}?${appendix}`);
+      } else {
+        setUrlWithEnv(`${url}&${appendix}`);
+      }
+    }, [item?.id, url]);
+
+    const onMessage = useCallback(
+      async (event) => {
+        const eventData = event.nativeEvent.data
+          ? JSON.parse(event.nativeEvent.data)
+          : {};
+        if (
+          eventData?.source !== 'eraIframeWidget' ||
+          eventData?.eraWidgetId !== item.id
+        ) {
+          return;
+        }
+        const { type, data } = eventData;
+
+        switch (type) {
+          case 'ready':
+            postMessage({
+              source: 'eraIframeWidget',
+              type: 'configuration',
+              data: configuration,
+              eraWidgetId: item.id,
+            });
+            setIsReady(true);
+            break;
+          case 'requestHistories':
+            await fetchDataDisplayHistory(moment(data[0]), moment(data[1]));
+            break;
+          case 'requestAdjustMobileHeight':
+            setHeight(data);
+            break;
+        }
+      },
+      [configuration, fetchDataDisplayHistory, item.id, postMessage]
+    );
+
+    useEffect(() => {
+      if (!isReady || !ref?.current) {
+        return;
+      }
+      if (!configuration?.realtime_configs?.length) {
+        return;
+      }
+      const values = {};
+      configuration?.realtime_configs.map((config) => {
+        return (values[config.id] = configValues[config.id]);
+      });
+      postMessage({
+        source: 'eraIframeWidget',
+        type: 'values',
+        data: values,
+        eraWidgetId: item.id,
+      });
+    }, [
+      isReady,
+      configValues,
+      configuration?.realtime_configs,
+      item.id,
+      postMessage,
+    ]);
+
+    const reload = useCallback(() => {
+      setIsReady(false);
+      ref.current.reload();
+    }, []);
+
+    return (
+      <View
+        style={
+          isSetting
+            ? styles.settingWidget
+            : { ...styles.wrapper, height: height }
+        }
+      >
+        <TouchableOpacity
+          className={
+            isEditing
+              ? useIframeStyle.reloadButtonEditing
+              : useIframeStyle.reloadButton
+          }
+          onClick={reload}
+        >
+          <IconComponent name="ReloadOutlined" />
+        </TouchableOpacity>
+        <WebView
+          source={{ uri: urlWithEnv }}
+          className={useIframeStyle.iframe}
+          ref={ref}
+          title={item?.title}
+          onMessage={onMessage}
+        />
+      </View>
+    );
+  }
+);
+
+export default IFrameWithConfig;

package/src/commons/Widgets/IFrameWithConfig/IFrameWithConfigStyles.js

@@ -0,0 +1,9 @@
+export const styles = {
+  settingWidget: {
+    width: 256,
+  },
+  wrapper: {
+    width: '100%',
+    display: 'flex',
+  },
+};

package/src/commons/Widgets/IFrameWithConfig/__tests__/IFrameWithConfig.test.js

@@ -0,0 +1,284 @@
+import React from 'react';
+import { act } from 'react-test-renderer';
+
+import IFrameWithConfig from '../IFrameWithConfig';
+import { useConfigGlobalState } from '../../../../iot/states';
+import { render } from '../../../../../jest/render';
+import API from '../../../../configs/API';
+import MockAdapter from 'axios-mock-adapter';
+import api from '../../../../utils/Apis/axios';
+import WebView from 'react-native-webview';
+import { TouchableOpacity, View } from 'react-native';
+import { refFunctions } from '../../../../../__mocks__/react-native-webview';
+
+jest.mock('../../../../iot/states', () => {
+  return {
+    ...jest.requireActual('../../../../iot/states'),
+    useConfigGlobalState: jest.fn(),
+  };
+});
+
+describe('Test IFrame With Config', () => {
+  let item;
+  let configValues = {
+    1: {
+      value: 0.5,
+    },
+  };
+
+  beforeEach(() => {
+    item = {
+      id: 1,
+      configuration: {
+        url: 'http://localhost:3000/',
+        realtime_configs: [{ id: 1 }],
+      },
+    };
+    useConfigGlobalState.mockImplementation(() => [configValues]);
+    refFunctions.injectJavaScript.mockClear();
+  });
+
+  test('test with widget box', async () => {
+    const { root } = await render(<IFrameWithConfig isWidgetBox item={item} />);
+
+    const iframes = root.findAllByType(WebView);
+    expect(iframes).toHaveLength(1);
+
+    expect(iframes[0].props.source?.uri).toEqual(
+      'http://localhost:3000/?eraOrigin=http://localhost:3000&eraWidget=1'
+    );
+  });
+
+  test('test with query string', async () => {
+    item.configuration.url = 'http://localhost:3000/?test=1';
+    const { root } = await render(<IFrameWithConfig isWidgetBox item={item} />);
+
+    const iframes = root.findAllByType(WebView);
+    expect(iframes).toHaveLength(1);
+
+    expect(iframes[0].props.source?.uri).toEqual(
+      'http://localhost:3000/?test=1&eraOrigin=http://localhost:3000&eraWidget=1'
+    );
+  });
+
+  test('test reload', async () => {
+    const { root } = await render(<IFrameWithConfig isWidgetBox item={item} />);
+
+    const buttons = root.findAllByType(TouchableOpacity);
+    expect(buttons).toHaveLength(1);
+
+    await act(async () => {
+      buttons[0].props.onClick();
+    });
+
+    expect(refFunctions.reload).toHaveBeenCalledTimes(1);
+  });
+
+  test('test iframe is ready', async () => {
+    const { root } = await render(<IFrameWithConfig isWidgetBox item={item} />);
+    const webview = root.findByType(WebView);
+
+    await act(async () => {
+      await webview.props.onMessage({
+        nativeEvent: {
+          data: JSON.stringify({
+            type: 'ready',
+            eraWidgetId: 1,
+            source: 'eraIframeWidget',
+          }),
+          origin: 'http://localhost',
+        },
+      });
+    });
+    expectSendMessage(
+      {
+        source: 'eraIframeWidget',
+        type: 'configuration',
+        data: item.configuration,
+        eraWidgetId: 1,
+      },
+      'http://localhost:3000'
+    );
+    expectSendMessage(
+      {
+        source: 'eraIframeWidget',
+        type: 'values',
+        data: configValues,
+        eraWidgetId: 1,
+      },
+      'http://localhost:3000'
+    );
+    unexpectSendMessage(
+      {
+        source: 'eraIframeWidget',
+        type: 'histories',
+        data: [{ id: 1 }],
+        eraWidgetId: 1,
+      },
+      'http://localhost:3000'
+    );
+  });
+
+  test('test iframe request more height', async () => {
+    const { root } = await render(<IFrameWithConfig isWidgetBox item={item} />);
+    const webview = root.findByType(WebView);
+
+    await act(async () => {
+      await webview.props.onMessage({
+        nativeEvent: {
+          data: JSON.stringify({
+            type: 'requestAdjustMobileHeight',
+            data: 100,
+            eraWidgetId: 1,
+            source: 'eraIframeWidget',
+          }),
+          origin: 'http://localhost',
+        },
+      });
+    });
+
+    const wrapper = root.findAllByType(View)[0];
+    expect(wrapper.props.style.height).toEqual(100);
+  });
+
+  test('test iframe receive message from unexpected origin', async () => {
+    const { root } = await render(<IFrameWithConfig isWidgetBox item={item} />);
+    const webview = root.findByType(WebView);
+
+    await act(async () => {
+      webview.props.onMessage({
+        nativeEvent: {
+          data: JSON.stringify({
+            type: 'ready',
+            eraWidgetId: 2,
+            source: 'eraIframeWidget',
+          }),
+          origin: 'http://localhost',
+        },
+      });
+    });
+    expect(refFunctions.injectJavaScript).toHaveBeenCalledTimes(0);
+
+    await act(async () => {
+      webview.props.onMessage({
+        nativeEvent: {
+          data: JSON.stringify({
+            type: 'ready',
+            eraWidgetId: 1,
+            source: 'eraIframeWidget-wrong',
+          }),
+          origin: 'http://localhost',
+        },
+      });
+    });
+    expect(refFunctions.injectJavaScript).toHaveBeenCalledTimes(0);
+  });
+
+  test('test iframe init chart data', async () => {
+    item.configuration.history_configs = [{ id: 1 }];
+    item.configuration.realtime_configs = [];
+
+    const { root } = await render(<IFrameWithConfig isWidgetBox item={item} />);
+    const webview = root.findByType(WebView);
+
+    await act(async () => {
+      webview.props.onMessage({
+        nativeEvent: {
+          data: JSON.stringify({
+            type: 'ready',
+            eraWidgetId: 1,
+            source: 'eraIframeWidget',
+          }),
+          origin: 'http://localhost',
+        },
+      });
+    });
+    unexpectSendMessage(
+      {
+        source: 'eraIframeWidget',
+        type: 'configValues',
+        data: configValues,
+        eraWidgetId: 1,
+      },
+      'http://localhost:3000'
+    );
+    expectSendMessage(
+      {
+        source: 'eraIframeWidget',
+        type: 'histories',
+        data: [{ id: 1 }],
+        eraWidgetId: 1,
+      },
+      'http://localhost:3000'
+    );
+  });
+
+  test('test iframe request chart data', async () => {
+    item.configuration.history_configs = [{ id: 1 }];
+    item.configuration.realtime_configs = [];
+
+    const { root } = await render(<IFrameWithConfig isWidgetBox item={item} />);
+    const webview = root.findByType(WebView);
+
+    await act(async () => {
+      webview.props.onMessage({
+        nativeEvent: {
+          data: JSON.stringify({
+            type: 'ready',
+            eraWidgetId: 1,
+            source: 'eraIframeWidget',
+          }),
+          origin: 'http://localhost',
+        },
+      });
+    });
+
+    const mockAxios = new MockAdapter(api.axiosInstance);
+    mockAxios.onGet(API.CONFIG.DISPLAY_HISTORY_V4()).reply(200, {
+      configs: [
+        {
+          id: 1,
+          head: [],
+          tail: [{ x: 1000, y: 100 }],
+          middle: { ready: [], not_ready: [] },
+        },
+      ],
+    });
+    refFunctions.injectJavaScript.mockClear();
+
+    await act(async () => {
+      await webview.props.onMessage({
+        nativeEvent: {
+          data: JSON.stringify({
+            type: 'requestHistories',
+            eraWidgetId: 1,
+            source: 'eraIframeWidget',
+            data: [1, 2],
+          }),
+          origin: 'http://localhost',
+        },
+      });
+    });
+
+    expectSendMessage(
+      {
+        source: 'eraIframeWidget',
+        type: 'histories',
+        data: [{ id: 1, data: [{ x: 1000, y: 100 }] }],
+        eraWidgetId: 1,
+      },
+      'http://localhost:3000'
+    );
+  });
+
+  const expectSendMessage = (message) => {
+    expect(refFunctions.injectJavaScript).toHaveBeenCalledWith(
+      'window.postMessage(' + JSON.stringify(message) + ', "*")'
+    );
+  };
+  const unexpectSendMessage = (message) => {
+    expect(refFunctions.injectJavaScript).not.toHaveBeenCalledWith(
+      'window.postMessage(' + JSON.stringify(message) + ', "*")'
+    );
+  };
+});

package/src/configs/AccessibilityLabel.js

@@ -413,6 +413,9 @@ export default {
   COMPASS_VALUE: 'COMPASS_VALUE',
   GROUP_CHECKBOX_ITEM: 'GROUP_CHECKBOX_ITEM',
   TOTAL_POWER_BOX_TITLE: 'TOTAL_POWER_BOX_TITLE',
+  INPUT_CALCULATE_COST: 'INPUT_CALCULATE_COST',
+  BUTTON_CALCULATE_COST: 'BUTTON_CALCULATE_COST',
+  TOTAL_PRICE: 'TOTAL_PRICE',
   EMERGENCY_POPUP: 'EMERGENCY_POPUP',
   RESOLVED_EMERGENCY_POPUP: 'RESOLVED_EMERGENCY_POPUP',
   TOTAL_POWER_CONSUMPTION: 'TOTAL_POWER_CONSUMPTION',

package/src/configs/Constants.js

@@ -285,3 +285,8 @@ export const CHART_TIME = {
   month: 672,
   year: 12 * 672,
 };
+
+export const WIDGET_TYPE = {
+  iframe: 'IFrame',
+  iframeWithConfig: 'IFrameWithConfig',
+};

package/src/hooks/Common/useDevicesStatus.js

@@ -33,7 +33,6 @@ const useDevicesStatus = (unit, devices) => {
       );
       success && setAction(Action.SET_DEVICES_STATUS, data);
       timeoutId = setTimeout(() => getDevicesStatus(_unit, _devices), 10000);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
     },
     [setAction]
   );

package/src/screens/Device/components/SensorDisplayItem.js

@@ -13,7 +13,7 @@ import ListQualityIndicator from '../../../commons/Device/WaterQualitySensor/Lis
 import Compass from '../../../commons/Device/WindDirection/Compass';
 import Anemometer from '../../../commons/Device/WindSpeed/Anemometer';
 import MediaPlayerDetail from '../../../commons/MediaPlayerDetail';
-import { AccessibilityLabel } from '../../../configs/Constants';
+import { AccessibilityLabel, WIDGET_TYPE } from '../../../configs/Constants';
 import { useSCContextSelector } from '../../../context';
 import { useRemoteControl } from '../../../hooks/IoT';
 import { useConfigGlobalState } from '../../../iot/states';
@@ -24,6 +24,8 @@ import VisualChart from './VisualChart';
 import { standardizeCameraScreenSize } from '../../../utils/Utils';
 import { Device } from '../../../configs';
 import DonutCharts from './DonutChart';
+import IFrame from '../../../commons/Widgets/IFrame/IFrame';
+import IFrameWithConfig from '../../../commons/Widgets/IFrameWithConfig/IFrameWithConfig';
 
 const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
   Device.screenWidth - 32
@@ -175,6 +177,26 @@ export const SensorDisplayItem = ({
           isWidgetOrder={isWidgetOrder}
         />
       );
+    case WIDGET_TYPE.iframe:
+      return (
+        <IFrame
+          doAction={doAction}
+          sensor={sensor}
+          id={idTemplate}
+          item={item}
+          isWidgetOrder={isWidgetOrder}
+        />
+      );
+    case WIDGET_TYPE.iframeWithConfig:
+      return (
+        <IFrameWithConfig
+          doAction={doAction}
+          sensor={sensor}
+          id={idTemplate}
+          item={item}
+          isWidgetOrder={isWidgetOrder}
+        />
+      );
     case 'history':
       return (
         <VisualChart

package/src/screens/Device/components/__test__/VisualChart.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import MockAdapter from 'axios-mock-adapter';
 import moment from 'moment';
-import { act, create } from 'react-test-renderer';
+import { act } from 'react-test-renderer';
 
 import VisualChart from '../VisualChart';
 import { API } from '../../../../configs';
@@ -11,14 +11,7 @@ import api from '../../../../utils/Apis/axios';
 import ChartAggregationOption from '../../../../commons/ChartAggregationOption';
 import DateTimeRangeChange from '../../../../commons/DateTimeRangeChange';
 import Highcharts from '../../../../commons/Highcharts';
-
-const render = async (component) => {
-  let tree;
-  await act(async () => {
-    tree = await create(component);
-  });
-  return tree;
-};
+import { render } from '../../../../../jest/render';
 
 const mockAxios = new MockAdapter(api.axiosInstance);
 

package/src/screens/UnitSummary/components/PowerConsumption/__test__/PowerConsumption.test.js

@@ -146,6 +146,25 @@ describe('Test PowerConsumption', () => {
     const instance = tree.root;
     const Todays = instance.findByType(Today);
     expect(Todays).toBeDefined();
+
+    const input_calculate_cost = instance.find(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.INPUT_CALCULATE_COST
+    );
+    await act(async () => {
+      input_calculate_cost.props.onChangeText('1000');
+    });
+    const button_calculate_cost = instance.find(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.BUTTON_CALCULATE_COST
+    );
+    await act(async () => {
+      button_calculate_cost.props.onPress();
+    });
+    const totalPrice = instance.find(
+      (el) => el.props.accessibilityLabel === AccessibilityLabel.TOTAL_PRICE
+    );
+    expect(totalPrice.props.children).toEqual('57.380 đ');
   });
 
   it('render with unsuccess fetch', async () => {