@eohjsc/react-native-smart-city 0.4.97 → 0.4.99

package/package.json

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

package/src/commons/ActionGroup/OnOffTemplate/index.js

@@ -9,8 +9,6 @@ import OnOffButtonTemplate from './OnOffButtonTemplate';
 import OnOffSimpleTemplate from './OnOffSimpleTemplate';
 import styles from './styles';
 
-let temp;
-
 const getComponent = (template) => {
   switch (template) {
     case 'on_off_button_action_template': // todo refactor later with backend
@@ -53,15 +51,18 @@ const OnOffTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
 
   const [isOn, setIsOn] = useState(false);
   const [tempIsOn, setTempIsOn] = useState(getIsOnValue());
-
-  const updateStatusFromPusher = useCallback(() => {
-    setTimeout(() => {
-      setTempIsOn(temp);
-    }, 3000);
+  const [timeoutId, setTimeoutId] = useState();
+  const [needUpdateTempIsOn, setNeedUpdateTempIsOn] = useState(false);
+
+  const refreshTempIsOn = useCallback(() => {
+    const timeout = setTimeout(() => {
+      setNeedUpdateTempIsOn(true);
+    }, 7000);
+    setTimeoutId(timeout);
   }, []);
 
   const triggerAction = useCallback(async () => {
-    const action_data = isOn ? action_off_data : action_on_data;
+    const action_data = tempIsOn ? action_off_data : action_on_data;
     if (!action_data) {
       return;
     }
@@ -76,10 +77,11 @@ const OnOffTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
         config_value: isOn ? 0 : 1,
       };
     }
-    setTempIsOn((prev) => !prev);
+    clearTimeout(timeoutId);
     await doAction(action_data, data);
-    updateStatusFromPusher(); // todo Bang read about this magic
-
+    setTempIsOn((prev) => !prev);
+    setNeedUpdateTempIsOn(false);
+    refreshTempIsOn();
     if (
       is_managed_by_backend &&
       config &&
@@ -88,15 +90,17 @@ const OnOffTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
       watchMultiConfigs([config]);
     }
   }, [
-    isOn,
+    tempIsOn,
     action_off_data,
     action_on_data,
-    device_type,
-    is_managed_by_backend,
     allow_config_store_value,
     config,
+    device_type,
+    timeoutId,
     doAction,
-    updateStatusFromPusher,
+    refreshTempIsOn,
+    is_managed_by_backend,
+    isOn,
   ]);
 
   useUnwatchLGDeviceConfigControl(sensor, [config]);
@@ -106,8 +110,8 @@ const OnOffTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
   }, [getIsOnValue]);
 
   useEffect(() => {
-    temp = isOn;
-  }, [isOn]);
+    needUpdateTempIsOn && setTempIsOn(getIsOnValue());
+  }, [getIsOnValue, needUpdateTempIsOn]);
 
   useEffect(() => {
     if (device_type !== DEVICE_TYPE.LG_THINQ) {

package/src/commons/ActionGroup/TerminalBoxTemplate.js

@@ -0,0 +1,182 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { IconOutline } from '@ant-design/icons-react-native';
+import Text from '../../commons/Text';
+import { useConfigGlobalState } from '../../iot/states';
+import styles from './TerminalBoxTemplateStyle';
+import _TextInput from '../Form/TextInput';
+import AccessibilityLabel from '../../configs/AccessibilityLabel';
+import moment from 'moment';
+import { useFetchConfigHistory } from '../UnitSummary/ConfigHistoryChart';
+import { ScrollView } from 'react-native';
+import { API } from '../../configs';
+
+const useNewMessage = (
+  newValue,
+  latestUpdatedFromMessage,
+  setAllMessages,
+  setLatestUpdatedFromMessage,
+  type
+) => {
+  useEffect(() => {
+    if (
+      !newValue ||
+      !newValue.last_updated ||
+      moment(newValue.last_updated).isSameOrBefore(latestUpdatedFromMessage)
+    ) {
+      return;
+    }
+    setAllMessages((prev) => [
+      ...prev,
+      { x: moment(), y: newValue.value, type },
+    ]);
+    setLatestUpdatedFromMessage(moment(newValue.last_updated));
+  }, [
+    newValue,
+    latestUpdatedFromMessage,
+    setAllMessages,
+    setLatestUpdatedFromMessage,
+    type,
+  ]);
+};
+
+const TerminalBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
+  const { label, configuration } = item;
+  const { action_data, from_config, to_config } = configuration;
+  const [configValues] = useConfigGlobalState('configValues');
+  const [value, setValue] = useState();
+  const [allMessages, setAllMessages] = useState([]);
+  const [latestUpdatedFromMessage, setLatestUpdatedFromMessage] = useState(
+    moment()
+  );
+  const [latestUpdatedToMessage, setLatestUpdatedToMessage] = useState(
+    moment()
+  );
+  const scrollViewRef = useRef();
+  const sendCommand = useCallback(() => {
+    doAction(action_data, JSON.stringify({ value: value }));
+    setValue('');
+  }, [doAction, action_data, value]);
+
+  const onInputChange = (e) => {
+    setValue(e);
+  };
+
+  const fromValue = useMemo(() => {
+    return configValues[from_config?.id];
+  }, [configValues, from_config]);
+
+  const toValue = useMemo(() => {
+    return configValues[to_config?.id];
+  }, [configValues, to_config]);
+
+  const configs = useMemo(() => {
+    if (!from_config || !to_config) {
+      return [];
+    }
+    return [from_config, to_config];
+  }, [from_config, to_config]);
+
+  const scrollToBottom = () => {
+    setTimeout(() => {
+      scrollViewRef.current.scrollToEnd({ animated: true });
+    }, 100);
+  };
+
+  const setMessages = useCallback(
+    (configMessages) => {
+      let messages = [];
+      configMessages.map((configMessage) => {
+        const type = configMessage.id === from_config.id ? 'from' : 'to';
+        messages = [
+          ...messages,
+          ...configMessage.data.map((item) => {
+            return { x: item.x, y: item.y, type };
+          }),
+        ];
+      });
+      messages = messages.sort((a, b) => {
+        return moment(a.x).diff(moment(b.x));
+      });
+      setAllMessages(messages);
+      scrollToBottom();
+    },
+    [from_config]
+  );
+
+  const fetchDataDisplayHistory = useFetchConfigHistory(
+    configs,
+    setMessages,
+    API.CONFIG.DISPLAY_HISTORY_V4()
+  );
+
+  useEffect(() => {
+    fetchDataDisplayHistory(moment().subtract(7, 'days'), moment());
+  }, [fetchDataDisplayHistory]);
+
+  useNewMessage(
+    fromValue,
+    latestUpdatedFromMessage,
+    setAllMessages,
+    setLatestUpdatedFromMessage,
+    'from'
+  );
+
+  useNewMessage(
+    toValue,
+    latestUpdatedToMessage,
+    setAllMessages,
+    setLatestUpdatedToMessage,
+    'to'
+  );
+  return (
+    <View style={(isWidgetOrder && styles.wrapOrderItem) || styles.wrap}>
+      <View>
+        <Text type="H4">{label}</Text>
+      </View>
+      <ScrollView
+        ref={scrollViewRef}
+        onContentSizeChange={() =>
+          scrollViewRef.current.scrollToEnd({ animated: true })
+        }
+        style={styles.scrollView}
+      >
+        {allMessages.map((item, index) => {
+          return (
+            <View
+              key={index}
+              style={item.type === 'to' ? styles.to : styles.from}
+            >
+              <Text>{item.y}</Text>
+              <Text>{moment(item.x).format('DD/MM/YYYY HH:mm:ss')}</Text>
+            </View>
+          );
+        })}
+      </ScrollView>
+      <View style={styles.iconAndText}>
+        <_TextInput
+          wrapStyle={styles.wrapInputStyle}
+          value={value}
+          onChange={onInputChange}
+          maxLength={255}
+        />
+        <TouchableOpacity
+          style={styles.iconAndTextOption}
+          onPress={sendCommand}
+          accessibilityLabel={AccessibilityLabel.TERMINAL_BOX_BUTTON_SEND}
+          disabled={!value}
+        >
+          <IconOutline name="send" size={20} />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+export default TerminalBoxTemplate;

package/src/commons/ActionGroup/TerminalBoxTemplateStyle.js

@@ -0,0 +1,54 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  wrapOrderItem: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 16,
+  },
+  wrap: {
+    padding: 16,
+    marginHorizontal: 16,
+    marginBottom: 16,
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    borderRadius: 10,
+    flex: 1,
+    flexDirection: 'column',
+  },
+  iconAndText: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+  },
+  iconAndTextOption: {
+    marginTop: 25,
+  },
+  wrapInputStyle: {
+    marginRight: 14,
+    width: '90%',
+  },
+  scrollView: {
+    marginTop: 13,
+    height: 250,
+  },
+  to: {
+    padding: 5,
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    borderRadius: 10,
+    marginBottom: 5,
+  },
+  from: {
+    alignItems: 'flex-end',
+    marginRight: 0,
+    backgroundColor: Colors.Blue18,
+    padding: 5,
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    borderRadius: 10,
+    marginBottom: 5,
+  },
+});

package/src/commons/ActionGroup/TextBoxTemplate.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import Text from '../../commons/Text';
@@ -10,14 +10,15 @@ import styles from './TextBoxTemplateStyle';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import _TextInput from '../Form/TextInput';
 import AccessibilityLabel from '../../configs/AccessibilityLabel';
+import useKeyboardAnimated from '../../hooks/Explore/useKeyboardAnimated';
 
 const TextBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
   const t = useTranslations();
+  const transY = useKeyboardAnimated();
   const { label, configuration } = item;
   const { action_data, config } = configuration;
   const [configValues] = useConfigGlobalState('configValues');
   const [value, setValue] = useState();
-
   const { stateAlert, hideAlertAction, onShowAlert } = useDropdownAction();
 
   const onDone = useCallback(() => {
@@ -25,9 +26,13 @@ const TextBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
     hideAlertAction();
   }, [doAction, action_data, value, hideAlertAction]);
 
-  const onInputChange = (value) => {
-    setValue(value);
+  const onInputChange = (e) => {
+    setValue(e);
   };
+  const valueText = useMemo(() => {
+    return configValues[config.id]?.value || '';
+  }, [config.id, configValues]);
+
   return (
     <View style={(isWidgetOrder && styles.wrapOrderItem) || styles.wrap}>
       <View>
@@ -35,7 +40,7 @@ const TextBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
       </View>
 
       <View style={styles.iconAndText}>
-        <Text type="H4">{configValues[config.id]?.value}</Text>
+        <Text type="H4">{valueText}</Text>
         <TouchableOpacity
           style={styles.iconAndTextOption}
           onPress={onShowAlert}
@@ -53,6 +58,7 @@ const TextBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
           rightButtonTitle={stateAlert.rightButton}
           rightButtonClick={onDone}
           rightDisabled={!value}
+          transY={transY}
         >
           <_TextInput
             wrapStyle={styles.wrapInputStyle}

package/src/commons/ActionGroup/__test__/TerminalBoxTemplate.test.js

@@ -0,0 +1,232 @@
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { act, create } from 'react-test-renderer';
+import { watchMultiConfigs } from '../../../iot/Monitor';
+import { AccessibilityLabel } from '../../../configs/Constants';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+import _TextInput from '../../Form/TextInput';
+import { API, Colors } from '../../../configs';
+import TerminalBoxTemplate from '../TerminalBoxTemplate';
+import MockAdapter from 'axios-mock-adapter';
+import api from '../../../utils/Apis/axios';
+import { ScrollView } from 'react-native';
+
+const mock = new MockAdapter(api.axiosInstance);
+const wrapComponent = (item, mockDoAction, isWidgetOrder = false) => (
+  <SCProvider initState={mockSCStore({})}>
+    <TerminalBoxTemplate
+      item={item}
+      doAction={mockDoAction}
+      isWidgetOrder={isWidgetOrder}
+    />
+  </SCProvider>
+);
+
+jest.mock('../../../iot/Monitor');
+
+jest.mock('../../../iot/states', () => ({
+  useConfigGlobalState: () => [{ 5: { value: 2 } }, null],
+}));
+
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useFocusEffect: jest.fn(),
+  };
+});
+
+describe('Test TerminalBoxTemplate', () => {
+  let displayItem;
+  let sensor;
+  let wrapper;
+  let data;
+
+  beforeEach(() => {
+    watchMultiConfigs.mockClear();
+    jest.useFakeTimers();
+    displayItem = {
+      id: 33909,
+      configuration_error: null,
+      is_configuration_ready: true,
+      configuration: {
+        from_config: {
+          id: 35490,
+          sensor_id: 18310,
+          chip_id: 4129,
+          color: '#000000',
+          standard: '',
+          measure: '',
+          unit: '',
+          data: [
+            {
+              x: '2024-02-28T07:53:57.828537Z',
+              y: null,
+            },
+          ],
+        },
+        to_config: {
+          id: 35491,
+          sensor_id: 18310,
+          chip_id: 4129,
+          color: '#000000',
+          standard: '',
+          measure: '',
+          unit: '',
+          data: [
+            {
+              x: '2024-02-28T07:53:57.828537Z',
+              y: null,
+            },
+          ],
+        },
+        action: 'e8d1de74-7609-4e04-b63d-e6a19389d608',
+        action_data: {
+          id: 33283,
+          name: 'String V4',
+          key: 'e8d1de74-7609-4e04-b63d-e6a19389d608',
+          icon: '',
+          icon_kit: null,
+          color: '#00979D',
+          home_assistant_action: null,
+          lg_action: null,
+          arduino_action: {
+            id: 8025,
+            pin: null,
+            value: 0,
+          },
+          modbus_action: null,
+          zigbee_action: null,
+          command_prefer_over_internet: true,
+          command_prefer_over_bluetooth: false,
+          command_prefer_over_googlehome: false,
+          allow_config_store_value_id: null,
+          end_device: {
+            id: 10161,
+            name: 'Terminal Box',
+            device_type: '',
+          },
+          sensor_id: 18310,
+          chip_id: 4129,
+          is_only_bluetooth: false,
+          googlehome_action: null,
+        },
+      },
+      template: 'TerminalBoxTemplate',
+      order: 0,
+      label: 'String Box',
+    };
+    sensor = {
+      name: 'Sensor name',
+      is_managed_by_backend: false,
+    };
+    data = {
+      configs: [
+        {
+          id: 35490,
+          head: [
+            {
+              x: '2024-02-28T07:53:57.787788Z',
+              y: null,
+            },
+          ],
+          tail: [
+            {
+              x: '2024-02-29T07:30:01.940166Z',
+              y: null,
+            },
+          ],
+          middle: {
+            ready: [],
+            not_ready: [],
+            channel: 'cache-4e37a226-c61c-4708-a00c-c22bd192b845',
+          },
+        },
+        {
+          id: 35491,
+          head: [
+            {
+              x: '2024-02-28T07:53:57.828537Z',
+              y: null,
+            },
+          ],
+          tail: [
+            {
+              x: '2024-02-29T01:42:14.488233Z',
+              y: null,
+            },
+          ],
+          middle: {
+            ready: [],
+            not_ready: [],
+            channel: 'cache-2d0806d7-5c15-4af0-8443-6ec6b54ba9cf',
+          },
+        },
+      ],
+    };
+  });
+
+  it('render template', async () => {
+    const mockDoAction = jest.fn();
+    mock.onGet(API.CONFIG.DISPLAY_HISTORY_V4()).reply(200, data);
+    await act(async () => {
+      wrapper = await create(wrapComponent(displayItem, mockDoAction));
+    });
+    jest.runAllTimers();
+
+    const instance = wrapper.root;
+    const views = instance.findAllByType(View);
+
+    expect(views[0].props.style).toEqual({
+      padding: 16,
+      marginHorizontal: 16,
+      marginBottom: 16,
+      borderWidth: 1,
+      borderColor: Colors.Gray4,
+      borderRadius: 10,
+      flex: 1,
+      flexDirection: 'column',
+    });
+    const scroll = instance.findByType(ScrollView);
+    await act(async () => {
+      await scroll.props.onContentSizeChange();
+    });
+    const textInput = instance.findByType(_TextInput);
+    await act(async () => {
+      await textInput.props.onChange('123');
+    });
+    const buttonSend = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.TERMINAL_BOX_BUTTON_SEND &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      await buttonSend.props.onPress();
+    });
+
+    expect(mockDoAction).toHaveBeenCalledWith(
+      displayItem.configuration.action_data,
+      JSON.stringify({ value: '123' })
+    );
+  });
+  it('render template isWidgetOrder change position', async () => {
+    const mockDoAction = jest.fn();
+    sensor.is_managed_by_backend = true;
+    displayItem.configuration.from_config = null;
+    mock.onGet(API.CONFIG.DISPLAY_HISTORY_V4()).reply(200, data);
+    await act(async () => {
+      wrapper = await create(wrapComponent(displayItem, mockDoAction, true));
+    });
+    const instance = wrapper.root;
+    const views = instance.findAllByType(View);
+
+    expect(views[0].props.style).toEqual({
+      flex: 1,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      padding: 16,
+    });
+  });
+});

package/src/commons/ActionGroup/__test__/TextBoxTemplate.test.js

@@ -34,7 +34,7 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
-describe('Test OptionsDropdownActionTemplate', () => {
+describe('Test TextBoxTemplate', () => {
   const actionData = {
     color: '#00979D',
     command_prefer_over_bluetooth: true,

package/src/commons/ActionGroup/index.js

@@ -14,6 +14,7 @@ import OnOffSmartLock from './OnOffSmartLock/OnOffSmartLock';
 import TwoButtonTemplate from './TwoButtonTemplate';
 import SwitchButtonTemplate from './OnOffTemplate/SwitchButtonTemplate';
 import TextBoxTemplate from './TextBoxTemplate';
+import TerminalBoxTemplate from './TerminalBoxTemplate';
 
 export const getActionComponent = (template) => {
   switch (template) {
@@ -49,6 +50,8 @@ export const getActionComponent = (template) => {
       return SwitchButtonTemplate;
     case 'TextBoxTemplate':
       return TextBoxTemplate;
+    case 'TerminalBoxTemplate':
+      return TerminalBoxTemplate;
     default:
       return null;
   }
@@ -56,7 +59,6 @@ export const getActionComponent = (template) => {
 
 const ActionGroup = (params = {}) => {
   const { item } = params;
-
   const ButtonGroupComponent = useMemo(() => {
     return getActionComponent(item?.template);
   }, [item?.template]);

package/src/commons/Device/ConnectedViewHeader.js

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors } from '../../configs';
@@ -49,7 +49,6 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     justifyContent: 'center',
     alignItems: 'center',
-    marginTop: Platform.OS === 'ios' ? 25 : 0,
   },
   connectStatus: {
     flexDirection: 'row',

package/src/commons/OneTapTemplate/SliderRangeActionTemplate.js

@@ -20,8 +20,8 @@ const SliderRangeActionTemplate = ({ device, item, onSelectAction }) => {
   const [configValues] = useConfigGlobalState('configValues');
   const [value, setValue] = useState();
 
-  const onInputChange = (value) => {
-    setValue(value);
+  const onInputChange = (e) => {
+    setValue(e);
   };
 
   useEffect(() => {
@@ -30,7 +30,7 @@ const SliderRangeActionTemplate = ({ device, item, onSelectAction }) => {
   }, [configValues, config]);
 
   const onPressDone = useCallback(() => {
-    let actionData = { value: value };
+    let actionData = { value: parseFloat(value) };
     setValue(value);
     onSelectAction &&
       onSelectAction({

package/src/commons/OneTapTemplate/TerminalBoxActionTemplate.js

@@ -0,0 +1,87 @@
+import React, { memo, useState, useCallback } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import styles from './TextBoxActionTemplateStyles';
+import { Colors } from '../../configs';
+import SelectActionCard from '../SelectActionCard';
+import Text from '../Text';
+import { AccessibilityLabel } from '../../configs/Constants';
+import { ModalCustom } from '../Modal';
+import _TextInput from '../Form/TextInput';
+
+const TerminalBoxActionTemplate = ({ device, item, onSelectAction }) => {
+  const t = useTranslations();
+  const [visible, setVisible] = useState(false);
+  const onClose = () => setVisible(false);
+  const onPress = () => setVisible(true);
+  const { configuration, template, title } = item;
+  const { action } = configuration;
+  const [value, setValue] = useState();
+  const onInputChange = (e) => {
+    setValue(e);
+  };
+
+  const onPressDone = useCallback(() => {
+    let actionData = { value: value };
+    setValue(value);
+    onSelectAction &&
+      onSelectAction({
+        index: item.index,
+        action,
+        data: actionData,
+        template,
+      });
+    onClose();
+  }, [value, onSelectAction, item.index, action, template]);
+
+  return (
+    <>
+      <SelectActionCard onPress={onPress} action={value} title={title} />
+      <ModalCustom
+        isVisible={visible}
+        onBackButtonPress={onClose}
+        onBackdropPress={onClose}
+      >
+        <View style={styles.popoverStyle}>
+          <View>
+            <Text type="H4" bold style={styles.textWithLine}>
+              {t('enter_parameters')}
+            </Text>
+            <View style={styles.modalContent}>
+              <_TextInput
+                wrapStyle={styles.wrapInputStyle}
+                value={value}
+                onChange={onInputChange}
+              />
+            </View>
+            <View style={styles.wrapButton}>
+              <TouchableOpacity
+                onPress={onClose}
+                accessibilityLabel={AccessibilityLabel.TEXT_BOX_BUTTON_CANCEL}
+              >
+                <Text type="H4" bold color={Colors.Primary}>
+                  {t('cancel')}
+                </Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={onPressDone}
+                accessibilityLabel={AccessibilityLabel.TEXT_BOX_BUTTON_DONE}
+                disabled={!value}
+              >
+                <Text
+                  type="H4"
+                  bold
+                  color={!!value ? Colors.Primary : Colors.Gray}
+                >
+                  {t('done')}
+                </Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+      </ModalCustom>
+    </>
+  );
+};
+
+export default memo(TerminalBoxActionTemplate);

package/src/commons/OneTapTemplate/TextBoxActionTemplate.js

@@ -20,8 +20,8 @@ const TextBoxActionTemplate = ({ device, item, onSelectAction }) => {
   const [configValues] = useConfigGlobalState('configValues');
   const [value, setValue] = useState();
 
-  const onInputChange = (value) => {
-    setValue(value);
+  const onInputChange = (e) => {
+    setValue(e);
   };
 
   useEffect(() => {

package/src/commons/OneTapTemplate/__test__/SliderRangeActionTemplate.test.js

@@ -64,7 +64,7 @@ describe('Test SliderRangeActionTemplate', () => {
     });
     expect(mockOnSelectAction).toHaveBeenCalledWith({
       action: 'b498234c-6c1a-452d-a1d1-87a314c20528',
-      data: { value: '123' },
+      data: { value: 123 },
       index: undefined,
       template: 'slider_range_template',
     });

package/src/commons/OneTapTemplate/__test__/TerminalBoxActionTemplate.test.js

@@ -0,0 +1,118 @@
+import React from 'react';
+import { create, act } from 'react-test-renderer';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import { TouchableOpacity } from 'react-native';
+import { AccessibilityLabel } from '../../../configs/Constants';
+import SelectActionCard from '../../SelectActionCard';
+import _TextInput from '../../Form/TextInput';
+import TerminalBoxActionTemplate from '../TerminalBoxActionTemplate';
+
+const mockOnSelectAction = jest.fn();
+
+const wrapComponent = (item, params = {}) => (
+  <SCProvider initState={mockSCStore({})}>
+    <TerminalBoxActionTemplate
+      item={item}
+      onSelectAction={mockOnSelectAction}
+      {...params}
+    />
+  </SCProvider>
+);
+
+describe('Test TerminalBoxActionTemplate', () => {
+  let tree;
+  let data = {
+    title: '',
+    template: 'TerminalBoxTemplate',
+    configuration: {
+      action_data: {
+        id: 33283,
+        key: 'e8d1de74-7609-4e04-b63d-e6a19389d608',
+        icon: '',
+        name: 'String',
+        color: '#00979D',
+      },
+      from_config: {
+        id: 35490,
+        data: [],
+        unit: '',
+        color: '#000000',
+        chip_id: 4129,
+      },
+      to_config: {
+        id: 35491,
+        data: [],
+        unit: '',
+        color: '#000000',
+        chip_id: 4129,
+      },
+      action: 'b498234c-6c1a-452d-a1d1-87a314c20528',
+    },
+  };
+
+  beforeEach(() => {
+    mockOnSelectAction.mockClear();
+  });
+
+  const renderOptions = async (params = {}) => {
+    await act(async () => {
+      tree = await create(wrapComponent(data, params));
+    });
+    const instance = tree.root;
+    const card = instance.findByType(SelectActionCard);
+    await act(async () => {
+      card.props.onPress();
+    });
+    return instance;
+  };
+
+  it('Test onPress Done', async () => {
+    const instance = await renderOptions();
+    const textInput = instance.findByType(_TextInput);
+    await act(async () => {
+      await textInput.props.onChange('123');
+    });
+    const touchableOpacity = instance.find(
+      (item) =>
+        item.props.accessibilityLabel ===
+          AccessibilityLabel.TEXT_BOX_BUTTON_DONE &&
+        item.type === TouchableOpacity
+    );
+    await act(async () => {
+      touchableOpacity.props.onPress();
+    });
+    expect(mockOnSelectAction).toHaveBeenCalledWith({
+      action: 'b498234c-6c1a-452d-a1d1-87a314c20528',
+      data: { value: '123' },
+      index: undefined,
+      template: 'TerminalBoxTemplate',
+    });
+  });
+
+  it('Test onPress Cancel', async () => {
+    const instance = await renderOptions();
+    const textInput = instance.findByType(_TextInput);
+    await act(async () => {
+      await textInput.props.onChange('');
+    });
+    const touchableDone = instance.find(
+      (item) =>
+        item.props.accessibilityLabel ===
+          AccessibilityLabel.TEXT_BOX_BUTTON_DONE &&
+        item.type === TouchableOpacity
+    );
+    expect(touchableDone.props.disabled).toBeTruthy();
+
+    const touchableOpacity = instance.find(
+      (item) =>
+        item.props.accessibilityLabel ===
+          AccessibilityLabel.TEXT_BOX_BUTTON_CANCEL &&
+        item.type === TouchableOpacity
+    );
+    await act(async () => {
+      touchableOpacity.props.onPress();
+    });
+    expect(mockOnSelectAction).not.toHaveBeenCalled();
+  });
+});

package/src/commons/Sharing/WrapHeaderScrollable.js

@@ -119,7 +119,7 @@ const styles = StyleSheet.create({
     }),
   },
   contentContainerStyle: {
-    paddingBottom: heightHeader,
+    paddingBottom: heightHeader + 230,
   },
   bottomLoading: {
     height: 32,

package/src/commons/UnitSummary/ConfigHistoryChart/index.js

@@ -17,7 +17,11 @@ const fetchDataS3 = async (url) => {
   return data;
 };
 
-export const useFetchConfigHistory = (configs, setChartData) => {
+export const useFetchConfigHistory = (
+  configs,
+  setChartData,
+  endpoint = API.CONFIG.DISPLAY_HISTORY_V3()
+) => {
   const fetchDataDisplayHistory = useCallback(
     async (startDate, endDate) => {
       if (!configs.length || !startDate || !endDate) {
@@ -33,24 +37,19 @@ export const useFetchConfigHistory = (configs, setChartData) => {
         params.append('configs', item.id);
       });
 
-      params.append(
-        'date_from',
-        startDate.subtract(7, 'hours').format('YYYY-MM-DDTHH:mm:ss')
-      );
-      params.append(
-        'date_to',
-        endDate.subtract(7, 'hours').format('YYYY-MM-DDTHH:mm:ss')
-      );
+      const timezone = moment().utcOffset();
+      startDate = startDate.subtract(timezone, 'minutes');
+      endDate = endDate.subtract(timezone, 'minutes');
 
-      const { success, data } = await axiosGet(
-        API.CONFIG.DISPLAY_HISTORY_V3(),
-        {
-          params,
-        }
-      );
+      params.append('date_from', startDate.format('YYYY-MM-DDTHH:mm:ss'));
+      params.append('date_to', endDate.format('YYYY-MM-DDTHH:mm:ss'));
+
+      const { success, data } = await axiosGet(endpoint, {
+        params,
+      });
       await updateConfigChart(success, data, configs, setChartData);
     },
-    [configs, setChartData]
+    [configs, endpoint, setChartData]
   );
   return fetchDataDisplayHistory;
 };

package/src/configs/API.js

@@ -83,6 +83,7 @@ const API = {
   },
   CONFIG: {
     DISPLAY_HISTORY_V3: () => '/chip_manager/configs/value_history_v3/',
+    DISPLAY_HISTORY_V4: () => '/chip_manager/configs/value_history_v4/',
   },
   AUTOMATE: {
     ACTION_ONE_TAP: (id) => `/property_manager/automate/${id}/action_one_tap/`,

package/src/configs/AccessibilityLabel.js

@@ -564,6 +564,8 @@ export default {
   TEXT_BOX_BUTTON_EDIT: 'TEXT_BOX_BUTTON_EDIT',
   TEXT_BOX_BUTTON_CANCEL: 'TEXT_BOX_BUTTON_CANCEL',
   TEXT_BOX_BUTTON_DONE: 'TEXT_BOX_BUTTON_DONE',
+  //TerminalBoxTemplate
+  TERMINAL_BOX_BUTTON_SEND: 'TERMINAL_BOX_BUTTON_SEND',
   // OnOffButtonAction
   ON_OFF_BUTTON_ACTION_TITLE: 'ON_OFF_BUTTON_ACTION_TITLE',
 

package/src/configs/Colors.js

@@ -122,6 +122,7 @@ export const Colors = {
   Blue15: '#99CCFF',
   Blue16: '#0059B2',
   Blue17: '#00A4B2',
+  Blue18: '#BAE7FF',
   //Range Volcano:
   Volcano3: '#FFBB96',
   Summer: '#FFB24A',

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

@@ -15,6 +15,7 @@ import moment from 'moment';
 import { ToastBottomHelper } from '../../../utils/Utils';
 import TextBoxActionTemplate from '../../../commons/OneTapTemplate/TextBoxActionTemplate';
 import SliderRangeActionTemplate from '../../../commons/OneTapTemplate/SliderRangeActionTemplate';
+import TerminalBoxActionTemplate from '../../../commons/OneTapTemplate/TerminalBoxActionTemplate';
 
 const RenderActionItem = ({ device, item, handleOnSelectAction, index, t }) => {
   item.index = index;
@@ -78,6 +79,15 @@ const RenderActionItem = ({ device, item, handleOnSelectAction, index, t }) => {
           onSelectAction={handleOnSelectAction}
         />
       );
+    case 'TerminalBoxTemplate':
+      return (
+        <TerminalBoxActionTemplate
+          key={item.id}
+          device={device}
+          item={item}
+          onSelectAction={handleOnSelectAction}
+        />
+      );
     default:
       ToastBottomHelper.error(
         t('template_not_supported', { template: item.template }),

package/src/screens/Automate/ScriptDetail/index.js

@@ -324,6 +324,7 @@ const Item = ({ item, index, enableScript, t }) => {
       station_name,
       sensor_name,
       action_name,
+      data,
     } = action_script;
     return (
       <View style={styles.wrapItem}>
@@ -358,7 +359,7 @@ const Item = ({ item, index, enableScript, t }) => {
               {sensor_name}
             </Text>
             <Text numberOfLines={1} type="H4" color={color}>
-              {action_name}
+              {action_name} {data}
             </Text>
           </View>
         </View>

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

@@ -171,6 +171,7 @@ export const SensorDisplayItem = ({
     case 'two_button_action_template':
     case 'switch_button_action_template':
     case 'TextBoxTemplate':
+    case 'TerminalBoxTemplate':
       return (
         <ActionGroup
           accessibilityLabel={AccessibilityLabel.DEVICE_DETAIL_ACTION_GROUP}

package/src/screens/Device/detail.js

@@ -500,29 +500,34 @@ const DeviceDetail = ({ route }) => {
   useFocusEffect(
     useCallback(() => {
       let params = new URLSearchParams();
-      let configIds = [];
-      // todo Bang refactor widgets like dashboard
-      display.items.map((item) => {
-        if (!item.configuration) {
+      let configIdsSet = new Set();
+
+      display.items.forEach((item) => {
+        const { configuration } = item;
+
+        if (!configuration) {
           return;
         }
-        item.configuration.configs?.map((config) => {
-          if (!configIds.includes(config.id)) {
-            configIds.push(config.id);
-          }
-        });
-        item.configuration.options?.map((option) => {
-          if (!configIds.includes(option.config)) {
-            configIds.push(option.config);
-          }
-        });
-        if (item.configuration.config) {
-          const config = item.configuration.config;
-          const configId = config?.id ? config?.id : config;
-          !configIds.includes(configId) && configIds.push(configId);
+
+        const { configs, options, config, from_config, to_config } =
+          configuration;
+
+        configs?.forEach((config) => configIdsSet.add(config.id));
+        options?.forEach((option) => configIdsSet.add(option.config));
+
+        if (config) {
+          const configId = config.id || config;
+          configIdsSet.add(configId);
+        }
+        if (from_config) {
+          configIdsSet.add(from_config.id);
+        }
+        if (to_config) {
+          configIdsSet.add(to_config.id);
         }
       });
 
+      let configIds = Array.from(configIdsSet);
       configIds = configIds.filter(Boolean);
       configIdsTemp.current = configIds;
 

package/src/utils/I18n/translations/en.js

@@ -1467,7 +1467,7 @@ export default {
   'customize...': 'Customize...',
   uri_invalid: 'URI invalid',
   when_value_is: 'When value is',
-  template_not_supported: '"{template}" not yet supported',
+  template_not_supported: 'Widget "{template}" not yet supported',
   invited_user: 'Invited user {user}',
   enter_value: 'Enter value',
   enter_parameters: 'Enter parameters',

package/src/utils/I18n/translations/vi.js

@@ -1477,7 +1477,7 @@ export default {
   'customize...': 'Tùy chỉnh...',
   uri_invalid: 'URI không hợp lệ',
   when_value_is: 'Khi giá trị là',
-  template_not_supported: '"{template}" chưa được hỗ trợ',
+  template_not_supported: 'Tiện ích "{template}" chưa được hỗ trợ',
   invited_user: 'Đã mời người dùng {user}',
   enter_value: 'Nhập giá trị',
   enter_parameters: 'Nhập thông số',