feat(surveys branching): handle question shuffling (#23116)

PostHog · Jun 21, 2024 · c8d2c71 · c8d2c71
1 parent 4757ff1
commit c8d2c71
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 11 deletions.
diff --git a/frontend/src/scenes/surveys/QuestionBranchingInput.tsx b/frontend/src/scenes/surveys/QuestionBranchingInput.tsx
@@ -1,6 +1,6 @@
 import './EditSurvey.scss'
 
-import { LemonSelect } from '@posthog/lemon-ui'
+import { LemonDialog, LemonSelect } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { LemonField } from 'lib/lemon-ui/LemonField'
 import { truncate } from 'lib/utils'
@@ -17,7 +17,7 @@ export function QuestionBranchingInput({
     question: RatingSurveyQuestion | MultipleSurveyQuestion
 }): JSX.Element {
     const { survey, getBranchingDropdownValue } = useValues(surveyLogic)
-    const { setQuestionBranchingType } = useActions(surveyLogic)
+    const { setQuestionBranchingType, setSurveyValue } = useActions(surveyLogic)
 
     const availableNextQuestions = survey.questions
         .map((question, questionIndex) => ({
@@ -37,12 +37,39 @@ export function QuestionBranchingInput({
                     value={branchingDropdownValue}
                     data-attr={`branching-question-${questionIndex}`}
                     onSelect={(type) => {
-                        let specificQuestionIndex
-                        if (type.startsWith(SurveyQuestionBranchingType.SpecificQuestion)) {
-                            specificQuestionIndex = parseInt(type.split(':')[1])
-                            type = SurveyQuestionBranchingType.SpecificQuestion
+                        const handleSelect = (): void => {
+                            let specificQuestionIndex
+                            if (type.startsWith(SurveyQuestionBranchingType.SpecificQuestion)) {
+                                specificQuestionIndex = parseInt(type.split(':')[1])
+                                type = SurveyQuestionBranchingType.SpecificQuestion
+                            }
+                            setQuestionBranchingType(questionIndex, type, specificQuestionIndex)
+                        }
+
+                        if (survey.appearance.shuffleQuestions) {
+                            LemonDialog.open({
+                                title: 'Your survey has question shuffling enabled',
+                                description: (
+                                    <p className="py-2">
+                                        Adding branching logic will disable shuffling of questions. Are you sure you
+                                        want to continue?
+                                    </p>
+                                ),
+                                primaryButton: {
+                                    children: 'Continue',
+                                    status: 'danger',
+                                    onClick: () => {
+                                        setSurveyValue('appearance', { ...survey.appearance, shuffleQuestions: false })
+                                        handleSelect()
+                                    },
+                                },
+                                secondaryButton: {
+                                    children: 'Cancel',
+                                },
+                            })
+                        } else {
+                            handleSelect()
                         }
-                        setQuestionBranchingType(questionIndex, type, specificQuestionIndex)
                     }}
                     options={[
                         ...(questionIndex < survey.questions.length - 1

diff --git a/frontend/src/scenes/surveys/SurveyCustomization.tsx b/frontend/src/scenes/surveys/SurveyCustomization.tsx
@@ -1,5 +1,5 @@
-import { LemonButton, LemonCheckbox, LemonInput, LemonSelect } from '@posthog/lemon-ui'
-import { useValues } from 'kea'
+import { LemonButton, LemonCheckbox, LemonDialog, LemonInput, LemonSelect } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
 import { PayGateMini } from 'lib/components/PayGateMini/PayGateMini'
 import { upgradeModalLogic } from 'lib/components/UpgradeModal/upgradeModalLogic'
 import { surveyLogic } from 'scenes/surveys/surveyLogic'
@@ -26,7 +26,8 @@ interface WidgetCustomizationProps extends Omit<CustomizationProps, 'surveyQuest
 
 export function Customization({ appearance, surveyQuestionItem, onAppearanceChange }: CustomizationProps): JSX.Element {
     const { surveysStylingAvailable } = useValues(surveysLogic)
-    const { surveyShufflingQuestionsAvailable } = useValues(surveyLogic)
+    const { surveyShufflingQuestionsAvailable, hasBranchingLogic } = useValues(surveyLogic)
+    const { deleteBranchingLogic } = useActions(surveyLogic)
     const surveyShufflingQuestionsDisabledReason = surveyShufflingQuestionsAvailable
         ? ''
         : 'Please add more than one question to the survey to enable shuffling questions'
@@ -130,7 +131,34 @@ export function Customization({ appearance, surveyQuestionItem, onAppearanceChan
                                 <span>Shuffle questions</span>
                             </div>
                         }
-                        onChange={(checked) => onAppearanceChange({ ...appearance, shuffleQuestions: checked })}
+                        onChange={(checked) => {
+                            if (checked && hasBranchingLogic) {
+                                onAppearanceChange({ ...appearance, shuffleQuestions: false })
+
+                                LemonDialog.open({
+                                    title: 'Your survey has active branching logic',
+                                    description: (
+                                        <p className="py-2">
+                                            Enabling this option will remove your branching logic. Are you sure you want
+                                            to continue?
+                                        </p>
+                                    ),
+                                    primaryButton: {
+                                        children: 'Continue',
+                                        status: 'danger',
+                                        onClick: () => {
+                                            deleteBranchingLogic()
+                                            onAppearanceChange({ ...appearance, shuffleQuestions: true })
+                                        },
+                                    },
+                                    secondaryButton: {
+                                        children: 'Cancel',
+                                    },
+                                })
+                            } else {
+                                onAppearanceChange({ ...appearance, shuffleQuestions: checked })
+                            }
+                        }}
                         checked={appearance?.shuffleQuestions}
                     />
                 </div>