98 lines
3.2 KiB
TypeScript
98 lines
3.2 KiB
TypeScript
import { COLORS } from '@rn-ui-lib/colors';
|
|
import React from 'react';
|
|
import { Linking, StyleSheet, TouchableOpacity, View } from 'react-native';
|
|
import Text from '@rn-ui-lib/components/Text';
|
|
import { IOpenMapOptionsPopUpProps } from './interfaces';
|
|
import OpenGeolocationIcon from '@assets/icons/OpenGeolocationIcon';
|
|
import SearchAddressIcon from '@assets/icons/SearchAddressIcon';
|
|
import { GenericStyles, getShadowStyle } from '@rn-ui-lib/styles';
|
|
import { getGoogleMapUrl, getGoogleMapUrlForAddressText } from '@components/utlis/commonFunctions';
|
|
import { addClickstreamEvent } from '@services/clickstreamEventService';
|
|
import { CLICKSTREAM_EVENT_NAMES } from '@common/Constants';
|
|
import Tag, { TagVariant } from '@rn-ui-lib/components/Tag';
|
|
import { useAppSelector } from '@hooks';
|
|
|
|
const OpenMapOptionsPopUp = (props: IOpenMapOptionsPopUpProps) => {
|
|
const { latitude, longitude, addressString, isGeoCoordinatesReliable, caseId } = props;
|
|
const caseDetails = useAppSelector((state) => state?.allCases?.caseDetails?.[caseId]);
|
|
|
|
const handleSearchByGeolocation = () => {
|
|
const mapUrl = getGoogleMapUrl(latitude, longitude);
|
|
addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_LAT_LONG_OPTION_CLICKED, {
|
|
attempted_at_address: caseDetails?.addressReferenceId,
|
|
address_rank: caseDetails?.pinRank,
|
|
caseId
|
|
});
|
|
if (!mapUrl) return;
|
|
return Linking.openURL(mapUrl);
|
|
};
|
|
|
|
const handleSearchByAddressString = () => {
|
|
const mapUrl = getGoogleMapUrlForAddressText(addressString);
|
|
addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_SEARCH_ADDRESS_OPTION_CLICKED, {
|
|
attempted_at_address: caseDetails?.addressReferenceId,
|
|
address_rank: caseDetails?.pinRank,
|
|
caseId
|
|
});
|
|
if (!mapUrl) return;
|
|
return Linking.openURL(mapUrl);
|
|
};
|
|
|
|
return (
|
|
<View style={[styles.container, getShadowStyle(4)]}>
|
|
<TouchableOpacity
|
|
activeOpacity={0.7}
|
|
onPress={handleSearchByGeolocation}
|
|
style={[styles.mb6, styles.modalOptions]}
|
|
>
|
|
<OpenGeolocationIcon />
|
|
<Text style={styles.buttonColor}>{`Open location (${latitude?.toFixed(
|
|
3
|
|
)}, ${longitude?.toFixed(3)})`}</Text>
|
|
{isGeoCoordinatesReliable && (
|
|
<Tag text="Recommended" variant={TagVariant.success} style={styles.tagStyle} />
|
|
)}
|
|
</TouchableOpacity>
|
|
<View style={styles.line} />
|
|
<TouchableOpacity
|
|
activeOpacity={0.7}
|
|
onPress={handleSearchByAddressString}
|
|
style={[GenericStyles.mt6, styles.modalOptions]}
|
|
>
|
|
<SearchAddressIcon />
|
|
<Text style={styles.buttonColor}>Search address</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
borderRadius: 8,
|
|
backgroundColor: COLORS.BACKGROUND.PRIMARY,
|
|
padding: 10,
|
|
borderWidth: 1,
|
|
borderColor: COLORS.BORDER.PRIMARY,
|
|
},
|
|
line: {
|
|
height: 1,
|
|
backgroundColor: COLORS.BORDER.PRIMARY,
|
|
},
|
|
modalOptions: {
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
gap: 3,
|
|
alignItems: 'center',
|
|
},
|
|
mb6: {
|
|
marginBottom: 6,
|
|
},
|
|
buttonColor: { color: COLORS.TEXT.BLUE },
|
|
tagStyle: {
|
|
marginLeft: 8,
|
|
marginTop: 2,
|
|
},
|
|
});
|
|
|
|
export default OpenMapOptionsPopUp;
|