@eohjsc/react-native-smart-city 0.7.3 → 0.7.4

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

@@ -6,7 +6,7 @@ import styles from './ControlPlayStyles';
 import { Pause } from './Icon';
 import { AccessibilityLabel } from '../../../../configs/Constants';
 
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 const ControlPlay = memo(
   ({ onPressPrev, onPressStop, onPressNext, wrapStyle }) => {
@@ -19,9 +19,9 @@ const ControlPlay = memo(
             AccessibilityLabel.SMART_TIVI_TEMPLATE.PREV_BUTTON
           }
         >
-          <AntDesign
+          <IconOutline
             size={32}
-            name={'stepbackward'}
+            name={'backward'}
             color={Colors.Gray9}
             style={[styles.button]}
           />
@@ -42,9 +42,9 @@ const ControlPlay = memo(
             AccessibilityLabel.SMART_TIVI_TEMPLATE.NEXT_BUTTON
           }
         >
-          <AntDesign
+          <IconOutline
             size={32}
-            name={'stepforward'}
+            name={'forward'}
             color={Colors.Gray9}
             style={[styles.button]}
           />

package/src/commons/ActionGroup/TerminalBoxTemplate.js

@@ -6,7 +6,7 @@ import React, {
   useState,
 } from 'react';
 import { View, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import Text from '../../commons/Text';
 import { useConfigGlobalState } from '../../iot/states';
 import styles from './TerminalBoxTemplateStyle';
@@ -174,7 +174,7 @@ const TerminalBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
           accessibilityLabel={AccessibilityLabel.TERMINAL_BOX_BUTTON_SEND}
           disabled={!value}
         >
-          <AntDesign name="send" size={25} />
+          <IconOutline name="send" size={25} />
         </TouchableOpacity>
       </View>
     </View>

package/src/commons/ActionGroup/TextBoxTemplate.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { View, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import Text from '../../commons/Text';
 import { AlertAction } from '../../commons';
 import { useDropdownAction } from './hooks/useDropdownAction';
@@ -48,7 +48,7 @@ const TextBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
           onPress={onShowAlert}
           accessibilityLabel={AccessibilityLabel.TEXT_BOX_BUTTON_EDIT}
         >
-          <AntDesign name="edit" size={25} />
+          <IconOutline name="edit" size={25} />
         </TouchableOpacity>
       </View>
       <AlertAction

package/src/commons/ActionGroup/ThreeButtonTemplate/__test__/ThreeButtonCircle.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import renderer, { act } from 'react-test-renderer';
 import { TouchableOpacity } from 'react-native';
+import renderer, { act } from 'react-test-renderer';
 
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
@@ -47,6 +47,6 @@ describe('Test ThreeButtonCircle', () => {
     await act(async () => {
       touchableOpacities[0].props.onPress();
     });
-    expect(mockOnButton1Press).toBeCalled();
+    expect(mockOnButton1Press).toHaveBeenCalled();
   });
 });

package/src/commons/ActionGroup/ThreeButtonTemplate/__test__/ThreeButtonDefault.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import renderer, { act } from 'react-test-renderer';
 import { TouchableOpacity } from 'react-native';
+import renderer, { act } from 'react-test-renderer';
 
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
@@ -47,6 +47,6 @@ describe('Test ThreeButtonDefault', () => {
     await act(async () => {
       touchableOpacities[0].props.onPress();
     });
-    expect(mockOnButton1Press).toBeCalled();
+    expect(mockOnButton1Press).toHaveBeenCalled();
   });
 });

package/src/commons/ActionGroup/TimerActionTemplate.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { Switch, TouchableOpacity, View } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import moment from 'moment';
 import { watchMultiConfigs } from '../../iot/Monitor';
@@ -183,7 +183,10 @@ const TimerActionTemplate = ({ item = {}, doAction, sensor = {} }) => {
           <Text>{title}</Text>
           {configuration.config_hour && configuration.config_minute && (
             <View style={styles.wrapTimer}>
-              <AntDesign style={styles.iconClockCircle} name={'clock-circle'} />
+              <IconOutline
+                style={styles.iconClockCircle}
+                name={'clock-circle'}
+              />
               <Text type="Label" color={Colors.Gray7}>
                 {textTimer ? textTimer : t('set_time')}
               </Text>
@@ -193,7 +196,7 @@ const TimerActionTemplate = ({ item = {}, doAction, sensor = {} }) => {
         {configuration.config_hour && !configuration.config_minute && (
           <View style={styles.timerButton}>
             <Text style={styles.textTimerEndLine}>{textTimer}</Text>
-            <AntDesign name="right" size={20} />
+            <IconOutline name="right" size={20} />
           </View>
         )}
       </TouchableOpacity>

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

@@ -1,4 +1,4 @@
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import React, { memo, useState, useCallback, useEffect } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 
@@ -122,7 +122,7 @@ const TwoButtonTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
             key={index}
           >
             <View style={styles.smallCircle}>
-              <AntDesign
+              <IconOutline
                 name={button?.isCheckOnOff ? button?.icon_on : button?.icon_off}
                 size={44}
                 color={button?.isCheckOnOff ? Colors.Green7 : Colors.Gray6}

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

@@ -1,13 +1,12 @@
-import { watchMultiConfigs } from '../../../iot/Monitor';
 import React, { useContext } from 'react';
+import ColorPicker from 'react-native-wheel-color-picker';
 import { act, create } from 'react-test-renderer';
-import ColorPickerTemplate from '../ColorPickerTemplate';
-import { WheelColorPicker } from '../ColorPickerTemplate';
+import { DEVICE_TYPE } from '../../../configs/Constants';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
+import { watchMultiConfigs } from '../../../iot/Monitor';
 import { useConfigGlobalState } from '../../../iot/states';
-import ColorPicker from 'react-native-wheel-color-picker';
-import { DEVICE_TYPE } from '../../../configs/Constants';
+import ColorPickerTemplate, { WheelColorPicker } from '../ColorPickerTemplate';
 
 const mockSetAction = jest.fn();
 
@@ -106,7 +105,7 @@ describe('Test ColorPickerTemplate', () => {
     await act(async () => {
       await wheelpicker.props.onStart();
     });
-    expect(mockSetAction).toBeCalled();
+    expect(mockSetAction).toHaveBeenCalled();
   });
 
   it('test WheelColorPicker onChangeColorComplete', async () => {
@@ -123,13 +122,13 @@ describe('Test ColorPickerTemplate', () => {
     await act(async () => {
       await wheelpicker.props.onStart();
     });
-    expect(mockSetAction).toBeCalledTimes(1);
-    expect(mockDoAction).toBeCalledTimes(0);
+    expect(mockSetAction).toHaveBeenCalledTimes(1);
+    expect(mockDoAction).toHaveBeenCalledTimes(0);
 
     await act(async () => {
       await wheelpicker.props.onChangeColorComplete('#ffffff');
     });
-    expect(mockSetAction).toBeCalledTimes(2);
-    expect(mockDoAction).toBeCalledTimes(1);
+    expect(mockSetAction).toHaveBeenCalledTimes(2);
+    expect(mockDoAction).toHaveBeenCalledTimes(1);
   });
 });

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

@@ -1,11 +1,11 @@
-import { AccessibilityLabel } from '../../../configs/Constants';
-import { watchMultiConfigs } from '../../../iot/Monitor';
 import React from 'react';
 import { act, create } from 'react-test-renderer';
-import OnOffSmartLock from '../OnOffSmartLock/OnOffSmartLock';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
+import { watchMultiConfigs } from '../../../iot/Monitor';
 import { useConfigGlobalState } from '../../../iot/states';
+import OnOffSmartLock from '../OnOffSmartLock/OnOffSmartLock';
 
 jest.mock('../../../iot/Monitor');
 const mockDoAction = jest.fn();
@@ -76,7 +76,7 @@ describe('Test OnOffTemplate', () => {
     await act(async () => {
       await button.props.onPress();
     });
-    expect(mockDoAction).toBeCalledWith(actionOnData, '{"door_lock":0}');
+    expect(mockDoAction).toHaveBeenCalledWith(actionOnData, '{"door_lock":0}');
   });
 
   it('render with template OnOffSmartLockActionTemplate doAction unlock', async () => {
@@ -96,6 +96,6 @@ describe('Test OnOffTemplate', () => {
     await act(async () => {
       await button.props.onPress();
     });
-    expect(mockDoAction).toBeCalledWith(actionOffData, '{"door_lock":1}');
+    expect(mockDoAction).toHaveBeenCalledWith(actionOffData, '{"door_lock":1}');
   });
 });

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

@@ -2,12 +2,12 @@ import React from 'react';
 import { act, create } from 'react-test-renderer';
 
 import { DEVICE_TYPE } from '../../../configs/Constants';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 import { watchMultiConfigs } from '../../../iot/Monitor';
 import OnOffTemplate from '../OnOffTemplate';
 import OnOffButtonTemplate from '../OnOffTemplate/OnOffButtonTemplate';
 import OnOffSimpleTemplate from '../OnOffTemplate/OnOffSimpleTemplate';
-import { mockSCStore } from '../../../context/mockStore';
-import { SCProvider } from '../../../context';
 
 const wrapComponent = (item, mockDoAction, sensor) => (
   <SCProvider initState={mockSCStore({})}>
@@ -118,7 +118,7 @@ describe('Test OnOffTemplate', () => {
     const instance = tree.root;
     const template = instance.findAllByType(OnOffSimpleTemplate);
     expect(template).toHaveLength(1);
-    expect(watchMultiConfigs).toBeCalledTimes(0);
+    expect(watchMultiConfigs).toHaveBeenCalledTimes(0);
   });
 
   it('template OnOffSimpleActionTemplate doAction with is_on_value, match configValue', async () => {
@@ -135,7 +135,7 @@ describe('Test OnOffTemplate', () => {
       await template.props.triggerAction();
     });
     expect(mockDoAction).toHaveBeenCalledWith(actionOffData, undefined, false);
-    expect(watchMultiConfigs).toBeCalledTimes(0);
+    expect(watchMultiConfigs).toHaveBeenCalledTimes(0);
   });
 
   it('template OnOffSimpleActionTemplate doAction with is_on_value, not match configValue', async () => {
@@ -167,7 +167,7 @@ describe('Test OnOffTemplate', () => {
       await template.props.triggerAction();
     });
     expect(mockDoAction).toHaveBeenCalledWith(actionOffData, undefined, false);
-    expect(watchMultiConfigs).toBeCalledTimes(0);
+    expect(watchMultiConfigs).toHaveBeenCalledTimes(0);
   });
 
   it('render with template OnOffSimpleActionTemplate with just action_data', async () => {

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

@@ -1,17 +1,17 @@
-import OptionsDropdownActionTemplate from '../../../commons/ActionGroup/OptionsDropdownActionTemplate';
 import React from 'react';
 import { TouchableOpacity } from 'react-native';
 import { act, create } from 'react-test-renderer';
-import Text from '../../../commons/Text';
-import { watchMultiConfigs } from '../../../iot/Monitor';
 import { AlertAction, RadioCircle } from '../../../commons';
-import { DEVICE_TYPE, AccessibilityLabel } from '../../../configs/Constants';
-import { getTranslate } from '../../../utils/I18n';
+import OptionsDropdownActionTemplate from '../../../commons/ActionGroup/OptionsDropdownActionTemplate';
+import Text from '../../../commons/Text';
+import { AccessibilityLabel, DEVICE_TYPE } from '../../../configs/Constants';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
+import { watchMultiConfigs } from '../../../iot/Monitor';
+import { getTranslate } from '../../../utils/I18n';
 
-import SvgDoorState from '../../../../assets/images/Device/door-state.svg';
 import SvgCurrentState from '../../../../assets/images/Device/current-state.svg';
+import SvgDoorState from '../../../../assets/images/Device/door-state.svg';
 import SvgWindStrength from '../../../../assets/images/Device/wind-strength.svg';
 
 const wrapComponent = (item, mockDoAction, sensor) => (
@@ -190,8 +190,8 @@ describe('Test OptionsDropdownActionTemplate', () => {
       value: 1,
     });
     is_managed_by_backend
-      ? expect(watchMultiConfigs).not.toBeCalled()
-      : expect(watchMultiConfigs).not.toBeCalled();
+      ? expect(watchMultiConfigs).not.toHaveBeenCalled()
+      : expect(watchMultiConfigs).not.toHaveBeenCalled();
 
     expect(texts[1].props.children).toEqual('Level2'); // TODO: should be Level1, configValues make change again
   };

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import { TouchableOpacity } from 'react-native';
 import { act, create } from 'react-test-renderer';
+import { DEVICE_TYPE } from '../../../configs/Constants';
 import Text from '../../Text';
 import StatesGridActionTemplate from '../StatesGridActionTemplate';
-import { DEVICE_TYPE } from '../../../configs/Constants';
 
 const mockDoAction = jest.fn();
 const mockActionData = jest.fn();
@@ -74,7 +74,7 @@ describe('Test StatesGridActionTemplate', () => {
     await act(async () => {
       await touchableOpacities[0].props.onPress();
     });
-    expect(mockDoAction).toBeCalledWith(mockActionData, null);
+    expect(mockDoAction).toHaveBeenCalledWith(mockActionData, null);
   });
 
   it('test trigger special action', async () => {
@@ -96,7 +96,7 @@ describe('Test StatesGridActionTemplate', () => {
     await act(async () => {
       await touchableOpacities[0].props.onPress();
     });
-    expect(mockDoAction).toBeCalledWith(
+    expect(mockDoAction).toHaveBeenCalledWith(
       mockActionData,
       JSON.stringify({ config_id: 1, config_value: undefined })
     );

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

@@ -1,15 +1,15 @@
 import React from 'react';
 import { Switch, TouchableOpacity } from 'react-native';
-import { act, create } from 'react-test-renderer';
-import TimerActionTemplate from '../TimerActionTemplate';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import ScrollPicker from 'react-native-wheel-scrollview-picker';
+import { act, create } from 'react-test-renderer';
+import TimerActionTemplate from '../TimerActionTemplate';
 
 import moment from 'moment';
-import Text from '../../Text';
-import { watchMultiConfigs } from '../../../iot/Monitor';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
+import { watchMultiConfigs } from '../../../iot/Monitor';
+import Text from '../../Text';
 
 jest.mock('../../../iot/Monitor');
 
@@ -81,7 +81,7 @@ describe('Test TimerActionTemplate success with config value', () => {
     await act(async () => {
       await switchButton.props.onValueChange();
     });
-    expect(mockDoAction).toBeCalled();
+    expect(mockDoAction).toHaveBeenCalled();
 
     const touchableOpacities = instance.findAllByType(TouchableOpacity);
     await act(async () => {
@@ -128,6 +128,6 @@ describe('Test TimerActionTemplate success with config value', () => {
     await act(async () => {
       await touchableOpacities[2].props.onPress(3);
     });
-    expect(mockDoAction).toBeCalled();
+    expect(mockDoAction).toHaveBeenCalled();
   });
 });

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

@@ -123,7 +123,7 @@ describe('Test TwoButtonTemplate', () => {
     expect(touchableOpacities.length).toEqual(2);
     await touchableOpacities[0].props.onPress();
     await touchableOpacities[1].props.onPress();
-    expect(mockDoAction).toBeCalled();
+    expect(mockDoAction).toHaveBeenCalled();
   });
 
   it('render TouchableOpacity TwoButtonTemplate without is_on_value', async () => {

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

@@ -1,21 +1,21 @@
 import React from 'react';
 import {
-  TouchableOpacity,
-  Switch,
   ActivityIndicator,
   ScrollView,
+  Switch,
+  TouchableOpacity,
 } from 'react-native';
-import renderer, { act } from 'react-test-renderer';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
+import renderer, { act } from 'react-test-renderer';
 
+import { Slider } from '@miblanchard/react-native-slider';
 import ActionGroup from '..';
-import Text from '../../Text';
 import { AccessibilityLabel, BUTTON_TYPE } from '../../../configs/Constants';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
-import { Slider } from '@miblanchard/react-native-slider';
-import { WheelColorPicker } from '../ColorPickerTemplate';
 import RadioCircle from '../../RadioCircle';
+import Text from '../../Text';
+import { WheelColorPicker } from '../ColorPickerTemplate';
 import SwitchButtonTemplate from '../OnOffTemplate/SwitchButtonTemplate';
 
 const wrapComponent = (item, mockDoAction, sensor) => (

package/src/commons/ActionGroup/index.js

@@ -1,4 +1,4 @@
-import React, { memo, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import Text from '../Text';
 import OneBigButtonTemplate from './OneBigButtonTemplate';
 import ThreeButtonTemplate from './ThreeButtonTemplate';
@@ -74,4 +74,4 @@ const ActionGroup = (params = {}) => {
   );
 };
 
-export default memo(ActionGroup);
+export default ActionGroup;

package/src/commons/ActionTemplate/__test__/index.test.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
 
+import Modal from 'react-native-modal';
 import ActionTemplate from '..';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import SelectActionCard from '../../SelectActionCard';
-import Modal from 'react-native-modal';
-import ThreeButtonAction from '../ThreeButtonAction';
-import AccessibilityLabel from '../../../configs/AccessibilityLabel';
 import Text from '../../Text';
+import ThreeButtonAction from '../ThreeButtonAction';
 import { showAllCards } from './utils';
 
 const mockOnSelectAction = jest.fn();
@@ -81,7 +81,7 @@ describe('Test ActionTemplate', () => {
         template: 'three_button_action_template',
       });
     });
-    expect(mockOnSelectAction).toBeCalledWith({
+    expect(mockOnSelectAction).toHaveBeenCalledWith({
       action: '94ae262d-46e3-42ff-9d10-516831ecc830',
       action_name: 'OPEN',
       data: null,

package/src/commons/Automate/ItemAutomate.js

@@ -1,72 +1,40 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import Text from '../Text';
 import { Colors } from '../../configs';
 import styles from './ItemAutomateStyles';
 import { AUTOMATES } from '../../configs/Constants';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import { generateAutomationConditionText } from '../../screens/Automate/ScriptDetail/utils';
-import { useGetEvaluateValue } from '../../screens/Device/hooks/useEvaluateValue';
 
 const ItemAutomate = ({
   automate,
   isSelected = false,
-  disabledOnPress = false,
   index,
   setSelectedIndex,
-  onPress,
-  enableScript = true,
 }) => {
   const t = useTranslations();
-  const item = AUTOMATES[automate?.type];
-  const isItemOneTap = AUTOMATES[automate?.type] === AUTOMATES.one_tap;
-  const Icon = item?.icon;
-  const valueEvaluations = useGetEvaluateValue(automate?.config, automate.unit);
-
-  const textCondition = useMemo(() => {
-    return generateAutomationConditionText(automate, valueEvaluations, t);
-  }, [automate, t, valueEvaluations]);
-
-  const renderText = useMemo(() => {
-    if (textCondition) {
-      return textCondition;
-    } else if (isSelected && isItemOneTap) {
-      return t('quick_button_create_at_dashboard');
-    } else {
-      return t(item?.explanation);
-    }
-  }, [isItemOneTap, isSelected, item?.explanation, t, textCondition]);
+  const { type } = automate;
+  const item = AUTOMATES[type];
+  /* istanbul ignore next */
+  const { icon: Icon, title, explanation } = item || {};
 
   const handleSelectIndex = useCallback(() => {
-    if (onPress) {
-      onPress();
-      return;
-    }
-    if (!setSelectedIndex) {
-      return;
-    }
-
     setSelectedIndex(index);
-  }, [index, setSelectedIndex, onPress]);
+  }, [index, setSelectedIndex]);
 
   return (
     <TouchableOpacity
       onPress={handleSelectIndex}
-      disabled={disabledOnPress}
       style={[styles.wrap, isSelected && styles.active]}
     >
       <View style={styles.row}>
         <View style={styles.wrapIcon}>{!!Icon && <Icon />}</View>
         <View style={styles.wrapTitle}>
-          <Text
-            type="H4"
-            bold
-            color={enableScript ? Colors.Black : Colors.Gray7}
-          >
-            {t(item?.title)}
+          <Text type="H4" bold color={Colors.Black}>
+            {t(title)}
           </Text>
           <Text type="Label" color={Colors.Gray8} numberOfLines={1}>
-            {renderText}
+            {t(explanation)}
           </Text>
         </View>
       </View>

package/src/commons/Automate/ItemConditionScriptDetail.js

@@ -0,0 +1,109 @@
+import React, { useCallback, useMemo, useRef } from 'react';
+import { View, TouchableOpacity, Platform } from 'react-native';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import Text from '../Text';
+import { Colors } from '../../configs';
+import styles from './ItemConditionScriptDetailStyles';
+import { AccessibilityLabel, AUTOMATES } from '../../configs/Constants';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { generateAutomationConditionText } from '../../screens/Automate/ScriptDetail/utils';
+import { useGetEvaluateValue } from '../../screens/Device/hooks/useEvaluateValue';
+import MenuActionMore from '../MenuActionMore';
+import { usePopover } from '../../hooks/Common';
+import Routes from '../../utils/Route';
+import { useNavigation } from '@react-navigation/native';
+import { PopoverMode } from 'react-native-popover-view';
+
+const ItemConditionScriptDetail = ({
+  automate,
+  onPress,
+  enableScript = true,
+}) => {
+  const t = useTranslations();
+  const refMenuAction = useRef();
+  const { navigate } = useNavigation();
+  const { type, config, unit, value_change } = automate;
+  const { end_device_id, unit_id } = value_change || {};
+  /* istanbul ignore next */
+  const item = AUTOMATES[type] || {};
+  const { icon: Icon, title } = item;
+  const valueEvaluations = useGetEvaluateValue(config, unit);
+  const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
+    usePopover();
+
+  const textCondition = useMemo(
+    () => generateAutomationConditionText(automate, valueEvaluations, t),
+    [automate, valueEvaluations, t]
+  );
+
+  const renderText = useMemo(() => {
+    if (textCondition) {
+      return textCondition;
+    }
+    return t('quick_button_create_at_dashboard');
+  }, [textCondition, t]);
+
+  const handleShowMenuAction = useCallback(() => {
+    showPopoverWithRef(refMenuAction);
+  }, [showPopoverWithRef]);
+
+  const listMenuItem = useMemo(() => {
+    const items = [{ text: t('edit_condition'), doAction: onPress }];
+    if (value_change) {
+      items.unshift({
+        text: t('device_display'),
+        doAction: () =>
+          navigate(Routes.DeviceDetail, {
+            unitId: unit_id,
+            sensorId: end_device_id,
+          }),
+      });
+    }
+    return items;
+  }, [value_change, t, onPress, navigate, unit_id, end_device_id]);
+
+  return (
+    <View style={styles.wrap}>
+      <View style={styles.col}>
+        <View style={styles.wrapIcon}>{Icon && <Icon />}</View>
+        <View style={styles.wrapTitle}>
+          <Text
+            type="H4"
+            bold
+            color={enableScript ? Colors.Black : Colors.Gray7}
+          >
+            {t(title)}
+          </Text>
+          <Text type="Label" color={Colors.Gray8} numberOfLines={1}>
+            {renderText}
+          </Text>
+        </View>
+      </View>
+      <View>
+        <TouchableOpacity
+          onPress={handleShowMenuAction}
+          ref={refMenuAction}
+          accessibilityLabel={AccessibilityLabel.ICON_MENU_POPUP}
+        >
+          <MaterialIcons name="more-vert" size={27} color={Colors.Black} />
+        </TouchableOpacity>
+      </View>
+      <MenuActionMore
+        isVisible={showingPopover}
+        hideMore={hidePopover}
+        listMenuItem={listMenuItem}
+        childRef={childRef}
+        onItemClick={(object) => object.doAction()}
+        isTextCenter={false}
+        wrapStyle={styles.wrapStyle}
+        mode={
+          /* istanbul ignore next */
+          Platform.OS === 'ios' ? PopoverMode.JS_MODAL : PopoverMode.RN_MODAL
+        }
+        accessibilityLabel={AccessibilityLabel.MENU_ACTION_LIST_TOUCHABLE}
+      />
+    </View>
+  );
+};
+
+export default ItemConditionScriptDetail;