NTP-71625 | fix event issues for open map (#1192)

src/screens/MapView/ProfileHeader/index.tsx

@@ -25,7 +25,11 @@ interface ProfileHeaderProps {
   addressItemRef?: React.RefObject<View>;
 }
 
-const ProfileHeader: React.FC<ProfileHeaderProps> = ({ caseId, showDirections = false, addressItemRef }) => {
+const ProfileHeader: React.FC<ProfileHeaderProps> = ({
+  caseId,
+  showDirections = false,
+  addressItemRef,
+}) => {
   const caseDetails = useAppSelector((state) => state.allCases?.caseDetails?.[caseId]);
   const { customerName, totalOverdueAmount, paymentStatus, collectionTag, dpdBucket } =
     caseDetails || {};
@@ -60,7 +64,10 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({ caseId, showDirections =
 
   const handleOpenMapForAddresses = () => {
     setIsModalVisible(!isModalVisible);
-    addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_ADDRESS_CARD_DIRECTIONS_CLICKED, {});
+    addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_ADDRESS_CARD_DIRECTIONS_CLICKED, {
+      attempted_at_address: caseDetails?.addressReferenceId,
+      caseId,
+    });
   };
 
   return (
@@ -124,6 +131,8 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({ caseId, showDirections =
           latitude={caseDetails?.addressLocation?.latitude}
           longitude={caseDetails?.addressLocation?.longitude}
           addressString={caseDetails?.addressString}
+          caseId={caseId}
+          referenceId={caseDetails?.addressReferenceId}
         />
       </Tooltip>
     </View>

src/screens/MapView/TopAddress/AddressListItem.tsx

@@ -71,6 +71,7 @@ const AddressListItem: React.FC<AddressListItemProps> = memo(
       >
         <AddressItemHeader
           locationDetails={address}
+          caseId={caseId}
           isOtherAddressView
           containerStyle={styles.borderBottom0}
           addressItemRef={addressItemRef}

src/screens/addresses/common/AddressItemHeader.tsx

@@ -31,6 +31,7 @@ const AddressItemHeader = (props: ITopAddressItemHeader) => {
     isSimilarAddressPage = false,
     modalTopOffset,
     modalRightOffset,
+    caseId = '',
   } = props;
 
   const { pinCode, city, latitude, longitude, rank, visited, locationSubType } =
@@ -58,9 +59,14 @@ const AddressItemHeader = (props: ITopAddressItemHeader) => {
       return Linking.openURL(mapUrl);
     }
   };
+  
   const handleOpenMapForAddresses = () => {
     setIsModalVisible(!isModalVisible);
-    addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_ADDRESS_CARD_DIRECTIONS_CLICKED, {});
+    addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_ADDRESS_CARD_DIRECTIONS_CLICKED, {
+      attempted_at_address: locationDetails?.referenceId,
+      address_rank: rank,
+      caseId
+    });
   };
 
   return (
@@ -117,6 +123,9 @@ const AddressItemHeader = (props: ITopAddressItemHeader) => {
           longitude={locationDetails?.longitude}
           addressString={locationDetails?.addressText}
           isGeoCoordinatesReliable={locationDetails?.isGeoCoordinatesReliable}
+          caseId={caseId}
+          rank={rank}
+          referenceId={locationDetails?.referenceId}
         />
       </Tooltip>
     </View>

src/screens/addresses/common/OpenMapOptionsPopUp.tsx

@@ -11,19 +11,27 @@ import { addClickstreamEvent } from '@services/clickstreamEventService';
 import { CLICKSTREAM_EVENT_NAMES } from '@common/Constants';
 import Tag, { TagVariant } from '@rn-ui-lib/components/Tag';
 
-const OpenMapOptionsPopUp = (props: IOpenMapOptionsPopUpProps) => {
-  const { latitude, longitude, addressString, isGeoCoordinatesReliable } = props;
 
+const OpenMapOptionsPopUp = (props: IOpenMapOptionsPopUpProps) => {
+  const { latitude, longitude, addressString, isGeoCoordinatesReliable, caseId, rank = '', referenceId } = props;
   const handleSearchByGeolocation = () => {
     const mapUrl = getGoogleMapUrl(latitude, longitude);
-    addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_LAT_LONG_OPTION_CLICKED, {});
+    addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_LAT_LONG_OPTION_CLICKED, {
+      attempted_at_address: referenceId,
+      address_rank: rank,
+      caseId
+    });
     if (!mapUrl) return;
     return Linking.openURL(mapUrl);
   };
 
   const handleSearchByAddressString = () => {
     const mapUrl = getGoogleMapUrlForAddressText(addressString);
-    addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_SEARCH_ADDRESS_OPTION_CLICKED, {});
+    addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_SEARCH_ADDRESS_OPTION_CLICKED, {
+      attempted_at_address: referenceId,
+      address_rank: rank,
+      caseId
+    });
     if (!mapUrl) return;
     return Linking.openURL(mapUrl);
   };

src/screens/addresses/common/interfaces.ts

@@ -3,4 +3,7 @@ export interface IOpenMapOptionsPopUpProps {
   longitude: number;
   addressString: string;
   isGeoCoordinatesReliable?: boolean;
+  caseId: string;
+  rank?: number;
+  referenceId?: string;
 }

src/screens/addresses/interfaces.ts

@@ -56,6 +56,7 @@ export interface ITopAddressItemHeader {
   isSimilarAddressPage?: boolean;
   modalTopOffset?: number;
   modalRightOffset?: number;
+  caseId?: string;
 }
 
 export interface ITopAddressItemFeedback {

src/screens/addresses/otherAddresses/OtherAddressItem.tsx

@@ -19,6 +19,7 @@ const OtherAddressItem = (props: IOtherAddressItem) => {
     <View style={styles.container} ref={addressItemRef}>
       <AddressItemHeader
         locationDetails={locationDetails}
+        caseId={caseId}
         isOtherAddressView={true}
         containerStyle={[GenericStyles.pv16]}
         addressItemRef={addressItemRef}

src/screens/addresses/similarAddresses/TopAddressSimilarAddresses.tsx

@@ -63,6 +63,7 @@ const TopAddressSimilarAddresses = (props: ITopAddressSimilarAddresses) => {
           <AddressItemHeader
             containerStyle={styles.bottomSheetHeader}
             locationDetails={locationDetails}
+            caseId={caseId}
             isOtherAddressView
             isSimilarAddressPage
           />

src/screens/caseDetails/AllocatedAddressDetails.tsx

@@ -14,6 +14,8 @@ import { addClickstreamEvent } from '@services/clickstreamEventService';
 import React, { useState } from 'react';
 import { Linking, StyleSheet, View } from 'react-native';
 import OpenMapButtonForAddresses from './OpenMapButtonForAddresses';
+import { RootState } from '@store';
+import { useAppSelector } from '@hooks';
 
 interface IAllocatedAddressDetails {
   isCasePaused: boolean;
@@ -36,7 +38,8 @@ const AllocatedAddressDetails = (props: IAllocatedAddressDetails) => {
     roadDistance,
   } = props;
   const [isModalVisible, setIsModalVisible] = useState(false);
-
+  const caseDetails = useAppSelector((state: RootState) => state?.allCases?.caseDetails?.[caseId]) || {};
+  
   const isGeolocation = addressStringType === AddressTabType.GEO_LOCATION;
 
   const openLocation = () => {
@@ -57,6 +60,10 @@ const AllocatedAddressDetails = (props: IAllocatedAddressDetails) => {
 
   const handleOpenMapForAddresses = () => {
     setIsModalVisible(!isModalVisible);
+    addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_ADDRESS_CARD_DIRECTIONS_CLICKED, {
+      attempted_at_address: caseDetails?.addressReferenceId,
+      caseId,
+    });
   };
 
   return (
@@ -101,6 +108,8 @@ const AllocatedAddressDetails = (props: IAllocatedAddressDetails) => {
           latitude={addressLocation?.latitude}
           longitude={addressLocation?.longitude}
           addressString={addressString as string}
+          caseId={caseId}
+          referenceId={caseDetails?.addressReferenceId}
         />
       </Tooltip>
     </View>