fix: dont require double click to show feedback surveys (#1767)

Author: lucasheriques

src/__tests__/extensions/surveys.test.ts

@@ -1,10 +1,11 @@
 /* eslint-disable compat/compat */
 import { act, fireEvent, render, renderHook } from '@testing-library/preact'
 import {
+    SurveyManager,
+    SurveyPopup,
     generateSurveys,
     renderFeedbackWidgetPreview,
     renderSurveysPreview,
-    SurveyManager,
     useHideSurveyOnURLChange,
     usePopupVisibility,
 } from '../../extensions/surveys'
@@ -613,6 +614,7 @@ describe('usePopupVisibility URL changes should hide surveys accordingly', () =>
             feature_flag_keys: null,
             linked_flag_key: null,
             targeting_flag_key: null,
+            internal_targeting_flag_key: null,
             appearance: {},
         }) as Survey
 
@@ -1071,6 +1073,81 @@ describe('useHideSurveyOnURLChange', () => {
     })
 })
 
+describe('onPopupSurveyDismissed callback', () => {
+    let posthog: PostHog
+
+    beforeEach(() => {
+        document.getElementsByTagName('html')[0].innerHTML = ''
+        localStorage.clear()
+        jest.clearAllMocks()
+
+        // Mock PostHog instance
+        posthog = {
+            capture: jest.fn(),
+            get_session_replay_url: jest.fn(),
+        } as unknown as PostHog
+    })
+
+    test('onPopupSurveyDismissed is called when Cancel button is clicked in SurveyPopup', () => {
+        // Create a simple survey for testing
+        const survey = {
+            id: 'test-survey',
+            name: 'Test Survey',
+            description: 'Test Survey Description',
+            type: SurveyType.Popover,
+            questions: [
+                {
+                    type: SurveyQuestionType.Open,
+                    question: 'What do you think?',
+                    description: '',
+                    originalQuestionIndex: 0,
+                },
+            ],
+            start_date: new Date().toISOString(),
+            end_date: null,
+            feature_flag_keys: null,
+            linked_flag_key: null,
+            targeting_flag_key: null,
+            internal_targeting_flag_key: null,
+            appearance: {},
+            conditions: {
+                events: { values: [] },
+                actions: { values: [] },
+            },
+            current_iteration: 1,
+            current_iteration_start_date: new Date().toISOString(),
+        } as Survey
+
+        const onPopupSurveyDismissed = jest.fn()
+        const mockRemoveSurveyFromFocus = jest.fn()
+
+        // Render the SurveyPopup component with our mocked callback
+        render(
+            h(SurveyPopup, {
+                survey: survey,
+                removeSurveyFromFocus: mockRemoveSurveyFromFocus,
+                isPopup: true,
+                onPopupSurveyDismissed: onPopupSurveyDismissed,
+                posthog: posthog,
+            })
+        )
+
+        // Find the Cancel button
+        const cancelButton = document.querySelector('.cancel-btn-wrapper')
+
+        // Verify the button exists
+        expect(cancelButton).not.toBeNull()
+
+        // Click the Cancel button
+        if (cancelButton) {
+            fireEvent.click(cancelButton)
+
+            // Verify our callback was called
+            expect(onPopupSurveyDismissed).toHaveBeenCalledTimes(1)
+        }
+    })
+})
+
 describe('preview renders', () => {
     beforeEach(() => {
         // we have to manually reset the DOM before each test

src/extensions/surveys.tsx

@@ -655,6 +655,8 @@ interface SurveyPopupProps {
     removeSurveyFromFocus: (id: string) => void
     isPopup?: boolean
     onPreviewSubmit?: (res: string | string[] | number | null) => void
+    onPopupSurveyDismissed?: () => void
+    onPopupSurveySent?: () => void
 }
 
 export function SurveyPopup({
@@ -666,6 +668,8 @@ export function SurveyPopup({
     removeSurveyFromFocus,
     isPopup,
     onPreviewSubmit = () => {},
+    onPopupSurveyDismissed = () => {},
+    onPopupSurveySent = () => {},
 }: SurveyPopupProps) {
     const isPreviewMode = Number.isInteger(previewPageIndex)
     // NB: The client-side code passes the millisecondDelay in seconds, but setTimeout expects milliseconds, so we multiply by 1000
@@ -694,9 +698,15 @@ export function SurveyPopup({
             value={{
                 isPreviewMode,
                 previewPageIndex: previewPageIndex,
-                handleCloseSurveyPopup: () => dismissedSurveyEvent(survey, posthog, isPreviewMode),
+                onPopupSurveyDismissed: () => {
+                    dismissedSurveyEvent(survey, posthog, isPreviewMode)
+                    onPopupSurveyDismissed()
+                },
                 isPopup: isPopup || false,
                 onPreviewSubmit,
+                onPopupSurveySent: () => {
+                    onPopupSurveySent()
+                },
             }}
         >
             {!shouldShowConfirmation ? (
@@ -736,7 +746,7 @@ export function Questions({
         survey.appearance?.backgroundColor || defaultSurveyAppearance.backgroundColor
     )
     const [questionsResponses, setQuestionsResponses] = useState({})
-    const { isPreviewMode, previewPageIndex, handleCloseSurveyPopup, isPopup, onPreviewSubmit } =
+    const { isPreviewMode, previewPageIndex, onPopupSurveyDismissed, isPopup, onPreviewSubmit, onPopupSurveySent } =
         useContext(SurveyContext)
     const [currentQuestionIndex, setCurrentQuestionIndex] = useState(previewPageIndex || 0)
     const surveyQuestions = useMemo(() => getDisplayOrderQuestions(survey), [survey])
@@ -768,6 +778,7 @@ export function Questions({
         const nextStep = getNextSurveyStep(survey, displayQuestionIndex, res)
         if (nextStep === SurveyQuestionBranchingType.End) {
             sendSurveyEvent({ ...questionsResponses, [responseKey]: res }, survey, posthog)
+            onPopupSurveySent()
         } else {
             setCurrentQuestionIndex(nextStep)
         }
@@ -806,7 +817,13 @@ export function Questions({
                                     : {}
                             }
                         >
-                            {isPopup && <Cancel onClick={() => handleCloseSurveyPopup()} />}
+                            {isPopup && (
+                                <Cancel
+                                    onClick={() => {
+                                        onPopupSurveyDismissed()
+                                    }}
+                                />
+                            )}
                             {getQuestionComponent({
                                 question,
                                 forceDisableHtml,
@@ -889,6 +906,10 @@ export function FeedbackWidget({
         return null
     }
 
+    const resetShowSurvey = () => {
+        setShowSurvey(false)
+    }
+
     return (
         <Preact.Fragment>
             {survey.appearance?.widgetType === 'tab' && (
@@ -911,6 +932,8 @@ export function FeedbackWidget({
                     style={styleOverrides}
                     removeSurveyFromFocus={removeSurveyFromFocus}
                     isPopup={true}
+                    onPopupSurveyDismissed={resetShowSurvey}
+                    onPopupSurveySent={resetShowSurvey}
                 />
             )}
         </Preact.Fragment>

src/extensions/surveys/surveys-utils.tsx

@@ -733,17 +733,19 @@ export const hasWaitPeriodPassed = (
 interface SurveyContextProps {
     isPreviewMode: boolean
     previewPageIndex: number | undefined
-    handleCloseSurveyPopup: () => void
+    onPopupSurveyDismissed: () => void
     isPopup: boolean
     onPreviewSubmit: (res: string | string[] | number | null) => void
+    onPopupSurveySent: () => void
 }
 
 export const SurveyContext = createContext<SurveyContextProps>({
     isPreviewMode: false,
     previewPageIndex: 0,
-    handleCloseSurveyPopup: () => {},
+    onPopupSurveyDismissed: () => {},
     isPopup: true,
     onPreviewSubmit: () => {},
+    onPopupSurveySent: () => {},
 })
 
 interface RenderProps {