feat: add rudderstack reporting on dialog dismiss (#3213)

Co-authored-by: Subir Jolly <subirjolly@Subirs-MacBook-Pro.local>

Author: subirjolly

src/billing/components/PayAsYouGo/CancelServiceReasonsForm.tsx

@@ -123,15 +123,16 @@ function CancelServiceReasonsForm() {
               checked={canContactForFeedback}
               onChange={toggleCanContactForFeedback}
               size={ComponentSize.Small}
-              titleText="I understand and agree to these conditions"
+              titleText="I am open to talking further with the Influx product & design"
               type={InputType.Checkbox}
               testID="agree-terms--checkbox"
             />
             <InputLabel
               active={canContactForFeedback}
               size={ComponentSize.Small}
             >
-              I understand and agree to these conditions
+              I am open to talking further with the Influx product &amp; design
+              team about my experience
             </InputLabel>
           </FlexBox>
         </span>

src/billing/components/PayAsYouGo/CancellationOverlay.tsx

@@ -77,6 +77,19 @@ const CancellationOverlay: FC<Props> = ({onHideOverlay}) => {
   }
 
   const handleDismiss = () => {
+    if (
+      isFlagEnabled('rudderstackReporting') &&
+      isFlagEnabled('trackCancellations')
+    ) {
+      const payload = {
+        org: org.id,
+        tier: quartzMe?.accountType,
+        email: quartzMe?.email,
+      }
+      // Send to Rudderstack
+      track('CancelServiceDismissed', payload)
+    }
+
     setHasClickedCancel(false)
     onHideOverlay()
   }
@@ -94,7 +107,7 @@ const CancellationOverlay: FC<Props> = ({onHideOverlay}) => {
 
   return (
     <Overlay visible={true} className="cancellation-overlay">
-      <Overlay.Container maxWidth={600}>
+      <Overlay.Container maxWidth={700}>
         <Overlay.Header title="Cancel Service" onDismiss={handleDismiss} />
         <Overlay.Body>
           <Alert

src/organizations/components/DeleteOrgOverlay.tsx

@@ -50,6 +50,19 @@ const DeleteOrgOverlay: FC = () => {
   const org = useSelector(getOrg)
 
   const handleClose = () => {
+    if (
+      isFlagEnabled('rudderstackReporting') &&
+      isFlagEnabled('trackCancellations')
+    ) {
+      const payload = {
+        org: org.id,
+        tier: quartzMe?.accountType,
+        email: quartzMe?.email,
+      }
+      // Send to Rudderstack
+      track('DeleteOrgDismissed', payload)
+    }
+
     history.goBack()
   }