Merge pull request #17 from medici/av/permanent-address-journey

Added Permanent Journey || Himanshu

src/components/form/QuestionRenderingEngine.tsx

@@ -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 {

src/components/form/components/Address.tsx

@@ -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({});

src/components/form/index.tsx

@@ -2,6 +2,7 @@ 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';
@@ -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,17 +32,22 @@ 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);
     const caseData = useAppSelector(
         state => state.allCases.caseDetails[caseId],
     );
-    const {sections, transitionRules, isLeaf, isRoot} = templateData.widget[name];
+    const {sections, transitionRules, isLeaf} = templateData.widget[name];
     const sectionMap = templateData.sections;
     const {actions, conditions} = transitionRules;
     const [error, setError] = useState();
@@ -284,7 +292,7 @@ const Widget: React.FC<IWidget> = props => {
                     styles.borderTop,
                 ]}>
                 {
-                    !isRoot && (
+                    !isJourneyFirstScreen && (
                         <Button
                             variant={'secondary'}
                             style={[styles.autoFlex, styles.mH16]}

src/data/RealTemplateData.json

@@ -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,8 +55,7 @@
                     "false": "w3"
                 }
             },
-            "isLeaf": false,
-            "isRoot": true
+            "isLeaf": false 
         },
         "w2": {
             "sections": [
@@ -99,7 +107,8 @@
                 "s4",
                 "s5",
                 "s6",
-                "s7"
+                "s7",
+                "s11"
             ],
             "isLeaf": false
         },
@@ -129,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": {
@@ -405,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": {
@@ -759,6 +853,23 @@
             "questions":[
                 "q20"
             ]
+        },
+        "s11": {
+            "questions": [
+                "q21"
+            ]
+        },
+        "s12": {
+            "questions": [
+                "q22",
+                "q24"
+            ]
+        },
+        "s13": {
+            "questions": [
+                "q23",
+                "q25"
+            ]
         }
     }
 }

src/screens/allCases/interface.ts

@@ -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"

src/screens/caseDetails/journeyStepper/TaskStepper.tsx

@@ -104,6 +104,12 @@ const TaskStepper: React.FC<ITaskStepper> = props => {
                 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]}