Cosmos UI fixes (#660)

Co-authored-by: Varnit Goyal <varnit.goyal@navi.com>

src/common/Constants.ts

@@ -448,6 +448,10 @@ export const CLICKSTREAM_EVENT_NAMES = {
     name: 'FA_SHARE_SUCCESSFUL',
     description: 'When user is redirected to WhatsApp after clicking on share feedback',
   },
+  FA_PERFORMANCE_DASHBOARD_PERFORMANCE_GRAPH_CLICKED: {
+    name: 'FA_PERFORMANCE_DASHBOARD_PERFORMANCE_GRAPH_CLICKED',
+    description: 'When the user clicks on expand/collapse of the performance graph',
+  },
 
   // Notifications
   FA_NOTIFICATION_ICON_CLICK: {

src/screens/Dashboard/PerformanceMeter.tsx

@@ -9,9 +9,12 @@ import CashCollectedGraph from './CashCollectedGraph';
 import { useAppSelector, useAppDispatch } from '../../hooks';
 import { setIsGraphExpanded } from '@reducers/agentPerformanceSlice';
 import { getPerformanceLevel } from './utils';
+import { addClickstreamEvent } from '@services/clickstreamEventService';
+import { CLICKSTREAM_EVENT_NAMES } from '@common/Constants';
 
 const PerformanceMeter = () => {
   const performanceData = useAppSelector((state) => state.agentPerformance.performanceData);
+  const agentId = useAppSelector((state) => state?.user?.user?.referenceId);
   const { performanceLevel } = performanceData || {};
   const { isGraphExpanded } = useAppSelector((state) => state.agentPerformance);
   const [isGraphCompletelyExpanded, setIsGraphCompletelyExpanded] = useState(false);
@@ -35,12 +38,20 @@ const PerformanceMeter = () => {
       useNativeDriver: false,
     };
     if (isGraphExpanded) {
+      addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_PERFORMANCE_DASHBOARD_PERFORMANCE_GRAPH_CLICKED, {
+        agentId,
+        action: 'collapse'
+      });
       Animated.timing(animatedController, {
         ...sharedAnimationConfig,
         toValue: 0,
         easing: Easing.bezier(0.4, 0.0, 0.2, 1),
       }).start(() => setIsGraphCompletelyExpanded(false));
     } else {
+      addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_PERFORMANCE_DASHBOARD_PERFORMANCE_GRAPH_CLICKED, {
+        agentId,
+        action: 'expand'
+      });
       Animated.timing(animatedController, {
         ...sharedAnimationConfig,
         toValue: 1,

src/screens/caseDetails/CollectionCaseDetail.tsx

@@ -295,6 +295,9 @@ const CollectionCaseDetails: React.FC<ICaseDetails> = (props) => {
                     <Chevron />
                   </View>
                 }
+                underlayColor='transparent'
+                pressableWidthChange={false}
+                opacityChangeOnPress={true}
               />
             </View>
             <View
@@ -422,6 +425,8 @@ const CollectionCaseDetails: React.FC<ICaseDetails> = (props) => {
                     <Chevron fillColor={COLORS.TEXT.BLUE} />
                   </View>
                 }
+                pressableWidthChange={false}
+                opacityChangeOnPress={true}
               />
             </View>
             <View
@@ -457,7 +462,7 @@ const CollectionCaseDetails: React.FC<ICaseDetails> = (props) => {
                         onPress={() => {
                           handleRouting(PageRouteEnum.PAST_FEEDBACK_DETAIL);
                         }}
-                        style={GenericStyles.flex20}
+                        style={({ pressed })=>[GenericStyles.flex20, { opacity: pressed ? 0.7 : 1 }]}
                       >
                         <Text style={[styles.textContainer, styles.feedbackBtn]}>
                           Open all feedbacks

src/screens/caseDetails/CustomerProfile.tsx

@@ -276,8 +276,9 @@ const styles = StyleSheet.create({
   },
   positionAbsoluteCenterAlign: {
     position: 'absolute',
-    top: '50%',
-    right: '50%',
+   top: '50%',
+   left : '50%',
+   transform: [{ translateX: -7 }, { translateY: 5 }],
     zIndex: 99,
   },
   loadingState: {

src/screens/caseDetails/feedback/FeedbackDetailItem.tsx

@@ -123,7 +123,7 @@ const FeedbackDetailItem = ({
           >
             <GeolocationAddress
               address={feedbackItem.source as IGeolocation}
-              showOpenMap
+              showOpenMap={false}
               isFeedbackView
             />
           </View>
@@ -148,21 +148,20 @@ const FeedbackDetailItem = ({
       {feedbackItem.metadata?.interactionLatitude && FIELD_FEEDBACKS.includes(feedbackItem.type) ? (
         <>
           <View style={styles.container}>
-            {!isGeolocation ? (
+            
               <TouchableOpacity
                 hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
                 activeOpacity={0.7}
-                onPress={() =>
+                onPress={() =>{
                   openGeolocation(
                     feedbackItem.metadata?.interactionLatitude,
                     feedbackItem.metadata?.interactionLongitude
-                  )
+                  )}
                 }
                 style={[GenericStyles.row, styles.BtnPadding]}
               >
                 <Text style={[styles.textContainer, styles.geolocationBtn]}>Open map</Text>
               </TouchableOpacity>
-            ) : null}
             <TouchableOpacity
               hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
               activeOpacity={0.7}