TP-27115 | field feedback (#324)

* TP-27115 | field feeback tab * TP-27115 | code cleanup * TP-27115 | width fix * TP-27115 | types fix * TP-27115 | headers name * TP-27115 | update api payload page size * TP-27115 | modal z-index bug fix * TP-27115 | suggested changes
2023-05-04 14:56:46 +05:30
parent 2af9828ea1
commit 704b7990f5
13 changed files with 579 additions and 22 deletions
--- a/mocks/field-feedback.json
+++ b/mocks/field-feedback.json
@@ -0,0 +1,329 @@
+{
+  "data": [
+    {
+      "id": 27105,
+      "referenceId": "6f9979c6-edba-4428-b4ed-7e1ca06e2178",
+      "type": "FIELD_VISIT",
+      "accountNumber": "013306760",
+      "agentReferenceId": "fd1fb86c-c2e8-42fb-8f29-3acafc417a51",
+      "sourceType": "PRIMARY_ADDRESS",
+      "source": {
+        "city": "Bengaluru",
+        "type": "CORRESPONDENCE",
+        "state": "KARNATAKA",
+        "source": "PRIMARY",
+        "current": "false",
+        "lineOne": "xhtxhrzhrzgfz, zbfxngckgcjtdjtd",
+        "lineTwo": "snxjxnxjxjxj",
+        "pinCode": "560076",
+        "latitude": null,
+        "longitude": null,
+        "permanent": "false",
+        "referenceId": "c66cdf8a-b5a4-44ed-a8dc-2f859a7719b3",
+        "addressServiceAddress": "false"
+      },
+      "metadata": {
+        "lat": "12.9267444",
+        "lng": "77.6659119",
+        "poi": "",
+        "tag": "PAID",
+        "area": "India",
+        "city": "Bengaluru",
+        "state": "Karnataka",
+        "street": "6th Main Road",
+        "pincode": "",
+        "poiDist": "",
+        "village": "",
+        "visited": "null",
+        "accuracy": "20.0",
+        "locality": "Bellandur",
+        "houseName": "",
+        "X-APP-TYPE": "FIELD_APP",
+        "streetDist": "64",
+        "houseNumber": "",
+        "subDistrict": "Bengaluru East",
+        "subLocality": "Green Glen Layout",
+        "subSubLocality": "",
+        "formattedAddress": "6th Main Road, Green Glen Layout, Bellandur, Bengaluru, Karnataka. Pin-560103 (India)",
+        "interactionLatitude": "12.9267444",
+        "interactionLongitude": "77.6659119",
+        "userDistanceFromAddress": "null"
+      },
+      "comments": null,
+      "createdAt": "2023-03-21T09:39:18.207204",
+      "answerViews": [
+        {
+          "interactionId": 27105,
+          "referenceId": "21bec835-cfe3-40fb-8662-18e0687d94e6",
+          "questionReferenceId": "44a11270-e332-372b-bf7f-e30749c5e16f",
+          "questionName": "Adding feedback for - ",
+          "questionText": "Adding feedback for - ",
+          "answerType": "OPTIONS",
+          "optionReferenceId": "5a92933a-548a-3c07-bb00-7da698e88cbb",
+          "optionText": "Visit",
+          "inputAmount": null,
+          "inputDate": null,
+          "inputText": null
+        },
+        {
+          "interactionId": 27105,
+          "referenceId": "58a8274f-9fd0-402f-9ac8-09e3f4f94bb6",
+          "questionReferenceId": "95e80582-d20c-3c6e-882e-04f5b29dec06",
+          "questionName": "Location found",
+          "questionText": "Were you able to find the location?",
+          "answerType": "OPTIONS",
+          "optionReferenceId": "2f31433e-69df-38a1-9b13-c132c1d0ce2b",
+          "optionText": "Yes",
+          "inputAmount": null,
+          "inputDate": null,
+          "inputText": null
+        },
+        {
+          "interactionId": 27105,
+          "referenceId": "eb4748b2-22eb-406f-b7fb-79092f7ddcc3",
+          "questionReferenceId": "ba485acd-c012-3225-8d54-3df46c4fbd3d",
+          "questionName": "Customer found",
+          "questionText": "Were you able to meet the customer?",
+          "answerType": "OPTIONS",
+          "optionReferenceId": "a64d5c1e-ccdc-33ee-a281-c61e5cb51ec6",
+          "optionText": "Yes",
+          "inputAmount": null,
+          "inputDate": null,
+          "inputText": null
+        },
+        {
+          "interactionId": 27105,
+          "referenceId": "2a04c982-0021-405b-961e-44ee0666b537",
+          "questionReferenceId": "addbd29f-8e66-3559-bf34-4deef0500b32",
+          "questionName": "Customer feedback",
+          "questionText": "Customer feedback",
+          "answerType": "OPTIONS",
+          "optionReferenceId": "375344be-42fe-3ebb-af16-0f862c11699a",
+          "optionText": "Paid",
+          "inputAmount": null,
+          "inputDate": null,
+          "inputText": null
+        },
+        {
+          "interactionId": 27105,
+          "referenceId": "0103b1a6-230e-4a36-884f-a59b66a1f84b",
+          "questionReferenceId": "d5542602-87a8-314d-a1fb-49d4b3eafec0",
+          "questionName": "Interaction Language",
+          "questionText": "Language of interaction",
+          "answerType": "OPTIONS",
+          "optionReferenceId": "3609c008-5fab-37c1-9038-827d4937dc8e",
+          "optionText": "English",
+          "inputAmount": null,
+          "inputDate": null,
+          "inputText": null
+        },
+        {
+          "interactionId": 27105,
+          "referenceId": "e4be509b-4c9d-4f79-9c34-37b215ac59f2",
+          "questionReferenceId": "e2e1afa3-f77e-3694-8aa4-1c3f87b3618a",
+          "questionName": "Mode of payment",
+          "questionText": "Mode of payment",
+          "answerType": "OPTIONS",
+          "optionReferenceId": "0e77c6cf-37f5-3ef6-a13d-af390e01a9ce",
+          "optionText": "App",
+          "inputAmount": null,
+          "inputDate": null,
+          "inputText": null
+        },
+        {
+          "interactionId": 27105,
+          "referenceId": "ad24b47a-f3ec-432c-8ee8-9796cdcb8503",
+          "questionReferenceId": "9ccf6475-717e-3b38-90db-45136d32d8d9",
+          "questionName": "Date of payment",
+          "questionText": "Date of payment",
+          "answerType": "DATE",
+          "optionReferenceId": null,
+          "optionText": null,
+          "inputAmount": null,
+          "inputDate": "2023-03-20",
+          "inputText": null
+        },
+        {
+          "interactionId": 27105,
+          "referenceId": "05571fc0-0da7-4565-8225-ae000d421a4b",
+          "questionReferenceId": "8b5a5d30-c1ea-397c-91a5-00292477dea7",
+          "questionName": "Photo",
+          "questionText": "Upload Photo",
+          "answerType": "TEXT",
+          "optionReferenceId": null,
+          "optionText": null,
+          "inputAmount": null,
+          "inputDate": null,
+          "inputText": "https://s3.ap-south-1.amazonaws.com/navi-382c5a1109445386b9a74e2da9fa1f64/prod/d3714677-4478-4f5c-83af-83ca890c13b3.png"
+        }
+      ],
+      "imageUrls": ["https://picsum.photos/700/300"]
+    },
+    {
+      "id": 27115,
+      "referenceId": "6f9979c6-edba-4428-b4ed-7e1ca06e2178",
+      "type": "FIELD_VISIT",
+      "accountNumber": "013306760",
+      "agentReferenceId": "fd1fb86c-c2e8-42fb-8f29-3acafc417a51",
+      "sourceType": "PRIMARY_ADDRESS",
+      "source": {
+        "city": "Bengaluru",
+        "type": "CORRESPONDENCE",
+        "state": "KARNATAKA",
+        "source": "PRIMARY",
+        "current": "false",
+        "lineOne": "xhtxhrzhrzgfz, zbfxngckgcjtdjtd",
+        "lineTwo": "snxjxnxjxjxj",
+        "pinCode": "560076",
+        "latitude": null,
+        "longitude": null,
+        "permanent": "false",
+        "referenceId": "c66cdf8a-b5a4-44ed-a8dc-2f859a7719b3",
+        "addressServiceAddress": "false"
+      },
+      "metadata": {
+        "lat": "12.9267444",
+        "lng": "77.6659119",
+        "poi": "",
+        "tag": "PAID",
+        "area": "India",
+        "city": "Bengaluru",
+        "state": "Karnataka",
+        "street": "6th Main Road",
+        "pincode": "",
+        "poiDist": "",
+        "village": "",
+        "visited": "null",
+        "accuracy": "20.0",
+        "locality": "Bellandur",
+        "houseName": "",
+        "X-APP-TYPE": "FIELD_APP",
+        "streetDist": "64",
+        "houseNumber": "",
+        "subDistrict": "Bengaluru East",
+        "subLocality": "Green Glen Layout",
+        "subSubLocality": "",
+        "formattedAddress": "6th Main Road, Green Glen Layout, Bellandur, Bengaluru, Karnataka. Pin-560103 (India)",
+        "interactionLatitude": "12.9267444",
+        "interactionLongitude": "77.6659119",
+        "userDistanceFromAddress": "null"
+      },
+      "comments": null,
+      "createdAt": "2023-03-21T09:39:18.207204",
+      "answerViews": [
+        {
+          "interactionId": 27115,
+          "referenceId": "21bec835-cfe3-40fb-8662-18e0687d94e6",
+          "questionReferenceId": "44a11270-e332-372b-bf7f-e30749c5e16f",
+          "questionName": "Adding feedback for - ",
+          "questionText": "Adding feedback for - ",
+          "answerType": "OPTIONS",
+          "optionReferenceId": "5a92933a-548a-3c07-bb00-7da698e88cbb",
+          "optionText": "Visit",
+          "inputAmount": null,
+          "inputDate": null,
+          "inputText": null
+        },
+        {
+          "interactionId": 27115,
+          "referenceId": "58a8274f-9fd0-402f-9ac8-09e3f4f94bb6",
+          "questionReferenceId": "95e80582-d20c-3c6e-882e-04f5b29dec06",
+          "questionName": "Location found",
+          "questionText": "Were you able to find the location?",
+          "answerType": "OPTIONS",
+          "optionReferenceId": "2f31433e-69df-38a1-9b13-c132c1d0ce2b",
+          "optionText": "Yes",
+          "inputAmount": null,
+          "inputDate": null,
+          "inputText": null
+        },
+        {
+          "interactionId": 27115,
+          "referenceId": "eb4748b2-22eb-406f-b7fb-79092f7ddcc3",
+          "questionReferenceId": "ba485acd-c012-3225-8d54-3df46c4fbd3d",
+          "questionName": "Customer found",
+          "questionText": "Were you able to meet the customer?",
+          "answerType": "OPTIONS",
+          "optionReferenceId": "a64d5c1e-ccdc-33ee-a281-c61e5cb51ec6",
+          "optionText": "Yes",
+          "inputAmount": null,
+          "inputDate": null,
+          "inputText": null
+        },
+        {
+          "interactionId": 27115,
+          "referenceId": "2a04c982-0021-405b-961e-44ee0666b537",
+          "questionReferenceId": "addbd29f-8e66-3559-bf34-4deef0500b32",
+          "questionName": "Customer feedback",
+          "questionText": "Customer feedback",
+          "answerType": "OPTIONS",
+          "optionReferenceId": "375344be-42fe-3ebb-af16-0f862c11699a",
+          "optionText": "Paid",
+          "inputAmount": null,
+          "inputDate": null,
+          "inputText": null
+        },
+        {
+          "interactionId": 27115,
+          "referenceId": "0103b1a6-230e-4a36-884f-a59b66a1f84b",
+          "questionReferenceId": "d5542602-87a8-314d-a1fb-49d4b3eafec0",
+          "questionName": "Interaction Language",
+          "questionText": "Language of interaction",
+          "answerType": "OPTIONS",
+          "optionReferenceId": "3609c008-5fab-37c1-9038-827d4937dc8e",
+          "optionText": "English",
+          "inputAmount": null,
+          "inputDate": null,
+          "inputText": null
+        },
+        {
+          "interactionId": 27115,
+          "referenceId": "e4be509b-4c9d-4f79-9c34-37b215ac59f2",
+          "questionReferenceId": "e2e1afa3-f77e-3694-8aa4-1c3f87b3618a",
+          "questionName": "Mode of payment",
+          "questionText": "Mode of payment",
+          "answerType": "OPTIONS",
+          "optionReferenceId": "0e77c6cf-37f5-3ef6-a13d-af390e01a9ce",
+          "optionText": "App",
+          "inputAmount": null,
+          "inputDate": null,
+          "inputText": null
+        },
+        {
+          "interactionId": 27115,
+          "referenceId": "ad24b47a-f3ec-432c-8ee8-9796cdcb8503",
+          "questionReferenceId": "9ccf6475-717e-3b38-90db-45136d32d8d9",
+          "questionName": "Date of payment",
+          "questionText": "Date of payment",
+          "answerType": "DATE",
+          "optionReferenceId": null,
+          "optionText": null,
+          "inputAmount": null,
+          "inputDate": "2023-03-20",
+          "inputText": null
+        },
+        {
+          "interactionId": 27115,
+          "referenceId": "05571fc0-0da7-4565-8225-ae000d421a4b",
+          "questionReferenceId": "8b5a5d30-c1ea-397c-91a5-00292477dea7",
+          "questionName": "Photo",
+          "questionText": "Upload Photo",
+          "answerType": "TEXT",
+          "optionReferenceId": null,
+          "optionText": null,
+          "inputAmount": null,
+          "inputDate": null,
+          "inputText": "https://s3.ap-south-1.amazonaws.com/navi-382c5a1109445386b9a74e2da9fa1f64/prod/d3714677-4478-4f5c-83af-83ca890c13b3.png"
+        }
+      ],
+      "imageUrls": ["https://picsum.photos/600/300"]
+    }
+  ],
+  "errors": null,
+  "pages": {
+    "pageNo": 0,
+    "totalPages": 1,
+    "pageSize": 1,
+    "totalElements": 1
+  }
+}
--- a/src/components/leaderboard/CashEarnedChartHC.tsx
+++ b/src/components/leaderboard/CashEarnedChartHC.tsx
@@ -146,7 +146,8 @@ const CashEarnedChartHC: React.FC<ILeaderboard> = props => {
            <span className={styles.darkGray}>Cash collected last month</span>
          )}
          <b>
-          {' '}{getFirstDate()} - {getLastDate(view)}
+            {' '}
+            {getFirstDate()} - {getLastDate(view)}
          </b>
        </span>
      </div>
--- a/src/index.scss
+++ b/src/index.scss
@@ -114,3 +114,9 @@ code {
  overflow: unset;
  z-index: 1;
 }
+
+#dialogPortal {
+  main {
+    z-index: 1;
+  }
+}
--- a/src/pages/CaseDetails/actions/interactionsActions.ts
+++ b/src/pages/CaseDetails/actions/interactionsActions.ts
@@ -2,7 +2,10 @@ import { toast } from '@navi/web-ui/lib/primitives/Toast';
 import { Dispatch } from '@reduxjs/toolkit';
 import axiosInstance, { ApiKeys, getApiUrl, logError } from '../../../utils/ApiHelper';
 import { STORE_KEYS } from '../constants';
-import { COMMUNICATION_HISTORY_TAB_KEYS } from '../constants/communicationHistory.constant';
+import {
+  COMMUNICATION_HISTORY_TAB_KEYS,
+  SYSTEM_INTERACTIONS_TYPE
+} from '../constants/communicationHistory.constant';
 import { IWAInteractionPayload } from '../interfaces/Interactions.type';
 import {
  setCaseDetail,
@@ -53,7 +56,8 @@ export const getWAInteractions =
  };

 export const fetchSystemInteractions =
-  (lan: string, customerRefrenceId: string, payload: any) => (dispatch: Dispatch) => {
+  (lan: string, customerRefrenceId: string, payload: Record<string, any>) =>
+  (dispatch: Dispatch) => {
    dispatch(
      setCaseDetailLoading({
        lan,
@@ -90,6 +94,44 @@ export const fetchSystemInteractions =
      });
  };

+export const fetchFieldSystemInteractions =
+  (lan: string, customerRefrenceId: string, payload: any) => (dispatch: Dispatch) => {
+    dispatch(
+      setCaseDetailLoading({
+        lan,
+        customerRefrenceId,
+        key: COMMUNICATION_HISTORY_TAB_KEYS[payload.types],
+        loading: true
+      })
+    );
+    axiosInstance
+      .get(getApiUrl(ApiKeys.FIELD_FEEDBACK), {
+        params: payload,
+        headers: { loanaccountnumber: lan }
+      })
+      .then(res => {
+        dispatch(
+          setCaseDetail({
+            lan,
+            customerRefrenceId,
+            key: COMMUNICATION_HISTORY_TAB_KEYS[SYSTEM_INTERACTIONS_TYPE.FIELD_VISIT],
+            data: res.data,
+            loading: false
+          })
+        );
+      })
+      .catch(() => {
+        dispatch(
+          setCaseDetailError({
+            lan,
+            customerRefrenceId,
+            key: COMMUNICATION_HISTORY_TAB_KEYS[payload.types],
+            loading: false
+          })
+        );
+      });
+  };
+
 export const fetchCallInteractions =
  (lan: string, customerRefrenceId: string, payload: Record<string, any>) =>
  (dispatch: Dispatch) => {
--- a/src/pages/CaseDetails/components/CommunicationHistory/SystemInteractions.tsx
+++ b/src/pages/CaseDetails/components/CommunicationHistory/SystemInteractions.tsx
@@ -13,19 +13,26 @@ import { RootState } from 'src/store';
 import { createKey } from 'src/utils/CaseDetail.utils';
 import { isObjectEmpty } from 'src/utils/commonUtils';
 import { createQueryParams, readQueryParams } from 'src/utils/QueryParamsHelper';
-import { downloadDunningLetter, fetchSystemInteractions } from '../../actions/interactionsActions';
+import {
+  downloadDunningLetter,
+  fetchFieldSystemInteractions,
+  fetchSystemInteractions
+} from '../../actions/interactionsActions';
 import {
  COMMUNICATION_HISTORY_TAB_KEYS,
  NO_RECORD_FOUND,
  SYSTEM_INTERACTIONS_TYPE_COL_DEFS,
  SYSTEM_INTERACTIONS_TYPE,
  getTodayDate,
-  getLastMonthDate
+  getLastMonthDate,
+  TCOMMUNICATION_HISTORY_TAB_VALUES,
+  SYSTEM_INTERACTIONS_FIELD_VISIT_TYPE_COL_DEFS
 } from '../../constants/communicationHistory.constant';
 import styles from './index.module.scss';
 import Download from '../../../../assets/images/icons/Download';
 import { Button } from '@primitives';
 import { DropDownPosition } from '@navi/web-ui/lib/components/Pagination/constant';
+import FeedbackImageLocation from '../FeedbackImageLocation/FeedbackImageLocation';

 const AgTable = React.lazy(
  () => import(/* webpackChunkName: ['table'] */ '@navi/web-ui/lib/components/AgTable/AgTable')
@@ -40,11 +47,12 @@ const SystemInteractions = (props: ISystemInteractionsProps) => {
  const maxInputDate = getTodayDate().toISOString().slice(0, 16);
  const defaultLastMonthDate = getLastMonthDate().toISOString().slice(0, 16);

-  const systemInteractionsTypeParams: 'pushNotification' | 'email' | 'whatsapp' | 'sms' | 'ivr' =
+  const systemInteractionsTypeParams: TCOMMUNICATION_HISTORY_TAB_VALUES =
    COMMUNICATION_HISTORY_TAB_KEYS[type];
  const pageData = useSelector(
    (state: RootState) => state.caseDetail.pageData?.[createKey(loanId, customerId)]
  );
+
  const { data: systemInteractionsTypeData, loading: systemInteractionsTypeLoading } =
    pageData?.[systemInteractionsTypeParams] || {};
  const [searchParams] = useSearchParams();
@@ -54,20 +62,35 @@ const SystemInteractions = (props: ISystemInteractionsProps) => {

  const createPayloadForSystemInteraction = () => {
    const { [systemInteractionsTypeParams]: queryParams } = readQueryParams();
+    if (type === SYSTEM_INTERACTIONS_TYPE.FIELD_VISIT) {
+      return {
+        page_no: queryParams?.page || 0,
+        page_size: queryParams?.size || 10,
+        from: queryParams?.fromTime || defaultLastMonthDate,
+        to: queryParams?.toTime || maxInputDate,
+        customer_reachable: queryParams?.contactable,
+        types: `INHOUSE_FIELD_VISIT,FIELD_VISIT`,
+        loan_account_number: loanId
+      };
+    }
    return {
      page: queryParams?.page || 0,
      size: queryParams?.size || 10,
-      customer_reference_id: customerId,
-      communication_type: type,
      from: queryParams?.fromTime || defaultLastMonthDate,
      to: queryParams?.toTime || maxInputDate,
-      customer_reachable: queryParams?.contactable
+      customer_reachable: queryParams?.contactable,
+      communication_type: type,
+      customer_reference_id: customerId
    };
  };

  const getSystemInteractionsData = () => {
    const payload = createPayloadForSystemInteraction();
-    dispatch(fetchSystemInteractions(loanId, customerId, payload));
+    if (payload?.types) {
+      dispatch(fetchFieldSystemInteractions(loanId, customerId, payload));
+    } else {
+      dispatch(fetchSystemInteractions(loanId, customerId, payload));
+    }
  };

  useEffect(() => {
@@ -177,7 +200,11 @@ const SystemInteractions = (props: ISystemInteractionsProps) => {
              height: `${window?.innerHeight - 300}`
            }}
            rowData={systemInteractionsTypeData?.data}
-            columnDefs={SYSTEM_INTERACTIONS_TYPE_COL_DEFS}
+            columnDefs={
+              type === SYSTEM_INTERACTIONS_TYPE.FIELD_VISIT
+                ? SYSTEM_INTERACTIONS_FIELD_VISIT_TYPE_COL_DEFS
+                : SYSTEM_INTERACTIONS_TYPE_COL_DEFS
+            }
            sizeColumnsToFit
            theme={'alpine'}
            noRowsOverlayComponent={() => (
@@ -197,6 +224,9 @@ const SystemInteractions = (props: ISystemInteractionsProps) => {
              />
            }
          />
+          {type === SYSTEM_INTERACTIONS_TYPE.FIELD_VISIT && (
+            <FeedbackImageLocation interactions={systemInteractionsTypeData} />
+          )}
        </SuspenseLoader>
      </div>
    </div>
--- a/src/pages/CaseDetails/components/FeedbackImageLocation/FeedbackImageLocation.tsx
+++ b/src/pages/CaseDetails/components/FeedbackImageLocation/FeedbackImageLocation.tsx
@@ -0,0 +1,33 @@
+import ModalDialog from '@navi/web-ui/lib/primitives/ModalDialog';
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { setFieldVisitModalId } from 'src/reducers/commonSlice';
+import { RootState } from 'src/store';
+import styles from './index.module.scss';
+
+interface FeedbackImageLocation {
+  interactions: any;
+}
+
+const FeedbackImageLocation = ({ interactions }: FeedbackImageLocation) => {
+  const { fieldVisitModalId = '' } = useSelector((state: RootState) => state.common);
+  const dispatch = useDispatch();
+  const filteredInteractions = interactions?.data?.find(
+    (interaction: any) => interaction?.id === fieldVisitModalId
+  );
+  const onClose = () => {
+    dispatch(setFieldVisitModalId(''));
+  };
+  return (
+    <ModalDialog
+      onClose={onClose}
+      open={!!fieldVisitModalId}
+      contentClasses={styles.content}
+      style={{ width: 'auto' }}
+    >
+      <img src={filteredInteractions?.imageUrls[0]} width="500" height="600" />
+    </ModalDialog>
+  );
+};
+
+export default FeedbackImageLocation;
--- a/src/pages/CaseDetails/components/FeedbackImageLocation/index.module.scss
+++ b/src/pages/CaseDetails/components/FeedbackImageLocation/index.module.scss
@@ -0,0 +1,8 @@
+.content {
+  display: flex;
+  justify-content: center;
+  width: fit-content;
+  img {
+    display: block;
+  }
+}
--- a/src/pages/CaseDetails/constants/communicationHistory.constant.ts
+++ b/src/pages/CaseDetails/constants/communicationHistory.constant.ts
@@ -4,6 +4,12 @@ import { DateFormat, getFormatDate } from '../../../utils/DateHelper';
 import AudioControls from '../../../components/AudioControls';
 import { AnswerView } from '../interfaces/CommunicationHistory.type';
 import FeedbackActionButton from '../feedbackForm/component/FeedbackActionButton';
+import Button from '@navi/web-ui/lib/primitives/Button';
+import store from 'src/store';
+import { setFieldVisitModalId } from 'src/reducers/commonSlice';
+import { CasesDetailsFeedbackTypesCodeMap } from 'src/pages/Cases/constants/CasesConstants';
+import Tag from '@navi/web-ui/lib/primitives/Tag';
+
 export const CALL_INTERACTIONS = 'callInteractions';
 export const NO_RECORD_FOUND = 'No Record Found';

@@ -23,7 +29,8 @@ export const SYSTEM_INTERACTIONS_TYPE = {
  SMS: 'SMS',
  IVR: 'VOICE',
  EMAIL: 'EMAIL',
-  PUSH_NOTIFICATION: 'PUSH_NOTIFICATION'
+  PUSH_NOTIFICATION: 'PUSH_NOTIFICATION',
+  FIELD_VISIT: 'FIELD_VISIT'
 };

 export const COMMUNICATION_HISTORY_TAB_KEYS: any = {
@@ -31,7 +38,16 @@ export const COMMUNICATION_HISTORY_TAB_KEYS: any = {
  [SYSTEM_INTERACTIONS_TYPE.SMS]: 'sms',
  [SYSTEM_INTERACTIONS_TYPE.IVR]: 'ivr',
  [SYSTEM_INTERACTIONS_TYPE.EMAIL]: 'email',
-  [SYSTEM_INTERACTIONS_TYPE.PUSH_NOTIFICATION]: 'pushNotification'
+  [SYSTEM_INTERACTIONS_TYPE.PUSH_NOTIFICATION]: 'pushNotification',
+  [SYSTEM_INTERACTIONS_TYPE.FIELD_VISIT]: 'fieldFeedback'
+};
+
+export type TCOMMUNICATION_HISTORY_TAB_KEYS = keyof typeof COMMUNICATION_HISTORY_TAB_KEYS;
+export type TCOMMUNICATION_HISTORY_TAB_VALUES =
+  (typeof COMMUNICATION_HISTORY_TAB_KEYS)[TCOMMUNICATION_HISTORY_TAB_KEYS];
+
+export const QuestionTextTypes = {
+  CUSTOMER_INTERACTION_STATUS: 'Customer Interaction Status'
 };

 export const SYSTEM_INTERACTIONS_TYPE_COL_DEFS = [
@@ -58,6 +74,79 @@ export const SYSTEM_INTERACTIONS_TYPE_COL_DEFS = [
  }
 ];

+export const SYSTEM_INTERACTIONS_FIELD_VISIT_TYPE_COL_DEFS = [
+  {
+    field: 'createdAt',
+    headerName: 'Date time',
+    flex: 3,
+    cellRenderer: (params: ICellRendererParams) =>
+      getFormatDate(utcToIST(params.value), DateFormat.DD_MMM_HH_mm)
+  },
+  {
+    field: 'agencyName',
+    headerName: 'Agency ',
+    flex: 2,
+    valueGetter: () => store.getState()?.common?.userData?.agencyName || ''
+  },
+  {
+    field: 'status',
+    headerName: 'Feedback',
+    flex: 3,
+    cellRendererSelector: (params: ICellRendererParams) => {
+      const feedbackType = params.data?.answerViews.find(
+        (ans: AnswerView) => ans.questionText === QuestionTextTypes.CUSTOMER_INTERACTION_STATUS
+      );
+      const { color = 'orange', label = feedbackType?.optionText || '' } =
+        CasesDetailsFeedbackTypesCodeMap[feedbackType?.optionText] || {};
+
+      return {
+        component: Tag,
+        params: {
+          color,
+          label,
+          variant: 'transparent'
+        }
+      };
+    }
+  },
+  {
+    field: 'latLong',
+    headerName: 'Lat.Long',
+    flex: 1,
+    cellRendererSelector: (params: ICellRendererParams) => {
+      const lat = params.data?.metadata?.interactionLatitude;
+      const long = params.data?.metadata?.interactionLongitude;
+      const url = `http://maps.google.com/?q=${lat},${long}`;
+      const openUrl = () => window.open(url);
+      return {
+        component: Button,
+        params: {
+          onClick: openUrl,
+          variant: 'text',
+          children: 'View'
+        }
+      };
+    }
+  },
+  {
+    field: 'imageUrls',
+    headerName: 'Image',
+    flex: 1,
+    cellRendererSelector: (params: ICellRendererParams) => {
+      return {
+        component: Button,
+        params: {
+          variant: 'text',
+          children: 'View',
+          onClick: () => {
+            store.dispatch(setFieldVisitModalId(params?.data?.id));
+          }
+        }
+      };
+    }
+  }
+];
+
 enum InteractionStatuses {
  CUSTOMER_INTERACTION_STATUS = 'Customer Interaction Status'
 }
--- a/src/pages/CaseDetails/constants/index.tsx
+++ b/src/pages/CaseDetails/constants/index.tsx
@@ -77,7 +77,7 @@ export const TABS = [
 export const COMMUNICATION_TAB_KEYS = {
  CALLS: 'calls',
  WHATSAPP: 'whatsapp',
-  FIELD_FEEDBACK: 'field_feedback',
+  FIELD_VISIT: 'FIELD_VISIT',
  SMS: 'sms',
  IVR: 'ivr',
  EMAIL: 'email',
@@ -91,6 +91,11 @@ export const COMMUNICATION_TABS = [
    value: 'Calls',
    component: <CallInteractions />
  },
+  {
+    key: COMMUNICATION_TAB_KEYS.FIELD_VISIT,
+    value: 'Field Feedback',
+    component: <SystemInteractions type={SYSTEM_INTERACTIONS_TYPE.FIELD_VISIT} />
+  },
  {
    key: COMMUNICATION_TAB_KEYS.NAVI_WHATSAPP,
    value: 'Navi whatsapp',
--- a/src/reducers/commonSlice.ts
+++ b/src/reducers/commonSlice.ts
@@ -39,6 +39,7 @@ export interface CommonState {
  toast?: ToastData;
  hideSideNav: boolean;
  showStickyNote: boolean;
+  fieldVisitModalId: string;
 }

 const initialState = {
@@ -50,7 +51,8 @@ const initialState = {
    slashTabOpened: false
  } as User,
  hideSideNav: false,
-  showStickyNote: false
+  showStickyNote: false,
+  fieldVisitModalId: ''
 } as CommonState;
 setGlobalUserData({ token: initialState.userData.token });
 export const commonSlice = createSlice({
@@ -75,6 +77,9 @@ export const commonSlice = createSlice({
    },
    setDeviceIdInStore(state, action) {
      state.userData.deviceId = action.payload;
+    },
+    setFieldVisitModalId(state, action) {
+      state.fieldVisitModalId = action.payload;
    }
  }
  // extraReducers: builder => {
@@ -87,7 +92,13 @@ export const commonSlice = createSlice({
  // }
 });

-export const { setAuthData, setToast, navbarStatus, setShowStickyNote, setDeviceIdInStore } =
-  commonSlice.actions;
+export const {
+  setAuthData,
+  setToast,
+  navbarStatus,
+  setShowStickyNote,
+  setDeviceIdInStore,
+  setFieldVisitModalId
+} = commonSlice.actions;

 export default commonSlice.reducer;
--- a/src/utils/ApiHelper.ts
+++ b/src/utils/ApiHelper.ts
@@ -74,7 +74,8 @@ export enum ApiKeys {
  FETCH_CUSTOMER_INFO,
  FETCH_REPAYMENT_HISTORY,
  DOWNLOAD_DUNNING_LETTER,
-  GET_PERFORMANCE
+  GET_PERFORMANCE,
+  FIELD_FEEDBACK
 }

 // TODO: try to get rid of `as`
@@ -133,6 +134,7 @@ API_URLS[ApiKeys.GET_PERFORMANCE] = 'levels/agents/{agentReferenceId}/chart/LAST

 API_URLS[ApiKeys.OAUTH_SIGNIN] = '/google/sign-in/url';
 API_URLS[ApiKeys.OAUTH_EXCHANGE_SESSION] = '/session/exchange';
+API_URLS[ApiKeys.FIELD_FEEDBACK] = '/v2/interactions';

 // TODO: try to get rid of `as`
 const MOCK_API_URLS: Record<ApiKeys, string> = {} as Record<ApiKeys, string>;
@@ -153,6 +155,7 @@ MOCK_API_URLS[ApiKeys.FETCH_REPAYMENT_HISTORY] = 'repayments.json';
 MOCK_API_URLS[ApiKeys.GET_LEADERBOARD_DETAILS] = 'levels/agents/ranking.json';
 MOCK_API_URLS[ApiKeys.GET_PERFORMANCE] = 'levels/agents/chart/LAST_30_DAYS.json';
 MOCK_API_URLS[ApiKeys.CALL_INTERACTIONS] = '/v2/interactions/index.json';
+MOCK_API_URLS[ApiKeys.FIELD_FEEDBACK] = 'field-feedback.json';

 let navigate: NavigateFunction;
 let dispatch: Dispatch<any>;
--- a/src/utils/DateHelper.ts
+++ b/src/utils/DateHelper.ts
@@ -96,9 +96,9 @@ export const MilliSecondsTo = {

 /**
 * Finds the difference between start and end dates in terms of the units specified
- * @param start 
- * @param end 
- * @param units 
+ * @param start
+ * @param end
+ * @param units
 * @returns Be careful with this method, since it is implemented using Math.Round and may produce unexpected results
 */
 export const dateDiff = (start: Date, end: Date, units: UnitsEnum) => {
--- a/src/utils/StateHelper.ts
+++ b/src/utils/StateHelper.ts
@@ -72,7 +72,7 @@ export const getStateName = (stateAbbreviation: string) => {
      return 'Pondicherry';
    case 'TS':
      return 'Telangana';
-    case 'UA' :
+    case 'UA':
      return 'Uttarakhand';
    default:
      return '--';