NTP-70754 | pop up on open map in mav view

android/app/src/main/java/com/avapp/DeviceUtilsModule.java

@@ -55,6 +55,7 @@ public class DeviceUtilsModule extends ReactContextBaseJavaModule {
     private File imageFile;
 
     private int WHATSAPP_SHARE_REQUEST_CODE = 12345;
+    public static String agentId = "";
 
     public DeviceUtilsModule(@Nullable ReactApplicationContext reactContext) {
         super(reactContext);
@@ -208,6 +209,7 @@ public class DeviceUtilsModule extends ReactContextBaseJavaModule {
         if (isAlfredEnabledFromFirebase) {
             AlfredManager.INSTANCE.getConfig$navi_alfred_release().setUserId(userId);
         }
+        DeviceUtilsModule.agentId = (userId != null) ? userId : "";
         PulseManager.INSTANCE.setUserId(userId);
     }
 

android/app/src/main/java/com/avapp/MainApplication.java

@@ -190,7 +190,8 @@ public class MainApplication extends Application implements ReactApplication, Ap
             anrEventProperties.put("isNae", "true");
             anrEventProperties.put("errorTitle", "Something went wrong");
             anrEventProperties.put("vertical", "COLLECTIONS_FIELD");
-
+            anrEventProperties.put("sessionId", DeviceUtilsModule.agentId);
+            
             if (isAlfredEnabledFromFirebase && AlfredManager.INSTANCE.isAlfredRecordingEnabled()
                     && alfredConfig.getAnrEnableStatus() && isAppInForeground()) {
                 anrEventProperties.put(STACK_TRACE, "ANR_OCCURRED");
@@ -221,7 +222,8 @@ public class MainApplication extends Application implements ReactApplication, Ap
                 crashEventProperties.put("isNae", "true");
                 crashEventProperties.put("errorTitle", "Something went wrong");
                 crashEventProperties.put("vertical", "COLLECTIONS_FIELD");
-                
+                crashEventProperties.put("sessionId", DeviceUtilsModule.agentId);
+
                 if (isAlfredEnabledFromFirebase && AlfredManager.INSTANCE.isAlfredRecordingEnabled()
                         && alfredConfig.getCrashEnableStatus() && isAppInForeground()) {
                     StackTraceElement stackTraceElement = exception.getStackTrace()[0];

src/screens/MapView/CasesMap/UserCard.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { StyleSheet, View, TouchableOpacity, Pressable } from 'react-native';
 import Animated, { SharedValue, useAnimatedStyle } from 'react-native-reanimated';
 import { COLORS } from '@rn-ui-lib/colors';
@@ -25,6 +25,7 @@ interface UserCardProps {
 
 const UserCard: React.FC<UserCardProps> = ({ selectedCase, cardPosition }) => {
   const caseDetail = useAppSelector((state) => state.allCases?.caseDetails?.[selectedCase]) || {};
+  const addressItemRef = useRef(null);
 
   const cardAnimatedStyle = useAnimatedStyle(() => {
     const positionValue = Number.isNaN(cardPosition.value) ? 1 : cardPosition.value;
@@ -75,9 +76,17 @@ const UserCard: React.FC<UserCardProps> = ({ selectedCase, cardPosition }) => {
   }, []);
 
   return (
-    <Animated.View style={[styles.cardContainer, cardAnimatedStyle]}>
+    <Animated.View style={[styles.cardContainer]}>
-      <Pressable style={({ pressed }) => [pressed && { opacity: 0.9 }]} onPress={handleCardPress}>
+      <Pressable
-        <ProfileHeader caseId={selectedCase} showDirections={true} />
+        style={({ pressed }) => [pressed && { opacity: 0.9 }]}
+        ref={addressItemRef}
+        onPress={handleCardPress}
+      >
+        <ProfileHeader
+          caseId={selectedCase}
+          showDirections={true}
+          addressItemRef={addressItemRef}
+        />
         <View style={styles.dashedBorder} />
         <View style={styles.cardContent}>
           <View style={styles.h66}>

src/screens/MapView/ProfileHeader/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { View, StyleSheet, Linking } from 'react-native';
 import Text from '@rn-ui-lib/components/Text';
 import Tag, { TagVariant } from '@rn-ui-lib/components/Tag';
@@ -14,21 +14,28 @@ import Button from '@rn-ui-lib/components/Button';
 import MapDirectionIcon from '@assets/icons/MapDirectionIcon';
 import { CLICKSTREAM_EVENT_NAMES } from '@common/Constants';
 import { addClickstreamEvent } from '@services/clickstreamEventService';
+import OpenMapButtonForAddresses from '@screens/caseDetails/OpenMapButtonForAddresses';
+import Tooltip from '@screens/addresses/common/Tooltip';
+import OpenMapOptionsPopUp from '@screens/addresses/common/OpenMapOptionsPopUp';
+import { OPEN_MAP_POPUP_RIGHT_OFFSET, OPEN_MAP_POPUP_TOP_OFFSET } from '../constants';
 
 interface ProfileHeaderProps {
   caseId: string;
   showDirections?: boolean;
+  addressItemRef?: React.RefObject<View>;
 }
 
-const ProfileHeader: React.FC<ProfileHeaderProps> = ({ caseId, showDirections = false }) => {
+const ProfileHeader: React.FC<ProfileHeaderProps> = ({ caseId, showDirections = false, addressItemRef }) => {
   const caseDetails = useAppSelector((state) => state.allCases?.caseDetails?.[caseId]);
   const { customerName, totalOverdueAmount, paymentStatus, collectionTag, dpdBucket } =
     caseDetails || {};
   const deviceGeolocationCoordinate = useAppSelector(
     (state) => state.foregroundService.deviceGeolocationCoordinate
   );
-  const isGeoLocation = caseDetails?.addressStringType === LocationType.GEO_LOCATION;
 
+  const isGeoLocation = caseDetails?.addressStringType === LocationType.GEO_LOCATION;
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  
   const relativeDistanceBwLatLong = useMemo(() => {
     const distance = getDistanceFromLatLonInKm(deviceGeolocationCoordinate, {
       latitude: caseDetails?.addressLocation?.latitude,
@@ -51,6 +58,11 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({ caseId, showDirections =
     }
   };
 
+  const handleOpenMapForAddresses = () => {
+    setIsModalVisible(!isModalVisible);
+    addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_ADDRESS_CARD_DIRECTIONS_CLICKED, {});
+  };
+
   return (
     <View style={styles.container}>
       <ProfileAvatar name={customerName} caseId={caseId} />
@@ -66,9 +78,12 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({ caseId, showDirections =
           </Text>
           {showDirections &&
             (!isGeoLocation ? (
-              <Text style={[GenericStyles.fw700, GenericStyles.fontSize12]}>
+              <OpenMapButtonForAddresses
-                {relativeDistanceBwLatLong}
+                latitude={caseDetails?.addressLocation?.latitude}
-              </Text>
+                longitude={caseDetails?.addressLocation?.longitude}
+                handleOpenMapForAddresses={handleOpenMapForAddresses}
+                relativeDistanceBwLatLong={relativeDistanceBwLatLong}
+              />
             ) : (
               <Button
                 onPress={handleDirectionsPress}
@@ -98,6 +113,19 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({ caseId, showDirections =
           {collectionTag ? <Tag text={collectionTag} variant={TagVariant.gray} /> : null}
         </View>
       </View>
+      <Tooltip
+        isModalVisible={isModalVisible}
+        setIsModalVisible={setIsModalVisible}
+        modalRef={addressItemRef}
+        modalTopOffset={OPEN_MAP_POPUP_TOP_OFFSET}
+        modalRightOffset={OPEN_MAP_POPUP_RIGHT_OFFSET}
+      >
+        <OpenMapOptionsPopUp
+          latitude={caseDetails?.addressLocation?.latitude}
+          longitude={caseDetails?.addressLocation?.longitude}
+          addressString={caseDetails?.addressString}
+        />
+      </Tooltip>
     </View>
   );
 };

src/screens/MapView/TopAddress/AddressListItem.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useRef } from 'react';
 import { Pressable, StyleSheet, View } from 'react-native';
 import Text from '@rn-ui-lib/components/Text';
 import { COLORS } from '@rn-ui-lib/colors';
@@ -30,7 +30,8 @@ const AddressListItem: React.FC<AddressListItemProps> = memo(
       address?.latestFeedback || {};
 
     const { feedbackColor } = getFeedbackColors(latestFeedbackStatus, feedbackColourCode);
-
+    const addressItemRef = useRef(null);
+    
     const openAddress = () => {
       addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_MAP_MORE_DETAILS_CLICKED, {
         addressId: address?.referenceId,
@@ -65,12 +66,15 @@ const AddressListItem: React.FC<AddressListItemProps> = memo(
           { opacity: pressed ? 0.7 : 1 },
         ]}
         onPress={handleAddressPress}
+        ref={addressItemRef}
       >
         <AddressItemHeader
           locationDetails={address}
           isOtherAddressView
-          isSimilarAddressPage
           containerStyle={styles.borderBottom0}
+          addressItemRef={addressItemRef}
+          modalTopOffset={28}
+          modalRightOffset={12}
         />
         <View style={[GenericStyles.ph16]}>
           <Text style={styles.addressText}>

src/screens/MapView/constants.ts

@@ -24,3 +24,6 @@ export const REPOSITION_BUTTON_Z_INDEX = 1;
 export const TOP_ADDRESS_PIN_SELECTED_Z_INDEX = 1001;
 
 export const PROMISE_TO_PAY = 'PROMISE_TO_PAY';
+
+export const OPEN_MAP_POPUP_TOP_OFFSET = 26;
+export const OPEN_MAP_POPUP_RIGHT_OFFSET = 12;

src/screens/addresses/common/AddressItemHeader.tsx

@@ -28,7 +28,9 @@ const AddressItemHeader = (props: ITopAddressItemHeader) => {
     containerStyle,
     isCoachMarkVisible,
     addressItemRef,
-    isSimilarAddressPage = false
+    isSimilarAddressPage = false,
+    modalTopOffset,
+    modalRightOffset,
   } = props;
 
   const { pinCode, city, latitude, longitude, rank, visited, locationSubType } =
@@ -107,6 +109,8 @@ const AddressItemHeader = (props: ITopAddressItemHeader) => {
         isModalVisible={isModalVisible}
         setIsModalVisible={setIsModalVisible}
         modalRef={addressItemRef}
+        modalTopOffset={modalTopOffset}
+        modalRightOffset={modalRightOffset}
       >
         <OpenMapOptionsPopUp
           latitude={locationDetails?.latitude}

src/screens/addresses/common/Tooltip.tsx

@@ -7,6 +7,8 @@ interface TooltipProps {
   isModalVisible: boolean;
   setIsModalVisible: (visible: boolean) => void;
   modalRef: React.RefObject<View>;
+  modalTopOffset?: number;
+  modalRightOffset?: number;
 }
 
 const Tooltip: React.FC<TooltipProps> = ({
@@ -14,6 +16,8 @@ const Tooltip: React.FC<TooltipProps> = ({
   isModalVisible,
   setIsModalVisible,
   modalRef,
+  modalTopOffset = MODAL_TOP_OFFSET,
+  modalRightOffset = MODAL_RIGHT_OFFSET,
 }) => {
   const [position, setPosition] = useState({ top: 0, right: 0 });
 
@@ -22,8 +26,8 @@ const Tooltip: React.FC<TooltipProps> = ({
       modalRef?.current?.measureInWindow((x, y, width, height) => {
         let top = y;
         let right;
-        top = y + MODAL_TOP_OFFSET; //To adjust the top position of the modal below open map button
+        top = y + modalTopOffset; //To adjust the top position of the modal below open map button
-        right = MODAL_RIGHT_OFFSET; //To adjust the right position of the modal below open map button
+        right = modalRightOffset; //To adjust the right position of the modal below open map button
         setPosition({ top, right });
       });
     }

src/screens/addresses/interfaces.ts

@@ -54,6 +54,8 @@ export interface ITopAddressItemHeader {
   containerStyle?: StyleProp<ViewStyle>;
   addressItemRef?: React.MutableRefObject<null>;
   isSimilarAddressPage?: boolean;
+  modalTopOffset?: number;
+  modalRightOffset?: number;
 }
 
 export interface ITopAddressItemFeedback {

src/screens/caseDetails/AllocatedAddressDetails.tsx

@@ -57,6 +57,7 @@ const AllocatedAddressDetails = (props: IAllocatedAddressDetails) => {
 
   const handleOpenMapForAddresses = () => {
     setIsModalVisible(!isModalVisible);
+    addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_ADDRESS_CARD_DIRECTIONS_CLICKED, {});
   };
 
   return (