@eohjsc/react-native-smart-city 0.3.30 → 0.3.33

package/src/commons/ActionGroup/SmartTiviActionTemplate/SmartTiviActionTemplate.js

@@ -9,7 +9,7 @@ import { IconOutline } from '@ant-design/icons-react-native';
 import CircleButton from './component/CircleButton';
 import RectangleButton from './component/RectangleButton';
 import ControlPlay from './component/ControlPlay';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 
 import {
@@ -109,13 +109,17 @@ const SmartTiviActionTemplate = memo(
                   />
                 }
                 onPress={onPressButton(SMART_TIVI_BUTTON.ONOFF_BUTTON)}
-                testID={TESTID.SMART_TIVI_TEMPLATE.ONOFF_BUTTON}
+                accessibilityLabel={
+                  AccessibilityLabel.SMART_TIVI_TEMPLATE.ONOFF_BUTTON
+                }
               />
               <CircleButton
                 type="small"
                 icon={<SvgInput size={20} style={styles.iconButtonExit} />}
                 onPress={onPressButton(SMART_TIVI_BUTTON.EXIT_BUTTON)}
-                testID={TESTID.SMART_TIVI_TEMPLATE.EXIT_BUTTON}
+                accessibilityLabel={
+                  AccessibilityLabel.SMART_TIVI_TEMPLATE.EXIT_BUTTON
+                }
               />
             </View>
             <View style={styles.controlDevice}>
@@ -126,7 +130,9 @@ const SmartTiviActionTemplate = memo(
                 onPressDown={onPressButton(
                   SMART_TIVI_BUTTON.VOLUME_DOWN_BUTTON
                 )}
-                testID={TESTID.SMART_TIVI_TEMPLATE.VOLUME_BUTTON}
+                accessibilityLabel={
+                  AccessibilityLabel.SMART_TIVI_TEMPLATE.VOLUME_BUTTON
+                }
               />
               <CircleButton
                 type="big"
@@ -136,7 +142,9 @@ const SmartTiviActionTemplate = memo(
                 onPressLeft={onPressButton(SMART_TIVI_BUTTON.LEFT_BUTTON)}
                 onPressRight={onPressButton(SMART_TIVI_BUTTON.RIGHT_BUTTON)}
                 onPressOk={onPressButton(SMART_TIVI_BUTTON.OK_BUTTON)}
-                testID={TESTID.SMART_TIVI_TEMPLATE.BIG_BUTTON}
+                accessibilityLabel={
+                  AccessibilityLabel.SMART_TIVI_TEMPLATE.BIG_BUTTON
+                }
               />
               <RectangleButton
                 type="column"
@@ -147,7 +155,9 @@ const SmartTiviActionTemplate = memo(
                 }
                 onPressUp={onPressButton(SMART_TIVI_BUTTON.CH_UP)}
                 onPressDown={onPressButton(SMART_TIVI_BUTTON.CH_DOWN)}
-                testID={TESTID.SMART_TIVI_TEMPLATE.CH_BUTTON}
+                accessibilityLabel={
+                  AccessibilityLabel.SMART_TIVI_TEMPLATE.CH_BUTTON
+                }
               />
             </View>
             <View style={styles.controlPlay}>
@@ -155,7 +165,9 @@ const SmartTiviActionTemplate = memo(
                 onPressPrev={onPressButton(SMART_TIVI_BUTTON.PREV_BUTTON)}
                 onPressStop={onPressButton(SMART_TIVI_BUTTON.STOP_BUTTON)}
                 onPressNext={onPressButton(SMART_TIVI_BUTTON.NEXT_BUTTON)}
-                testID={TESTID.SMART_TIVI_TEMPLATE.CONTROL_BUTTON}
+                accessibilityLabel={
+                  AccessibilityLabel.SMART_TIVI_TEMPLATE.CONTROL_BUTTON
+                }
               />
             </View>
             <View style={styles.controlHome}>
@@ -163,13 +175,17 @@ const SmartTiviActionTemplate = memo(
                 type="row"
                 onPress={onPressButton(SMART_TIVI_BUTTON.HOME_BUTTON)}
                 icon={<Home />}
-                testID={TESTID.SMART_TIVI_TEMPLATE.HOME_BUTTON}
+                accessibilityLabel={
+                  AccessibilityLabel.SMART_TIVI_TEMPLATE.HOME_BUTTON
+                }
               />
               <RectangleButton
                 type="row"
                 onPress={onPressButton(SMART_TIVI_BUTTON.BACK_BUTTON)}
                 icon={<KeyboardReturn />}
-                testID={TESTID.SMART_TIVI_TEMPLATE.BACK_BUTTON}
+                accessibilityLabel={
+                  AccessibilityLabel.SMART_TIVI_TEMPLATE.BACK_BUTTON
+                }
               />
             </View>
             <View style={styles.channelTV}>

package/src/commons/ActionGroup/SmartTiviActionTemplate/__test__/ControlPlay.test.js

@@ -4,7 +4,7 @@ import ControlPlay from '../component/ControlPlay';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
 import { TouchableOpacity } from 'react-native';
-import { TESTID } from '../../../../configs/Constants';
+import { AccessibilityLabel } from '../../../../configs/Constants';
 
 const wrapComponent = (onPressPrev, onPressStop, onPressNext) => (
   <SCProvider initState={mockSCStore({})}>
@@ -41,7 +41,8 @@ describe('Test ControlPlay', () => {
 
     const PrevButton = instance.find(
       (el) =>
-        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.PREV_BUTTON &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.SMART_TIVI_TEMPLATE.PREV_BUTTON &&
         el.type === TouchableOpacity
     );
     expect(PrevButton).toBeDefined();
@@ -57,7 +58,8 @@ describe('Test ControlPlay', () => {
 
     const PrevButton = instance.find(
       (el) =>
-        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.PREV_BUTTON &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.SMART_TIVI_TEMPLATE.PREV_BUTTON &&
         el.type === TouchableOpacity
     );
     expect(PrevButton).toBeDefined();
@@ -76,7 +78,8 @@ describe('Test ControlPlay', () => {
 
     const StopButton = instance.find(
       (el) =>
-        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.STOP_BUTTON &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.SMART_TIVI_TEMPLATE.STOP_BUTTON &&
         el.type === TouchableOpacity
     );
     expect(StopButton).toBeDefined();
@@ -92,7 +95,8 @@ describe('Test ControlPlay', () => {
 
     const StopButton = instance.find(
       (el) =>
-        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.STOP_BUTTON &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.SMART_TIVI_TEMPLATE.STOP_BUTTON &&
         el.type === TouchableOpacity
     );
     expect(StopButton).toBeDefined();
@@ -111,7 +115,8 @@ describe('Test ControlPlay', () => {
 
     const NextButton = instance.find(
       (el) =>
-        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.NEXT_BUTTON &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.SMART_TIVI_TEMPLATE.NEXT_BUTTON &&
         el.type === TouchableOpacity
     );
     expect(NextButton).toBeDefined();
@@ -127,7 +132,8 @@ describe('Test ControlPlay', () => {
 
     const NextButton = instance.find(
       (el) =>
-        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.NEXT_BUTTON &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.SMART_TIVI_TEMPLATE.NEXT_BUTTON &&
         el.type === TouchableOpacity
     );
     expect(NextButton).toBeDefined();

package/src/commons/ActionGroup/SmartTiviActionTemplate/__test__/RectangleButton.test.js

@@ -4,7 +4,7 @@ import RectangleButton from '../component/RectangleButton';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
 import { TouchableOpacity } from 'react-native';
-import { TESTID } from '../../../../configs/Constants';
+import { AccessibilityLabel } from '../../../../configs/Constants';
 
 const wrapComponent = (type, onPress, onPressUp, onPressDown, icon) => (
   <SCProvider initState={mockSCStore({})}>
@@ -45,7 +45,8 @@ describe('Test RectangleButton', () => {
 
     const RectangleButtonUp = instance.find(
       (el) =>
-        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.CH_VOLUME_UP_BUTTON &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.SMART_TIVI_TEMPLATE.CH_VOLUME_UP_BUTTON &&
         el.type === TouchableOpacity
     );
     expect(RectangleButtonUp).toBeDefined();
@@ -62,7 +63,8 @@ describe('Test RectangleButton', () => {
 
     const RectangleButtonUp = instance.find(
       (el) =>
-        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.CH_VOLUME_UP_BUTTON &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.SMART_TIVI_TEMPLATE.CH_VOLUME_UP_BUTTON &&
         el.type === TouchableOpacity
     );
     expect(RectangleButtonUp).toBeDefined();
@@ -82,7 +84,8 @@ describe('Test RectangleButton', () => {
 
     const RectangleButtonDown = instance.find(
       (el) =>
-        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.CH_VOLUME_DOWN_BUTTON &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.SMART_TIVI_TEMPLATE.CH_VOLUME_DOWN_BUTTON &&
         el.type === TouchableOpacity
     );
     expect(RectangleButtonDown).toBeDefined();
@@ -99,7 +102,8 @@ describe('Test RectangleButton', () => {
 
     const RectangleButtonDown = instance.find(
       (el) =>
-        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.CH_VOLUME_DOWN_BUTTON &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.SMART_TIVI_TEMPLATE.CH_VOLUME_DOWN_BUTTON &&
         el.type === TouchableOpacity
     );
     expect(RectangleButtonDown).toBeDefined();

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

@@ -4,7 +4,7 @@ import SmartTiviActionTemplate from '../SmartTiviActionTemplate';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
 import { ScrollView } from 'react-native';
-import { TESTID } from '../../../../configs/Constants';
+import { AccessibilityLabel } from '../../../../configs/Constants';
 
 const wrapComponent = (actionGroup, doAction) => (
   <SCProvider initState={mockSCStore({})}>
@@ -28,7 +28,9 @@ describe('Test SmartTiviActionTemplate', () => {
     });
     const instance = wrapper.root;
     const circleButtonOnOff = instance.find(
-      (el) => el.props.testID === TESTID.SMART_TIVI_TEMPLATE.ONOFF_BUTTON
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.SMART_TIVI_TEMPLATE.ONOFF_BUTTON
     );
     expect(circleButtonOnOff).toBeDefined();
     await act(() => {
@@ -36,7 +38,9 @@ describe('Test SmartTiviActionTemplate', () => {
     });
 
     const circleButtonExit = instance.find(
-      (el) => el.props.testID === TESTID.SMART_TIVI_TEMPLATE.EXIT_BUTTON
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.SMART_TIVI_TEMPLATE.EXIT_BUTTON
     );
     expect(circleButtonExit).toBeDefined();
     // expect(circleButton).toHaveLength(2);
@@ -51,7 +55,9 @@ describe('Test SmartTiviActionTemplate', () => {
     });
     const instance = wrapper.root;
     const RectangleButtonVolume = instance.find(
-      (el) => el.props.testID === TESTID.SMART_TIVI_TEMPLATE.VOLUME_BUTTON
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.SMART_TIVI_TEMPLATE.VOLUME_BUTTON
     );
     expect(RectangleButtonVolume).toBeDefined();
     await act(() => {
@@ -61,7 +67,9 @@ describe('Test SmartTiviActionTemplate', () => {
       RectangleButtonVolume.props.onPressDown();
     });
     const RectangleButtonCH = instance.find(
-      (el) => el.props.testID === TESTID.SMART_TIVI_TEMPLATE.CH_BUTTON
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.SMART_TIVI_TEMPLATE.CH_BUTTON
     );
     expect(RectangleButtonCH).toBeDefined();
     await act(() => {
@@ -77,7 +85,9 @@ describe('Test SmartTiviActionTemplate', () => {
     });
     const instance = wrapper.root;
     const CircleButtonBig = instance.find(
-      (el) => el.props.testID === TESTID.SMART_TIVI_TEMPLATE.BIG_BUTTON
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.SMART_TIVI_TEMPLATE.BIG_BUTTON
     );
     expect(CircleButtonBig).toBeDefined();
     await act(() => {
@@ -102,7 +112,9 @@ describe('Test SmartTiviActionTemplate', () => {
     });
     const instance = wrapper.root;
     const ControlPlay = instance.find(
-      (el) => el.props.testID === TESTID.SMART_TIVI_TEMPLATE.CONTROL_BUTTON
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.SMART_TIVI_TEMPLATE.CONTROL_BUTTON
     );
     expect(ControlPlay).toBeDefined();
     await act(() => {
@@ -121,7 +133,9 @@ describe('Test SmartTiviActionTemplate', () => {
     });
     const instance = wrapper.root;
     const controlHome = instance.find(
-      (el) => el.props.testID === TESTID.SMART_TIVI_TEMPLATE.HOME_BUTTON
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.SMART_TIVI_TEMPLATE.HOME_BUTTON
     );
     expect(controlHome).toBeDefined();
     await act(() => {
@@ -134,7 +148,9 @@ describe('Test SmartTiviActionTemplate', () => {
     });
     const instance = wrapper.root;
     const controlBack = instance.find(
-      (el) => el.props.testID === TESTID.SMART_TIVI_TEMPLATE.BACK_BUTTON
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.SMART_TIVI_TEMPLATE.BACK_BUTTON
     );
     expect(controlBack).toBeDefined();
     await act(() => {

package/src/commons/ActionGroup/SmartTiviActionTemplate/component/CircleButton.js

@@ -4,7 +4,7 @@ import styles from './CircleButtonStyles';
 import Text from '../../../Text';
 import { Colors, Images } from '../../../../configs';
 import { IconOutline } from '@ant-design/icons-react-native';
-import { TESTID } from '../../../../configs/Constants';
+import { AccessibilityLabel } from '../../../../configs/Constants';
 
 const CircleButton = memo(
   ({
@@ -42,7 +42,9 @@ const CircleButton = memo(
               <TouchableOpacity
                 style={[styles.upButton, styles.padding16]}
                 onPress={onPressUp}
-                testID={TESTID.SMART_TIVI_TEMPLATE.UP_BUTTON}
+                accessibilityLabel={
+                  AccessibilityLabel.SMART_TIVI_TEMPLATE.UP_BUTTON
+                }
               >
                 <IconOutline size={14} name={'caret-up'} />
               </TouchableOpacity>
@@ -51,14 +53,18 @@ const CircleButton = memo(
               <TouchableOpacity
                 style={[styles.leftButton, styles.padding16]}
                 onPress={onPressLeft}
-                testID={TESTID.SMART_TIVI_TEMPLATE.LEFT_BUTTON}
+                accessibilityLabel={
+                  AccessibilityLabel.SMART_TIVI_TEMPLATE.LEFT_BUTTON
+                }
               >
                 <IconOutline size={14} name={'caret-left'} />
               </TouchableOpacity>
               <TouchableOpacity
                 style={[styles.okButton]}
                 onPress={onPressOk}
-                testID={TESTID.SMART_TIVI_TEMPLATE.OK_BUTTON}
+                accessibilityLabel={
+                  AccessibilityLabel.SMART_TIVI_TEMPLATE.OK_BUTTON
+                }
               >
                 <Text type="H4" color={Colors.Gray9} bold>
                   OK
@@ -67,7 +73,9 @@ const CircleButton = memo(
               <TouchableOpacity
                 style={[styles.rightButton, styles.padding16]}
                 onPress={onPressRight}
-                testID={TESTID.SMART_TIVI_TEMPLATE.RIGHT_BUTTON}
+                accessibilityLabel={
+                  AccessibilityLabel.SMART_TIVI_TEMPLATE.RIGHT_BUTTON
+                }
               >
                 <IconOutline size={14} name={'caret-right'} />
               </TouchableOpacity>
@@ -76,7 +84,9 @@ const CircleButton = memo(
               <TouchableOpacity
                 style={[styles.downButton, styles.padding16]}
                 onPress={onPressDown}
-                testID={TESTID.SMART_TIVI_TEMPLATE.DOWN_BUTTON}
+                accessibilityLabel={
+                  AccessibilityLabel.SMART_TIVI_TEMPLATE.DOWN_BUTTON
+                }
               >
                 <IconOutline size={14} name={'caret-down'} />
               </TouchableOpacity>

package/src/commons/ActionGroup/SmartTiviActionTemplate/component/ControlPlay.js

@@ -4,7 +4,7 @@ import { Colors } from '../../../../configs';
 
 import styles from './ControlPlayStyles';
 import { Pause } from './Icon';
-import { TESTID } from '../../../../configs/Constants';
+import { AccessibilityLabel } from '../../../../configs/Constants';
 
 import { IconOutline } from '@ant-design/icons-react-native';
 
@@ -15,7 +15,9 @@ const ControlPlay = memo(
         <TouchableOpacity
           style={[styles.controlButton, styles.controlPrev]}
           onPress={onPressPrev}
-          testID={TESTID.SMART_TIVI_TEMPLATE.PREV_BUTTON}
+          accessibilityLabel={
+            AccessibilityLabel.SMART_TIVI_TEMPLATE.PREV_BUTTON
+          }
         >
           <IconOutline
             size={32}
@@ -27,14 +29,18 @@ const ControlPlay = memo(
         <TouchableOpacity
           style={[styles.controlButton, styles.controlStop]}
           onPress={onPressStop}
-          testID={TESTID.SMART_TIVI_TEMPLATE.STOP_BUTTON}
+          accessibilityLabel={
+            AccessibilityLabel.SMART_TIVI_TEMPLATE.STOP_BUTTON
+          }
         >
           <Pause size={48} />
         </TouchableOpacity>
         <TouchableOpacity
           style={[styles.controlButton, styles.controlNext]}
           onPress={onPressNext}
-          testID={TESTID.SMART_TIVI_TEMPLATE.NEXT_BUTTON}
+          accessibilityLabel={
+            AccessibilityLabel.SMART_TIVI_TEMPLATE.NEXT_BUTTON
+          }
         >
           <IconOutline
             size={32}

package/src/commons/ActionGroup/SmartTiviActionTemplate/component/RectangleButton.js

@@ -3,7 +3,7 @@ import { TouchableOpacity, View } from 'react-native';
 
 import styles from './RectangleButtonStyles';
 import { KeyboardArrowUp, KeyboardArrowDown } from './Icon';
-import { TESTID } from '../../../../configs/Constants';
+import { AccessibilityLabel } from '../../../../configs/Constants';
 
 const RectangleButton = memo(
   ({ icon, onPressUp, onPressDown, wrapStyle, type, onPress }) => {
@@ -22,7 +22,9 @@ const RectangleButton = memo(
             <TouchableOpacity
               style={[styles.rectangleColumn]}
               onPress={onPressUp}
-              testID={TESTID.SMART_TIVI_TEMPLATE.CH_VOLUME_UP_BUTTON}
+              accessibilityLabel={
+                AccessibilityLabel.SMART_TIVI_TEMPLATE.CH_VOLUME_UP_BUTTON
+              }
             >
               <KeyboardArrowUp size={24} name={'up'} style={styles.padding8} />
             </TouchableOpacity>
@@ -30,7 +32,9 @@ const RectangleButton = memo(
             <TouchableOpacity
               style={[styles.rectangleColumn]}
               onPress={onPressDown}
-              testID={TESTID.SMART_TIVI_TEMPLATE.CH_VOLUME_DOWN_BUTTON}
+              accessibilityLabel={
+                AccessibilityLabel.SMART_TIVI_TEMPLATE.CH_VOLUME_DOWN_BUTTON
+              }
             >
               <KeyboardArrowDown
                 size={24}

package/src/commons/ActionGroup/StatesGridActionTemplate.js

@@ -8,7 +8,7 @@ import { useUnwatchLGDeviceConfigControl } from '../../hooks/IoT';
 import { watchMultiConfigs } from '../../iot/Monitor';
 import IconComponent from '../IconComponent';
 import styles from './StatesGridActionTemplateStyle';
-import { DEVICE_TYPE, TESTID } from '../../configs/Constants';
+import { DEVICE_TYPE, AccessibilityLabel } 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';
@@ -34,20 +34,34 @@ const GridItem = ({ item, index, length, doAction, sensor, title }) => {
     icon_outlined,
     action_data,
     config,
+    is_on_value,
+    allow_config_store_value,
   } = 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) => {
-      doAction(actionData, null);
+      let data = {};
+      if (allow_config_store_value && config) {
+        data = JSON.stringify({ config_id: config, config_value: is_on_value });
+      } else {
+        data = null;
+      }
+      doAction(actionData, data);
       if (sensor?.is_managed_by_backend) {
-        config &&
-          sensor.device_type === DEVICE_TYPE.LG_THINQ &&
+        if (config && sensor.device_type === DEVICE_TYPE.LG_THINQ) {
           watchMultiConfigs([config]);
+        }
       }
     },
-    [config, doAction, sensor?.is_managed_by_backend, sensor.device_type]
+    [
+      allow_config_store_value,
+      config,
+      doAction,
+      sensor?.is_managed_by_backend,
+      sensor.device_type,
+      is_on_value,
+    ]
   );
 
   useUnwatchLGDeviceConfigControl(sensor, [config]);
@@ -72,7 +86,7 @@ const GridItem = ({ item, index, length, doAction, sensor, title }) => {
   return (
     <View
       style={[styles.gridItem]}
-      testID={TESTID.STATES_GRID_ACTION_GRID_ITEM}
+      accessibilityLabel={AccessibilityLabel.STATES_GRID_ACTION_GRID_ITEM}
     >
       <TouchableOpacity
         style={[styles.button, buttonOnOffStyle]}

package/src/commons/ActionGroup/ThreeButtonTemplate.js

@@ -1,15 +1,12 @@
 import React, { memo, useCallback, useState } from 'react';
 import { TouchableOpacity, View, Switch } from 'react-native';
 import { Icon } from '@ant-design/react-native';
-import { useTranslations } from '../../hooks/Common/useTranslations';
 import styles from './ThreeButtonTemplateStyle';
 import Text from '../Text';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 import { Colors } from '../../configs';
-import { Card } from '../../commons/CardShadow';
 
-const ThreeButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
-  const t = useTranslations();
+const ThreeButtonTemplate = memo(({ actionGroup, doAction }) => {
   const { configuration } = actionGroup;
   const {
     text1,
@@ -20,7 +17,12 @@ const ThreeButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
     action3_data,
     action_off_data,
     action_on_data,
-  } = configuration;
+    icon1,
+    icon2,
+    icon3,
+    text_door_lock,
+    is_display_lock,
+  } = configuration || {};
   const [lock, setLock] = useState(false);
   const iconCustom = (icon) => {
     return icon === 'stop' ? (
@@ -58,9 +60,9 @@ const ThreeButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
           <Icon name={icon} size={15} color={color} style={styles.iconLock} />
           <Text
             style={styles.textLockDoor}
-            testID={TESTID.TEXT_DOOR_LOOK_ON_OFF}
+            accessibilityLabel={AccessibilityLabel.TEXT_DOOR_LOOK_ON_OFF}
           >
-            {configuration.text_door_lock}{' '}
+            {`${text_door_lock} `}
           </Text>
         </View>
         <Switch
@@ -75,60 +77,48 @@ const ThreeButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
   };
   return (
     <>
-      <Card title={actionGroup.title ? actionGroup.title : t('controller')}>
-        <View style={styles.wrap}>
-          <TouchableOpacity
-            testID={TESTID.BUTTON_TEMPLATE_1}
-            style={styles.buttonActionDoor}
-            onPress={onButton1Press}
-            underlayColor={Colors.Gray2}
-          >
-            <View style={styles.imageButton}>
-              <Icon
-                name={configuration.icon1}
-                size={30}
-                color={Colors.Primary}
-              />
-            </View>
-            <Text style={styles.text}>{text1}</Text>
-          </TouchableOpacity>
+      <View style={styles.wrap}>
+        <TouchableOpacity
+          accessibilityLabel={AccessibilityLabel.BUTTON_TEMPLATE_1}
+          style={styles.buttonActionDoor}
+          onPress={onButton1Press}
+          underlayColor={Colors.Gray2}
+        >
+          <View style={styles.imageButton}>
+            <Icon name={icon1} size={30} color={Colors.Primary} />
+          </View>
+          <Text style={styles.text}>{text1}</Text>
+        </TouchableOpacity>
 
-          <TouchableOpacity
-            testID={TESTID.BUTTON_TEMPLATE_2}
-            style={styles.buttonActionDoor}
-            onPress={onButton2Press}
-            underlayColor={Colors.Gray2}
-          >
-            <View style={styles.imageButton}>
-              {iconCustom(configuration.icon2)}
-            </View>
-            <Text style={styles.text}>{text2}</Text>
-          </TouchableOpacity>
+        <TouchableOpacity
+          accessibilityLabel={AccessibilityLabel.BUTTON_TEMPLATE_2}
+          style={styles.buttonActionDoor}
+          onPress={onButton2Press}
+          underlayColor={Colors.Gray2}
+        >
+          <View style={styles.imageButton}>{iconCustom(icon2)}</View>
+          <Text style={styles.text}>{text2}</Text>
+        </TouchableOpacity>
 
-          <TouchableOpacity
-            testID={TESTID.BUTTON_TEMPLATE_3}
-            style={styles.buttonActionDoor}
-            onPress={onButton3Press}
-            underlayColor={Colors.Gray2}
-          >
-            <View style={styles.imageButton}>
-              <Icon
-                name={configuration.icon3}
-                size={30}
-                color={Colors.Primary}
-              />
-            </View>
-            <Text style={styles.text}>{text3}</Text>
-          </TouchableOpacity>
-        </View>
-        <View style={styles.lockSwitch}>
-          {configuration.is_display_lock &&
-            itemLock(
-              lock ? 'lock' : 'unlock',
-              lock ? Colors.Primary : Colors.Gray6
-            )}
-        </View>
-      </Card>
+        <TouchableOpacity
+          accessibilityLabel={AccessibilityLabel.BUTTON_TEMPLATE_3}
+          style={styles.buttonActionDoor}
+          onPress={onButton3Press}
+          underlayColor={Colors.Gray2}
+        >
+          <View style={styles.imageButton}>
+            <Icon name={icon3} size={30} color={Colors.Primary} />
+          </View>
+          <Text style={styles.text}>{text3}</Text>
+        </TouchableOpacity>
+      </View>
+      <View style={styles.lockSwitch}>
+        {is_display_lock &&
+          itemLock(
+            lock ? 'lock' : 'unlock',
+            lock ? Colors.Primary : Colors.Gray6
+          )}
+      </View>
     </>
   );
 });