diff --git a/frontend/src/scenes/surveys/QuestionBranchingInput.tsx b/frontend/src/scenes/surveys/QuestionBranchingInput.tsx index 5e681eb236658..5260fb1f2d6f2 100644 --- 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: ( +

+ Adding branching logic will disable shuffling of questions. Are you sure you + want to continue? +

+ ), + 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 index f339e4798c97e..76fb35c4fc6e0 100644 --- 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 OmitShuffle questions } - 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: ( +

+ Enabling this option will remove your branching logic. Are you sure you want + to continue? +

+ ), + primaryButton: { + children: 'Continue', + status: 'danger', + onClick: () => { + deleteBranchingLogic() + onAppearanceChange({ ...appearance, shuffleQuestions: true }) + }, + }, + secondaryButton: { + children: 'Cancel', + }, + }) + } else { + onAppearanceChange({ ...appearance, shuffleQuestions: checked }) + } + }} checked={appearance?.shuffleQuestions} />