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

Refactor code | Added Geolocation Journey

Browse Source
This commit is contained in:
himanshu-kansal
2023-01-03 11:04:12 +05:30
parent daaec3178e
commit fa64860f4b
6 changed files with 100 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/form/QuestionRenderingEngine.tsx
View File

@@ -9,7 +9,6 @@ import Rating from './components/Rating';
import TextArea from './components/TextArea';
import TextInput from './components/TextInput';
import Dropdown from './components/Dropdown';
import Address from './components/Address';
const Component = {
TextInput,
@@ -20,7 +19,6 @@ const Component = {
Rating,
Dropdown,
CheckboxGroup,
Address
};
interface IQuestionRenderingEngine {
@@ -42,7 +40,6 @@ const QuestionRenderingEngine: React.FC<IQuestionRenderingEngine> = props => {
if (!Comp) {
return null;
}
console.log(Comp)
return (
<View>
<Comp {...props} />

41
src/components/form/components/Address.tsx
View File

@@ -1,4 +1,4 @@
import {StyleSheet, View} from 'react-native';
import {Linking, View} from 'react-native';
import React from 'react';
import Text from '../../../../RN-UI-LIB/src/components/Text';
import Heading from '../../../../RN-UI-LIB/src/components/Heading';
@@ -7,15 +7,20 @@ import { GenericStyles } from '../../../../RN-UI-LIB/src/styles';
import { useAppSelector } from '../../../hooks';
import { Address as IAddressType, TaskTitle } from '../../../screens/allCases/interface';
import { Task } from '../../../screens/caseDetails/interface';
import MapPinIcon from '../../../../RN-UI-LIB/src/Icons/MapPinIcon';
interface IAddress {
caseId: string;
questionId: string;
}
const getAddress = (address: IAddressType) => {
const getAddress = (address?: IAddressType) => {
if(!address) return '';
return `${address.houseNumber} ${address.lineOne} ${address.lineTwo} ${address.locality} ${address.city} ${address.pinCode} ${address.state}`
return (`${address.houseNumber} ${address.lineOne} ${address.lineTwo} ${address.locality} ${address.city} ${address.pinCode} ${address.state}`).replace(/\s{2,}/g,' ');
}
const SeparatorBorderComponent = () => {
return <View style={[GenericStyles.dashedBorder, GenericStyles.my8]}></View>;
}
const Address: React.FC<IAddress> = props => {
@@ -25,7 +30,7 @@ const Address: React.FC<IAddress> = props => {
const question =
template.questions[questionId as keyof typeof template.questions];
const { showCommunicationAddress = true, showPermanentAddress = true } = question?.metadata || {};
const { showCommunicationAddress = false, showPermanentAddress = false, showGeoLocationAddress = false } = question?.metadata || {};
const caseTaskList = useAppSelector(
@@ -34,12 +39,27 @@ const Address: React.FC<IAddress> = props => {
const permanentAddressMetaData = caseTaskList.find((task: Task) => task.taskType === TaskTitle.PERMANENT_ADDRESS_VERIFICATION_TASK)?.metadata;
const communicationAddressMetaData = caseTaskList.find((task: Task) => task.taskType === TaskTitle.COMMUNICATION_ADDRESS_VERIFICATION_TASK)?.metadata;
const geoLocationAddressMetaData = caseTaskList.find((task: Task) => task.taskType === TaskTitle.GEO_LOCATION_VERIFICATION_TASK)?.metadata;
const openGeolocation = () => {
const geolocationUrl = geoLocationAddressMetaData?.geoLocation;
if(!geolocationUrl) return;
return Linking.openURL(geolocationUrl);
}
return (
<>
<View style={[GenericStyles.pb16, GenericStyles.pt16]}>
{
showGeoLocationAddress && (
<Text light bold style={[{color: COLORS.BASE.BLUE}]} onPress={openGeolocation}>
Open geo location
</Text>
)
}
{
showCommunicationAddress && (
<View style={GenericStyles.pb16}>
<View>
<Heading type={'h5'} bold style={[{color: COLORS.TEXT.DARK}, GenericStyles.fw500]}>
Communication address
</Heading>
@@ -47,9 +67,12 @@ const Address: React.FC<IAddress> = props => {
</View>
)
}
{
showCommunicationAddress && showPermanentAddress && <SeparatorBorderComponent />
}
{
showPermanentAddress && (
<View style={GenericStyles.pb16}>
<View>
<Heading type={'h5'} bold style={[{color: COLORS.TEXT.DARK}, GenericStyles.fw500]}>
Permanent address
</Heading>
@@ -57,10 +80,8 @@ const Address: React.FC<IAddress> = props => {
</View>
)
}
</>
</View>
);
};
export default Address;
const styles = StyleSheet.create({});

11
src/components/form/components/RadioButton.tsx
View File

@@ -14,6 +14,7 @@ import QuestionRenderingEngine from '../QuestionRenderingEngine';
import ErrorMessage from './ErrorMessage';
import {AnswerType} from '../interface';
import {useAppSelector} from '../../../hooks';
import Address from './Address';
interface IRadioButton {
questionType: string;
@@ -26,6 +27,10 @@ interface IRadioButton {
error: any;
}
const AdditionalDetailsComponentMap = {
Address
};
const RadioButton: React.FC<IRadioButton> = props => {
const {questionId, widgetId, journeyId, caseId, sectionId, error} = props;
const template = useAppSelector(state => state.case.templateData);
@@ -68,6 +73,9 @@ const RadioButton: React.FC<IRadioButton> = props => {
});
};
// @ts-ignore
const AdditionalComponent = AdditionalDetailsComponentMap[question.metadata.additionalDetailsComponent];
return (
<View style={GenericStyles.mt12}>
<Text dark bold>
@@ -76,6 +84,9 @@ const RadioButton: React.FC<IRadioButton> = props => {
<Text style={GenericStyles.redText}>*</Text>
)}
</Text>
{
AdditionalComponent && <AdditionalComponent {...question.metadata} caseId={props.caseId} questionId={props.questionId} />
}
<Controller
control={props.control}
rules={{

5
src/components/form/index.tsx
View File

@@ -22,6 +22,7 @@ import {RootState} from '../../store/store';
import {goBack, navigateToScreen, popToScreen, pushToScreen} from '../utlis/navigationUtlis';
import {ConditionType, IDecision, ILeaf} from './interface';
import RenderQuestion from './RenderQuestion';
import { TaskTitleUIMapping } from '../../screens/allCases/interface';
const CASE_DETAIL_SCREEN_NAME = 'caseDetail';
@@ -234,9 +235,9 @@ const Widget: React.FC<IWidget> = props => {
type={'h5'}
bold
style={[GenericStyles.whiteText]}>
Add feedback for Kunal {name}
Add feedback for {name}
</Heading>
<Text light>Communication address</Text>
<Text light>{TaskTitleUIMapping[journey]}</Text>
</View>
</View>
</View>

66
src/data/RealTemplateData.json
View File

@@ -275,7 +275,26 @@
}
},
"isLeaf": false
}
},
"w9": {
"sections": [
"s14"
],
"transitionRules": {
"conditions": {
"operator": "MATCHES",
"conditionType": "LEAF_NODE",
"left": "q26",
"right": "o3",
"section": "s14"
},
"actions": {
"true": "w1",
"false": "w9" // todo: Design pending
}
},
"isLeaf": false
},
},
"questions": {
"q1": {
@@ -561,18 +580,6 @@
"formattingType": "textbox"
}
},
"q22": {
"inputType": "Address",
"metadata": {
}
},
"q23": {
"inputType": "Address",
"options": [],
"metadata": {
"showCommunicationAddress": false
}
},
"q24": {
"text": "Is the permanent address same as communication address?",
"type": "Mandatory",
@@ -583,7 +590,10 @@
],
"metadata": {
"buttonType": "button",
"orientation": "vertical"
"orientation": "vertical",
"additionalDetailsComponent": "Address",
"showCommunicationAddress": true,
"showPermanentAddress": true
}
},
"q25": {
@@ -596,7 +606,24 @@
],
"metadata": {
"buttonType": "button",
"orientation": "vertical"
"orientation": "vertical",
"additionalDetailsComponent": "Address",
"showPermanentAddress": false,
}
},
"q26": {
"text": "Last geo location within 5 kms of your current location?",
"type": "Mandatory",
"inputType": "RadioButton",
"options": [
"o3",
"o4"
],
"metadata": {
"buttonType": "button",
"orientation": "vertical",
"additionalDetailsComponent": "Address",
"showGeoLocationAddress": true
}
}
},
@@ -960,15 +987,18 @@
},
"s12": {
"questions": [
"q22",
"q24"
]
},
"s13": {
"questions": [
"q23",
"q25"
]
}
},
"s14": {
"questions": [
"q26"
]
},
}
}

8
src/screens/caseDetails/journeyStepper/TaskStepper.tsx
View File

@@ -125,7 +125,7 @@ const TaskStepper: React.FC<ITaskStepper> = props => {
onPress={() =>
navigateToScreen('w1', {
caseId: caseDetail.id,
journey: 'CALLING_TASK',
journey: 'COMMUNICATION_ADDRESS_VERIFICATION_TASK',
})
}
/>
@@ -140,6 +140,12 @@ const TaskStepper: React.FC<ITaskStepper> = props => {
})
}
/>
<Button
style={[styles.callCustomerButton]}
title="Trigger GeoLocation"
variant="secondary"
onPress={() => navigateToScreen('w9', {caseId: caseDetail.id, journey: 'GEO_LOCATION_VERIFICATION_TASK'})}
/>
<View style={[GenericStyles.row, styles.journeyContainer]}>
<Button
style={[styles.callCustomerButton]}