@eohjsc/react-native-smart-city 0.2.90 → 0.2.93

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.90",
+  "version": "0.2.93",
   "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/ColorPickerTemplate.js

@@ -1,12 +1,15 @@
-import React, { memo, useCallback, useState } from 'react';
+import React, { memo, useCallback, useState, useEffect, useMemo } from 'react';
 import { View } from 'react-native';
 import styles from './ColorPickerTemplateStyles';
 import ColorPicker from 'react-native-wheel-color-picker';
+import { watchMultiConfigs } from '../../iot/Monitor';
+import { useConfigGlobalState } from '../../iot/states';
 
-const ColorPickerTemplate = memo(({ actionGroup, doAction }) => {
+const ColorPickerTemplate = memo(({ actionGroup, doAction, sensor }) => {
   const { configuration } = actionGroup;
-  const [valueComplete, setValueComplete] = useState(0);
+  const [valueColorComplete, setValueColorComplete] = useState('');
   const [isFirstColor, setIsFirstColor] = useState(false);
+  const [configValues] = useConfigGlobalState('configValues');
 
   const onChangeColor = useCallback(
     (color) => {
@@ -14,35 +17,38 @@ const ColorPickerTemplate = memo(({ actionGroup, doAction }) => {
         setIsFirstColor(true);
         return;
       }
-      setValueComplete(color);
-      doAction(configuration?.action_color_data, `{"value":"${color}"}`);
+      doAction(
+        configuration?.action_color_data,
+        JSON.stringify({ value: color })
+      );
     },
     [configuration?.action_color_data, doAction, isFirstColor]
   );
+  const valueColor = useMemo(() => {
+    return valueColorComplete || '';
+  }, [valueColorComplete]);
 
-  const PreventColorPicker = useCallback(
-    ({ style, color, onChangeComplete, props }) => {
-      return (
-        <ColorPicker
-          style={style}
-          sliderHidden={true}
-          swatches={false}
-          color={color}
-          onColorChangeComplete={onChangeComplete}
-          thumbSize={16}
-          {...props}
-        />
-      );
-    },
-    []
-  );
+  useEffect(() => {
+    const { config } = configuration;
+    const configValue = configValues[config];
+    setValueColorComplete(configValue);
+  }, [configuration.config, configValues, configuration]);
+
+  useEffect(() => {
+    if (sensor?.is_managed_by_backend) {
+      watchMultiConfigs([configuration.config]);
+    }
+  }, [sensor, configuration.config]);
 
   return (
     <View style={styles.viewPickColor}>
-      <PreventColorPicker
+      <ColorPicker
         style={styles.colorPicker}
-        color={valueComplete}
-        onChangeComplete={(color) => onChangeColor(color)}
+        sliderHidden={true}
+        swatches={false}
+        color={valueColor}
+        onColorChangeComplete={onChangeColor}
+        thumbSize={16}
       />
     </View>
   );

package/src/commons/ActionGroup/OnOffSmartLock/OnOffSmartLock.js

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useState } from 'react';
+import React, { memo, useCallback, useEffect, useState } from 'react';
 import { SafeAreaView, TouchableOpacity, View } from 'react-native';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { Section } from '../../Section';
@@ -6,14 +6,58 @@ import Text from '../../Text';
 import styles from './OnOffSmartLockStyle';
 import ButtonLock from '../../../../assets/images/Device/button-lock.svg';
 import ButtonUnLock from '../../../../assets/images/Device/button-unlock.svg';
+import { useConfigGlobalState } from '../../../iot/states';
+import { watchMultiConfigs } from '../../../iot/Monitor';
+import { TESTID } from '../../../configs/Constants';
 
 const OnOffSmartLock = memo(({ actionGroup, doAction, sensor }) => {
   const t = useTranslations();
-  const [active, setActive] = useState(true);
+  const { configuration } = actionGroup;
+  const { action_on_data, action_off_data } = configuration;
+  const [isUnlock, setisUnlock] = useState(true);
+  const [configValues] = useConfigGlobalState('configValues');
 
-  const handleClickButton = useCallback(() => {
-    setActive(!active);
-  }, [active]);
+  const handleActionSmartLock = useCallback(() => {
+    if (action_on_data && action_off_data) {
+      if (isUnlock) {
+        let actionName = `${
+          sensor?.name
+        } ${actionGroup?.title?.toLowerCase()} lock`;
+        actionName = actionName.replace(/\s+/g, ' ').trim();
+        const dataLock = { door_lock: 0 };
+        doAction(action_on_data, JSON.stringify(dataLock), actionName);
+      } else {
+        let actionName = `${
+          sensor?.name
+        } ${actionGroup?.title?.toLowerCase()} unlock`;
+        actionName = actionName.replace(/\s+/g, ' ').trim();
+        const dataUnlock = { door_lock: 1 };
+        doAction(action_off_data, JSON.stringify(dataUnlock), actionName);
+      }
+      if (sensor?.is_managed_by_backend) {
+        configuration.config && watchMultiConfigs([configuration.config]);
+      }
+    }
+  }, [
+    actionGroup?.title,
+    action_off_data,
+    action_on_data,
+    doAction,
+    isUnlock,
+    sensor?.name,
+    configuration,
+    sensor?.is_managed_by_backend,
+  ]);
+
+  useEffect(() => {
+    const { is_on_value, config } = configuration;
+    const configValue = configValues[config];
+    if (is_on_value && is_on_value.length) {
+      setisUnlock(is_on_value.includes(configValue));
+    } else {
+      setisUnlock(configValue);
+    }
+  }, [configValues, configuration]);
 
   return (
     <SafeAreaView style={styles.container}>
@@ -22,21 +66,25 @@ const OnOffSmartLock = memo(({ actionGroup, doAction, sensor }) => {
           <View style={styles.wrapController}>
             <Text style={styles.textController}>{t('controller')}</Text>
           </View>
-          <View style={styles.wrapButtonSmartLock}>
-            <TouchableOpacity onPress={handleClickButton}>
-              {active ? (
+          <View>
+            <TouchableOpacity
+              onPress={handleActionSmartLock}
+              testID={TESTID.BUTTON_ON_OFF}
+              style={styles.wrapButtonSmartLock}
+            >
+              {isUnlock ? (
                 <ButtonLock style={styles.buttonSmartLock} />
               ) : (
                 <ButtonUnLock style={styles.buttonSmartLock} />
               )}
+              <Text style={styles.textSmartLock}>
+                {t(isUnlock ? 'lock' : 'unlock')}
+              </Text>
             </TouchableOpacity>
-            <Text style={styles.textSmartLock}>
-              {active ? t('lock') : t('unlock')}
-            </Text>
           </View>
           <View style={styles.wrapStatus}>
             <Text style={styles.textStatus}>
-              {active ? t('door_is_open') : t('door_is_close')}
+              {t(isUnlock ? 'door_is_open' : 'door_is_close')}
             </Text>
           </View>
         </Section>

package/src/commons/ActionGroup/OnOffSmartLock/PasscodeList/__test__/index.test.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+
+import { mockSCStore } from '../../../../../context/mockStore';
+import { TESTID } from '../../../../../configs/Constants';
+import { SCProvider } from '../../../../../context';
+import PasscodeList from '../index';
+import { TouchableOpacity } from 'react-native';
+
+const mockNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockNavigate,
+    }),
+  };
+});
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <PasscodeList />
+  </SCProvider>
+);
+
+describe('Test SetupGeneratePasscode', () => {
+  let tree;
+
+  beforeEach(() => {
+    mockNavigate.mockClear();
+  });
+
+  test('render PasscodeList', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+
+    const instance = tree.root;
+    const passcode_list = instance.findAll(
+      (item) =>
+        item.props.testID === TESTID.PASSCODE_LIST &&
+        item.type === TouchableOpacity
+    );
+
+    expect(passcode_list).toHaveLength(3);
+  });
+});

package/src/commons/ActionGroup/OnOffSmartLock/PasscodeList/index.js

@@ -9,6 +9,7 @@ import t from '../../../../hooks/Common/useTranslations';
 import { Colors } from '../../../../configs';
 import Routes from '../../../../utils/Route';
 import styles from './PasscodeListStyles';
+import { TESTID } from '../../../../configs/Constants';
 
 const PasscodeList = memo(() => {
   const navigation = useNavigation();
@@ -50,6 +51,7 @@ const PasscodeList = memo(() => {
           <TouchableOpacity
             onPress={handleClickButton(item)}
             style={styles.buttonWrapper}
+            testID={TESTID.PASSCODE_LIST}
           >
             <View>
               <Text style={styles.textCode}>{item.code}</Text>

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/OnOffTemplate/index.js

@@ -24,48 +24,69 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
   // eslint-disable-next-line no-unused-vars
   const [configValues, _] = useConfigGlobalState('configValues');
 
+  const actionName = useCallback(
+    (text) => {
+      const actionNameType = `${
+        sensor?.name
+      } ${actionGroup?.title?.toLowerCase()} ${text}`;
+      return actionNameType.replace(/\s+/g, ' ').trim();
+    },
+    [actionGroup?.title, sensor?.name]
+  );
   const triggerAction = useCallback(() => {
-    if (action_data) {
-      if (isOn) {
-        doAction(action_data, false);
-      } else {
-        doAction(action_data, true);
-      }
-    }
-    if (action_on_data && action_off_data) {
-      if (isOn) {
-        let actionName = `${
-          sensor?.name
-        } ${actionGroup?.title?.toLowerCase()} off`;
-        actionName = actionName.replace(/\s+/g, ' ').trim();
-        doAction(action_off_data, null, actionName);
-      } else {
-        let actionName = `${
-          sensor?.name
-        } ${actionGroup?.title?.toLowerCase()} on`;
-        actionName = actionName.replace(/\s+/g, ' ').trim();
-        doAction(action_on_data, null, actionName);
-      }
-    }
-    if (sensor?.is_managed_by_backend) {
-      configuration.config && watchMultiConfigs([configuration.config]);
+    switch (sensor?.device_type) {
+      case DEVICE_TYPE.ZIGBEE:
+        if (action_on_data && action_off_data) {
+          if (isOn) {
+            doAction(
+              action_off_data,
+              JSON.stringify({ state: 0 }),
+              actionName('off')
+            );
+          } else {
+            doAction(
+              action_on_data,
+              JSON.stringify({ state: 1 }),
+              actionName('on')
+            );
+          }
+        }
+        return;
+      default:
+        if (action_data) {
+          if (isOn) {
+            doAction(action_data, false);
+          } else {
+            doAction(action_data, true);
+          }
+        }
+        if (action_on_data && action_off_data) {
+          if (isOn) {
+            doAction(action_off_data, null, actionName('off'));
+          } else {
+            doAction(action_on_data, null, actionName('on'));
+          }
+        }
+        if (sensor?.is_managed_by_backend) {
+          configuration.config && watchMultiConfigs([configuration.config]);
+        }
+        return;
     }
   }, [
-    actionGroup?.title,
+    actionName,
     action_data,
     action_off_data,
     action_on_data,
     configuration.config,
     doAction,
     isOn,
+    sensor?.device_type,
     sensor?.is_managed_by_backend,
-    sensor?.name,
   ]);
 
   useEffect(() => {
     const { is_on_value, config } = configuration;
     const configValue = configValues[config];
-
     if (is_on_value && is_on_value.length > 0) {
       setIsOn(is_on_value.includes(configValue));
       return;
@@ -82,7 +103,6 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
     if (sensor?.device_type === DEVICE_TYPE.LG_THINQ) {
       return;
     }
-
     if (sensor?.is_managed_by_backend) {
       watchMultiConfigs([configuration.config]);
     }

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/SliderRangeTemplate.js

@@ -1,23 +1,26 @@
-import React, { memo, useCallback, useState, useMemo } from 'react';
+import React, { memo, useCallback, useState, useMemo, useEffect } from 'react';
 import { View } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import styles from './SliderRangeTemplateStyles';
 import Text from '../Text';
 import { Colors } from '../../configs';
 import SvgBrightness from '../../../assets/images/brightness.svg';
-import Slider from 'react-native-slider';
+import SliderRange from 'react-native-slider';
+import { watchMultiConfigs } from '../../iot/Monitor';
+import { useConfigGlobalState } from '../../iot/states';
 
-const SliderRangeTemplate = memo(({ actionGroup, doAction }) => {
+const SliderRangeTemplate = memo(({ actionGroup, doAction, sensor }) => {
   const t = useTranslations();
   const { configuration } = actionGroup;
   const [valueBrightness, setValueBrightness] = useState(0);
+  const [configValues] = useConfigGlobalState('configValues');
 
   const onChangeBrightness = useCallback(
     (value) => {
       setValueBrightness(value);
       doAction(
         configuration?.action_brightness_data,
-        `{"value_brness":${value}}`
+        JSON.stringify({ value_brness: value })
       );
     },
     [configuration?.action_brightness_data, doAction]
@@ -27,6 +30,17 @@ const SliderRangeTemplate = memo(({ actionGroup, doAction }) => {
     return valueBrightness || 0;
   }, [valueBrightness]);
 
+  useEffect(() => {
+    const { config } = configuration;
+    const configValue = configValues[config];
+    setValueBrightness(configValue);
+  }, [configuration.config, configValues, configuration]);
+
+  useEffect(() => {
+    if (sensor?.is_managed_by_backend) {
+      watchMultiConfigs([configuration.config]);
+    }
+  }, [sensor, configuration.config]);
   return (
     <View style={styles.viewBrightness}>
       <View style={styles.LeftBrightness}>
@@ -37,7 +51,7 @@ const SliderRangeTemplate = memo(({ actionGroup, doAction }) => {
       </View>
       <View style={styles.RightBrightness}>
         <View style={styles.slider}>
-          <Slider
+          <SliderRange
             value={valueBrightness}
             onSlidingComplete={onChangeBrightness}
             onValueChange={setValueBrightness}