diff --git a/ProtectedRouter.tsx b/ProtectedRouter.tsx index 68d04371..308cbf9b 100644 --- a/ProtectedRouter.tsx +++ b/ProtectedRouter.tsx @@ -31,6 +31,11 @@ const ANIMATION_DURATION = 300; const Stack = createNativeStackNavigator(); +export enum PageRouteEnum { + PAYMENTS = 'registerPayments', + ADDRESS_GEO = 'addressGeolocation' +} + const ProtectedRouter = () => { const user = useSelector( (state: RootState) => state.user, @@ -116,7 +121,7 @@ const ProtectedRouter = () => { listeners={getScreenFocusListenerObj} /> null, @@ -126,7 +131,7 @@ const ProtectedRouter = () => { listeners={getScreenFocusListenerObj} /> null, diff --git a/src/screens/addressGeolocation/AddressContainer.tsx b/src/screens/addressGeolocation/AddressContainer.tsx index 21948612..35c749ad 100644 --- a/src/screens/addressGeolocation/AddressContainer.tsx +++ b/src/screens/addressGeolocation/AddressContainer.tsx @@ -32,6 +32,8 @@ const AddressContainer: React.FC = ({ addressList }) => { }> @@ -62,7 +64,7 @@ const styles = StyleSheet.create({ paddingVertical: 8 }, noAddressContainer: { - minHeight: '40%', + height: 150, backgroundColor: COLORS.BACKGROUND.PRIMARY }, noAddressText: { diff --git a/src/screens/addressGeolocation/AddressItem.tsx b/src/screens/addressGeolocation/AddressItem.tsx index f76eac2b..1e7c9bc4 100644 --- a/src/screens/addressGeolocation/AddressItem.tsx +++ b/src/screens/addressGeolocation/AddressItem.tsx @@ -1,18 +1,27 @@ import React from 'react' -import { View, StyleSheet, ViewStyle } from 'react-native'; +import { View, StyleSheet, ViewStyle, TouchableOpacity, ScrollView } from 'react-native'; import Text from '../../../RN-UI-LIB/src/components/Text'; -import { IAddressLevel1 } from '../../types/addressGeolocation.types'; +import { IAddressLevel1, IGeoLocation } from '../../types/addressGeolocation.types'; import { GenericStyles } from '../../../RN-UI-LIB/src/styles'; import { COLORS } from '../../../RN-UI-LIB/src/styles/colors'; import { sanitizeString } from '../../components/utlis/commonFunctions'; import { BUSINESS_DATE_FORMAT, dateFormat } from '../../../RN-UI-LIB/src/utlis/dates'; +import ArrowSolidIcon from '../../../RN-UI-LIB/src/Icons/ArrowSolidIcon'; +import BottomSheet from '../../../RN-UI-LIB/src/components/bottom_sheet/BottomSheet'; +import GeolocationItem from './GeolocationItem'; interface IAddressItem { addressItem: IAddressLevel1; containerStyle?: ViewStyle; + geoLocationList?: IGeoLocation[]; + showGeolocationBtn?: boolean; } -const AddressItem = ({ addressItem, containerStyle = {} }: IAddressItem) => ( +const AddressItem = ({ addressItem, containerStyle = {}, geoLocationList, showGeolocationBtn = false }: IAddressItem) => { + + const [showBottomSheet, setShowBottomSheet] = React.useState(false); + + return ( {sanitizeString([addressItem?.pinCode, addressItem?.city].filter(Boolean).join(', '))} @@ -25,8 +34,38 @@ const AddressItem = ({ addressItem, containerStyle = {} }: IAddressItem) => (   ●   {sanitizeString(addressItem?.primarySource || addressItem?.secondarySource)} + { + showGeolocationBtn && geoLocationList?.length ? ( + setShowBottomSheet(true)} + style={[GenericStyles.row, GenericStyles.pt12, GenericStyles.alignCenter]}> + + View geo location(s) + + + + + + + { + geoLocationList.map((geolocation) => ( + + )) + } + + + ) : null + } -) + ) +} const styles = StyleSheet.create({ container: { @@ -48,6 +87,9 @@ const styles = StyleSheet.create({ fontWeight: '400', color: COLORS.TEXT.LIGHT }, + geolocationBtn: { + color: COLORS.BASE.BLUE + } }); export default AddressItem; \ No newline at end of file diff --git a/src/screens/addressGeolocation/GeolocationContainer.tsx b/src/screens/addressGeolocation/GeolocationContainer.tsx index 08c4101f..dd18b8d5 100644 --- a/src/screens/addressGeolocation/GeolocationContainer.tsx +++ b/src/screens/addressGeolocation/GeolocationContainer.tsx @@ -41,7 +41,7 @@ const styles = StyleSheet.create({ paddingVertical: 8 }, noGeolocationContainer: { - minHeight: '40%', + height: 150, backgroundColor: COLORS.BACKGROUND.PRIMARY }, noGeolocationText: { diff --git a/src/screens/addressGeolocation/index.tsx b/src/screens/addressGeolocation/index.tsx index fd6d4f1d..2139cd89 100644 --- a/src/screens/addressGeolocation/index.tsx +++ b/src/screens/addressGeolocation/index.tsx @@ -10,10 +10,25 @@ import GeolocationContainer from './GeolocationContainer'; import AddressContainer from './AddressContainer'; import { COLORS } from '../../../RN-UI-LIB/src/styles/colors'; import { GenericStyles } from '../../../RN-UI-LIB/src/styles'; +import { IAddressGeolocationPayload } from '../../types/addressGeolocation.types'; const PAGE_TITLE = 'All addresses'; -const AddressGeolocation: React.FC = () => { +interface IAddressGeolocation { + route: { + params: { + loanAccountNumber: string; + customerReferenceId: string; + }; + }; +} + +const AddressGeolocation: React.FC = ({ route: routeParams }) => { + + const { + params: { loanAccountNumber, customerReferenceId }, + } = routeParams; + const dispatch = useAppDispatch(); const addressGeolocation = useSelector( @@ -21,7 +36,11 @@ const AddressGeolocation: React.FC = () => { ); useEffect(() => { - dispatch(getAddressesGeolocation()) + const addressesGeolocationPayload: IAddressGeolocationPayload = { + loanaccountnumber: loanAccountNumber, + customerreferenceid: customerReferenceId + }; + dispatch(getAddressesGeolocation(addressesGeolocationPayload)) }, []); return ( @@ -29,7 +48,7 @@ const AddressGeolocation: React.FC = () => { - Other geolocations + Other geolocations diff --git a/src/screens/caseDetails/CollectionCaseDetail.tsx b/src/screens/caseDetails/CollectionCaseDetail.tsx index ac8eda33..f9bfff49 100644 --- a/src/screens/caseDetails/CollectionCaseDetail.tsx +++ b/src/screens/caseDetails/CollectionCaseDetail.tsx @@ -24,6 +24,7 @@ import { COLORS } from '../../../RN-UI-LIB/src/styles/colors'; import { navigateToScreen } from '../../components/utlis/navigationUtlis'; import { formatAmount } from '../../../RN-UI-LIB/src/utlis/amount'; import { PhoneNumberSource } from './interface'; +import { PageRouteEnum } from '../../../ProtectedRouter'; interface ICaseDetails { route: { @@ -84,6 +85,14 @@ const CollectionCaseDetails: React.FC = props => { } }, [slideInUpJourney, opacityAnimation]); + const handleRouting = (route: PageRouteEnum, params: object | undefined = undefined) => { + const commonParams = { + 'loanAccountNumber': caseDetail.loanAccountNumber, + 'customerReferenceId': caseDetail.customerReferenceId + }; + navigateToScreen(route, { ...params, ...commonParams }) + } + const collectMoneyCta = () => { navigateToScreen('registerPayments', { caseId, @@ -147,7 +156,7 @@ const CollectionCaseDetails: React.FC = props => { {addressString}