@eohjsc/react-native-smart-city 0.4.56 → 0.4.58

package/package.json

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

package/src/commons/ActionTemplate/OnOffSimpleAction.js

@@ -40,7 +40,10 @@ const OnOffSimpleAction = ({ configuration, onPress, template }) => {
           {t('text_on')}
         </Text>
       </TouchableOpacity>
-      <TouchableOpacity onPress={onPressActionOff}>
+      <TouchableOpacity
+        accessibilityLabel={AccessibilityLabel.ON_OFF_SIMPLE_ACTION_OFF}
+        onPress={onPressActionOff}
+      >
         <Text type="H4" style={styles.textWithLine}>
           {t('text_off')}
         </Text>

package/src/commons/ActionTemplate/index.js

@@ -37,13 +37,14 @@ const ActionTemplate = memo(({ device, item, onSelectAction }) => {
       setActionName(action?.name);
       onSelectAction &&
         onSelectAction({
+          index: item?.index,
           action_name: action?.name,
           action: action?.action,
           data: actionData,
           template: action?.template,
         });
     },
-    [device?.device_type, onSelectAction]
+    [device?.device_type, item?.index, onSelectAction]
   );
 
   const renderAction = useMemo(() => {

package/src/commons/Calendar/styles.js

@@ -4,6 +4,7 @@ export default StyleSheet.create({
   calendar: {
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
+    marginBottom: 50,
   },
   arrowRight: {
     transform: [{ rotate: '180deg' }],

package/src/commons/Header/HeaderCustom.js

@@ -50,14 +50,13 @@ const HeaderCustom = ({
       style={[styles.wrap, isShowSeparator && styles.separator, headerStyles]}
     >
       {isCanBack && (
-        <TouchableOpacity
-          style={[styles.buttonBack, buttonBackStyles]}
-          onPress={handleGoback}
-        >
-          <Image
-            source={iconLeft || Images.arrowBack}
-            style={[styles.iconBack, iconBackStyle]}
-          />
+        <TouchableOpacity onPress={handleGoback}>
+          <View style={[styles.buttonBack, buttonBackStyles]}>
+            <Image
+              source={iconLeft || Images.arrowBack}
+              style={[styles.iconBack, iconBackStyle]}
+            />
+          </View>
         </TouchableOpacity>
       )}
       <View style={[styles.wrapTitle, wrapTitleStyle]}>
@@ -83,27 +82,32 @@ const HeaderCustom = ({
         {isShowRight && (
           <>
             {!isDisableRefresh && (
-              <TouchableOpacity style={styles.buttonBack} onPress={onRefresh}>
-                <Image
-                  source={Images.refresh}
-                  style={styles.iconFresh}
-                  resizeMode={'contain'}
-                />
+              <TouchableOpacity onPress={onRefresh}>
+                <View style={styles.buttonBack}>
+                  <Image
+                    source={Images.refresh}
+                    style={styles.iconFresh}
+                    resizeMode={'contain'}
+                  />
+                </View>
               </TouchableOpacity>
             )}
             <TouchableOpacity
-              style={styles.buttonBack}
               onPress={handleShowMenuAction}
               ref={refMenuAction}
               accessibilityLabel={AccessibilityLabel.MENU_POPPER_MORE}
             >
-              <Icon name={'more'} size={27} color={Colors.Black} />
+              <View style={styles.buttonBack}>
+                <Icon name={'more'} size={27} color={Colors.Black} />
+              </View>
             </TouchableOpacity>
           </>
         )}
         {isShowClose && (
-          <TouchableOpacity style={styles.buttonAdd} onPress={handleClose}>
-            <Icon name={'close'} size={24} color={Colors.Black} />
+          <TouchableOpacity onPress={handleClose}>
+            <View style={styles.buttonAdd}>
+              <Icon name={'close'} size={24} color={Colors.Black} />
+            </View>
           </TouchableOpacity>
         )}
         {rightComponent}

package/src/commons/Header/Styles/HeaderCustomStyles.js

@@ -21,13 +21,15 @@ export default StyleSheet.create({
     height: 18,
   },
   buttonBack: {
-    width: 35,
+    width: 45,
     height: 40,
     justifyContent: 'center',
     alignItems: 'center',
   },
   buttonAdd: {
     paddingRight: 6,
+    width: 45,
+    height: 40,
     justifyContent: 'center',
     alignItems: 'center',
   },

package/src/commons/HeaderAni/index.js

@@ -91,11 +91,12 @@ const HeaderAni = memo(
           ]}
         >
           <TouchableOpacity
-            style={styles.btnBack}
             onPress={onPressLeft}
             accessibilityLabel={AccessibilityLabel.ICON_BACK}
           >
-            <Icon name={'left'} size={27} color={Colors.Gray9} />
+            <View style={styles.btnBack}>
+              <Icon name={'left'} size={27} color={Colors.Gray9} />
+            </View>
           </TouchableOpacity>
           <View styles={styles.wrapRightComponent}>{rightComponent}</View>
         </Animated.View>

package/src/commons/OneTapTemplate/NumberUpDownActionTemplate.js

@@ -75,16 +75,18 @@ const NumberUpDownActionTemplate = ({ device, item = {}, onSelectAction }) => {
     setActionName(text_format.replace('{number}', value));
     onSelectAction &&
       onSelectAction({
+        index: item.index,
         action,
         data: actionData,
         template,
       });
     onClose();
   }, [
+    value,
     device?.device_type,
     text_format,
-    value,
     onSelectAction,
+    item.index,
     action,
     template,
     allow_config_store_value,

package/src/commons/OneTapTemplate/OptionsDropdownActionTemplate.js

@@ -45,6 +45,7 @@ const OptionsDropdownActionTemplate = ({ device, item, onSelectAction }) => {
 
     onSelectAction &&
       onSelectAction({
+        index: item.index,
         action,
         data: actionData,
         template,
@@ -58,6 +59,7 @@ const OptionsDropdownActionTemplate = ({ device, item, onSelectAction }) => {
     config,
     device?.device_type,
     onSelectAction,
+    item.index,
     action,
     template,
   ]);

package/src/commons/OneTapTemplate/StatesGridActionTemplate.js

@@ -25,6 +25,7 @@ const ActionItem = ({
 
     onSelectAction &&
       onSelectAction({
+        index: item.index,
         action: item.action,
         data: actionData,
         template,

package/src/commons/Unit/HeaderUnit/index.js

@@ -44,14 +44,15 @@ const HeaderUnit = memo(
       <View style={[styles.container, bottomBorder && styles.bottomBorder]}>
         <TouchableOpacity
           accessibilityLabel={AccessibilityLabel.HEADER_UNIT_BUTTON_BACK}
-          style={styles.btnLeft}
           onPress={onPressBack}
         >
-          <Icon
-            name={'left'}
-            size={27}
-            color={transparent ? Colors.White : Colors.Black}
-          />
+          <View style={styles.btnLeft}>
+            <Icon
+              name={'left'}
+              size={27}
+              color={transparent ? Colors.White : Colors.Black}
+            />
+          </View>
         </TouchableOpacity>
         <View style={[styles.boxTitle, styleBoxTitle]}>
           {title && (
@@ -66,27 +67,29 @@ const HeaderUnit = memo(
             {!hideRightPlus && (
               <TouchableOpacity
                 accessibilityLabel={AccessibilityLabel.HEADER_UNIT_BUTTON_ADD}
-                style={styles.btnAdd}
                 onPress={onPressAdd}
               >
-                <Icon
-                  name={'plus'}
-                  size={27}
-                  color={transparent ? Colors.White : Colors.Black}
-                />
+                <View style={styles.btnAdd}>
+                  <Icon
+                    name={'plus'}
+                    size={27}
+                    color={transparent ? Colors.White : Colors.Black}
+                  />
+                </View>
               </TouchableOpacity>
             )}
             <TouchableOpacity
-              style={styles.btnMore}
               onPress={onPressMore}
               ref={buttonMoreRef}
               accessibilityLabel={idButtonMore}
             >
-              <Icon
-                name={'more'}
-                size={27}
-                color={transparent ? Colors.White : Colors.Black}
-              />
+              <View style={styles.btnMore}>
+                <Icon
+                  name={'more'}
+                  size={27}
+                  color={transparent ? Colors.White : Colors.Black}
+                />
+              </View>
             </TouchableOpacity>
           </View>
         )}
@@ -108,11 +111,11 @@ const styles = StyleSheet.create({
     paddingTop: 15,
   },
   btnLeft: {
+    width: 40,
     height: '100%',
     paddingHorizontal: 8,
     justifyContent: 'center',
     alignItems: 'center',
-    width: 40,
   },
   boxRight: {
     flexDirection: 'row',
@@ -127,10 +130,10 @@ const styles = StyleSheet.create({
   },
   btnMore: {
     height: '100%',
+    width: 40,
     justifyContent: 'center',
     alignItems: 'center',
     marginRight: 16,
-    width: 40,
   },
   txtHeader: {
     fontSize: 16,

package/src/commons/Unit/__test__/HeaderUnit.test.js

@@ -23,13 +23,6 @@ describe('Test HeaderUnit', () => {
   const mockedOnBack = jest.fn();
   it('HeaderUnit onPress', async () => {
     let title = 'title';
-    let style = {
-      height: '100%',
-      paddingHorizontal: 8,
-      justifyContent: 'center',
-      alignItems: 'center',
-      width: 40,
-    };
     await act(async () => {
       tree = await create(
         <HeaderUnit
@@ -46,7 +39,6 @@ describe('Test HeaderUnit', () => {
         el.props.accessibilityLabel ===
         AccessibilityLabel.HEADER_UNIT_BUTTON_BACK
     );
-    expect(item.props.style).toEqual(style);
     await act(async () => {
       item.props.onPress();
     });

package/src/commons/WheelDateTimePicker/styles.js

@@ -6,6 +6,7 @@ export default StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     height: 180,
+    marginBottom: 50,
   },
   picker: {
     width: 120,

package/src/configs/AccessibilityLabel.js

@@ -562,6 +562,7 @@ export default {
 
   // OnOffSimpleAction
   ON_OFF_SIMPLE_ACTION_ON: 'ON_OFF_SIMPLE_ACTION_ON',
+  ON_OFF_SIMPLE_ACTION_OFF: 'ON_OFF_SIMPLE_ACTION_OFF',
 
   // Add New Device LG
   ADD_NEW_DEVICE_LG_ADD: 'ADD_NEW_DEVICE_LG_ADD',

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

@@ -14,7 +14,8 @@ import NewActionWrapper from './NewActionWrapper';
 import moment from 'moment';
 import { ToastBottomHelper } from '../../../utils/Utils';
 
-const RenderActionItem = ({ device, item, handleOnSelectAction }) => {
+const RenderActionItem = ({ device, item, handleOnSelectAction, index }) => {
+  item.index = index;
   switch (item.template) {
     case 'on_off_button_action_template':
     case 'one_button_action_template':
@@ -64,13 +65,8 @@ const RenderActionItem = ({ device, item, handleOnSelectAction }) => {
 const ChooseAction = ({ route }) => {
   const t = useTranslations();
   const { navigate } = useNavigation();
-  const {
-    unitId,
-    device,
-    automateId,
-    index = -1,
-    numberActionCanAdd,
-  } = route?.params || {};
+  const { unitId, device, automateId, numberActionCanAdd } =
+    route?.params || {};
   const [data, setData] = useState([]);
   const [actions, setActions] = useState([]);
 
@@ -117,14 +113,18 @@ const ChooseAction = ({ route }) => {
   }, [actions, numberActionCanAdd, automateId, unitId, navigate, t]);
 
   const handleOnSelectAction = (action) => {
-    let newActions = [...actions];
-
-    if (index < 0) {
-      newActions.push(action);
-    } else {
-      newActions[index] = action; // todo Bang this case is not happening?
-    }
-    setActions(newActions);
+    setActions((prevActions) => {
+      const index = prevActions.findIndex(
+        (item) => item.index === action.index
+      );
+      if (index !== -1) {
+        const newActions = [...prevActions];
+        newActions[index] = action;
+        return newActions;
+      } else {
+        return [...prevActions, action];
+      }
+    });
   };
 
   useEffect(() => {
@@ -141,11 +141,11 @@ const ChooseAction = ({ route }) => {
     >
       <View>
         {!!data?.length &&
-          data.map((item) => (
+          data.map((item, index) => (
             <RenderActionItem
               device={device}
               item={item}
-              key={item.id}
+              index={index}
               handleOnSelectAction={handleOnSelectAction}
             />
           ))}

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

@@ -79,14 +79,6 @@ const ChooseConfig = ({ route }) => {
     [configs]
   );
 
-  const onPressItem = (item) => () => {
-    navigate(Routes.SetupConfigCondition, {
-      item,
-      defaultCondition: conditions[item.id],
-      closeScreen,
-    });
-  };
-
   const renderCondition = useCallback(
     (item) => {
       return generateAutomationDataConditionText(
@@ -104,29 +96,17 @@ const ChooseConfig = ({ route }) => {
     [automate?.type, conditions, t]
   );
 
-  useEffect(() => {
-    fetchData();
-  }, [fetchData]);
-
-  useEffect(() => {
-    newCondition &&
-      setConditions((prev) => ({
-        ...prev,
-        [newCondition.config]: newCondition,
-      }));
-  }, [newCondition]);
-
-  return (
-    <NewActionWrapper
-      name={t('set_up {name}', { name: device?.name })}
-      nextTitle={t('continue')}
-      onNext={onSave}
-      canNext={checkedItem?.id}
-    >
-      {isLoading ? (
-        <LoadingSelectAction style={styles.container} />
-      ) : (
-        configs.map((item) => {
+  const renderConfigs = useCallback(
+    (configs) => {
+      const onPressItem = (item) => () => {
+        navigate(Routes.SetupConfigCondition, {
+          item,
+          defaultCondition: conditions[item.id],
+          closeScreen,
+        });
+      };
+      if (configs.length) {
+        return configs.map((item) => {
           const hasCondition = conditions[item.id];
           const isChecked = checkedItem?.id === item?.id;
           const isDefault = automate?.config_id === item?.id;
@@ -170,7 +150,59 @@ const ChooseConfig = ({ route }) => {
               </TouchableOpacity>
             </View>
           );
-        })
+        });
+      } else {
+        return (
+          <View style={styles.textCenter}>
+            <Text type="Body" center color={Colors.Gray7}>
+              {t('end_device_not_support_script', {
+                not_support: t(automate?.type),
+                support:
+                  automate?.type === AUTOMATE_TYPE.EVENT
+                    ? t(AUTOMATE_TYPE.VALUE_CHANGE)
+                    : t(AUTOMATE_TYPE.EVENT),
+              })}
+            </Text>
+          </View>
+        );
+      }
+    },
+    [
+      automate,
+      checkedItem?.id,
+      closeScreen,
+      conditions,
+      navigate,
+      onChecked,
+      renderCondition,
+      t,
+      valueEvaluations,
+    ]
+  );
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  useEffect(() => {
+    newCondition &&
+      setConditions((prev) => ({
+        ...prev,
+        [newCondition.config]: newCondition,
+      }));
+  }, [newCondition]);
+
+  return (
+    <NewActionWrapper
+      name={t('set_up {name}', { name: device?.name })}
+      nextTitle={t('continue')}
+      onNext={onSave}
+      canNext={checkedItem?.id}
+    >
+      {isLoading ? (
+        <LoadingSelectAction style={styles.container} />
+      ) : (
+        renderConfigs(configs)
       )}
     </NewActionWrapper>
   );

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

@@ -10,7 +10,12 @@ import { AUTOMATE_TYPE } from '../../../configs/Constants';
 
 const SelectMonitorDevices = ({ route }) => {
   const t = useTranslations();
-  const { automate = {}, isCreateNewAction, closeScreen } = route?.params || {};
+  const {
+    automate = {},
+    isCreateNewAction,
+    closeScreen,
+    unit,
+  } = route?.params || {};
 
   const [stations, setStations] = useState([]);
   const [listStation, setListStation] = useState([]);
@@ -26,7 +31,7 @@ const SelectMonitorDevices = ({ route }) => {
       configs.params.type = 'event';
     }
     await fetchWithCache(
-      API.UNIT.DEVICE_SENSOR(automate?.unit),
+      API.UNIT.DEVICE_SENSOR(automate?.unit ? automate?.unit : unit.id),
       configs,
       (response) => {
         const { success, data } = response;
@@ -45,7 +50,7 @@ const SelectMonitorDevices = ({ route }) => {
       }
     );
     setLoading(false);
-  }, [automate?.type, automate?.unit]);
+  }, [automate?.type, automate?.unit, unit.id]);
 
   useEffect(() => {
     if (!automate?.sensor_id) {

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

@@ -67,4 +67,10 @@ export default StyleSheet.create({
     alignItems: 'flex-start',
     paddingLeft: 20,
   },
+  textCenter: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: 30,
+    height: Constants.height * 0.7,
+  },
 });

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

@@ -294,4 +294,77 @@ describe('Test ChooseAction', () => {
       })
     );
   });
+
+  test('test press card on/off Simple Action repeatedly', async () => {
+    const config1 = 1;
+    const response = [
+      {
+        id: 1,
+        title: '',
+        template: 'OnOffSimpleActionTemplate',
+        configuration: {
+          allow_config_store_value: true,
+          config: config1,
+          action_on: '94ae262d-46e3-42ff-9d10-516831ecc830',
+          action_off: '94ae262d-46e3-42ff-9d10-516831ecc830',
+        },
+      },
+    ];
+    mock.onGet(API.DEVICE.DISPLAY_ACTIONS(1)).reply(200, response);
+    await act(async () => {
+      tree = await renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    const cards = instance.findAllByType(SelectActionCard);
+    // force all render
+    await act(async () => {
+      cards.map((card) => card.props.onPress());
+    });
+
+    const simpleActionOn = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.ON_OFF_SIMPLE_ACTION_ON &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      await simpleActionOn.props.onPress();
+    });
+
+    const simpleActionOnOff = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.ON_OFF_SIMPLE_ACTION_OFF &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      await simpleActionOnOff.props.onPress();
+    });
+
+    mock.onPost(API.AUTOMATE.ADD_SCRIPT_ACTION(1)).reply(200);
+    const buttonSave = instance.find(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.BOTTOM_VIEW_MAIN &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      await buttonSave.props.onPress();
+    });
+
+    expect(mock.history.post[0].data).toEqual(
+      JSON.stringify({
+        list_action: [
+          {
+            action: '94ae262d-46e3-42ff-9d10-516831ecc830',
+            data: {
+              state: 0,
+              config_id: config1,
+              config_value: 0,
+            },
+          },
+        ],
+      })
+    );
+  });
 });

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

@@ -157,10 +157,11 @@ const ScriptDetail = ({ route }) => {
         <TouchableOpacity
           onPress={handleShowMenuAction}
           ref={refMenuAction}
-          style={[styles.headerButton, styles.moreButton]}
           accessibilityLabel={AccessibilityLabel.ICON_MORE}
         >
-          <Icon name={'more'} size={27} color={Colors.Black} />
+          <View style={[styles.headerButton, styles.moreButton]}>
+            <Icon name={'more'} size={27} color={Colors.Black} />
+          </View>
         </TouchableOpacity>
       </View>
     ),

package/src/screens/Automate/SetSchedule/styles/indexStyles.js

@@ -10,6 +10,7 @@ export default StyleSheet.create({
     marginBottom: 32,
   },
   scollView: {
+    marginTop: 30,
     paddingHorizontal: 16,
     paddingBottom: 150,
   },

package/src/screens/Device/__test__/detail.test.js

@@ -56,6 +56,7 @@ const navContextValue = {
   isFocused: () => false,
   addListener: jest.fn(() => jest.fn()),
 };
+
 const wrapComponent = (state, account, route) => (
   <SCProvider initState={state}>
     <NavigationContext.Provider

package/src/screens/Device/__test__/sensorDisplayItem.test.js

@@ -16,6 +16,12 @@ import Compass from '../../../commons/Device/WindDirection/Compass';
 import DeviceAlertStatus from '../../../commons/Device/DeviceAlertStatus';
 import MockAdapter from 'axios-mock-adapter';
 import api from '../../../utils/Apis/axios';
+import CurrentRainSensor from '../../../commons/Device/RainningSensor/CurrentRainSensor';
+
+jest.mock('../../../iot/states', () => ({
+  useConfigGlobalState: () => [{}, null],
+  getConfigGlobalState: () => 'en',
+}));
 
 new MockAdapter(api.axiosInstance);
 
@@ -102,6 +108,7 @@ describe('Test SensorDisplayItem', () => {
     const actionGroup = instance.findAllByType(ActionGroup);
     expect(actionGroup).toHaveLength(1);
   });
+
   it('render camera', async () => {
     const item = {
       id: 10452,
@@ -304,4 +311,106 @@ describe('Test SensorDisplayItem', () => {
     const flatListItems = instance.findAllByType(DeviceAlertStatus);
     expect(flatListItems).toHaveLength(1);
   });
+
+  const _testCircleMini = async (item, expectProps) => {
+    const sensor = {
+      name: 'Sensor name',
+      is_managed_by_backend: false,
+    };
+
+    await act(async () => {
+      tree = await renderer.create(wrapComponent({ item, sensor }));
+    });
+    const instance = tree.root;
+
+    const currentRainSensor = instance.findByType(CurrentRainSensor);
+    expect(currentRainSensor.props).toEqual(expectProps);
+  };
+
+  it('render circle_mini', async () => {
+    const globalStates = require('../../../iot/states');
+    globalStates.useConfigGlobalState = () => [{ 99: { value: 1 } }, null];
+
+    const item = {
+      id: 10452,
+      order: 0,
+      template: 'circle_mini',
+      type: 'circle_mini',
+      configuration: {
+        config: {
+          id: 99,
+          title: '1',
+          color: 'blue',
+        },
+      },
+      is_configuration_ready: true,
+    };
+
+    await _testCircleMini(item, {
+      data: [
+        {
+          id: 99,
+          title: '1',
+          color: 'blue',
+          value: 1,
+          evaluate: {
+            color: null,
+            text: '--',
+          },
+        },
+      ],
+      isWidgetOrder: undefined,
+    });
+  });
+
+  it('render circle_mini without config value', async () => {
+    const globalStates = require('../../../iot/states');
+    globalStates.useConfigGlobalState = () => [{ 2: { value: 1 } }, null];
+
+    const item = {
+      id: 10452,
+      order: 0,
+      template: 'circle_mini',
+      type: 'circle_mini',
+      configuration: {
+        config: {
+          id: 99,
+          title: '1',
+          color: 'blue',
+        },
+      },
+      is_configuration_ready: true,
+    };
+
+    await _testCircleMini(item, {
+      data: [
+        {
+          id: 99,
+          title: '1',
+          color: 'blue',
+          value: null,
+          evaluate: null,
+        },
+      ],
+      isWidgetOrder: undefined,
+    });
+  });
+
+  it('render circle_mini without config id', async () => {
+    const item = {
+      id: 10452,
+      order: 0,
+      template: 'circle_mini',
+      type: 'circle_mini',
+      configuration: {
+        config: null,
+      },
+      is_configuration_ready: true,
+    };
+
+    await _testCircleMini(item, {
+      data: undefined,
+      isWidgetOrder: undefined,
+    });
+  });
 });

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

@@ -46,6 +46,13 @@ export const SensorDisplayItem = ({
 
   const evaluateValue = useEvaluateValue();
 
+  const checkConfigValue = (configValue) => {
+    if (configValue === null || configValue === undefined) {
+      return false;
+    }
+    return true;
+  };
+
   const getData = useCallback(() => {
     if (!item.configuration) {
       return;
@@ -83,6 +90,34 @@ export const SensorDisplayItem = ({
     value_evaluation,
   ]);
 
+  const getDataCircleMini = useCallback(() => {
+    if (!item?.configuration?.config?.id) {
+      return;
+    }
+
+    const config = item.configuration.config;
+    const configValue = configValues[config.id]?.value;
+    const configEvaluate = evaluate[config.id] || {};
+
+    const hasConfigValue = checkConfigValue(configValue);
+
+    let value = {
+      id: config.id,
+      value: hasConfigValue ? configValue : null,
+      evaluate: hasConfigValue
+        ? evaluateValue(configValue, value_evaluation) || configEvaluate
+        : null,
+    };
+
+    return [{ ...config, ...value }].filter(Boolean);
+  }, [
+    configValues,
+    evaluate,
+    evaluateValue,
+    item.configuration,
+    value_evaluation,
+  ]);
+
   const doAction = useCallback(
     async (action, data) => {
       if (processing) {
@@ -156,6 +191,13 @@ export const SensorDisplayItem = ({
           isWidgetOrder={isWidgetOrder}
         />
       );
+    case 'circle_mini':
+      return (
+        <CurrentRainSensor
+          data={getDataCircleMini(item)}
+          isWidgetOrder={isWidgetOrder}
+        />
+      );
     case 'value':
       switch (type || template) {
         case 'circle':

package/src/screens/Device/detail.js

@@ -668,20 +668,23 @@ const DeviceDetail = ({ route }) => {
     () => (
       <View style={styles.headerRight}>
         <TouchableOpacity
-          style={styles.buttonStar}
           onPress={isFavorite ? removeFromFavorites : addToFavorites}
           accessibilityLabel={AccessibilityLabel.HEADER_DEVICE_BUTTON_STAR}
         >
-          {isFavorite ? (
-            <IconFill name="star" size={25} color={Colors.Yellow6} />
-          ) : (
-            <IconOutline name="star" size={25} />
-          )}
+          <View style={styles.buttonStar}>
+            {isFavorite ? (
+              <IconFill name="star" size={25} color={Colors.Yellow6} />
+            ) : (
+              <IconOutline name="star" size={25} />
+            )}
+          </View>
         </TouchableOpacity>
 
         {isShowSetupEmergencyContact && (
-          <TouchableOpacity style={styles.button} onPress={onPressSetting}>
-            <Icon name="setting" size={25} color={Colors.Black} />
+          <TouchableOpacity onPress={onPressSetting}>
+            <View style={styles.button}>
+              <Icon name="setting" size={25} color={Colors.Black} />
+            </View>
           </TouchableOpacity>
         )}
 

package/src/screens/Device/styles.js

@@ -87,6 +87,8 @@ export default StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     marginRight: 14,
+    width: 30,
+    height: 30,
   },
   button: {
     marginRight: 10,

package/src/screens/SelectUnit/index.js

@@ -128,11 +128,12 @@ const SelectUnit = () => {
   const rightComponent = useMemo(
     () => (
       <TouchableOpacity
-        style={styles.buttonClose}
         onPress={handleOnGoBackAndClose}
         accessibilityLabel={AccessibilityLabel.ICON_CLOSE}
       >
-        <Icon name={'close'} size={24} color={Colors.Black} />
+        <View style={styles.buttonClose}>
+          <Icon name={'close'} size={24} color={Colors.Black} />
+        </View>
       </TouchableOpacity>
     ),
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/screens/Template/__test__/GatewayList.test.js

@@ -21,6 +21,6 @@ describe('Test GatewayList', () => {
     });
     const instance = tree.root;
     const Views = instance.findAllByType(View);
-    expect(Views).toHaveLength(13);
+    expect(Views).toHaveLength(14);
   });
 });

package/src/screens/Template/__test__/Information.test.js

@@ -11,6 +11,6 @@ describe('Test Information', () => {
     });
     const instance = tree.root;
     const Views = instance.findAllByType(View);
-    expect(Views).toHaveLength(14);
+    expect(Views).toHaveLength(15);
   });
 });

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

@@ -1037,6 +1037,9 @@ export default {
   update_smart: 'Update Smart',
   automate: 'Automate',
   smart: 'Smart',
+  end_device_not_support_script:
+    // eslint-disable-next-line max-len
+    'This device does not support installing "{not_support}" scripts, but you can use "{support}" scripts to perform the desired setup.',
   smart_account: 'Smart account',
   delete_smart_account: 'Delete smart account',
   this_action_will_remove_all_related_devices:

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

@@ -1052,6 +1052,9 @@ export default {
   smart: 'Thông minh',
   smart_account: 'Tài khoản thông minh',
   delete_smart_account: 'Xóa tài khoản thông minh',
+  end_device_not_support_script:
+    // eslint-disable-next-line max-len
+    'Thiết bị này không hỗ trợ việc cài đặt kịch bản "{not_support}", nhưng bạn có thể sử dụng kịch bản "{support}" để thực hiện việc cài đặt mong muốn.',
   this_action_will_remove_all_related_devices:
     'Hành động này sẽ xóa tất cả các thiết bị liên quan và nó sẽ cài đặt vĩnh viễn. Bạn có muốn tiếp tục không?',
   edit_device: 'Chỉnh sửa thiết bị',