@eohjsc/react-native-smart-city 0.2.56 → 0.2.60

package/assets/images/Map/MarkerGeolocation.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="39" viewBox="0 0 24 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 8.21875C11.0656 8.21875 10.1875 8.58125 9.525 9.24375C9.19945 9.56837 8.94129 9.95415 8.76538 10.3789C8.58947 10.8037 8.49928 11.259 8.5 11.7188C8.5 12.6531 8.86562 13.5312 9.525 14.1938C9.84962 14.5193 10.2354 14.7775 10.6602 14.9534C11.0849 15.1293 11.5403 15.2195 12 15.2188C12.9344 15.2188 13.8125 14.8531 14.475 14.1938C15.1375 13.5312 15.5 12.6531 15.5 11.7188C15.5 10.7844 15.1375 9.90625 14.475 9.24375C13.8125 8.58125 12.9344 8.21875 12 8.21875ZM22.7062 7.03438C22.1179 5.67775 21.2697 4.44944 20.2094 3.41875C19.1456 2.37875 17.8915 1.55331 16.5156 0.9875C15.0844 0.39375 13.5656 0.09375 12 0.09375C10.4344 0.09375 8.91562 0.39375 7.48438 0.984375C6.1 1.55625 4.85938 2.375 3.79063 3.41563C2.73101 4.44689 1.88286 5.67506 1.29375 7.03125C0.684375 8.4375 0.375 9.93125 0.375 11.4688C0.375 13.675 0.903125 15.8719 1.94063 17.9906C2.775 19.6938 3.94063 21.3531 5.40938 22.9312C7.91875 25.625 10.55 27.2719 11.2969 27.7125C11.5089 27.8377 11.7507 27.9036 11.9969 27.9031C12.2406 27.9031 12.4812 27.8406 12.6969 27.7125C13.4437 27.2719 16.075 25.625 18.5844 22.9312C20.0531 21.3562 21.2188 19.6938 22.0531 17.9906C23.0969 15.875 23.625 13.6812 23.625 11.4719C23.625 9.93437 23.3156 8.44063 22.7062 7.03438ZM12 17.2188C8.9625 17.2188 6.5 14.7563 6.5 11.7188C6.5 8.68125 8.9625 6.21875 12 6.21875C15.0375 6.21875 17.5 8.68125 17.5 11.7188C17.5 14.7563 15.0375 17.2188 12 17.2188Z" fill="#1890FF"/>
+<path d="M16.6666 30.2735L15.7266 29.3335L12 33.0602L8.27331 29.3335L7.33331 30.2735L11.06 34.0002L7.33331 37.7268L8.27331 38.6668L12 34.9402L15.7266 38.6668L16.6666 37.7268L12.94 34.0002L16.6666 30.2735Z" fill="#262626"/>
+</svg>

package/assets/images/SonosSpeaker/buttonpause-active.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="28" viewBox="0 0 25 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 28H8.5V0H0.5V28ZM16.5 0V28H24.5V0H16.5Z" fill="#262626"/>
+</svg>

package/assets/images/SonosSpeaker/buttonpause-notactive.svg

@@ -0,0 +1,3 @@
+<svg width="23" height="28" viewBox="0 0 23 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 0V28L22.5 14L0.5 0Z" fill="#262626"/>
+</svg>

package/assets/images/SonosSpeaker/picture-main-notactive.svg

@@ -0,0 +1,5 @@
+<svg width="141" height="142" viewBox="0 0 141 142" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M80.0001 50.5387H60.0001C57.8001 50.5387 56.0001 52.3387 56.0001 54.5387V86.5387C56.0001 88.7387 57.8001 90.5187 60.0001 90.5187L80.0001 90.5387C82.2001 90.5387 84.0001 88.7387 84.0001 86.5387V54.5387C84.0001 52.3387 82.2001 50.5387 80.0001 50.5387ZM70.0001 54.5387C72.2001 54.5387 74.0001 56.3387 74.0001 58.5387C74.0001 60.7387 72.2001 62.5387 70.0001 62.5387C67.7801 62.5387 66.0001 60.7387 66.0001 58.5387C66.0001 56.3387 67.7801 54.5387 70.0001 54.5387ZM70.0001 86.5387C64.4801 86.5387 60.0001 82.0587 60.0001 76.5387C60.0001 71.0187 64.4801 66.5387 70.0001 66.5387C75.5201 66.5387 80.0001 71.0187 80.0001 76.5387C80.0001 82.0587 75.5201 86.5387 70.0001 86.5387ZM70.0001 70.5387C66.6801 70.5387 64.0001 73.2187 64.0001 76.5387C64.0001 79.8587 66.6801 82.5387 70.0001 82.5387C73.3201 82.5387 76.0001 79.8587 76.0001 76.5387C76.0001 73.2187 73.3201 70.5387 70.0001 70.5387Z" fill="white"/>
+<circle cx="70.1245" cy="71" r="70.1245" fill="#E8E8E8"/>
+<path d="M80 50.8755H60C57.8 50.8755 56 52.6755 56 54.8755V86.8755C56 89.0755 57.8 90.8555 60 90.8555L80 90.8755C82.2 90.8755 84 89.0755 84 86.8755V54.8755C84 52.6755 82.2 50.8755 80 50.8755ZM70 54.8755C72.2 54.8755 74 56.6755 74 58.8755C74 61.0755 72.2 62.8755 70 62.8755C67.78 62.8755 66 61.0755 66 58.8755C66 56.6755 67.78 54.8755 70 54.8755ZM70 86.8755C64.48 86.8755 60 82.3955 60 76.8755C60 71.3555 64.48 66.8755 70 66.8755C75.52 66.8755 80 71.3555 80 76.8755C80 82.3955 75.52 86.8755 70 86.8755ZM70 70.8755C66.68 70.8755 64 73.5555 64 76.8755C64 80.1955 66.68 82.8755 70 82.8755C73.32 82.8755 76 80.1955 76 76.8755C76 73.5555 73.32 70.8755 70 70.8755Z" fill="white"/>
+</svg>

package/assets/images/SonosSpeaker/picture-main.svg

@@ -0,0 +1,6 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle opacity="0.1" cx="100" cy="100" r="100" fill="#00979D"/>
+<circle opacity="0.5" cx="100.477" cy="100.477" r="85.4772" fill="#00979D"/>
+<circle cx="100.124" cy="100.124" r="70.1245" fill="#00979D"/>
+<path d="M110 79.9996H90.0001C87.8001 79.9996 86.0001 81.7996 86.0001 83.9996V116C86.0001 118.2 87.8001 119.98 90.0001 119.98L110 120C112.2 120 114 118.2 114 116V83.9996C114 81.7996 112.2 79.9996 110 79.9996ZM100 83.9996C102.2 83.9996 104 85.7996 104 87.9996C104 90.1996 102.2 91.9996 100 91.9996C97.7801 91.9996 96.0001 90.1996 96.0001 87.9996C96.0001 85.7996 97.7801 83.9996 100 83.9996ZM100 116C94.4801 116 90.0001 111.52 90.0001 106C90.0001 100.48 94.4801 95.9996 100 95.9996C105.52 95.9996 110 100.48 110 106C110 111.52 105.52 116 100 116ZM100 99.9996C96.6801 99.9996 94.0001 102.68 94.0001 106C94.0001 109.32 96.6801 112 100 112C103.32 112 106 109.32 106 106C106 102.68 103.32 99.9996 100 99.9996Z" fill="white"/>
+</svg>

package/assets/images/SonosSpeaker/picture-volume.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 5.5V10.5H3.83333L8 14.6667V1.33333L3.83333 5.5H0.5ZM6.33333 5.35833V10.6417L4.525 8.83333H2.16667V7.16667H4.525L6.33333 5.35833ZM11.75 8C11.75 6.525 10.9 5.25833 9.66667 4.64167V11.35C10.9 10.7417 11.75 9.475 11.75 8ZM9.66667 0.691666V2.40833C12.075 3.125 13.8333 5.35833 13.8333 8C13.8333 10.6417 12.075 12.875 9.66667 13.5917V15.3083C13.0083 14.55 15.5 11.5667 15.5 8C15.5 4.43333 13.0083 1.45 9.66667 0.691666V0.691666Z" fill="#262626"/>
+</svg>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.2.56",
+  "version": "0.2.60",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -43,11 +43,7 @@
     "pods": "cd example && pod-install --quiet",
     "bootstrap": "yarn example && yarn && yarn pods",
     "build": "sync-files ./src ../EohMobile/node_modules/@eohjsc/react-native-smart-city/src",
-    "watch": "sync-files --watch ./src ../EohMobile/node_modules/@eohjsc/react-native-smart-city/src",
-    "test:code-formatter": "prettier src/**/**/*.js --write",
-    "test:code-formatter-step-1": "prettier --check src/**/*.js",
-    "test:code-formatter-step-2": "prettier --check src/**/**/*.js",
-    "test:code-formatter-step-3": "prettier --check src/**/**/**/*.js"
+    "watch": "sync-files --watch ./src ../EohMobile/node_modules/@eohjsc/react-native-smart-city/src"
   },
   "repository": {
     "type": "git",
@@ -85,7 +81,6 @@
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-native": "^3.10.0",
     "factory-girl": "^5.0.4",
-    "husky": "^2.7.0",
     "jest": "^26.6.3",
     "jest-circus": "^26.6.3",
     "jetifier": "^1.6.6",
@@ -146,6 +141,7 @@
     "react-hooks-global-state": "^1.0.1",
     "react-i18next": "^11.8.12",
     "react-native-alert-async": "^1.0.5",
+    "react-native-android-wifi": "^0.0.41",
     "react-native-appearance": "^0.3.4",
     "react-native-base64": "^0.1.0",
     "react-native-ble-plx": "^2.0.1",
@@ -182,6 +178,7 @@
     "react-native-responsive-fontsize": "^0.5.1",
     "react-native-safe-area-context": "^3.1.1",
     "react-native-screens": "^2.9.0",
+    "react-native-slider": "^0.11.0",
     "react-native-snap-carousel": "4.0.0-beta.5",
     "react-native-super-grid": "^4.0.3",
     "react-native-svg": "^12.1.0",
@@ -205,21 +202,6 @@
     "validator": "^13.1.1",
     "victory-native": "^35.0.1"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged",
-      "pre-push": "yarn jest"
-    }
-  },
-  "lint-staged": {
-    "*.{js, ts}": [
-      "yarn lint",
-      "yarn test:code-formatter",
-      "yarn test:code-formatter-step-1",
-      "yarn test:code-formatter-step-2",
-      "yarn test:code-formatter-step-3"
-    ]
-  },
   "bugs": {
     "url": "https://github.com/github_account/react-native-smart-city/issues"
   },

package/src/commons/ActionGroup/CurtainButtonTemplate.js

@@ -0,0 +1,139 @@
+import React, { memo, useCallback, useState } from 'react';
+import { TouchableOpacity, View, Switch, Image } from 'react-native';
+import { Icon } from '@ant-design/react-native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import styles from './CurtainButtonTemplateStyle';
+import Text from '../Text';
+import { TESTID } from '../../configs/Constants';
+import { Colors, Images } from '../../configs';
+import { Section } from '../../commons/Section';
+import { IconOutline } from '@ant-design/icons-react-native';
+
+const CurtainButtonTemplate = memo(({ actionGroup, doAction }) => {
+  const t = useTranslations();
+  const { configuration } = actionGroup;
+  const [lock, setLock] = useState(false);
+
+  const onButtonOpenPress = useCallback(
+    () => doAction(configuration.open_action_data),
+    [configuration.open_action_data, doAction]
+  );
+  const onButtonStopPress = useCallback(
+    () => doAction(configuration.stop_action_data),
+    [configuration.stop_action_data, doAction]
+  );
+  const onButtonClosePress = useCallback(
+    () => doAction(configuration.close_action_data),
+    [configuration.close_action_data, doAction]
+  );
+  const onChangeSwitch = useCallback(() => {
+    if (lock) {
+      setLock(false);
+      doAction(configuration.action_off_data);
+      return;
+    }
+    doAction(configuration.action_on_data);
+    setLock(true);
+  }, [
+    configuration.action_off_data,
+    configuration.action_on_data,
+    doAction,
+    lock,
+  ]);
+
+  const RenderThreeButtonActions = () => {
+    const buttons = [
+      {
+        style: styles.buttonActionCurtain,
+        icon: Images.buttonLeftCurtain,
+        text: configuration.text1,
+        onPress: onButtonOpenPress,
+        testID: TESTID.BUTTON_TEMPLATE_1,
+      },
+      {
+        style: styles.buttonActionCurtainCenter,
+        icon: Images.buttonPauseCurtain,
+        text: configuration.text2,
+        onPress: onButtonStopPress,
+        testID: TESTID.BUTTON_TEMPLATE_2,
+      },
+      {
+        style: styles.buttonActionCurtain,
+        icon: Images.buttonRightCurtain,
+        text: configuration.text3,
+        onPress: onButtonClosePress,
+        testID: TESTID.BUTTON_TEMPLATE_3,
+      },
+    ];
+
+    return (
+      <>
+        {buttons.map((item, index) => (
+          <TouchableOpacity
+            testID={item.testID}
+            style={item.style}
+            onPress={item.onPress}
+            underlayColor={Colors.Gray2}
+          >
+            <Image source={item.icon} />
+          </TouchableOpacity>
+        ))}
+      </>
+    );
+  };
+  const itemLock = (icon, color) => {
+    return (
+      <>
+        <View style={styles.lockDoor}>
+          <Icon name={icon} size={15} color={color} style={styles.iconLock} />
+          <Text
+            style={styles.textLockDoor}
+            testID={TESTID.TEXT_DOOR_LOOK_ON_OFF}
+          >
+            {configuration.text_door_lock}{' '}
+          </Text>
+        </View>
+        <Switch
+          trackColor={{ false: Colors.Gray4, true: Colors.Primary }}
+          thumbColor={Colors.White}
+          ios_backgroundColor={Colors.Gray4}
+          onValueChange={onChangeSwitch}
+          value={lock}
+        />
+      </>
+    );
+  };
+  return (
+    <>
+      <View style={styles.wrap}>
+        <RenderThreeButtonActions />
+      </View>
+      <View style={styles.lockSwitch}>
+        {configuration.is_display_lock &&
+          itemLock(
+            lock ? 'lock' : 'unlock',
+            lock ? Colors.Primary : Colors.Gray6
+          )}
+      </View>
+      <Section style={styles.section}>
+        <View style={styles.reminderOption}>
+          <Text type="H4" color={Colors.Gray8}>
+            {t('schedule')}
+          </Text>
+          <TouchableOpacity>
+            <IconOutline name="plus" size={20} />
+          </TouchableOpacity>
+        </View>
+        <View>
+          <TouchableOpacity style={styles.tapToAddSchedule}>
+            <Text type="Body" color={Colors.Gray6} center>
+              {t('tap_to_add_new_schedule')}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </Section>
+    </>
+  );
+});
+
+export default CurtainButtonTemplate;

package/src/commons/ActionGroup/CurtainButtonTemplateStyle.js

@@ -0,0 +1,58 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  wrap: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    paddingVertical: 30,
+  },
+  text: {
+    fontSize: 14,
+    lineHeight: 22,
+  },
+  lockSwitch: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 7,
+  },
+  iconLock: {
+    paddingBottom: 7,
+  },
+  textLockDoor: {
+    paddingLeft: 12,
+    height: 24,
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  lockDoor: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    paddingLeft: 5,
+  },
+  section: {
+    marginHorizontal: 20,
+    borderRadius: 10,
+  },
+  reminderOption: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  tapToAddSchedule: {
+    paddingVertical: 50,
+  },
+  buttonActionCurtain: {
+    flex: 1,
+    aspectRatio: 1,
+    marginHorizontal: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonActionCurtainCenter: {
+    flex: 1,
+    aspectRatio: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 15,
+  },
+});

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { TouchableOpacity } from 'react-native';
+
+import CurtainButtonTemplate from '../CurtainButtonTemplate';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (actionGroup) => (
+  <SCProvider initState={mockSCStore({})}>
+    <CurtainButtonTemplate actionGroup={actionGroup} doAction={jest.fn()} />
+  </SCProvider>
+);
+
+describe('Test CurtainButtonTemplate', () => {
+  const actionGroup = {
+    configuration: {
+      action1: '2b949045-8e03-4c07-a855-7794ade2e69c',
+      action1_data: {
+        color: '#00979D',
+        command_prefer_over_bluetooth: true,
+        command_prefer_over_googlehome: false,
+        command_prefer_over_internet: false,
+        googlehome_actions: [],
+        icon: 'caret-up',
+        id: 9,
+        key: '2b949045-8e03-4c07-a855-7794ade2e69c',
+      },
+      action2: '38347d5e-4418-4ab0-978c-c82f4c034897',
+      action2_data: {
+        color: '#00979D',
+        command_prefer_over_bluetooth: true,
+        command_prefer_over_googlehome: false,
+        command_prefer_over_internet: false,
+        googlehome_actions: [],
+        icon: 'stop',
+        id: 11,
+        key: '38347d5e-4418-4ab0-978c-c82f4c034897',
+      },
+      action3: 'a492e08c-8cb1-44ee-8ea0-46aaca4e5141',
+      action3_data: {
+        color: '#00979D',
+        command_prefer_over_bluetooth: true,
+        command_prefer_over_googlehome: false,
+        command_prefer_over_internet: false,
+        googlehome_actions: [],
+        icon: 'caret-down',
+        id: 10,
+        key: 'a492e08c-8cb1-44ee-8ea0-46aaca4e5141',
+      },
+      icon1: 'caret-up',
+      icon2: 'stop',
+      icon3: 'caret-down',
+      text1: 'UP',
+      text2: 'STOP/UNLOCK',
+      text3: 'DOWN',
+      id: 1,
+      template: 'curtain_button_action_template',
+    },
+  };
+
+  let wrapper;
+
+  test('render CurtainButtonTemplate', async () => {
+    await act(() => {
+      wrapper = renderer.create(wrapComponent(actionGroup));
+    });
+    const instance = wrapper.root;
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    expect(touchableOpacities.length).toEqual(5);
+  });
+});

package/src/commons/ActionGroup/index.js

@@ -8,6 +8,7 @@ import NumberUpDownActionTemplate from './NumberUpDownActionTemplate';
 import OptionsDropdownActionTemplate from './OptionsDropdownActionTemplate';
 import OnOffTemplate from './OnOffTemplate';
 import TimerActionTemplate from './TimerActionTemplate';
+import CurtainButtonTemplate from './CurtainButtonTemplate';
 
 export const getActionComponent = (template) => {
   switch (template) {
@@ -29,6 +30,8 @@ export const getActionComponent = (template) => {
       return OptionsDropdownActionTemplate;
     case 'TimerActionTemplate':
       return TimerActionTemplate;
+    case 'curtain_action_template':
+      return CurtainButtonTemplate;
     default:
       return null;
   }

package/src/commons/Auth/__test__/AccountList.test.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ScrollView } from 'react-native';
+import { act, create } from 'react-test-renderer';
+import AccountList from '../AccountList';
+
+describe('Test AccountList', () => {
+  let tree;
+  const accounts = [
+    {
+      id: 1,
+      name: 'test',
+      phone_number: 123456677,
+    },
+  ];
+
+  it('test render has data', async () => {
+    await act(() => {
+      tree = create(<AccountList accounts={accounts} />);
+    });
+    const instance = tree.root;
+    const scrollViews = instance.findAllByType(ScrollView);
+    expect(scrollViews).toHaveLength(1);
+  });
+
+  it('test render has no data', async () => {
+    await act(() => {
+      tree = create(<AccountList accounts={[]} />);
+    });
+    const instance = tree.root;
+    const scrollViews = instance.findAllByType(ScrollView);
+    expect(scrollViews).toHaveLength(1);
+  });
+});

package/src/commons/CameraDevice/index.js

@@ -59,6 +59,8 @@ const CameraDevice = ({ station, handleFullScreen, goToPlayBack }) => {
             cameraName={device.configuration.name}
             handleFullScreen={handleFullScreen}
             goToPlayBack={goToPlayBack(device, { uri: station?.background })}
+            width={standardizeWidth}
+            height={standardizeHeight}
           />
         </View>
       ))}

package/src/commons/CardShadow/index.js

@@ -7,7 +7,7 @@ const Card = memo(({ title, children, style }) => {
   return (
     <View style={[styles.card, style]}>
       {title && <Text style={styles.headerTitle}>{title}</Text>}
-      <View>{children}</View>
+      {children}
     </View>
   );
 });

package/src/commons/CardShadow/styles.js

@@ -3,11 +3,9 @@ import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   card: {
-    marginTop: 14,
-    marginBottom: 14,
+    marginVertical: 14,
     marginHorizontal: 16,
     padding: 16,
-    flexDirection: 'column',
     backgroundColor: Colors.White,
     borderRadius: 10,
     shadowColor: Colors.Shadow,

package/src/commons/DateTimeRangeChange/DateTimeButton.js

@@ -7,7 +7,7 @@ import Text from '../Text';
 import { Colors } from '../../configs';
 
 const DateTimeButton = memo(({ onPress, time, date, formatType, style }) => {
-  let format = 'DD.MM.YY hh:mm';
+  let format = 'DD.MM.YY HH:mm';
   if (formatType === 'date') {
     format = 'DD.MM.YY';
   }

package/src/commons/DateTimeRangeChange/index.js

@@ -23,7 +23,7 @@ const DateTimeRangeChange = memo(
         style={[styles.dateTimeView, !inline && styles.spaceBetween, style]}
       >
         <View style={[styles.wrap, !inline && styles.buttonWrap]}>
-          <Text size={12} color={Colors.Gray7}>
+          <Text type="Label" color={Colors.Gray7}>
             {t('from')}
           </Text>
           <DateTimeButton
@@ -35,7 +35,7 @@ const DateTimeRangeChange = memo(
           />
         </View>
         <View style={[styles.wrap, !inline && styles.buttonWrap]}>
-          <Text size={12} color={Colors.Gray7}>
+          <Text type="Label" color={Colors.Gray7}>
             {t('to')}
           </Text>
           <DateTimeButton

package/src/commons/Device/HistoryChart.js

@@ -5,13 +5,13 @@ import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
-import TextInput from '../../commons/Form/TextInput';
 import Button from '../../commons/Button';
+import CurrencyInput from '../../commons/Form/CurrencyInput';
 import DateTimeRangeChange from '../DateTimeRangeChange';
 import HorizontalBarChart from './HorizontalBarChart';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import LinearChart from './LinearChart';
-import ThreeButtonHistory from '../ThreeButtonHistory';
+import FourButtonFilterHistory from '../FourButtonFilterHistory';
 import { formatMoney } from '../../utils/Utils';
 
 export const dateTimeType = {
@@ -33,6 +33,7 @@ const HistoryChart = memo(
     endDate,
     setEndDate,
     setStartDate,
+    groupBy,
     setGroupBy,
     configuration,
   }) => {
@@ -49,8 +50,7 @@ const HistoryChart = memo(
       startTime: startDate ? startDate : moment().subtract(1, 'day').valueOf(),
       endTime: dateNow,
     });
-    const [price, setPrice] = useState('');
-    const [priceDisplay, setPriceDisplay] = useState('');
+    const [price, setPrice] = useState(null);
 
     const onStart = useCallback(() => {
       setEventPicker({
@@ -137,20 +137,6 @@ const HistoryChart = memo(
       [chartOptions]
     );
 
-    const onChangePrice = useCallback(
-      (input) => {
-        const validInput = input.replace(/\D/g, '');
-        setPrice(validInput);
-        setPriceDisplay(validInput);
-      },
-      [setPrice, setPriceDisplay]
-    );
-    const onPriceFocus = useCallback(() => {
-      setPriceDisplay(price);
-    }, [price]);
-    const onPriceBlur = useCallback(() => {
-      setPriceDisplay(price !== '' ? formatMoney(price) : '');
-    }, [price]);
     const onCalculateCost = useCallback(() => {
       setChartConfig((config) => ({
         ...config,
@@ -194,26 +180,20 @@ const HistoryChart = memo(
               {t('history')}
             </Text>
             {configuration.type === 'horizontal_bar_chart' && (
-              <ThreeButtonHistory
-                setStartDate={setStartDate}
-                setEndDate={setEndDate}
+              <FourButtonFilterHistory
+                groupBy={groupBy}
                 setGroupBy={setGroupBy}
-                startDate={startDate}
-                endDate={endDate}
               />
             )}
           </View>
-          {configuration.type !== 'horizontal_bar_chart' && (
-            <DateTimeRangeChange
-              startTime={eventPicker.startTime}
-              onStart={onStart}
-              onEnd={onEnd}
-              endTime={eventPicker.endTime}
-              date={dateNow}
-              formatType={formatType}
-              inline={false}
-            />
-          )}
+          <DateTimeRangeChange
+            startTime={eventPicker.startTime}
+            onStart={onStart}
+            onEnd={onEnd}
+            endTime={eventPicker.endTime}
+            date={dateNow}
+            formatType={formatType}
+          />
         </View>
         {configuration.config === 'power_consumption' && (
           <View style={styles.wrapCalculateCost}>
@@ -221,17 +201,13 @@ const HistoryChart = memo(
               {t('input_price_to_calculate_electricity_cost')}
             </Text>
             <View style={styles.row}>
-              <TextInput
-                onFocus={onPriceFocus}
-                onBlur={onPriceBlur}
-                value={priceDisplay}
-                onChange={onChangePrice}
+              <CurrencyInput
+                value={price}
+                onChange={setPrice}
+                minValue={0}
+                maxValue={100000000}
+                placeholder={'0'}
                 onSubmitEditing={onCalculateCost}
-                placeholder={'0đ'}
-                keyboardType="numeric"
-                textInputStyle={styles.textInput}
-                wrapStyle={styles.wrapTextInput}
-                borderBottomOnly
               />
               <Button
                 type="primary"
@@ -298,17 +274,7 @@ const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
     alignItems: 'center',
-  },
-  wrapTextInput: {
-    flex: 1,
-    marginRight: 16,
-  },
-  textInput: {
-    marginTop: 0,
-    paddingTop: 0,
-    paddingLeft: 0,
-    fontSize: 18,
-    lineHeight: 24,
+    marginTop: 8,
   },
   buttonCalculate: {
     width: null,