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

Routing & Integration Address Page, Add bottom sheet (#97)

Browse Source 
* Routing & Integration Address Page, Add bottom sheet

* Fix review comments
This commit is contained in:
Himanshu Kansal
2023-02-23 17:06:33 +05:30
committed by GitHub Enterprise
parent 0b8a1764ee
commit c134619661
8 changed files with 95 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
ProtectedRouter.tsx
View File

@@ -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}
/>
<Stack.Screen
name="registerPayments"
name={PageRouteEnum.PAYMENTS}
component={RegisterPayments}
options={{
header: () => null,
@@ -126,7 +131,7 @@ const ProtectedRouter = () => {
listeners={getScreenFocusListenerObj}
/>
<Stack.Screen
name="addressGeolocation"
name={PageRouteEnum.ADDRESS_GEO}
component={AddressGeolocation}
options={{
header: () => null,

4
src/screens/addressGeolocation/AddressContainer.tsx
View File

@@ -32,6 +32,8 @@ const AddressContainer: React.FC<IAddressContainer> = ({ addressList }) => {
<AddressItem
key={address?.addressDTO?.externalReferenceId}
addressItem={address?.addressDTO}
geoLocationList={address.matchingGeoLocations}
showGeolocationBtn={true}
/>
}>
<View>
@@ -62,7 +64,7 @@ const styles = StyleSheet.create({
paddingVertical: 8
},
noAddressContainer: {
minHeight: '40%',
height: 150,
backgroundColor: COLORS.BACKGROUND.PRIMARY
},
noAddressText: {

50
src/screens/addressGeolocation/AddressItem.tsx
View File

@@ -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 (
<View style={[styles.container, GenericStyles.columnDirection, containerStyle]}>
<Text numberOfLines={1} ellipsizeMode="tail" style={[styles.textContainer, styles.cardBoldTitle]}>
{sanitizeString([addressItem?.pinCode, addressItem?.city].filter(Boolean).join(', '))}
@@ -25,8 +34,38 @@ const AddressItem = ({ addressItem, containerStyle = {} }: IAddressItem) => (
&nbsp;&nbsp;&#9679;&nbsp;&nbsp;
{sanitizeString(addressItem?.primarySource || addressItem?.secondarySource)}
</Text>
{
showGeolocationBtn && geoLocationList?.length ? (
<TouchableOpacity
activeOpacity={0.7}
onPress={() => setShowBottomSheet(true)}
style={[GenericStyles.row, GenericStyles.pt12, GenericStyles.alignCenter]}>
<Text style={[styles.textContainer, styles.geolocationBtn]}>
View geo location(s)
</Text>
<Text style={GenericStyles.pt7}>
<ArrowSolidIcon fillColor={COLORS.BASE.BLUE} rotateY={180} />
</Text>
<BottomSheet
header="Other geolocations"
heightPercentage={50}
visible={showBottomSheet}
isSwipeable
setVisible={setShowBottomSheet}
>
<ScrollView>
{
geoLocationList.map((geolocation) => (
<GeolocationItem geolocationItem={geolocation} />
))
}</ScrollView>
</BottomSheet>
</TouchableOpacity>
) : null
}
</View>
)
)
}
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;

2
src/screens/addressGeolocation/GeolocationContainer.tsx
View File

@@ -41,7 +41,7 @@ const styles = StyleSheet.create({
paddingVertical: 8
},
noGeolocationContainer: {
minHeight: '40%',
height: 150,
backgroundColor: COLORS.BACKGROUND.PRIMARY
},
noGeolocationText: {

25
src/screens/addressGeolocation/index.tsx
View File

@@ -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<IAddressGeolocation> = ({ 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 = () => {
<NavigationHeader title={PAGE_TITLE} onBack={goBack} />
<View>
<AddressContainer addressList={addressGeolocation.addressL1ViewList} />
<Text style={[styles.textContainer, GenericStyles.p16, { paddingTop: 4}]}>Other geolocations</Text>
<Text style={[styles.textContainer, GenericStyles.p16]}>Other geolocations</Text>
<GeolocationContainer geolocationList={addressGeolocation.unmatchedGeoLocations} />
</View>
</ScrollView>

11
src/screens/caseDetails/CollectionCaseDetail.tsx
View File

@@ -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<ICaseDetails> = 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<ICaseDetails> = props => {
{addressString}
</Text>
<Button
onPress={addressCta}
onPress={() => handleRouting(PageRouteEnum.ADDRESS_GEO)}
title="View all addresses"
variant="primaryText"
textStyle={[

1
src/screens/caseDetails/interface.ts
View File

@@ -155,6 +155,7 @@ export interface CaseDetail {
pos: number;
dpdBucket: string;
currentAllocationReferenceId: string;
customerReferenceId: string;
// collection case
addressString?: string;
currentOutstandingEmi?: number;

5
src/types/addressGeolocation.types.ts
View File

@@ -40,3 +40,8 @@ export interface IAddressGeoLocation {
addressL1ViewList?: AddressL1Details[];
unmatchedGeoLocations?: IGeoLocation[];
}
export interface IAddressGeolocationPayload {
loanaccountnumber: string;
customerreferenceid: string;
}