feat(surveys): preact surveys components

.babelrc

@@ -4,8 +4,8 @@
         [
             "@babel/transform-react-jsx",
             {
-                "pragma": "Preact.h",
-                "pragmaFrag": "Preact.Fragment"
+                "runtime": "automatic",
+                "importSource": "preact"
             }
         ]
     ]

package.json

@@ -58,6 +58,7 @@
         "babel-eslint": "10.1.0",
         "babel-jest": "^26.6.3",
         "cypress": "13.6.3",
+        "cypress-localstorage-commands": "^2.2.5",
         "eslint": "8.56.0",
         "eslint-config-posthog-js": "link:eslint-rules",
         "eslint-config-prettier": "^8.5.0",

src/__tests__/extensions/surveys.test.ts

@@ -0,0 +1,58 @@
+import 'regenerator-runtime/runtime'
+import { generateSurveys } from '../../extensions/surveys'
+import { createShadow } from '../../extensions/surveys/surveys-utils'
+import { SurveyType } from '../../posthog-surveys-types'
+
+describe('survey display logic', () => {
+    beforeEach(() => {
+        // we have to manually reset the DOM before each test
+        document.getElementsByTagName('html')[0].innerHTML = ''
+        localStorage.clear()
+        jest.clearAllMocks()
+    })
+
+    test('createShadow', () => {
+        const surveyId = 'randomSurveyId'
+        const mockShadow = createShadow(`.survey-${surveyId}-form {}`, surveyId)
+        expect(mockShadow.mode).toBe('open')
+        expect(mockShadow.host.className).toBe(`PostHogSurvey${surveyId}`)
+    })
+
+    const mockSurveys: any[] = [
+        {
+            id: 'testSurvey1',
+            name: 'Test survey 1',
+            type: SurveyType.Popover,
+            appearance: null,
+            start_date: '2021-01-01T00:00:00.000Z',
+            questions: [
+                {
+                    question: 'How satisfied are you with our newest product?',
+                    description: 'This is a question description',
+                    type: 'rating',
+                    display: 'number',
+                    scale: 10,
+                    lower_bound_label: 'Not Satisfied',
+                    upper_bound_label: 'Very Satisfied',
+                },
+            ],
+        },
+    ]
+    const mockPostHog = {
+        getActiveMatchingSurveys: jest.fn().mockImplementation((callback) => callback(mockSurveys)),
+        get_session_replay_url: jest.fn(),
+        capture: jest.fn().mockImplementation((eventName) => eventName),
+    }
+
+    test('callSurveys runs on interval irrespective of url change', () => {
+        jest.useFakeTimers()
+        jest.spyOn(global, 'setInterval')
+        generateSurveys(mockPostHog)
+        expect(mockPostHog.getActiveMatchingSurveys).toBeCalledTimes(1)
+        expect(setInterval).toHaveBeenLastCalledWith(expect.any(Function), 3000)
+
+        jest.advanceTimersByTime(3000)
+        expect(mockPostHog.getActiveMatchingSurveys).toBeCalledTimes(2)
+        expect(setInterval).toHaveBeenLastCalledWith(expect.any(Function), 3000)
+    })
+})

src/extensions/surveys-widget.ts

@@ -1,210 +1,38 @@
-import { PostHog } from '../posthog-core'
 import { Survey } from '../posthog-surveys-types'
-import {
-    createMultipleQuestionSurvey,
-    createSingleQuestionSurvey,
-    setTextColors,
-    showQuestion,
-    style,
-} from './surveys/surveys-utils'
-import { document as _document, window as _window } from '../utils/globals'
-import { addCancelListeners, createThankYouMessage } from './surveys'
+import { document as _document } from '../utils/globals'
 
 // We cast the types here which is dangerous but protected by the top level generateSurveys call
 const document = _document as Document
-const window = _window as Window & typeof globalThis
 
-export class SurveysWidget {
-    instance: PostHog
-    survey: Survey
-    shadow: any
-    widget?: any
-
-    constructor(instance: PostHog, survey: Survey, widget?: any) {
-        this.instance = instance
-        this.survey = survey
-        this.shadow = this.createWidgetShadow()
-        this.widget = widget
-    }
-
-    createWidget(): void {
-        const surveyPopup = this.createSurveyForWidget()
-        let widget
-        if (this.survey.appearance?.widgetType === 'selector') {
-            // user supplied button
-            widget = document.querySelector(this.survey.appearance.widgetSelector || '')
-        } else if (this.survey.appearance?.widgetType === 'tab') {
-            widget = this.createTabWidget()
-        } else if (this.survey.appearance?.widgetType === 'button') {
-            widget = this.createButtonWidget()
-        }
-        this.widget = widget
-        if (this.survey.appearance?.widgetType !== 'selector') {
-            this.shadow.appendChild(this.widget)
+export function createWidgetShadow(survey: Survey) {
+    const div = document.createElement('div')
+    div.className = `PostHogWidget${survey.id}`
+    const shadow = div.attachShadow({ mode: 'open' })
+    const widgetStyleSheet = `
+        .ph-survey-widget-tab {
+            position: fixed;
+            top: 50%;
+            right: 0;
+            background: ${survey.appearance?.widgetColor || '#e0a045'};
+            color: white;
+            transform: rotate(-90deg) translate(0, -100%);
+            transform-origin: right top;
+            min-width: 40px;
+            padding: 8px 12px;
+            font-weight: 500;
+            border-radius: 3px 3px 0 0;
+            text-align: center;
+            cursor: pointer;
+            z-index: 9999999;
         }
-        setTextColors(this.shadow)
-        // reposition survey next to widget when opened
-        if (surveyPopup && this.survey.appearance?.widgetType === 'tab' && this.widget) {
-            surveyPopup.style.bottom = 'auto'
-            surveyPopup.style.borderBottom = `1.5px solid ${this.survey.appearance?.borderColor || '#c9c6c6'}`
-            surveyPopup.style.borderRadius = '10px'
-            const widgetPos = this.widget.getBoundingClientRect()
-            surveyPopup.style.top = '50%'
-            surveyPopup.style.left = `${widgetPos.right - 360}px`
+        .ph-survey-widget-tab:hover {
+            padding-bottom: 13px;
         }
-        if (this.widget) {
-            this.widget.addEventListener('click', () => {
-                if (surveyPopup) {
-                    surveyPopup.style.display = surveyPopup.style.display === 'none' ? 'block' : 'none'
-                }
-            })
-            this.widget.setAttribute('PHWidgetSurveyClickListener', 'true')
-            if (surveyPopup) {
-                window.addEventListener('PHSurveySent', () => {
-                    if (surveyPopup) {
-                        surveyPopup.style.display = 'none'
-                    }
-                    const tabs = document
-                        ?.getElementsByClassName(`PostHogWidget${this.survey.id}`)[0]
-                        ?.shadowRoot?.querySelectorAll('.tab') as NodeListOf<HTMLElement>
-                    tabs.forEach((tab) => (tab.style.display = 'none'))
-                    showQuestion(0, this.survey.id, this.survey.type)
-                })
-            }
+        .ph-survey-widget-button {
+            position: fixed;
         }
-    }
-
-    createTabWidget(): HTMLDivElement {
-        // make a permanent tab widget
-        const tab = document.createElement('div')
-        const html = `
-            <div class="ph-survey-widget-tab auto-text-color">
-                <div class="ph-survey-widget-tab-icon">
-                </div>
-                ${this.survey.appearance?.widgetLabel || ''}
-            </div>
-            `
-
-        tab.innerHTML = html
-        return tab
-    }
-
-    createButtonWidget(): HTMLButtonElement {
-        // make a permanent button widget
-        const label = 'Feedback :)'
-        const button = document.createElement('button')
-        const html = `
-            <div class="ph-survey-widget-button auto-text-color">
-                <div class="ph-survey-widget-button-icon">
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-                </div>
-                ${label}
-            </div>
-            `
-        button.innerHTML = html
-        return button
-    }
-
-    private createSurveyForWidget(): HTMLFormElement | null {
-        const surveyStyleSheet = style(this.survey.id, this.survey.appearance)
-        this.shadow.appendChild(Object.assign(document.createElement('style'), { innerText: surveyStyleSheet }))
-        const widgetSurvey =
-            this.survey.questions.length > 1
-                ? createMultipleQuestionSurvey(this.instance, this.survey)
-                : createSingleQuestionSurvey(this.instance, this.survey, this.survey.questions[0])
-        if (widgetSurvey) {
-            widgetSurvey.style.display = 'none'
-            addCancelListeners(this.instance, widgetSurvey as HTMLFormElement, this.survey.id, this.survey.name)
-            if (this.survey.appearance?.whiteLabel) {
-                const allBrandingElements = widgetSurvey.getElementsByClassName('footer-branding')
-                for (const brandingElement of allBrandingElements) {
-                    ;(brandingElement as HTMLAnchorElement).style.display = 'none'
-                }
-            }
-            this.shadow.appendChild(widgetSurvey)
-            if (this.survey.questions.length > 1) {
-                const currentQuestion = 0
-                showQuestion(currentQuestion, this.survey.id, this.survey.type)
-            }
-            setTextColors(this.shadow)
-            window.dispatchEvent(new Event('PHSurveyShown'))
-            this.instance.capture('survey shown', {
-                $survey_name: this.survey.name,
-                $survey_id: this.survey.id,
-                sessionRecordingUrl: this.instance.get_session_replay_url?.(),
-            })
-            if (this.survey.appearance?.displayThankYouMessage) {
-                window.addEventListener('PHSurveySent', () => {
-                    const thankYouElement = createThankYouMessage(this.survey)
-                    if (thankYouElement && this.survey.appearance?.widgetType === 'tab') {
-                        thankYouElement.style.bottom = 'auto'
-                        thankYouElement.style.borderBottom = `1.5px solid ${
-                            this.survey.appearance?.borderColor || '#c9c6c6'
-                        }`
-                        thankYouElement.style.borderRadius = '10px'
-                        const widgetPos = this.widget.getBoundingClientRect()
-                        thankYouElement.style.top = '50%'
-                        thankYouElement.style.left = `${widgetPos.right - 400}px`
-                    }
-                    this.shadow.appendChild(thankYouElement)
-                    // reposition thank you box next to widget when opened
-                    const cancelButtons = thankYouElement.querySelectorAll('.form-cancel, .form-submit')
-                    for (const button of cancelButtons) {
-                        button.addEventListener('click', () => {
-                            thankYouElement.remove()
-                        })
-                    }
-                    const countdownEl = thankYouElement.querySelector('.thank-you-message-countdown')
-                    if (this.survey.appearance?.autoDisappear && countdownEl) {
-                        let count = 3
-                        countdownEl.textContent = `(${count})`
-                        const countdown = setInterval(() => {
-                            count -= 1
-                            if (count <= 0) {
-                                clearInterval(countdown)
-                                thankYouElement.remove()
-                                return
-                            }
-                            countdownEl.textContent = `(${count})`
-                        }, 1000)
-                    }
-                    setTextColors(this.shadow)
-                })
-            }
-        }
-        return widgetSurvey as HTMLFormElement
-    }
-
-    private createWidgetShadow() {
-        const div = document.createElement('div')
-        div.className = `PostHogWidget${this.survey.id}`
-        const shadow = div.attachShadow({ mode: 'open' })
-        const widgetStyleSheet = `
-            .ph-survey-widget-tab {
-                position: fixed;
-                top: 50%;
-                right: 0;
-                background: ${this.survey.appearance?.widgetColor || '#e0a045'};
-                color: white;
-                transform: rotate(-90deg) translate(0, -100%);
-                transform-origin: right top;
-                min-width: 40px;
-                padding: 8px 12px;
-                font-weight: 500;
-                border-radius: 3px 3px 0 0;
-                text-align: center;
-                cursor: pointer;
-                z-index: 9999999;
-            }
-            .ph-survey-widget-tab:hover {
-                padding-bottom: 13px;
-            }
-            .ph-survey-widget-button {
-                position: fixed;
-            }
-        `
-        shadow.append(Object.assign(document.createElement('style'), { innerText: widgetStyleSheet }))
-        document.body.appendChild(div)
-        return shadow
-    }
+    `
+    shadow.append(Object.assign(document.createElement('style'), { innerText: widgetStyleSheet }))
+    document.body.appendChild(div)
+    return shadow
 }