@eohjsc/react-native-smart-city 0.4.42 → 0.4.44

package/android/build.gradle

@@ -10,17 +10,17 @@
 //   original location:
 //   - https://github.com/facebook/react-native/blob/0.58-stable/local-cli/templates/HelloWorld/android/app/build.gradle
 
-def DEFAULT_COMPILE_SDK_VERSION = 28
-def DEFAULT_BUILD_TOOLS_VERSION = '28.0.3'
-def DEFAULT_MIN_SDK_VERSION = 16
-def DEFAULT_TARGET_SDK_VERSION = 28
+def DEFAULT_COMPILE_SDK_VERSION = 33
+def DEFAULT_BUILD_TOOLS_VERSION = '33.0.0'
+def DEFAULT_MIN_SDK_VERSION = 24
+def DEFAULT_TARGET_SDK_VERSION = 33
 
 def safeExtGet(prop, fallback) {
     rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
 }
 
 apply plugin: 'com.android.library'
-apply plugin: 'maven'
+apply plugin: 'maven-publish'
 
 buildscript {
     // The Android Gradle plugin is only required when opening the android folder stand-alone.
@@ -38,9 +38,6 @@ buildscript {
     }
 }
 
-apply plugin: 'com.android.library'
-apply plugin: 'maven'
-
 android {
     compileSdkVersion safeExtGet('compileSdkVersion', DEFAULT_COMPILE_SDK_VERSION)
     buildToolsVersion safeExtGet('buildToolsVersion', DEFAULT_BUILD_TOOLS_VERSION)
@@ -106,17 +103,17 @@ def configureReactNativePom(def pom) {
 afterEvaluate { project ->
     // some Gradle build hooks ref:
     // https://www.oreilly.com/library/view/gradle-beyond-the/9781449373801/ch03.html
-    task androidJavadoc(type: Javadoc) {
-        source = android.sourceSets.main.java.srcDirs
-        classpath += files(android.bootClasspath)
-        classpath += files(project.getConfigurations().getByName('compile').asList())
-        include '**/*.java'
-    }
-
-    task androidJavadocJar(type: Jar, dependsOn: androidJavadoc) {
-        classifier = 'javadoc'
-        from androidJavadoc.destinationDir
-    }
+    // task androidJavadoc(type: Javadoc) {
+    //     source = android.sourceSets.main.java.srcDirs
+    //     classpath += files(android.bootClasspath)
+    //     classpath += files(project.getConfigurations().getByName('compile').asList())
+    //     include '**/*.java'
+    // }
+
+    // task androidJavadocJar(type: Jar, dependsOn: androidJavadoc) {
+    //     classifier = 'javadoc'
+    //     from androidJavadoc.destinationDir
+    // }
 
     task androidSourcesJar(type: Jar) {
         classifier = 'sources'
@@ -135,15 +132,13 @@ afterEvaluate { project ->
 
     artifacts {
         archives androidSourcesJar
-        archives androidJavadocJar
+        // archives androidJavadocJar
     }
 
     task installArchives(type: Upload) {
         configuration = configurations.archives
-        repositories.mavenDeployer {
-            // Deploy to react-native-event-bridge/maven, ready to publish to npm
-            repository url: "file://${projectDir}/../android/maven"
-            configureReactNativePom pom
+        repositories.maven {
+            url = uri("file://${projectDir}/../android/maven")
         }
     }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.4.42",
+  "version": "0.4.44",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -65,7 +65,9 @@
   "peerDependencies": {
     "@react-native-community/clipboard": "*",
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-modal": "*",
+    "react-native-modal-datetime-picker": "*"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
@@ -101,7 +103,6 @@
     "@ant-design/icons-react-native": "^2.2.1",
     "@ant-design/react-native": "^4.0.5",
     "@babel/helper-environment-visitor": "^7.16.7",
-    "@eohjsc/highcharts": "^1.0.9",
     "@eohjsc/react-native-keyboard-aware-scroll-view": "^0.9.5",
     "@formatjs/intl-getcanonicallocales": "^1.4.5",
     "@formatjs/intl-numberformat": "^5.6.2",
@@ -111,15 +112,14 @@
     "@miblanchard/react-native-slider": "^2.2.0",
     "@react-native-clipboard/clipboard": "^1.11.1",
     "@react-native-community/async-storage": "^1.12.1",
-    "@react-native-community/cameraroll": "^4.0.0",
+    "@react-native-community/cameraroll": "4.1.2",
     "@react-native-community/checkbox": "^0.5.5",
-    "@react-native-community/datetimepicker": "https://github.com/hinh-eoh/datepicker",
+    "@react-native-community/datetimepicker": "^7.0.1",
     "@react-native-community/geolocation": "^2.0.2",
     "@react-native-community/masked-view": "^0.1.10",
     "@react-native-community/netinfo": "^9.3.4",
     "@react-native-community/segmented-control": "^2.1.1",
     "@react-native-community/slider": "^3.0.3",
-    "@react-native-community/toolbar-android": "^0.1.0-rc.2",
     "@react-native-picker/picker": "^1.16.7",
     "@react-navigation/bottom-tabs": "^5.8.0",
     "@react-navigation/drawer": "^5.9.0",
@@ -130,6 +130,7 @@
     "apisauce": "^2.1.5",
     "axios": "^0.19.2",
     "base-64": "^1.0.0",
+    "buffer": "^6.0.3",
     "deprecated-react-native-prop-types": "^2.3.0",
     "dotenv": "^8.2.0",
     "google-libphonenumber": "^3.2.10",
@@ -137,7 +138,8 @@
     "i18n-js": "^3.7.1",
     "i18next": "^20.1.0",
     "lodash": "^4.17.19",
-    "lottie-react-native": "4.0.3",
+    "lottie-ios": "3.4.1",
+    "lottie-react-native": "5.1.4",
     "moment": "^2.27.0",
     "moment-timezone": "^0.5.32",
     "numeral": "^2.0.6",
@@ -171,8 +173,9 @@
     "react-native-draggable-flatlist": "^2.6.2",
     "react-native-fast-image": "^8.3.2",
     "react-native-geocoder": "^0.5.0",
-    "react-native-gesture-handler": "^1.7.0",
+    "react-native-gesture-handler": "^2.10.0",
     "react-native-get-location": "^2.0.0",
+    "react-native-get-random-values": "^1.8.0",
     "react-native-image-crop-picker": "^0.37.2",
     "react-native-image-resizer": "^1.4.5",
     "react-native-input-credit-card": "^0.5.5",
@@ -181,8 +184,8 @@
     "react-native-localize": "^1.4.1",
     "react-native-maps": "0.27.1",
     "react-native-maps-directions": "^1.8.0",
-    "react-native-modal": "^11.5.6",
-    "react-native-modal-datetime-picker": "^8.9.3",
+    "react-native-modal": "^13.0.1",
+    "react-native-modal-datetime-picker": "15.0.0",
     "react-native-new-snap-carousel": "^3.9.3",
     "react-native-onesignal": "^4.3.1",
     "react-native-pager-view": "^5.4.1",
@@ -201,7 +204,7 @@
     "react-native-udp": "^4.1.3",
     "react-native-version-check": "^3.4.2",
     "react-native-vlc-media-player": "^1.0.41",
-    "react-native-webview": "11.17.2",
+    "react-native-webview": "^12.0.2",
     "react-native-wheel-color-picker": "^1.2.0",
     "react-native-wheel-scrollview-picker": "^1.2.2",
     "react-native-wifi-reborn": "^4.5.0",
@@ -209,8 +212,8 @@
     "string-format": "^2.0.0",
     "sync-directory": "^5.1.7",
     "timezone-mock": "^1.1.3",
+    "uuid": "^9.0.0",
     "uuid-by-string": "^3.0.2",
-    "uuidv4": "^6.2.13",
     "validator": "^13.1.1",
     "victory-native": "^35.0.1"
   },

package/src/commons/Action/ItemQuickAction.js

@@ -42,6 +42,7 @@ const ItemQuickAction = memo(
     const userId = useSCContextSelector((state) => state?.auth.account.user.id);
     const onActionPress = useCallback(async () => {
       if (processing) {
+        /* istanbul ignore next */
         return;
       }
       setProcessing(true);

package/src/commons/ActionGroup/ColorPickerTemplate.js

@@ -43,8 +43,8 @@ export const WheelColorPicker = ({ color, onChangeColorComplete, onStart }) => {
 };
 
 let hexColorTemp = '#fff';
-const ColorPickerTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
-  const { configuration = {} } = actionGroup;
+const ColorPickerTemplate = memo(({ item = {}, doAction, sensor }) => {
+  const { configuration = {} } = item;
   const { config = undefined } = configuration;
   const [configValues] = useConfigGlobalState('configValues');
 
@@ -76,8 +76,7 @@ const ColorPickerTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
         setIsChangeColor(false);
       }
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [configuration?.action_color_data, doAction, isChangeColor]
+    [configuration?.action_color_data, doAction, isChangeColor, setAction]
   );
 
   useEffect(() => {

package/src/commons/ActionGroup/NumberUpDownActionTemplate.js

@@ -11,12 +11,12 @@ import { watchMultiConfigs } from '../../iot/Monitor';
 import { DEVICE_TYPE, AccessibilityLabel } from '../../configs/Constants';
 
 const NumberUpDownActionTemplate = ({
-  actionGroup = {},
+  item = {},
   doAction,
   sensor = {},
   isWidgetOrder,
 }) => {
-  const { configuration = {}, title } = actionGroup;
+  const { configuration = {}, title } = item;
   const {
     action_data,
     max_value,
@@ -49,13 +49,10 @@ const NumberUpDownActionTemplate = ({
 
   const doActionAndWatchConfig = useCallback(
     async (actionData, actionValue) => {
-      let data = actionValue;
-      if (device_type !== DEVICE_TYPE.GOOGLE_HOME) {
-        data = { temperature: actionValue };
-        if (allow_config_store_value && config) {
-          data.config_id = config;
-          data.config_value = actionValue;
-        }
+      let data = { value: actionValue, temperature: actionValue };
+      if (allow_config_store_value && config) {
+        data.config_id = config;
+        data.config_value = actionValue;
       }
       await doAction(actionData, data);
       if (!is_managed_by_backend) {
@@ -122,7 +119,7 @@ const NumberUpDownActionTemplate = ({
           <IconOutline name="down" size={32} color={Colors.Primary} />
         </TouchableOpacity>
 
-        <Text accessibilityLabel={'abcd'} type="H2">
+        <Text accessibilityLabel={'text_format'} type="H2">
           {value !== undefined ? (
             text_format.replace('{number}', value)
           ) : (

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

@@ -10,9 +10,9 @@ import { useUnwatchLGDeviceConfigControl } from '../../../hooks/IoT';
 import { watchMultiConfigs } from '../../../iot/Monitor';
 import { DEVICE_TYPE, AccessibilityLabel } from '../../../configs/Constants';
 
-const OnOffSmartLock = memo(({ actionGroup = {}, doAction, sensor = {} }) => {
+const OnOffSmartLock = memo(({ item = {}, doAction, sensor = {} }) => {
   const t = useTranslations();
-  const { configuration = {} } = actionGroup;
+  const { configuration = {} } = item;
   const { action_on_data, action_off_data, config, is_on_value } =
     configuration;
   const { is_managed_by_backend, device_type } = sensor;

package/src/commons/ActionGroup/OnOffTemplate/OnOffButtonTemplate.js

@@ -8,8 +8,7 @@ import { AccessibilityLabel } from '../../../configs/Constants';
 import IconComponent from '../../IconComponent';
 
 const OnOffButtonTemplate = memo(
-  ({ isOn, triggerAction, actionGroup = {}, isLight = false }) => {
-    const { configuration = {}, id } = actionGroup;
+  ({ isOn, triggerAction, actionGroup = {}, isLight = false, item }) => {
     const {
       icon_on,
       icon_off,
@@ -17,7 +16,7 @@ const OnOffButtonTemplate = memo(
       icon_kit_off_data,
       text_on,
       text_off,
-    } = configuration;
+    } = actionGroup;
     const icon = useMemo(() => {
       if (isOn) {
         return icon_kit_on_data?.icon || icon_on;
@@ -31,7 +30,7 @@ const OnOffButtonTemplate = memo(
           <TouchableOpacity
             style={styles.bigCircle}
             onPress={triggerAction}
-            accessibilityLabel={`${AccessibilityLabel.ON_OFF_BUTTON}-${id}`}
+            accessibilityLabel={`${AccessibilityLabel.ON_OFF_BUTTON}-${item?.id}`}
           >
             <View style={styles.smallCircle}>
               <IconComponent
@@ -46,7 +45,7 @@ const OnOffButtonTemplate = memo(
                   styles.textBig,
                   { color: isOn ? Colors.Gray8 : Colors.Gray6 },
                 ]}
-                accessibilityLabel={`${AccessibilityLabel.SENSOR_STATUS}-${id}`}
+                accessibilityLabel={`${AccessibilityLabel.SENSOR_STATUS}-${item?.id}`}
               >
                 {isOn ? text_on : text_off}
               </Text>

package/src/commons/ActionGroup/OnOffTemplate/SwitchButtonTemplate.js

@@ -8,8 +8,8 @@ import AccessibilityLabel from '../../../configs/AccessibilityLabel';
 import { useConfigGlobalState } from '../../../iot/states';
 
 const SwitchButtonTemplate = memo(
-  ({ actionGroup = {}, isLight = false, doAction }) => {
-    const { configuration = {}, id } = actionGroup;
+  ({ item = {}, isLight = false, doAction }) => {
+    const { configuration = {}, id } = item;
     const {
       action_off_data,
       action_on_data,
@@ -58,9 +58,9 @@ const SwitchButtonTemplate = memo(
           </Text>
         </View>
 
-        {!!actionGroup.title && !isLight && (
+        {!!item.title && !isLight && (
           <Text type="H3" semibold center>
-            {actionGroup.title}
+            {item.title}
           </Text>
         )}
       </>

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

@@ -22,8 +22,8 @@ const getComponent = (template) => {
   }
 };
 
-const OnOffTemplate = memo(({ actionGroup = {}, doAction, sensor = {} }) => {
-  const { configuration = {} } = actionGroup;
+const OnOffTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
+  const { configuration = {} } = item;
   const {
     action_on_data,
     action_off_data,
@@ -119,16 +119,17 @@ const OnOffTemplate = memo(({ actionGroup = {}, doAction, sensor = {} }) => {
   }, [getIsOnValue, device_type]);
 
   const Component = useMemo(() => {
-    return getComponent(actionGroup.template);
-  }, [actionGroup]);
+    return getComponent(item.template);
+  }, [item.template]);
 
   return (
     <View style={styles.wrap}>
       <Component
         isOn={tempIsOn}
         triggerAction={triggerAction}
-        actionGroup={actionGroup}
+        actionGroup={configuration}
         disabled={!action_on_data && !action_off_data}
+        item={item}
       />
     </View>
   );

package/src/commons/ActionGroup/OneBigButtonTemplate.js

@@ -6,8 +6,8 @@ import { Colors } from '../../configs';
 import styles from './OneBigButtonTemplateStyle';
 import IconComponent from '../IconComponent';
 
-const OneBigButtonTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
-  const { configuration = {} } = actionGroup;
+const OneBigButtonTemplate = memo(({ item = {}, doAction, sensor }) => {
+  const { configuration = {} } = item;
   const { text, action_data, icon } = configuration;
 
   const onPressDoAction = useCallback(() => {
@@ -29,9 +29,9 @@ const OneBigButtonTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
           </View>
         </TouchableOpacity>
       </View>
-      {!!actionGroup.title && (
+      {!!item.title && (
         <Text type="H3" semibold center>
-          {actionGroup.title}
+          {item.title}
         </Text>
       )}
     </>

package/src/commons/ActionGroup/OptionsDropdownActionTemplate.js

@@ -12,9 +12,7 @@ import styles from './OptionsDropdownActionTemplateStyle';
 import { AccessibilityLabel, DEVICE_TYPE } from '../../configs/Constants';
 import IconComponent from '../../commons/IconComponent';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import SvgDoorState from '../../../assets/images/Device/door-state.svg';
-import SvgCurrentState from '../../../assets/images/Device/current-state.svg';
-import SvgWindStrength from '../../../assets/images/Device/wind-strength.svg';
+import { getIcon } from '../icon';
 
 function getOptionValue(option, allow_config_store_value) {
   if (option?.value_text && !allow_config_store_value) {
@@ -24,13 +22,13 @@ function getOptionValue(option, allow_config_store_value) {
 }
 
 const OptionsDropdownActionTemplate = ({
-  actionGroup = {},
+  item = {},
   doAction,
   sensor = {},
   isWidgetOrder,
 }) => {
   const t = useTranslations();
-  const { configuration = {}, title = '' } = actionGroup;
+  const { configuration = {}, title = '' } = item;
   const {
     action_data,
     options = [],
@@ -110,16 +108,7 @@ const OptionsDropdownActionTemplate = ({
   }, [config, selectedOption?.text, t]);
 
   const iconSvg = useMemo(() => {
-    switch (icon) {
-      case 'door-state-1':
-        return <SvgDoorState width={24} height={24} />;
-      case 'curent-state-1':
-        return <SvgCurrentState width={24} height={24} />;
-      case 'wind-strength-1':
-        return <SvgWindStrength width={24} height={24} />;
-      default:
-        return () => <></>;
-    }
+    return getIcon(icon);
   }, [icon]);
 
   return (
@@ -179,7 +168,7 @@ const OptionsDropdownActionTemplate = ({
                 {t('write_not_available')}
               </Text>
             )}
-            {options.map((item, index) => (
+            {options.map((option, index) => (
               <View key={index} style={styles.rowContainer}>
                 <RadioCircle active={selectedIndex === index} />
                 <TouchableOpacity
@@ -191,7 +180,7 @@ const OptionsDropdownActionTemplate = ({
                     setSelectedIndex(index);
                   }}
                 >
-                  <Text style={styles.text}>{item?.text}</Text>
+                  <Text style={styles.text}>{option?.text}</Text>
                 </TouchableOpacity>
               </View>
             ))}

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -18,9 +18,9 @@ import { DEVICE_TYPE } from '../../configs/Constants';
 import _TextInput from '../Form/TextInput';
 
 const SliderRangeTemplate = memo(
-  ({ actionGroup = {}, doAction, sensor, item, isWidgetOrder }) => {
+  ({ item = {}, doAction, sensor, isWidgetOrder }) => {
     const t = useTranslations();
-    const { configuration = {} } = actionGroup;
+    const { configuration = {} } = item;
     const [configValues] = useConfigGlobalState('configValues');
     const {
       config = undefined,
@@ -56,6 +56,7 @@ const SliderRangeTemplate = memo(
 
     const getTextInputValue = useMemo(() => {
       if ([null, undefined, NaN].includes(valueBrightness)) {
+        /* istanbul ignore next */
         return 0;
       }
 
@@ -70,6 +71,7 @@ const SliderRangeTemplate = memo(
       }
       setValueBrightness(value);
       if (timeout.current) {
+        /* istanbul ignore next */
         clearTimeout(timeout.current);
       }
       if (value !== '') {
@@ -90,7 +92,7 @@ const SliderRangeTemplate = memo(
         style={(isWidgetOrder && styles.wrapOrderItem) || styles.viewBrightness}
       >
         <Text type="H4" style={styles.LeftTextBrightness}>
-          {actionGroup?.title || item?.label || t('brightness')}
+          {item?.title || item?.label || t('brightness')}
         </Text>
 
         <View style={styles.wrap}>

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

@@ -25,7 +25,7 @@ import {
 import { notImplemented } from '../../../utils/Utils';
 
 const SmartTiviActionTemplate = memo(
-  ({ actionGroup, doAction, scrollEnabled = true }) => {
+  ({ item, doAction, scrollEnabled = true }) => {
     const t = useTranslations();
     const FakeDataChannel = [
       {
@@ -50,7 +50,7 @@ const SmartTiviActionTemplate = memo(
       },
     ];
     const onPressButton = useCallback(
-      (button, item) => () => {
+      (button) => () => {
         switch (button) {
           case SMART_TIVI_BUTTON.ONOFF_BUTTON:
           case SMART_TIVI_BUTTON.EXIT_BUTTON:
@@ -74,8 +74,8 @@ const SmartTiviActionTemplate = memo(
       },
       [t]
     );
-    const iconChannels = useCallback((item) => {
-      switch (item.icon) {
+    const iconChannels = useCallback((iconChannel) => {
+      switch (iconChannel.icon) {
         case 'disney':
           return <Disney style={styles.iconChannel} />;
         case 'youtube':
@@ -186,16 +186,16 @@ const SmartTiviActionTemplate = memo(
             </View>
             <View style={styles.channelTV}>
               {!!FakeDataChannel &&
-                FakeDataChannel.map((item, index) => {
+                FakeDataChannel.map((fakeChannel, index) => {
                   return (
                     <RectangleButton
                       key={index}
                       type="row"
                       onPress={onPressButton(
                         SMART_TIVI_BUTTON.CHANNEL_BUTTON,
-                        item
+                        fakeChannel
                       )}
-                      icon={iconChannels(item)}
+                      icon={iconChannels(fakeChannel)}
                       wrapStyle={styles.buttonChannel}
                       index={index}
                     />

package/src/commons/ActionGroup/StatesGridActionTemplate.js

@@ -9,10 +9,7 @@ import { watchMultiConfigs } from '../../iot/Monitor';
 import IconComponent from '../IconComponent';
 import styles from './StatesGridActionTemplateStyle';
 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';
-import SvgAirDry from '../../../assets/images/Device/air-dry.svg';
+import { getIcon } from '../icon';
 
 const buttonStyle = {
   OFF: {
@@ -67,18 +64,7 @@ const GridItem = ({ item, doAction, sensor }) => {
   const iconKit = !!icon_kit_data && icon_kit_data.icon;
 
   const iconSvg = useMemo(() => {
-    switch (icon) {
-      case 'clean-1':
-        return <SvgClean width={24} height={24} />;
-      case 'circulator-1':
-        return <SvgCirculator width={24} height={24} />;
-      case 'auto-1':
-        return <SvgAuo width={24} height={24} />;
-      case 'air-dry-1':
-        return <SvgAirDry width={24} height={24} />;
-      default:
-        return null;
-    }
+    return getIcon(icon);
   }, [icon]);
 
   return (
@@ -108,12 +94,12 @@ const GridItem = ({ item, doAction, sensor }) => {
 };
 
 const StatesGridActionTemplate = ({
-  actionGroup = {},
+  item = {},
   doAction,
   sensor = {},
   isWidgetOrder,
 }) => {
-  const { configuration = {}, title } = actionGroup;
+  const { configuration = {}, title } = item;
 
   // eslint-disable-next-line no-unused-vars
   const [configValues, setConfigValues] = useConfigGlobalState('configValues');
@@ -143,10 +129,10 @@ const StatesGridActionTemplate = ({
           options?.length < 4 && styles.justifyContentAround,
         ]}
       >
-        {options.map((item, index) => (
+        {options.map((option, index) => (
           <GridItem
             key={index}
-            item={item}
+            item={option}
             index={index}
             doAction={doAction}
             sensor={sensor}

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

@@ -7,14 +7,14 @@ import { mockSCStore } from '../../../../context/mockStore';
 import ThreeButtonDefault from '../components/ThreeButtonDefault';
 import ThreeButtonCircle from '../components/ThreeButtonCircle';
 
-const wrapComponent = (actionGroup) => (
+const wrapComponent = (item) => (
   <SCProvider initState={mockSCStore({})}>
-    <ThreeButtonTemplate actionGroup={actionGroup} doAction={jest.fn()} />
+    <ThreeButtonTemplate item={item} doAction={jest.fn()} />
   </SCProvider>
 );
 
 describe('Test ThreeButtonTemplate', () => {
-  let actionGroup = {
+  let displayItem = {
     configuration: {
       action1: '2b949045-8e03-4c07-a855-7794ade2e69c',
       action1_data: {
@@ -64,7 +64,7 @@ describe('Test ThreeButtonTemplate', () => {
 
   it('render ThreeButtonDefault', async () => {
     await act(async () => {
-      wrapper = renderer.create(wrapComponent(actionGroup));
+      wrapper = renderer.create(wrapComponent(displayItem));
     });
     const instance = wrapper.root;
     const ThreeButtonDefaults = instance.findAllByType(ThreeButtonDefault);
@@ -72,8 +72,8 @@ describe('Test ThreeButtonTemplate', () => {
   });
   it('render ThreeButtonCircle', async () => {
     const actionGroupCT = {
-      ...actionGroup,
-      configuration: { ...actionGroup?.configuration, layout: 'circle' },
+      ...displayItem,
+      configuration: { ...displayItem?.configuration, layout: 'circle' },
     };
     await act(async () => {
       wrapper = renderer.create(wrapComponent(actionGroupCT));

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

@@ -8,8 +8,8 @@ import IconComponent from '../../IconComponent';
 import ThreeButtonCircle from './components/ThreeButtonCircle';
 import ThreeButtonDefault from './components/ThreeButtonDefault';
 
-const ThreeButtonTemplate = memo(({ actionGroup, doAction, isWidgetOrder }) => {
-  const { configuration } = actionGroup;
+const ThreeButtonTemplate = memo(({ item, doAction, isWidgetOrder }) => {
+  const { configuration } = item;
   const {
     text1,
     action1_data,