TP-32558 | Clickstream Events Added | Himanshu Kansal

src/components/form/NudgeSuspiciousFeedbackBottomSheet.tsx

@@ -1,5 +1,5 @@
 import { View, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';
-import React from 'react';
+import React, { useEffect } from 'react';
 import BottomSheet from '../../../RN-UI-LIB/src/components/bottom_sheet/BottomSheet';
 import CloseIcon from '../../../RN-UI-LIB/src/Icons/CloseIcon';
 import { COLORS } from '../../../RN-UI-LIB/src/styles/colors';
@@ -9,8 +9,11 @@ import { getDynamicBottomSheetHeightPercentageFn } from '../../components/utlis/
 import { GenericFunctionArgs } from '../../../RN-UI-LIB/src/components/types';
 import Button from '../../../RN-UI-LIB/src/components/Button';
 import ErrorExclamationIcon from '../../assets/icons/ErrorExclamationIcon';
+import { addClickstreamEvent } from '../../services/clickstreamEventService';
+import { CLICKSTREAM_EVENT_NAMES } from '../../common/Constants';
 
 interface INudgeSuspiciousFeedbackBottomSheet {
+  caseId: string;
   openBottomSheet: boolean;
   successBtnLoader: boolean;
   setOpenBottomSheet: React.Dispatch<React.SetStateAction<boolean>>;
@@ -19,14 +22,31 @@ interface INudgeSuspiciousFeedbackBottomSheet {
 const NudgeSuspiciousFeedbackBottomSheet: React.FC<INudgeSuspiciousFeedbackBottomSheet> = (
   props
 ) => {
-  const { openBottomSheet, successBtnLoader, setOpenBottomSheet, successCallbackFn } = props;
+  const { caseId, openBottomSheet, successBtnLoader, setOpenBottomSheet, successCallbackFn } =
+    props;
   const height = getDynamicBottomSheetHeightPercentageFn(100, 24);
 
+  useEffect(() => {
+    addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_SUSPICIOUS_NUDGE_LANDED, {
+      caseId,
+    });
+  }, []);
+
   const handleClose = () => {
     if (successBtnLoader) return;
+    addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_BACK_CLICKED, {
+      caseId,
+    });
     setOpenBottomSheet((prev) => !prev);
   };
 
+  const successCallback = () => {
+    addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_SUBMIT_ANYWAYS_CLICKED, {
+      caseId,
+    });
+    successCallbackFn();
+  };
+
   return (
     <BottomSheet
       heightPercentage={height(10)}
@@ -69,7 +89,7 @@ const NudgeSuspiciousFeedbackBottomSheet: React.FC<INudgeSuspiciousFeedbackBotto
           showLoader={successBtnLoader}
           disabled={successBtnLoader}
           title="Submit anyways"
-          onPress={successCallbackFn}
+          onPress={successCallback}
           style={GenericStyles.fill}
           testID={'test_submit_anyway_btn'}
         />
@@ -101,6 +121,7 @@ const styles = StyleSheet.create({
     fontWeight: '400',
   },
   tipContainer: {
+    borderRadius: 4,
     backgroundColor: COLORS.BACKGROUND.SILVER,
     paddingHorizontal: 12,
     paddingVertical: 8,

src/components/form/index.tsx

@@ -201,6 +201,11 @@ const Widget: React.FC<IWidget> = (props) => {
 
   const onErrorSubmit = (errObj: GenericType, data?: GenericType, interactionId?: string) => {
     setIsSubmitting(false);
+    if (showNudgeBottomSheet) {
+      addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_SUBMIT_ANYWAYS_FAILED, {
+        caseId,
+      });
+    }
     if (errObj.statusCode === API_STATUS_CODE.UNPROCESSABLE_CONTENT) {
       setNudgeBottomSheet(true);
     }
@@ -471,6 +476,7 @@ const Widget: React.FC<IWidget> = (props) => {
           />
         </View>
         <NudgeSuspiciousFeedbackBottomSheet
+          caseId={caseId}
           successBtnLoader={isSubmitting}
           openBottomSheet={showNudgeBottomSheet}
           setOpenBottomSheet={setNudgeBottomSheet}