varnitgoyal95/address-verification-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NTP-70754 | popup on address search (#1189)

Browse Source
This commit is contained in:
Aishwarya Srivastava
2025-06-11 12:27:49 +05:30
committed by GitHub
parent 8e80b34cea af0efb9978
commit 5158c36de3
9 changed files with 73 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
android/app/src/main/java/com/avapp/MainApplication.java
View File

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

15
src/screens/MapView/CasesMap/UserCard.tsx
View File

@@ -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;
@@ -76,8 +77,16 @@ const UserCard: React.FC<UserCardProps> = ({ selectedCase, cardPosition }) => {
return (
<Animated.View style={[styles.cardContainer, cardAnimatedStyle]}>
<Pressable style={({ pressed }) => [pressed && { opacity: 0.9 }]} onPress={handleCardPress}>
<ProfileHeader caseId={selectedCase} showDirections={true} />
<Pressable
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}>

40
src/screens/MapView/ProfileHeader/index.tsx
View File

@@ -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]}>
{relativeDistanceBwLatLong}
</Text>
<OpenMapButtonForAddresses
latitude={caseDetails?.addressLocation?.latitude}
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>
);
};

11
src/screens/MapView/TopAddress/AddressListItem.tsx
View File

@@ -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';
@@ -16,6 +16,7 @@ import CopyOutlineIcon from '@assets/icons/CopyOutlineIcon';
import { addClickstreamEvent } from '@services/clickstreamEventService';
import { CLICKSTREAM_EVENT_NAMES } from '@common/Constants';
import { copyAddressToClipboard } from '@screens/addressGeolocation/utils/copyAddressText';
import { OPEN_MAP_POPUP_RIGHT_OFFSET, OPEN_MAP_POPUP_TOP_OFFSET } from '../constants';
interface AddressListItemProps {
address: ILocationData;
@@ -30,7 +31,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 +67,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={OPEN_MAP_POPUP_TOP_OFFSET}
modalRightOffset={OPEN_MAP_POPUP_RIGHT_OFFSET}
/>
<View style={[GenericStyles.ph16]}>
<Text style={styles.addressText}>

3
src/screens/MapView/constants.ts
View File

@@ -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;

6
src/screens/addresses/common/AddressItemHeader.tsx
View File

@@ -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}

8
src/screens/addresses/common/Tooltip.tsx
View File

@@ -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
right = MODAL_RIGHT_OFFSET; //To adjust the right position of the modal below open map button
top = y + modalTopOffset; //To adjust the top 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 });
});
}

2
src/screens/addresses/constants.ts
View File

@@ -13,5 +13,5 @@ export const LocationSourceTagVariantMap: Record<string, TagVariant> = {
export const PAGE_START = 1;
export const PAGE_END = 5;
export const MODAL_RIGHT_OFFSET = 22;
export const MODAL_TOP_OFFSET = 38;
export const MODAL_TOP_OFFSET = 36;
export const CUSTOMER_OUTREACH_LABEL = 'CUSTOMER_OUTREACH';

2
src/screens/addresses/interfaces.ts
View File

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