TP-65182 | Feedback details section icons changes + ellipsis added

2024-05-09 18:06:45 +05:30
parent e3f4171420
commit ce49a14f13
8 changed files with 27 additions and 115 deletions
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -17,6 +17,5 @@
  sr/screens/permissions @aman-singh_navi
  src/screens/profile  @mantri-ramkishor_navi
  src/components/form @ashish-deo_navi @aman-chaturvedi_navi
-  src/components/formRenderingEngine @ashish-deo_navi @aman-chaturvedi_navi
  src/components/filters @mantri-ramkishor_navi @ashish-deo_navi
  src/services/* @shri-prakash_navi @varnit-goyal_navi
--- a/src/assets/icons/SmsIcon.tsx
+++ b/src/assets/icons/SmsIcon.tsx
@@ -1,32 +1,15 @@
 import * as React from 'react';
-import Svg, { Mask, Path, G } from 'react-native-svg';
+import Svg, { Mask, Path, G, Rect } from 'react-native-svg';

-function SmsIcon(props) {
+function SmsIcon() {
  return (
-    <Svg
-      width={16}
-      height={16}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <Mask
-        id="a"
-        style={{
-          maskType: 'alpha',
-        }}
-        maskUnits="userSpaceOnUse"
-        x={0}
-        y={0}
-        width={16}
-        height={16}
-      >
-        <Path fill="#D9D9D9" d="M0 0H16V16H0z" />
+    <Svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <Mask id="mask0_16298_100611" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+        <Rect width="16" height="16" fill="#D9D9D9" />
      </Mask>
-      <G mask="url(#a)">
+      <G mask="url(#mask0_16298_100611)">
        <Path
-          d="M5.333 7.333a.645.645 0 00.475-.192A.645.645 0 006 6.666a.645.645 0 00-.192-.475A.645.645 0 005.333 6a.645.645 0 00-.475.191.645.645 0 00-.191.475c0 .19.064.348.191.475a.645.645 0 00.475.192zm2.667 0a.645.645 0 00.475-.192.645.645 0 00.192-.475.645.645 0 00-.192-.475A.645.645 0 008 6a.645.645 0 00-.475.191.645.645 0 00-.192.475c0 .19.064.348.192.475A.645.645 0 008 7.333zm2.667 0a.645.645 0 00.475-.192.645.645 0 00.191-.475.645.645 0 00-.191-.475.645.645 0 00-.475-.191.645.645 0 00-.475.191.645.645 0 00-.192.475c0 .19.064.348.192.475a.645.645 0 00.475.192zm-9.334 7.333v-12c0-.366.13-.68.392-.941.261-.261.575-.392.942-.392h10.666c.367 0 .68.13.942.392.261.26.392.575.392.941v8c0 .367-.13.68-.392.942a1.284 1.284 0 01-.942.392H4l-2.667 2.666z"
+          d="M4.69788 9.33008H8.68535C8.87286 9.33008 9.03328 9.26299 9.16662 9.12883C9.29995 8.99466 9.36662 8.82841 9.36662 8.63008C9.36662 8.44119 9.29717 8.2773 9.15828 8.13841C9.0194 7.99952 8.8562 7.93008 8.66868 7.93008H4.68122C4.49371 7.93008 4.33328 7.99716 4.19995 8.13133C4.06662 8.26549 3.99995 8.43174 3.99995 8.63008C3.99995 8.81897 4.06939 8.98286 4.20828 9.12174C4.34717 9.26063 4.51037 9.33008 4.69788 9.33008ZM4.69735 7.36341H11.3192C11.5064 7.36341 11.6666 7.29633 11.8 7.16216C11.9333 7.02799 12 6.86174 12 6.66341C12 6.47452 11.9305 6.31063 11.7916 6.17174C11.6527 6.03286 11.4897 5.96341 11.3026 5.96341H4.68068C4.49353 5.96341 4.33328 6.03049 4.19995 6.16466C4.06662 6.29883 3.99995 6.46508 3.99995 6.66341C3.99995 6.8523 4.06939 7.01619 4.20828 7.15508C4.34717 7.29397 4.51019 7.36341 4.69735 7.36341ZM4.69735 5.39674H11.3192C11.5064 5.39674 11.6666 5.32966 11.8 5.19549C11.9333 5.06133 12 4.89508 12 4.69674C12 4.50786 11.9305 4.34397 11.7916 4.20508C11.6527 4.06619 11.4897 3.99674 11.3026 3.99674H4.68068C4.49353 3.99674 4.33328 4.06383 4.19995 4.19799C4.06662 4.33216 3.99995 4.49841 3.99995 4.69674C3.99995 4.88563 4.06939 5.04952 4.20828 5.18841C4.34717 5.3273 4.51019 5.39674 4.69735 5.39674ZM1.33328 12.9801V2.73008C1.33328 2.34508 1.47037 2.01549 1.74453 1.74133C2.0187 1.46716 2.34828 1.33008 2.73328 1.33008H13.2666C13.6516 1.33008 13.9812 1.46716 14.2554 1.74133C14.5295 2.01549 14.6666 2.34508 14.6666 2.73008V10.5967C14.6666 10.9817 14.5295 11.3113 14.2554 11.5855C13.9812 11.8597 13.6516 11.9967 13.2666 11.9967H3.99995L2.53328 13.4634C2.31106 13.6856 2.0555 13.7372 1.76662 13.6181C1.47773 13.499 1.33328 13.2863 1.33328 12.9801Z"
          fill="#969696"
        />
      </G>
--- a/src/components/formRenderingEngine/index.tsx
+++ b/src/components/formRenderingEngine/index.tsx
@@ -1,73 +0,0 @@
-import React, { useMemo } from 'react';
-import { Button, Pressable, Text, View } from 'react-native';
-import { useDispatch, useSelector } from 'react-redux';
-import { GenericStyles } from 'RN-UI-LIB/src/styles';
-import { increaseByOne } from '../../reducer/caseReducer';
-import { RootState } from '../../store/store';
-import { navigateToScreen } from '../utlis/navigationUtlis';
-import { EachJourney, Template } from './types';
-
-interface RenderingEngine {
-  data: Template;
-  userData: {
-    id: string;
-    journeyOrder: Array<string>;
-    interactions: {
-      caseVerdict: string;
-      journeysMap: {
-        [id: string]: {
-          formData: {};
-          startWidget: string;
-          verdict: string;
-          addressId: string;
-          title: string;
-          completed: false;
-          isSynced: false;
-        };
-      };
-    };
-  };
-}
-
-const RenderingEngine: React.FC<RenderingEngine> = (props) => {
-  const dispatch = useDispatch();
-  const journeyOrder = props?.userData?.journeyOrder;
-  const data = useSelector((state: RootState) => state.case.value);
-
-  const handleNextContext = useMemo(
-    () => (journey: EachJourney) => {
-      navigateToScreen(journey.startWidget, {
-        journey: journey.id,
-        caseId: props.userData.id,
-      });
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-  const JourneyRendering = useMemo(
-    () =>
-      journeyOrder.map((eachJourney, index) => {
-        const journey = props.data.journeys[eachJourney];
-        return (
-          <Pressable onPress={() => handleNextContext(journey)} key={index}>
-            <Text>{journey.name}</Text>
-          </Pressable>
-        );
-      }),
-    [journeyOrder, handleNextContext, props]
-  );
-
-  const handlePress = () => {
-    dispatch(increaseByOne());
-  };
-
-  return (
-    <View style={GenericStyles.whiteBackground}>
-      <Text>Rendering Engine {data}</Text>
-      {JourneyRendering}
-      <Button title="add todo" onPress={handlePress} />
-    </View>
-  );
-};
-
-export default RenderingEngine;
--- a/src/components/formRenderingEngine/types.ts
+++ b/src/components/formRenderingEngine/types.ts
--- a/src/hooks/useFetchDocument.ts
+++ b/src/hooks/useFetchDocument.ts
@@ -139,7 +139,7 @@ const useFetchDocument = (

    return () => {
      apiInProgressReferenceIds.current = apiInProgressReferenceIds.current.filter(
-        (item) => item !== imageReferenceId
+        (item) => item !== imageDocument?.referenceId
      );
    };
  }, [retryForDocuments]);
--- a/src/screens/Dashboard/PerformanceMeter.tsx
+++ b/src/screens/Dashboard/PerformanceMeter.tsx
@@ -5,6 +5,7 @@ import {
  Pressable,
  LayoutAnimation,
  UIManager,
+  Platform,
 } from 'react-native';
 import Text from '../../../RN-UI-LIB/src/components/Text';
 import { COLORS } from '../../../RN-UI-LIB/src/styles/colors';
--- a/src/screens/caseDetails/feedback/FeedbackDetailItem.tsx
+++ b/src/screens/caseDetails/feedback/FeedbackDetailItem.tsx
@@ -45,7 +45,7 @@ export const feedbackTypeIcon: Record<FEEDBACK_TYPE, ReactNode> = {
  INHOUSE_FIELD_VISIT: <MapIcon fillColor={COLORS.TEXT.LIGHT} />,
  SELF_CALL: <CallIcon fillColor={COLORS.TEXT.LIGHT} />,
  CALL_BRIDGE: <CallIcon fillColor={COLORS.TEXT.LIGHT} />,
-  GEN_AI_BOT_FIELD: <SmsIcon fillColor={COLORS.TEXT.LIGHT} />,
+  GEN_AI_BOT_FIELD: <SmsIcon />,
 };

 const getAddress = (address?: Address) => {
--- a/src/screens/caseDetails/feedback/FeedbackListItem.tsx
+++ b/src/screens/caseDetails/feedback/FeedbackListItem.tsx
@@ -14,8 +14,7 @@ import WhatsAppFeedbackShareIcon from '@assets/icons/WhatsAppFeedbackShareIcon';
 import { useAppSelector } from '@hooks';
 import { shareToWhatsapp } from '../../../services/FeedbackWhatsApp';
 import { CaseDetailStackEnum } from '../CaseDetailStack';
-import { feedbackTypeIcon } from "@screens/caseDetails/feedback/FeedbackDetailItem";
-import Button from '../../../../RN-UI-LIB/src/components/Button';
+import { feedbackTypeIcon } from '@screens/caseDetails/feedback/FeedbackDetailItem';

 interface IFeedbackListItem {
  feedbackItem: IFeedback | IUnSyncedFeedbackItem;
@@ -67,21 +66,24 @@ const FeedbackListItem: React.FC<IFeedbackListItem> = ({
          <View style={styles.textBox}>
            <View style={[GenericStyles.row, GenericStyles.alignCenter]}>
              {feedbackItem.type && feedbackTypeIcon[feedbackItem.type] ? (
-                <View style={[
-                  GenericStyles.mr8,
-                  feedbackItem.type !== FEEDBACK_TYPE.GEN_AI_BOT_FIELD? styles.ml_4: null
-                ]}>
+                <View
+                  style={[
+                    GenericStyles.mr8,
+                    feedbackItem.type !== FEEDBACK_TYPE.GEN_AI_BOT_FIELD ? styles.ml_4 : null,
+                  ]}
+                >
                  {feedbackTypeIcon[feedbackItem.type]}
                </View>
              ) : null}
              <Text
-                style={
-                  [
-                    GenericStyles.pb4,
-                    GenericStyles.mr16,
-                    styles.textHeading,
-                    feedbackItem.type === FEEDBACK_TYPE.GEN_AI_BOT_FIELD? styles.capitalized: null
-                  ]}
+                numberOfLines={1}
+                ellipsizeMode="tail"
+                style={[
+                  GenericStyles.pb4,
+                  GenericStyles.mr16,
+                  styles.textHeading,
+                  feedbackItem.type === FEEDBACK_TYPE.GEN_AI_BOT_FIELD ? styles.capitalized : null,
+                ]}
              >
                {sanitizeString(feedbackItem.interactionStatus)}
              </Text>
@@ -132,7 +134,7 @@ const styles = StyleSheet.create({
    color: COLORS.TEXT.DARK,
  },
  capitalized: {
-    textTransform: "capitalize"
+    textTransform: 'capitalize',
  },
  subText: {
    fontSize: 12,
@@ -140,7 +142,7 @@ const styles = StyleSheet.create({
    color: COLORS.TEXT.LIGHT,
  },
  feedBox: {
-    flexBasis: '90%',
+    flexBasis: '94%',
  },
  textBox: {
    marginLeft: 10,