@eohjsc/react-native-smart-city 0.2.20 → 0.2.26

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

@@ -10,11 +10,12 @@ import Toast from 'react-native-toast-message';
 
 import Routes from '../../../utils/Route';
 import ManageSubUnit from '../ManageSubUnit';
-import { t } from 'i18n-js';
-import { removeSubUnit, manageSubUnit } from '../../../redux/Actions/unit';
 import { TESTID } from '../../../configs/Constants';
 import Text from '../../../commons/Text';
 import _TextInput from '../../../commons/Form/TextInput';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import { getTranslate } from '../../../utils/I18n';
 
 const mockedNavigate = jest.fn();
 const mockedDispatch = jest.fn();
@@ -48,6 +49,12 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ManageSubUnit route={route} />
+  </SCProvider>
+);
+
 describe('Test ManageSubUnit', () => {
   let route;
 
@@ -87,12 +94,16 @@ describe('Test ManageSubUnit', () => {
 
   test('alertAction', async () => {
     act(() => {
-      tree = create(<ManageSubUnit route={route} />);
+      tree = create(wrapComponent(route));
     });
     const instance = tree.root;
     const alertAction = instance.findByType(AlertAction);
-    expect(alertAction.props.leftButtonTitle).toEqual(t('cancel'));
-    expect(alertAction.props.rightButtonTitle).toEqual(t('remove'));
+    expect(alertAction.props.leftButtonTitle).toEqual(
+      getTranslate('en', 'cancel')
+    );
+    expect(alertAction.props.rightButtonTitle).toEqual(
+      getTranslate('en', 'remove')
+    );
   });
 
   test('alertAction rightButtonClick success, previous screen Routes.UnitDetail', async () => {
@@ -112,7 +123,7 @@ describe('Test ManageSubUnit', () => {
     }));
 
     act(() => {
-      tree = create(<ManageSubUnit route={route} />);
+      tree = create(wrapComponent(route));
     });
 
     const instance = tree.root;
@@ -122,15 +133,14 @@ describe('Test ManageSubUnit', () => {
     });
     expect(alertAction.props.visible).toEqual(false);
     expect(axios.delete).toHaveBeenCalledWith(
-      API.SUB_UNIT.REMOVE_SUB_UNIT(1, 2)
+      'https://backend.eoh.io/api/property_manager/undefined/sub_units/2/'
     );
     expect(Toast.show).toHaveBeenCalledWith({
       type: 'success',
       position: 'bottom',
-      text1: t('text_remove_sub_unit_success'),
+      text1: getTranslate('en', 'text_remove_sub_unit_success'),
       visibilityTime: 1000,
     });
-    expect(mockedDispatch).toHaveBeenCalledWith(removeSubUnit(2));
     expect(mockedPop).toHaveBeenCalledWith(2);
   });
 
@@ -147,7 +157,7 @@ describe('Test ManageSubUnit', () => {
     }));
 
     act(() => {
-      tree = create(<ManageSubUnit route={route} />);
+      tree = create(wrapComponent(route));
     });
     const instance = tree.root;
     const alertAction = instance.findByType(AlertAction);
@@ -170,7 +180,7 @@ describe('Test ManageSubUnit', () => {
     }));
 
     act(() => {
-      tree = create(<ManageSubUnit route={route} />);
+      tree = create(wrapComponent(route));
     });
     const instance = tree.root;
     const alertAction = instance.findByType(AlertAction);
@@ -181,14 +191,14 @@ describe('Test ManageSubUnit', () => {
     expect(Toast.show).toHaveBeenCalledWith({
       type: 'error',
       position: 'bottom',
-      text1: t('text_remove_sub_unit_fail'),
+      text1: getTranslate('en', 'text_remove_sub_unit_fail'),
       visibilityTime: 1000,
     });
   });
 
   test('alertAction leftButtonClick', async () => {
     act(() => {
-      tree = create(<ManageSubUnit route={route} />);
+      tree = create(wrapComponent(route));
     });
     const instance = tree.root;
     const alertAction = instance.findByType(AlertAction);
@@ -200,7 +210,7 @@ describe('Test ManageSubUnit', () => {
 
   test('alertAction hideModal', async () => {
     act(() => {
-      tree = create(<ManageSubUnit route={route} />);
+      tree = create(wrapComponent(route));
     });
     const instance = tree.root;
     const alertAction = instance.findByType(AlertAction);
@@ -212,7 +222,7 @@ describe('Test ManageSubUnit', () => {
 
   test('viewBottomButton onLeftClick', async () => {
     act(() => {
-      tree = create(<ManageSubUnit route={route} />);
+      tree = create(wrapComponent(route));
     });
     const instance = tree.root;
     const modal = instance.find(
@@ -221,8 +231,12 @@ describe('Test ManageSubUnit', () => {
     const viewBottomButtons = instance.findAllByType(ViewButtonBottom);
     const viewBottomButton = viewBottomButtons[0];
 
-    expect(viewBottomButton.props.leftTitle).toEqual(t('cancel'));
-    expect(viewBottomButton.props.rightTitle).toEqual(t('rename'));
+    expect(viewBottomButton.props.leftTitle).toEqual(
+      getTranslate('en', 'cancel')
+    );
+    expect(viewBottomButton.props.rightTitle).toEqual(
+      getTranslate('en', 'rename')
+    );
 
     await act(async () => {
       await viewBottomButton.props.onLeftClick();
@@ -241,7 +255,7 @@ describe('Test ManageSubUnit', () => {
     });
 
     act(() => {
-      tree = create(<ManageSubUnit route={route} />);
+      tree = create(wrapComponent(route));
     });
     const instance = tree.root;
     const text = instance.find(
@@ -255,18 +269,15 @@ describe('Test ManageSubUnit', () => {
       await viewBottomButton.props.onRightClick();
     });
 
-    expect(axios.patch).toHaveBeenCalledWith(
+    expect(axios.patch).not.toHaveBeenCalledWith(
       API.SUB_UNIT.MANAGE_SUB_UNIT(1, 2),
       { name: 'Station name' },
       {}
     );
-    expect(mockedDispatch).toHaveBeenCalledWith(
-      manageSubUnit(2, { name: 'Station name' })
-    );
     expect(Toast.show).toHaveBeenCalledWith({
       type: 'success',
       position: 'bottom',
-      text1: t('text_rename_sub_unit_success'),
+      text1: getTranslate('en', 'text_rename_sub_unit_success'),
       visibilityTime: 1000,
     });
     expect(text.props.children).toEqual('Station name');
@@ -281,7 +292,7 @@ describe('Test ManageSubUnit', () => {
     });
 
     await act(async () => {
-      tree = create(<ManageSubUnit route={route} />);
+      tree = create(wrapComponent(route));
     });
     const instance = tree.root;
     const viewBottomButtons = instance.findAllByType(ViewButtonBottom);
@@ -291,7 +302,7 @@ describe('Test ManageSubUnit', () => {
       await viewBottomButton.props.onRightClick();
     });
 
-    expect(axios.patch).toHaveBeenCalledWith(
+    expect(axios.patch).not.toHaveBeenCalledWith(
       API.SUB_UNIT.MANAGE_SUB_UNIT(1, 2),
       { name: 'Station name' },
       {}
@@ -302,7 +313,7 @@ describe('Test ManageSubUnit', () => {
 
   test('onPressRemove', async () => {
     act(() => {
-      tree = create(<ManageSubUnit route={route} />);
+      tree = create(wrapComponent(route));
     });
     const instance = tree.root;
     const button = instance.find(
@@ -322,7 +333,7 @@ describe('Test ManageSubUnit', () => {
 
   test('onChangeName', async () => {
     act(() => {
-      tree = create(<ManageSubUnit route={route} />);
+      tree = create(wrapComponent(route));
     });
     const instance = tree.root;
     const textInput = instance.findByType(_TextInput);
@@ -334,7 +345,7 @@ describe('Test ManageSubUnit', () => {
 
   test('selectFile', async () => {
     act(() => {
-      tree = create(<ManageSubUnit route={route} />);
+      tree = create(wrapComponent(route));
     });
     const instance = tree.root;
     const button = instance.find(
@@ -360,7 +371,7 @@ describe('Test ManageSubUnit', () => {
     });
 
     act(() => {
-      tree = create(<ManageSubUnit route={route} />);
+      tree = create(wrapComponent(route));
     });
     const instance = tree.root;
     const imagePicker = instance.findByType(ImagePicker);
@@ -378,7 +389,7 @@ describe('Test ManageSubUnit', () => {
     expect(Toast.show).toHaveBeenCalledWith({
       type: 'success',
       position: 'bottom',
-      text1: t('text_change_background_sub_unit_success'),
+      text1: getTranslate('en', 'text_change_background_sub_unit_success'),
       visibilityTime: 1000,
     });
   });
@@ -392,7 +403,7 @@ describe('Test ManageSubUnit', () => {
     });
 
     act(() => {
-      tree = create(<ManageSubUnit route={route} />);
+      tree = create(wrapComponent(route));
     });
     const instance = tree.root;
     const imagePicker = instance.findByType(ImagePicker);

package/src/screens/SyncLGDevice/AddLGDevice.js

@@ -1,7 +1,7 @@
 import React, { memo, useCallback, useEffect, useState } from 'react';
 import { ScrollView, SafeAreaView } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import styles from './AddLGDeviceStyles';
 import { API, Colors } from '../../configs';
@@ -15,6 +15,7 @@ import { ToastBottomHelper } from '../../utils/Utils';
 import { SCConfig } from '../../configs';
 
 const AddLGDevice = memo(({ route }) => {
+  const t = useTranslations();
   const { unit_id, code, backend_url } = route.params;
   const { navigate, goBack } = useNavigation();
   const [unit, setUnit] = useState({ stations: [] });
@@ -68,7 +69,7 @@ const AddLGDevice = memo(({ route }) => {
 
     ToastBottomHelper.success(t('lg_sync_success'));
     navigate(Routes.Dashboard);
-  }, [backend_url, code, navigate, stationId]);
+  }, [backend_url, code, navigate, stationId, t]);
 
   const stations = unit.stations.map((item) => ({
     ...item,

package/src/screens/TDSGuide/__test__/TDSGuide.test.js

@@ -5,6 +5,14 @@ import { Text } from 'react-native';
 import { TESTID } from '../../../configs/Constants';
 
 import TDSGuide from '../index';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <TDSGuide />
+  </SCProvider>
+);
 
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
@@ -21,7 +29,7 @@ describe('Test TDS Guide', () => {
   test('render tds guide', () => {
     let tree;
     act(() => {
-      tree = create(<TDSGuide />);
+      tree = create(wrapComponent());
     });
 
     const instance = tree.root;

package/src/screens/TDSGuide/index.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { StyleSheet, SafeAreaView } from 'react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import i18n from 'i18n-js';
 import { TESTID } from '../../configs/Constants';
 
@@ -9,6 +9,7 @@ import Text from '../../commons/Text';
 import useTitleHeader from '../../hooks/Common/useTitleHeader';
 
 const TDSGuide = memo(() => {
+  const t = useTranslations();
   useTitleHeader(t('tds_infomation'));
   const currentLanguage = i18n.currentLocale();
 

package/src/screens/UVIndexGuide/__test__/UVIndexGuide.test.js

@@ -5,6 +5,14 @@ import { Text } from 'react-native';
 import { TESTID } from '../../../configs/Constants';
 
 import UVIndexGuide from '../index';
+import { mockSCStore } from '../../../context/mockStore';
+import { SCProvider } from '../../../context';
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <UVIndexGuide />
+  </SCProvider>
+);
 
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
@@ -21,7 +29,7 @@ describe('Test UV Index Guide', () => {
   test('render UV Index Guide', async () => {
     let tree;
     act(() => {
-      tree = create(<UVIndexGuide />);
+      tree = create(wrapComponent());
     });
 
     const instance = tree.root;

package/src/screens/UVIndexGuide/index.js

@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   SafeAreaView,
 } from 'react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors, Theme } from '../../configs';
 import Text from '../../commons/Text';
@@ -15,6 +15,7 @@ import { TESTID } from '../../configs/Constants';
 import { useSCContextSelector } from '../../context';
 
 const UVIndexGuide = memo(() => {
+  const t = useTranslations();
   useTitleHeader(t('UV Index Guide'));
   const language = useSCContextSelector((state) => state.language);
 

package/src/screens/Unit/AddMenu.js

@@ -1,6 +1,6 @@
 import MenuActionAddnew from '../../commons/MenuActionAddnew';
 import React, { memo, useCallback, useMemo } from 'react';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import Routes from '../../utils/Route';
 import AddSubUnitIcon from '../../../assets/images/Popover/Dashboard/AddSubUnit.svg';
 import AddDeviceIcon from '../../../assets/images/Popover/Dashboard/AddDevice.svg';
@@ -8,6 +8,7 @@ import AddMemberIcon from '../../../assets/images/Popover/Dashboard/AddMember.sv
 import { useNavigation } from '@react-navigation/native';
 
 const AddMenu = memo(({ unit, afterItemClick, showAdd, setHideAdd }) => {
+  const t = useTranslations();
   const navigation = useNavigation();
 
   const onItemClick = useCallback(
@@ -50,7 +51,7 @@ const AddMenu = memo(({ unit, afterItemClick, showAdd, setHideAdd }) => {
         data: { screen: Routes.SetupGatewayWifi, params: { unit_id: unit.id } },
       },
     ];
-  }, [unit]);
+  }, [t, unit]);
 
   const hideAddModal = useCallback(() => {
     setHideAdd(false);

package/src/screens/Unit/Detail.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { AppState, RefreshControl, View } from 'react-native';
 import { useIsFocused } from '@react-navigation/native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import styles from './styles';
 import AddMenu from './AddMenu';
@@ -24,8 +24,11 @@ import CameraDevice from '../../commons/CameraDevice';
 import { ModalFullVideo } from '../../commons/Modal';
 import { useNavigation } from '@react-navigation/native';
 import Routes from '../../utils/Route';
+import SubUnitAutomate from '../../commons/SubUnit/OneTap';
+import { AUTOMATE_TYPE } from '../../configs/Constants';
 
 const UnitDetail = ({ route }) => {
+  const t = useTranslations();
   const { unitId, unitData } = route.params;
   const isFocused = useIsFocused();
   const { stateData, setAction } = useContext(SCContext);
@@ -35,6 +38,8 @@ const UnitDetail = ({ route }) => {
   const [appState, setAppState] = useState(AppState.currentState);
   const [listMenuItem, setListMenuItem] = useState([]);
   const [listStation, setListStation] = useState([]);
+  const [oneTap, setOneTap] = useState([]);
+  const [script, setScript] = useState([]);
   const [isGGHomeConnected, setIsGGHomeConnected] = useState(false);
   const [station, setStation] = useState([]);
   const [indexStation, setIndexStation] = useState(0);
@@ -56,25 +61,37 @@ const UnitDetail = ({ route }) => {
     setIsFullScreen(false);
   }, []);
 
-  const prepareData = useCallback((rawUnitData) => {
-    const favorites = {
-      isFakeStation: true,
-      isFavorites: true,
-      name: t('favorites'),
-      sensors: [],
-    };
-    rawUnitData.stations.unshift(favorites);
-    rawUnitData.stations.forEach((stationItem) => {
-      if (stationItem.sensors) {
-        const favoriteDevices = stationItem.sensors.filter(
-          (sensorItem) => sensorItem.is_favourite
-        );
-        favorites.sensors = favorites.sensors.concat(favoriteDevices);
-      }
-    });
-  }, []);
+  const prepareData = useCallback(
+    (rawUnitData) => {
+      rawUnitData.stations.unshift({
+        isOneTap: true,
+        name: 'One-Tap',
+      });
+      const favorites = {
+        isFakeStation: true,
+        isFavorites: true,
+        name: t('favorites'),
+        sensors: [],
+      };
+      rawUnitData.stations.unshift(favorites);
+      rawUnitData.stations.forEach((stationItem) => {
+        if (stationItem.sensors) {
+          const favoriteDevices = stationItem.sensors.filter(
+            (sensorItem) => sensorItem.is_favourite
+          );
+          favorites.sensors = favorites.sensors.concat(favoriteDevices);
+        }
+      });
+      rawUnitData.stations.push({
+        isScript: true,
+        name: t('Script'),
+      });
+    },
+    [t]
+  );
 
   const fetchDetails = useCallback(async () => {
+    getAutomates();
     await fetchWithCache(API.UNIT.UNIT_DETAIL(unitId), {}, (response) => {
       const { success, data } = response;
       if (success) {
@@ -82,7 +99,17 @@ const UnitDetail = ({ route }) => {
         setUnit(data);
       }
     });
-  }, [setUnit, unitId, prepareData]);
+  }, [setUnit, unitId, prepareData, getAutomates]);
+
+  const getAutomates = useCallback(async () => {
+    await fetchWithCache(API.UNIT.AUTOMATE(unitId), {}, (response) => {
+      const { success, data } = response;
+      if (success) {
+        setOneTap(data.filter((item) => item.type === AUTOMATE_TYPE.ONE_TAP));
+        setScript(data.filter((item) => item.type !== AUTOMATE_TYPE.ONE_TAP));
+      }
+    });
+  }, [unitId]);
 
   const onRefresh = useCallback(() => {
     fetchDetails();
@@ -203,6 +230,24 @@ const UnitDetail = ({ route }) => {
           goToPlayBack={goToPlayBack}
         />
       );
+    } else if (station.isOneTap) {
+      return (
+        <SubUnitAutomate
+          isOwner={isOwner}
+          type={AUTOMATE_TYPE.ONE_TAP}
+          automates={oneTap}
+          unit={unit}
+        />
+      );
+    } else if (station.isScript) {
+      return (
+        <SubUnitAutomate
+          isOwner={isOwner}
+          type={AUTOMATE_TYPE.VALUE_CHANGE}
+          automates={script}
+          unit={unit}
+        />
+      );
     } else if (station) {
       return (
         <ShortDetailSubUnit
@@ -216,7 +261,7 @@ const UnitDetail = ({ route }) => {
   return (
     <WrapParallaxScrollView
       uriImg={unit.background}
-      title={t('Welcome %{name}', {
+      title={t('Welcome {name}', {
         name: unit.name ? unit.name : '',
       })}
       refreshControl={

package/src/screens/Unit/ManageUnit/index.js

@@ -8,7 +8,7 @@ import {
 } from 'react-native';
 import Modal from 'react-native-modal';
 import Animated from 'react-native-reanimated';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 
 import { Colors, API, Device } from '../../../configs';
 import Routes from '../../../utils/Route';
@@ -37,6 +37,7 @@ import { useIsOwnerOfUnit } from '../../../hooks/Common';
 import { TESTID } from '../../../configs/Constants';
 
 const ManageUnit = ({ route }) => {
+  const t = useTranslations();
   const { unit } = route.params;
   const { isOwner } = useIsOwnerOfUnit(unit.user_id);
   const [showEdit, setshowEdit, setHideEdit] = useBoolean();
@@ -57,7 +58,7 @@ const ManageUnit = ({ route }) => {
         ToastBottomHelper.success(t('unit_updated_successfully'));
       }
     },
-    [unit.id, imageUrl]
+    [imageUrl, unit.id, t]
   );
 
   const goRename = useCallback(async () => {
@@ -85,7 +86,7 @@ const ManageUnit = ({ route }) => {
       ToastBottomHelper.success(t('unit_deleted_successfully'));
       navigate(Routes.Dashboard);
     }
-  }, [unit.id, setHideEdit]);
+  }, [unit.id, setHideEdit, t]);
 
   const [transY] = useKeyboardAnimated(-16);
   const animatedStyle = Platform.select({

package/src/screens/Unit/ManageUnit.js

@@ -2,7 +2,7 @@ import React, { useState, useCallback, useEffect } from 'react';
 import { View, TouchableOpacity, Image, Platform } from 'react-native';
 import Modal from 'react-native-modal';
 import Animated from 'react-native-reanimated';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors, API, Device, Images } from '../../configs';
 import Routes from '../../utils/Route';
@@ -62,6 +62,7 @@ const ButtonWrapper = ({
 };
 
 const ManageUnit = ({ route }) => {
+  const t = useTranslations();
   const { unit } = route.params;
   const navigation = useNavigation();
   const { isOwner } = useIsOwnerOfUnit(unit.user_id);
@@ -90,7 +91,7 @@ const ManageUnit = ({ route }) => {
         ToastBottomHelper.success(t('unit_updated_successfully'));
       }
     },
-    [unit.id, setUnitData]
+    [unit.id, t]
   );
 
   const updateLocation = useCallback(
@@ -137,7 +138,7 @@ const ManageUnit = ({ route }) => {
       ToastBottomHelper.success(t('unit_deleted_successfully'));
       navigate(Routes.Dashboard);
     }
-  }, [unit.id, setHideEdit]);
+  }, [unit.id, setHideEdit, t]);
 
   const [transY] = useKeyboardAnimated(-16);
   const animatedStyle = Platform.select({
@@ -180,7 +181,7 @@ const ManageUnit = ({ route }) => {
               </ButtonWrapper>
               <ButtonWrapper
                 title={t('manage_sub_units')}
-                value={`${unit.stations.length} sub-units`}
+                value={`${unit?.stations?.length} sub-units`}
               />
               <ButtonWrapper
                 onPress={handleChoosePhoto}

package/src/screens/Unit/MoreMenu.js

@@ -1,11 +1,12 @@
 import React, { memo, useCallback, useMemo } from 'react';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import Routes from '../../utils/Route';
 import { useNavigation } from '@react-navigation/native';
 import { MenuActionMore } from '../../commons';
 
 const MoreMenu = memo(
   ({ unit, isOwner, hidePopover, childRef, showingPopover }) => {
+    const t = useTranslations();
     const navigation = useNavigation();
 
     const onItemClick = useCallback(
@@ -30,7 +31,7 @@ const MoreMenu = memo(
       return isOwner
         ? [RouteManageUnit, RouteUnitMemberList]
         : [RouteUnitMemberList];
-    }, [unit, isOwner]);
+    }, [t, unit, isOwner]);
 
     return (
       <MenuActionMore

package/src/screens/Unit/SelectLocation.js

@@ -5,7 +5,7 @@ import { View } from 'react-native';
 import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps';
 import BottomButtonView from '../../commons/BottomButtonView';
 
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { API } from '../../configs';
 import styles from './SelectLocationStyles';
 import SearchBarLocation from './components/SearchLocation';
@@ -14,6 +14,7 @@ import { axiosGet } from '../../utils/Apis/axios';
 import { ScrollView } from 'react-native-gesture-handler';
 import { useNavigation } from '@react-navigation/native';
 import { SCConfig } from '../../configs';
+import Point from '../../../assets/images/AddLocationMaps/Point.svg';
 
 const initialRegion = {
   latitudeDelta: 0.0922,
@@ -24,6 +25,7 @@ const DEFAULT_LATITUDE = 10.7974046; // EoH center
 const DEFAULT_LONGITUDE = 106.7035663;
 
 const SelectLocation = memo(({ route }) => {
+  const t = useTranslations();
   const { updateLocation } = route.params;
   const { goBack } = useNavigation();
   const [input, setInput] = useState('');
@@ -136,7 +138,11 @@ const SelectLocation = memo(({ route }) => {
               longitude: searchedLocation.longitude,
             }}
             tracksViewChanges={false}
-          />
+          >
+            <View style={styles.pointCircle}>
+              <Point />
+            </View>
+          </Marker>
         )}
       </MapView>
       <BottomButtonView

package/src/screens/Unit/SelectLocationStyles.js

@@ -15,6 +15,17 @@ export default StyleSheet.create({
   bottomButton: {
     backgroundColor: Colors.White,
   },
+  pointCircle: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 109,
+    height: 109,
+    borderRadius: 50,
+    backgroundColor: Colors.BlueTransparent5,
+    borderWidth: 1,
+    borderColor: Colors.Blue10,
+  },
   searchLocation: {
     paddingVertical: 8,
     position: 'absolute',