@eohjsc/react-native-smart-city 0.3.72 → 0.3.74

package/package.json

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

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { TouchableOpacity } from 'react-native';
+
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import ThreeButtonCircle from '../components/ThreeButtonCircle';
+
+const mockOnButton1Press = jest.fn();
+const mockOnButton2Press = jest.fn();
+const mockOnButton3Press = jest.fn();
+
+const wrapComponent = (props) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ThreeButtonCircle {...props} />
+  </SCProvider>
+);
+
+describe('Test ThreeButtonCircle', () => {
+  let props = {
+    icon1: 'icon1',
+    text1: 'text1',
+    icon2: 'icon2',
+    text2: 'text2',
+    icon3: 'icon3',
+    text3: 'text3',
+    onButton1Press: mockOnButton1Press,
+    onButton2Press: mockOnButton2Press,
+    onButton3Press: mockOnButton3Press,
+  };
+  let wrapper;
+
+  it('render ThreeButtonCircle', async () => {
+    await act(async () => {
+      wrapper = renderer.create(wrapComponent(props));
+    });
+    const instance = wrapper.root;
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    expect(touchableOpacities).toHaveLength(3);
+  });
+  it('render ThreeButtonCircle onPressButton', async () => {
+    await act(async () => {
+      wrapper = renderer.create(wrapComponent(props));
+    });
+    const instance = wrapper.root;
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    await act(async () => {
+      touchableOpacities[0].props.onPress();
+    });
+    expect(mockOnButton1Press).toBeCalled();
+  });
+});

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { TouchableOpacity } from 'react-native';
+
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import ThreeButtonDefault from '../components/ThreeButtonDefault';
+
+const mockOnButton1Press = jest.fn();
+const mockOnButton2Press = jest.fn();
+const mockOnButton3Press = jest.fn();
+
+const wrapComponent = (props) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ThreeButtonDefault {...props} />
+  </SCProvider>
+);
+
+describe('Test ThreeButtonDefault', () => {
+  let props = {
+    icon1: 'icon1',
+    text1: 'text1',
+    icon2: 'icon2',
+    text2: 'text2',
+    icon3: 'icon3',
+    text3: 'text3',
+    onButton1Press: mockOnButton1Press,
+    onButton2Press: mockOnButton2Press,
+    onButton3Press: mockOnButton3Press,
+  };
+  let wrapper;
+
+  it('render ThreeButtonDefault', async () => {
+    await act(async () => {
+      wrapper = renderer.create(wrapComponent(props));
+    });
+    const instance = wrapper.root;
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    expect(touchableOpacities).toHaveLength(3);
+  });
+  it('render ThreeButtonDefault onPressButton', async () => {
+    await act(async () => {
+      wrapper = renderer.create(wrapComponent(props));
+    });
+    const instance = wrapper.root;
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    await act(async () => {
+      touchableOpacities[0].props.onPress();
+    });
+    expect(mockOnButton1Press).toBeCalled();
+  });
+});

package/src/commons/ActionGroup/{__test__ → ThreeButtonTemplate/__test__}/ThreeButtonTemplate.test.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
-import { TouchableOpacity } from 'react-native';
 
-import ThreeButtonTemplate from '../ThreeButtonTemplate';
-import { SCProvider } from '../../../context';
-import { mockSCStore } from '../../../context/mockStore';
+import ThreeButtonTemplate from '..';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import ThreeButtonDefault from '../components/ThreeButtonDefault';
+import ThreeButtonCircle from '../components/ThreeButtonCircle';
 
 const wrapComponent = (actionGroup) => (
   <SCProvider initState={mockSCStore({})}>
@@ -13,7 +14,7 @@ const wrapComponent = (actionGroup) => (
 );
 
 describe('Test ThreeButtonTemplate', () => {
-  const actionGroup = {
+  let actionGroup = {
     configuration: {
       action1: '2b949045-8e03-4c07-a855-7794ade2e69c',
       action1_data: {
@@ -61,12 +62,24 @@ describe('Test ThreeButtonTemplate', () => {
 
   let wrapper;
 
-  it('render ThreeButtonTemplate', async () => {
+  it('render ThreeButtonDefault', async () => {
     await act(async () => {
       wrapper = renderer.create(wrapComponent(actionGroup));
     });
     const instance = wrapper.root;
-    const touchableOpacities = instance.findAllByType(TouchableOpacity);
-    expect(touchableOpacities.length).toEqual(3);
+    const ThreeButtonDefaults = instance.findAllByType(ThreeButtonDefault);
+    expect(ThreeButtonDefaults).toHaveLength(1);
+  });
+  it('render ThreeButtonCircle', async () => {
+    const actionGroupCT = {
+      ...actionGroup,
+      configuration: { ...actionGroup?.configuration, layout: 'circle' },
+    };
+    await act(async () => {
+      wrapper = renderer.create(wrapComponent(actionGroupCT));
+    });
+    const instance = wrapper.root;
+    const ThreeButtonCircles = instance.findAllByType(ThreeButtonCircle);
+    expect(ThreeButtonCircles).toHaveLength(1);
   });
 });

package/src/commons/ActionGroup/ThreeButtonTemplate/components/ThreeButtonCircle.js

@@ -0,0 +1,103 @@
+import React, { memo, useMemo } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import styles from './ThreeButtonCircleStyles';
+import Text from '../../../Text';
+import { AccessibilityLabel } from '../../../../configs/Constants';
+import IconComponent from '../../../IconComponent';
+import buttonCircleSmall from '../../../../Images/ThreeButton/buttonCircleSmall.png';
+import buttonCircleBig from '../../../../Images/ThreeButton/buttonCircleBig.png';
+import FImage from '../../../FImage';
+
+const ThreeButtonCircle = memo(
+  ({
+    icon1,
+    text1,
+    icon2,
+    text2,
+    icon3,
+    text3,
+    onButton1Press,
+    onButton2Press,
+    onButton3Press,
+  }) => {
+    const listButton = useMemo(() => {
+      return [
+        {
+          id: 1,
+          button: {
+            accessibilityLabel: AccessibilityLabel.BUTTON_CIRCLE_TEMPLATE_1,
+            onPress: onButton1Press,
+          },
+          fimage: {
+            source: buttonCircleSmall,
+            style: styles.iconSmall,
+            text: text1,
+            icon: icon1,
+          },
+        },
+        {
+          id: 2,
+          button: {
+            accessibilityLabel: AccessibilityLabel.BUTTON_CIRCLE_TEMPLATE_2,
+            onPress: onButton2Press,
+          },
+          fimage: {
+            source: buttonCircleBig,
+            style: styles.iconBig,
+            text: text2,
+            icon: icon2,
+          },
+        },
+        {
+          id: 3,
+          button: {
+            accessibilityLabel: AccessibilityLabel.BUTTON_CIRCLE_TEMPLATE_3,
+            onPress: onButton3Press,
+          },
+          fimage: {
+            source: buttonCircleSmall,
+            style: styles.iconSmall,
+            text: text3,
+            icon: icon3,
+          },
+        },
+      ];
+    }, [
+      icon1,
+      icon2,
+      icon3,
+      onButton1Press,
+      onButton2Press,
+      onButton3Press,
+      text1,
+      text2,
+      text3,
+    ]);
+
+    return (
+      <View style={styles.threeButtonCircle}>
+        {listButton.map((item, index) => {
+          return (
+            <TouchableOpacity
+              accessibilityLabel={item?.button?.accessibilityLabel}
+              onPress={item?.button?.onPress}
+              key={item?.id || index}
+            >
+              <View style={styles.buttonAction}>
+                <FImage
+                  source={item?.fimage.source}
+                  style={[styles.center, item?.fimage?.style]}
+                >
+                  <IconComponent icon={item?.fimage?.icon} />
+                  <Text style={styles.text}>{item?.fimage?.text}</Text>
+                </FImage>
+              </View>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    );
+  }
+);
+
+export default ThreeButtonCircle;

package/src/commons/ActionGroup/ThreeButtonTemplate/components/ThreeButtonCircleStyles.js

@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  threeButtonCircle: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+  },
+  iconSmall: {
+    height: 102,
+    width: 102,
+    marginBottom: 12,
+  },
+  iconBig: {
+    height: 170,
+    width: 170,
+    paddingBottom: 10,
+  },
+  center: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonAction: {
+    flex: 1,
+    aspectRatio: 1,
+    marginHorizontal: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+    resizeMode: 'contain',
+  },
+});

package/src/commons/ActionGroup/ThreeButtonTemplate/components/ThreeButtonDefault.js

@@ -0,0 +1,96 @@
+import React, { memo, useMemo } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import styles from './ThreeButtonDefaultStyles';
+import Text from '../../../Text';
+import { AccessibilityLabel } from '../../../../configs/Constants';
+import IconComponent from '../../../IconComponent';
+
+const ThreeButtonDefault = memo(
+  ({
+    icon1,
+    text1,
+    icon2,
+    text2,
+    icon3,
+    text3,
+    onButton1Press,
+    onButton2Press,
+    onButton3Press,
+  }) => {
+    const Icon2CT = () => {
+      return icon2 === 'stop' ? (
+        <View style={styles.squareStop} />
+      ) : (
+        <IconComponent icon={icon2} iconSize={30} />
+      );
+    };
+
+    const listButton = useMemo(() => {
+      return [
+        {
+          id: 1,
+          button: {
+            accessibilityLabel: AccessibilityLabel.BUTTON_TEMPLATE_1,
+            onPress: onButton1Press,
+          },
+          icon: icon1,
+          text: text1,
+        },
+        {
+          id: 2,
+          button: {
+            accessibilityLabel: AccessibilityLabel.BUTTON_TEMPLATE_2,
+            onPress: onButton2Press,
+          },
+          icon: icon2,
+          text: text2,
+        },
+        {
+          id: 3,
+          button: {
+            accessibilityLabel: AccessibilityLabel.BUTTON_TEMPLATE_3,
+            onPress: onButton3Press,
+          },
+          icon: icon3,
+          text: text3,
+        },
+      ];
+    }, [
+      icon1,
+      icon2,
+      icon3,
+      onButton1Press,
+      onButton2Press,
+      onButton3Press,
+      text1,
+      text2,
+      text3,
+    ]);
+
+    return (
+      <View style={styles.threeButtonDefault}>
+        {listButton.map((item, index) => {
+          return (
+            <TouchableOpacity
+              accessibilityLabel={item?.button?.accessibilityLabel}
+              style={styles.buttonAction}
+              onPress={item?.button?.onPress}
+              key={item?.id || index}
+            >
+              <View style={styles.imageButton}>
+                {item?.id === 2 ? (
+                  <Icon2CT />
+                ) : (
+                  <IconComponent icon={item?.icon} iconSize={30} />
+                )}
+              </View>
+              <Text style={styles.text}>{item?.text}</Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    );
+  }
+);
+
+export default ThreeButtonDefault;

package/src/commons/ActionGroup/{ThreeButtonTemplateStyle.js → ThreeButtonTemplate/components/ThreeButtonDefaultStyles.js}

@@ -1,12 +1,8 @@
 import { StyleSheet } from 'react-native';
-import { Colors } from '../../configs';
+import { Colors } from '../../../../configs';
 
 export default StyleSheet.create({
-  wrap: {
-    flex: 1,
-    marginBottom: 16,
-  },
-  threeButton: {
+  threeButtonDefault: {
     flexDirection: 'row',
     justifyContent: 'space-around',
     padding: 16,
@@ -15,15 +11,7 @@ export default StyleSheet.create({
     borderColor: Colors.Gray4,
     borderRadius: 10,
   },
-  imageButton: {
-    height: 32,
-    marginBottom: 7,
-  },
-  text: {
-    fontSize: 14,
-    lineHeight: 22,
-  },
-  buttonActionDoor: {
+  buttonAction: {
     flex: 1,
     aspectRatio: 1,
     marginHorizontal: 4,
@@ -34,6 +22,14 @@ export default StyleSheet.create({
     borderColor: Colors.Gray3,
     borderRadius: 10,
   },
+  imageButton: {
+    height: 32,
+    marginBottom: 7,
+  },
+  text: {
+    fontSize: 14,
+    lineHeight: 22,
+  },
   squareStop: {
     marginHorizontal: 8,
     marginVertical: 8,
@@ -44,23 +40,4 @@ export default StyleSheet.create({
     backgroundColor: Colors.Primary,
     borderRadius: 1,
   },
-  lockSwitch: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: 7,
-  },
-  iconLock: {
-    paddingBottom: 7,
-  },
-  textLockDoor: {
-    paddingLeft: 12,
-    height: 24,
-    fontSize: 16,
-    lineHeight: 24,
-  },
-  lockDoor: {
-    flexDirection: 'row',
-    alignItems: 'flex-end',
-    paddingLeft: 5,
-  },
 });

package/src/commons/ActionGroup/{ThreeButtonTemplate.js → ThreeButtonTemplate/index.js}

@@ -1,10 +1,12 @@
-import React, { memo, useCallback, useState } from 'react';
-import { TouchableOpacity, View, Switch } from 'react-native';
-import styles from './ThreeButtonTemplateStyle';
-import Text from '../Text';
-import { AccessibilityLabel } from '../../configs/Constants';
-import { Colors } from '../../configs';
-import IconComponent from '../IconComponent';
+import React, { memo, useCallback, useState, useMemo } from 'react';
+import { View, Switch } from 'react-native';
+import styles from './styles';
+import Text from '../../Text';
+import { AccessibilityLabel } from '../../../configs/Constants';
+import { Colors } from '../../../configs';
+import IconComponent from '../../IconComponent';
+import ThreeButtonCircle from './components/ThreeButtonCircle';
+import ThreeButtonDefault from './components/ThreeButtonDefault';
 
 const ThreeButtonTemplate = memo(({ actionGroup, doAction }) => {
   const { configuration } = actionGroup;
@@ -25,15 +27,11 @@ const ThreeButtonTemplate = memo(({ actionGroup, doAction }) => {
     icon_kit3_data,
     text_door_lock,
     is_display_lock,
+    layout,
   } = configuration || {};
+
   const [lock, setLock] = useState(false);
-  const iconCustom = (icon) => {
-    return icon === 'stop' ? (
-      <View style={styles.squareStop} />
-    ) : (
-      <IconComponent icon={icon} iconSize={30} />
-    );
-  };
+
   const onButton1Press = useCallback(() => {
     doAction(action1_data, null);
   }, [action1_data, doAction]);
@@ -84,45 +82,44 @@ const ThreeButtonTemplate = memo(({ actionGroup, doAction }) => {
     );
   };
 
+  const renderLayoutThreeButton = useMemo(() => {
+    const props = {
+      icon1: icon_kit1_data?.icon || icon1,
+      icon2: icon_kit2_data?.icon || icon2,
+      icon3: icon_kit3_data?.icon || icon3,
+      text1: text1,
+      text2: text2,
+      text3: text3,
+      onButton1Press: onButton1Press,
+      onButton2Press: onButton2Press,
+      onButton3Press: onButton3Press,
+    };
+    switch (layout) {
+      case 'circle': {
+        return <ThreeButtonCircle {...props} />;
+      }
+      default:
+        return <ThreeButtonDefault {...props} />;
+    }
+  }, [
+    icon1,
+    icon2,
+    icon3,
+    icon_kit1_data?.icon,
+    icon_kit2_data?.icon,
+    icon_kit3_data?.icon,
+    layout,
+    onButton1Press,
+    onButton2Press,
+    onButton3Press,
+    text1,
+    text2,
+    text3,
+  ]);
+
   return (
     <View style={styles.wrap}>
-      <View style={styles.threeButton}>
-        <TouchableOpacity
-          accessibilityLabel={AccessibilityLabel.BUTTON_TEMPLATE_1}
-          style={styles.buttonActionDoor}
-          onPress={onButton1Press}
-          underlayColor={Colors.Gray2}
-        >
-          <View style={styles.imageButton}>
-            <IconComponent icon={icon_kit1_data?.icon || icon1} iconSize={30} />
-          </View>
-          <Text style={styles.text}>{text1}</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          accessibilityLabel={AccessibilityLabel.BUTTON_TEMPLATE_2}
-          style={styles.buttonActionDoor}
-          onPress={onButton2Press}
-          underlayColor={Colors.Gray2}
-        >
-          <View style={styles.imageButton}>
-            {iconCustom(icon_kit2_data?.icon || icon2)}
-          </View>
-          <Text style={styles.text}>{text2}</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          accessibilityLabel={AccessibilityLabel.BUTTON_TEMPLATE_3}
-          style={styles.buttonActionDoor}
-          onPress={onButton3Press}
-          underlayColor={Colors.Gray2}
-        >
-          <View style={styles.imageButton}>
-            <IconComponent icon={icon_kit3_data?.icon || icon3} iconSize={30} />
-          </View>
-          <Text style={styles.text}>{text3}</Text>
-        </TouchableOpacity>
-      </View>
+      {renderLayoutThreeButton}
       <View style={styles.lockSwitch}>
         {is_display_lock &&
           itemLock(

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

@@ -0,0 +1,27 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    marginBottom: 16,
+  },
+  lockSwitch: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 7,
+  },
+  iconLock: {
+    paddingBottom: 7,
+  },
+  textLockDoor: {
+    paddingLeft: 12,
+    height: 24,
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  lockDoor: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    paddingLeft: 5,
+  },
+});

package/src/commons/Device/HorizontalBarChart.js

@@ -1,7 +1,7 @@
 import React, { memo, useEffect, useMemo, useState } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { isEmpty } from 'lodash';
-const HighchartsReactNative = () => null;
+import HighchartsReactNative from '@eohjsc/highcharts';
 
 import { Colors } from '../../configs';
 import { getMaxValueIndex } from '../../utils/chartHelper/getMaxValueIndex';

package/src/configs/SCConfig.js

@@ -99,6 +99,7 @@ const SCDefaultConfig = {
   pusherAppCluster: 'ap1',
   intervalWatchConfigTime: 30000,
   setCurrentSensorDisplay: () => {},
+  appName: 'E-Ra',
 };
 
 export class SCConfig {
@@ -115,6 +116,7 @@ export class SCConfig {
   static language = 'en';
   static intervalWatchConfigTime = SCDefaultConfig.intervalWatchConfigTime;
   static setCurrentSensorDisplay = SCDefaultConfig.setCurrentSensorDisplay;
+  static appName = SCDefaultConfig.appName;
 }
 
 export const initSCConfig = (config) => {
@@ -140,4 +142,5 @@ export const initSCConfig = (config) => {
     config.intervalWatchConfigTime ?? SCDefaultConfig.intervalWatchConfigTime;
   SCConfig.setCurrentSensorDisplay =
     config.setCurrentSensorDisplay ?? SCDefaultConfig.setCurrentSensorDisplay;
+  SCConfig.appName = config.appName ?? SCDefaultConfig.appName;
 };

package/src/hooks/IoT/useBluetoothConnection.js

@@ -6,6 +6,7 @@ import { scanBluetoothDevices } from '../../iot/RemoteControl/Bluetooth';
 import Permissions from 'react-native-permissions';
 import { OpenSetting } from '../../utils/Permission/common';
 import { useTranslations } from '../Common/useTranslations';
+import { SCConfig } from '../../configs';
 
 const permissions = [
   'android.permission.BLUETOOTH_CONNECT',
@@ -77,7 +78,7 @@ const useBluetoothConnection = (fnCallback) => {
     if (blocked) {
       OpenSetting(
         t('bluetooth_rationale_title'),
-        t('bluetooth_rationale_message')
+        t('bluetooth_rationale_message', { appName: SCConfig.appName })
       );
     }
     const granted = Object.values(results).every((result) =>

package/src/screens/AddLocationMaps/index.js

@@ -150,7 +150,7 @@ const AddLocationMaps = memo(() => {
           permissionResult === RESULTS.BLOCKED &&
             OpenSetting(
               t('location_rationale_title'),
-              t('location_require_message')
+              t('location_require_message', { appName: SCConfig.appName })
             );
         } else if (error.code === GEOLOCATION_ERROR.POSITION_UNAVAILABLE) {
           const locationEnabaled = await openPromptEnableLocation();

package/src/screens/AddNewGateway/ConnectingWifiGuide.js

@@ -18,6 +18,7 @@ import AccessibilityLabel from '../../configs/AccessibilityLabel';
 import LoadingCircle from '../../Images/Common/loading-circle.json';
 import FullLoading from '../../commons/FullLoading';
 import { useWifiManage } from './hooks/useWifiManage';
+import { SCConfig } from '../../configs';
 
 let intervalSend = null;
 let socket;
@@ -196,7 +197,9 @@ const ConnectingWifiGuide = ({ route }) => {
           <>
             <View style={styles.guideContent}>
               <InteractSmartphoneIcon width={94} height={94} />
-              <Text style={styles.txtContent}>{t('connect_wifi_asking')}</Text>
+              <Text style={styles.txtContent}>
+                {t('connect_wifi_asking', { appName: SCConfig.appName })}
+              </Text>
             </View>
             <BottomButtonView
               style={styles.bottomButtonView}

package/src/screens/AllGateway/DetailConfigActionModbus/index.js

@@ -4,11 +4,13 @@ import { useRoute, useNavigation } from '@react-navigation/native';
 
 import DetailConfigAction from '../components/DetailConfigAction';
 import DetailActionModbus from '../components/DetailActionModbus';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { calculateLength, calculateStartAddress } from '../utils';
 import Routes from '../../../utils/Route';
 import styles from './styles';
 
 const DetailConfigActionModbus = () => {
+  const t = useTranslations();
   const { params = {} } = useRoute();
   const { navigate } = useNavigation();
   const {
@@ -46,7 +48,7 @@ const DetailConfigActionModbus = () => {
       },
       {
         id: 2,
-        title: 'Sa',
+        title: t('data_address'),
         data: sa,
       },
       {
@@ -55,7 +57,7 @@ const DetailConfigActionModbus = () => {
         data: len,
       },
     ],
-    [itemActionConfig?.func, len, sa]
+    [itemActionConfig?.func, len, sa, t]
   );
 
   const listConfigWrite = useMemo(
@@ -67,7 +69,7 @@ const DetailConfigActionModbus = () => {
       },
       {
         id: 2,
-        title: 'Sa',
+        title: t('data_address'),
         data: sa,
       },
       {
@@ -81,7 +83,7 @@ const DetailConfigActionModbus = () => {
         data: itemActionConfig?.ex || '--',
       },
     ],
-    [itemActionConfig?.ex, itemActionConfig?.func, len, sa]
+    [itemActionConfig?.ex, itemActionConfig?.func, len, sa, t]
   );
 
   const listAction = useMemo(

package/src/screens/AllGateway/GatewayConnectionMethods/__test__/index.test.js

@@ -7,6 +7,7 @@ import { mockSCStore } from '../../../../context/mockStore';
 import GatewayConnectionMethods from '..';
 import { HeaderCustom } from '../../../../commons';
 import { AccessibilityLabel } from '../../../../configs/Constants';
+import { getTranslate } from '../../../../utils/I18n';
 
 const wrapComponent = () => (
   <SCProvider initState={mockSCStore({})}>
@@ -31,7 +32,9 @@ describe('Test GatewayConnectionMethods', () => {
 
     expect(headerCustom).toHaveLength(1);
     expect(text.props.children).toEqual(
-      'Visit EoH Web to set up other connection options.'
+      getTranslate('en', 'visit_eoh_web_to_set_up_other_connection', {
+        appName: 'E-Ra',
+      })
     );
     expect(flatList).toHaveLength(1);
   });

package/src/screens/AllGateway/GatewayConnectionMethods/index.js

@@ -1,7 +1,7 @@
 import React, { useCallback, memo, useMemo } from 'react';
 import { View, FlatList } from 'react-native';
 
-import { Colors } from '../../../configs';
+import { Colors, SCConfig } from '../../../configs';
 import t from '../../../hooks/Common/useTranslations';
 import { Text, HeaderCustom } from '../../../commons';
 import styles from './styles';
@@ -56,7 +56,9 @@ const GatewayConnectionMethods = () => {
             AccessibilityLabel.GATEWAY_CONNECTION_METHODS_TEXT
           }
         >
-          {t('visit_eoh_web_to_set_up_other_connection')}
+          {t('visit_eoh_web_to_set_up_other_connection', {
+            appName: SCConfig.appName,
+          })}
         </Text>
         <FlatList
           contentContainerStyle={styles.contentContainerStyle}

package/src/screens/AllGateway/GatewayInfo/__test__/index.test.js

@@ -14,6 +14,7 @@ import api from '../../../../utils/Apis/axios';
 import GatewayInfo from '..';
 import t from '../../../../hooks/Common/useTranslations';
 import ModalPopupCT from '../../../../commons/ModalPopupCT';
+import { SCConfig } from '../../../../configs';
 
 const mockPop = jest.fn();
 const mock = new MockAdapter(api.axiosInstance);
@@ -93,7 +94,7 @@ describe('Test GatewayInfo', () => {
     const btnDelete = buttonDelete(instance);
     expect(headerCustom).toHaveLength(1);
     expect(alert.props.children[1].props.children.props.children).toEqual(
-      t('go_to_eoh_web_to_see_firmware')
+      t('go_to_eoh_web_to_see_firmware', { appName: SCConfig.appName })
     );
     expect(flatList).toHaveLength(1);
     const textConnect = btnConnect.findAllByType(Text);

package/src/screens/AllGateway/components/Information/__test__/index.test.js

@@ -7,6 +7,7 @@ import { mockSCStore } from '../../../../../context/mockStore';
 import { HeaderCustom } from '../../../../../commons';
 import Information from '../../../components/Information';
 import { AccessibilityLabel } from '../../../../../configs/Constants';
+import { getTranslate } from '../../../../../utils/I18n';
 
 const mockHandleDeleteGateway = jest.fn();
 const mockHandleConnectionMethods = jest.fn();
@@ -51,7 +52,7 @@ describe('Test Information', () => {
     expect(headerCustom).toHaveLength(1);
     expect(flatList).toHaveLength(1);
     expect(viewAlert.props.children[1].props.children.props.children).toEqual(
-      'Go to EoH web to see firmware configuration'
+      getTranslate('en', 'go_to_eoh_web_to_see_firmware', { appName: 'E-Ra' })
     );
     const buttonConnect = instance.findByProps({
       accessibilityLabel:

package/src/screens/AllGateway/components/Information/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback, memo } from 'react';
 import { TouchableOpacity, View, Image, FlatList } from 'react-native';
-import { Colors } from '../../../../configs';
+import { Colors, SCConfig } from '../../../../configs';
 import t from '../../../../hooks/Common/useTranslations';
 import { Text, HeaderCustom } from '../../../../commons';
 import Images from '../../../../configs/Images';
@@ -51,7 +51,9 @@ const Information = ({
               <Image source={Images.inforCode} />
               <View style={styles.flex1}>
                 <Text type="H4" style={styles.marginLeft16}>
-                  {t('go_to_eoh_web_to_see_firmware')}
+                  {t('go_to_eoh_web_to_see_firmware', {
+                    appName: SCConfig.appName,
+                  })}
                 </Text>
               </View>
             </View>

package/src/screens/GuestInfo/index.js

@@ -12,7 +12,7 @@ import Text from '../../commons/Text';
 import { useBoolean } from '../../hooks/Common';
 import { axiosGet, axiosPut } from '../../utils/Apis/axios';
 
-import { API, Colors } from '../../configs';
+import { API, Colors, SCConfig } from '../../configs';
 import {
   ACCESS_SCHEDULE_PROPERTIES,
   typeMaps,
@@ -123,7 +123,7 @@ const GuestInfo = ({ route }) => {
             )}
             {guest?.id && (
               <RowGuestInfo
-                textLeft={t('eoh_account_id')}
+                textLeft={t('eoh_account_id', { appName: SCConfig.appName })}
                 textRight={guest.id}
               />
             )}

package/src/screens/Sharing/InfoMemberUnit.js

@@ -4,7 +4,7 @@ import { useTranslations } from '../../hooks/Common/useTranslations';
 import { CircleView } from '../../commons/CircleView';
 import Text from '../../commons/Text';
 import { shortEmailName } from '../../utils/Utils';
-import { Colors, Images, API } from '../../configs';
+import { Colors, Images, API, SCConfig } from '../../configs';
 import { HeaderCustom } from '../../commons/Header';
 import RowMemberInfo from '../GuestInfo/components/RowGuestInfo';
 import { useIsOwnerOfUnit } from '../../hooks/Common';
@@ -203,7 +203,7 @@ const InfoMemberUnit = memo(({ route }) => {
             )}
             {memberInfo?.id && (
               <RowMemberInfo
-                textLeft={t('eoh_account_id')}
+                textLeft={t('eoh_account_id', { appName: SCConfig.appName })}
                 textRight={memberInfo?.phone_number || memberInfo.id}
               />
             )}

package/src/screens/Unit/SelectAddress.js

@@ -148,7 +148,7 @@ const SelectAddress = memo(({ route }) => {
           permissionResult === RESULTS.BLOCKED &&
             OpenSetting(
               t('location_rationale_title'),
-              t('location_require_message')
+              t('location_require_message', { appName: SCConfig.appName })
             );
         } else if (error.code === GEOLOCATION_ERROR.POSITION_UNAVAILABLE) {
           const locationEnabaled = await openPromptEnableLocation();

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

@@ -253,13 +253,13 @@
   "popular_locations": "Popular locations",
   "text_search_location_placeholder": "Search public areas, shops, restaurants,...",
   "location_rationale_title": "Location Permission Required",
-  "location_rationale_message": "EoH only uses your location to display weather and air quality.",
+  "location_rationale_message": "{appName} only uses your location to display weather and air quality.",
   "camera_rationale_title": "Camera Permission Required",
-  "camera_rationale_message": "EoH only uses your camera to take photo",
+  "camera_rationale_message": "{appName} only uses your camera to take photo",
   "photo_rationale_title": "Photo Permission Required",
-  "photo_rationale_message": "EoH only uses your photo to upload",
+  "photo_rationale_message": "{appName} only uses your photo to upload",
   "bluetooth_rationale_title": "Bluetooth Permission Required",
-  "bluetooth_rationale_message": "EoH only uses Bluetooth to scan and control devices",
+  "bluetooth_rationale_message": "{appName} only uses Bluetooth to scan and control devices",
   "recommendations": "Recommendations",
   "Open windows for more fresh air": "Open windows for more fresh air",
   "notify_new_version_title": "Update available",
@@ -624,7 +624,7 @@
   "your_location_info": "Your location information:",
   "text_send_now": "SEND NOW",
   "text_no_charge_outside_parking_hour": "There is no charge outside these parking hour",
-  "notify_update_app": "A new EoH update is now available. Please update to new version to continue using the app.",
+  "notify_update_app": "A new {appName} update is now available. Please update to new version to continue using the app.",
   "update_now": "Update now",
   "removed_successfully": "Removed successfully!",
   "spot_name": "Spot name",
@@ -736,7 +736,7 @@
   "guests": "Guests",
   "no_guest": "No guest",
   "guest_info": "Guest Information",
-  "eoh_account_id": "EoH account ID",
+  "eoh_account_id": "{appName} account ID",
   "access_schedule": "Access Schedule",
   "always": "Always",
   "recurring": "Recurring",
@@ -903,7 +903,7 @@
   "gateway_warning_content_3": "In the next steps, you will be instructed to connect to wifi for the device. ",
   "gateway_warning_content_4": "To give you a good experience, you need to know the name and password of the wifi network and make sure the device is placed in a good location.",
   "warning_beta_test_feature": "This feature is in beta test, not official yet",
-  "connecting_gateway_warning_1": "By continuing, EoH needs to connect to the device's wifi.",
+  "connecting_gateway_warning_1": "By continuing, {appName} needs to connect to the device's wifi.",
   "connecting_gateway_warning_2": "A message will appear asking you to connect.",
   "remove_account": "Remove Account",
   "brightness": "Brightness",
@@ -974,7 +974,7 @@
   "This {name} was removed!" : "This {name} was removed!",
   "camera_request_permission": "Camera request permission",
   "camera_request_permission_des": "To use camera, please unlock camera permission",
-  "location_require_message": "EoH needs your location permission to get current location.",
+  "location_require_message": "{appName} needs your location permission to get current location.",
   "turn_on_location_service": "Turn on location service for your phone",
   "turn_on_location_service_des": "To continue, let your device turn on location by turning on location service in Settings",
   "detected": "Detected",
@@ -1021,7 +1021,7 @@
   "device_connect_directly_to_the_gateway": "Device connected directly to the gateway",
   "zigbee": "Zigbee",
   "device_connect_remotely_to_the_gateway": "Device connected remotely to the gateway",
-  "connect_wifi_asking": "By continuing, EoH needs to connect to the device's Wifi. A message will appear asking you to connect.",
+  "connect_wifi_asking": "By continuing, {appName} needs to connect to the device's Wifi. A message will appear asking you to connect.",
   "previous": "Previous",
   "invalid_qr_code": "Invalid QR Code",
   "invalid_qr_code_warning": "This device can't be added using a QR code",
@@ -1052,7 +1052,7 @@
   "need_add_gateway_before_add_device": "You need to add a new Gateway before adding the device.",
   "fail_to_discover_device_wifi": "Fail to discover device wifi",
   "try_to_turn_on_device_or_try_again": "Try to turn on device or Try again",
-  "go_to_eoh_web_to_see_firmware": "Go to EoH web to see firmware configuration",
+  "go_to_eoh_web_to_see_firmware": "Go to {appName} web to see firmware configuration",
   "general_information":"General information",
   "connection_methods": "Connection methods",
   "delete_gateway":"Delete gateway",
@@ -1062,7 +1062,7 @@
   "activate_date":"Activate date",
   "warranty_expiration_date":"Warranty expiration date",
   "firmware_version":"Firmware version",
-  "visit_eoh_web_to_set_up_other_connection": "Visit EoH Web to set up other connection options.",
+  "visit_eoh_web_to_set_up_other_connection": "Visit {appName} Web to set up other connection options.",
   "delete_successfully":"Delete successfully!",
   "reboot_successfully": "Reboot successfully!",
   "message_delete_gateway": "This will fully remove Gateway with Info, Devices, Data Stream from the gateway.",
@@ -1114,5 +1114,6 @@
   "default_value": "Default value",
   "config_type": "Config type",
   "pin": "PIN",
-  "pin_mode": "PIN mode"
+  "pin_mode": "PIN mode",
+  "data_address": "Data address"
 }

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

@@ -288,13 +288,13 @@
   "popular_locations": "Địa điểm phổ biến",
   "text_search_location_placeholder": "Tìm kiếm địa điểm công cộng, cửa hàng, nhà hàng,...",
   "location_rationale_title": "Yêu cầu cho phép truy cập vị trí",
-  "location_rationale_message": "EoH chỉ sử dụng vị trí của bạn để hiển thị thông tin thời tiết và chất lượng không khí.",
+  "location_rationale_message": "{appName} chỉ sử dụng vị trí của bạn để hiển thị thông tin thời tiết và chất lượng không khí.",
   "camera_rationale_title": "Yêu cầu cho phép truy cập máy ảnh",
-  "camera_rationale_message": "EoH chỉ sử dụng máy ảnh của bạn",
+  "camera_rationale_message": "{appName} chỉ sử dụng máy ảnh của bạn",
   "photo_rationale_title": "Yêu cầu cho phép truy cập ảnh",
-  "photo_rationale_message": "EoH chỉ sử dụng thư viện ảnh để upload",
+  "photo_rationale_message": "{appName} chỉ sử dụng thư viện ảnh để upload",
   "bluetooth_rationale_title": "Yêu cầu cho phép sử dụng Bluetooth",
-  "bluetooth_rationale_message": "EoH sử dụng Bluetooth để quét và điều khiển thiết bị",
+  "bluetooth_rationale_message": "{appName} sử dụng Bluetooth để quét và điều khiển thiết bị",
   "recommendations": "Đề xuất",
   "Open windows for more fresh air": "Mở cửa sổ để đưa không khí sạch vào nhà",
   "notify_new_version_title": "Có bản cập nhật!",
@@ -742,7 +742,7 @@
   "guests": "Những vị khách",
   "no_guest": "Không có vị khách nào",
   "guest_info": "Thông tin khách",
-  "eoh_account_id": "ID tài khoản EoH",
+  "eoh_account_id": "ID tài khoản {appName}",
   "access_schedule": "Lịch truy cập",
   "always": "Luôn luôn",
   "recurring": "Tuần hoàn",
@@ -901,7 +901,7 @@
   "gateway_warning_content_3": "Trong các bước tiếp theo, bạn sẽ được hướng dẫn kết nối wifi cho thiết bị. ",
   "gateway_warning_content_4": "Bạn cần biết tên và mật khẩu của mạng wifi và đảm bảo thiết bị được đặt ở vị trí tốt.",
   "warning_beta_test_feature": "Tính năng này đang ở giai đoạn beta test, chưa phải bản chính thức.",
-  "connecting_gateway_warning_1": "Bằng việc tiếp tục, EoH cần kết nối với Wifi của thiết bị.",
+  "connecting_gateway_warning_1": "Bằng việc tiếp tục, {appName} cần kết nối với Wifi của thiết bị.",
   "connecting_gateway_warning_2": "Một thông báo sẽ hiện lên và yêu cầu bạn kết nối.",
   "add_gateway_success": "Thêm gateway thành công",
   "tap_to_add_new_schedule": "Nhấn + để thêm lịch trình mới",
@@ -973,7 +973,7 @@
   "location_perm_denied": "Ứng dụng không cho phép truy cập vị trí.",
   "camera_request_permission": "Quyền yêu cầu máy ảnh",
   "camera_request_permission_des": "Để sử dụng máy ảnh, vui lòng mở khóa quyền đối với máy ảnh",
-  "location_require_message": "Eoh cần quyền truy cập vị trí của bạn để lấy vị trí hiện tại.",
+  "location_require_message": "{appName} cần quyền truy cập vị trí của bạn để lấy vị trí hiện tại.",
   "turn_on_location_service": "Bật dịch vụ vị trí cho điện thoại của bạn",
   "turn_on_location_service_des": "Để tiếp tục, bật dịch vụ vị trí cho điện thoại của bạn trong Cài Đặt",
   "detected": "Phát hiện",
@@ -1019,7 +1019,7 @@
   "device_connect_directly_to_the_gateway": "Thiết bị được kết nối trực tiếp với gateway",
   "zigbee": "Zigbee",
   "device_connect_remotely_to_the_gateway": "Thiết bị được kết nối từ xa với gateway",
-  "connect_wifi_asking": "Bằng việc tiếp tục, EoH cần kết nối với Wifi của thiết bị. Một thông báo sẽ hiện lên và yêu cầu bạn kết nối.",
+  "connect_wifi_asking": "Bằng việc tiếp tục, {appName} cần kết nối với Wifi của thiết bị. Một thông báo sẽ hiện lên và yêu cầu bạn kết nối.",
   "previous": "Trước",
   "invalid_qr_code": "Mã QR không hợp lệ",
   "invalid_qr_code_warning": "Không thể thêm thiết bị bằng mã QR này",
@@ -1051,7 +1051,7 @@
   "need_add_gateway_before_add_device": "Bạn cần thêm mới 1 Gateway trước khi thêm thiết bị.",
   "fail_to_discover_device_wifi": "Không phát hiện được wifi của thiết bị",
   "try_to_turn_on_device_or_try_again": "Thử bật thiết bị hoặc Thử lại",
-  "go_to_eoh_web_to_see_firmware": "Vào web EoH để xem cấu hình firmware",
+  "go_to_eoh_web_to_see_firmware": "Vào web {appName} để xem cấu hình firmware",
   "general_information":"Thông tin chung",
   "connection_methods": "Các phương thức kết nối",
   "delete_gateway":"Xoá cửa ngõ",
@@ -1061,7 +1061,7 @@
   "activate_date":"Ngày kích hoạt",
   "warranty_expiration_date":"Ngày hết hạn bảo hành",
   "firmware_version":"Phiên bản phần mềm",
-  "visit_eoh_web_to_set_up_other_connection": "Truy cập EoH Web để thiết lập các tùy chọn kết nối khác.",
+  "visit_eoh_web_to_set_up_other_connection": "Truy cập {appName} Web để thiết lập các tùy chọn kết nối khác.",
   "delete_successfully":"Xoá thành công!",
   "reboot_successfully": "Khởi động lại thành công!",
   "message_delete_gateway": "Thao tác này sẽ loại bỏ hoàn toàn Gateway với Thông tin, Thiết bị, Luồng dữ liệu khỏi cổng.",
@@ -1113,5 +1113,6 @@
   "default_value": "Giá trị mặc định",
   "config_type": "Loại cấu hình",
   "pin": "PIN",
-  "pin_mode": "Chế độ mã PIN"
+  "pin_mode": "Chế độ mã PIN",
+  "data_address": "Địa chỉ dữ liệu"
 }