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

package/package.json

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

package/src/commons/ActionGroup/CurtainButtonTemplate.js

@@ -16,7 +16,6 @@ const CurtainButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
     action_on_data,
     is_display_lock,
     text1,
-    text2,
     text3,
     text_door_lock,
   } = configuration || {};
@@ -56,7 +55,7 @@ const CurtainButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
       {
         style: styles.buttonActionCurtainCenter,
         icon: Images.buttonPauseCurtain,
-        text: text2,
+        text: '',
         onPress: onButtonStopPress,
         testID: TESTID.BUTTON_TEMPLATE_2,
       },

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

@@ -18,6 +18,7 @@ const OnOffButtonTemplate = memo(
             style={styles.bigCircle}
             onPress={triggerAction}
             testID={`${TESTID.ON_OFF_BUTTON}-${id}`}
+            accessibilityLabel={`${TESTID.ON_OFF_BUTTON}-${id}`}
           >
             <View style={styles.smallCircle}>
               <Icon
@@ -31,6 +32,7 @@ const OnOffButtonTemplate = memo(
                   { color: isOn ? Colors.Gray8 : Colors.Gray6 },
                 ]}
                 testID={`${TESTID.SENSOR_STATUS}-${id}`}
+                accessibilityLabel={`${TESTID.SENSOR_STATUS}-${id}`}
               >
                 {isOn ? configuration.text_on : configuration.text_off}
               </Text>

package/src/commons/ActionTemplate/CurtainAction.js

@@ -0,0 +1,60 @@
+import React, { memo, useCallback } from 'react';
+import { TouchableOpacity } from 'react-native';
+import Text from '../Text';
+import styles from './CurtainActionStyles';
+
+const CurtainAction = ({ configuration, onPress, template }) => {
+  const { open_action, close_action, stop_action, text1, text2, text3 } =
+    configuration || {};
+
+  const onPressActionClose = useCallback(() => {
+    onPress &&
+      onPress({
+        name: text1,
+        action: close_action,
+        template,
+      });
+  }, [onPress, text1, close_action, template]);
+
+  const onPressActionStop = useCallback(() => {
+    onPress &&
+      onPress({
+        name: text2,
+        action: stop_action,
+        template,
+      });
+  }, [onPress, text2, stop_action, template]);
+
+  const onPressActionOpen = useCallback(() => {
+    onPress &&
+      onPress({
+        name: text3,
+        action: open_action,
+        template,
+      });
+  }, [onPress, text3, open_action, template]);
+
+  return (
+    <>
+      <TouchableOpacity onPress={onPressActionClose}>
+        <Text type="H4" style={styles.textwithline}>
+          {text1}
+        </Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity onPress={onPressActionStop}>
+        <Text type="H4" style={styles.textwithline}>
+          {text2}
+        </Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity onPress={onPressActionOpen}>
+        <Text type="H4" style={styles.textwithline}>
+          {text3}
+        </Text>
+      </TouchableOpacity>
+    </>
+  );
+};
+
+export default memo(CurtainAction);

package/src/commons/ActionTemplate/CurtainActionStyles.js

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  textwithline: {
+    paddingBottom: 16,
+    paddingTop: 16,
+    borderBottomWidth: 1,
+    borderColor: Colors.Gray4,
+  },
+});

package/src/commons/ActionTemplate/OnOffSmartLockAction.js

@@ -0,0 +1,44 @@
+import React, { memo, useCallback } from 'react';
+import { TouchableOpacity } from 'react-native';
+import Text from '../Text';
+import styles from './OnOffSmartLockActionStyles';
+
+const OnOffSmartLockAction = ({ configuration, onPress, template }) => {
+  const { action_off, action_on, text_off, text_on } = configuration || {};
+
+  const onPressActionClose = useCallback(() => {
+    onPress &&
+      onPress({
+        name: text_off,
+        action: action_off,
+        template,
+      });
+  }, [onPress, text_off, action_off, template]);
+
+  const onPressActionOpen = useCallback(() => {
+    onPress &&
+      onPress({
+        name: text_on,
+        action: action_on,
+        template,
+      });
+  }, [onPress, text_on, action_on, template]);
+
+  return (
+    <>
+      <TouchableOpacity onPress={onPressActionClose}>
+        <Text type="H4" style={styles.textwithline}>
+          {text_off}
+        </Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity onPress={onPressActionOpen}>
+        <Text type="H4" style={styles.textwithline}>
+          {text_on}
+        </Text>
+      </TouchableOpacity>
+    </>
+  );
+};
+
+export default memo(OnOffSmartLockAction);

package/src/commons/ActionTemplate/OnOffSmartLockActionStyles.js

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  textwithline: {
+    paddingBottom: 16,
+    paddingTop: 16,
+    borderBottomWidth: 1,
+    borderColor: Colors.Gray4,
+  },
+});

package/src/commons/ActionTemplate/index.js

@@ -9,6 +9,8 @@ import ThreeButtonAction from './ThreeButtonAction';
 import OnOffSimpleAction from './OnOffSimpleAction';
 import SelectActionCard from '../SelectActionCard';
 import { ModalCustom } from '../Modal';
+import CurtainAction from './CurtainAction';
+import OnOffSmartLockAction from './OnOffSmartLockAction';
 
 const ActionTemplate = memo(({ data, onSelectAction }) => {
   const t = useTranslations();
@@ -66,6 +68,22 @@ const ActionTemplate = memo(({ data, onSelectAction }) => {
               key={index}
             />
           );
+        case 'curtain_action_template':
+          return (
+            <CurtainAction
+              {...item}
+              onPress={onPressSelectAction}
+              key={index}
+            />
+          );
+        case 'OnOffSmartLockActionTemplate':
+          return (
+            <OnOffSmartLockAction
+              {...item}
+              onPress={onPressSelectAction}
+              key={index}
+            />
+          );
       }
     });
   }, [data, onPressSelectAction]);

package/src/commons/Device/ItemDevice.js

@@ -131,6 +131,7 @@ const ItemDevice = memo(
       <TouchableWithoutFeedback
         onPress={goToSensorDisplay}
         testID={`${TESTID.SENSOR_NAME}-${sensor?.id}`}
+        accessibilityLabel={`${TESTID.SENSOR_NAME}-${sensor?.id}`}
       >
         <View
           style={[styles.container, wrapStyle, { borderColor }]}

package/src/commons/HeaderAni/index.js

@@ -94,6 +94,7 @@ const HeaderAni = memo(
             style={styles.btnBack}
             onPress={onPressLeft}
             testID={TESTID.ICON_BACK}
+            accessibilityLabel={TESTID.ICON_BACK}
           >
             <Icon name={'left'} size={27} color={Colors.Gray9} />
           </TouchableOpacity>

package/src/commons/MenuActionMore/index.js

@@ -17,6 +17,9 @@ const MenuActionMore = memo(
     onItemClick,
     wrapStyle,
     isTextCenter = true,
+    idLabelPopover,
+    idLabelScrollView,
+    idLabelItem = TESTID.SUB_UNIT_NAME,
   }) => {
     const [isDisable, setIsDisable] = useState(false);
     const onPress = useCallback(
@@ -47,8 +50,12 @@ const MenuActionMore = memo(
         onRequestClose={hideMore}
         isVisible={isVisible}
         arrowStyle={styles.wrap}
+        accessibilityLabel={idLabelPopover}
       >
-        <ScrollView scrollIndicatorInsets={{ right: 1 }}>
+        <ScrollView
+          scrollIndicatorInsets={{ right: 1 }}
+          accessibilityLabel={idLabelScrollView}
+        >
           {listMenuItem.map((item, index) => {
             return (
               <TouchableOpacity
@@ -59,6 +66,9 @@ const MenuActionMore = memo(
                 onPress={onPress(item, index)}
                 key={index}
                 testID={TESTID.TOUCHABLE_ACTION_ADD_MORE}
+                accessibilityLabel={`${idLabelItem}-${
+                  item?.route ? item?.id : item?.station?.id
+                }`}
                 disabled={isDisable}
               >
                 <Text style={styles.modalHeaderText}>{item.text}</Text>

package/src/commons/NavBar/index.js

@@ -10,7 +10,15 @@ import Station from '../../screens/Unit/Station';
 import MenuActionMore from '../MenuActionMore';
 
 const NavBar = memo(
-  ({ listMenuItem, listStation, onSnapToItem, indexStation, style }) => {
+  ({
+    listMenuItem,
+    listStation,
+    onSnapToItem,
+    indexStation,
+    style,
+    idLabelScrollView,
+    idLabelItem,
+  }) => {
     const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
       usePopover();
     const refMenuAction = useRef();
@@ -31,6 +39,7 @@ const NavBar = memo(
             onPress={handleShowMenuAction}
             ref={refMenuAction}
             testID={TESTID.NAVBAR_ICON_BARS}
+            accessibilityLabel={TESTID.NAVBAR_ICON_BARS}
           >
             <Icon name={'bars'} size={19} color={Colors.Black} />
           </TouchableOpacity>
@@ -44,6 +53,8 @@ const NavBar = memo(
           isTextCenter={false}
           testID={TESTID.NAVBAR_MENU_ACTION_MORE}
           wrapStyle={styles.wrapStyle}
+          idLabelScrollView={idLabelScrollView}
+          idLabelItem={idLabelItem}
         />
       </>
     );

package/src/commons/SubUnit/ShortDetail.js

@@ -71,6 +71,7 @@ const ShortDetailSubUnit = ({ unit, station }) => {
             },
           ]}
           testID={TESTID.SUB_UNIT_CAMERA_VIEW}
+          accessibilityLabel={`${TESTID.SUB_UNIT_CAMERA_VIEW}-${station?.id}`}
         >
           <MediaPlayerDetail
             uri={station.camera.uri}

package/src/commons/SummaryItem/index.js

@@ -9,6 +9,7 @@ import Temperature from '../../../assets/images/Temperature.svg';
 import UVIndex from '../../../assets/images/UVIndex.svg';
 import WaterQuality from '../../../assets/images/WaterQuality.svg';
 import Device from '../../../assets/images/Device.svg';
+import { TESTID } from '../../configs/Constants';
 
 const SummaryItem = memo(({ item, goToSummary }) => {
   const Icon = (() => {
@@ -29,11 +30,11 @@ const SummaryItem = memo(({ item, goToSummary }) => {
         return Device; /* istanbul ignore next */
     }
   })();
-
   return (
     <TouchableOpacity
       onPress={() => goToSummary(item)}
       style={styles.wrapSummaryItem}
+      accessibilityLabel={`${TESTID.UNIT_DETAIL_UNIT_SUMMARY_ITEM}-${item?.id}`}
     >
       <View style={styles.summaryItem}>
         <Icon />

package/src/commons/Unit/HeaderUnit/index.js

@@ -19,6 +19,7 @@ const HeaderUnit = memo(
     hideRightPlus,
     styleBoxTitle,
     bottomBorder,
+    idButtonMore,
   }) => {
     const { goBack } = useNavigation();
     const buttonMoreRef = useRef(null);
@@ -80,6 +81,7 @@ const HeaderUnit = memo(
               style={styles.btnMore}
               onPress={onPressMore}
               ref={buttonMoreRef}
+              accessibilityLabel={idButtonMore}
             >
               <Icon
                 name={'more'}

package/src/commons/Unit/SharedUnit.js

@@ -68,6 +68,7 @@ const SharedUnit = ({
       key={item.id.toString()}
       onPress={goToDetail}
       testID={`${TESTID.TOUCH_SHARED_UNIT}-${item.id}`}
+      accessibilityLabel={`${TESTID.TOUCH_SHARED_UNIT}-${item.id}`}
     >
       <Image
         source={{ uri: unit.icon }}

package/src/commons/WrapParallaxScrollView/index.js

@@ -21,6 +21,8 @@ const WrapParallaxScrollView = ({
   hideRight,
   hideRightPlus,
   contentBackground,
+  accessibilityLabel,
+  idButtonMore,
 }) => {
   const renderForeground = useCallback(
     () => (
@@ -32,6 +34,7 @@ const WrapParallaxScrollView = ({
           onMore={onMore}
           hideRight={hideRight}
           hideRightPlus={hideRightPlus}
+          idButtonMore={idButtonMore}
         />
         <Text semibold style={styles.nameUnit}>
           {title}
@@ -39,7 +42,16 @@ const WrapParallaxScrollView = ({
         {contentBackground}
       </View>
     ),
-    [onBack, onAdd, onMore, title, hideRight, hideRightPlus, contentBackground]
+    [
+      onBack,
+      onAdd,
+      onMore,
+      hideRight,
+      hideRightPlus,
+      idButtonMore,
+      title,
+      contentBackground,
+    ]
   );
   const renderBackground = useCallback(
     () => (
@@ -68,10 +80,11 @@ const WrapParallaxScrollView = ({
           onMore={onMore}
           hideRight={hideRight}
           hideRightPlus={hideRightPlus}
+          idButtonMore={idButtonMore}
         />
       </View>
     ),
-    [title, onBack, onAdd, onMore, hideRight, hideRightPlus]
+    [title, onBack, onAdd, onMore, hideRight, hideRightPlus, idButtonMore]
   );
   return (
     <ParallaxScrollView
@@ -83,6 +96,7 @@ const WrapParallaxScrollView = ({
       backgroundColor={Colors.White}
       refreshControl={refreshControl}
       showsVerticalScrollIndicator={false}
+      accessibilityLabel={accessibilityLabel}
     >
       {children}
     </ParallaxScrollView>

package/src/configs/Constants.js

@@ -400,6 +400,11 @@ export const TESTID = {
   //Unit Detail
   UNIT_DETAIL_STATION_LIST: 'UNIT_DETAIL_STATION_LIST',
   UNIT_DETAIL_UNIT_SUMMARY_VIEW: 'UNIT_DETAIL_UNIT_SUMMARY_VIEW',
+  UNIT_DETAIL_UNIT_SUMMARY_ITEM: 'UNIT_DETAIL_UNIT_SUMMARY_ITEM',
+  UNIT_DETAIL_PARALLAX_SCROLLVIEW: 'UNIT_DETAIL_PARALLAX_SCROLLVIEW',
+  UNIT_DETAIL_PARALLAX_BUTTON_MORE: 'UNIT_DETAIL_PARALLAX_BUTTON_MORE',
+  UNIT_DETAIL_POPUP_MORE: 'UNIT_DETAIL_POPUP_MORE',
+  UNIT_DETAIL_POPUP_MORE_ITEM: 'UNIT_DETAIL_POPUP_MORE_ITEM',
 
   ON_CHECK_SPOT_NUMBER: 'ON_CHECK_SPOT_NUMBER',
   ON_BOOK_NOW: 'ON_BOOK_NOW',

package/src/screens/AddNewAction/SelectAction.js

@@ -226,12 +226,15 @@ const SelectAction = memo(({ route }) => {
       case 'one_button_action_template':
       case 'three_button_action_template':
       case 'OnOffSimpleActionTemplate':
+      case 'curtain_action_template':
         index = newActions.findIndex((item) => {
           return (
             item.template === 'on_off_button_action_template' ||
             item.template === 'one_button_action_template' ||
             item.template === 'three_button_action_template' ||
-            item.template === 'OnOffSimpleActionTemplate'
+            item.template === 'OnOffSimpleActionTemplate' ||
+            item.template === 'curtain_action_template' ||
+            item.template === 'OnOffSmartLockActionTemplate'
           );
         });
         break;
@@ -423,6 +426,8 @@ const RenderActionItem = ({ data, onSelectAction }) => {
       case 'one_button_action_template':
       case 'three_button_action_template':
       case 'OnOffSimpleActionTemplate':
+      case 'curtain_action_template':
+      case 'OnOffSmartLockActionTemplate':
         actionTemplate.push(item);
         break;
       case 'OptionsDropdownActionTemplate':

package/src/screens/Notification/__test__/NotificationItem.test.js

@@ -50,57 +50,19 @@ describe('test NotificationItem', () => {
     item = { ...item, is_read: false, content_code: '' };
   });
   let tree;
-  const listCase = [
-    {
-      content_code: NOTIFICATION_TYPES.REMIND_TO_MAKE_PAYMENT,
-      screen: Routes.SmartParkingBookingDetails,
-      params: { id: 1 },
-    },
-    {
-      content_code: NOTIFICATION_TYPES.EXPIRE_PARKING_SESSION,
-      screen: Routes.SmartParkingBookingDetails,
-      params: { id: 1 },
-    },
-    {
-      content_code: NOTIFICATION_TYPES.REMIND_TO_SCAN_QR_CODE,
-      screen: Routes.SmartParkingBookingDetails,
-      params: { id: 1 },
-    },
-    {
-      content_code: NOTIFICATION_TYPES.BOOKING_SUCCESSFULLY,
-      screen: Routes.SmartParkingBookingDetails,
-      params: { id: 1 },
-    },
-    {
-      content_code: NOTIFICATION_TYPES.BOOKING_EXPIRED_AND_VIOLATION_CREATED,
-      screen: Routes.SmartParkingBookingDetails,
-      params: { id: 1 },
-    },
-    {
-      content_code: NOTIFICATION_TYPES.MOVE_CAR_WITHOUT_PAY_VIOLATION,
-      screen: Routes.SmartParkingBookingDetails,
-      params: { id: 1 },
-    },
-    {
-      content_code: NOTIFICATION_TYPES.PAY_FINE_SUCCESSFULLY,
-      screen: Routes.SmartParkingBookingDetails,
-      params: { id: 1 },
-    },
-    {
-      content_code: NOTIFICATION_TYPES.STOP_VIOLATION_FREE_PARKING_ZONE,
-      screen: Routes.SmartParkingBookingDetails,
-      params: { id: 1 },
-    },
-    {
-      content_code: NOTIFICATION_TYPES.PAY_FINE_AND_EXTEND_SUCCESSFULLY,
-      screen: Routes.SmartParkingBookingDetails,
-      params: { id: 1 },
-    },
+
+  const listCase2 = [
+    NOTIFICATION_TYPES.NOTIFY_REMOVE_UNIT,
+    NOTIFICATION_TYPES.NOTIFY_REMOVE_MEMBER,
+    NOTIFICATION_TYPES.NOTIFY_MEMBER_LEAVE_UNIT,
+    NOTIFICATION_TYPES.NOTIFY_REMOVE_SUB_UNIT,
+    NOTIFICATION_TYPES.NOTIFY_REMOVE_DEVICE,
+    'default case',
   ];
 
-  for (const notify of listCase) {
-    test(`create ItemNotification ${notify.content_code}`, () => {
-      item.content_code = notify.content_code;
+  for (const content_code of listCase2) {
+    test(`create ItemNotification ${content_code}`, () => {
+      item.content_code = content_code;
       act(() => {
         tree = create(wrapComponent(item));
       });
@@ -109,33 +71,23 @@ describe('test NotificationItem', () => {
       act(() => {
         button.props.onPress();
       });
-      expect(mockNavigate).toHaveBeenCalledWith(Routes.SmartParkingStack, {
-        screen: notify.screen,
-        params: { id: 1 },
-      });
+      expect(mockNavigate).not.toHaveBeenCalled();
     });
   }
 
-  const listCaseSmartParking2 = [
-    {
-      content_code: NOTIFICATION_TYPES.USER_CANCEL,
-      screen: Routes.MyBookingList,
-      params: { tab: 1 },
-    },
-    {
-      content_code: NOTIFICATION_TYPES.SYSTEM_CANCEL_NO_PAYMENT,
-      screen: Routes.MyBookingList,
-      params: { tab: 1 },
-    },
-    {
-      content_code: NOTIFICATION_TYPES.PARKING_COMPLETED,
-      screen: Routes.MyBookingList,
-      params: { tab: 1 },
-    },
+  const listCaseUnitDetail = [
+    NOTIFICATION_TYPES.NOTIFY_RENAME_UNIT,
+    NOTIFICATION_TYPES.NOTIFY_UPDATE_ADDRESS,
+    NOTIFICATION_TYPES.NOTIFY_RENAME_SUB_UNIT,
+    NOTIFICATION_TYPES.NOTIFY_INVITE_MEMBER,
   ];
-  for (const notify of listCaseSmartParking2) {
-    test(`create ItemNotification ${notify.content_code}`, () => {
-      item.content_code = notify.content_code;
+
+  for (const content_code of listCaseUnitDetail) {
+    test(`create ItemNotification ${content_code}`, () => {
+      item.content_code = content_code;
+      item.params = {
+        unit_id: 1,
+      };
       act(() => {
         tree = create(wrapComponent(item));
       });
@@ -144,25 +96,24 @@ describe('test NotificationItem', () => {
       act(() => {
         button.props.onPress();
       });
-      expect(mockNavigate).toHaveBeenCalledWith(Routes.SmartParkingStack, {
-        screen: notify.screen,
-        params: { tab: 1 },
+      expect(mockNavigate).toHaveBeenCalledWith(Routes.UnitStack, {
+        screen: Routes.UnitDetail,
+        params: {
+          unitId: 1,
+        },
       });
     });
   }
 
-  const listCase2 = [
-    NOTIFICATION_TYPES.NOTIFY_REMOVE_UNIT,
-    NOTIFICATION_TYPES.NOTIFY_REMOVE_MEMBER,
-    NOTIFICATION_TYPES.NOTIFY_MEMBER_LEAVE_UNIT,
-    NOTIFICATION_TYPES.NOTIFY_REMOVE_SUB_UNIT,
-    NOTIFICATION_TYPES.NOTIFY_REMOVE_DEVICE,
-    'default case',
-  ];
+  const listCaseDeviceDetail = [NOTIFICATION_TYPES.NOTIFY_DEVICE_DISCONNECT];
 
-  for (const content_code of listCase2) {
+  for (const content_code of listCaseDeviceDetail) {
     test(`create ItemNotification ${content_code}`, () => {
       item.content_code = content_code;
+      item.params = {
+        unit_id: 1,
+        sensor_id: 1,
+      };
       act(() => {
         tree = create(wrapComponent(item));
       });
@@ -171,7 +122,13 @@ describe('test NotificationItem', () => {
       act(() => {
         button.props.onPress();
       });
-      expect(mockNavigate).not.toHaveBeenCalled();
+      expect(mockNavigate).toHaveBeenCalledWith(Routes.UnitStack, {
+        screen: Routes.DeviceDetail,
+        params: {
+          unitId: 1,
+          sensorId: 1,
+        },
+      });
     });
   }
 
@@ -208,6 +165,24 @@ describe('test NotificationItem', () => {
     });
   }
 
+  test('test case NOTIFY_INDICATOR no sensor_type', () => {
+    item.content_code = NOTIFICATION_TYPES.NOTIFY_INDICATOR;
+    item.params = {
+      sensor_type: null,
+      unit_id: 5,
+      summary_id: 11,
+    };
+    act(() => {
+      tree = create(wrapComponent(item));
+    });
+    const instance = tree.root;
+    const button = instance.findByType(TouchableOpacity);
+    act(() => {
+      button.props.onPress();
+    });
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+
   const listSensorType2 = [
     SENSOR_TYPE.SMOKE,
     SENSOR_TYPE.FIRE,
@@ -344,4 +319,23 @@ describe('test NotificationItem', () => {
       },
     });
   });
+
+  test('test notify emergency not params type', () => {
+    item.content_code = NOTIFICATION_TYPES.NOTIFY_EMERGENCY;
+    item.params = {
+      unit_id: 1,
+      sensor_id: 1,
+      type: null,
+    };
+
+    act(() => {
+      tree = create(wrapComponent(item));
+    });
+    const instance = tree.root;
+    const button = instance.findByType(TouchableOpacity);
+    act(() => {
+      button.props.onPress();
+    });
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
 });