@eohjsc/react-native-smart-city 0.7.3-rc11 → 0.7.3-rc13

package/src/screens/GuestInfo/index.js

@@ -7,7 +7,7 @@ import RowGuestInfo from './components/RowGuestInfo';
 import HeaderGuestInfo from './components/HeaderGuestInfo';
 import AccessScheduleSheet from './components/AccessScheduleSheet';
 import { CircleView } from '../../commons/CircleView';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import Text from '../../commons/Text';
 import { useBoolean } from '../../hooks/Common';
 import { axiosGet, axiosPut } from '../../utils/Apis/axios';
@@ -113,7 +113,7 @@ const GuestInfo = ({ route }) => {
                   />
                 ) : (
                   <CircleView size={88} center style={styles.avatar}>
-                    <AntDesign name="user" size={44} color={Colors.Pink1} />
+                    <IconOutline name="user" size={44} color={Colors.Pink1} />
                   </CircleView>
                 )}
                 <Text type="H3" bold>

package/src/screens/HanetCamera/ManageAccess.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { View, TouchableOpacity, Image, FlatList } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { HeaderCustom } from '../../commons/Header';
 import Text from '../../commons/Text';
 import RequestFaceIDPopup from './components/RequestFaceIDPopup';
@@ -74,7 +74,7 @@ const HanetManageAccess = ({ route }) => {
             {' '}
             {item.name}
           </Text>
-          <AntDesign name="right" size={20} color={Colors.Gray6} />
+          <IconOutline name="right" size={20} color={Colors.Gray6} />
         </TouchableOpacity>
       );
     },
@@ -89,7 +89,7 @@ const HanetManageAccess = ({ route }) => {
           onPress={setShowAddMemberModal}
           accessibilityLabel={AccessibilityLabel.HANET_MANAGE_ACCESS_ADD_BUTTON}
         >
-          <AntDesign name={'plus'} size={27} color={Colors.Black} />
+          <IconOutline name={'plus'} size={27} color={Colors.Black} />
         </TouchableOpacity>
       </View>
     ),

package/src/screens/HanetCamera/MemberInfo.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { View, TouchableOpacity, Image } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 import { HeaderCustom } from '../../commons/Header';
 import { AlertAction, FullLoading } from '../../commons';
@@ -173,7 +173,7 @@ const HanetMemberInfo = ({ route }) => {
         onPress={setShowSetFaceIDModal}
         style={[styles.row, !!error && { borderBottomColor: Colors.Red6 }]}
       >
-        <AntDesign name="camera" size={27} color={Colors.Primary} />
+        <IconOutline name="camera" size={27} color={Colors.Primary} />
         <Text
           type="Body"
           bold

package/src/screens/HanetCamera/components/RequestFaceIDPopup.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TouchableOpacity, StyleSheet } from 'react-native';
 import ImagePicker from 'react-native-image-crop-picker';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import Text from '../../../commons/Text';
 import BottomSheet from '../../../commons/BottomSheet';
 import { Colors } from '../../../configs';
@@ -19,7 +19,7 @@ const RequestFaceIDPopup = ({
   const t = useTranslations();
   const options = [
     {
-      icon: <AntDesign name="camera" color={Colors.Gray9} size={27} />,
+      icon: <IconOutline name="camera" color={Colors.Gray9} size={27} />,
       text: t('capture_image'),
       onChoose: () => {
         setHide();

package/src/screens/ManageAccess/index.js

@@ -9,7 +9,7 @@ import {
 import { useNavigation, useIsFocused } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { HeaderCustom } from '../../commons/Header';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import styles from './styles/ManageAccessStyles';
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
@@ -75,7 +75,7 @@ const ManageAccessScreen = memo(({ route }) => {
                             // accessibilityLabel={AccessibilityLabel.SIDE_MENU_AVATAR_USER}
                           />
                         ) : (
-                          <AntDesign
+                          <IconOutline
                             name="user"
                             size={20}
                             color={Colors.White}
@@ -90,7 +90,7 @@ const ManageAccessScreen = memo(({ route }) => {
                       subtext={item.schedule}
                       onPress={() => goToGuestInfo(item.id)}
                       rightComponent={
-                        <AntDesign
+                        <IconOutline
                           name="right"
                           size={20}
                           color={Colors.Gray6}

package/src/screens/Notification/index.js

@@ -1,6 +1,6 @@
 import React, { memo, useMemo, useState, useCallback, useEffect } from 'react';
 import { View, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { useFocusEffect } from '@react-navigation/native';
 
 import styles from './styles/indexStyles';
@@ -33,7 +33,7 @@ const Notification = memo(() => {
             notImplemented(t);
           }}
         >
-          <AntDesign name={'plus'} size={27} color={Colors.Black} />
+          <IconOutline name={'plus'} size={27} color={Colors.Black} />
         </TouchableOpacity>
 
         <TouchableOpacity
@@ -41,7 +41,7 @@ const Notification = memo(() => {
             notImplemented(t);
           }}
         >
-          <AntDesign name={'search1'} size={27} color={Colors.Black} />
+          <IconOutline name={'search'} size={27} color={Colors.Black} />
         </TouchableOpacity>
       </View>
     ),

package/src/screens/ScanChipQR/components/QRScan/index.js

@@ -7,7 +7,7 @@ import {
   Dimensions,
   TouchableOpacity,
 } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { RNCamera } from 'react-native-camera';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 import { useTranslations } from '../../../../hooks/Common/useTranslations';
@@ -36,7 +36,7 @@ const VerifyingQRCode = memo(() => {
     <View style={styles.maskOuter}>
       <TouchableOpacity style={[styles.viewVerifying, styles.buttonShadow]}>
         <Loading
-          icon={<AntDesign name={'sync'} color={Colors.Green6} size={16} />}
+          icon={<IconOutline name={'sync'} color={Colors.Green6} size={16} />}
         />
         <Text type={'Body'} style={styles.text}>
           {t('verify_qr_code')}
@@ -117,7 +117,7 @@ const QRScan = ({ isScanReady = true, onScan }) => {
               borderColor={Colors.Gray4}
               style={styles.buttonClose}
             >
-              <AntDesign name={'close'} size={24} co />
+              <IconOutline name={'close'} size={24} co />
             </CircleButton>
             {loading && <VerifyingQRCode />}
           </View>

package/src/screens/SelectUnit/index.js

@@ -1,6 +1,6 @@
 import React, { useMemo, useState, useCallback, useEffect } from 'react';
 import { View, TouchableOpacity, FlatList } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
 import { API, Colors } from '../../configs';
 import Text from '../../commons/Text';
@@ -76,7 +76,7 @@ const SelectUnit = () => {
         isAutomateTab,
         isMultiUnits,
         routeName,
-        unit: selectedItem,
+        multiUnit: selectedItem,
         automateId,
         scriptName,
         oldType,
@@ -132,7 +132,7 @@ const SelectUnit = () => {
         accessibilityLabel={AccessibilityLabel.ICON_CLOSE}
       >
         <View style={styles.buttonClose}>
-          <AntDesign name={'close'} size={24} color={Colors.Black} />
+          <IconOutline name={'close'} size={24} color={Colors.Black} />
         </View>
       </TouchableOpacity>
     ),

package/src/screens/SharedUnit/TabHeader.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { View, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import Text from '../../commons/Text';
@@ -54,7 +54,7 @@ const TabHeader = ({ current, getCurrentTab, showModal, textFilter }) => {
           <Text style={styles.sortBy}>
             {t('sort_by') + ': '} {textFilter}
           </Text>
-          <AntDesign name="arrowdown" size={10} />
+          <IconOutline name="arrowdown" size={10} />
         </TouchableOpacity>
       </View>
     </View>

package/src/screens/Sharing/Components/EndDevice.js

@@ -1,6 +1,6 @@
 import React, { memo, useMemo, useState } from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { Colors } from '../../../configs';
 import styles from './Styles/DeviceItemStyles';
 import { AccessibilityLabel } from '../../../configs/Constants';
@@ -71,11 +71,11 @@ const EndDevice = ({
             {name}
           </Text>
           {checked && (
-            <AntDesign name={'check'} color={Colors.Primary} size={20} />
+            <IconOutline name={'check'} color={Colors.Primary} size={20} />
           )}
 
           {dataConfig.length > 0 && (
-            <AntDesign
+            <IconOutline
               onPress={() => toggleExpandEndDevice()}
               name={isItemExpanded ? 'up' : 'down'}
               size={20}

package/src/screens/Sharing/UnitMemberList.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { useNavigation, useIsFocused } from '@react-navigation/native';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
@@ -83,7 +83,7 @@ const UnitMemberList = ({ route }) => {
       style={styles.rightHeader}
     >
       {isOwner ? (
-        <AntDesign name={'plus'} size={27} color={Colors.Black} />
+        <IconOutline name={'plus'} size={27} color={Colors.Black} />
       ) : (
         <MaterialIcons name={'more-vert'} size={27} color={Colors.Black} />
       )}

package/src/screens/SmartAccount/SuccessfullyConnected/index.js

@@ -1,7 +1,7 @@
 import React, { memo, useCallback, useEffect, useState } from 'react';
 import { View, ScrollView, ActivityIndicator } from 'react-native';
 import { useNavigation, CommonActions } from '@react-navigation/native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 import _TextInput from '../../../commons/Form/TextInput';
 import Text from '../../../commons/Text';
@@ -134,7 +134,7 @@ const SuccessfullyConnected = memo(({ route }) => {
       <View style={styles.wrap}>
         <ScrollView>
           <View style={styles.body}>
-            <AntDesign name="check-circle" size={28} color={Colors.Green6} />
+            <IconOutline name="check-circle" size={28} color={Colors.Green6} />
             <Text bold style={styles.connectingText}>
               {t('successfully_connected')}
             </Text>

package/src/screens/SmartIr/__test__/GroupButtonByType.test.js

@@ -9,8 +9,9 @@ import { AccessibilityLabel } from '../../../configs/Constants';
 import TextInput from '../../../commons/Form/TextInput';
 import { ModalCustom } from '../../../commons/Modal';
 import { TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
@@ -133,7 +134,7 @@ describe('Test GroupButtonByType', () => {
     const icon = instance.find(
       (el) =>
         el.props.accessibilityLabel ===
-          AccessibilityLabel.ICON_OUTLINE_TYPE_RELOAD && el.type === AntDesign
+          AccessibilityLabel.ICON_OUTLINE_TYPE_RELOAD && el.type === IconOutline
     );
     await act(async () => {
       await touch.props.onPress();

package/src/screens/SmartIr/components/GroupButtonByType/GroupButtonByType.js

@@ -5,7 +5,7 @@ import { useTranslations } from '../../../../hooks/Common/useTranslations';
 import SmartTiviActionTemplate from '../../../../commons/ActionGroup/SmartTiviActionTemplate/SmartTiviActionTemplate';
 import Text from '../../../../commons/Text';
 import { ModalCustom } from '../../../../commons/Modal';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { Colors } from '../../../../configs';
 import TextInput from '../../../../commons/Form/TextInput';
@@ -58,7 +58,7 @@ const GroupButtonByType = memo(({ route }) => {
               style={[styles.headerButton]}
               accessibilityLabel={AccessibilityLabel.HEADER_BUTTON_TYPE_RELOAD}
             >
-              <AntDesign
+              <IconOutline
                 name={'reload1'}
                 size={27}
                 color={Colors.Black}

package/src/screens/SmartIr/components/SelectBrand.js

@@ -5,7 +5,7 @@ import { HeaderCustom } from '../../../commons/Header';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import Routes from '../../../utils/Route';
 import { RowItem } from '../../../commons/RowItem';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { Colors } from '../../../configs';
 
 import styles from './SelectBrandStyles';
@@ -47,7 +47,7 @@ const SelectDeviceType = memo(({ route }) => {
                   key={index.toString()}
                   isShowSubText={false}
                   rightComponent={
-                    <AntDesign name="right" size={20} color={Colors.Gray7} />
+                    <IconOutline name="right" size={20} color={Colors.Gray7} />
                   }
                 />
               );

package/src/screens/SubUnit/EditSubUnit.js

@@ -18,7 +18,7 @@ import AlertAction from '../../commons/AlertAction';
 import _TextInput from '../../commons/Form/TextInput';
 import Text from '../../commons/Text';
 import { AccessibilityLabel } from '../../configs/Constants';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { useEmeragencyContacts } from './hooks/useEmergencyContacts';
 import useKeyboardAnimated from '../../hooks/Explore/useKeyboardAnimated';
 import styles from './EditSubUnitStyles';
@@ -207,7 +207,7 @@ const EditSubUnit = ({ route }) => {
                 <Text type={'H4'} color={Colors.Gray9}>
                   {t('emergency_contacts')}
                 </Text>
-                <AntDesign name={'right'} size={20} color={Colors.Gray8} />
+                <IconOutline name={'right'} size={20} color={Colors.Gray8} />
               </TouchableOpacity>
               <Text
                 type={'Body'}

package/src/screens/SubUnit/ManageSubUnit.js

@@ -14,7 +14,7 @@ import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
 import Text from '../../commons/Text';
 
 import styles from './ManageSubUnitStyles';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import Routes from '../../utils/Route';
 import { RowItem } from '../../commons/RowItem';
@@ -54,7 +54,7 @@ const ManageSubUnit = ({ route }) => {
           onPress={addSubUnit}
           style={styles.headerButton}
         >
-          <AntDesign name={'plus'} size={27} color={Colors.Black} />
+          <IconOutline name={'plus'} size={27} color={Colors.Black} />
         </TouchableOpacity>
         <TouchableOpacity
           // onPress={handleShowMenuAction}
@@ -112,7 +112,7 @@ const ManageSubUnit = ({ route }) => {
                       }  devices`}
                       onPress={() => goToEditSubUnit(item, unit)}
                       rightComponent={
-                        <AntDesign
+                        <IconOutline
                           name="right"
                           size={20}
                           color={Colors.Gray6}

package/src/screens/Unit/SelectAddToFavorites.js

@@ -8,7 +8,7 @@ import React, {
 } from 'react';
 import { View, ScrollView, TouchableOpacity } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { HeaderCustom } from '../../commons/Header';
 import Text from '../../commons/Text';
 import NavBar from '../../commons/NavBar';
@@ -142,7 +142,7 @@ const SelectAddToFavorites = memo(({ route }) => {
         style={styles.buttonClose}
         onPress={goBack}
       >
-        <AntDesign name={'close'} size={24} color={Colors.Black} />
+        <IconOutline name={'close'} size={24} color={Colors.Black} />
       </TouchableOpacity>
     ),
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/screens/Unit/SelectAddress.js

@@ -2,7 +2,7 @@ import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { TouchableOpacity, View, ScrollView } from 'react-native';
 import MapView, { Marker, Circle, PROVIDER_GOOGLE } from 'react-native-maps';
 import { useNavigation } from '@react-navigation/native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { check, RESULTS } from 'react-native-permissions';
 import { openPromptEnableLocation } from '../../utils/Setting/Location';
@@ -210,7 +210,7 @@ const SelectAddress = memo(({ route }) => {
               style={styles.button}
               accessibilityLabel={AccessibilityLabel.BUTTON_CHOOSE_ON_MAP}
             >
-              <AntDesign name="enviroment" size={27} color={Colors.Primary} />
+              <IconOutline name="enviroment" size={27} color={Colors.Primary} />
               <Text type="Body" color={Colors.Gray9} style={styles.text} bold>
                 {t('choose_on_map')}
               </Text>
@@ -248,7 +248,7 @@ const SelectAddress = memo(({ route }) => {
               }}
               tracksViewChanges={false}
             >
-              <AntDesign name="enviroment" size={27} color={Colors.Blue10} />
+              <IconOutline name="enviroment" size={27} color={Colors.Blue10} />
             </Marker>
           </>
         )}

package/src/screens/Unit/components/AutomateScript/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, TouchableWithoutFeedback } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { useTranslations } from '../../../../hooks/Common/useTranslations';
 import Text from '../../../../commons/Text';
 import FImage from '../../../../commons/FImage';
@@ -61,7 +61,7 @@ const AutomateScript = ({ automate, onPress, isSelected }) => {
             <Text numberOfLines={1} type={'Label'} color={Colors.Gray7}>
               {t('created_by', { name: author })}
             </Text>
-            <AntDesign name="right" size={12} />
+            <IconOutline name="right" size={12} />
           </View>
         </View>
       </View>

package/src/screens/Unit/components/ButtonWrapper/index.js

@@ -2,7 +2,7 @@ import React, { memo } from 'react';
 import { View, TouchableOpacity, Image } from 'react-native';
 import Text from '../../../../commons/Text';
 import { Colors } from '../../../../configs';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { AccessibilityLabel } from '../../../../configs/Constants';
 import styles from './styles';
 
@@ -46,10 +46,10 @@ const ButtonWrapper = ({
             <Image source={{ uri: value }} style={styles.avatar} />
           ) : (
             <View style={styles.avatar}>
-              <AntDesign name={'user'} size={27} />
+              <IconOutline name={'user'} size={27} />
             </View>
           )}
-          <AntDesign name="right" size={20} color={Colors.Gray7} />
+          <IconOutline name="right" size={20} color={Colors.Gray7} />
         </View>
       </View>
       {children}

package/src/screens/Unit/components/Header/index.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useRef, useState } from 'react';
 import { Dimensions, View, TouchableOpacity, StyleSheet } from 'react-native';
 import Popover from '../../../../commons/Popover';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { useTranslations } from '../../../../hooks/Common/useTranslations';
 
@@ -98,7 +98,7 @@ const HeaderComponent = ({ title, goBack, dark, hideRight, style }) => {
                 onPress={() => setShowModal(true)}
                 style={styles.rightHeader}
               >
-                <AntDesign
+                <IconOutline
                   name="plus"
                   size={32}
                   color={dark ? Colors.Black : Colors.White}

package/src/screens/Unit/components/SharedUnit/index.js

@@ -1,7 +1,7 @@
 import React, { Fragment, useCallback } from 'react';
 import { View, Image, TouchableOpacity } from 'react-native';
 import { useTranslations } from '../../../../hooks/Common/useTranslations';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconFill, IconOutline } from '@ant-design/icons-react-native';
 
 import { API, Colors, Images } from '../../../../configs';
 import Text from '../../../../commons/Text';
@@ -88,7 +88,7 @@ const SharedUnit = ({
         {isOptions && (
           <Fragment>
             {item.is_pin ? (
-              <AntDesign
+              <IconOutline
                 name="pushpin"
                 size={20}
                 color={Colors.Blue10}
@@ -98,7 +98,7 @@ const SharedUnit = ({
                 }
               />
             ) : (
-              <AntDesign
+              <IconOutline
                 name="pushpin"
                 size={20}
                 onPress={addPinSharedUnit}
@@ -106,7 +106,7 @@ const SharedUnit = ({
               />
             )}
             {item.is_star ? (
-              <AntDesign
+              <IconFill
                 name="star"
                 size={20}
                 color={Colors.Yellow6}
@@ -116,7 +116,7 @@ const SharedUnit = ({
                 }
               />
             ) : (
-              <AntDesign
+              <IconOutline
                 name="star"
                 size={20}
                 onPress={addStarSharedUnit}

package/src/screens/UnitSummary/components/AirQuality/index.js

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useMemo, useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
 import styles from './styles';
@@ -80,7 +80,7 @@ const AirQuality = memo(({ summaryDetail }) => {
             <View
               style={[styles.boxEmotion, { backgroundColor: outdoorColor }]}
             >
-              <AntDesign name={outdoorIcon} size={35} />
+              <IconOutline name={outdoorIcon} size={35} />
             </View>
             <View
               style={[

package/src/screens/UnitSummary/components/WaterQuality/Item/index.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { useNavigation } from '@react-navigation/native';
 
 import Text from '../../../../../commons/Text';
@@ -23,7 +23,7 @@ const Item = memo(({ id, svgMain, title, measure, des, color, waterType }) => {
         <Text>{title}</Text>
         {waterType && (
           <TouchableOpacity onPress={goToDetail} style={styles.buttonInfo}>
-            <AntDesign
+            <IconOutline
               style={styles.row}
               name="infocirlceo"
               size={20}

package/src/screens/UnitSummary/index.js

@@ -2,7 +2,7 @@ import React, { memo, useCallback, useEffect, useState } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import moment from 'moment';
 
 import { useTranslations } from '../../hooks/Common/useTranslations';
@@ -168,8 +168,8 @@ const UnitSummary = memo(({ route }) => {
                 accessibilityLabel={AccessibilityLabel.UNIT_SUMMARY_GUIDE_TOUCH}
                 onPress={() => navigation.navigate(GuideName)}
               >
-                <AntDesign
-                  name={'infocirlceo'}
+                <IconOutline
+                  name="info-circle"
                   size={25}
                   color={Colors.Black}
                 />

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

@@ -1320,6 +1320,8 @@ export default {
   smart_supplier: 'Nhà Cung Cấp Thông Minh',
   text_email_or_phone_number: 'Email hoặc Số điện thoại',
   enter_password: 'Mật khẩu',
+  you_need_to_enter_password:
+    'Bạn cần nhập mật khẩu để xác nhận yêu cầu của mình',
   connecting_smart_account: 'Đang kết nối tài khoản',
   warning_connecting_smart_account:
     'Đừng tắt thiết bị hoặc đóng ứng dụng này trong quá trình thiết lập. Quá trình thiết lập có thể mất vài ' +