From f7ea54f9769f04bf3582fa88fc237403fbf0c122 Mon Sep 17 00:00:00 2001 From: kunalsharma Date: Mon, 12 Dec 2022 17:07:29 +0530 Subject: [PATCH] @TP-12803 case details --- App.tsx | 8 +- src/assets/icons/BulletIcon.tsx | 10 + src/assets/icons/CalViaSimIcon.tsx | 22 +++ src/assets/icons/CalenderIcon.tsx | 22 +++ src/assets/icons/DocumentIcon.tsx | 13 ++ src/assets/icons/LocationIcon.tsx | 22 +++ src/assets/icons/TickIcon.tsx | 18 ++ src/assets/icons/UnsyncedIcon.tsx | 22 +++ src/assets/icons/WhatsAppIcon.tsx | 15 ++ src/common/IconLabel.tsx | 44 +++++ src/components/caseDetails/CaseDetails.tsx | 17 +- .../caseDetails/UserDetailsSection.tsx | 79 +++++++- .../journeyStepper/CallingBottomSheet.tsx | 73 +++++++ .../PhoneNumberSelectionBottomSheet.tsx | 90 +++++++++ .../journeyStepper/StepperHeader.tsx | 94 +++++++++ .../journeyStepper/TaskContent.tsx | 39 ++++ .../journeyStepper/TaskStepper.tsx | 186 ++++++++++++++++++ src/reducer/caseReducre.ts | 139 ++++++++++++- src/store/store.ts | 3 +- 19 files changed, 899 insertions(+), 17 deletions(-) create mode 100644 src/assets/icons/BulletIcon.tsx create mode 100644 src/assets/icons/CalViaSimIcon.tsx create mode 100644 src/assets/icons/CalenderIcon.tsx create mode 100644 src/assets/icons/DocumentIcon.tsx create mode 100644 src/assets/icons/LocationIcon.tsx create mode 100644 src/assets/icons/TickIcon.tsx create mode 100644 src/assets/icons/UnsyncedIcon.tsx create mode 100644 src/assets/icons/WhatsAppIcon.tsx create mode 100644 src/common/IconLabel.tsx create mode 100644 src/components/caseDetails/journeyStepper/CallingBottomSheet.tsx create mode 100644 src/components/caseDetails/journeyStepper/PhoneNumberSelectionBottomSheet.tsx create mode 100644 src/components/caseDetails/journeyStepper/StepperHeader.tsx create mode 100644 src/components/caseDetails/journeyStepper/TaskContent.tsx create mode 100644 src/components/caseDetails/journeyStepper/TaskStepper.tsx diff --git a/App.tsx b/App.tsx index e3905a57..6641dce2 100644 --- a/App.tsx +++ b/App.tsx @@ -21,7 +21,7 @@ import {NavigationContainer} from '@react-navigation/native'; import {createNativeStackNavigator} from '@react-navigation/native-stack'; import Widget from './src/components/form'; import {navigationRef} from './src/components/utlis/navigationUtlis'; -import {GenericStyles} from './RN-UI-LIB/src/styles'; +import CaseDetails from './src/components/caseDetails/CaseDetails'; function HomeScreen() { return ( @@ -44,7 +44,11 @@ const App = () => { persistor={persistor}> - + {/**/} + {Object.keys(data.widgets).map(key => ( ( + + + +); + +export default BulletIcon; diff --git a/src/assets/icons/CalViaSimIcon.tsx b/src/assets/icons/CalViaSimIcon.tsx new file mode 100644 index 00000000..ee9647a0 --- /dev/null +++ b/src/assets/icons/CalViaSimIcon.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import Svg, {Mask, Rect, G, Path} from 'react-native-svg'; +const CallViaSimIcon = () => ( + + + + + + + + +); +export default CallViaSimIcon; diff --git a/src/assets/icons/CalenderIcon.tsx b/src/assets/icons/CalenderIcon.tsx new file mode 100644 index 00000000..26ac7cd5 --- /dev/null +++ b/src/assets/icons/CalenderIcon.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import Svg, {Mask, Rect, G, Path} from 'react-native-svg'; +const SVGComponent = () => ( + + + + + + + + +); +export default SVGComponent; diff --git a/src/assets/icons/DocumentIcon.tsx b/src/assets/icons/DocumentIcon.tsx new file mode 100644 index 00000000..8f740183 --- /dev/null +++ b/src/assets/icons/DocumentIcon.tsx @@ -0,0 +1,13 @@ +import * as React from 'react'; +import Svg, {Path} from 'react-native-svg'; + +const DocumentIcon = () => ( + + + +); + +export default DocumentIcon; diff --git a/src/assets/icons/LocationIcon.tsx b/src/assets/icons/LocationIcon.tsx new file mode 100644 index 00000000..d868c725 --- /dev/null +++ b/src/assets/icons/LocationIcon.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import Svg, {Mask, Rect, G, Path} from 'react-native-svg'; +const LocationIcon = () => ( + + + + + + + + +); +export default LocationIcon; diff --git a/src/assets/icons/TickIcon.tsx b/src/assets/icons/TickIcon.tsx new file mode 100644 index 00000000..9f41f2a0 --- /dev/null +++ b/src/assets/icons/TickIcon.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import Svg, {Path} from 'react-native-svg'; + +interface TickIconProps { + color: string; +} + +const TickIcon = ({color}: TickIconProps) => ( + + + +); +export default TickIcon; diff --git a/src/assets/icons/UnsyncedIcon.tsx b/src/assets/icons/UnsyncedIcon.tsx new file mode 100644 index 00000000..2dd917f7 --- /dev/null +++ b/src/assets/icons/UnsyncedIcon.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import Svg, {Mask, Rect, G, Path} from 'react-native-svg'; +const UnsyncedIcon = () => ( + + + + + + + + +); +export default UnsyncedIcon; diff --git a/src/assets/icons/WhatsAppIcon.tsx b/src/assets/icons/WhatsAppIcon.tsx new file mode 100644 index 00000000..c2157d71 --- /dev/null +++ b/src/assets/icons/WhatsAppIcon.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; +import Svg, {Path} from 'react-native-svg'; +const WhatsAppIcon = () => ( + + + + +); +export default WhatsAppIcon; diff --git a/src/common/IconLabel.tsx b/src/common/IconLabel.tsx new file mode 100644 index 00000000..d679fbf3 --- /dev/null +++ b/src/common/IconLabel.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import { + StyleProp, + StyleSheet, + TextStyle, + View, + ViewStyle as RNViewStyle, +} from 'react-native'; +import Text from '../../RN-UI-LIB/src/components/Text'; +import BulletIcon from '../assets/icons/BulletIcon'; + +interface IconLabelProps { + icon?: React.ReactNode; + text: string; + iconStyle?: StyleProp; + textStyle?: StyleProp; + containerStyle?: StyleProp; +} + +const IconLabel: React.FC = props => { + const {icon, text, iconStyle, textStyle, containerStyle} = props; + return ( + + + {icon ? icon : } + + {text} + + ); +}; + +export default IconLabel; + +const styles = StyleSheet.create({ + container: { + flexDirection: 'row', + alignItems: 'center', + }, + icon: { + marginRight: 10, + lineHeight: 23, + width: 10, + }, +}); diff --git a/src/components/caseDetails/CaseDetails.tsx b/src/components/caseDetails/CaseDetails.tsx index d504d4ae..80e774d6 100644 --- a/src/components/caseDetails/CaseDetails.tsx +++ b/src/components/caseDetails/CaseDetails.tsx @@ -1,19 +1,16 @@ import React from 'react'; -import {StyleSheet, View} from 'react-native'; +import {SafeAreaView} from 'react-native'; import UserDetailsSection from './UserDetailsSection'; +import {GenericStyles} from '../../../RN-UI-LIB/src/styles'; +import TaskStepper from './journeyStepper/TaskStepper'; -const CaseDetails: React.FC = props => { +const CaseDetails: React.FC = () => { return ( - + - + + ); }; -const styles = StyleSheet.create({ - caseDetailscontainer: { - paddingHorizontal: 16, - }, -}); - export default CaseDetails; diff --git a/src/components/caseDetails/UserDetailsSection.tsx b/src/components/caseDetails/UserDetailsSection.tsx index 6cd26016..19931991 100644 --- a/src/components/caseDetails/UserDetailsSection.tsx +++ b/src/components/caseDetails/UserDetailsSection.tsx @@ -1,8 +1,81 @@ import React from 'react'; -import {View} from 'react-native'; +import {StyleSheet, View} from 'react-native'; +import {useSelector} from 'react-redux'; +import {RootState} from '../../store/store'; +import Avatar from '../../../RN-UI-LIB/src/components/Avatar'; +import Heading from '../../../RN-UI-LIB/src/components/Heading'; +import {GenericStyles} from '../../../RN-UI-LIB/src/styles'; +import DocumentIcon from '../../assets/icons/DocumentIcon'; +import IconLabel from '../../common/IconLabel'; +import CalenderIcon from '../../assets/icons/CalenderIcon'; +import Text from '../../../RN-UI-LIB/src/components/Text'; +import {COLORS} from '../../../RN-UI-LIB/src/styles/colors'; -const UserDetailsSection: React.FC = props => { - return ; +const UserDetailsSection: React.FC = () => { + const {loanDetails, customerDetails} = useSelector((state: RootState) => ({ + loanDetails: state.case.loanDetails, + customerDetails: state.case.customerInfo, + })); + const disbursalDate = loanDetails.disbursalDate; + const allocationDate = loanDetails.allocationDate; + + return ( + + + + + + + {customerDetails.customerName} + + + } + text={loanDetails.loanType} + /> + + + + } + text={disbursalDate} + containerStyle={{flex: 0.5}} + /> + + + + + Allocated on {allocationDate} + + + + + ); }; +const styles = StyleSheet.create({ + avatarContainer: { + height: 60, + width: 60, + flex: 0.2, + }, + container: { + borderBottomWidth: 1, + borderBottomColor: COLORS.BORDER.PRIMARY, + }, + infoContainer: { + flex: 0.6, + }, +}); + export default UserDetailsSection; diff --git a/src/components/caseDetails/journeyStepper/CallingBottomSheet.tsx b/src/components/caseDetails/journeyStepper/CallingBottomSheet.tsx new file mode 100644 index 00000000..eaabb573 --- /dev/null +++ b/src/components/caseDetails/journeyStepper/CallingBottomSheet.tsx @@ -0,0 +1,73 @@ +import {Linking, TouchableOpacity, View} from 'react-native'; +import BottomSheet from '../../../../RN-UI-LIB/src/components/bottom_sheet/BottomSheet'; +import {GenericStyles} from '../../../../RN-UI-LIB/src/styles'; +import Heading from '../../../../RN-UI-LIB/src/components/Heading'; +import CloseIcon from '../../../../RN-UI-LIB/src/Icons/CloseIcon'; +import {COLORS} from '../../../../RN-UI-LIB/src/styles/colors'; +import IconLabel from '../../../common/IconLabel'; +import CallViaSimIcon from '../../../assets/icons/CalViaSimIcon'; +import WhatsAppIcon from '../../../assets/icons/WhatsAppIcon'; +import React from 'react'; +import {styles} from './TaskStepper'; + +interface CallingBottomSheetProps { + selectedPhoneNumber: string; + showCallingBottomSheet: boolean; + setShowCallingBottomSheet: React.Dispatch>; +} + +const CallingBottomSheet: React.FC = props => { + const { + selectedPhoneNumber, + showCallingBottomSheet, + setShowCallingBottomSheet, + } = props; + const callViaSim = () => { + Linking.openURL(`tel:${selectedPhoneNumber}`); + }; + const callViaWhatsapp = () => { + Linking.openURL(`whatsapp://send?phone=${selectedPhoneNumber}`); + }; + return ( + setShowCallingBottomSheet(prev => !prev)}> + + + + Call {selectedPhoneNumber} Via + + + setShowCallingBottomSheet(prev => !prev) + }> + + + + + } /> + + + } /> + + + + ); +}; + +export default CallingBottomSheet; diff --git a/src/components/caseDetails/journeyStepper/PhoneNumberSelectionBottomSheet.tsx b/src/components/caseDetails/journeyStepper/PhoneNumberSelectionBottomSheet.tsx new file mode 100644 index 00000000..44861952 --- /dev/null +++ b/src/components/caseDetails/journeyStepper/PhoneNumberSelectionBottomSheet.tsx @@ -0,0 +1,90 @@ +import {ScrollView, TouchableOpacity, View} from 'react-native'; +import {GenericStyles} from '../../../../RN-UI-LIB/src/styles'; +import Heading from '../../../../RN-UI-LIB/src/components/Heading'; +import CloseIcon from '../../../../RN-UI-LIB/src/Icons/CloseIcon'; +import {COLORS} from '../../../../RN-UI-LIB/src/styles/colors'; +import Options from '../../../../RN-UI-LIB/src/components/dropdown/Options'; +import Button from '../../../../RN-UI-LIB/src/components/Button'; +import BottomSheet from '../../../../RN-UI-LIB/src/components/bottom_sheet/BottomSheet'; +import React from 'react'; +import {styles} from './TaskStepper'; + +interface PhoneNumberSelectionBottomSheetProps { + showPhoneNumberBottomSheet: boolean; + setShowPhoneNumberBottomSheet: React.Dispatch< + React.SetStateAction + >; + mobileNumbers: string[]; + setShowCallingBottomSheet: React.Dispatch>; + selectedPhoneNumber: string; + setSelectedPhoneNumber: React.Dispatch>; +} + +const PhoneNumberSelectionBottomSheet: React.FC< + PhoneNumberSelectionBottomSheetProps +> = props => { + const { + setShowPhoneNumberBottomSheet, + showPhoneNumberBottomSheet, + mobileNumbers, + setShowCallingBottomSheet, + selectedPhoneNumber, + setSelectedPhoneNumber, + } = props; + return ( + setShowPhoneNumberBottomSheet(prev => !prev)}> + + + <> + + + Customer's Number + + + setShowPhoneNumberBottomSheet(prev => !prev) + }> + + + + + {mobileNumbers.map(number => ( + { + setSelectedPhoneNumber(id); + // selectedPhoneNumber.current = id; + }} + /> + ))} + +