TP-31863 | fixes

src/action/profileActions.ts

@@ -7,6 +7,7 @@ import {
   setIsUploadingImage,
   setOriginalImageDetails,
 } from '../reducer/profileSlice';
+import { ToastMessages } from '../screens/allCases/constants';
 import { AppDispatch } from '../store/store';
 
 export const uploadImageId = (agentId: string, uri: string) => (dispatch: AppDispatch) => {
@@ -25,13 +26,9 @@ export const uploadImageId = (agentId: string, uri: string) => (dispatch: AppDis
       },
     })
     .then(() => {
-      toast({ type: 'info', text1: 'Your ID card has been sent for approval' });
+      toast({ type: 'info', text1: ToastMessages.IMAGE_UPLOAD_SUCCESS });
       dispatch(setApprovalStatus(ImageApprovalStatus.PENDING));
     })
-    .catch((err) => {
-      toast({ type: 'error', text1: `Error while uploading image id:${JSON.stringify(err)}` });
-      logError(err as Error, 'Error while uploading image id');
-    })
     .finally(() => {
       dispatch(setIsUploadingImage(false));
     });
@@ -42,17 +39,25 @@ export const getSelfieDocument = () => (dispatch: AppDispatch) => {
   axiosInstance
     .get(url)
     .then((res) => {
-      if (res.data?.[0]?.originalDocumentUri) {
-        const { originalDocumentUri, updatedAt, approvalStatus } = res.data?.[0];
+      if (res.data?.documents?.[0]?.originalDocumentUri) {
+        const { documents, agencyName } = res.data;
+        const { originalDocumentUri, updatedAt, approvalStatus } = documents[0];
         dispatch(
           setOriginalImageDetails({
             originalImageUri: originalDocumentUri,
             validationDate: updatedAt,
             approvalStatus,
+            agencyName,
           })
         );
       } else {
-        dispatch(setApprovalStatus(ImageApprovalStatus.REJECTED));
+        dispatch(
+          setOriginalImageDetails({
+            originalImageUri: '',
+            validationDate: '',
+            approvalStatus: ImageApprovalStatus.REJECTED,
+          })
+        );
       }
     })
     .catch((err) => {

src/common/Constants.ts

@@ -256,6 +256,22 @@ export const CLICKSTREAM_EVENT_NAMES = {
     name: 'FA_PROFILE_PAGE_LOGOUT_API_FAILED',
     description: 'Logout API failed',
   },
+  FA_ID_CARD_CLICKED: {
+    name: 'FA_ID_CARD_CLICKED',
+    description: 'FA_ID_CARD_CLICKED',
+  },
+  FA_ID_CARD_LANDED: {
+    name: 'FA_ID_CARD_LANDED',
+    description: 'FA_ID_CARD_LANDED',
+  },
+  FA_CREATE_ID_CLICKED: {
+    name: 'FA_CREATE_ID_CLICKED',
+    description: 'FA_CREATE_ID_CLICKED',
+  },
+  FA_CREATE_ID_PROCEED_CLICKED: {
+    name: 'FA_CREATE_ID_PROCEED_CLICKED',
+    description: 'FA_CREATE_ID_PROCEED_CLICKED',
+  },
 
   //FORMS
   AV_FORM_LOADED: { name: 'FA_FORM_LOADED', description: 'Form loaded' },

src/reducer/profileSlice.ts

@@ -14,6 +14,7 @@ const initialState = {
   validationDate: '',
   showReviewImageModal: false,
   approvalStatus: ImageApprovalStatus.NOT_INITIATED,
+  agencyName: '',
 };
 
 export const profileSlice = createSlice({
@@ -24,10 +25,11 @@ export const profileSlice = createSlice({
       state.imageUri = action.payload;
     },
     setOriginalImageDetails: (state, action) => {
-      const { originalImageUri, validationDate, approvalStatus } = action.payload;
+      const { originalImageUri, validationDate, approvalStatus, agencyName } = action.payload;
       state.originalImageUri = originalImageUri;
       state.validationDate = validationDate;
       state.approvalStatus = approvalStatus;
+      state.agencyName = agencyName;
     },
     setIsUploadingImage: (state, action) => {
       state.isUploadingImage = action.payload;

src/screens/Profile/AgentIdCard.tsx

@@ -10,15 +10,29 @@ import { useAppSelector } from '../../hooks';
 import { BUSINESS_DATE_FORMAT, dateFormat } from '../../../RN-UI-LIB/src/utlis/dates';
 
 const AgentIdCard = () => {
-  const { originalImageUri, agentName, agentPhone, validationDate } = useAppSelector((state) => ({
-    originalImageUri: state.profile.originalImageUri,
-    agentName: state.user.user?.name!!,
-    agentPhone: state.user.user?.phoneNumber,
-    validationDate: state.profile.validationDate,
-  }));
+  const { originalImageUri, agentName, agentPhone, validationDate, agencyName } = useAppSelector(
+    (state) => ({
+      originalImageUri: state.profile.originalImageUri,
+      agentName: state.user.user?.name!!,
+      agentPhone: state.user.user?.phoneNumber,
+      validationDate: state.profile.validationDate,
+      agencyName: state.profile.agencyName,
+    })
+  );
+
   return (
     <View style={[GenericStyles.p24, GenericStyles.alignCenter, { width: SCREEN_WIDTH - 32 }]}>
       <NaviLogoWithTextIcon />
+      {agencyName ? (
+        <View>
+          <Text small bold style={styles.greyColor}>
+            in association with
+          </Text>
+          <Text dark bold>
+            {agencyName}
+          </Text>
+        </View>
+      ) : null}
       <View style={GenericStyles.mv16}>
         <Avatar loading={false} size={160} name={agentName} dataURI={originalImageUri} />
       </View>
@@ -28,6 +42,7 @@ const AgentIdCard = () => {
       <Heading type="h4" dark bold style={GenericStyles.mv4}>
         {agentName}
       </Heading>
+      <Text style={GenericStyles.mb4}>Collection agent</Text>
       <Text light bold>
         {agentPhone}
       </Text>

src/screens/Profile/IDCardImageCapture.tsx

@@ -1,5 +1,5 @@
 import { Modal, StyleSheet, TouchableOpacity, View } from 'react-native';
-import React from 'react';
+import React, { useEffect } from 'react';
 import Text from '../../../RN-UI-LIB/src/components/Text';
 import { PERMISSIONS, RESULTS, request } from 'react-native-permissions';
 import { CameraOptions, launchCamera } from 'react-native-image-picker';
@@ -15,11 +15,18 @@ const IDCardImageCapture = () => {
   const { imageUri, showReviewImageModal } = useAppSelector((state) => state.profile);
   const dispatch = useAppDispatch();
 
+  useEffect(() => {
+    return () => {
+      dispatch(setImageUri(''));
+    };
+  }, []);
+
   const handleImageCapture = () => {
     request(PERMISSIONS.ANDROID.CAMERA).then(async (result) => {
       if (result === RESULTS.GRANTED) {
         const config: CameraOptions = {
           mediaType: 'photo',
+          cameraType: 'front',
         };
         config.includeExtra = true;
         launchCamera(config, (response) => {

src/screens/Profile/index.tsx

@@ -127,6 +127,11 @@ const Profile: React.FC = () => {
     approvalStatus === ImageApprovalStatus.PENDING ||
     approvalStatus === ImageApprovalStatus.APPROVED;
 
+  const handleViewIdCard = () => {
+    toggleIdCard();
+    addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_ID_CARD_CLICKED);
+  };
+
   return (
     <View style={[GenericStyles.fill]}>
       <NavigationHeader
@@ -136,7 +141,7 @@ const Profile: React.FC = () => {
         bottomActionable={
           originalImageUri && pendingCases?.length ? (
             <TouchableHighlight
-              onPress={toggleIdCard}
+              onPress={handleViewIdCard}
               underlayColor={COLORS.HIGHLIGHTER.LIGHT_BUTTON}
               style={styles.bottomActionable}
             >
@@ -241,13 +246,15 @@ const Profile: React.FC = () => {
           </Text>
         </Pressable>
       </ScrollView>
-      <TranslucentModal
-        visible={showIdCard}
-        onRequestClose={() => setShowIdCard(false)}
-        flipAnimation
-      >
-        <AgentIdCard />
-      </TranslucentModal>
+      {pendingCases?.length ? (
+        <TranslucentModal
+          visible={showIdCard}
+          onRequestClose={() => setShowIdCard(false)}
+          flipAnimation
+        >
+          <AgentIdCard />
+        </TranslucentModal>
+      ) : null}
     </View>
   );
 };

src/screens/allCases/constants.ts

@@ -70,6 +70,7 @@ export const ToastMessages = {
   CASES_SELECTION_DISABLED: 'Case addition is disabled during the generation of visit plan',
   CASES_DELETION_DISABLED: 'Case deletion is disabled during the generation of visit plan',
   GEOLOCATION_COORDINATES_INCORRECT: 'Geolocation not found',
+  IMAGE_UPLOAD_SUCCESS: 'Your ID card has been sent for approval',
 };
 
 export enum BOTTOM_TAB_ROUTES {