@eohjsc/react-native-smart-city 0.3.29 → 0.3.32

package/src/screens/AddNewOneTap/index.js

@@ -3,7 +3,7 @@ import { ScrollView, SafeAreaView, Platform } from 'react-native';
 import { CommonActions, useNavigation } from '@react-navigation/native';
 
 import { API, Colors } from '../../configs';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 import _TextInput from '../../commons/Form/TextInput';
 import styles from './AddNewOneTapStyles';
 import { HeaderCustom } from '../../commons/Header';
@@ -26,7 +26,7 @@ const AddNewOneTap = memo(({ route }) => {
     automateId,
     scriptName,
     oldType,
-  } = route.params;
+  } = route?.params || {};
   const t = useTranslations();
   const { navigate, dispatch, goBack } = useNavigation();
   const [name, setName] = useState(scriptName ? scriptName : '');
@@ -123,7 +123,7 @@ const AddNewOneTap = memo(({ route }) => {
       <HeaderCustom isShowClose onClose={onClose} />
       <ScrollView scrollIndicatorInsets={{ right: 1 }}>
         <Text
-          testID={TESTID.ADD_NEW_DEVICE_ADD}
+          accessibilityLabel={AccessibilityLabel.ADD_NEW_DEVICE_ADD}
           semibold
           size={20}
           color={Colors.Gray9}
@@ -137,7 +137,7 @@ const AddNewOneTap = memo(({ route }) => {
           onChange={onChangeName}
           textInputStyle={styles.textInput}
           value={name}
-          testID={TESTID.NAME_YOUR_BUTTON}
+          accessibilityLabel={AccessibilityLabel.NAME_YOUR_BUTTON}
         />
       </ScrollView>
       <BottomButtonView

package/src/screens/Automate/__test__/index.test.js

@@ -9,7 +9,7 @@ import { mockSCStore } from '../../../context/mockStore';
 import ItemOneTap from '../../../commons/SubUnit/OneTap/ItemOneTap';
 import ItemAddNew from '../../../commons/Device/ItemAddNew';
 import Routes from '../../../utils/Route';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import api from '../../../utils/Apis/axios';
 import { API } from '../../../configs';
 
@@ -208,7 +208,7 @@ describe('Test Automate', () => {
 
     const iconArrowRight = instance.findAll(
       (el) =>
-        el.props.testID === TESTID.ICON_ARROW_RIGHT &&
+        el.props.accessibilityLabel === AccessibilityLabel.ICON_ARROW_RIGHT &&
         el.type === TouchableOpacity
     );
 

package/src/screens/Automate/index.js

@@ -20,7 +20,11 @@ import Loading from './Components/Loading';
 import ItemAddNew from '../../commons/Device/ItemAddNew';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { useGetIdUser } from '../../hooks/Common';
-import { AUTOMATE_TYPE, TESTID, UNIT_TYPES } from '../../configs/Constants';
+import {
+  AUTOMATE_TYPE,
+  AccessibilityLabel,
+  UNIT_TYPES,
+} from '../../configs/Constants';
 
 const keyExtractor = (item) => item.id;
 
@@ -134,7 +138,7 @@ const Automate = () => {
                 isOwner
               )}
               style={styles.arrowRightButton}
-              testID={TESTID.ICON_ARROW_RIGHT}
+              accessibilityLabel={AccessibilityLabel.ICON_ARROW_RIGHT}
             >
               <Image source={Images.arrowBack} style={styles.arrowRight} />
             </TouchableOpacity>

package/src/screens/ConfirmUnitDeletion/__test__/ConfirmUnitDeletion.test.js

@@ -6,7 +6,7 @@ import { mockSCStore } from '../../../context/mockStore';
 import ConfirmUnitDeletion from '../index';
 import _TextInput from '../../../commons/Form/TextInput';
 import { TouchableOpacity } from 'react-native';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import API from '../../../configs/API';
 import api from '../../../utils/Apis/axios';
 import MockAdapter from 'axios-mock-adapter';
@@ -74,7 +74,8 @@ describe('Test ConfirmUnitDeletion', () => {
 
     const touchableOpacity = instance.find(
       (el) =>
-        el.props.testID === TESTID.CONFIRM_UNIT_DELETION_BUTTON &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.CONFIRM_UNIT_DELETION_BUTTON &&
         el.type === TouchableOpacity
     );
     const textInput = instance.findByType(_TextInput);

package/src/screens/ConfirmUnitDeletion/index.js

@@ -12,11 +12,11 @@ import { Button } from '../../commons';
 import Routes from '../../utils/Route';
 import { axiosDelete } from '../../utils/Apis/axios';
 import { ToastBottomHelper } from '../../utils/Utils';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 
 const ConfirmUnitDeletion = ({ route }) => {
   const t = useTranslations();
-  const { unit } = route.params;
+  const { unit } = route?.params || {};
   const navigation = useNavigation();
   const [confirm, setConfrim] = useState('');
   const [errorText, setErrorText] = useState();
@@ -60,7 +60,7 @@ const ConfirmUnitDeletion = ({ route }) => {
           type="auth"
           title={t('done')}
           onPress={onSendPress}
-          testID={TESTID.CONFIRM_UNIT_DELETION_BUTTON}
+          accessibilityLabel={AccessibilityLabel.CONFIRM_UNIT_DELETION_BUTTON}
         />
       </View>
     </WrapHeaderScrollable>

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

@@ -8,7 +8,7 @@ import { mockSCStore } from '../../../../context/mockStore';
 import EditDevice from '..';
 import AlertAction from '../../../../commons/AlertAction';
 import _TextInput from '../../../../commons/Form/TextInput';
-import { TESTID } from '../../../../configs/Constants';
+import { AccessibilityLabel } from '../../../../configs/Constants';
 import { API } from '../../../../configs';
 import { useRoute } from '@react-navigation/native';
 import api from '../../../../utils/Apis/axios';
@@ -66,7 +66,7 @@ describe('Test EditDevice', () => {
     const alertAction = instance.findByType(AlertAction);
     const buttonRename = instance.findAll(
       (el) =>
-        el.props.testID === TESTID.DEVICE_SHOW_RENAME &&
+        el.props.accessibilityLabel === AccessibilityLabel.DEVICE_SHOW_RENAME &&
         el.type === TouchableOpacity
     );
     expect(buttonRename).toHaveLength(1);
@@ -95,7 +95,7 @@ describe('Test EditDevice', () => {
     const alertAction = instance.findByType(AlertAction);
     const buttonRename = instance.findAll(
       (el) =>
-        el.props.testID === TESTID.DEVICE_SHOW_RENAME &&
+        el.props.accessibilityLabel === AccessibilityLabel.DEVICE_SHOW_RENAME &&
         el.type === TouchableOpacity
     );
     expect(buttonRename).toHaveLength(1);
@@ -129,7 +129,7 @@ describe('Test EditDevice', () => {
     const alertAction = instance.findByType(AlertAction);
     const buttonDelete = instance.findAll(
       (el) =>
-        el.props.testID === TESTID.DEVICE_SHOW_REMOVE &&
+        el.props.accessibilityLabel === AccessibilityLabel.DEVICE_SHOW_REMOVE &&
         el.type === TouchableOpacity
     );
     expect(buttonDelete).toHaveLength(1);
@@ -153,7 +153,7 @@ describe('Test EditDevice', () => {
     const alertAction = instance.findByType(AlertAction);
     const buttonDelete = instance.findAll(
       (el) =>
-        el.props.testID === TESTID.DEVICE_SHOW_REMOVE &&
+        el.props.accessibilityLabel === AccessibilityLabel.DEVICE_SHOW_REMOVE &&
         el.type === TouchableOpacity
     );
     expect(buttonDelete).toHaveLength(1);

package/src/screens/Device/EditDevice/index.js

@@ -6,7 +6,7 @@ import { IconOutline } from '@ant-design/icons-react-native';
 import { Colors } from '../../../configs';
 import Text from '../../../commons/Text';
 import { useRoute } from '@react-navigation/native';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import AlertAction from '../../../commons/AlertAction';
 import _TextInput from '../../../commons/Form/TextInput';
 import styles from './styles/EditDeviceStyles';
@@ -85,7 +85,7 @@ const EditDevice = memo(() => {
         <TouchableOpacity
           style={styles.DeviceButton}
           onPress={onShowRename}
-          testID={TESTID.DEVICE_SHOW_RENAME}
+          accessibilityLabel={AccessibilityLabel.DEVICE_SHOW_RENAME}
         >
           <View style={styles.DeviceButtonLeft}>
             <Text type="H4" semibold>
@@ -108,7 +108,7 @@ const EditDevice = memo(() => {
           <TouchableOpacity
             style={styles.removeButton}
             onPress={onShowDelete(sensor?.name)}
-            testID={TESTID.DEVICE_SHOW_REMOVE}
+            accessibilityLabel={AccessibilityLabel.DEVICE_SHOW_REMOVE}
           >
             <Text
               type={'H4'}

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

@@ -8,7 +8,7 @@ import { API } from '../../../configs';
 import { AlertSendConfirm } from '../../../commons/EmergencyButton/AlertSendConfirm';
 import { AlertSent } from '../../../commons/EmergencyButton/AlertSent';
 import { AlertAction, ButtonPopup, MenuActionMore } from '../../../commons';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import Text from '../../../commons/Text';
 import { IconFill } from '@ant-design/icons-react-native';
 import CurrentRainSensor from '../../../commons/Device/RainningSensor/CurrentRainSensor';
@@ -53,7 +53,7 @@ jest.mock('react', () => ({
 jest.mock('../../../hooks/Common', () => {
   return {
     ...jest.requireActual('../../../hooks/Common'),
-    useGGHomeDeviceConnected: () => ({ isConnected: true }),
+    useHomeAssistantDeviceConnected: () => ({ isConnected: true }),
   };
 });
 
@@ -228,29 +228,35 @@ describe('test DeviceDetail', () => {
     });
     const instance = tree.root;
     const sensorDisplayItem = instance.findAll(
-      (el) => el.props.testID === TESTID.SENSOR_DISPLAY_ITEM
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.SENSOR_DISPLAY_ITEM
     );
     expect(sensorDisplayItem.length).toEqual(2);
 
     const itemActionGroup = instance.find(
-      (el) => el.props.testID === TESTID.DEVICE_DETAIL_ACTION_GROUP
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.DEVICE_DETAIL_ACTION_GROUP
     );
     expect(itemActionGroup).toBeDefined();
 
     const button1 = instance.find(
-      (el) => el.props.testID === TESTID.BUTTON_TEMPLATE_1
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.BUTTON_TEMPLATE_1
     );
     await act(async () => {
       await button1.props.onPress();
     });
     const button2 = instance.find(
-      (el) => el.props.testID === TESTID.BUTTON_TEMPLATE_2
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.BUTTON_TEMPLATE_2
     );
     await act(async () => {
       await button2.props.onPress();
     });
     const button3 = instance.find(
-      (el) => el.props.testID === TESTID.BUTTON_TEMPLATE_3
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.BUTTON_TEMPLATE_3
     );
     await act(async () => {
       await button3.props.onPress();
@@ -289,8 +295,8 @@ describe('test DeviceDetail', () => {
     const instance = tree.root;
     const buttonPopup = instance.find(
       (el) =>
-        el.props.testID === TESTID.BUTTON_POPUP_RESOLVED &&
-        el.type === ButtonPopup
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.BUTTON_POPUP_RESOLVED && el.type === ButtonPopup
     );
     const alertAction = instance.findByType(AlertAction);
     expect(buttonPopup.props.visible).toEqual(false);
@@ -315,13 +321,13 @@ describe('test DeviceDetail', () => {
     const instance = tree.root;
     const buttonPopupTitle = instance.find(
       (el) =>
-        el.props.testID === TESTID.BUTTON_POPUP_RESOLVED_TITLE &&
-        el.type === Text
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.BUTTON_POPUP_RESOLVED_TITLE && el.type === Text
     );
     const buttonPopupIcon = instance.find(
       (el) =>
-        el.props.testID === TESTID.BUTTON_POPUP_RESOLVED_ICON &&
-        el.type === IconFill
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.BUTTON_POPUP_RESOLVED_ICON && el.type === IconFill
     );
     expect(buttonPopupTitle.props.children).toEqual([
       'Unit name',
@@ -477,7 +483,8 @@ describe('test DeviceDetail', () => {
 
     const instance = tree.root;
     const sensorDisplayItem = instance.findAll(
-      (el) => el.props.testID === TESTID.SENSOR_DISPLAY_ITEM
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.SENSOR_DISPLAY_ITEM
     );
     expect(sensorDisplayItem).toHaveLength(4);
   });
@@ -541,7 +548,8 @@ describe('test DeviceDetail', () => {
 
     const instance = tree.root;
     const sensorDisplayItem = instance.findAll(
-      (el) => el.props.testID === TESTID.SENSOR_DISPLAY_ITEM
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.SENSOR_DISPLAY_ITEM
     );
     expect(sensorDisplayItem).toHaveLength(1);
   });
@@ -589,7 +597,8 @@ describe('test DeviceDetail', () => {
 
     const instance = tree.root;
     const sensorDisplayItem = instance.findAll(
-      (el) => el.props.testID === TESTID.SENSOR_DISPLAY_ITEM
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.SENSOR_DISPLAY_ITEM
     );
     expect(sensorDisplayItem).toHaveLength(1);
 
@@ -604,7 +613,8 @@ describe('test DeviceDetail', () => {
     });
     const instance = tree.root;
     const sensorDisplayItem = instance.findAll(
-      (el) => el.props.testID === TESTID.SENSOR_DISPLAY_ITEM
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.SENSOR_DISPLAY_ITEM
     );
     expect(sensorDisplayItem).toHaveLength(0);
   });
@@ -618,7 +628,9 @@ describe('test DeviceDetail', () => {
     expect(menu.props.isVisible).toBe(false);
 
     const buttonMore = instance.find(
-      (el) => el.props.testID === TESTID.HEADER_DEVICE_BUTTON_MORE
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.HEADER_DEVICE_BUTTON_MORE
     );
     await act(async () => {
       await buttonMore.props.onPress();
@@ -627,7 +639,7 @@ describe('test DeviceDetail', () => {
   });
 
   test('Add device to Favourites', async () => {
-    const sensor = route.params.sensorData;
+    const sensor = route?.params?.sensorData;
     sensor.is_favourite = false;
 
     await act(async () => {
@@ -636,7 +648,9 @@ describe('test DeviceDetail', () => {
     const instance = tree.root;
     mock.onPost(API.DEVICE.ADD_TO_FAVOURITES(sensor.id)).reply(200);
     const buttonStar = instance.find(
-      (el) => el.props.testID === TESTID.HEADER_DEVICE_BUTTON_STAR
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.HEADER_DEVICE_BUTTON_STAR
     );
     await act(async () => {
       await buttonStar.props.onPress();
@@ -644,7 +658,7 @@ describe('test DeviceDetail', () => {
   });
 
   test('Remove device from Favourites', async () => {
-    const sensor = route.params.sensorData;
+    const sensor = route?.params?.sensorData;
     store.unit.favoriteDeviceIds = [sensor.id];
 
     await act(async () => {
@@ -654,7 +668,9 @@ describe('test DeviceDetail', () => {
     mock.onPost(API.DEVICE.REMOVE_FROM_FAVOURITES(sensor.id)).reply(200);
 
     const buttonStar = instance.find(
-      (el) => el.props.testID === TESTID.HEADER_DEVICE_BUTTON_STAR
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.HEADER_DEVICE_BUTTON_STAR
     );
     await act(async () => {
       await buttonStar.props.onPress();

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

@@ -5,8 +5,10 @@ import HistoryChart from '../../../commons/Device/HistoryChart';
 import { API } from '../../../configs';
 import { axiosGet } from '../../../utils/Apis/axios';
 
-export const DetailHistoryChart = ({ item, sensor }) => {
-  const [chartData, setChartData] = useState(item.configuration.configs);
+export const DetailHistoryChart = ({ item = {}, sensor = {} }) => {
+  const { configuration = {} } = item;
+  const { configs = [] } = configuration;
+  const [chartData, setChartData] = useState(configs);
   const [startDate, setStartDate] = useState(
     moment().subtract(1, 'days').valueOf()
   );
@@ -14,7 +16,7 @@ export const DetailHistoryChart = ({ item, sensor }) => {
   useEffect(() => {
     const fetchData = async () => {
       let params = new URLSearchParams();
-      item.configuration.configs.map((config) => {
+      configs.map((config) => {
         params.append('config', config.id);
       });
       params.append('date_from', startDate / 1000);
@@ -30,7 +32,7 @@ export const DetailHistoryChart = ({ item, sensor }) => {
           }
         }
 
-        const formatData = item.configuration.configs.map((config) => {
+        const formatData = configs.map((config) => {
           const dataChart = data.find((k) => k.config === config.id) || {
             data: [],
           };
@@ -40,7 +42,7 @@ export const DetailHistoryChart = ({ item, sensor }) => {
       }
     };
     fetchData();
-  }, [startDate, endDate, item, sensor]);
+  }, [startDate, endDate, sensor, configs]);
   if (!chartData.length) {
     return false;
   }

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

@@ -7,8 +7,8 @@ export const SensorConnectStatusViewHeader = ({
   connectedViaNetwork,
   connectedViaBle,
   isDeviceHasBle,
-  connectedViaGGHome,
-  isGGHomeConnecting,
+  connectedViaHomeAssistant,
+  isHomeAssistantConnecting,
   lastUpdated,
   isDisplayTime,
   showWindDirection,
@@ -18,10 +18,8 @@ export const SensorConnectStatusViewHeader = ({
     if (!!sensor && sensor?.is_managed_by_backend) {
       return false;
     } else {
-      if (sensor?.device_type === DEVICE_TYPE.LG_THINQ) {
-        return false;
-      } else if (sensor?.device_type === DEVICE_TYPE.GOOGLE_HOME) {
-        return isGGHomeConnecting;
+      if (sensor?.device_type === DEVICE_TYPE.GOOGLE_HOME) {
+        return isHomeAssistantConnecting;
       } else {
         return false;
       }
@@ -33,6 +31,14 @@ export const SensorConnectStatusViewHeader = ({
   }
 
   if (!!sensor && sensor?.is_managed_by_backend) {
+    if (sensor?.device_type === DEVICE_TYPE.LG_THINQ) {
+      return (
+        <>
+          <ConnectedViewHeader lastUpdated={lastUpdated} />
+          {children}
+        </>
+      );
+    }
     if (connectedViaNetwork) {
       return (
         <>
@@ -63,21 +69,14 @@ export const SensorConnectStatusViewHeader = ({
     }
   } else {
     // not managed by backend
-    if (sensor?.device_type === DEVICE_TYPE.LG_THINQ) {
-      return (
-        <>
-          <ConnectedViewHeader lastUpdated={lastUpdated} />
-          {children}
-        </>
-      );
-    } else if (sensor?.device_type === DEVICE_TYPE.GOOGLE_HOME) {
-      if (connectedViaGGHome) {
+    if (sensor?.device_type === DEVICE_TYPE.GOOGLE_HOME) {
+      if (connectedViaHomeAssistant) {
         return (
           <>
             <ConnectedViewHeader
               lastUpdated={lastUpdated}
               isDisplayTime={isDisplayTime}
-              type={'GoogleHome'}
+              type={'HomeAssistant'}
             />
             {children}
           </>
@@ -86,7 +85,7 @@ export const SensorConnectStatusViewHeader = ({
         return (
           <DisconnectedView
             sensor={sensor}
-            type={'GoogleHome'}
+            type={'HomeAssistant'}
             isDeviceHasBle={isDeviceHasBle}
           />
         );

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

@@ -1,8 +1,8 @@
 import React, { useCallback } from 'react';
 import { View } from 'react-native';
 import ActionGroup from '../../../commons/ActionGroup';
-import { Card } from '../../../commons/CardShadow';
-import { TESTID } from '../../../configs/Constants';
+import { CardDevMode } from '../../../commons/DevMode';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { DetailHistoryChart } from './DetailHistoryChart';
 import CurrentRainSensor from '../../../commons/Device/RainningSensor/CurrentRainSensor';
@@ -28,7 +28,7 @@ const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
 );
 
 export const SensorDisplayItem = ({
-  item,
+  item = {},
   sensor,
   emergency,
   getData,
@@ -40,6 +40,8 @@ export const SensorDisplayItem = ({
 }) => {
   const t = useTranslations();
   const userId = useSCContextSelector((state) => state.auth.account.user.id);
+  const { configuration = {}, id: idTemplate } = item;
+  const { type, uri, id, name, title } = configuration;
 
   const sendRemoteCommand = useRemoteControl();
 
@@ -50,42 +52,47 @@ export const SensorDisplayItem = ({
     [sensor, userId, sendRemoteCommand]
   );
 
-  if (item.configuration.type === 'compass') {
-    setShowWindDirection(true);
+  if (type === 'compass') {
+    setShowWindDirection && setShowWindDirection(true);
   }
   switch (item.type) {
     case 'camera':
       return (
-        <Card title={t('camera')}>
+        <CardDevMode title={t('camera')} id={idTemplate} isWrap>
           <View style={styles.mediaContainer}>
             <MediaPlayerDetail
-              uri={item.configuration.uri}
+              uri={uri}
               thumbnail={{
                 uri: background,
               }}
-              key={`camera-device-${item.configuration.id}`}
-              cameraName={item.configuration.name}
+              key={`camera-device-${id}`}
+              cameraName={name}
               width={standardizeWidth - 32}
               height={standardizeHeight - 16}
             />
           </View>
-        </Card>
+        </CardDevMode>
       );
     case 'action':
       return (
         <ActionGroup
-          testID={TESTID.DEVICE_DETAIL_ACTION_GROUP}
-          actionGroup={item.configuration}
+          accessibilityLabel={AccessibilityLabel.DEVICE_DETAIL_ACTION_GROUP}
+          actionGroup={configuration}
           doAction={doAction}
           sensor={sensor}
+          id={idTemplate}
         />
       );
     case 'history':
       return <DetailHistoryChart item={item} sensor={sensor} />;
     case 'value':
-      switch (item.configuration.type) {
+      switch (type) {
         case 'circle':
-          return <CurrentRainSensor data={getData(item)} />;
+          return (
+            <CardDevMode id={idTemplate}>
+              <CurrentRainSensor data={getData(item)} />
+            </CardDevMode>
+          );
         case 'simple_list':
           return (
             <PMSensorIndicatior
@@ -94,22 +101,32 @@ export const SensorDisplayItem = ({
             />
           );
         case 'gauge':
-          return <Anemometer data={getData(item)} maxValue={maxValue} />;
+          return (
+            <CardDevMode id={idTemplate}>
+              <Anemometer data={getData(item)} maxValue={maxValue} />
+            </CardDevMode>
+          );
         case 'compass':
-          return <Compass data={getData(item)} />;
+          return (
+            <CardDevMode id={idTemplate}>
+              <Compass data={getData(item)} />
+            </CardDevMode>
+          );
         case 'alert_status':
           return (
-            <DeviceAlertStatus
-              data={getData(item)}
-              style={styles.marginLeft}
-              offsetTitle={offsetTitle}
-              setOffsetTitle={setOffsetTitle}
-            />
+            <CardDevMode id={idTemplate}>
+              <DeviceAlertStatus
+                data={getData(item)}
+                style={styles.marginLeft}
+                offsetTitle={offsetTitle}
+                setOffsetTitle={setOffsetTitle}
+              />
+            </CardDevMode>
           );
         case 'flat_list':
           return (
             <FlatListItems
-              title={item.configuration.title}
+              title={title}
               data={getData(item)}
               style={[styles.marginLeft, styles.marginVertical]}
               offsetTitle={offsetTitle}
@@ -119,14 +136,22 @@ export const SensorDisplayItem = ({
           return <ListQualityIndicator data={getData(item)} />;
       }
     case 'emergency':
-      switch (item.configuration.type) {
+      switch (type) {
         case 'detail':
-          return <EmergencyDetail item={item} />;
+          return (
+            <CardDevMode id={idTemplate}>
+              <EmergencyDetail item={item} />
+            </CardDevMode>
+          );
         default:
           return <EmergencyButton emergency={emergency} />;
       }
     case 'info':
-      return <FooterInfo data={item.configuration} />;
+      return (
+        <CardDevMode id={idTemplate}>
+          <FooterInfo data={configuration} />
+        </CardDevMode>
+      );
     case 'smart_ir':
       return <SmartIr item={item} />;
     default: