@eohjsc/react-native-smart-city 0.2.92 → 0.2.95

package/assets/images/Device/air-dry.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.1302 0.511174C11.3959 1.343 4.08508 10.1691 4.08508 15.4443C4.08508 19.8876 7.68713 23.4894 12.1302 23.4894C16.5733 23.4894 20.1753 19.8876 20.1753 15.4443C20.1753 9.80224 12.1024 0.427685 12.1302 0.511174ZM11.6441 21.4844L11.6203 21.4839C9.92602 21.3784 7.67768 20.7243 6.57036 18.2043C6.47513 17.9873 6.57445 17.7332 6.79121 17.6375C7.00644 17.5443 7.26559 17.6479 7.35802 17.8581C8.29096 19.9816 10.2178 20.5348 11.6706 20.625C11.907 20.6395 12.0878 20.844 12.0733 21.0807C12.0587 21.3072 11.8703 21.4844 11.6441 21.4844Z" fill="#262626"/>
+</svg>

package/assets/images/Device/auto.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 18C14.42 18 18 14.42 18 10C18 5.58 14.42 2 10 2C5.58 2 2 5.58 2 10C2 14.42 5.58 18 10 18ZM10 0C15.52 0 20 4.48 20 10C20 15.43 15.67 19.85 10.28 20H10C4.48 20 0 15.52 0 10C0 4.48 4.48 0 10 0ZM10.83 5H9.18L6 14H8.24L8.67 12.66H11.35L11.75 14H14L10.83 5ZM10.06 8.41L10.8 10.81H9.28L10.06 8.41Z" fill="#262626"/>
+</svg>

package/assets/images/Device/circulator.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.11682 11.024C2.40536 9.18824 3.22604 7.47741 4.47723 6.1034C5.72841 4.72939 7.35515 3.75257 9.15598 3.29389C10.9568 2.83521 12.8526 2.91484 14.6087 3.5229C16.3647 4.13096 17.9038 5.24075 19.0353 6.71483L19.6441 7.50745V4.69527H21.0013V10.1242H15.5724V8.76696H17.9944L17.6211 8.23323C16.7705 7.01113 15.5737 6.0715 14.1846 5.53525C12.7956 4.999 11.2778 4.89065 9.82666 5.22414C8.37551 5.55764 7.05734 6.31772 6.04175 7.40659C5.02617 8.49547 4.35963 9.86332 4.12789 11.3342L2.11682 11.024Z" fill="black"/>
+<path d="M11.5006 22C10.0429 22.0056 8.60381 21.673 7.29637 21.0285C5.98894 20.3839 4.84881 19.4449 3.96561 18.2852L3.35723 17.4913V20.3034H2V14.8745H7.42891V16.2317H5.00694L5.38018 16.7655C6.23084 17.9875 7.4277 18.9271 8.81677 19.4633C10.2058 19.9996 11.7236 20.1079 13.1747 19.7744C14.6259 19.4409 15.9441 18.6809 16.9597 17.592C17.9753 16.5032 18.6419 15.1354 18.8737 13.6646L20.8852 13.9747C20.5347 16.2116 19.3964 18.2497 17.6756 19.7212C15.9548 21.1928 13.7648 22.001 11.5006 22Z" fill="black"/>
+</svg>

package/assets/images/Device/clean.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.2968 16.5784C21.8701 16.5784 20.5301 16.028 19.5234 15.0284C18.517 14.0294 17.963 12.6988 17.963 11.2817C17.963 10.8934 17.648 10.5786 17.2598 10.5786C16.8715 10.5786 16.5567 10.8934 16.5567 11.2817C16.5567 12.6988 16.0024 14.0294 14.9961 15.0284C13.9894 16.028 12.6494 16.5784 11.2227 16.5784C10.8343 16.5784 10.5195 16.8932 10.5195 17.2816C10.5195 17.6699 10.8343 17.9847 11.2227 17.9847C14.1637 17.9847 16.5567 20.3678 16.5567 23.2969C16.5567 23.6853 16.8715 24.0001 17.2598 24.0001C17.648 24.0001 17.963 23.6853 17.963 23.2969C17.963 20.3678 20.3558 17.9847 23.2968 17.9847C23.6852 17.9847 23.9999 17.6699 23.9999 17.2816C23.9999 16.8932 23.6852 16.5784 23.2968 16.5784Z" fill="black"/>
+<path d="M9.62036 11.0806C7.54962 11.0806 5.86487 9.40826 5.86487 7.35254C5.86487 6.96436 5.55011 6.64941 5.16174 6.64941C4.77338 6.64941 4.45862 6.96436 4.45862 7.35254C4.45862 9.40826 2.77386 11.0806 0.703125 11.0806C0.314758 11.0806 0 11.3955 0 11.7837C0 12.1721 0.314758 12.4868 0.703125 12.4868C2.77386 12.4868 4.45862 14.1644 4.45862 16.2264C4.45862 16.6146 4.77338 16.9295 5.16174 16.9295C5.55011 16.9295 5.86487 16.6146 5.86487 16.2264C5.86487 14.1644 7.54962 12.4868 9.62036 12.4868C10.0087 12.4868 10.3235 12.1721 10.3235 11.7837C10.3235 11.3955 10.0087 11.0806 9.62036 11.0806Z" fill="black"/>
+<path d="M10.7642 4.85889C12.287 4.85889 13.5261 6.08844 13.5261 7.59961C13.5261 7.98779 13.8409 8.30273 14.2292 8.30273C14.6176 8.30273 14.9324 7.98779 14.9324 7.59961C14.9324 6.0835 16.1714 4.8501 17.6943 4.8501C18.0827 4.8501 18.3975 4.53516 18.3975 4.14697C18.3975 3.75861 18.0827 3.44385 17.6943 3.44385C16.1714 3.44385 14.9324 2.21429 14.9324 0.703125C14.9324 0.314758 14.6176 0 14.2292 0C13.8409 0 13.5261 0.314758 13.5261 0.703125C13.5261 2.21924 12.287 3.45264 10.7642 3.45264C10.3758 3.45264 10.061 3.7674 10.061 4.15576C10.061 4.54413 10.3758 4.85889 10.7642 4.85889Z" fill="black"/>
+</svg>

package/assets/images/Device/current-state.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8333 17.5003C10.8333 17.9612 11.2058 18.3337 11.6667 18.3337H14.1667C15.0508 18.3337 15.8983 17.9828 16.5233 17.3578C17.1483 16.7328 17.5 15.8845 17.5 15.0003V14.167C17.5 13.707 17.1267 13.3337 16.6667 13.3337H11.6667C11.2058 13.3337 10.8333 13.707 10.8333 14.167V17.5003ZM8.33333 18.3337C8.79333 18.3337 9.16667 17.9612 9.16667 17.5003V9.16699C9.16667 8.70699 8.79333 8.33366 8.33333 8.33366H3.33333C2.8725 8.33366 2.5 8.70699 2.5 9.16699V15.0003C2.5 15.8845 2.85083 16.7328 3.47583 17.3578C4.10083 17.9828 4.94917 18.3337 5.83333 18.3337H8.33333ZM11.6667 1.66699C11.2058 1.66699 10.8333 2.04033 10.8333 2.50033V10.8337C10.8333 11.2945 11.2058 11.667 11.6667 11.667H16.6667C17.1267 11.667 17.5 11.2945 17.5 10.8337V5.00033C17.5 4.11699 17.1483 3.26866 16.5233 2.64366C15.8983 2.01866 15.0508 1.66699 14.1667 1.66699H11.6667ZM9.16667 2.50033C9.16667 2.04033 8.79333 1.66699 8.33333 1.66699H5.83333C4.94917 1.66699 4.10083 2.01866 3.47583 2.64366C2.85083 3.26866 2.5 4.11699 2.5 5.00033V5.83366C2.5 6.29449 2.8725 6.66699 3.33333 6.66699H8.33333C8.79333 6.66699 9.16667 6.29449 9.16667 5.83366V2.50033Z" fill="#262626"/>
+</svg>

package/assets/images/Device/door-state.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="20" viewBox="0 0 14 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.08207 0V1.4578H0.44812V18.5208L5.08207 18.5246V20L13.543 18.4803L13.5517 1.53027L5.08207 0ZM6.4854 9.33048C6.76956 9.33048 6.99993 9.63026 6.99993 10C6.99993 10.3698 6.7696 10.6695 6.4854 10.6695C6.20121 10.6695 5.97087 10.3698 5.97087 10C5.97083 9.63026 6.20125 9.33048 6.4854 9.33048ZM1.82397 17.1461V2.83366H5.08207V17.1487L1.82397 17.1461Z" fill="#262626"/>
+</svg>

package/assets/images/Device/wind-strength.svg

@@ -0,0 +1,12 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.58338 8.90405C8.73524 8.90405 8.04529 9.59401 8.04529 10.4421C8.04529 11.2903 8.73524 11.9802 9.58338 11.9802C10.4315 11.9802 11.1215 11.2903 11.1215 10.4421C11.1215 9.59401 10.4315 8.90405 9.58338 8.90405Z" fill="#262626"/>
+<path d="M10.0896 1.0983C10.05 0.849986 9.8352 0.666748 9.58337 0.666748C9.33153 0.666748 9.11722 0.849507 9.07716 1.09782C8.70402 4.72594 7.74586 6.7972 8.36633 8.20011C8.73014 8.00173 9.14063 7.87868 9.58337 7.87868C10.021 7.87868 10.4271 7.99913 10.788 8.19334C11.4004 6.7651 10.4525 4.62911 10.0896 1.0983Z" fill="#262626"/>
+<path d="M18.1316 14.6488C15.1069 12.5509 13.6552 10.7323 12.1377 10.5322C12.1065 11.4101 11.6353 12.1731 10.9347 12.6112C11.8983 13.8846 14.3342 14.0934 17.6464 15.5385C17.8858 15.6247 18.1498 15.5233 18.2708 15.3017C18.392 15.0794 18.3329 14.802 18.1316 14.6488Z" fill="#262626"/>
+<path d="M7.02812 10.5229C5.53447 10.7118 4.13354 12.5038 1.03566 14.6484C0.833895 14.8021 0.774798 15.0795 0.895965 15.3018C1.01399 15.5191 1.27536 15.6259 1.52033 15.5386C4.89766 14.0713 7.29305 13.8803 8.2387 12.6149C7.53207 12.1759 7.05629 11.4075 7.02812 10.5229Z" fill="#262626"/>
+<path d="M4.08742 9.17253C4.02384 9.44843 4.19607 9.72381 4.47194 9.78739C4.51101 9.79641 4.54956 9.80041 4.5876 9.80041C4.82091 9.80041 5.03221 9.64018 5.08677 9.40287C5.36653 8.18688 6.13776 7.15968 7.1704 6.52144C7.2054 6.12909 7.26884 5.71527 7.34947 5.27661C5.72907 5.98082 4.49129 7.4176 4.08742 9.17253Z" fill="#262626"/>
+<path d="M1.89294 10.4422C1.89294 10.7542 1.91147 11.0611 1.94753 11.3635C1.98157 11.649 2.24199 11.8456 2.51731 11.8121C2.7982 11.7786 2.99945 11.5237 2.96592 11.2423C2.93488 10.98 2.91834 10.7131 2.91834 10.4422C2.91834 7.49837 4.87318 4.95502 7.57711 4.0943C7.6469 3.73856 7.71731 3.3685 7.78564 2.9729C4.39986 3.79175 1.89294 6.86092 1.89294 10.4422Z" fill="#262626"/>
+<path d="M11.5742 15.1955C11.4916 14.9246 11.2062 14.7694 10.9339 14.8556C9.76304 15.2133 8.46678 15.0536 7.38673 14.4771C7.02542 14.6444 6.62582 14.7981 6.20032 14.9462C7.17034 15.6732 8.35757 16.0817 9.58353 16.0817C10.1458 16.0817 10.7011 15.9991 11.2343 15.8359C11.5046 15.7533 11.6574 15.4663 11.5742 15.1955Z" fill="#262626"/>
+<path d="M14.2983 15.8736C14.1291 15.6483 13.8076 15.6027 13.5803 15.7724C12.4192 16.6457 11.0374 17.1073 9.5834 17.1073C7.89129 17.1073 6.28662 16.4572 5.06627 15.3291C4.72242 15.4422 4.36162 15.5636 3.98523 15.6951C5.4295 17.2333 7.44556 18.1668 9.5834 18.1668C11.2612 18.1668 12.8568 17.5999 14.1972 16.5916C14.4235 16.4213 14.4685 16.0999 14.2983 15.8736Z" fill="#262626"/>
+<path d="M12.603 3.36954C12.3451 3.2574 12.0417 3.37809 11.9301 3.63895C11.8184 3.89882 11.9391 4.20022 12.1994 4.31188C14.6593 5.36629 16.2484 7.77255 16.2484 10.4422C16.2484 10.9121 16.1958 11.3723 16.1007 11.8223C16.3763 12.0494 16.6665 12.2855 16.9745 12.5304C17.1657 11.8552 17.2739 11.1587 17.2739 10.4422C17.2739 7.36147 15.4404 4.58522 12.603 3.36954Z" fill="#262626"/>
+<path d="M13.4302 6.31817C13.2224 6.12441 12.8979 6.13593 12.7057 6.34271C12.5124 6.54998 12.5234 6.87445 12.7302 7.0677C13.6476 7.92394 14.1551 9.07894 14.1859 10.3264C14.5032 10.5404 14.8303 10.7891 15.1759 11.0666C15.1989 10.8595 15.2231 10.6523 15.2231 10.4423C15.2231 8.88515 14.5697 7.38161 13.4302 6.31817Z" fill="#262626"/>
+</svg>

package/package.json

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

package/src/commons/Action/ItemQuickAction.js

@@ -94,6 +94,7 @@ const ItemQuickAction = memo(({ sensor, wrapperStyle, setStatus, unit }) => {
           icon={action.icon}
           iconKit={action.icon_kit}
           isSendingCommand={isSendingCommand}
+          icon_outlined={'poweroff'}
         />
       </View>
     </TouchableOpacity>

package/src/commons/Action/__test__/ItemQuickAction.test.js

@@ -41,7 +41,6 @@ describe('Test ItemQuickAction', () => {
       command_prefer_over_googlehome: false,
       command_prefer_over_internet: false,
       id: 9,
-      icon: 'caret-up',
     },
     quick_action: {
       config_id: 51,
@@ -97,9 +96,42 @@ describe('Test ItemQuickAction', () => {
     expect(buttonOnActionPress).toHaveLength(0);
   });
 
-  test('render with full action data case on', () => {
+  test('render with full action data case on and icon up', () => {
     const mockSetStatus = jest.fn();
+    sensor.action.icon = 'up';
+    act(() => {
+      tree = create(
+        <ItemQuickAction
+          sensor={sensor}
+          wrapperStyle={style}
+          setStatus={mockSetStatus}
+        />
+      );
+    });
+
+    const instance = tree.root;
+    const buttonOnActionPress = instance.find(
+      (el) =>
+        el.props.testID === TESTID.ITEM_QUICK_ACTION_PRESS &&
+        el.type === TouchableOpacity
+    );
+    expect(buttonOnActionPress).toBeDefined();
 
+    mockSetState.mockClear();
+    act(() => {
+      buttonOnActionPress.props.onPress();
+    });
+    expect(sendRemoteCommand).toBeCalled();
+    expect(mockSetState).toBeCalledTimes(1);
+
+    jest.runAllTimers();
+    expect(mockSetState).toBeCalledTimes(3);
+    expect(mockSetState).toBeCalledWith(sensor.quick_action.off_action);
+  });
+
+  test('render with icon_outlined poweroff', () => {
+    const mockSetStatus = jest.fn();
+    sensor.action.icon = null;
     act(() => {
       tree = create(
         <ItemQuickAction
@@ -188,6 +220,21 @@ describe('Test ItemQuickAction', () => {
     expect(buttonOnActionPress).toBeDefined();
   });
 
+  test('click quick action icon down , isSendingCommand = true', () => {
+    sensor.action.icon = 'down';
+    useState.mockImplementationOnce((init) => [true, mockSetState]);
+    act(() => {
+      tree = create(<ItemQuickAction sensor={sensor} wrapperStyle={style} />);
+    });
+
+    const instance = tree.root;
+    const buttonOnActionPress = instance.find(
+      (el) =>
+        el.props.testID === TESTID.ITEM_QUICK_ACTION_PRESS &&
+        el.type === TouchableOpacity
+    );
+    expect(buttonOnActionPress).toBeDefined();
+  });
   test('trigger action with quick action no auto update', () => {
     const noAutoUpdateSensor = {
       action: {

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

@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   wrap: {
-    paddingVertical: 36,
+    paddingVertical: 16,
     paddingHorizontal: 16,
     marginHorizontal: 20,
     marginTop: 20,
@@ -21,5 +21,6 @@ export default StyleSheet.create({
   },
   marginRight: {
     marginRight: 10,
+    paddingBottom: 2,
   },
 });

package/src/commons/ActionGroup/OptionsDropdownActionTemplate.js

@@ -12,6 +12,9 @@ import { watchMultiConfigs } from '../../iot/Monitor';
 import { TESTID } from '../../configs/Constants';
 import IconComponent from '../../commons/IconComponent';
 import { useTranslations } from '../../hooks/Common/useTranslations';
+import SvgDoorState from '../../../assets/images/Device/door-state.svg';
+import SvgCurrentState from '../../../assets/images/Device/current-state.svg';
+import SvgWindStrength from '../../../assets/images/Device/wind-strength.svg';
 
 function getOptionValue(option) {
   if (option.value_text) {
@@ -27,7 +30,7 @@ const OptionsDropdownActionTemplate = ({ actionGroup, doAction, sensor }) => {
     configuration;
   // eslint-disable-next-line no-unused-vars
   const [configValues, setConfigValues] = useConfigGlobalState('configValues');
-
+  const checkIcon = /\d/.test(icon); // to do check icon svg and icon antDesign
   const selectedOption = useMemo(() => {
     const currentValue = configValues[configuration.config];
     if (currentValue === null || currentValue === undefined) {
@@ -84,23 +87,40 @@ const OptionsDropdownActionTemplate = ({ actionGroup, doAction, sensor }) => {
     return selectedOption.text;
   }, [configuration.config, selectedOption.text, t]);
 
+  const iconSvg = useMemo(() => {
+    switch (icon) {
+      case 'door-state-1':
+        return <SvgDoorState width={24} height={24} />;
+      case 'curent-state-1':
+        return <SvgCurrentState width={24} height={24} />;
+      case 'wind-strength-1':
+        return <SvgWindStrength width={24} height={24} />;
+      default:
+        return () => <></>;
+    }
+  }, [icon]);
+
   return (
     <View style={styles.wrap}>
       <View style={styles.iconAndText}>
-        <IconComponent
-          icon={icon}
-          iconKit={iconKit}
-          icon_outlined={icon_outlined}
-          isSendingCommand={false}
-          size={17}
-          style={styles.marginRight}
-        />
-        <Text type="H4">{title}</Text>
+        {!checkIcon && (
+          <IconComponent
+            icon={icon}
+            iconKit={iconKit}
+            icon_outlined={icon_outlined}
+            isSendingCommand={false}
+            size={17}
+            style={styles.marginRight}
+          />
+        )}
+        {checkIcon && <View style={styles.marginRight}>{iconSvg}</View>}
+        <Text style={styles.textTitle} type="H4">
+          {title}
+        </Text>
       </View>
       <TouchableOpacity style={styles.iconAndTextOption} onPress={onShowAlert}>
         <Text
           testID={TESTID.OPTIONS_DROPDOWN_ACTION_DISPLAY_SELECTED}
-          type="Body"
           color={
             displaySelected === t('not_available') ? Colors.Gray6 : Colors.Gray8
           }

package/src/commons/ActionGroup/OptionsDropdownActionTemplateStyle.js

@@ -3,7 +3,7 @@ import { Colors } from '../../configs';
 
 export default StyleSheet.create({
   wrap: {
-    paddingVertical: 36,
+    paddingVertical: 16,
     paddingHorizontal: 16,
     marginHorizontal: 20,
     marginTop: 20,
@@ -43,7 +43,7 @@ export default StyleSheet.create({
   },
   text: {
     fontSize: 16,
-    lineHeight: 24,
+    lineHeight: 20,
     color: Colors.Gray9,
   },
   writeNotAvailable: {
@@ -52,4 +52,7 @@ export default StyleSheet.create({
   scrollView: {
     height: 350,
   },
+  textTitle: {
+    paddingTop: 2,
+  },
 });

package/src/commons/ActionGroup/StatesGridActionTemplate.js

@@ -8,6 +8,10 @@ import { watchMultiConfigs } from '../../iot/Monitor';
 import IconComponent from '../IconComponent';
 import styles from './StatesGridActionTemplateStyle';
 import { TESTID } from '../../configs/Constants';
+import SvgClean from '../../../assets/images/Device/clean.svg';
+import SvgCirculator from '../../../assets/images/Device/circulator.svg';
+import SvgAuo from '../../../assets/images/Device/auto.svg';
+import SvgAirDry from '../../../assets/images/Device/air-dry.svg';
 
 const buttonStyle = {
   OFF: {
@@ -21,21 +25,6 @@ const buttonStyle = {
 };
 
 const GridItem = ({ item, index, length, doAction, sensor, title }) => {
-  const isFirst = index === 0;
-  const isLast = index === length - 1;
-  const isNextLine = index % 4 === 0;
-
-  let extraStyle = {};
-  if (isFirst || isNextLine) {
-    extraStyle.marginLeft = 24;
-  }
-  if (isLast) {
-    extraStyle.marginRight = 24;
-  }
-  if (index > 3) {
-    extraStyle.marginTop = 24;
-  }
-
   const {
     active,
     text,
@@ -46,6 +35,7 @@ const GridItem = ({ item, index, length, doAction, sensor, title }) => {
     config,
   } = item;
   const buttonOnOffStyle = active ? buttonStyle.ON : buttonStyle.OFF;
+  const checkIcon = /\d/.test(icon); // to do check icon svg and icon antDesign
 
   const doActionAndWatchConfig = useCallback(
     (actionData) => {
@@ -63,22 +53,40 @@ const GridItem = ({ item, index, length, doAction, sensor, title }) => {
 
   const iconKit = !!icon_kit_data && icon_kit_data.icon;
 
+  const iconSvg = useMemo(() => {
+    switch (icon) {
+      case 'clean-1':
+        return <SvgClean width={24} height={24} />;
+      case 'circulator-1':
+        return <SvgCirculator width={24} height={24} />;
+      case 'auto-1':
+        return <SvgAuo width={24} height={24} />;
+      case 'air-dry-1':
+        return <SvgAirDry width={24} height={24} />;
+      default:
+        return () => <></>;
+    }
+  }, [icon]);
+
   return (
     <View
-      style={[styles.gridItem, extraStyle]}
+      style={[styles.gridItem]}
       testID={TESTID.STATES_GRID_ACTION_GRID_ITEM}
     >
       <TouchableOpacity
         style={[styles.button, buttonOnOffStyle]}
         onPress={() => doActionAndWatchConfig(action_data)}
       >
-        <IconComponent
-          icon={icon}
-          iconKit={iconKit}
-          icon_outlined={icon_outlined}
-          isSendingCommand={false}
-          size={24}
-        />
+        {!checkIcon && (
+          <IconComponent
+            icon={icon}
+            iconKit={iconKit}
+            icon_outlined={icon_outlined}
+            isSendingCommand={false}
+            size={24}
+          />
+        )}
+        {checkIcon && <View>{iconSvg}</View>}
       </TouchableOpacity>
       <Text center color={Colors.Gray8} style={styles.textMargin}>
         {text}
@@ -116,19 +124,17 @@ const StatesGridActionTemplate = ({ actionGroup, doAction, sensor }) => {
       <Text type="H4" style={styles.textModeMargin}>
         {title}
       </Text>
-      <View style={styles.center}>
-        <View style={styles.wrapOption}>
-          {options.map((item, index) => (
-            <GridItem
-              item={item}
-              index={index}
-              length={options.length}
-              doAction={doAction}
-              sensor={sensor}
-              title={title}
-            />
-          ))}
-        </View>
+      <View style={styles.wrapOption}>
+        {options.map((item, index) => (
+          <GridItem
+            item={item}
+            index={index}
+            length={options.length}
+            doAction={doAction}
+            sensor={sensor}
+            title={title}
+          />
+        ))}
       </View>
     </View>
   );

package/src/commons/ActionGroup/StatesGridActionTemplateStyle.js

@@ -8,23 +8,18 @@ export default StyleSheet.create({
     marginHorizontal: 20,
     borderWidth: 1,
     borderColor: Colors.Gray4,
-    borderTopWidth: 0,
+    borderTopRightRadius: 10,
+    borderTopLeftRadius: 10,
     borderBottomRightRadius: 10,
     borderBottomLeftRadius: 10,
-  },
-  center: {
-    flex: 1,
-    alignItems: 'center',
+    marginTop: 20,
   },
   wrapOption: {
     flex: 1,
     flexDirection: 'row',
+    justifyContent: 'space-between',
     flexWrap: 'wrap',
-    width: 312,
-  },
-  gridItem: {
-    width: 48,
-    marginHorizontal: 12,
+    paddingHorizontal: 16,
   },
   textMargin: {
     marginTop: 8,

package/src/commons/ActionGroup/TimerActionTemplate.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { Switch, TouchableOpacity, View } from 'react-native';
+import { Icon } from '@ant-design/react-native';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import moment from 'moment';
 import { IconOutline } from '@ant-design/icons-react-native';
@@ -167,18 +168,21 @@ const TimerActionTemplate = ({ actionGroup, doAction, sensor }) => {
       <TouchableOpacity style={styles.timerButton} onPress={onShowTimer}>
         <View style={styles.timerTitle}>
           <Text>{title}</Text>
-          {textTimer && (
-            <Text type="Label" color={Colors.Gray7}>
-              {textTimer}
-            </Text>
+          {configuration.config_hour && configuration.config_minute && (
+            <View style={styles.wrapTimer}>
+              <Icon style={styles.iconClockCircle} name={'clock-circle'} />
+              <Text type="Label" color={Colors.Gray7}>
+                {textTimer ? textTimer : t('set_time')}
+              </Text>
+            </View>
           )}
         </View>
-        <View style={styles.timerButton}>
-          <IconOutline name="right" size={20} />
-          <Text color={Colors.Gray11} type="Label">
-            |
-          </Text>
-        </View>
+        {configuration.config_hour && !configuration.config_minute && (
+          <View style={styles.timerButton}>
+            <Text style={styles.textTimerEndLine}>{textTimer}</Text>
+            <IconOutline name="right" size={20} />
+          </View>
+        )}
       </TouchableOpacity>
       {configuration.config_hour && configuration.config_minute && (
         <Switch

package/src/commons/ActionGroup/TimerActionTemplateStyles.js

@@ -24,4 +24,16 @@ export default StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
   },
+  wrapTimer: {
+    paddingTop: 10,
+    flexDirection: 'row',
+  },
+  iconClockCircle: {
+    fontSize: 16,
+    color: Colors.Black,
+    paddingRight: 15,
+  },
+  textTimerEndLine: {
+    paddingRight: 10,
+  },
 });

package/src/commons/ActionGroup/TwoButtonTemplate/TwoButtonTemplateStyles.js

@@ -0,0 +1,55 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    marginHorizontal: 20,
+    marginTop: 20,
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  bigCircle: {
+    backgroundColor: Colors.Gray2,
+    width: 160,
+    height: 160,
+    borderRadius: 200,
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: 10,
+
+    shadowColor: Colors.Gray11,
+    shadowOffset: {
+      width: 0,
+      height: 8,
+    },
+    shadowOpacity: 1,
+    shadowRadius: 12,
+    elevation: 5,
+  },
+  smallCircle: {
+    backgroundColor: Colors.White,
+    width: 130,
+    height: 130,
+    borderRadius: 200,
+    justifyContent: 'center',
+    alignItems: 'center',
+
+    shadowColor: Colors.Black,
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    elevation: 2,
+  },
+  textBig: {
+    marginTop: 18,
+    fontSize: 16,
+    color: Colors.Gray8,
+  },
+});