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

package/src/commons/BackDefault/index.js

@@ -1,12 +1,12 @@
 import React, { memo } from 'react';
 import { TouchableOpacity, StyleSheet } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 
 const BackDefault = memo(({ goBack, color, fixedHeight }) => {
   return (
     <TouchableOpacity
-      testID={TESTID.BACK_DEFAULT_TOUCH}
+      accessibilityLabel={AccessibilityLabel.BACK_DEFAULT_TOUCH}
       onPress={goBack}
       style={[styles.wrap, fixedHeight && styles.noPaddingVertical]}
     >

package/src/commons/BottomButtonView/index.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import { View, StyleSheet } from 'react-native';
 
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 import Button from '../Button';
 
 const BottomButtonView = memo(
@@ -19,7 +19,7 @@ const BottomButtonView = memo(
     textTypeMain = 'H4',
     typeMain = 'primary',
     typeSecondary = 'cancel',
-    testIDPrefix = '',
+    accessibilityLabelPrefix = '',
   }) => {
     return (
       <View
@@ -41,7 +41,7 @@ const BottomButtonView = memo(
             textSemiBold={semiboldMain}
             textType={textTypeMain}
             style={rowButton && styleCustom.buttonMainRow}
-            testID={`${testIDPrefix}${TESTID.BOTTOM_VIEW_MAIN}`}
+            accessibilityLabel={`${accessibilityLabelPrefix}${AccessibilityLabel.BOTTOM_VIEW_MAIN}`}
           />
         )}
         {secondaryTitle && (
@@ -55,7 +55,7 @@ const BottomButtonView = memo(
                 ? styleCustom.buttonSecondaryRow
                 : styleCustom.buttonSecondaryColumn
             }
-            testID={`${testIDPrefix}${TESTID.BOTTOM_VIEW_SECONDARY}`}
+            accessibilityLabel={`${accessibilityLabelPrefix}${AccessibilityLabel.BOTTOM_VIEW_SECONDARY}`}
           />
         )}
       </View>

package/src/commons/Button/index.js

@@ -132,7 +132,7 @@ export default ({
   textType = 'H4',
   textSemiBold = true,
   style,
-  testID,
+  accessibilityLabel,
 }) => {
   const styleButton = ButtonStyle[type];
   const textColor = TextColor[type];
@@ -144,7 +144,6 @@ export default ({
   const PreventDoubleTouch = withPreventDoubleClick(TouchableOpacity);
   return (
     <PreventDoubleTouch
-      testID={testID}
       style={[
         {
           width,
@@ -158,6 +157,7 @@ export default ({
       onPress={onPress}
       disabled={isDisabled}
       activeOpacity={activeOpacity}
+      accessibilityLabel={accessibilityLabel}
     >
       <View style={styles.wrap}>
         {icon}

package/src/commons/ButtonPopup/index.js

@@ -3,7 +3,7 @@ import { StyleSheet, View } from 'react-native';
 import { Icon } from '@ant-design/react-native';
 
 import { Colors, Device } from '../../configs';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 
 import BottomButtonView from '../BottomButtonView';
 import { ModalCustom } from '../Modal';
@@ -35,7 +35,7 @@ const ButtonPopup = ({
       onModalHide={onHide}
       useNativeDriver={true}
       useNativeDriverForBackdrop={true}
-      testID={TESTID.MODAL_BUTTON_POPUP}
+      accessibilityLabel={AccessibilityLabel.MODAL_BUTTON_POPUP}
     >
       <View style={styles.popoverStyle}>
         <View style={styles.modalWrapper}>
@@ -57,7 +57,7 @@ const ButtonPopup = ({
             onPressMain={onPressMain}
             typeMain={typeMain}
             typeSecondary={typeSecondary}
-            testIDPrefix={TESTID.PREFIX.BUTTON_POPUP}
+            accessibilityLabelPrefix={AccessibilityLabel.PREFIX.BUTTON_POPUP}
             semiboldSecond={semiboldSecond}
           />
           {thirdTitle && (

package/src/commons/Dashboard/MyPinnedSharedUnit/__test__/MyPinnedSharedUnit.test.js

@@ -7,7 +7,7 @@ import { Text } from 'react-native';
 import { getTranslate } from '../../../../utils/I18n';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
-import { TESTID } from '../../../../configs/Constants';
+import { AccessibilityLabel } from '../../../../configs/Constants';
 import { API } from '../../../../configs';
 import { TouchableOpacity } from 'react-native';
 import api from '../../../../utils/Apis/axios';
@@ -51,7 +51,8 @@ describe('Test MyPinnedSharedUnit', () => {
 
     const goToAllSharedUnits = instance.find(
       (el) =>
-        el.props.testID === TESTID.DASHBOARD_VIEW_ALL_SHARED_UNITS &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.DASHBOARD_VIEW_ALL_SHARED_UNITS &&
         el.type === TouchableOpacity
     );
 

package/src/commons/Dashboard/MyPinnedSharedUnit/index.js

@@ -7,7 +7,7 @@ import Text from '../../Text';
 import { API, Colors } from '../../../configs';
 import { useNavigation, useIsFocused } from '@react-navigation/native';
 import Routes from '../../../utils/Route';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import SharedUnit from '../../Unit/SharedUnit';
 import { fetchWithCache } from '../../../utils/Apis/axios';
@@ -50,7 +50,9 @@ const MyPinnedSharedUnit = () => {
 
           <TouchableOpacity
             onPress={goToAllSharedUnits}
-            testID={TESTID.DASHBOARD_VIEW_ALL_SHARED_UNITS}
+            accessibilityLabel={
+              AccessibilityLabel.DASHBOARD_VIEW_ALL_SHARED_UNITS
+            }
           >
             <Text color={Colors.Primary} style={styles.viewAll}>
               {t('view_all')}

package/src/commons/Dashboard/MyUnit/__test__/MyUnit.test.js

@@ -3,7 +3,7 @@ import renderer, { act } from 'react-test-renderer';
 import MockAdapter from 'axios-mock-adapter';
 import MyUnit from '..';
 import MyUnitDevice from '../../../../screens/Unit/components/MyUnitDevice';
-import { TESTID } from '../../../../configs/Constants';
+import { AccessibilityLabel } from '../../../../configs/Constants';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
 import api from '../../../../utils/Apis/axios';
@@ -76,10 +76,13 @@ describe('Test MyUnit', () => {
 
   const getElement = (instance) => {
     const goToDetail = instance.findAll(
-      (item) => item.props.testID === TESTID.MY_UNIT_GO_TO_DETAIL
+      (item) =>
+        item.props.accessibilityLabel ===
+        AccessibilityLabel.MY_UNIT_GO_TO_DETAIL
     );
     const textNoUnit = instance.findAll(
-      (item) => item.props.testID === TESTID.MY_UNIT_NO_UNIT
+      (item) =>
+        item.props.accessibilityLabel === AccessibilityLabel.MY_UNIT_NO_UNIT
     );
     return { goToDetail, textNoUnit };
   };

package/src/commons/Dashboard/MyUnit/index.js

@@ -26,7 +26,7 @@ import { SCContext } from '../../../context';
 import { Action } from '../../../context/actionType';
 
 import Carousel from 'react-native-snap-carousel';
-import { TESTID, DEVICE_TYPE } from '../../../configs/Constants';
+import { AccessibilityLabel, DEVICE_TYPE } from '../../../configs/Constants';
 import Routes from '../../../utils/Route';
 import MyUnitDevice from '../../../screens/Unit/components/MyUnitDevice';
 
@@ -107,7 +107,7 @@ const MyUnit = () => {
             onPress={() => goToDetail(item)}
             style={styles.btnItem}
             activeOpacity={0.75}
-            testID={TESTID.MY_UNIT_GO_TO_DETAIL}
+            accessibilityLabel={AccessibilityLabel.MY_UNIT_GO_TO_DETAIL}
           >
             <View style={styles.overlay} />
             <Image
@@ -146,7 +146,9 @@ const MyUnit = () => {
             />
           ) : (
             <View>
-              <Text testID={TESTID.MY_UNIT_NO_UNIT}>{t('text_no_units')}</Text>
+              <Text accessibilityLabel={AccessibilityLabel.MY_UNIT_NO_UNIT}>
+                {t('text_no_units')}
+              </Text>
             </View>
           )}
         </View>

package/src/commons/DevMode/CardDevMode.js

@@ -0,0 +1,42 @@
+import React, { memo } from 'react';
+import { View } from 'react-native';
+import Text from '../Text';
+import { useSCContextSelector } from '../../context';
+import t from '../../hooks/Common/useTranslations';
+import styles from './Styles/CardStyles';
+
+const CardDevMode = ({
+  title = t('label'),
+  children,
+  style,
+  rightHeaderComponent,
+  id,
+  isWrap,
+}) => {
+  const { itemDraggingId, isEditingTemplate, isInEditTemplateScreen } =
+    useSCContextSelector((state) => state.devMode);
+
+  if (isEditingTemplate || isWrap) {
+    return (
+      <View
+        style={[
+          styles.card,
+          isEditingTemplate && styles.isEditingTemplate,
+          style,
+          id === itemDraggingId && styles.activeCard,
+        ]}
+      >
+        <View style={styles.headerTitle}>
+          <Text style={styles.headerLeft}>{title}</Text>
+          {!!rightHeaderComponent && rightHeaderComponent}
+        </View>
+        {children}
+        {/* // NOTE: For user can not control sensor at EditTemplateScreen */}
+        {isInEditTemplateScreen && <View style={styles.editing} />}
+      </View>
+    );
+  }
+  return children;
+};
+
+export default memo(CardDevMode);

package/src/commons/DevMode/EmptyComponent.js

@@ -0,0 +1,18 @@
+import React, { memo } from 'react';
+import Text from '../Text';
+import t from '../../hooks/Common/useTranslations';
+import styles from './Styles/EmptyComponentStyles';
+
+const EmptyComponent = ({
+  text1 = t('no_template_yet'),
+  text2 = t('add_your_template'),
+}) => {
+  return (
+    <>
+      <Text style={styles.textEmpty1}>{text1}</Text>
+      <Text style={styles.textEmpty2}>{text2}</Text>
+    </>
+  );
+};
+
+export default memo(EmptyComponent);

package/src/commons/DevMode/Item.js

@@ -0,0 +1,21 @@
+import React, { memo } from 'react';
+import { TouchableOpacity } from 'react-native';
+import Text from '../Text';
+import t from '../../hooks/Common/useTranslations';
+import styles from './Styles/ItemStyles';
+
+const Item = ({ item, index, onPress }) => {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={[styles.item, index % 2 === 0 && styles.oddItem]}
+    >
+      <Text style={styles.nameItem}>{item?.name}</Text>
+      <Text style={styles.countItem}>{`${
+        item?.count > 0 ? item?.count : t('no')
+      } ${t('gateways').toLowerCase()}`}</Text>
+    </TouchableOpacity>
+  );
+};
+
+export default memo(Item);

package/src/commons/DevMode/Styles/CardStyles.js

@@ -0,0 +1,40 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  card: {
+    marginVertical: 14,
+    marginHorizontal: 16,
+    padding: 16,
+    backgroundColor: Colors.White,
+    borderRadius: 10,
+    shadowColor: Colors.Shadow,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3,
+    elevation: 6,
+  },
+  headerTitle: { justifyContent: 'space-between', flexDirection: 'row' },
+  headerLeft: {
+    color: Colors.Gray8,
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  activeCard: {
+    borderWidth: 1,
+    borderColor: Colors.Red,
+  },
+  editing: {
+    width: '100%',
+    height: '100%',
+    zIndex: 9999,
+    position: 'absolute',
+  },
+  isEditingTemplate: {
+    borderWidth: 1,
+    borderColor: Colors.Neutral.Neutral3,
+  },
+});

package/src/commons/DevMode/Styles/EmptyComponentStyles.js

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  textEmpty1: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  textEmpty2: {
+    fontSize: 14,
+    fontWeight: '400',
+    color: Colors.Neutral.Neutral5,
+    marginTop: 7,
+  },
+});

package/src/commons/DevMode/Styles/ItemStyles.js

@@ -0,0 +1,27 @@
+import { StyleSheet } from 'react-native';
+import { Colors, Constants } from '../../../configs';
+
+export default StyleSheet.create({
+  item: {
+    width: (Constants.width - 42) / 2,
+    height: 128,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: Colors.Neutral.Neutral3,
+    marginBottom: 16,
+    justifyContent: 'space-around',
+    alignItems: 'center',
+  },
+  oddItem: {
+    marginRight: 10,
+  },
+  nameItem: {
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+  countItem: {
+    fontSize: 12,
+    fontWeight: 400,
+    color: Colors.Neutral.Neutral5,
+  },
+});

package/src/commons/DevMode/Styles/TextWithLabelStyles.js

@@ -0,0 +1,36 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    marginBottom: 16,
+  },
+  label: {
+    fontSize: 12,
+    fontWeight: '400',
+    color: Colors.Neutral.Neutral5,
+    marginBottom: 8,
+  },
+  box: {
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: Colors.Neutral.Neutral3,
+    height: 45,
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+    backgroundColor: Colors.White,
+  },
+  disable: {
+    backgroundColor: Colors.Neutral.Neutral3,
+    borderColor: Colors.Neutral.Neutral4,
+  },
+  textDisable: {
+    color: Colors.Neutral.Neutral5,
+  },
+  text: {
+    fontSize: 16,
+    fontWeight: '100',
+    lineHeight: 22,
+    color: Colors.BlackRussian,
+  },
+});

package/src/commons/DevMode/TextWithLabel.js

@@ -0,0 +1,30 @@
+import React, { memo } from 'react';
+import { View } from 'react-native';
+import Text from '../Text';
+import styles from './Styles/TextWithLabelStyles';
+
+const TextWithLabel = ({
+  label = '',
+  text = '',
+  isDisable = false,
+  isBox = false,
+}) => {
+  return (
+    <View style={styles.wrap}>
+      <Text style={styles.label}>{label}</Text>
+      {!isBox ? (
+        <Text numberOfLines={5} style={styles.text}>
+          {text}
+        </Text>
+      ) : (
+        <View style={[styles.box, isDisable && styles.disable]}>
+          <Text numberOfLines={1} style={[isDisable && styles.textDisable]}>
+            {text}
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default memo(TextWithLabel);

package/src/commons/DevMode/index.js

@@ -1,3 +1,7 @@
+import Item from './Item';
 import Label from './Label';
+import Search from './Search';
+import EmptyComponent from './EmptyComponent';
+import CardDevMode from './CardDevMode';
 
-export { Label };
+export { Label, Search, Item, EmptyComponent, CardDevMode };

package/src/commons/Device/ConnectedViewHeader.js

@@ -11,8 +11,8 @@ const DisplayTextConnected = memo(({ type }) => {
   const t = useTranslations();
   let text = '';
   switch (type) {
-    case 'GoogleHome':
-      text = t('ggHomeConnected');
+    case 'HomeAssistant':
+      text = t('home_assistant_connected');
       break;
     case 'Bluetooth':
       text = t('connected_via_bluetooth');

package/src/commons/Device/DeviceAlertStatus.js

@@ -1,12 +1,12 @@
 import React, { memo, useEffect } from 'react';
 import { View, StyleSheet } from 'react-native';
 import AlertStatusMachine from './WaterPurifierStatus/AlertStatusMachine';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 import { Colors } from '../../configs';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 const DeviceAlertStatus = memo(
-  ({ data, style, offsetTitle, setOffsetTitle }) => {
+  ({ data = [], style, offsetTitle, setOffsetTitle }) => {
     const t = useTranslations();
     const listStatus = data.filter((item) => item.value === 1);
 
@@ -74,7 +74,7 @@ const DeviceAlertStatus = memo(
         {listStatus &&
           listStatus.map((status) => (
             <AlertStatusMachine
-              testID={TESTID.ALERT_STATUS_MACHINE}
+              accessibilityLabel={AccessibilityLabel.ALERT_STATUS_MACHINE}
               message={
                 (status.standard && t(status.standard)) ||
                 t('tank_working_normally')

package/src/commons/Device/DisconnectedView.js

@@ -32,8 +32,8 @@ const DisplayTextDisconnected = memo(({ type }) => {
   const t = useTranslations();
   let text = '';
   switch (type) {
-    case 'GoogleHome':
-      text = t('ggHomeDisconnected');
+    case 'HomeAssistant':
+      text = t('home_assistant_disconnected');
       break;
     default:
       text = t('disconnected');

package/src/commons/Device/Emergency/EmergencyButton.js

@@ -4,7 +4,7 @@ import { useTranslations } from '../../../hooks/Common/useTranslations';
 
 import Text from '../../Text';
 import { Colors } from '../../../configs';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import SvgEmergencyButton from '../../../../assets/images/Emergency/emergency-button.svg';
 import { Card } from '../../../commons/CardShadow';
 
@@ -16,7 +16,7 @@ const EmergencyButton = memo(({ emergency }) => {
         <TouchableOpacity
           delayLongPress={3000}
           onLongPress={emergency}
-          testID={TESTID.EMERGENCY_BUTTON}
+          accessibilityLabel={AccessibilityLabel.EMERGENCY_BUTTON}
         >
           <SvgEmergencyButton />
         </TouchableOpacity>

package/src/commons/Device/Emergency/EmergencyDetail.js

@@ -17,7 +17,7 @@ const { standardizeHeight } = standardizeCameraScreenSize(
 
 const EmergencyDetail = memo(({ item }) => {
   const t = useTranslations();
-  const groupId = item.configuration.device.group.id;
+  const groupId = item?.configuration?.device?.group?.id;
   const isFocused = useIsFocused();
   const { listContacts, getListContacts } = useEmeragencyContacts();
 

package/src/commons/Device/Emergency/__test__/EmergencyButton.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { TouchableOpacity } from 'react-native';
 import renderer, { act } from 'react-test-renderer';
 
-import { TESTID } from '../../../../configs/Constants';
+import { AccessibilityLabel } from '../../../../configs/Constants';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
 import Text from '../../../Text';
@@ -35,7 +35,8 @@ describe('Test EmergencyButton', () => {
     const instance = tree.root;
     const button = instance.findAllByType(TouchableOpacity);
     const emergencyButton = button.find(
-      (item) => item.props.testID === TESTID.EMERGENCY_BUTTON
+      (item) =>
+        item.props.accessibilityLabel === AccessibilityLabel.EMERGENCY_BUTTON
     );
 
     act(() => {

package/src/commons/Device/FlatListItems.js

@@ -8,7 +8,7 @@ import Routes from '../../utils/Route';
 import { IconFill, IconOutline } from '@ant-design/icons-react-native';
 import { Colors, Constants } from '../../configs';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 import { ModalCustom } from '../Modal';
 
 const marginHorizontal = 20;
@@ -73,7 +73,7 @@ const FlatListItems = memo(({ data, style, title, offsetTitle }) => {
           <TouchableOpacity
             onPress={setShowInfo}
             style={styles.iconInfo}
-            testID={TESTID.TOUCH_INFO_FLAT_LIST_ITEM}
+            accessibilityLabel={AccessibilityLabel.TOUCH_INFO_FLAT_LIST_ITEM}
           >
             <IconOutline name={'info-circle'} size={16} color={Colors.Gray8} />
           </TouchableOpacity>

package/src/commons/Device/ItemAddNew/index.js

@@ -1,26 +1,25 @@
 import React, { memo } from 'react';
-import { TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native';
+import { TouchableWithoutFeedback, View } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import Text from '../../Text';
 
 import { Colors } from '../../../configs';
 import styles from './styles';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 
 const ItemAddNew = memo(({ title, onAddNew, wrapStyle }) => {
   return (
-    <TouchableWithoutFeedback onPress={onAddNew}>
+    <TouchableWithoutFeedback
+      accessibilityLabel={AccessibilityLabel.SUB_UNIT_ADD_DEVICE}
+      onPress={onAddNew}
+    >
       <View style={[styles.container, wrapStyle]}>
         <View style={styles.boxIcon}>
-          <TouchableOpacity
-            style={styles.buttonPlus}
-            onPress={onAddNew}
-            testID={TESTID.PLUS}
-          >
+          <View style={styles.buttonPlus}>
             <IconOutline name="plus" size={22} color={Colors.Gray8} />
-          </TouchableOpacity>
+          </View>
         </View>
-        <TouchableOpacity onPress={onAddNew}>
+        <View>
           <Text
             numberOfLines={1}
             type="H4"
@@ -29,7 +28,7 @@ const ItemAddNew = memo(({ title, onAddNew, wrapStyle }) => {
           >
             {title}
           </Text>
-        </TouchableOpacity>
+        </View>
       </View>
     </TouchableWithoutFeedback>
   );