posthog-js 1.136.5 → 1.136.7

package/lib/src/extensions/surveys/components/QuestionTypes.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"QuestionTypes.jsx","sourceRoot":"","sources":["../../../../../src/extensions/surveys/components/QuestionTypes.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    BasicSurveyQuestion,\n    SurveyAppearance,\n    LinkSurveyQuestion,\n    RatingSurveyQuestion,\n    MultipleSurveyQuestion,\n    SurveyQuestionType,\n} from '../../../posthog-surveys-types'\nimport { RefObject } from 'preact'\nimport { useRef, useState, useMemo } from 'preact/hooks'\nimport { isNull, isArray } from '../../../utils/type-utils'\nimport { useContrastingTextColor } from '../hooks/useContrastingTextColor'\nimport {\n    checkSVG,\n    dissatisfiedEmoji,\n    neutralEmoji,\n    satisfiedEmoji,\n    veryDissatisfiedEmoji,\n    verySatisfiedEmoji,\n} from '../icons'\nimport { defaultSurveyAppearance, getDisplayOrderChoices } from '../surveys-utils'\nimport { BottomSection } from './BottomSection'\nimport { Cancel, QuestionHeader } from './QuestionHeader'\n\nexport function OpenTextQuestion({\n    question,\n    appearance,\n    onSubmit,\n    closeSurveyPopup,\n}: {\n    question: BasicSurveyQuestion\n    appearance: SurveyAppearance\n    onSubmit: (text: string) => void\n    closeSurveyPopup: () => void\n}) {\n    const textRef = useRef(null)\n    const [text, setText] = useState('')\n\n    return (\n        <div\n            className=\"survey-box\"\n            style={{ backgroundColor: appearance.backgroundColor || defaultSurveyAppearance.backgroundColor }}\n            ref={textRef}\n        >\n            <Cancel onClick={() => closeSurveyPopup()} />\n            <QuestionHeader\n                question={question.question}\n                description={question.description}\n                backgroundColor={appearance.backgroundColor}\n            />\n            <textarea rows={4} placeholder={appearance?.placeholder} onInput={(e) => setText(e.currentTarget.value)} />\n            <BottomSection\n                text={question.buttonText || 'Submit'}\n                submitDisabled={!text && !question.optional}\n                appearance={appearance}\n                onSubmit={() => onSubmit(text)}\n            />\n        </div>\n    )\n}\n\nexport function LinkQuestion({\n    question,\n    appearance,\n    onSubmit,\n    closeSurveyPopup,\n}: {\n    question: LinkSurveyQuestion\n    appearance: SurveyAppearance\n    onSubmit: (clicked: string) => void\n    closeSurveyPopup: () => void\n}) {\n    return (\n        <div className=\"survey-box\">\n            <Cancel onClick={() => closeSurveyPopup()} />\n            <QuestionHeader question={question.question} description={question.description} />\n            <BottomSection\n                text={question.buttonText || 'Submit'}\n                submitDisabled={false}\n                link={question.link}\n                appearance={appearance}\n                onSubmit={() => onSubmit('link clicked')}\n            />\n        </div>\n    )\n}\n\nexport function RatingQuestion({\n    question,\n    questionIndex,\n    appearance,\n    onSubmit,\n    closeSurveyPopup,\n}: {\n    question: RatingSurveyQuestion\n    questionIndex: number\n    appearance: SurveyAppearance\n    onSubmit: (rating: number | null) => void\n    closeSurveyPopup: () => void\n}) {\n    const scale = question.scale\n    const starting = question.scale === 10 ? 0 : 1\n    const [rating, setRating] = useState<number | null>(null)\n\n    return (\n        <div className=\"survey-box\">\n            <Cancel onClick={() => closeSurveyPopup()} />\n            <QuestionHeader\n                question={question.question}\n                description={question.description}\n                backgroundColor={appearance.backgroundColor}\n            />\n            <div className=\"rating-section\">\n                <div className=\"rating-options\">\n                    {question.display === 'emoji' && (\n                        <div className=\"rating-options-emoji\">\n                            {(question.scale === 3 ? threeScaleEmojis : fiveScaleEmojis).map((emoji, idx) => {\n                                const active = idx + 1 === rating\n                                return (\n                                    <button\n                                        className={`ratings-emoji question-${questionIndex}-rating-${idx} ${\n                                            active ? 'rating-active' : null\n                                        }`}\n                                        value={idx + 1}\n                                        key={idx}\n                                        type=\"button\"\n                                        onClick={() => {\n                                            setRating(idx + 1)\n                                        }}\n                                    >\n                                        {emoji}\n                                    </button>\n                                )\n                            })}\n                        </div>\n                    )}\n                    {question.display === 'number' && (\n                        <div\n                            className=\"rating-options-number\"\n                            style={{ gridTemplateColumns: `repeat(${scale - starting + 1}, minmax(0, 1fr))` }}\n                        >\n                            {(question.scale === 5 ? fiveScaleNumbers : tenScaleNumbers).map((number, idx) => {\n                                const active = rating === number\n                                return (\n                                    <RatingButton\n                                        key={idx}\n                                        questionIndex={questionIndex}\n                                        active={active}\n                                        appearance={appearance}\n                                        num={number}\n                                        setActiveNumber={(num) => {\n                                            setRating(num)\n                                        }}\n                                    />\n                                )\n                            })}\n                        </div>\n                    )}\n                </div>\n                <div className=\"rating-text\">\n                    <div>{question.lowerBoundLabel}</div>\n                    <div>{question.upperBoundLabel}</div>\n                </div>\n            </div>\n            <BottomSection\n                text={question.buttonText || appearance?.submitButtonText || 'Submit'}\n                submitDisabled={isNull(rating) && !question.optional}\n                appearance={appearance}\n                onSubmit={() => onSubmit(rating)}\n            />\n        </div>\n    )\n}\n\nexport function RatingButton({\n    num,\n    active,\n    questionIndex,\n    appearance,\n    setActiveNumber,\n}: {\n    num: number\n    active: boolean\n    questionIndex: number\n    appearance: any\n    setActiveNumber: (num: number) => void\n}) {\n    const { textColor, ref } = useContrastingTextColor({ appearance, defaultTextColor: 'black', forceUpdate: active })\n    return (\n        <button\n            ref={ref as RefObject<HTMLButtonElement>}\n            className={`ratings-number question-${questionIndex}-rating-${num} ${active ? 'rating-active' : null}`}\n            type=\"button\"\n            onClick={() => {\n                setActiveNumber(num)\n            }}\n            style={{\n                color: textColor,\n                backgroundColor: active ? appearance.ratingButtonActiveColor : appearance.ratingButtonColor,\n                borderColor: appearance.borderColor,\n            }}\n        >\n            {num}\n        </button>\n    )\n}\n\nexport function MultipleChoiceQuestion({\n    question,\n    questionIndex,\n    appearance,\n    onSubmit,\n    closeSurveyPopup,\n}: {\n    question: MultipleSurveyQuestion\n    questionIndex: number\n    appearance: SurveyAppearance\n    onSubmit: (choices: string | string[] | null) => void\n    closeSurveyPopup: () => void\n}) {\n    const textRef = useRef(null)\n    const choices = useMemo(() => getDisplayOrderChoices(question), [question])\n    const [selectedChoices, setSelectedChoices] = useState<string | string[] | null>(\n        question.type === SurveyQuestionType.MultipleChoice ? [] : null\n    )\n    const [openChoiceSelected, setOpenChoiceSelected] = useState(false)\n    const [openEndedInput, setOpenEndedInput] = useState('')\n\n    const inputType = question.type === SurveyQuestionType.SingleChoice ? 'radio' : 'checkbox'\n    return (\n        <div\n            className=\"survey-box\"\n            style={{ backgroundColor: appearance.backgroundColor || defaultSurveyAppearance.backgroundColor }}\n            ref={textRef}\n        >\n            <Cancel onClick={() => closeSurveyPopup()} />\n            <QuestionHeader\n                question={question.question}\n                description={question.description}\n                backgroundColor={appearance.backgroundColor}\n            />\n            <div className=\"multiple-choice-options\">\n                {/* Remove the last element from the choices, if hasOpenChoice is set */}\n                {/* shuffle all other options here if question.shuffleOptions is set */}\n                {/* Always ensure that the open ended choice is the last option */}\n                {choices.map((choice: string, idx: number) => {\n                    let choiceClass = 'choice-option'\n                    const val = choice\n                    const option = choice\n                    if (!!question.hasOpenChoice && idx === question.choices.length - 1) {\n                        choiceClass += ' choice-option-open'\n                    }\n                    return (\n                        <div className={choiceClass}>\n                            <input\n                                type={inputType}\n                                id={`surveyQuestion${questionIndex}Choice${idx}`}\n                                name={`question${questionIndex}`}\n                                value={val}\n                                disabled={!val}\n                                onInput={() => {\n                                    if (question.hasOpenChoice && idx === question.choices.length - 1) {\n                                        return setOpenChoiceSelected(!openChoiceSelected)\n                                    }\n                                    if (question.type === SurveyQuestionType.SingleChoice) {\n                                        return setSelectedChoices(val)\n                                    }\n                                    if (\n                                        question.type === SurveyQuestionType.MultipleChoice &&\n                                        isArray(selectedChoices)\n                                    ) {\n                                        if (selectedChoices.includes(val)) {\n                                            // filter out values because clicking on a selected choice should deselect it\n                                            return setSelectedChoices(\n                                                selectedChoices.filter((choice) => choice !== val)\n                                            )\n                                        }\n                                        return setSelectedChoices([...selectedChoices, val])\n                                    }\n                                }}\n                            />\n                            <label htmlFor={`surveyQuestion${questionIndex}Choice${idx}`} style={{ color: 'black' }}>\n                                {question.hasOpenChoice && idx === question.choices.length - 1 ? (\n                                    <>\n                                        <span>{option}:</span>\n                                        <input\n                                            type=\"text\"\n                                            id={`surveyQuestion${questionIndex}Choice${idx}Open`}\n                                            name={`question${questionIndex}`}\n                                            onInput={(e) => {\n                                                const userValue = e.currentTarget.value\n                                                if (question.type === SurveyQuestionType.SingleChoice) {\n                                                    return setSelectedChoices(userValue)\n                                                }\n                                                if (\n                                                    question.type === SurveyQuestionType.MultipleChoice &&\n                                                    isArray(selectedChoices)\n                                                ) {\n                                                    return setOpenEndedInput(userValue)\n                                                }\n                                            }}\n                                        />\n                                    </>\n                                ) : (\n                                    option\n                                )}\n                            </label>\n                            <span className=\"choice-check\" style={{ color: 'black' }}>\n                                {checkSVG}\n                            </span>\n                        </div>\n                    )\n                })}\n            </div>\n            <BottomSection\n                text={question.buttonText || 'Submit'}\n                submitDisabled={\n                    (isNull(selectedChoices) ||\n                        (isArray(selectedChoices) && !openChoiceSelected && selectedChoices.length === 0) ||\n                        (isArray(selectedChoices) &&\n                            openChoiceSelected &&\n                            !openEndedInput &&\n                            selectedChoices.length === 0 &&\n                            !question.optional)) &&\n                    !question.optional\n                }\n                appearance={appearance}\n                onSubmit={() => {\n                    if (openChoiceSelected && question.type === SurveyQuestionType.MultipleChoice) {\n                        if (isArray(selectedChoices)) {\n                            onSubmit([...selectedChoices, openEndedInput])\n                        }\n                    } else {\n                        onSubmit(selectedChoices)\n                    }\n                }}\n            />\n        </div>\n    )\n}\n\nconst threeScaleEmojis = [dissatisfiedEmoji, neutralEmoji, satisfiedEmoji]\nconst fiveScaleEmojis = [veryDissatisfiedEmoji, dissatisfiedEmoji, neutralEmoji, satisfiedEmoji, verySatisfiedEmoji]\nconst fiveScaleNumbers = [1, 2, 3, 4, 5]\nconst tenScaleNumbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]\n"]}
+{"version":3,"file":"QuestionTypes.jsx","sourceRoot":"","sources":["../../../../../src/extensions/surveys/components/QuestionTypes.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    BasicSurveyQuestion,\n    SurveyAppearance,\n    LinkSurveyQuestion,\n    RatingSurveyQuestion,\n    MultipleSurveyQuestion,\n    SurveyQuestionType,\n} from '../../../posthog-surveys-types'\nimport { RefObject } from 'preact'\nimport { useRef, useState, useMemo, useContext } from 'preact/hooks'\nimport { isNull, isArray } from '../../../utils/type-utils'\nimport { useContrastingTextColor } from '../hooks/useContrastingTextColor'\nimport {\n    checkSVG,\n    dissatisfiedEmoji,\n    neutralEmoji,\n    satisfiedEmoji,\n    veryDissatisfiedEmoji,\n    verySatisfiedEmoji,\n} from '../icons'\nimport { defaultSurveyAppearance, getDisplayOrderChoices, SurveyContext } from '../surveys-utils'\nimport { BottomSection } from './BottomSection'\nimport { Cancel, QuestionHeader } from './QuestionHeader'\n\nexport function OpenTextQuestion({\n    question,\n    appearance,\n    onSubmit,\n}: {\n    question: BasicSurveyQuestion\n    appearance: SurveyAppearance\n    onSubmit: (text: string) => void\n}) {\n    const textRef = useRef(null)\n    const [text, setText] = useState('')\n    const { handleCloseSurveyPopup } = useContext(SurveyContext)\n\n    return (\n        <div\n            className=\"survey-box\"\n            style={{ backgroundColor: appearance.backgroundColor || defaultSurveyAppearance.backgroundColor }}\n            ref={textRef}\n        >\n            <Cancel onClick={() => handleCloseSurveyPopup()} />\n            <QuestionHeader\n                question={question.question}\n                description={question.description}\n                backgroundColor={appearance.backgroundColor}\n            />\n            <textarea rows={4} placeholder={appearance?.placeholder} onInput={(e) => setText(e.currentTarget.value)} />\n            <BottomSection\n                text={question.buttonText || 'Submit'}\n                submitDisabled={!text && !question.optional}\n                appearance={appearance}\n                onSubmit={() => onSubmit(text)}\n            />\n        </div>\n    )\n}\n\nexport function LinkQuestion({\n    question,\n    appearance,\n    onSubmit,\n}: {\n    question: LinkSurveyQuestion\n    appearance: SurveyAppearance\n    onSubmit: (clicked: string) => void\n}) {\n    const { handleCloseSurveyPopup } = useContext(SurveyContext)\n\n    return (\n        <div className=\"survey-box\">\n            <Cancel onClick={() => handleCloseSurveyPopup()} />\n            <QuestionHeader question={question.question} description={question.description} />\n            <BottomSection\n                text={question.buttonText || 'Submit'}\n                submitDisabled={false}\n                link={question.link}\n                appearance={appearance}\n                onSubmit={() => onSubmit('link clicked')}\n            />\n        </div>\n    )\n}\n\nexport function RatingQuestion({\n    question,\n    displayQuestionIndex,\n    appearance,\n    onSubmit,\n}: {\n    question: RatingSurveyQuestion\n    displayQuestionIndex: number\n    appearance: SurveyAppearance\n    onSubmit: (rating: number | null) => void\n}) {\n    const scale = question.scale\n    const starting = question.scale === 10 ? 0 : 1\n    const [rating, setRating] = useState<number | null>(null)\n    const { handleCloseSurveyPopup } = useContext(SurveyContext)\n\n    return (\n        <div className=\"survey-box\">\n            <Cancel onClick={() => handleCloseSurveyPopup()} />\n            <QuestionHeader\n                question={question.question}\n                description={question.description}\n                backgroundColor={appearance.backgroundColor}\n            />\n            <div className=\"rating-section\">\n                <div className=\"rating-options\">\n                    {question.display === 'emoji' && (\n                        <div className=\"rating-options-emoji\">\n                            {(question.scale === 3 ? threeScaleEmojis : fiveScaleEmojis).map((emoji, idx) => {\n                                const active = idx + 1 === rating\n                                return (\n                                    <button\n                                        className={`ratings-emoji question-${displayQuestionIndex}-rating-${idx} ${\n                                            active ? 'rating-active' : null\n                                        }`}\n                                        value={idx + 1}\n                                        key={idx}\n                                        type=\"button\"\n                                        onClick={() => {\n                                            setRating(idx + 1)\n                                        }}\n                                    >\n                                        {emoji}\n                                    </button>\n                                )\n                            })}\n                        </div>\n                    )}\n                    {question.display === 'number' && (\n                        <div\n                            className=\"rating-options-number\"\n                            style={{ gridTemplateColumns: `repeat(${scale - starting + 1}, minmax(0, 1fr))` }}\n                        >\n                            {(question.scale === 5 ? fiveScaleNumbers : tenScaleNumbers).map((number, idx) => {\n                                const active = rating === number\n                                return (\n                                    <RatingButton\n                                        key={idx}\n                                        displayQuestionIndex={displayQuestionIndex}\n                                        active={active}\n                                        appearance={appearance}\n                                        num={number}\n                                        setActiveNumber={(num) => {\n                                            setRating(num)\n                                        }}\n                                    />\n                                )\n                            })}\n                        </div>\n                    )}\n                </div>\n                <div className=\"rating-text\">\n                    <div>{question.lowerBoundLabel}</div>\n                    <div>{question.upperBoundLabel}</div>\n                </div>\n            </div>\n            <BottomSection\n                text={question.buttonText || appearance?.submitButtonText || 'Submit'}\n                submitDisabled={isNull(rating) && !question.optional}\n                appearance={appearance}\n                onSubmit={() => onSubmit(rating)}\n            />\n        </div>\n    )\n}\n\nexport function RatingButton({\n    num,\n    active,\n    displayQuestionIndex,\n    appearance,\n    setActiveNumber,\n}: {\n    num: number\n    active: boolean\n    displayQuestionIndex: number\n    appearance: any\n    setActiveNumber: (num: number) => void\n}) {\n    const { textColor, ref } = useContrastingTextColor({ appearance, defaultTextColor: 'black', forceUpdate: active })\n    return (\n        <button\n            ref={ref as RefObject<HTMLButtonElement>}\n            className={`ratings-number question-${displayQuestionIndex}-rating-${num} ${\n                active ? 'rating-active' : null\n            }`}\n            type=\"button\"\n            onClick={() => {\n                setActiveNumber(num)\n            }}\n            style={{\n                color: textColor,\n                backgroundColor: active ? appearance.ratingButtonActiveColor : appearance.ratingButtonColor,\n                borderColor: appearance.borderColor,\n            }}\n        >\n            {num}\n        </button>\n    )\n}\n\nexport function MultipleChoiceQuestion({\n    question,\n    displayQuestionIndex,\n    appearance,\n    onSubmit,\n}: {\n    question: MultipleSurveyQuestion\n    displayQuestionIndex: number\n    appearance: SurveyAppearance\n    onSubmit: (choices: string | string[] | null) => void\n}) {\n    const textRef = useRef(null)\n    const choices = useMemo(() => getDisplayOrderChoices(question), [question])\n    const [selectedChoices, setSelectedChoices] = useState<string | string[] | null>(\n        question.type === SurveyQuestionType.MultipleChoice ? [] : null\n    )\n    const [openChoiceSelected, setOpenChoiceSelected] = useState(false)\n    const [openEndedInput, setOpenEndedInput] = useState('')\n    const { handleCloseSurveyPopup } = useContext(SurveyContext)\n\n    const inputType = question.type === SurveyQuestionType.SingleChoice ? 'radio' : 'checkbox'\n    return (\n        <div\n            className=\"survey-box\"\n            style={{ backgroundColor: appearance.backgroundColor || defaultSurveyAppearance.backgroundColor }}\n            ref={textRef}\n        >\n            <Cancel onClick={() => handleCloseSurveyPopup()} />\n            <QuestionHeader\n                question={question.question}\n                description={question.description}\n                backgroundColor={appearance.backgroundColor}\n            />\n            <div className=\"multiple-choice-options\">\n                {/* Remove the last element from the choices, if hasOpenChoice is set */}\n                {/* shuffle all other options here if question.shuffleOptions is set */}\n                {/* Always ensure that the open ended choice is the last option */}\n                {choices.map((choice: string, idx: number) => {\n                    let choiceClass = 'choice-option'\n                    const val = choice\n                    const option = choice\n                    if (!!question.hasOpenChoice && idx === question.choices.length - 1) {\n                        choiceClass += ' choice-option-open'\n                    }\n                    return (\n                        <div className={choiceClass}>\n                            <input\n                                type={inputType}\n                                id={`surveyQuestion${displayQuestionIndex}Choice${idx}`}\n                                name={`question${displayQuestionIndex}`}\n                                value={val}\n                                disabled={!val}\n                                onInput={() => {\n                                    if (question.hasOpenChoice && idx === question.choices.length - 1) {\n                                        return setOpenChoiceSelected(!openChoiceSelected)\n                                    }\n                                    if (question.type === SurveyQuestionType.SingleChoice) {\n                                        return setSelectedChoices(val)\n                                    }\n                                    if (\n                                        question.type === SurveyQuestionType.MultipleChoice &&\n                                        isArray(selectedChoices)\n                                    ) {\n                                        if (selectedChoices.includes(val)) {\n                                            // filter out values because clicking on a selected choice should deselect it\n                                            return setSelectedChoices(\n                                                selectedChoices.filter((choice) => choice !== val)\n                                            )\n                                        }\n                                        return setSelectedChoices([...selectedChoices, val])\n                                    }\n                                }}\n                            />\n                            <label\n                                htmlFor={`surveyQuestion${displayQuestionIndex}Choice${idx}`}\n                                style={{ color: 'black' }}\n                            >\n                                {question.hasOpenChoice && idx === question.choices.length - 1 ? (\n                                    <>\n                                        <span>{option}:</span>\n                                        <input\n                                            type=\"text\"\n                                            id={`surveyQuestion${displayQuestionIndex}Choice${idx}Open`}\n                                            name={`question${displayQuestionIndex}`}\n                                            onInput={(e) => {\n                                                const userValue = e.currentTarget.value\n                                                if (question.type === SurveyQuestionType.SingleChoice) {\n                                                    return setSelectedChoices(userValue)\n                                                }\n                                                if (\n                                                    question.type === SurveyQuestionType.MultipleChoice &&\n                                                    isArray(selectedChoices)\n                                                ) {\n                                                    return setOpenEndedInput(userValue)\n                                                }\n                                            }}\n                                        />\n                                    </>\n                                ) : (\n                                    option\n                                )}\n                            </label>\n                            <span className=\"choice-check\" style={{ color: 'black' }}>\n                                {checkSVG}\n                            </span>\n                        </div>\n                    )\n                })}\n            </div>\n            <BottomSection\n                text={question.buttonText || 'Submit'}\n                submitDisabled={\n                    (isNull(selectedChoices) ||\n                        (isArray(selectedChoices) && !openChoiceSelected && selectedChoices.length === 0) ||\n                        (isArray(selectedChoices) &&\n                            openChoiceSelected &&\n                            !openEndedInput &&\n                            selectedChoices.length === 0 &&\n                            !question.optional)) &&\n                    !question.optional\n                }\n                appearance={appearance}\n                onSubmit={() => {\n                    if (openChoiceSelected && question.type === SurveyQuestionType.MultipleChoice) {\n                        if (isArray(selectedChoices)) {\n                            onSubmit([...selectedChoices, openEndedInput])\n                        }\n                    } else {\n                        onSubmit(selectedChoices)\n                    }\n                }}\n            />\n        </div>\n    )\n}\n\nconst threeScaleEmojis = [dissatisfiedEmoji, neutralEmoji, satisfiedEmoji]\nconst fiveScaleEmojis = [veryDissatisfiedEmoji, dissatisfiedEmoji, neutralEmoji, satisfiedEmoji, verySatisfiedEmoji]\nconst fiveScaleNumbers = [1, 2, 3, 4, 5]\nconst tenScaleNumbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]\n"]}

package/lib/src/extensions/surveys/surveys-utils.d.ts

@@ -11,7 +11,7 @@ export declare const shuffle: (array: any[]) => any[];
 export declare const getDisplayOrderChoices: (question: MultipleSurveyQuestion) => string[];
 export declare const getDisplayOrderQuestions: (survey: Survey) => SurveyQuestion[];
 export declare const SurveyContext: import("preact").Context<{
-    readOnly: boolean;
-    previewQuestionIndex: number;
-    textColor: string;
+    isPreviewMode: boolean;
+    previewPageIndex: number | undefined;
+    handleCloseSurveyPopup: () => void;
 }>;

package/lib/src/extensions/surveys/surveys-utils.jsx

@@ -287,18 +287,18 @@ export var getDisplayOrderChoices = function (question) {
     return shuffledOptions;
 };
 export var getDisplayOrderQuestions = function (survey) {
+    // retain the original questionIndex so we can correlate values in the webapp
+    survey.questions.forEach(function (question, idx) {
+        question.originalQuestionIndex = idx;
+    });
     if (!survey.appearance || !survey.appearance.shuffleQuestions) {
         return survey.questions;
     }
-    // retain the original questionIndex so we can correlate values in the webapp
-    survey.questions.forEach(function (element, idx) {
-        element.questionIndex = idx;
-    });
     return shuffle(survey.questions);
 };
 export var SurveyContext = createContext({
-    readOnly: false,
-    previewQuestionIndex: 0,
-    textColor: 'black',
+    isPreviewMode: false,
+    previewPageIndex: 0,
+    handleCloseSurveyPopup: function () { },
 });
 //# sourceMappingURL=surveys-utils.jsx.map

package/lib/src/extensions/surveys/surveys-utils.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"surveys-utils.jsx","sourceRoot":"","sources":["../../../../src/extensions/surveys/surveys-utils.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PostHog } from '../../posthog-core'\nimport { Survey, SurveyAppearance, MultipleSurveyQuestion, SurveyQuestion } from '../../posthog-surveys-types'\nimport { window as _window, document as _document } from '../../utils/globals'\nimport { createContext } from 'preact'\n// We cast the types here which is dangerous but protected by the top level generateSurveys call\nconst window = _window as Window & typeof globalThis\nconst document = _document as Document\n\nexport const style = (appearance: SurveyAppearance | null) => {\n    const positions = {\n        left: 'left: 30px;',\n        right: 'right: 30px;',\n        center: `\n            left: 50%;\n            transform: translateX(-50%);\n          `,\n    }\n    return `\n          .survey-form {\n              position: fixed;\n              margin: 0px;\n              bottom: 0px;\n              color: black;\n              font-weight: normal;\n              font-family: -apple-system, BlinkMacSystemFont, \"Inter\", \"Segoe UI\", \"Roboto\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n              text-align: left;\n              max-width: ${parseInt(appearance?.maxWidth || '300')}px;\n              z-index: ${parseInt(appearance?.zIndex || '99999')};\n              border: 1.5px solid ${appearance?.borderColor || '#c9c6c6'};\n              border-bottom: 0px;\n              width: 100%;\n              ${positions[appearance?.position || 'right'] || 'right: 30px;'}\n          }\n          .form-submit[disabled] {\n              opacity: 0.6;\n              filter: grayscale(50%);\n              cursor: not-allowed;\n          }\n          .survey-form {\n              flex-direction: column;\n              background: ${appearance?.backgroundColor || '#eeeded'};\n              border-top-left-radius: 10px;\n              border-top-right-radius: 10px;\n              box-shadow: -6px 0 16px -8px rgb(0 0 0 / 8%), -9px 0 28px 0 rgb(0 0 0 / 5%), -12px 0 48px 16px rgb(0 0 0 / 3%);\n          }\n          .survey-form textarea {\n              color: #2d2d2d;\n              font-size: 14px;\n              font-family: -apple-system, BlinkMacSystemFont, \"Inter\", \"Segoe UI\", \"Roboto\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n              background: white;\n              color: black;\n              outline: none;\n              padding-left: 10px;\n              padding-right: 10px;\n              padding-top: 10px;\n              border-radius: 6px;\n              border-color: ${appearance?.borderColor || '#c9c6c6'};\n              margin-top: 14px;\n          }\n          .form-submit {\n              box-sizing: border-box;\n              margin: 0;\n              font-family: inherit;\n              overflow: visible;\n              text-transform: none;\n              position: relative;\n              display: inline-block;\n              font-weight: 700;\n              white-space: nowrap;\n              text-align: center;\n              border: 1.5px solid transparent;\n              cursor: pointer;\n              user-select: none;\n              touch-action: manipulation;\n              padding: 12px;\n              font-size: 14px;\n              border-radius: 6px;\n              outline: 0;\n              background: ${appearance?.submitButtonColor || 'black'} !important;\n              text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);\n              box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);\n              width: 100%;\n          }\n          .form-cancel {\n              float: right;\n              border: none;\n              background: none;\n              cursor: pointer;\n          }\n          .cancel-btn-wrapper {\n              position: absolute;\n              width: 35px;\n              height: 35px;\n              border-radius: 100%;\n              top: 0;\n              right: 0;\n              transform: translate(50%, -50%);\n              background: white;\n              border: 1.5px solid ${appearance?.borderColor || '#c9c6c6'};\n              display: flex;\n              justify-content: center;\n              align-items: center;\n          }\n          .bolded { font-weight: 600; }\n          .buttons {\n              display: flex;\n              justify-content: center;\n          }\n          .footer-branding {\n              font-size: 11px;\n              margin-top: 10px;\n              text-align: center;\n              display: flex;\n              justify-content: center;\n              gap: 4px;\n              align-items: center;\n              font-weight: 500;\n              background: ${appearance?.backgroundColor || '#eeeded'};\n              text-decoration: none;\n          }\n          .survey-box {\n              padding: 20px 25px 10px;\n              display: flex;\n              flex-direction: column;\n              border-radius: 10px;\n          }\n          .survey-question {\n              font-weight: 500;\n              font-size: 14px;\n              background: ${appearance?.backgroundColor || '#eeeded'};\n          }\n          .question-textarea-wrapper {\n              display: flex;\n              flex-direction: column;\n          }\n          .description {\n              font-size: 13px;\n              padding-top: 5px;\n              background: ${appearance?.backgroundColor || '#eeeded'};\n          }\n          .ratings-number {\n              background-color: ${appearance?.ratingButtonColor || 'white'};\n              font-size: 16px;\n              font-weight: 600;\n              padding: 8px 0px;\n              border: none;\n          }\n          .ratings-number:hover {\n              cursor: pointer;\n          }\n          .rating-options {\n              margin-top: 14px;\n          }\n          .rating-options-number {\n              display: grid;\n              border-radius: 6px;\n              overflow: hidden;\n              border: 1.5px solid ${appearance?.borderColor || '#c9c6c6'};\n          }\n          .rating-options-number > .ratings-number {\n              border-right: 1px solid ${appearance?.borderColor || '#c9c6c6'};\n          }\n          .rating-options-number > .ratings-number:last-of-type {\n              border-right: 0px;\n          }\n          .rating-options-number .rating-active {\n              background: ${appearance?.ratingButtonActiveColor || 'black'};\n          }\n          .rating-options-emoji {\n              display: flex;\n              justify-content: space-between;\n          }\n          .ratings-emoji {\n              font-size: 16px;\n              background-color: transparent;\n              border: none;\n              padding: 0px;\n          }\n          .ratings-emoji:hover {\n              cursor: pointer;\n          }\n          .ratings-emoji.rating-active svg {\n              fill: ${appearance?.ratingButtonActiveColor || 'black'};\n          }\n          .emoji-svg {\n              fill: ${appearance?.ratingButtonColor || '#c9c6c6'};\n          }\n          .rating-text {\n              display: flex;\n              flex-direction: row;\n              font-size: 11px;\n              justify-content: space-between;\n              margin-top: 6px;\n              background: ${appearance?.backgroundColor || '#eeeded'};\n              opacity: .60;\n          }\n          .multiple-choice-options {\n              margin-top: 13px;\n              font-size: 14px;\n          }\n          .multiple-choice-options .choice-option {\n              display: flex;\n              align-items: center;\n              gap: 4px;\n              font-size: 13px;\n              cursor: pointer;\n              margin-bottom: 5px;\n              position: relative;\n          }\n          .multiple-choice-options > .choice-option:last-of-type {\n              margin-bottom: 0px;\n          }\n          .multiple-choice-options input {\n              cursor: pointer;\n              position: absolute;\n              opacity: 0;\n          }\n          .choice-check {\n              position: absolute;\n              right: 10px;\n              background: white;\n          }\n          .choice-check svg {\n              display: none;\n          }\n          .multiple-choice-options .choice-option:hover .choice-check svg {\n              display: inline-block;\n              opacity: .25;\n          }\n          .multiple-choice-options input:checked + label + .choice-check svg {\n              display: inline-block;\n              opacity: 100% !important;\n          }\n          .multiple-choice-options input:checked + label {\n              font-weight: bold;\n              border: 1.5px solid rgba(0,0,0);\n          }\n          .multiple-choice-options input:checked + label input {\n              font-weight: bold;\n          }\n          .multiple-choice-options label {\n              width: 100%;\n              cursor: pointer;\n              padding: 10px;\n              border: 1.5px solid rgba(0,0,0,.25);\n              border-radius: 4px;\n              background: white;\n          }\n          .multiple-choice-options .choice-option-open label {\n              padding-right: 30px;\n              display: flex;\n              flex-wrap: wrap;\n              gap: 8px;\n              max-width: 100%;\n          }\n          .multiple-choice-options .choice-option-open label span {\n              width: 100%;\n          }\n          .multiple-choice-options .choice-option-open input:disabled + label {\n              opacity: 0.6;\n          }\n          .multiple-choice-options .choice-option-open label input {\n              position: relative;\n              opacity: 1;\n              flex-grow: 1;\n              border: 0;\n              outline: 0;\n          }\n          .thank-you-message {\n              position: fixed;\n              bottom: 0px;\n              z-index: ${parseInt(appearance?.zIndex || '99999')};\n              box-shadow: -6px 0 16px -8px rgb(0 0 0 / 8%), -9px 0 28px 0 rgb(0 0 0 / 5%), -12px 0 48px 16px rgb(0 0 0 / 3%);\n              font-family: -apple-system, BlinkMacSystemFont, \"Inter\", \"Segoe UI\", \"Roboto\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n              border-top-left-radius: 10px;\n              border-top-right-radius: 10px;\n              padding: 20px 25px 10px;\n              background: ${appearance?.backgroundColor || '#eeeded'};\n              border: 1.5px solid ${appearance?.borderColor || '#c9c6c6'};\n              text-align: center;\n              max-width: ${parseInt(appearance?.maxWidth || '300')}px;\n              min-width: 150px;\n              width: 100%;\n              ${positions[appearance?.position || 'right'] || 'right: 30px;'}\n          }\n          .thank-you-message-body {\n              margin-top: 6px;\n              font-size: 14px;\n              background: ${appearance?.backgroundColor || '#eeeded'};\n          }\n          .thank-you-message-header {\n              margin: 10px 0px 0px;\n              background: ${appearance?.backgroundColor || '#eeeded'};\n          }\n          .thank-you-message-container .form-submit {\n              margin-top: 20px;\n              margin-bottom: 10px;\n          }\n          .thank-you-message-countdown {\n              margin-left: 6px;\n          }\n          .bottom-section {\n              margin-top: 14px;\n          }\n          `\n}\n\nfunction nameToHex(name: string) {\n    return {\n        aliceblue: '#f0f8ff',\n        antiquewhite: '#faebd7',\n        aqua: '#00ffff',\n        aquamarine: '#7fffd4',\n        azure: '#f0ffff',\n        beige: '#f5f5dc',\n        bisque: '#ffe4c4',\n        black: '#000000',\n        blanchedalmond: '#ffebcd',\n        blue: '#0000ff',\n        blueviolet: '#8a2be2',\n        brown: '#a52a2a',\n        burlywood: '#deb887',\n        cadetblue: '#5f9ea0',\n        chartreuse: '#7fff00',\n        chocolate: '#d2691e',\n        coral: '#ff7f50',\n        cornflowerblue: '#6495ed',\n        cornsilk: '#fff8dc',\n        crimson: '#dc143c',\n        cyan: '#00ffff',\n        darkblue: '#00008b',\n        darkcyan: '#008b8b',\n        darkgoldenrod: '#b8860b',\n        darkgray: '#a9a9a9',\n        darkgreen: '#006400',\n        darkkhaki: '#bdb76b',\n        darkmagenta: '#8b008b',\n        darkolivegreen: '#556b2f',\n        darkorange: '#ff8c00',\n        darkorchid: '#9932cc',\n        darkred: '#8b0000',\n        darksalmon: '#e9967a',\n        darkseagreen: '#8fbc8f',\n        darkslateblue: '#483d8b',\n        darkslategray: '#2f4f4f',\n        darkturquoise: '#00ced1',\n        darkviolet: '#9400d3',\n        deeppink: '#ff1493',\n        deepskyblue: '#00bfff',\n        dimgray: '#696969',\n        dodgerblue: '#1e90ff',\n        firebrick: '#b22222',\n        floralwhite: '#fffaf0',\n        forestgreen: '#228b22',\n        fuchsia: '#ff00ff',\n        gainsboro: '#dcdcdc',\n        ghostwhite: '#f8f8ff',\n        gold: '#ffd700',\n        goldenrod: '#daa520',\n        gray: '#808080',\n        green: '#008000',\n        greenyellow: '#adff2f',\n        honeydew: '#f0fff0',\n        hotpink: '#ff69b4',\n        'indianred ': '#cd5c5c',\n        indigo: '#4b0082',\n        ivory: '#fffff0',\n        khaki: '#f0e68c',\n        lavender: '#e6e6fa',\n        lavenderblush: '#fff0f5',\n        lawngreen: '#7cfc00',\n        lemonchiffon: '#fffacd',\n        lightblue: '#add8e6',\n        lightcoral: '#f08080',\n        lightcyan: '#e0ffff',\n        lightgoldenrodyellow: '#fafad2',\n        lightgrey: '#d3d3d3',\n        lightgreen: '#90ee90',\n        lightpink: '#ffb6c1',\n        lightsalmon: '#ffa07a',\n        lightseagreen: '#20b2aa',\n        lightskyblue: '#87cefa',\n        lightslategray: '#778899',\n        lightsteelblue: '#b0c4de',\n        lightyellow: '#ffffe0',\n        lime: '#00ff00',\n        limegreen: '#32cd32',\n        linen: '#faf0e6',\n        magenta: '#ff00ff',\n        maroon: '#800000',\n        mediumaquamarine: '#66cdaa',\n        mediumblue: '#0000cd',\n        mediumorchid: '#ba55d3',\n        mediumpurple: '#9370d8',\n        mediumseagreen: '#3cb371',\n        mediumslateblue: '#7b68ee',\n        mediumspringgreen: '#00fa9a',\n        mediumturquoise: '#48d1cc',\n        mediumvioletred: '#c71585',\n        midnightblue: '#191970',\n        mintcream: '#f5fffa',\n        mistyrose: '#ffe4e1',\n        moccasin: '#ffe4b5',\n        navajowhite: '#ffdead',\n        navy: '#000080',\n        oldlace: '#fdf5e6',\n        olive: '#808000',\n        olivedrab: '#6b8e23',\n        orange: '#ffa500',\n        orangered: '#ff4500',\n        orchid: '#da70d6',\n        palegoldenrod: '#eee8aa',\n        palegreen: '#98fb98',\n        paleturquoise: '#afeeee',\n        palevioletred: '#d87093',\n        papayawhip: '#ffefd5',\n        peachpuff: '#ffdab9',\n        peru: '#cd853f',\n        pink: '#ffc0cb',\n        plum: '#dda0dd',\n        powderblue: '#b0e0e6',\n        purple: '#800080',\n        red: '#ff0000',\n        rosybrown: '#bc8f8f',\n        royalblue: '#4169e1',\n        saddlebrown: '#8b4513',\n        salmon: '#fa8072',\n        sandybrown: '#f4a460',\n        seagreen: '#2e8b57',\n        seashell: '#fff5ee',\n        sienna: '#a0522d',\n        silver: '#c0c0c0',\n        skyblue: '#87ceeb',\n        slateblue: '#6a5acd',\n        slategray: '#708090',\n        snow: '#fffafa',\n        springgreen: '#00ff7f',\n        steelblue: '#4682b4',\n        tan: '#d2b48c',\n        teal: '#008080',\n        thistle: '#d8bfd8',\n        tomato: '#ff6347',\n        turquoise: '#40e0d0',\n        violet: '#ee82ee',\n        wheat: '#f5deb3',\n        white: '#ffffff',\n        whitesmoke: '#f5f5f5',\n        yellow: '#ffff00',\n        yellowgreen: '#9acd32',\n    }[name.toLowerCase()]\n}\n\nfunction hex2rgb(c: string) {\n    if (c[0] === '#') {\n        const hexColor = c.replace(/^#/, '')\n        const r = parseInt(hexColor.slice(0, 2), 16)\n        const g = parseInt(hexColor.slice(2, 4), 16)\n        const b = parseInt(hexColor.slice(4, 6), 16)\n        return 'rgb(' + r + ',' + g + ',' + b + ')'\n    }\n    return 'rgb(255, 255, 255)'\n}\n\nexport function getContrastingTextColor(color: string = defaultBackgroundColor) {\n    let rgb\n    if (color[0] === '#') {\n        rgb = hex2rgb(color)\n    }\n    if (color.startsWith('rgb')) {\n        rgb = color\n    }\n    // otherwise it's a color name\n    const nameColorToHex = nameToHex(color)\n    if (nameColorToHex) {\n        rgb = hex2rgb(nameColorToHex)\n    }\n    if (!rgb) {\n        return 'black'\n    }\n    const colorMatch = rgb.match(/^rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)(?:,\\s*(\\d+(?:\\.\\d+)?))?\\)$/)\n    if (colorMatch) {\n        const r = parseInt(colorMatch[1])\n        const g = parseInt(colorMatch[2])\n        const b = parseInt(colorMatch[3])\n        const hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b))\n        return hsp > 127.5 ? 'black' : 'white'\n    }\n    return 'black'\n}\nexport function getTextColor(el: HTMLElement) {\n    const backgroundColor = window.getComputedStyle(el).backgroundColor\n    if (backgroundColor === 'rgba(0, 0, 0, 0)') {\n        return 'black'\n    }\n    const colorMatch = backgroundColor.match(/^rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)(?:,\\s*(\\d+(?:\\.\\d+)?))?\\)$/)\n    if (!colorMatch) return 'black'\n\n    const r = parseInt(colorMatch[1])\n    const g = parseInt(colorMatch[2])\n    const b = parseInt(colorMatch[3])\n    const hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b))\n    return hsp > 127.5 ? 'black' : 'white'\n}\n\nexport const defaultSurveyAppearance: SurveyAppearance = {\n    backgroundColor: '#eeeded',\n    submitButtonColor: 'black',\n    ratingButtonColor: 'white',\n    ratingButtonActiveColor: 'black',\n    borderColor: '#c9c6c6',\n    placeholder: 'Start typing...',\n    whiteLabel: false,\n    displayThankYouMessage: true,\n    thankYouMessageHeader: 'Thank you for your feedback!',\n    position: 'right',\n}\n\nexport const defaultBackgroundColor = '#eeeded'\n\nexport const createShadow = (styleSheet: string, surveyId: string) => {\n    const div = document.createElement('div')\n    div.className = `PostHogSurvey${surveyId}`\n    const shadow = div.attachShadow({ mode: 'open' })\n    if (styleSheet) {\n        const styleElement = Object.assign(document.createElement('style'), {\n            innerText: styleSheet,\n        })\n        shadow.appendChild(styleElement)\n    }\n    document.body.appendChild(div)\n    return shadow\n}\n\nexport const sendSurveyEvent = (\n    responses: Record<string, string | number | string[] | null> = {},\n    survey: Survey,\n    posthog?: PostHog\n) => {\n    if (!posthog) return\n    localStorage.setItem(`seenSurvey_${survey.id}`, 'true')\n    posthog.capture('survey sent', {\n        $survey_name: survey.name,\n        $survey_id: survey.id,\n        $survey_questions: survey.questions.map((question) => question.question),\n        sessionRecordingUrl: posthog.get_session_replay_url?.(),\n        ...responses,\n        $set: {\n            [`$survey_responded/${survey.id}`]: true,\n        },\n    })\n    window.dispatchEvent(new Event('PHSurveySent'))\n}\n\n// Use the Fisher-yates algorithm to shuffle this array\n// https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle\nexport const shuffle = (array: any[]) => {\n    return array\n        .map((a) => ({ sort: Math.floor(Math.random() * 10), value: a }))\n        .sort((a, b) => a.sort - b.sort)\n        .map((a) => a.value)\n}\n\nconst reverseIfUnshuffled = (unshuffled: string[], shuffled: string[]): string[] => {\n    if (unshuffled.length === shuffled.length && unshuffled.every((val, index) => val === shuffled[index])) {\n        return shuffled.reverse()\n    }\n\n    return shuffled\n}\n\nexport const getDisplayOrderChoices = (question: MultipleSurveyQuestion): string[] => {\n    if (!question.shuffleOptions) {\n        return question.choices\n    }\n\n    const displayOrderChoices = question.choices\n    let openEndedChoice = ''\n    if (question.hasOpenChoice) {\n        // if the question has an open-ended choice, its always the last element in the choices array.\n        openEndedChoice = displayOrderChoices.pop()!\n    }\n\n    const shuffledOptions = reverseIfUnshuffled(displayOrderChoices, shuffle(displayOrderChoices))\n\n    if (question.hasOpenChoice) {\n        question.choices.push(openEndedChoice)\n        shuffledOptions.push(openEndedChoice)\n    }\n\n    return shuffledOptions\n}\n\nexport const getDisplayOrderQuestions = (survey: Survey): SurveyQuestion[] => {\n    if (!survey.appearance || !survey.appearance.shuffleQuestions) {\n        return survey.questions\n    }\n\n    // retain the original questionIndex so we can correlate values in the webapp\n    survey.questions.forEach((element, idx) => {\n        element.questionIndex = idx\n    })\n\n    return shuffle(survey.questions)\n}\n\nexport const SurveyContext = createContext<{\n    readOnly: boolean\n    previewQuestionIndex: number\n    textColor: string\n}>({\n    readOnly: false,\n    previewQuestionIndex: 0,\n    textColor: 'black',\n})\n"]}
+{"version":3,"file":"surveys-utils.jsx","sourceRoot":"","sources":["../../../../src/extensions/surveys/surveys-utils.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PostHog } from '../../posthog-core'\nimport { Survey, SurveyAppearance, MultipleSurveyQuestion, SurveyQuestion } from '../../posthog-surveys-types'\nimport { window as _window, document as _document } from '../../utils/globals'\nimport { createContext } from 'preact'\n// We cast the types here which is dangerous but protected by the top level generateSurveys call\nconst window = _window as Window & typeof globalThis\nconst document = _document as Document\n\nexport const style = (appearance: SurveyAppearance | null) => {\n    const positions = {\n        left: 'left: 30px;',\n        right: 'right: 30px;',\n        center: `\n            left: 50%;\n            transform: translateX(-50%);\n          `,\n    }\n    return `\n          .survey-form {\n              position: fixed;\n              margin: 0px;\n              bottom: 0px;\n              color: black;\n              font-weight: normal;\n              font-family: -apple-system, BlinkMacSystemFont, \"Inter\", \"Segoe UI\", \"Roboto\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n              text-align: left;\n              max-width: ${parseInt(appearance?.maxWidth || '300')}px;\n              z-index: ${parseInt(appearance?.zIndex || '99999')};\n              border: 1.5px solid ${appearance?.borderColor || '#c9c6c6'};\n              border-bottom: 0px;\n              width: 100%;\n              ${positions[appearance?.position || 'right'] || 'right: 30px;'}\n          }\n          .form-submit[disabled] {\n              opacity: 0.6;\n              filter: grayscale(50%);\n              cursor: not-allowed;\n          }\n          .survey-form {\n              flex-direction: column;\n              background: ${appearance?.backgroundColor || '#eeeded'};\n              border-top-left-radius: 10px;\n              border-top-right-radius: 10px;\n              box-shadow: -6px 0 16px -8px rgb(0 0 0 / 8%), -9px 0 28px 0 rgb(0 0 0 / 5%), -12px 0 48px 16px rgb(0 0 0 / 3%);\n          }\n          .survey-form textarea {\n              color: #2d2d2d;\n              font-size: 14px;\n              font-family: -apple-system, BlinkMacSystemFont, \"Inter\", \"Segoe UI\", \"Roboto\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n              background: white;\n              color: black;\n              outline: none;\n              padding-left: 10px;\n              padding-right: 10px;\n              padding-top: 10px;\n              border-radius: 6px;\n              border-color: ${appearance?.borderColor || '#c9c6c6'};\n              margin-top: 14px;\n          }\n          .form-submit {\n              box-sizing: border-box;\n              margin: 0;\n              font-family: inherit;\n              overflow: visible;\n              text-transform: none;\n              position: relative;\n              display: inline-block;\n              font-weight: 700;\n              white-space: nowrap;\n              text-align: center;\n              border: 1.5px solid transparent;\n              cursor: pointer;\n              user-select: none;\n              touch-action: manipulation;\n              padding: 12px;\n              font-size: 14px;\n              border-radius: 6px;\n              outline: 0;\n              background: ${appearance?.submitButtonColor || 'black'} !important;\n              text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);\n              box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);\n              width: 100%;\n          }\n          .form-cancel {\n              float: right;\n              border: none;\n              background: none;\n              cursor: pointer;\n          }\n          .cancel-btn-wrapper {\n              position: absolute;\n              width: 35px;\n              height: 35px;\n              border-radius: 100%;\n              top: 0;\n              right: 0;\n              transform: translate(50%, -50%);\n              background: white;\n              border: 1.5px solid ${appearance?.borderColor || '#c9c6c6'};\n              display: flex;\n              justify-content: center;\n              align-items: center;\n          }\n          .bolded { font-weight: 600; }\n          .buttons {\n              display: flex;\n              justify-content: center;\n          }\n          .footer-branding {\n              font-size: 11px;\n              margin-top: 10px;\n              text-align: center;\n              display: flex;\n              justify-content: center;\n              gap: 4px;\n              align-items: center;\n              font-weight: 500;\n              background: ${appearance?.backgroundColor || '#eeeded'};\n              text-decoration: none;\n          }\n          .survey-box {\n              padding: 20px 25px 10px;\n              display: flex;\n              flex-direction: column;\n              border-radius: 10px;\n          }\n          .survey-question {\n              font-weight: 500;\n              font-size: 14px;\n              background: ${appearance?.backgroundColor || '#eeeded'};\n          }\n          .question-textarea-wrapper {\n              display: flex;\n              flex-direction: column;\n          }\n          .description {\n              font-size: 13px;\n              padding-top: 5px;\n              background: ${appearance?.backgroundColor || '#eeeded'};\n          }\n          .ratings-number {\n              background-color: ${appearance?.ratingButtonColor || 'white'};\n              font-size: 16px;\n              font-weight: 600;\n              padding: 8px 0px;\n              border: none;\n          }\n          .ratings-number:hover {\n              cursor: pointer;\n          }\n          .rating-options {\n              margin-top: 14px;\n          }\n          .rating-options-number {\n              display: grid;\n              border-radius: 6px;\n              overflow: hidden;\n              border: 1.5px solid ${appearance?.borderColor || '#c9c6c6'};\n          }\n          .rating-options-number > .ratings-number {\n              border-right: 1px solid ${appearance?.borderColor || '#c9c6c6'};\n          }\n          .rating-options-number > .ratings-number:last-of-type {\n              border-right: 0px;\n          }\n          .rating-options-number .rating-active {\n              background: ${appearance?.ratingButtonActiveColor || 'black'};\n          }\n          .rating-options-emoji {\n              display: flex;\n              justify-content: space-between;\n          }\n          .ratings-emoji {\n              font-size: 16px;\n              background-color: transparent;\n              border: none;\n              padding: 0px;\n          }\n          .ratings-emoji:hover {\n              cursor: pointer;\n          }\n          .ratings-emoji.rating-active svg {\n              fill: ${appearance?.ratingButtonActiveColor || 'black'};\n          }\n          .emoji-svg {\n              fill: ${appearance?.ratingButtonColor || '#c9c6c6'};\n          }\n          .rating-text {\n              display: flex;\n              flex-direction: row;\n              font-size: 11px;\n              justify-content: space-between;\n              margin-top: 6px;\n              background: ${appearance?.backgroundColor || '#eeeded'};\n              opacity: .60;\n          }\n          .multiple-choice-options {\n              margin-top: 13px;\n              font-size: 14px;\n          }\n          .multiple-choice-options .choice-option {\n              display: flex;\n              align-items: center;\n              gap: 4px;\n              font-size: 13px;\n              cursor: pointer;\n              margin-bottom: 5px;\n              position: relative;\n          }\n          .multiple-choice-options > .choice-option:last-of-type {\n              margin-bottom: 0px;\n          }\n          .multiple-choice-options input {\n              cursor: pointer;\n              position: absolute;\n              opacity: 0;\n          }\n          .choice-check {\n              position: absolute;\n              right: 10px;\n              background: white;\n          }\n          .choice-check svg {\n              display: none;\n          }\n          .multiple-choice-options .choice-option:hover .choice-check svg {\n              display: inline-block;\n              opacity: .25;\n          }\n          .multiple-choice-options input:checked + label + .choice-check svg {\n              display: inline-block;\n              opacity: 100% !important;\n          }\n          .multiple-choice-options input:checked + label {\n              font-weight: bold;\n              border: 1.5px solid rgba(0,0,0);\n          }\n          .multiple-choice-options input:checked + label input {\n              font-weight: bold;\n          }\n          .multiple-choice-options label {\n              width: 100%;\n              cursor: pointer;\n              padding: 10px;\n              border: 1.5px solid rgba(0,0,0,.25);\n              border-radius: 4px;\n              background: white;\n          }\n          .multiple-choice-options .choice-option-open label {\n              padding-right: 30px;\n              display: flex;\n              flex-wrap: wrap;\n              gap: 8px;\n              max-width: 100%;\n          }\n          .multiple-choice-options .choice-option-open label span {\n              width: 100%;\n          }\n          .multiple-choice-options .choice-option-open input:disabled + label {\n              opacity: 0.6;\n          }\n          .multiple-choice-options .choice-option-open label input {\n              position: relative;\n              opacity: 1;\n              flex-grow: 1;\n              border: 0;\n              outline: 0;\n          }\n          .thank-you-message {\n              position: fixed;\n              bottom: 0px;\n              z-index: ${parseInt(appearance?.zIndex || '99999')};\n              box-shadow: -6px 0 16px -8px rgb(0 0 0 / 8%), -9px 0 28px 0 rgb(0 0 0 / 5%), -12px 0 48px 16px rgb(0 0 0 / 3%);\n              font-family: -apple-system, BlinkMacSystemFont, \"Inter\", \"Segoe UI\", \"Roboto\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n              border-top-left-radius: 10px;\n              border-top-right-radius: 10px;\n              padding: 20px 25px 10px;\n              background: ${appearance?.backgroundColor || '#eeeded'};\n              border: 1.5px solid ${appearance?.borderColor || '#c9c6c6'};\n              text-align: center;\n              max-width: ${parseInt(appearance?.maxWidth || '300')}px;\n              min-width: 150px;\n              width: 100%;\n              ${positions[appearance?.position || 'right'] || 'right: 30px;'}\n          }\n          .thank-you-message-body {\n              margin-top: 6px;\n              font-size: 14px;\n              background: ${appearance?.backgroundColor || '#eeeded'};\n          }\n          .thank-you-message-header {\n              margin: 10px 0px 0px;\n              background: ${appearance?.backgroundColor || '#eeeded'};\n          }\n          .thank-you-message-container .form-submit {\n              margin-top: 20px;\n              margin-bottom: 10px;\n          }\n          .thank-you-message-countdown {\n              margin-left: 6px;\n          }\n          .bottom-section {\n              margin-top: 14px;\n          }\n          `\n}\n\nfunction nameToHex(name: string) {\n    return {\n        aliceblue: '#f0f8ff',\n        antiquewhite: '#faebd7',\n        aqua: '#00ffff',\n        aquamarine: '#7fffd4',\n        azure: '#f0ffff',\n        beige: '#f5f5dc',\n        bisque: '#ffe4c4',\n        black: '#000000',\n        blanchedalmond: '#ffebcd',\n        blue: '#0000ff',\n        blueviolet: '#8a2be2',\n        brown: '#a52a2a',\n        burlywood: '#deb887',\n        cadetblue: '#5f9ea0',\n        chartreuse: '#7fff00',\n        chocolate: '#d2691e',\n        coral: '#ff7f50',\n        cornflowerblue: '#6495ed',\n        cornsilk: '#fff8dc',\n        crimson: '#dc143c',\n        cyan: '#00ffff',\n        darkblue: '#00008b',\n        darkcyan: '#008b8b',\n        darkgoldenrod: '#b8860b',\n        darkgray: '#a9a9a9',\n        darkgreen: '#006400',\n        darkkhaki: '#bdb76b',\n        darkmagenta: '#8b008b',\n        darkolivegreen: '#556b2f',\n        darkorange: '#ff8c00',\n        darkorchid: '#9932cc',\n        darkred: '#8b0000',\n        darksalmon: '#e9967a',\n        darkseagreen: '#8fbc8f',\n        darkslateblue: '#483d8b',\n        darkslategray: '#2f4f4f',\n        darkturquoise: '#00ced1',\n        darkviolet: '#9400d3',\n        deeppink: '#ff1493',\n        deepskyblue: '#00bfff',\n        dimgray: '#696969',\n        dodgerblue: '#1e90ff',\n        firebrick: '#b22222',\n        floralwhite: '#fffaf0',\n        forestgreen: '#228b22',\n        fuchsia: '#ff00ff',\n        gainsboro: '#dcdcdc',\n        ghostwhite: '#f8f8ff',\n        gold: '#ffd700',\n        goldenrod: '#daa520',\n        gray: '#808080',\n        green: '#008000',\n        greenyellow: '#adff2f',\n        honeydew: '#f0fff0',\n        hotpink: '#ff69b4',\n        'indianred ': '#cd5c5c',\n        indigo: '#4b0082',\n        ivory: '#fffff0',\n        khaki: '#f0e68c',\n        lavender: '#e6e6fa',\n        lavenderblush: '#fff0f5',\n        lawngreen: '#7cfc00',\n        lemonchiffon: '#fffacd',\n        lightblue: '#add8e6',\n        lightcoral: '#f08080',\n        lightcyan: '#e0ffff',\n        lightgoldenrodyellow: '#fafad2',\n        lightgrey: '#d3d3d3',\n        lightgreen: '#90ee90',\n        lightpink: '#ffb6c1',\n        lightsalmon: '#ffa07a',\n        lightseagreen: '#20b2aa',\n        lightskyblue: '#87cefa',\n        lightslategray: '#778899',\n        lightsteelblue: '#b0c4de',\n        lightyellow: '#ffffe0',\n        lime: '#00ff00',\n        limegreen: '#32cd32',\n        linen: '#faf0e6',\n        magenta: '#ff00ff',\n        maroon: '#800000',\n        mediumaquamarine: '#66cdaa',\n        mediumblue: '#0000cd',\n        mediumorchid: '#ba55d3',\n        mediumpurple: '#9370d8',\n        mediumseagreen: '#3cb371',\n        mediumslateblue: '#7b68ee',\n        mediumspringgreen: '#00fa9a',\n        mediumturquoise: '#48d1cc',\n        mediumvioletred: '#c71585',\n        midnightblue: '#191970',\n        mintcream: '#f5fffa',\n        mistyrose: '#ffe4e1',\n        moccasin: '#ffe4b5',\n        navajowhite: '#ffdead',\n        navy: '#000080',\n        oldlace: '#fdf5e6',\n        olive: '#808000',\n        olivedrab: '#6b8e23',\n        orange: '#ffa500',\n        orangered: '#ff4500',\n        orchid: '#da70d6',\n        palegoldenrod: '#eee8aa',\n        palegreen: '#98fb98',\n        paleturquoise: '#afeeee',\n        palevioletred: '#d87093',\n        papayawhip: '#ffefd5',\n        peachpuff: '#ffdab9',\n        peru: '#cd853f',\n        pink: '#ffc0cb',\n        plum: '#dda0dd',\n        powderblue: '#b0e0e6',\n        purple: '#800080',\n        red: '#ff0000',\n        rosybrown: '#bc8f8f',\n        royalblue: '#4169e1',\n        saddlebrown: '#8b4513',\n        salmon: '#fa8072',\n        sandybrown: '#f4a460',\n        seagreen: '#2e8b57',\n        seashell: '#fff5ee',\n        sienna: '#a0522d',\n        silver: '#c0c0c0',\n        skyblue: '#87ceeb',\n        slateblue: '#6a5acd',\n        slategray: '#708090',\n        snow: '#fffafa',\n        springgreen: '#00ff7f',\n        steelblue: '#4682b4',\n        tan: '#d2b48c',\n        teal: '#008080',\n        thistle: '#d8bfd8',\n        tomato: '#ff6347',\n        turquoise: '#40e0d0',\n        violet: '#ee82ee',\n        wheat: '#f5deb3',\n        white: '#ffffff',\n        whitesmoke: '#f5f5f5',\n        yellow: '#ffff00',\n        yellowgreen: '#9acd32',\n    }[name.toLowerCase()]\n}\n\nfunction hex2rgb(c: string) {\n    if (c[0] === '#') {\n        const hexColor = c.replace(/^#/, '')\n        const r = parseInt(hexColor.slice(0, 2), 16)\n        const g = parseInt(hexColor.slice(2, 4), 16)\n        const b = parseInt(hexColor.slice(4, 6), 16)\n        return 'rgb(' + r + ',' + g + ',' + b + ')'\n    }\n    return 'rgb(255, 255, 255)'\n}\n\nexport function getContrastingTextColor(color: string = defaultBackgroundColor) {\n    let rgb\n    if (color[0] === '#') {\n        rgb = hex2rgb(color)\n    }\n    if (color.startsWith('rgb')) {\n        rgb = color\n    }\n    // otherwise it's a color name\n    const nameColorToHex = nameToHex(color)\n    if (nameColorToHex) {\n        rgb = hex2rgb(nameColorToHex)\n    }\n    if (!rgb) {\n        return 'black'\n    }\n    const colorMatch = rgb.match(/^rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)(?:,\\s*(\\d+(?:\\.\\d+)?))?\\)$/)\n    if (colorMatch) {\n        const r = parseInt(colorMatch[1])\n        const g = parseInt(colorMatch[2])\n        const b = parseInt(colorMatch[3])\n        const hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b))\n        return hsp > 127.5 ? 'black' : 'white'\n    }\n    return 'black'\n}\nexport function getTextColor(el: HTMLElement) {\n    const backgroundColor = window.getComputedStyle(el).backgroundColor\n    if (backgroundColor === 'rgba(0, 0, 0, 0)') {\n        return 'black'\n    }\n    const colorMatch = backgroundColor.match(/^rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)(?:,\\s*(\\d+(?:\\.\\d+)?))?\\)$/)\n    if (!colorMatch) return 'black'\n\n    const r = parseInt(colorMatch[1])\n    const g = parseInt(colorMatch[2])\n    const b = parseInt(colorMatch[3])\n    const hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b))\n    return hsp > 127.5 ? 'black' : 'white'\n}\n\nexport const defaultSurveyAppearance: SurveyAppearance = {\n    backgroundColor: '#eeeded',\n    submitButtonColor: 'black',\n    ratingButtonColor: 'white',\n    ratingButtonActiveColor: 'black',\n    borderColor: '#c9c6c6',\n    placeholder: 'Start typing...',\n    whiteLabel: false,\n    displayThankYouMessage: true,\n    thankYouMessageHeader: 'Thank you for your feedback!',\n    position: 'right',\n}\n\nexport const defaultBackgroundColor = '#eeeded'\n\nexport const createShadow = (styleSheet: string, surveyId: string) => {\n    const div = document.createElement('div')\n    div.className = `PostHogSurvey${surveyId}`\n    const shadow = div.attachShadow({ mode: 'open' })\n    if (styleSheet) {\n        const styleElement = Object.assign(document.createElement('style'), {\n            innerText: styleSheet,\n        })\n        shadow.appendChild(styleElement)\n    }\n    document.body.appendChild(div)\n    return shadow\n}\n\nexport const sendSurveyEvent = (\n    responses: Record<string, string | number | string[] | null> = {},\n    survey: Survey,\n    posthog?: PostHog\n) => {\n    if (!posthog) return\n    localStorage.setItem(`seenSurvey_${survey.id}`, 'true')\n    posthog.capture('survey sent', {\n        $survey_name: survey.name,\n        $survey_id: survey.id,\n        $survey_questions: survey.questions.map((question) => question.question),\n        sessionRecordingUrl: posthog.get_session_replay_url?.(),\n        ...responses,\n        $set: {\n            [`$survey_responded/${survey.id}`]: true,\n        },\n    })\n    window.dispatchEvent(new Event('PHSurveySent'))\n}\n\n// Use the Fisher-yates algorithm to shuffle this array\n// https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle\nexport const shuffle = (array: any[]) => {\n    return array\n        .map((a) => ({ sort: Math.floor(Math.random() * 10), value: a }))\n        .sort((a, b) => a.sort - b.sort)\n        .map((a) => a.value)\n}\n\nconst reverseIfUnshuffled = (unshuffled: string[], shuffled: string[]): string[] => {\n    if (unshuffled.length === shuffled.length && unshuffled.every((val, index) => val === shuffled[index])) {\n        return shuffled.reverse()\n    }\n\n    return shuffled\n}\n\nexport const getDisplayOrderChoices = (question: MultipleSurveyQuestion): string[] => {\n    if (!question.shuffleOptions) {\n        return question.choices\n    }\n\n    const displayOrderChoices = question.choices\n    let openEndedChoice = ''\n    if (question.hasOpenChoice) {\n        // if the question has an open-ended choice, its always the last element in the choices array.\n        openEndedChoice = displayOrderChoices.pop()!\n    }\n\n    const shuffledOptions = reverseIfUnshuffled(displayOrderChoices, shuffle(displayOrderChoices))\n\n    if (question.hasOpenChoice) {\n        question.choices.push(openEndedChoice)\n        shuffledOptions.push(openEndedChoice)\n    }\n\n    return shuffledOptions\n}\n\nexport const getDisplayOrderQuestions = (survey: Survey): SurveyQuestion[] => {\n    // retain the original questionIndex so we can correlate values in the webapp\n    survey.questions.forEach((question, idx) => {\n        question.originalQuestionIndex = idx\n    })\n\n    if (!survey.appearance || !survey.appearance.shuffleQuestions) {\n        return survey.questions\n    }\n\n    return shuffle(survey.questions)\n}\n\nexport const SurveyContext = createContext<{\n    isPreviewMode: boolean\n    previewPageIndex: number | undefined\n    handleCloseSurveyPopup: () => void\n}>({\n    isPreviewMode: false,\n    previewPageIndex: 0,\n    handleCloseSurveyPopup: () => {},\n})\n"]}

package/lib/src/extensions/surveys.d.ts

@@ -1,16 +1,14 @@
 import { PostHog } from '../posthog-core';
 import { Survey } from '../posthog-surveys-types';
 export declare const callSurveys: (posthog: PostHog, forceReload?: boolean) => void;
-export declare const renderSurveysPreview: (survey: Survey, root: HTMLElement, displayState: 'survey' | 'confirmation', previewQuestionIndex: number) => void;
+export declare const renderSurveysPreview: (survey: Survey, parentElement: HTMLElement, previewPageIndex: number) => void;
 export declare const renderFeedbackWidgetPreview: (survey: Survey, root: HTMLElement) => void;
 export declare function generateSurveys(posthog: PostHog): void;
-export declare function Surveys({ survey, posthog, readOnly, style, initialDisplayState, previewQuestionIndex, }: {
+export declare function SurveyPopup({ survey, posthog, style, previewPageIndex, }: {
     survey: Survey;
     posthog?: PostHog;
-    readOnly?: boolean;
     style?: React.CSSProperties;
-    initialDisplayState?: 'survey' | 'confirmation' | 'closed';
-    previewQuestionIndex?: number;
+    previewPageIndex?: number | undefined;
 }): JSX.Element;
 export declare function Questions({ survey, posthog, styleOverrides, }: {
     survey: Survey;

package/lib/src/extensions/surveys.jsx

@@ -25,7 +25,7 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-import { SurveyQuestionType, SurveyType, } from '../posthog-surveys-types';
+import { SurveyQuestionType, SurveyType } from '../posthog-surveys-types';
 import { window as _window, document as _document } from '../utils/globals';
 import { style, defaultSurveyAppearance, sendSurveyEvent, createShadow, getContrastingTextColor, SurveyContext, getDisplayOrderQuestions, } from './surveys/surveys-utils';
 import * as Preact from 'preact';
@@ -92,25 +92,31 @@ export var callSurveys = function (posthog, forceReload) {
                 }
                 if (!localStorage.getItem("seenSurvey_".concat(survey.id))) {
                     var shadow = createShadow(style(survey === null || survey === void 0 ? void 0 : survey.appearance), survey.id);
-                    Preact.render(<Surveys key={'popover-survey'} posthog={posthog} survey={survey}/>, shadow);
+                    Preact.render(<SurveyPopup key={'popover-survey'} posthog={posthog} survey={survey}/>, shadow);
                 }
             }
         });
     }, forceReload);
 };
-export var renderSurveysPreview = function (survey, root, displayState, previewQuestionIndex) {
+export var renderSurveysPreview = function (survey, parentElement, previewPageIndex) {
     var _a, _b;
     var surveyStyleSheet = style(survey.appearance);
     var styleElement = Object.assign(document.createElement('style'), { innerText: surveyStyleSheet });
-    root.appendChild(styleElement);
+    // Remove previously attached <style>
+    Array.from(parentElement.children).forEach(function (child) {
+        if (child instanceof HTMLStyleElement) {
+            parentElement.removeChild(child);
+        }
+    });
+    parentElement.appendChild(styleElement);
     var textColor = getContrastingTextColor(((_a = survey.appearance) === null || _a === void 0 ? void 0 : _a.backgroundColor) || defaultSurveyAppearance.backgroundColor || 'white');
-    Preact.render(<Surveys key={'surveys-render-preview'} survey={survey} readOnly={true} initialDisplayState={displayState} previewQuestionIndex={previewQuestionIndex} style={{
+    Preact.render(<SurveyPopup key="surveys-render-preview" survey={survey} style={{
             position: 'relative',
             right: 0,
             borderBottom: "1px solid ".concat((_b = survey.appearance) === null || _b === void 0 ? void 0 : _b.borderColor),
             borderRadius: 10,
             color: textColor,
-        }}/>, root);
+        }} previewPageIndex={previewPageIndex}/>, parentElement);
 };
 export var renderFeedbackWidgetPreview = function (survey, root) {
     var _a;
@@ -131,13 +137,24 @@ export function generateSurveys(posthog) {
         callSurveys(posthog, false);
     }, 3000);
 }
-export function Surveys(_a) {
-    var _b, _c, _d;
-    var survey = _a.survey, posthog = _a.posthog, readOnly = _a.readOnly, style = _a.style, initialDisplayState = _a.initialDisplayState, previewQuestionIndex = _a.previewQuestionIndex;
-    var _e = __read(useState(initialDisplayState || 'survey'), 2), displayState = _e[0], setDisplayState = _e[1];
+export function SurveyPopup(_a) {
+    var _b, _c;
+    var survey = _a.survey, posthog = _a.posthog, style = _a.style, previewPageIndex = _a.previewPageIndex;
+    var _d = __read(useState(true), 2), isPopupVisible = _d[0], setIsPopupVisible = _d[1];
+    var _e = __read(useState(false), 2), isSurveySent = _e[0], setIsSurveySent = _e[1];
+    var shouldShowConfirmation = isSurveySent || previewPageIndex === survey.questions.length;
+    var isPreviewMode = Number.isInteger(previewPageIndex);
+    var confirmationBoxLeftStyle = (style === null || style === void 0 ? void 0 : style.left) && isNumber(style === null || style === void 0 ? void 0 : style.left) ? { left: style.left - 40 } : {};
+    // Ensure the popup stays in the same position for the preview
+    if (isPreviewMode) {
+        style = style || {};
+        style.left = 'unset';
+        style.right = 'unset';
+        style.transform = 'unset';
+    }
     useEffect(function () {
         var _a;
-        if (readOnly || !posthog) {
+        if (isPreviewMode || !posthog) {
             return;
         }
         window.dispatchEvent(new Event('PHSurveyShown'));
@@ -148,88 +165,107 @@ export function Surveys(_a) {
         });
         localStorage.setItem("lastSeenSurveyDate", new Date().toISOString());
         window.addEventListener('PHSurveyClosed', function () {
-            setDisplayState('closed');
+            setIsPopupVisible(false);
         });
         window.addEventListener('PHSurveySent', function () {
             var _a, _b;
             if (!((_a = survey.appearance) === null || _a === void 0 ? void 0 : _a.displayThankYouMessage)) {
-                return setDisplayState('closed');
+                return setIsPopupVisible(false);
             }
-            setDisplayState('confirmation');
+            setIsSurveySent(true);
             if ((_b = survey.appearance) === null || _b === void 0 ? void 0 : _b.autoDisappear) {
                 setTimeout(function () {
-                    setDisplayState('closed');
+                    setIsPopupVisible(false);
                 }, 5000);
             }
         });
     }, []);
-    var confirmationBoxLeftStyle = (style === null || style === void 0 ? void 0 : style.left) && isNumber(style === null || style === void 0 ? void 0 : style.left) ? { left: style.left - 40 } : {};
-    return (<>
-            <SurveyContext.Provider value={{
-            readOnly: !!readOnly,
-            previewQuestionIndex: previewQuestionIndex !== null && previewQuestionIndex !== void 0 ? previewQuestionIndex : 0,
-            textColor: getContrastingTextColor(((_b = survey.appearance) === null || _b === void 0 ? void 0 : _b.backgroundColor) || defaultSurveyAppearance.backgroundColor),
+    return isPopupVisible ? (<SurveyContext.Provider value={{
+            isPreviewMode: isPreviewMode,
+            previewPageIndex: previewPageIndex,
+            handleCloseSurveyPopup: function () { return closeSurveyPopup(survey, posthog, isPreviewMode); },
         }}>
-                {displayState === 'survey' && <Questions survey={survey} posthog={posthog} styleOverrides={style}/>}
-                {displayState === 'confirmation' && (<ConfirmationMessage confirmationHeader={((_c = survey.appearance) === null || _c === void 0 ? void 0 : _c.thankYouMessageHeader) || 'Thank you!'} confirmationDescription={((_d = survey.appearance) === null || _d === void 0 ? void 0 : _d.thankYouMessageDescription) || ''} appearance={survey.appearance || defaultSurveyAppearance} styleOverrides={__assign(__assign({}, style), confirmationBoxLeftStyle)} onClose={function () { return setDisplayState('closed'); }}/>)}
-            </SurveyContext.Provider>
-        </>);
+            {!shouldShowConfirmation ? (<Questions survey={survey} posthog={posthog} styleOverrides={style}/>) : (<ConfirmationMessage header={((_b = survey.appearance) === null || _b === void 0 ? void 0 : _b.thankYouMessageHeader) || 'Thank you!'} description={((_c = survey.appearance) === null || _c === void 0 ? void 0 : _c.thankYouMessageDescription) || ''} appearance={survey.appearance || defaultSurveyAppearance} styleOverrides={__assign(__assign({}, style), confirmationBoxLeftStyle)} onClose={function () { return setIsPopupVisible(false); }}/>)}
+        </SurveyContext.Provider>) : (<></>);
 }
-var questionTypeMap = function (question, questionIndex, appearance, onSubmit, closeSurveyPopup) {
-    var _a;
-    var mapping = (_a = {},
-        _a[SurveyQuestionType.Open] = (<OpenTextQuestion question={question} appearance={appearance} onSubmit={onSubmit} closeSurveyPopup={closeSurveyPopup}/>),
-        _a[SurveyQuestionType.Link] = (<LinkQuestion question={question} appearance={appearance} onSubmit={onSubmit} closeSurveyPopup={closeSurveyPopup}/>),
-        _a[SurveyQuestionType.Rating] = (<RatingQuestion question={question} appearance={appearance} questionIndex={questionIndex} onSubmit={onSubmit} closeSurveyPopup={closeSurveyPopup}/>),
-        _a[SurveyQuestionType.SingleChoice] = (<MultipleChoiceQuestion question={question} appearance={appearance} questionIndex={questionIndex} onSubmit={onSubmit} closeSurveyPopup={closeSurveyPopup}/>),
-        _a[SurveyQuestionType.MultipleChoice] = (<MultipleChoiceQuestion question={question} appearance={appearance} questionIndex={questionIndex} onSubmit={onSubmit} closeSurveyPopup={closeSurveyPopup}/>),
-        _a);
-    return mapping[question.type];
+var getQuestionComponent = function (_a) {
+    var _b, _c;
+    var question = _a.question, displayQuestionIndex = _a.displayQuestionIndex, appearance = _a.appearance, onSubmit = _a.onSubmit;
+    var questionComponents = (_b = {},
+        _b[SurveyQuestionType.Open] = OpenTextQuestion,
+        _b[SurveyQuestionType.Link] = LinkQuestion,
+        _b[SurveyQuestionType.Rating] = RatingQuestion,
+        _b[SurveyQuestionType.SingleChoice] = MultipleChoiceQuestion,
+        _b[SurveyQuestionType.MultipleChoice] = MultipleChoiceQuestion,
+        _b);
+    var commonProps = {
+        question: question,
+        appearance: appearance,
+        onSubmit: onSubmit,
+    };
+    var additionalProps = (_c = {},
+        _c[SurveyQuestionType.Open] = {},
+        _c[SurveyQuestionType.Link] = {},
+        _c[SurveyQuestionType.Rating] = { displayQuestionIndex: displayQuestionIndex },
+        _c[SurveyQuestionType.SingleChoice] = { displayQuestionIndex: displayQuestionIndex },
+        _c[SurveyQuestionType.MultipleChoice] = { displayQuestionIndex: displayQuestionIndex },
+        _c);
+    var Component = questionComponents[question.type];
+    var componentProps = __assign(__assign({}, commonProps), additionalProps[question.type]);
+    return <Component {...componentProps}/>;
 };
 export function Questions(_a) {
-    var _b, _c, _d, _e;
+    var _b, _c;
     var survey = _a.survey, posthog = _a.posthog, styleOverrides = _a.styleOverrides;
     var textColor = getContrastingTextColor(((_b = survey.appearance) === null || _b === void 0 ? void 0 : _b.backgroundColor) || defaultSurveyAppearance.backgroundColor);
-    var _f = __read(useState({}), 2), questionsResponses = _f[0], setQuestionsResponses = _f[1];
-    var _g = useContext(SurveyContext), readOnly = _g.readOnly, previewQuestionIndex = _g.previewQuestionIndex;
-    var _h = __read(useState(readOnly ? previewQuestionIndex : 0), 2), currentQuestion = _h[0], setCurrentQuestion = _h[1];
+    var _d = __read(useState({}), 2), questionsResponses = _d[0], setQuestionsResponses = _d[1];
+    var _e = useContext(SurveyContext), isPreviewMode = _e.isPreviewMode, previewPageIndex = _e.previewPageIndex;
+    var _f = __read(useState(previewPageIndex || 0), 2), currentQuestionIndex = _f[0], setCurrentQuestionIndex = _f[1];
     var surveyQuestions = useMemo(function () { return getDisplayOrderQuestions(survey); }, [survey]);
-    var onNextClick = function (res, idx) {
-        var _a, _b;
-        var responseKey = idx === 0 ? "$survey_response" : "$survey_response_".concat(idx);
-        if (idx === survey.questions.length - 1) {
-            return sendSurveyEvent(__assign(__assign({}, questionsResponses), (_a = {}, _a[responseKey] = res, _a)), survey, posthog);
+    // Sync preview state
+    useEffect(function () {
+        setCurrentQuestionIndex(previewPageIndex !== null && previewPageIndex !== void 0 ? previewPageIndex : 0);
+    }, [previewPageIndex]);
+    var onNextButtonClick = function (_a) {
+        var _b, _c;
+        var res = _a.res, originalQuestionIndex = _a.originalQuestionIndex, displayQuestionIndex = _a.displayQuestionIndex;
+        var isLastDisplayedQuestion = displayQuestionIndex === survey.questions.length - 1;
+        var responseKey = originalQuestionIndex === 0 ? "$survey_response" : "$survey_response_".concat(originalQuestionIndex);
+        if (isLastDisplayedQuestion) {
+            return sendSurveyEvent(__assign(__assign({}, questionsResponses), (_b = {}, _b[responseKey] = res, _b)), survey, posthog);
         }
         else {
-            setQuestionsResponses(__assign(__assign({}, questionsResponses), (_b = {}, _b[responseKey] = res, _b)));
-            setCurrentQuestion(idx + 1);
+            setQuestionsResponses(__assign(__assign({}, questionsResponses), (_c = {}, _c[responseKey] = res, _c)));
+            setCurrentQuestionIndex(displayQuestionIndex + 1);
         }
     };
-    var questionToDisplay = readOnly ? previewQuestionIndex : currentQuestion;
-    var hasMultipleQuestions = survey.questions.length > 1;
-    var isPreviewThankYouMessage = readOnly && questionToDisplay === survey.questions.length;
-    return (<form 
-    // TODO: BEMify classes
-    className="survey-form" style={__assign(__assign({ color: textColor, borderColor: (_c = survey.appearance) === null || _c === void 0 ? void 0 : _c.borderColor }, styleOverrides), (isPreviewThankYouMessage ? { border: 'none', borderBottom: 'solid 1px rgb(201, 198, 198)' } : {}))}>
-            {isPreviewThankYouMessage ? (<ConfirmationMessage confirmationHeader={((_d = survey.appearance) === null || _d === void 0 ? void 0 : _d.thankYouMessageHeader) || 'Thank you!'} confirmationDescription={((_e = survey.appearance) === null || _e === void 0 ? void 0 : _e.thankYouMessageDescription) || ''} appearance={survey.appearance || defaultSurveyAppearance} styleOverrides={__assign(__assign({}, style), { position: 'relative', right: '0px', borderRadius: '10px', border: 'solid 1px rgb(201, 198, 198)' })} onClose={function () { }}/>) : (<>
-                    {surveyQuestions.map(function (question, idx) {
-                if (hasMultipleQuestions) {
-                    return (<>
-                                    {questionToDisplay === idx && (<div className={"tab question-".concat(idx, " ").concat(question.type)}>
-                                            {questionTypeMap(question, idx, survey.appearance || defaultSurveyAppearance, function (res) { return onNextClick(res, question.questionIndex || idx); }, function () { return closeSurveyPopup(survey, posthog, readOnly); })}
-                                        </div>)}
-                                </>);
-                }
-                return questionTypeMap(surveyQuestions[idx], idx, survey.appearance || defaultSurveyAppearance, function (res) { return onNextClick(res, idx); }, function () { return closeSurveyPopup(survey, posthog, readOnly); });
-            })}
-                </>)}
+    return (<form className="survey-form" style={__assign({ color: textColor, borderColor: (_c = survey.appearance) === null || _c === void 0 ? void 0 : _c.borderColor }, styleOverrides)}>
+            {surveyQuestions.map(function (question, displayQuestionIndex) {
+            var originalQuestionIndex = question.originalQuestionIndex;
+            var isVisible = isPreviewMode
+                ? currentQuestionIndex === originalQuestionIndex
+                : currentQuestionIndex === displayQuestionIndex;
+            return (isVisible && (<div>
+                            {getQuestionComponent({
+                    question: question,
+                    displayQuestionIndex: displayQuestionIndex,
+                    appearance: survey.appearance || defaultSurveyAppearance,
+                    onSubmit: function (res) {
+                        return onNextButtonClick({
+                            res: res,
+                            originalQuestionIndex: originalQuestionIndex,
+                            displayQuestionIndex: displayQuestionIndex,
+                        });
+                    },
+                })}
+                        </div>));
+        })}
         </form>);
 }
-var closeSurveyPopup = function (survey, posthog, readOnly) {
+var closeSurveyPopup = function (survey, posthog, isPreviewMode) {
     var _a;
     var _b;
-    // TODO: state management and unit tests for this would be nice
-    if (readOnly || !posthog) {
+    if (isPreviewMode || !posthog) {
         return;
     }
     posthog.capture('survey dismissed', {
@@ -280,7 +316,7 @@ export function FeedbackWidget(_a) {
                     <div className="ph-survey-widget-tab-icon"></div>
                     {((_c = survey.appearance) === null || _c === void 0 ? void 0 : _c.widgetLabel) || ''}
                 </div>)}
-            {showSurvey && (<Surveys key={'feedback-widget-survey'} posthog={posthog} survey={survey} style={styleOverrides}/>)}
+            {showSurvey && (<SurveyPopup key={'feedback-widget-survey'} posthog={posthog} survey={survey} style={styleOverrides}/>)}
         </>);
 }
 //# sourceMappingURL=surveys.jsx.map