@os1-platform/dispatch-mobile 2.1.5 → 2.1.7

package/src/components/executiontasks/dropCash/SLDropCash.tsx

@@ -21,6 +21,8 @@ import GoBackModal from '../../../components/widgets/GoBackModal';
 import { hasGoBackConnector } from '../../../components/utils';
 import { useFocusEffect } from '@react-navigation/native';
 import { BackHandler } from 'react-native';
+import { ScreenNameSdkConstants, SentryEventNameSdkConstants, SeverityLevelValue } from '../../../analytics/sentry/SentrySdkConstants';
+import { fireEventWithScreenName } from '../../../analytics/sentry/SentryAnalyticsUtils';
 
 const SLDropCash = (props: DropCashInput) => {
   const [amountCollected, setAmountCollected] = useState(
@@ -80,6 +82,9 @@ const SLDropCash = (props: DropCashInput) => {
               )
                 setShowBackModal(true);
               else props.navigation.goBack();
+              const cta = 'Back Arrow';
+              fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.SL_DROP_CASH_ET_SCREEN, cta: cta });    
+
             }}
             name="arrow-back"
             color={'black'}
@@ -246,6 +251,9 @@ const SLDropCash = (props: DropCashInput) => {
                       )),
                     });
                   } else setInputError('Please enter valid amount.');
+                  const cta = 'Confirm';
+                  fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.SL_DROP_CASH_ET_SCREEN, cta: cta });    
+    
                 }}
               >
                 Confirm
@@ -271,6 +279,9 @@ const SLDropCash = (props: DropCashInput) => {
                         ExecutionTaskID.DELIVER_CASH
                       )),
                     });
+                    const cta = 'Cancel';
+                    fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.SL_DROP_CASH_ET_SCREEN, cta: cta });    
+      
                   }}
                 >
                   Cancel

package/src/components/executiontasks/forms/FormGenerator.tsx

@@ -31,6 +31,8 @@ import { GO_BACK_EVENT_CODE } from '../../../constants/constants';
 import { hasGoBackConnector } from '../../../components/utils';
 import GoBackModal from '../../../components/widgets/GoBackModal';
 import { useFocusEffect } from '@react-navigation/native';
+import { ScreenNameSdkConstants, SentryEventNameSdkConstants, SeverityLevelValue } from '../../../analytics/sentry/SentrySdkConstants';
+import { fireEventWithScreenName } from '../../../analytics/sentry/SentryAnalyticsUtils';
 
 const customWidgets = {
   datePicker: DateTimeWidget,
@@ -78,6 +80,9 @@ const FormGenerator = (props: FormInputSchema) => {
               )
                 setShowBackModal(true);
               else props.navigation.goBack();
+              const cta = 'Back Arrow';
+              fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.FORM_ET_SCREEN, cta: cta });    
+
             }}
             name="arrow-back"
             color={'black'}
@@ -218,33 +223,45 @@ const FormGenerator = (props: FormInputSchema) => {
           </View>
         </ScrollView>
         <View style={styles.bottomView}>
-          {(props.isSelfLoop == false) && <Button
-            style={[CommonStyles.cancelButton, { marginEnd: 10, flexGrow: 1 }]}
-            labelStyle={CommonStyles.cancelButtonLabel}
-            mode={'outlined'}
-            onPress={() => {
-              if (form.current) {
-                setOnCancel(true);
-                // @ts-ignore
-                form.current.submit();
-              }
-            }}
-          >Cancel
-          </Button>
-          }
-          <Button
-            style={[CommonStyles.nextButton, { marginStart: 10, flexGrow: 1 }]}
-            labelStyle={CommonStyles.nextButtonLabel}
-            mode={'contained'}
-            onPress={() => {
-              if (form.current) {
-                setOnCancel(false);
-                // @ts-ignore
-                form.current.submit();
-              }
-            }}
-          >Proceed
-          </Button>
+          <View>
+            <Button
+              style={[CommonStyles.nextButton, { width: 165, marginStart: 10 }]}
+              labelStyle={CommonStyles.nextButtonLabel}
+              mode={'contained'}
+              onPress={() => {
+                if (form.current) {
+                  setOnCancel(false);
+                  // @ts-ignore
+                  form.current.submit();
+                }
+                const cta = 'Proceed';
+                fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.FORM_ET_SCREEN, cta: cta });    
+  
+              }}
+            >
+              Proceed
+            </Button>
+          </View>
+          <View>
+            {(props.isSelfLoop == false) && <Button
+              style={[CommonStyles.cancelButton, { width: 165, marginEnd: 10 }]}
+              labelStyle={CommonStyles.cancelButtonLabel}
+              mode={'outlined'}
+              onPress={() => {
+                if (form.current) {
+                  setOnCancel(true);
+                  // @ts-ignore
+                  form.current.submit();
+                }
+                const cta = 'Cancel';
+                fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.FORM_ET_SCREEN, cta: cta });    
+  
+              }}
+            >
+              Cancel
+            </Button>
+            }
+          </View>
         </View>
       </KeyboardAvoidingView>
     </Provider>
@@ -269,9 +286,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   bottomView: {
-    flexDirection: 'row',
+    flexDirection: 'row-reverse',
     justifyContent: 'space-evenly',
-    backgroundColor: 'white',
     padding: 16,
+    backgroundColor: 'white',
   },
 });

package/src/components/executiontasks/forms/widgets/DateTimeWidget.tsx

@@ -10,6 +10,9 @@ import DateTimePicker, { Event } from '@react-native-community/datetimepicker';
 import type { WidgetProps } from '@rjsf/core';
 import { useFormContext } from 'rjsf-native';
 import SdkColors, { ColorTheme } from '../../../../styles/SdkColors';
+import { ScreenNameSdkConstants, SentryEventNameSdkConstants, SeverityLevelValue } from '../../../../analytics/sentry/SentrySdkConstants';
+import { fireEventWithScreenName } from '../../../../analytics/sentry/SentryAnalyticsUtils';
+
 
 const MODES = {
   DATE: 'date',
@@ -49,7 +52,7 @@ const DateTimeWidget = ({
     color: theme.textColor,
   };
   const onDateChange = (_event: Event, selectedDate?: Date) => {
-    setShow(Platform.OS === 'ios');
+    setShow(false);
     if (selectedDate) {
       const currentDate = selectedDate;
       let dateTimeValue = getValueBasedOnMode(options, currentDate);
@@ -60,7 +63,11 @@ const DateTimeWidget = ({
 
   return (
     <View style={styles.container}>
-      <TouchableOpacity onPress={() => setShow(true)}>
+      <TouchableOpacity onPress={() => {setShow(true)
+                const cta = label;
+                fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.DATE_TIME_WIDGET_SCREEN, cta: cta });    
+  
+      }}>
         <TextInput
           editable={false}
           onTouchStart={() => setShow(true)}
@@ -84,7 +91,7 @@ const DateTimeWidget = ({
           minimumDate={options.mode === 'date' ? new Date() : undefined}
           maximumDate={maxDate}
           is24Hour={false}
-          display={Platform.OS === 'ios' ? 'compact' : 'default'}
+          display={Platform.OS === 'ios' ? 'inline' : 'default'}
           onChange={onDateChange}
           value={date ?? new Date()}
           textColor={'red'}

package/src/components/executiontasks/forms/widgets/QRBarcodeScannerWidget.tsx

@@ -11,6 +11,8 @@ import type { WidgetProps } from '@rjsf/core';
 import { useFormContext } from 'rjsf-native';
 import { AntDesign } from '@expo/vector-icons';
 import CScanner from '../../scan/sub_components/CScanner';
+import { ScreenNameSdkConstants, SentryEventNameSdkConstants, SeverityLevelValue } from '../../../../analytics/sentry/SentrySdkConstants';
+import { fireEventWithScreenName } from '../../../../analytics/sentry/SentryAnalyticsUtils';
 
 const QRBarcodeScannerWidget = ({
   id,
@@ -39,7 +41,12 @@ const QRBarcodeScannerWidget = ({
 
   return (
     <View style={styles.container}>
-      <TouchableOpacity onPress={() => setShow(true)}>
+      <TouchableOpacity onPress={() => {setShow(true)
+                 const cta = label;
+                 fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.QRBARCODE_WIDGET_SCREEN, cta: cta });    
+   
+      
+      }}>
         <TextInput
           editable={false}
           onTouchStart={() => setShow(true)}

package/src/components/executiontasks/imageCapture/CaptureSchema.ts

@@ -31,6 +31,10 @@ export type ImageData = {
   path: string;
   url: string;
   timestamp: number;
+  lat: string;
+  lng: string;
+  accuracy: string;
+  dateTime: string;
 };
 
 /**

package/src/components/executiontasks/imageCapture/CaptureUtils.ts

@@ -9,8 +9,6 @@ import * as FileSystem from 'expo-file-system';
 import * as ImagePicker from 'expo-image-picker';
 import { PermissionStatus } from 'expo-image-picker';
 import { showToast } from '../../widgets/Toaster';
-import type { ActionResize, ImageResult } from 'expo-image-manipulator';
-import * as ImageManipulator from 'expo-image-manipulator';
 import Logger, { LOG_TYPE } from '../../../utils/Logger';
 import { getBaseETResponse } from '../../../utils/ExecTaskUtils';
 import { getEventCodeByET } from '../../../manager/dispatchCodes/EventCodeContainer';
@@ -23,6 +21,8 @@ import BaseErrorCodes from '../../../errors/ErrorCodes';
 import DispatchSdkCache from '../../../manager/sdk/DispatchSdkCache';
 import { insertDocumentInDB } from '../../../utils/SyncManagerUtils';
 import {CameraOptions, launchCamera} from 'react-native-image-picker';
+import { Image } from 'react-native-compressor';
+import Storage from '../../../utils/storage';
 
 export async function deleteImage(imageData: { path: string; id: { toString: () => string; }; }, images: any[]) {
   await FileSystem.deleteAsync(imageData.path);
@@ -82,6 +82,13 @@ interface responseType {
   assets?: any[];
 }
 
+declare type ImageResult = {
+  uri: string;
+  width: number;
+  height: number;
+  base64?: string;
+};
+
 export async function captureImage(
   imageWidth: number,
   imageHeight: number,
@@ -180,21 +187,36 @@ export async function captureImage(
 
     console.log("aks:uri-after=", uri)
     //       
-    if(uri != null){      
-      //
+    if (uri != null) {
+ 
       let compressionRatio = await getCompressionRatio(uri, fileSize);
-      console.log("aks:compressionRatio=", compressionRatio)
-      
+      console.log('aks:compressionRatio=', compressionRatio);
+      Storage.getInstance().setItem('maxSize', String(fileSize));
+      Storage.getInstance().setItem('cRatio', String(compressionRatio));
+
+      console.log('aks:uri=', uri);
+
+      let resizedImage1 = await Image.compress(uri, {
+        compressionMethod: 'manual',
+        quality: compressionRatio,
+      });
       //
-      const saveOptions = {
-        compress: compressionRatio,
+      console.log('aks:resizedImage1=', resizedImage1);
+      // If captured image file path does not have prefix file:// then we are addding manually
+      if (!resizedImage1.includes('file')) {
+        resizedImage1 = 'file://' + resizedImage1; 
       }
-      //
-      console.log("aks:uri=blank")
-      console.log("aks:uri=", uri)
-      let resizedImage = await ImageManipulator.manipulateAsync(uri, [], saveOptions,);
-      //
-      console.log("aks:resizedImage=", resizedImage)
+
+      console.log('aks:resizedImage2=', resizedImage1);
+
+      let resizedImageResult: ImageResult = {
+        uri: resizedImage1,
+        width: imageWidth,
+        height: imageHeight,
+        base64: '',
+      };
+      console.log('aks:resizedImageResult=', resizedImageResult);
+
       //delete file
       FileSystem.deleteAsync(uri)
           .then(() =>
@@ -204,10 +226,10 @@ export async function captureImage(
           });
       //
 
-    console.log("resizedImage=before")
-    console.log("resizedImage=", resizedImage)
+   // console.log("resizedImage=before")
+  //  console.log("resizedImage=", resizedImage)
 
-      return resizedImage;
+      return resizedImageResult;
     }
 
     // if(Platform.OS = 'android'){
@@ -294,6 +316,7 @@ async function getImagesData(
       (await DispatchSdkCache.getInstance().getKeyFromCache(
         DispatchSdkCache.KEYS.FMS_FOLDER
       )) ?? 'NULL';
+      console.log('getImagesData:',folderName);
     for (const data of imagesDataList) {
       let insertID = await insertDocumentInDB(
         data.id,
@@ -302,7 +325,11 @@ async function getImagesData(
         // JSON.stringify(captureProps.objRefs),
         null,
         captureProps.title,
-        data.path
+        data.path,
+        data.dateTime,
+        data.lat,
+        data.lng,
+        data.accuracy
       );
       if (insertID)
         output.push({

package/src/components/executiontasks/imageCapture/ImageCapture.tsx

@@ -17,8 +17,11 @@ import { hasGoBackConnector } from '../../../components/utils';
 import GoBackModal from '../../../components/widgets/GoBackModal';
 import { useFocusEffect } from '@react-navigation/native';
 import Circle from "./circle-xmark.svg"
-
 import CameraIcon from "./camera.svg"
+import { ScreenNameSdkConstants, SentryEventNameSdkConstants, SeverityLevelValue } from '../../../analytics/sentry/SentrySdkConstants';
+import { fireEventWithScreenName } from '../../../analytics/sentry/SentryAnalyticsUtils';
+import LocationManager from '../../../manager/location/LocationManager';
+import callbackHandler from '../../../manager/sdk/callbacksHandler';
 
 const ImageCapture = (props: any) => {
   let numberOfImagesToCapture: any;
@@ -69,6 +72,9 @@ const ImageCapture = (props: any) => {
               )
                 setShowBackModal(true);
               else props.navigation.goBack();
+              const cta = "Back Arrow";
+              fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.CAPTURE_IMAGE_ET_SCREEN, cta: cta });    
+
             }}
             name="arrow-back"
             color={'black'}
@@ -129,7 +135,12 @@ const ImageCapture = (props: any) => {
         >
           {imagesDummy?.length > index && imagesDummy[index]?.path ? null : (
   <TouchableOpacity
-  onPress={onPress}>
+  onPress={() => { onPress()
+    const cta = "Camera Icon";
+    fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.CAPTURE_IMAGE_ET_SCREEN, cta: cta });    
+
+  }}
+  >
 <View
 style={{
   marginTop:
@@ -142,11 +153,15 @@ style={{
            
           )}
           <Button
-            onPress={() => captureImage(index)}
+            onPress={() => { captureImage(index)
+              const cta = "Click Photo";
+              fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.CAPTURE_IMAGE_ET_SCREEN, cta: cta });    
+
+            }}
             uppercase={false}
             labelStyle={[
               {
-                fontFamily: Fonts.IBMPlexSans_500Medium,
+                fontFamily: Platform.OS === 'android' ? Fonts.IBMPlexSans_500Medium : 'IBMPlexSans-Medium',
                 fontStyle: 'normal',
                 fontWeight: 'normal',
                 fontSize: 14,
@@ -170,7 +185,11 @@ style={{
             }}
           />
           <TouchableOpacity
-            onPress={onPress}
+            onPress={() => { onPress()
+              const cta = "Circle Icon";
+              fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.CAPTURE_IMAGE_ET_SCREEN, cta: cta });    
+          
+            }}
             style={{
               position: 'absolute',
               top: numColumns == 2 ? '17%' : '9%',
@@ -261,6 +280,7 @@ style={{
   // }, [images, props, showCapture]);
 
   const captureImage = useCallback(async (index) => {
+
     //   // if (!showCapture) {
     //   //   showToast(`Max Image Limit reached`);
     //   //   return;
@@ -277,12 +297,18 @@ style={{
 
       let imgArray = [];
       imgArray = imagesDummy;
+      const dateTime = await callbackHandler.getDateTime();
+      console.log('captureImage:dateTime: ',dateTime);
       imgArray[index] = {
         id: CaptureUtils.getImagesFileName(),
         // @ts-ignore
         path: imageDataResponse.uri,
         url: '',
         timestamp: Date.now(),
+        dateTime: dateTime,
+        lat: LocationManager.getInstance().getLastLocation().latitude,
+        lng: LocationManager.getInstance().getLastLocation().longitude,
+        accuracy: LocationManager.getInstance().getLastLocation().accuracy,
       };
       setImagesDummy([...imgArray])
       console.log("images211:", JSON.stringify(imgArray));
@@ -300,7 +326,7 @@ style={{
     let initialProceedValue = false;
     for (let i = 0; i < imageDummyArray.length; i++) {
       if (imageDummyArray[i]?.path) {
-        initialProceedValue = true
+        initialProceedValue = true;
       }
     }
     setButtonProceed(initialProceedValue);
@@ -321,6 +347,9 @@ style={{
         index={index}
         onPress={async () => {
           await deleteImage(index);
+          const cta = "Delete Icon";
+          fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.CAPTURE_IMAGE_ET_SCREEN, cta: cta });    
+   
         }}
       />
     );
@@ -373,6 +402,9 @@ style={{
                   ExecutionTaskID.IMAGE_CAPTURE
                 )),
               });
+              const cta = "Cancel";
+              fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.CAPTURE_IMAGE_ET_SCREEN, cta: cta });    
+       
             }}
           >
             Cancel
@@ -381,7 +413,7 @@ style={{
           <Button
             labelStyle={{
               color: buttonProceed ? '#ffff' : '#A3AAC2',
-              fontFamily: Fonts.IBMPlexSans_500Medium,
+              fontFamily: Platform.OS === 'android' ? Fonts.IBMPlexSans_500Medium : 'IBMPlexSans-Medium',
               fontSize: 14,
               lineHeight: 20,
               textAlign: 'center',
@@ -396,6 +428,9 @@ style={{
             mode="contained"
             onPress={async () => {
               await handleSubmit();
+              const cta = "Proceed";
+              fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.CAPTURE_IMAGE_ET_SCREEN, cta: cta });    
+       
             }}
           >
             Proceed

package/src/components/executiontasks/payments/completePayment/CompletePaymentET.tsx

@@ -32,6 +32,8 @@ import GoBackModal from '../../../../components/widgets/GoBackModal';
 import { hasGoBackConnector } from '../../../../components/utils';
 import { useFocusEffect } from '@react-navigation/native';
 import { BackHandler } from 'react-native';
+import { ScreenNameSdkConstants, SentryEventNameSdkConstants, SeverityLevelValue } from '../../../../analytics/sentry/SentrySdkConstants';
+import { fireEventWithScreenName } from '../../../../analytics/sentry/SentryAnalyticsUtils';
 
 const CompletePaymentET = (props: CompletePaymentInput) => {
   const [disableProceed, setDisableProceed] = useState(false);
@@ -71,6 +73,9 @@ const CompletePaymentET = (props: CompletePaymentInput) => {
               )
                 setShowBackModal(true);
               else props.navigation.goBack();
+              const cta = "Back Arrow";
+              fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.COMPLETE_PAYMENT_ET_SCREEN, cta: cta });    
+       
             }}
             name="arrow-back"
             color={'black'}
@@ -167,6 +172,9 @@ const CompletePaymentET = (props: CompletePaymentInput) => {
                   };
                   setDisableProceed(true);
                   props.onSubmitET(etOutput);
+                  const cta = "Continue";
+                  fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.COMPLETE_PAYMENT_ET_SCREEN, cta: cta });    
+           
                 }}
               >
                 Continue
@@ -195,6 +203,9 @@ const CompletePaymentET = (props: CompletePaymentInput) => {
                   };
                   setDisableProceed(true);
                   props.onSubmitET(etOutput);
+                  const cta = "Cancel";
+                  fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.COMPLETE_PAYMENT_ET_SCREEN, cta: cta });    
+           
                 }}
               >
                 Cancel

package/src/components/executiontasks/payments/init/InitPaymentET.tsx

@@ -23,6 +23,8 @@ import { hasGoBackConnector } from '../../../../components/utils';
 import GoBackModal from '../../../../components/widgets/GoBackModal';
 import { useFocusEffect } from '@react-navigation/native';
 import { BackHandler } from 'react-native';
+import { ScreenNameSdkConstants, SentryEventNameSdkConstants, SeverityLevelValue } from '../../../../analytics/sentry/SentrySdkConstants';
+import { fireEventWithScreenName } from '../../../../analytics/sentry/SentryAnalyticsUtils';
 
 const styles = PaymentStyles;
 
@@ -75,6 +77,9 @@ const InitPaymentET = (props: InitPaymentInput) => {
               )
                 setShowBackModal(true);
               else props.navigation.goBack();
+              const cta = "Back Arrow";
+              fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.INIT_PAYMENT_ET_SCREEN, cta: cta });    
+     
             }}
             name="arrow-back"
             color={'black'}
@@ -126,12 +131,18 @@ const InitPaymentET = (props: InitPaymentInput) => {
           status={paymentMode === item ? 'checked' : 'unchecked'}
           onPress={() => {
             setPaymentMode(item);
+            const cta = paymentMode === item ? 'paymentMode checked' : 'paymentMode unchecked';
+            fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.INIT_PAYMENT_ET_SCREEN, cta: cta });    
+
           }}
         />
         <Text
           style={styles.reasonTextStyle}
           onPress={() => {
             setPaymentMode(item);
+            const cta = item;
+            fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.INIT_PAYMENT_ET_SCREEN, cta: cta });    
+
           }}
         >
           {item}
@@ -197,6 +208,9 @@ const InitPaymentET = (props: InitPaymentInput) => {
                     ExecutionTaskID.INIT_PAYMENT
                   )),
                 });
+                const cta = 'Cancel';
+                fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.INIT_PAYMENT_ET_SCREEN, cta: cta });    
+    
               }}
             >
               Cancel
@@ -233,6 +247,9 @@ const InitPaymentET = (props: InitPaymentInput) => {
                     )),
                   });
                 } else showToast('No payment mode selected');
+                const cta = 'Collect';
+                fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.INIT_PAYMENT_ET_SCREEN, cta: cta });    
+    
               }}
             >
               Collect

package/src/components/executiontasks/payments/processPayment/ProcessPaymentET.tsx

@@ -23,6 +23,8 @@ import { GO_BACK_EVENT_CODE } from '../../../../constants/constants';
 import GoBackModal from '../../../../components/widgets/GoBackModal';
 import { hasGoBackConnector } from '../../../../components/utils';
 import { useFocusEffect } from '@react-navigation/native';
+import { ScreenNameSdkConstants, SentryEventNameSdkConstants, SeverityLevelValue } from '../../../../analytics/sentry/SentrySdkConstants';
+import { fireEventWithScreenName } from '../../../../analytics/sentry/SentryAnalyticsUtils';
 
 const styles = PaymentStyles;
 
@@ -66,6 +68,9 @@ const ProcessPaymentET = (props: ProcessPaymentInput) => {
               )
                 setShowBackModal(true);
               else props.navigation.goBack();
+              const cta = 'Back Arrow';
+              fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.PROCESS_PAYMENT_ET_SCREEN, cta: cta });    
+  
             }}
             name="arrow-back"
             color={'black'}
@@ -203,6 +208,9 @@ const ProcessPaymentET = (props: ProcessPaymentInput) => {
                     ExecutionTaskID.PROCESS_PAYMENT
                   )),
                 });
+                const cta = 'Cancel';
+                fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.PROCESS_PAYMENT_ET_SCREEN, cta: cta });    
+    
               }}
             >
               Cancel
@@ -260,6 +268,9 @@ const ProcessPaymentET = (props: ProcessPaymentInput) => {
                 } else {
                   setInputError('Please enter valid amount.');
                 }
+                const cta = 'Next';
+                fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.PROCESS_PAYMENT_ET_SCREEN, cta: cta });    
+    
               }}
             >
               Next

package/src/components/executiontasks/pickup/PickupET.tsx

@@ -13,6 +13,8 @@ import {
   ExecutionTaskID,
 } from '../../../models/execTasks/ETConfig';
 import type { LineItem } from '../deliver/DeliverETInput';
+import { ScreenNameSdkConstants, SentryEventNameSdkConstants, SeverityLevelValue } from '../../../analytics/sentry/SentrySdkConstants';
+import { fireEventWithScreenName } from '../../../analytics/sentry/SentryAnalyticsUtils';
 
 const ListItem = ({ lineItem }: { lineItem: LineItem }) => (
   <Card style={deliverETStyles.item}>
@@ -78,6 +80,9 @@ const PickupET = (props: PickupETInput) => {
                     ExecutionTaskID.PICKUP
                   )),
                 });
+                const cta = 'Cancel';
+                fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.PICKUP_ET_SCREEN, cta: cta });    
+    
               }}
             >
               Cancel
@@ -104,6 +109,9 @@ const PickupET = (props: PickupETInput) => {
                     ExecutionTaskID.PICKUP
                   )),
                 });
+                const cta = 'Pickup';
+                fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.PICKUP_ET_SCREEN, cta: cta });    
+    
               }}
             >
               Pickup