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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.4.95",
+  "version": "0.4.97",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -196,13 +196,13 @@
     "react-native-super-grid": "^4.0.3",
     "react-native-svg": "^12.1.0",
     "react-native-toast-message": "^2.1.1",
-    "react-native-udp": "^4.1.7",
+    "react-native-udp": "4.1.3",
     "react-native-version-check": "^3.4.2",
     "react-native-vlc-media-player": "^1.0.41",
     "react-native-webview": "11.22.7",
     "react-native-wheel-color-picker": "^1.2.0",
     "react-native-wheel-scrollview-picker": "^1.2.2",
-    "react-native-wifi-reborn": "^4.11.0",
+    "react-native-wifi-reborn": "4.5.0",
     "react-navigation": "^2.2.0",
     "string-format": "^2.0.0",
     "sync-directory": "^5.1.7",

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

@@ -76,10 +76,7 @@ const OnOffTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
         config_value: isOn ? 0 : 1,
       };
     }
-
-    if (device_type === DEVICE_TYPE.LG_THINQ) {
-      setTempIsOn((prev) => !prev);
-    }
+    setTempIsOn((prev) => !prev);
     await doAction(action_data, data);
     updateStatusFromPusher(); // todo Bang read about this magic
 

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -91,10 +91,7 @@ const SliderRangeTemplate = memo(
       <View
         style={(isWidgetOrder && styles.wrapOrderItem) || styles.viewBrightness}
       >
-        <Text type="H4" style={styles.LeftTextBrightness}>
-          {item?.title || item?.label || t('brightness')}
-        </Text>
-
+        <Text type="H4">{item?.title || item?.label || t('brightness')}</Text>
         <View style={styles.wrap}>
           <Slider
             step={1}

package/src/commons/ActionGroup/TextBoxTemplate.js

@@ -0,0 +1,68 @@
+import React, { useCallback, useState } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { IconOutline } from '@ant-design/icons-react-native';
+import Text from '../../commons/Text';
+import { AlertAction } from '../../commons';
+import { useDropdownAction } from './hooks/useDropdownAction';
+import { useConfigGlobalState } from '../../iot/states';
+import styles from './TextBoxTemplateStyle';
+
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import _TextInput from '../Form/TextInput';
+import AccessibilityLabel from '../../configs/AccessibilityLabel';
+
+const TextBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
+  const t = useTranslations();
+  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(() => {
+    doAction(action_data, JSON.stringify({ value: value }));
+    hideAlertAction();
+  }, [doAction, action_data, value, hideAlertAction]);
+
+  const onInputChange = (value) => {
+    setValue(value);
+  };
+  return (
+    <View style={(isWidgetOrder && styles.wrapOrderItem) || styles.wrap}>
+      <View>
+        <Text type="H4">{label}</Text>
+      </View>
+
+      <View style={styles.iconAndText}>
+        <Text type="H4">{configValues[config.id]?.value}</Text>
+        <TouchableOpacity
+          style={styles.iconAndTextOption}
+          onPress={onShowAlert}
+          accessibilityLabel={AccessibilityLabel.TEXT_BOX_BUTTON_EDIT}
+        >
+          <IconOutline name="edit" size={20} />
+        </TouchableOpacity>
+        <AlertAction
+          visible={stateAlert.visible}
+          hideModal={hideAlertAction}
+          title={t('enter_parameters')}
+          message={stateAlert.message}
+          leftButtonTitle={stateAlert.leftButton}
+          leftButtonClick={hideAlertAction}
+          rightButtonTitle={stateAlert.rightButton}
+          rightButtonClick={onDone}
+          rightDisabled={!value}
+        >
+          <_TextInput
+            wrapStyle={styles.wrapInputStyle}
+            value={value}
+            onChange={onInputChange}
+          />
+        </AlertAction>
+      </View>
+    </View>
+  );
+};
+
+export default TextBoxTemplate;

package/src/commons/ActionGroup/TextBoxTemplateStyle.js

@@ -0,0 +1,37 @@
+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',
+    justifyContent: 'space-between',
+  },
+  iconAndText: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  iconAndTextOption: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+  },
+  wrapInputStyle: {
+    marginRight: 14,
+    paddingLeft: 14,
+  },
+});

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

@@ -0,0 +1,130 @@
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { act, create } from 'react-test-renderer';
+import { watchMultiConfigs } from '../../../iot/Monitor';
+import { AlertAction } from '../..';
+import { AccessibilityLabel } from '../../../configs/Constants';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+import TextBoxTemplate from '../TextBoxTemplate';
+import _TextInput from '../../Form/TextInput';
+import { Colors } from '../../../configs';
+
+const wrapComponent = (item, mockDoAction, isWidgetOrder = false) => (
+  <SCProvider initState={mockSCStore({})}>
+    <TextBoxTemplate
+      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 OptionsDropdownActionTemplate', () => {
+  const actionData = {
+    color: '#00979D',
+    command_prefer_over_bluetooth: true,
+    command_prefer_over_googlehome: false,
+    command_prefer_over_internet: false,
+    googlehome_actions: [],
+    icon: 'caret-up',
+    id: 20,
+    key: '5ed1d4dc-a905-47cd-b0c9-f979644bd21a',
+  };
+
+  let displayItem;
+  let sensor;
+  let wrapper;
+
+  beforeEach(() => {
+    watchMultiConfigs.mockClear();
+    displayItem = {
+      label: 'label',
+      configuration: {
+        title: 'Fan Speed',
+        action_data: actionData,
+        config: { id: 5 },
+        icon: 'slack',
+      },
+    };
+    sensor = {
+      name: 'Sensor name',
+      is_managed_by_backend: false,
+    };
+  });
+
+  it('render template', async () => {
+    const mockDoAction = jest.fn();
+    await act(async () => {
+      wrapper = await create(wrapComponent(displayItem, mockDoAction));
+    });
+    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',
+      justifyContent: 'space-between',
+    });
+    const buttonEdit = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.TEXT_BOX_BUTTON_EDIT &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      await buttonEdit.props.onPress();
+    });
+    const alertAction = instance.findByType(AlertAction);
+    expect(alertAction.props.visible).toBeTruthy();
+    expect(alertAction.props.rightDisabled).toBeTruthy();
+    const textInput = instance.findByType(_TextInput);
+    await act(async () => {
+      await textInput.props.onChange('123');
+    });
+    expect(alertAction.props.rightDisabled).toBeFalsy();
+    await act(async () => {
+      await alertAction.props.rightButtonClick();
+    });
+    expect(mockDoAction).toHaveBeenCalledWith(
+      actionData,
+      JSON.stringify({ value: '123' })
+    );
+  });
+  it('render template isWidgetOrder change position', async () => {
+    const mockDoAction = jest.fn();
+    sensor.is_managed_by_backend = true;
+    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/index.js

@@ -13,6 +13,7 @@ import SliderRangeTemplate from './SliderRangeTemplate';
 import OnOffSmartLock from './OnOffSmartLock/OnOffSmartLock';
 import TwoButtonTemplate from './TwoButtonTemplate';
 import SwitchButtonTemplate from './OnOffTemplate/SwitchButtonTemplate';
+import TextBoxTemplate from './TextBoxTemplate';
 
 export const getActionComponent = (template) => {
   switch (template) {
@@ -46,6 +47,8 @@ export const getActionComponent = (template) => {
       return TwoButtonTemplate;
     case 'switch_button_action_template':
       return SwitchButtonTemplate;
+    case 'TextBoxTemplate':
+      return TextBoxTemplate;
     default:
       return null;
   }

package/src/commons/AlertAction/index.js

@@ -23,6 +23,7 @@ const AlertAction = ({
   boxLeftButtonStyle,
   boxRightButtonStyle,
   transY = 0,
+  rightDisabled = false,
 }) => {
   const [keyboardAnim] = useState(new Animated.Value(0));
 
@@ -82,6 +83,7 @@ const AlertAction = ({
             accessibilityLabelPrefix={accessibilityLabelPrefix}
             wrapStyle={styles.wrapViewButtonStyle}
             disableKeyBoardAnimated
+            rightDisabled={rightDisabled}
           />
         </View>
       </Animated.View>

package/src/commons/OneTapTemplate/OptionsDropdownActionTemplateStyles.js

@@ -44,7 +44,4 @@ export default StyleSheet.create({
     marginBottom: 24,
     marginTop: 16,
   },
-  flexContent: {
-    //   flexDirection: 'row',
-  },
 });

package/src/commons/OneTapTemplate/SliderRangeActionTemplate.js

@@ -0,0 +1,97 @@
+import React, { memo, useState, useCallback, useEffect } 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 { useConfigGlobalState } from '../../iot/states';
+import { AccessibilityLabel } from '../../configs/Constants';
+import { ModalCustom } from '../Modal';
+import _TextInput from '../Form/TextInput';
+
+const SliderRangeActionTemplate = ({ 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 { config, action } = configuration;
+  const [configValues] = useConfigGlobalState('configValues');
+  const [value, setValue] = useState();
+
+  const onInputChange = (value) => {
+    setValue(value);
+  };
+
+  useEffect(() => {
+    const configValue = configValues[config.id]?.value;
+    setValue(configValue);
+  }, [configValues, config]);
+
+  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_value')}
+            </Text>
+            <View style={styles.modalContent}>
+              <_TextInput
+                wrapStyle={styles.wrapInputStyle}
+                value={value}
+                onChange={onInputChange}
+                keyboardType={'numeric'}
+              />
+            </View>
+            <View style={styles.wrapButton}>
+              <TouchableOpacity
+                onPress={onClose}
+                accessibilityLabel={AccessibilityLabel.BUTTON_CANCEL}
+              >
+                <Text type="H4" bold color={Colors.Primary}>
+                  {t('cancel')}
+                </Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={onPressDone}
+                accessibilityLabel={AccessibilityLabel.BUTTON_DONE}
+                disabled={!value}
+              >
+                <Text
+                  type="H4"
+                  bold
+                  color={!value ? Colors.Gray : Colors.Primary}
+                >
+                  {t('done')}
+                </Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+      </ModalCustom>
+    </>
+  );
+};
+
+export default memo(SliderRangeActionTemplate);

package/src/commons/OneTapTemplate/TextBoxActionTemplate.js

@@ -0,0 +1,96 @@
+import React, { memo, useState, useCallback, useEffect } 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 { useConfigGlobalState } from '../../iot/states';
+import { AccessibilityLabel } from '../../configs/Constants';
+import { ModalCustom } from '../Modal';
+import _TextInput from '../Form/TextInput';
+
+const TextBoxActionTemplate = ({ 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 { config, action } = configuration;
+  const [configValues] = useConfigGlobalState('configValues');
+  const [value, setValue] = useState();
+
+  const onInputChange = (value) => {
+    setValue(value);
+  };
+
+  useEffect(() => {
+    const configValue = configValues[config.id]?.value;
+
+    setValue(configValue);
+  }, [configValues, config]);
+
+  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(TextBoxActionTemplate);

package/src/commons/OneTapTemplate/TextBoxActionTemplateStyles.js

@@ -0,0 +1,28 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  popoverStyle: {
+    width: '100%',
+    backgroundColor: Colors.White,
+    borderRadius: 10,
+  },
+  textWithLine: {
+    padding: 16,
+  },
+  modalContent: {
+    paddingBottom: 26,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  wrapInputStyle: {
+    width: '90%',
+  },
+  wrapButton: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    marginBottom: 24,
+  },
+});

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

@@ -0,0 +1,96 @@
+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 SliderRangeActionTemplate from '../SliderRangeActionTemplate';
+
+const mockOnSelectAction = jest.fn();
+
+const wrapComponent = (item, params = {}) => (
+  <SCProvider initState={mockSCStore({})}>
+    <SliderRangeActionTemplate
+      item={item}
+      onSelectAction={mockOnSelectAction}
+      {...params}
+    />
+  </SCProvider>
+);
+
+describe('Test SliderRangeActionTemplate', () => {
+  let tree;
+  let data = {
+    title: 'Slider range',
+    template: 'slider_range_template',
+    configuration: {
+      keep_track_config: true,
+      config: { id: 1023 },
+      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.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: 'slider_range_template',
+    });
+  });
+
+  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.BUTTON_DONE &&
+        item.type === TouchableOpacity
+    );
+    expect(touchableDone.props.disabled).toBeTruthy();
+
+    const touchableOpacity = instance.find(
+      (item) =>
+        item.props.accessibilityLabel === AccessibilityLabel.BUTTON_CANCEL &&
+        item.type === TouchableOpacity
+    );
+    await act(async () => {
+      touchableOpacity.props.onPress();
+    });
+    expect(mockOnSelectAction).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,99 @@
+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 TextBoxActionTemplate from '../TextBoxActionTemplate';
+import _TextInput from '../../Form/TextInput';
+
+const mockOnSelectAction = jest.fn();
+
+const wrapComponent = (item, params = {}) => (
+  <SCProvider initState={mockSCStore({})}>
+    <TextBoxActionTemplate
+      item={item}
+      onSelectAction={mockOnSelectAction}
+      {...params}
+    />
+  </SCProvider>
+);
+
+describe('Test TextBoxActionTemplate', () => {
+  let tree;
+  let data = {
+    title: '',
+    template: 'TextBoxTemplate',
+    configuration: {
+      keep_track_config: true,
+      config: { id: 1023 },
+      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: 'TextBoxTemplate',
+    });
+  });
+
+  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/configs/AccessibilityLabel.js

@@ -497,6 +497,7 @@ export default {
   CONNECTED_GATEWAY_UNIT_NAME: 'CONNECTED_GATEWAY_UNIT_NAME',
   CONNECTED_GATEWAY_CHIP_NAME: 'CONNECTED_GATEWAY_CHIP_NAME',
   BUTTON_DONE: 'BUTTON_DONE',
+  BUTTON_CANCEL: 'BUTTON_CANCEL',
 
   // Add New Device
   ADD_NEW_DEVICE_ADD: 'ADD_NEW_DEVICE_ADD',
@@ -559,7 +560,10 @@ export default {
   NUMBER_UP_DOWN_ACTION_DONE: 'NUMBER_UP_DOWN_ACTION_DONE',
   NUMBER_ACTION_UP: 'NUMBER_ACTION_UP',
   NUMBER_ACTION_DOWN: 'NUMBER_ACTION_DOWN',
-
+  //TestBoxTemplate
+  TEXT_BOX_BUTTON_EDIT: 'TEXT_BOX_BUTTON_EDIT',
+  TEXT_BOX_BUTTON_CANCEL: 'TEXT_BOX_BUTTON_CANCEL',
+  TEXT_BOX_BUTTON_DONE: 'TEXT_BOX_BUTTON_DONE',
   // OnOffButtonAction
   ON_OFF_BUTTON_ACTION_TITLE: 'ON_OFF_BUTTON_ACTION_TITLE',
 

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

@@ -13,6 +13,8 @@ import Routes from '../../../utils/Route';
 import NewActionWrapper from './NewActionWrapper';
 import moment from 'moment';
 import { ToastBottomHelper } from '../../../utils/Utils';
+import TextBoxActionTemplate from '../../../commons/OneTapTemplate/TextBoxActionTemplate';
+import SliderRangeActionTemplate from '../../../commons/OneTapTemplate/SliderRangeActionTemplate';
 
 const RenderActionItem = ({ device, item, handleOnSelectAction, index, t }) => {
   item.index = index;
@@ -58,6 +60,24 @@ const RenderActionItem = ({ device, item, handleOnSelectAction, index, t }) => {
           onSelectAction={handleOnSelectAction}
         />
       );
+    case 'slider_range_template':
+      return (
+        <SliderRangeActionTemplate
+          key={item.id}
+          device={device}
+          item={item}
+          onSelectAction={handleOnSelectAction}
+        />
+      );
+    case 'TextBoxTemplate':
+      return (
+        <TextBoxActionTemplate
+          key={item.id}
+          device={device}
+          item={item}
+          onSelectAction={handleOnSelectAction}
+        />
+      );
     default:
       ToastBottomHelper.error(
         t('template_not_supported', { template: item.template }),

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

@@ -43,7 +43,9 @@ const NewActionWrapper = ({ name, children, canNext, onNext, nextTitle }) => {
         isShowSeparator
         wrapTitleStyle={styles.wrapTitleStyle}
       />
-      <KeyboardAwareScrollView>{children}</KeyboardAwareScrollView>
+      <KeyboardAwareScrollView contentContainerStyle={styles.scroll}>
+        {children}
+      </KeyboardAwareScrollView>
       {hasNext && (
         <BottomButtonView
           style={styles.bottomButtonView}

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

@@ -81,4 +81,7 @@ export default StyleSheet.create({
     paddingLeft: 16,
     paddingRight: 16,
   },
+  scroll: {
+    paddingBottom: 200,
+  },
 });

package/src/screens/ChangePosition/index.js

@@ -61,7 +61,7 @@ const ChangePosition = () => {
             <View style={styles.disableSensor} />
             <View style={styles.widgetOrder}>
               <SensorDisplayItem
-                isWidgetOrder
+                isWidgetOrder={true}
                 item={item}
                 sensor={sensor}
                 offsetTitle={offsetTitle}

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

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

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

@@ -1469,4 +1469,6 @@ export default {
   when_value_is: 'When value is',
   template_not_supported: '"{template}" not yet supported',
   invited_user: 'Invited user {user}',
+  enter_value: 'Enter value',
+  enter_parameters: 'Enter parameters',
 };

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

@@ -1479,4 +1479,6 @@ export default {
   when_value_is: 'Khi giá trị là',
   template_not_supported: '"{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ố',
 };