NTP-55956 | Pulkit | road distance in address page (#1164)

src/screens/caseDetails/AllocatedAddressDetails.tsx

@@ -1,7 +1,6 @@
 import MapDirectionIcon from '@assets/icons/MapDirectionIcon';
 import { CLICKSTREAM_EVENT_NAMES } from '@common/Constants';
 import { getGoogleMapUrl, getGoogleMapUrlForAddressText } from '@components/utlis/commonFunctions';
-import { useAppSelector } from '@hooks';
 import { IGeolocationCoordinate } from '@interfaces/addressGeolocation.types';
 import { COLORS } from '@rn-ui-lib/colors';
 import Button from '@rn-ui-lib/components/Button';
@@ -12,11 +11,9 @@ import OpenMapOptionsPopUp from '@screens/addresses/common/OpenMapOptionsPopUp';
 import Tooltip from '@screens/addresses/common/Tooltip';
 import { AddressTabType } from '@screens/addressGeolocation/constant';
 import { addClickstreamEvent } from '@services/clickstreamEventService';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import { Linking, StyleSheet, View } from 'react-native';
 import OpenMapButtonForAddresses from './OpenMapButtonForAddresses';
-import { updateNearbyCasesListAndLocation } from '@screens/allCases/utils';
-import { RootState } from '@store';
 
 interface IAllocatedAddressDetails {
   isCasePaused: boolean;
@@ -25,6 +22,7 @@ interface IAllocatedAddressDetails {
   addressString?: string;
   addressStringType?: string;
   addressItemRef?: React.RefObject<View>;
+  roadDistance: number;
 }
 
 const AllocatedAddressDetails = (props: IAllocatedAddressDetails) => {
@@ -35,14 +33,9 @@ const AllocatedAddressDetails = (props: IAllocatedAddressDetails) => {
     caseId,
     addressStringType,
     addressItemRef,
+    roadDistance,
   } = props;
   const [isModalVisible, setIsModalVisible] = useState(false);
-  const allCasesList = useAppSelector((state: RootState) => state?.allCases?.casesList) || [];
-  const caseDetails = useAppSelector((state: RootState) => state?.allCases?.caseDetails);
-
-  const distanceMapOfNearbyCases =
-    useAppSelector((state) => state?.nearbyCasesSlice?.caseReferenceIdToDistanceMap) || new Map();
-  const distanceOfCaseItem = distanceMapOfNearbyCases?.get(caseId);
 
   const isGeolocation = addressStringType === AddressTabType.GEO_LOCATION;
 
@@ -65,11 +58,6 @@ const AllocatedAddressDetails = (props: IAllocatedAddressDetails) => {
   const handleOpenMapForAddresses = () => {
     setIsModalVisible(!isModalVisible);
   };
-  useEffect(() => {
-    if (!distanceMapOfNearbyCases?.size) {
-      updateNearbyCasesListAndLocation(allCasesList, caseDetails);
-    }
-  }, []);
 
   return (
     <View
@@ -80,30 +68,30 @@ const AllocatedAddressDetails = (props: IAllocatedAddressDetails) => {
       ]}
     >
       <Text style={styles.details}>Allocated Address</Text>
-      {!isGeolocation ? (
-        <OpenMapButtonForAddresses
-          latitude={addressLocation?.latitude}
-          longitude={addressLocation?.longitude}
-          handleOpenMapForAddresses={handleOpenMapForAddresses}
-          relativeDistanceBwLatLong={`${
-            distanceOfCaseItem ? Number(distanceOfCaseItem?.toFixed(1)) : ''
-          } km`}
-          isCasePaused={isCasePaused}
-        />
-      ) : (
-        <Button
-          onPress={openLocation}
-          title={`${distanceOfCaseItem ? Number(distanceOfCaseItem?.toFixed(1)) : ''} km`}
-          variant="primaryText"
-          textStyle={[GenericStyles.fontSize12, GenericStyles.fw500, GenericStyles.mr2]}
-          underlayColor="transparent"
-          rightIcon={<MapDirectionIcon />}
-          pressableWidthChange={false}
-          opacityChangeOnPress={true}
-          buttonStyle={styles.pv0}
-          disabled={isCasePaused}
-        />
-      )}
+      {roadDistance ? (
+        !isGeolocation ? (
+          <OpenMapButtonForAddresses
+            latitude={addressLocation?.latitude}
+            longitude={addressLocation?.longitude}
+            handleOpenMapForAddresses={handleOpenMapForAddresses}
+            relativeDistanceBwLatLong={`${Number(roadDistance?.toFixed(1))} km`}
+            isCasePaused={isCasePaused}
+          />
+        ) : (
+          <Button
+            onPress={openLocation}
+            title={`${Number(roadDistance?.toFixed(1))} km`}
+            variant="primaryText"
+            textStyle={[GenericStyles.fontSize12, GenericStyles.fw500, GenericStyles.mr2]}
+            underlayColor="transparent"
+            rightIcon={<MapDirectionIcon />}
+            pressableWidthChange={false}
+            opacityChangeOnPress={true}
+            buttonStyle={styles.pv0}
+            disabled={isCasePaused}
+          />
+        )
+      ) : null}
       <Tooltip
         isModalVisible={isModalVisible}
         setIsModalVisible={setIsModalVisible}

src/screens/caseDetails/CollectionCaseDetail.tsx

@@ -23,13 +23,18 @@ import { syncActiveCallDetails } from '@actions/callRecordingActions';
 import { getSkipTracingAddress, getUngroupedAddress } from '@actions/addressGeolocationAction';
 import EscalationsSection from '@screens/escalations/EscalationsSection';
 import TopFeedbacks from './feedback/TopFeedbacks';
-import { CaseStatuses } from '@screens/allCases/interface';
+import { CaseStatuses, ICaseItemLatLongData } from '@screens/allCases/interface';
 import { BUSINESS_DATE_FORMAT, dateFormat, ISO_DATE_FORMAT } from '@rn-ui-lib/utils/dates';
 import dayjs from 'dayjs';
 import CaseDetailPausedNudge from './CaseDetailPausedNudge';
 import { captureLatestDeviceLocation } from '@components/form/services/geoLocation.service';
 import { getFeedbackAddresses } from '@screens/addresses/actions';
 import { getForeclosureAmount } from '@actions/feedbackActions';
+import Geolocation from 'react-native-geolocation-service';
+import { getAddressLocation } from '@screens/allCases/utils';
+import { getGeolocationDistance } from '@screens/allCases/allCasesActions';
+import { debounce } from '@components/utlis/commonFunctions';
+import logger from '@components/utlis/logger';
 
 interface ICaseDetails {
   route: {
@@ -56,6 +61,7 @@ const CollectionCaseDetails: React.FC<ICaseDetails> = (props) => {
   const caseBusinessVertical = useAppSelector(
     (state) => state?.allCases?.caseDetails?.[caseId]?.businessVertical
   );
+  const [roadDistance, setRoadDistance] = React.useState(0);
 
   const { loanAccountNumber } = caseDetail;
   const opacityAnimation = useRef(new Animated.Value(0.8)).current;
@@ -69,6 +75,7 @@ const CollectionCaseDetails: React.FC<ICaseDetails> = (props) => {
   const activeEscalationCount = Number(escalationData?.activeEscalationCount);
   const pastEscalationCount = Number(escalationData?.pastEscalationCount);
   const totalEscalationsCount = activeEscalationCount + pastEscalationCount;
+  const watchId = React.useRef<number>(0);
 
   useEffect(() => {
     if (caseId) dispatch(setSelectedCaseId(caseId));
@@ -96,7 +103,9 @@ const CollectionCaseDetails: React.FC<ICaseDetails> = (props) => {
       lan: loanAccountNumber,
       currentTask: caseDetail?.currentTask?.taskType,
     });
-    dispatch(getForeclosureAmount(caseId, loanAccountNumber, dateFormat(new Date(), ISO_DATE_FORMAT)));
+    dispatch(
+      getForeclosureAmount(caseId, loanAccountNumber, dateFormat(new Date(), ISO_DATE_FORMAT))
+    );
   }, []);
 
   useEffect(() => {
@@ -125,6 +134,50 @@ const CollectionCaseDetails: React.FC<ICaseDetails> = (props) => {
     }, [isCallActive])
   );
 
+  useEffect(() => {
+    if (!isFocused || watchId.current !== 0) {
+      Geolocation.clearWatch(watchId.current);
+      return;
+    }
+    const debouncedGetDistance = debounce(
+      (params: { source: ICaseItemLatLongData; destinations: ICaseItemLatLongData[] }) => {
+        getGeolocationDistance(params).then((distanceMap) => {
+          setRoadDistance(distanceMap?.get(params.source.id) || 0);
+        });
+      },
+      2000
+    );
+    watchId.current = Geolocation.watchPosition(
+      (position) => {
+        const source = {
+          id: caseId,
+          latitude: position.coords.latitude,
+          longitude: position.coords.longitude,
+        };
+        const destinations: ICaseItemLatLongData[] = [];
+        const addressLocation = getAddressLocation(caseDetail?.addressLocation);
+        if (addressLocation) {
+          destinations.push({
+            id: caseDetail?.caseReferenceId,
+            latitude: addressLocation?.latitude,
+            longitude: addressLocation?.longitude,
+          });
+        }
+        debouncedGetDistance({ source, destinations });
+      },
+      (error) => {
+        logger({
+          msg: 'Error getting geolocation distance',
+          type: 'error',
+          extras: { error },
+        });
+      }
+    );
+    return () => {
+      Geolocation.clearWatch(watchId.current);
+    };
+  }, [isFocused, caseId, caseDetail]);
+
   return (
     <Layout>
       <SafeAreaView style={[GenericStyles.fill, GenericStyles.whiteBackground]}>
@@ -141,7 +194,7 @@ const CollectionCaseDetails: React.FC<ICaseDetails> = (props) => {
               GenericStyles.alignCenter,
             ]}
           >
-            <ViewAddressSection caseId={caseId} />
+            <ViewAddressSection caseId={caseId} roadDistance={roadDistance} />
             {escalationData && totalEscalationsCount > 0 ? (
               <EscalationsSection caseId={caseId} />
             ) : null}

src/screens/caseDetails/ViewAddressSection.tsx

@@ -18,9 +18,10 @@ import AllocatedAddressDetails from './AllocatedAddressDetails';
 
 interface IViewAddressSection {
   caseId: string;
+  roadDistance: number;
 }
 
-const ViewAddressSection = ({ caseId }: IViewAddressSection) => {
+const ViewAddressSection = ({ caseId, roadDistance }: IViewAddressSection) => {
   const caseDetail = useAppSelector((state: RootState) => state.allCases.caseDetails[caseId]) || {};
   const {
     addressString,
@@ -81,6 +82,7 @@ const ViewAddressSection = ({ caseId }: IViewAddressSection) => {
         addressStringType={addressStringType}
         caseId={caseId}
         addressItemRef={addressItemRef}
+        roadDistance={roadDistance}
       />
       <View style={styles.container}>
         <View style={[GenericStyles.mt4, GenericStyles.mr2]}>