@eohjsc/react-native-smart-city 0.2.59 → 0.2.63

package/src/screens/MoveToAnotherSubUnit/styles/MoveToAnotherSubUnitStyles.js

@@ -0,0 +1,50 @@
+import { Colors } from '../../../configs';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    paddingHorizontal: 16,
+  },
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  rowSubUnit: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  wrapText: {
+    flex: 1,
+    marginRight: 24,
+    marginLeft: 16,
+    paddingVertical: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.Gray4,
+  },
+  content: {
+    margin: 16,
+  },
+  textLeft: {
+    borderColor: Colors.Gray9,
+    fontWeight: 'bold',
+    fontSize: 16,
+  },
+  textRight: {
+    borderColor: Colors.Gray7,
+    fontSize: 14,
+  },
+  separator: {
+    height: 1,
+    width: '100%',
+    borderBottomWidth: 1,
+    borderColor: Colors.Gray4,
+    marginBottom: 16,
+  },
+  bottomButtonView: {
+    paddingTop: 24,
+    paddingBottom: 32,
+    backgroundColor: Colors.White,
+    borderColor: Colors.ShadownTransparent,
+    borderTopWidth: 1,
+  },
+});

package/src/screens/ScriptDetail/Styles/indexStyles.js

@@ -151,7 +151,6 @@ export default StyleSheet.create({
     borderBottomWidth: 2,
     borderBottomColor: Colors.Primary,
     fontSize: 16,
-    lineHeight: 24,
     color: Colors.Gray9,
   },
   titleItem: {

package/src/screens/ScriptDetail/index.js

@@ -492,6 +492,7 @@ const ScriptDetail = ({ route }) => {
             onChange={(text) => setInputName(text)}
             defaultValue={scriptName}
             textInputStyle={styles.textInput}
+            maxLength={64}
           />
         )}
       </AlertAction>

package/src/screens/SubUnit/AddSubUnit.js

@@ -29,11 +29,11 @@ import styles from './AddSubUnitStyles';
 const MAX_FILE_SIZE_BYTES = 1.5 * 1024 * 1024; // 1.5mb
 
 const prepareImageToUpload = async (image) => {
-  if (!image || image.fileSize < MAX_FILE_SIZE_BYTES) {
+  if (!image || image.size < MAX_FILE_SIZE_BYTES) {
     return image;
   }
   const result = await ImageResizer.createResizedImage(
-    image.uri,
+    image.path,
     1280,
     1280,
     'JPEG',
@@ -214,7 +214,7 @@ const AddSubUnit = ({ route }) => {
                   </Text>
                   {wallpaper ? (
                     <Image
-                      source={{ uri: wallpaper.uri }}
+                      source={{ uri: wallpaper.uri || wallpaper.path }}
                       style={styles.wallpaper}
                     />
                   ) : (

package/src/screens/SubUnit/AddSubUnitStyles.js

@@ -33,8 +33,6 @@ export default StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: Colors.Primary,
     paddingLeft: 0,
-    fontSize: 16,
-    lineHeight: 24,
     margin: 0,
     padding: 0,
   },

package/src/screens/SubUnit/EditSubUnit.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
-import { Colors, API, Device } from '../../configs';
+import { Colors, API } from '../../configs';
 import { ToastBottomHelper } from '../../utils/Utils';
 import {
   axiosPatch,
@@ -84,9 +84,11 @@ const EditSubUnit = ({ route }) => {
     },
     [unit.id, station.id, t]
   );
+
   const updateBackground = useCallback(
     async (headers) => {
-      const formData = createFormData(imageUrl, ['background']);
+      const formData = createFormData({ background: imageUrl }, ['background']);
+
       const { success } = await axiosPatch(
         API.SUB_UNIT.MANAGE_SUB_UNIT(unit.id, station.id),
         formData,
@@ -146,9 +148,9 @@ const EditSubUnit = ({ route }) => {
   const options = {
     mediaType: 'photo',
     maxWidth: 1024,
-    quality: 0.8,
-    includeBase64: Device.isIOS,
-    saveToPhotos: true,
+    compressImageMaxWidth: 1280,
+    compressImageMaxHeight: 720,
+    compressImageQuality: 0.8,
   };
 
   const contactsName = listContacts.map((item) => item.name);
@@ -193,7 +195,7 @@ const EditSubUnit = ({ route }) => {
               <Image
                 style={styles.image}
                 source={{
-                  uri: resourcePath.uri,
+                  uri: resourcePath.uri || resourcePath.path,
                 }}
                 resizeMode="cover"
               />
@@ -231,7 +233,14 @@ const EditSubUnit = ({ route }) => {
             onPress={onPressRemove}
             style={styles.removeButton}
           >
-            <Text style={styles.removeText}>{t('remove_sub_unit')}</Text>
+            <Text
+              type={'H4'}
+              semibold
+              color={Colors.Red}
+              style={styles.removeText}
+            >
+              {t('remove_sub_unit')}
+            </Text>
           </TouchableOpacity>
         </View>
       </View>

package/src/screens/SubUnit/EditSubUnitStyles.js

@@ -46,9 +46,8 @@ export default StyleSheet.create({
     paddingBottom: 16 + getBottomSpace(),
   },
   removeText: {
-    fontSize: 16,
-    lineHeight: 24,
-    color: Colors.Gray6,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.Red,
   },
   backgroundContainer: {
     alignItems: 'center',

package/src/screens/SubUnit/__test__/EditSubUnit.test.js

@@ -381,7 +381,7 @@ describe('Test EditSubUnit', () => {
     const imagePicker = instance.findByType(ImagePicker);
     const image = instance.findByType(Image);
     expect(image.props.source).toEqual({
-      uri: '',
+      uri: undefined,
     });
     await act(async () => {
       await imagePicker.props.setImageUrl({ uri: 'path' });
@@ -413,7 +413,7 @@ describe('Test EditSubUnit', () => {
     const imagePicker = instance.findByType(ImagePicker);
     const image = instance.findByType(Image);
     expect(image.props.source).toEqual({
-      uri: '',
+      uri: undefined,
     });
     await act(async () => {
       await imagePicker.props.setImageUrl({ uri: 'path' });

package/src/screens/TDSGuide/index.js

@@ -9,7 +9,7 @@ import useTitleHeader from '../../hooks/Common/useTitleHeader';
 
 const TDSGuide = memo(() => {
   const t = useTranslations();
-  useTitleHeader(t('tds_infomation'));
+  useTitleHeader(t('tds_information'));
 
   return (
     <View style={styles.container}>

package/src/screens/Unit/ChooseLocation.js

@@ -3,15 +3,14 @@ import React, { memo, useCallback, useRef, useState } from 'react';
 import { View } from 'react-native';
 import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
 import { useNavigation } from '@react-navigation/native';
-import { IconFill, IconOutline } from '@ant-design/icons-react-native';
-
+import MarkerGeolocation from '../../../assets/images/Map/MarkerGeolocation.svg';
 import BottomButtonView from '../../commons/BottomButtonView';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 navigator.geolocation = require('@react-native-community/geolocation');
 
 import styles from './ChooseLocationStyles';
-import { API, Colors } from '../../configs';
+import { API } from '../../configs';
 import { axiosGet } from '../../utils/Apis/axios';
 import { SCConfig } from '../../configs';
 
@@ -81,10 +80,7 @@ const ChooseLocation = memo(({ route }) => {
         onRegionChangeComplete={onRegionChange}
       />
       <View style={styles.wrapMarker}>
-        <>
-          <IconFill name="environment" size={27} color={Colors.Blue10} />
-          <IconOutline name="close" size={14} color={Colors.Gray9} />
-        </>
+        <MarkerGeolocation />
       </View>
       <BottomButtonView
         rowButton

package/src/screens/Unit/ChooseLocationStyles.js

@@ -16,14 +16,11 @@ export default StyleSheet.create({
     backgroundColor: Colors.White,
   },
   wrapMarker: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
+    zIndex: 3,
     position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    paddingBottom: 24,
+    marginTop: -37,
+    marginLeft: -11,
+    left: '50%',
+    top: '50%',
   },
 });

package/src/screens/Unit/Detail.js

@@ -39,7 +39,7 @@ const UnitDetail = ({ route }) => {
   const [appState, setAppState] = useState(AppState.currentState);
   const [listMenuItem, setListMenuItem] = useState([]);
   const [listStation, setListStation] = useState([]);
-  const [oneTap, setOneTap] = useState([]);
+  const [listAutomate, setListAutomate] = useState([]);
   const [favorites, setFavorites] = useState({
     devices: [],
     automates: [],
@@ -106,12 +106,23 @@ const UnitDetail = ({ route }) => {
     await fetchWithCache(
       API.UNIT.AUTOMATE(unitId),
       {
-        params: { type: AUTOMATE_TYPE.ONE_TAP },
+        params: { type: AUTOMATE_TYPE.ALL },
       },
       (response) => {
         const { success, data } = response;
         if (success) {
-          setOneTap([...data]);
+          setListAutomate([
+            {
+              text: t(AUTOMATE_TYPE.SCENARIO),
+              data: data.filter((item) => item.type === AUTOMATE_TYPE.ONE_TAP),
+              type: AUTOMATE_TYPE.ONE_TAP,
+            },
+            {
+              text: t(AUTOMATE_TYPE.AUTOMATION),
+              data: data.filter((item) => item.type !== AUTOMATE_TYPE.ONE_TAP),
+              type: AUTOMATE_TYPE.AUTOMATION,
+            },
+          ]);
           setFavorites((prevData) => ({
             ...prevData,
             automates: data.filter((item) => item.script.is_star),
@@ -119,7 +130,7 @@ const UnitDetail = ({ route }) => {
         }
       }
     );
-  }, [unitId]);
+  }, [t, unitId]);
 
   const onRefresh = useCallback(() => {
     fetchDetails();
@@ -264,8 +275,7 @@ const UnitDetail = ({ route }) => {
       return (
         <SubUnitAutomate
           isOwner={isOwner}
-          type={AUTOMATE_TYPE.ONE_TAP}
-          automates={oneTap}
+          listAutomate={listAutomate}
           unit={unit}
           wrapItemStyle={styles.wrapItemStyle}
         />

package/src/screens/Unit/ManageUnit.js

@@ -3,14 +3,10 @@ import { View, TouchableOpacity, Image, Platform } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
-import { Colors, API, Device, Images } from '../../configs';
+import { Colors, API, Images } from '../../configs';
 import Routes from '../../utils/Route';
 import { ToastBottomHelper } from '../../utils/Utils';
-import {
-  createFormData,
-  axiosPatch,
-  axiosDelete,
-} from '../../utils/Apis/axios';
+import { createFormData, axiosPatch } from '../../utils/Apis/axios';
 import useBoolean from '../../hooks/Common/useBoolean';
 import useKeyboardAnimated from '../../hooks/Explore/useKeyboardAnimated';
 
@@ -77,8 +73,8 @@ const ManageUnit = ({ route }) => {
   const [showImagePicker, setShowImagePicker] = useState(false);
 
   const updateUnit = useCallback(
-    async (bodyData, headers) => {
-      const formData = createFormData(bodyData, ['background']);
+    async (headers) => {
+      const formData = createFormData({ background: imageUrl }, ['background']);
 
       const { success, data } = await axiosPatch(
         API.UNIT.MANAGE_UNIT(unit.id),
@@ -90,7 +86,7 @@ const ManageUnit = ({ route }) => {
         ToastBottomHelper.success(t('unit_updated_successfully'));
       }
     },
-    [unit.id, t]
+    [unit.id, t, imageUrl]
   );
 
   const updateLocation = useCallback(
@@ -120,24 +116,22 @@ const ManageUnit = ({ route }) => {
 
   useEffect(() => {
     if (imageUrl) {
-      updateUnit(
-        { background: imageUrl },
-        {
-          headers: { 'Content-Type': 'multipart/form-data' },
-        }
-      );
+      updateUnit({
+        headers: { 'Content-Type': 'multipart/form-data' },
+      });
     }
   }, [imageUrl, updateUnit]);
 
   const [showRemove, setshowRemove, setHideRemove] = useBoolean();
   const goRemove = useCallback(async () => {
-    const { success } = await axiosDelete(API.UNIT.MANAGE_UNIT(unit.id));
-    if (success) {
-      setHideRemove(true);
-      ToastBottomHelper.success(t('unit_deleted_successfully'));
-      navigation.navigate(Routes.Dashboard);
-    }
-  }, [unit.id, setHideRemove, t, navigation]);
+    navigation.navigate(Routes.UnitStack, {
+      screen: Routes.ConfirmUnitDeletion,
+      params: {
+        unit,
+      },
+    });
+    setHideRemove(true);
+  }, [setHideRemove, navigation, unit]);
 
   const goToManageSubUnit = useCallback(() => {
     navigation.navigate(Routes.UnitStack, {
@@ -158,9 +152,9 @@ const ManageUnit = ({ route }) => {
   const options = {
     mediaType: 'photo',
     maxWidth: 1024,
-    quality: 0.8,
-    includeBase64: Device.isIOS,
-    saveToPhotos: true,
+    compressImageMaxWidth: 1280,
+    compressImageMaxHeight: 720,
+    compressImageQuality: 0.8,
   };
 
   return (
@@ -202,7 +196,7 @@ const ManageUnit = ({ route }) => {
                 <View style={styles.boxImage}>
                   <Image
                     source={{
-                      uri: unit.background,
+                      uri: unitData.background,
                     }}
                     borderRadius={10}
                     style={styles.image}

package/src/screens/Unit/SmartAccount.js

@@ -7,17 +7,16 @@ import React, {
   useState,
   memo,
 } from 'react';
-import { View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import styles from './SmartAccountStyles';
 import { API, Colors } from '../../configs';
 import Routes from '../../utils/Route';
 import { useNavigation } from '@react-navigation/native';
 import { axiosDelete, axiosGet } from '../../utils/Apis/axios';
 import { SmartAccountItem } from './SmartAccountItem';
-import { usePopover, useBoolean } from '../../hooks/Common';
-import { AlertAction, MenuActionMore } from '../../commons';
+import { usePopover } from '../../hooks/Common';
+import { MenuActionMore } from '../../commons';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import { useStateAlertRemove } from '../Unit/hook/useStateAlertRemove';
 
 const ListSmartAccount = ({ route }) => {
   const { unitId } = route?.params || {};
@@ -38,10 +37,6 @@ const ListSmartAccount = ({ route }) => {
   const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
     usePopover();
 
-  const [lockShowing, acquireLockShowing, releaseLockShowing] = useBoolean();
-  const { stateAlertRemove, onShowRemoveAlert, hideAlertAction } =
-    useStateAlertRemove();
-
   useEffect(() => {
     getAllSmartAccounts();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -55,21 +50,7 @@ const ListSmartAccount = ({ route }) => {
     [showPopoverWithRef]
   );
 
-  const onItemClick = useCallback(
-    (item) => {
-      if (!smartAccountRef?.current) {
-        return;
-      }
-      if (item.action === 'delete') {
-        acquireLockShowing();
-        onShowRemoveAlert(smartAccountRef.current.brand)();
-      }
-    },
-    [acquireLockShowing, onShowRemoveAlert]
-  );
-
   const deleteSmartAccount = useCallback(async () => {
-    hideAlertAction();
     if (!smartAccountRef?.current) {
       return;
     }
@@ -78,10 +59,22 @@ const ListSmartAccount = ({ route }) => {
       API.SMART_ACCOUNT.REMOVE_SMART_ACCOUNT(id)
     );
     success && getAllSmartAccounts();
-  }, [hideAlertAction, getAllSmartAccounts]);
+  }, [getAllSmartAccounts]);
+
+  const onItemClick = useCallback(
+    (item) => {
+      if (!smartAccountRef?.current) {
+        return;
+      }
+      if (item.action === 'remove') {
+        deleteSmartAccount();
+      }
+    },
+    [deleteSmartAccount]
+  );
 
   const listMenuItem = useMemo(() => {
-    return [{ action: 'delete', text: t('delete') }];
+    return [{ action: 'remove', text: t('remove_account') }];
   }, [t]);
 
   const gotoSmartAccountDetail = useCallback(
@@ -104,33 +97,24 @@ const ListSmartAccount = ({ route }) => {
         headerAniStyle={styles.headerAniStyle}
       >
         <View style={styles.wrapContent}>
-          {data.map((item) => {
+          {data.map((item, index) => {
             return (
-              <SmartAccountItem
-                gotoSmartAccountDetail={gotoSmartAccountDetail}
-                item={item}
-                onShowMenuMore={onShowMenuMore}
-              />
+              <TouchableOpacity key={index}>
+                <SmartAccountItem
+                  gotoSmartAccountDetail={gotoSmartAccountDetail}
+                  item={item}
+                  onShowMenuMore={onShowMenuMore}
+                />
+              </TouchableOpacity>
             );
           })}
         </View>
-        <AlertAction
-          visible={stateAlertRemove.visible && !lockShowing}
-          hideModal={hideAlertAction}
-          title={stateAlertRemove.title}
-          message={stateAlertRemove.message}
-          leftButtonTitle={stateAlertRemove.leftButton}
-          leftButtonClick={hideAlertAction}
-          rightButtonTitle={stateAlertRemove.rightButton}
-          rightButtonClick={deleteSmartAccount}
-        />
         <MenuActionMore
           isVisible={showingPopover}
           hideMore={hidePopover}
           listMenuItem={listMenuItem}
           childRef={childRef}
           onItemClick={onItemClick}
-          hideComplete={releaseLockShowing}
         />
       </WrapHeaderScrollable>
     </View>

package/src/screens/Unit/SmartAccountItem.js

@@ -23,6 +23,7 @@ export const SmartAccountItem = memo(
         <TouchableOpacity
           style={styles.wrapText}
           onPress={onPressGotoSmartAccountDetail}
+          testID={TESTID.SMART_ACCOUNT_ITEM}
         >
           <FImage
             source={{ uri: item?.logo }}
@@ -39,7 +40,7 @@ export const SmartAccountItem = memo(
           </View>
         </TouchableOpacity>
         <TouchableOpacity
-          testID={TESTID.ITEM_QUICK_ACTION_PRESS}
+          testID={TESTID.SMART_ACCOUNT_ITEM_PRESSMORE}
           onPress={onPressMore}
           ref={buttonMoreRef}
         >

package/src/screens/Unit/SmartAccountStyles.js

@@ -26,7 +26,6 @@ export default StyleSheet.create({
   },
   wrapText: {
     flexDirection: 'row',
-    alignItems: 'space-around',
   },
   icon: {
     width: 48,

package/src/screens/Unit/__test__/ManageUnit.test.js

@@ -3,7 +3,6 @@ import { act, create } from 'react-test-renderer';
 import axios from 'axios';
 
 import { ToastBottomHelper } from '../../../utils/Utils';
-import API from '../../../configs/API';
 import { TESTID } from '../../../configs/Constants';
 
 import ManageUnit from '../ManageUnit';
@@ -131,7 +130,6 @@ describe('Test Manage Unit', () => {
   });
 
   test('remove Unit success', async () => {
-    const spyToast = jest.spyOn(ToastBottomHelper, 'success');
     await act(async () => {
       tree = create(wrapComponent(route));
     });
@@ -165,11 +163,7 @@ describe('Test Manage Unit', () => {
       await bottomButton.props.onPress();
     });
 
-    expect(axios.delete).toBeCalledWith(API.UNIT.MANAGE_UNIT(1));
     expect(mockedDispatch).not.toBeCalled();
-    expect(spyToast).toBeCalled();
-    spyToast.mockReset();
-    spyToast.mockRestore();
   });
 
   test('rename Unit sucess', async () => {

package/src/screens/Unit/__test__/SmartAccount.test.js

@@ -6,6 +6,7 @@ import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import ListSmartAccount from '../SmartAccount';
 import { SmartAccountItem } from '../SmartAccountItem';
+import { MenuActionMore } from '../../../commons';
 
 const wrapComponent = (route, navigation) => (
   <SCProvider initState={mockSCStore({})}>
@@ -13,6 +14,17 @@ const wrapComponent = (route, navigation) => (
   </SCProvider>
 );
 
+const mockedNavigate = jest.fn();
+
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      goBack: mockedNavigate,
+    }),
+  };
+});
+
 jest.mock('react', () => {
   return {
     ...jest.requireActual('react'),
@@ -55,4 +67,16 @@ describe('Test SmartAccount', () => {
     const smartAccountItem = instance.findAllByType(SmartAccountItem);
     expect(smartAccountItem.length).toEqual(3);
   });
+
+  test('test render SmartAccountItem', async () => {
+    await act(async () => {
+      tree = await renderer.create(wrapComponent());
+    });
+    const instance = tree.root;
+    const menuActionMore = instance.findByType(MenuActionMore);
+    await act(async () => {
+      menuActionMore.props.onItemClick();
+    });
+    expect(menuActionMore.props.isVisible).toEqual(false);
+  });
 });