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

Merge pull request #15 from medici/temp/flow-fixes

Browse Source 
Fixes -> Spelling Mistake | Case Details Screen - Action Button Visibility
This commit is contained in:
Aman Singh
2022-12-30 12:31:38 +05:30
committed by GitHub Enterprise
parent a9dd6971c7 f7b859a4b1
commit ac6320a4db
8 changed files with 248 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,6 +9,7 @@ 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,
@@ -18,7 +19,8 @@ const Component = {
Checkbox,
Rating,
Dropdown,
CheckboxGroup
CheckboxGroup,
Address
};
interface IQuestionRenderingEngine {

66
src/components/form/components/Address.tsx Normal file
View File

@@ -0,0 +1,66 @@
import {StyleSheet, 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';
import { COLORS } from '../../../../RN-UI-LIB/src/styles/colors';
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';
interface IAddress {
caseId: string;
questionId: string;
}
const getAddress = (address: IAddressType) => {
if(!address) return '';
return `${address.houseNumber} ${address.lineOne} ${address.lineTwo} ${address.locality} ${address.city} ${address.pinCode} ${address.state}`
}
const Address: React.FC<IAddress> = props => {
const { caseId, questionId } = props;
const template = useAppSelector(state => state.case.templateData);
const question =
template.questions[questionId as keyof typeof template.questions];
const { showCommunicationAddress = true, showPermanentAddress = true } = question?.metadata || {};
const caseTaskList = useAppSelector(
state => state.allCases.caseDetails[caseId].tasks,
);
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;
return (
<>
{
showCommunicationAddress && (
<View style={GenericStyles.pb16}>
<Heading type={'h5'} bold style={[{color: COLORS.TEXT.DARK}, GenericStyles.fw500]}>
Communication address
</Heading>
<Text light bold>{getAddress(communicationAddressMetaData?.address)}</Text>
</View>
)
}
{
showPermanentAddress && (
<View style={GenericStyles.pb16}>
<Heading type={'h5'} bold style={[{color: COLORS.TEXT.DARK}, GenericStyles.fw500]}>
Permanent address
</Heading>
<Text light bold>{getAddress(permanentAddressMetaData?.address)}</Text>
</View>
)
}
</>
);
};
export default Address;
const styles = StyleSheet.create({});

4
src/components/form/components/CheckboxGroup.tsx
View File

@@ -12,6 +12,7 @@ import { RootState } from '../../../store/store';
import { AnswerType } from '../interface';
import QuestionRenderingEngine from '../QuestionRenderingEngine';
import ErrorMessage from './ErrorMessage';
import { _map } from '../../../../RN-UI-LIB/src/utlis/common';
interface ICheckBoxGroup {
questionType: string;
@@ -63,8 +64,7 @@ const CheckBoxGroup: React.FC<ICheckBoxGroup> = props => {
change: any,
onChange: (...event: any[]) => void,
) => {
console.log(change, "change")
const values = Object.keys(change);
const values = _map(change, (key) => key);
onChange({
answer: values,
type: AnswerType.array,

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

@@ -86,7 +86,7 @@ const RadioButton: React.FC<IRadioButton> = props => {
value={value?.answer}
onValueChange={change => handleChange(change, onChange)}
orientation={
question.metadata.orientation || 'verticle'
question.metadata.orientation || 'vertical'
}>
{question?.metadata.buttonType === 'button'
? question.options.map((option: keyof typeof options) => {

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

@@ -2,11 +2,12 @@ import React, {useState} from 'react';
import {useForm} from 'react-hook-form';
import {Pressable, ScrollView, StyleSheet, View} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import { useNavigationState } from '@react-navigation/native';
import {useDispatch, useSelector} from 'react-redux';
import Button from '../../../RN-UI-LIB/src/components/Button';
import Heading from '../../../RN-UI-LIB/src/components/Heading';
import Text from '../../../RN-UI-LIB/src/components/Text';
import BackArrowIcon from '../../../RN-UI-LIB/src/Icons/BackArrowIcon';
import ArrowSolidIcon from '../../../RN-UI-LIB/src/Icons/ArrowSolidIcon';
import CloseIcon from '../../../RN-UI-LIB/src/Icons/CloseIcon';
import {GenericStyles, getShadowStyle} from '../../../RN-UI-LIB/src/styles';
import {COLORS} from '../../../RN-UI-LIB/src/styles/colors';
@@ -22,6 +23,8 @@ import {goBack, navigateToScreen, popToScreen, pushToScreen} from '../utlis/navi
import {ConditionType, IDecision, ILeaf} from './interface';
import RenderQuestion from './RenderQuestion';
const CASE_DETAIL_SCREEN_NAME = 'caseDetail';
interface IWidget {
route: {
name: string;
@@ -29,10 +32,15 @@ interface IWidget {
caseId: string;
journey: string;
};
};
}
}
const Widget: React.FC<IWidget> = props => {
const navigationRoutes = useNavigationState(state => state.routes);
const previousScreenRoute = navigationRoutes[navigationRoutes.length - 2];
const [isJourneyFirstScreen] = useState(previousScreenRoute.name === CASE_DETAIL_SCREEN_NAME);
const {name, params} = props.route;
const {caseId, journey} = params;
const templateData = useAppSelector(state => state.case.templateData);
@@ -283,30 +291,35 @@ const Widget: React.FC<IWidget> = props => {
GenericStyles.p16,
styles.borderTop,
]}>
{
!isJourneyFirstScreen && (
<Button
variant={'secondary'}
style={[styles.autoFlex, styles.mH16]}
title={'Back'}
onPress={() => {
dispatch(
deleteInteraction({
caseId,
journeyId: journey,
widgetId: name,
}),
);
goBack();
}}
leftIcon={<ArrowSolidIcon size={10} />}
/>
)
}
<Button
variant={'secondary'}
style={styles.fb45}
title={'Back'}
onPress={() => {
dispatch(
deleteInteraction({
caseId,
journeyId: journey,
widgetId: name,
}),
);
goBack();
}}
leftIcon={<BackArrowIcon size={10} />}
/>
<Button
style={styles.fb45}
style={[styles.autoFlex, styles.mH16]}
title={isLeaf ? 'Submit' : 'Next'}
onPress={
isLeaf
? handleSubmit(handleSubmitJourney, onError)
: handleSubmit(onSubmit, onError)
}
rightIcon={!isLeaf && <ArrowSolidIcon size={10} fillColor={COLORS.TEXT.WHITE} rotateY={180} />}
/>
</View>
</SafeAreaView>
@@ -317,13 +330,17 @@ const styles = StyleSheet.create({
br8: {
borderRadius: 8,
},
autoFlex: {
flexGrow: 1,
flexBasis: 0
},
mH16: {
marginHorizontal: 16
},
borderTop: {
borderTopColor: COLORS.BORDER.PRIMARY,
borderTopWidth: 1,
},
fb45: {
flexBasis: '45%',
},
});
export default Widget;

145
src/data/RealTemplateData.json
View File

@@ -17,7 +17,7 @@
"actions": {
"true": {
"status": "VERIFICATION_SUCCESS",
"nextJourney": "PERMANENT_ADDRESS_VERIFICATION_TASK"
"nextJourney": ""
},
"false":{
"status": "VERIFICATION_FAILED",
@@ -26,6 +26,15 @@
}
},
"isLeaf": false
},
"PERMANENT_ADDRESS_VERIFICATION_TASK": {
"id": "PERMANENT_ADDRESS_VERIFICATION_TASK",
"name": "Permanent",
"journeyType": "address_verification",
"startWidget": "w7",
"transitionRules": { // todo: discussion transitionRules with @aman-singh
},
"isLeaf": false
}
},
"widget": {
@@ -46,7 +55,7 @@
"false": "w3"
}
},
"isLeaf": false
"isLeaf": false
},
"w2": {
"sections": [
@@ -98,7 +107,8 @@
"s4",
"s5",
"s6",
"s7"
"s7",
"s11"
],
"isLeaf": false
},
@@ -128,6 +138,44 @@
"s10"
],
"isLeaf": true
},
"w7": {
"sections": [
"s12"
],
"transitionRules": {
"conditions": {
"operator": "MATCHES",
"conditionType": "LEAF_NODE",
"left": "q24",
"right": "o3",
"section": "s12"
},
"actions": {
"true": "w7", // todo: Design pending
"false": "w8"
}
},
"isLeaf": false
},
"w8": {
"sections": [
"s13"
],
"transitionRules": {
"conditions": {
"operator": "MATCHES",
"conditionType": "LEAF_NODE",
"left": "q25",
"right": "o3",
"section": "s13"
},
"actions": {
"true": "w1",
"false": "w8" // todo: Design pending
}
},
"isLeaf": false
}
},
"questions": {
@@ -141,11 +189,11 @@
],
"metadata": {
"buttonType": "button",
"orientation": "verticle"
"orientation": "vertical"
}
},
"q2": {
"text": "Did you meet customer in person?",
"text": "Did you meet the customer in person?",
"type": "mandatory",
"inputType": "RadioButton",
"options": [
@@ -154,7 +202,7 @@
],
"metadata": {
"buttonType": "button",
"orientation": "verticle"
"orientation": "vertical"
}
},
"q3": {
@@ -171,7 +219,7 @@
}
},
"q4": {
"text": "what is incorrect with address?",
"text": "What is incorrect with the address?",
"type": "mandatory",
"inputType": "RadioButton",
"options": [
@@ -180,7 +228,7 @@
],
"metadata": {
"buttonType": "button",
"orientation": "verticle"
"orientation": "vertical"
}
},
"q5": {
@@ -197,7 +245,7 @@
],
"metadata": {
"buttonType": "button",
"orientation": "verticle"
"orientation": "vertical"
}
},
"q6": {
@@ -213,7 +261,7 @@
],
"metadata": {
"buttonType": "button",
"orientation": "verticle"
"orientation": "vertical"
}
},
"q7": {
@@ -304,7 +352,7 @@
],
"metadata": {
"buttonType": "button",
"orientation": "verticle"
"orientation": "vertical"
}
},
"q14": {
@@ -321,7 +369,7 @@
],
"metadata": {
"buttonType": "button",
"orientation": "verticle"
"orientation": "vertical"
}
},
"q15": {
@@ -344,7 +392,7 @@
],
"metadata": {
"buttonType": "button",
"orientation": "verticle"
"orientation": "vertical"
}
},
"q17": {
@@ -359,7 +407,7 @@
],
"metadata": {
"buttonType": "button",
"orientation": "verticle"
"orientation": "vertical"
}
},
"q18": {
@@ -375,7 +423,7 @@
],
"metadata": {
"buttonType": "radio",
"orientation": "verticle"
"orientation": "vertical"
}
},
"q19": {
@@ -395,7 +443,7 @@
],
"metadata": {
"buttonType": "radio",
"orientation": "verticle"
"orientation": "vertical"
}
},
"q20": {
@@ -404,6 +452,53 @@
"inputType": "ImageUpload",
"options": [],
"metadata": {}
},
"q21": {
"text": "Additional comments",
"type": "notMandatory",
"inputType": "TextInput",
"options": [],
"metadata": {
"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",
"inputType": "RadioButton",
"options": [
"o3",
"o4"
],
"metadata": {
"buttonType": "button",
"orientation": "vertical"
}
},
"q25": {
"text": "Is the permanent address within 5 kms as communication address?",
"type": "Mandatory",
"inputType": "RadioButton",
"options": [
"o3",
"o4"
],
"metadata": {
"buttonType": "button",
"orientation": "vertical"
}
}
},
"options": {
@@ -755,10 +850,26 @@
]
},
"s10":{
"label": "aojsi",
"questions":[
"q20"
]
},
"s11": {
"questions": [
"q21"
]
},
"s12": {
"questions": [
"q22",
"q24"
]
},
"s13": {
"questions": [
"q23",
"q25"
]
}
}
}

2
src/screens/allCases/interface.ts
View File

@@ -128,7 +128,7 @@ export interface CurrentTask {
export enum TaskTitleUIMapping {
COMMUNICATION_ADDRESS_VERIFICATION_TASK = "Communication Address",
PERMANENT_ADDRESS_VERIFICATION_TASK = "Parmanent Address",
PERMANENT_ADDRESS_VERIFICATION_TASK = "Permanent Address",
GEO_LOCATION_VERIFICATION_TASK = "Geolocation",
CALLING_TASK = "Calling",
NEW_ADDRESS_VERIFICATION_TASK = "New Address"

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

@@ -30,8 +30,8 @@ interface ITaskStepper {
caseDetail: any;
}
const TaskStepper: React.FC<ITaskStepper> = porps => {
const {caseDetail} = porps;
const TaskStepper: React.FC<ITaskStepper> = props => {
const {caseDetail} = props;
const [showPhoneNumberBottomSheet, setShowPhoneNumberBottomSheet] =
React.useState(false);
const [showCallingBottomSheet, setShowCallingBottomSheet] =
@@ -115,6 +115,12 @@ const TaskStepper: React.FC<ITaskStepper> = porps => {
variant="secondary"
onPress={() => navigateToScreen('w1', {caseId: caseDetail.id, journey: 'COMMUNICATION_ADDRESS_VERIFICATION_TASK'})}
/>
<Button
style={[styles.callCustomerButton]}
title="Trigger Permanent"
variant="secondary"
onPress={() => navigateToScreen('w7', {caseId: caseDetail.id, journey: 'PERMANENT_ADDRESS_VERIFICATION_TASK'})}
/>
<View style={[GenericStyles.row, styles.journeyContainer]}>
<Button
style={[styles.callCustomerButton]}