(null)
+
+ useEffect(() => {
+ if (survey.appearance?.widgetType === 'tab') {
+ if (widgetRef.current) {
+ const widgetPos = widgetRef.current.getBoundingClientRect()
+ const style = {
+ top: '50%',
+ left: parseInt(`${widgetPos.right - 360}`),
+ bottom: 'auto',
+ borderRadius: 10,
+ borderBottom: `1.5px solid ${survey.appearance?.borderColor || '#c9c6c6'}`,
+ }
+ setStyle(style)
+ }
+ }
+ if (survey.appearance?.widgetType === 'selector') {
+ const widget = document.querySelector(survey.appearance.widgetSelector || '')
+ widget?.addEventListener('click', () => {
+ setShowSurvey(!showSurvey)
+ })
+ widget?.setAttribute('PHWidgetSurveyClickListener', 'true')
+ }
+ }, [])
+
+ return (
+ <>
+ {survey.appearance?.widgetType === 'tab' && (
+ setShowSurvey(!showSurvey)}>
+
+ {survey.appearance?.widgetLabel || ''}
+
+
+
+
+ {!appearance.whiteLabel && (
+
+ )}
+
+
+
onClose()} />
+
+ {confirmationHeader}
+
+ {confirmationDescription && (
+
+ )}
+ onClose()}
+ />
+
+
+
{question}
+ {description &&
}
+
+
+
+ )
+}
diff --git a/src/extensions/surveys/components/QuestionTypes.tsx b/src/extensions/surveys/components/QuestionTypes.tsx
new file mode 100644
index 000000000..dcbbb27e1
--- /dev/null
+++ b/src/extensions/surveys/components/QuestionTypes.tsx
@@ -0,0 +1,341 @@
+import {
+ BasicSurveyQuestion,
+ SurveyAppearance,
+ LinkSurveyQuestion,
+ RatingSurveyQuestion,
+ MultipleSurveyQuestion,
+ SurveyQuestionType,
+} from '../../../posthog-surveys-types'
+import { RefObject } from 'preact'
+import { useRef, useState } from 'preact/hooks'
+import { _isNull, _isArray } from '../../../utils/type-utils'
+import { useContrastingTextColor } from '../hooks/useContrastingTextColor'
+import {
+ checkSVG,
+ dissatisfiedEmoji,
+ neutralEmoji,
+ satisfiedEmoji,
+ veryDissatisfiedEmoji,
+ verySatisfiedEmoji,
+} from '../icons'
+import { defaultSurveyAppearance } from '../surveys-utils'
+import { BottomSection } from './BottomSection'
+import { Cancel, QuestionHeader } from './QuestionHeader'
+
+export function OpenTextQuestion({
+ question,
+ appearance,
+ onSubmit,
+ closeSurveyPopup,
+}: {
+ question: BasicSurveyQuestion
+ appearance: SurveyAppearance
+ onSubmit: (text: string) => void
+ closeSurveyPopup: () => void
+}) {
+ const textRef = useRef(null)
+ const [text, setText] = useState('')
+
+ return (
+
+ closeSurveyPopup()} />
+
+ `
- : ''
- }
-
-
-
-`
- let formElement: HTMLFormElement | HTMLDivElement
- if (survey.questions.length === 1) {
- formElement = Object.assign(document.createElement('form'), {
- className: `survey-${survey.id}-form`,
- innerHTML: form,
- onsubmit: function (e: any) {
- e.preventDefault()
- const surveyQuestionType = question.type
- posthog.capture('survey sent', {
- $survey_name: survey.name,
- $survey_id: survey.id,
- $survey_question: survey.questions[0].question,
- $survey_response: surveyQuestionType === 'open' ? e.target.survey.value : 'link clicked',
- sessionRecordingUrl: posthog.get_session_replay_url?.(),
- $set: {
- [`$survey_responded/${survey.id}`]: true,
- },
- })
- if (surveyQuestionType === 'link' && question.link) {
- window.open(question.link)
- }
- window.setTimeout(() => {
- window.dispatchEvent(new Event('PHSurveySent'))
- }, 200)
- closeSurveyPopup(survey.id, formElement as HTMLFormElement)
- },
- })
- } else {
- formElement = Object.assign(document.createElement('div'), {
- innerHTML: form,
- })
- const submitButton = formElement.querySelector('.form-submit') as HTMLButtonElement
- submitButton.addEventListener('click', () => {
- if (surveyQuestionType === 'link') {
- window.open(question.link || undefined)
- }
- })
- }
- if (!isOptional) {
- if (surveyQuestionType === 'open') {
- ;(formElement.querySelector('.form-submit') as HTMLButtonElement).disabled = true
- }
- formElement.addEventListener('input', (e: any) => {
- if (formElement.querySelector('.form-submit')) {
- const submitButton = formElement.querySelector('.form-submit') as HTMLButtonElement
- submitButton.disabled = !e.target.value
- }
- })
- }
-
- return formElement
-}
-
-export const createMultipleChoicePopup = (
- posthog: PostHog,
- survey: Survey,
- question: MultipleSurveyQuestion,
- questionIndex: number
-) => {
- const surveyQuestion = question.question
- const surveyDescription = question.description
- const surveyQuestionChoices = question.choices
- const isSingleChoice = question.type === 'single_choice'
- const isOptional = !!question.optional
- const hasOpenChoice = !!question.hasOpenChoice
-
- const form = `
-
-
-
-
-
${surveyQuestion}
- ${surveyDescription ? `
${surveyDescription}` : ''}
-
-
-
-