diff --git a/frontend/__snapshots__/exporter-exporter--funnel-historical-trends-insight--dark.png b/frontend/__snapshots__/exporter-exporter--funnel-historical-trends-insight--dark.png new file mode 100644 index 0000000000000..f427261f0c801 Binary files /dev/null and b/frontend/__snapshots__/exporter-exporter--funnel-historical-trends-insight--dark.png differ diff --git a/frontend/__snapshots__/exporter-exporter--funnel-historical-trends-insight--light.png b/frontend/__snapshots__/exporter-exporter--funnel-historical-trends-insight--light.png new file mode 100644 index 0000000000000..fa79b1b313e1d Binary files /dev/null and b/frontend/__snapshots__/exporter-exporter--funnel-historical-trends-insight--light.png differ diff --git a/frontend/src/scenes/surveys/SurveyEdit.tsx b/frontend/src/scenes/surveys/SurveyEdit.tsx index c839daa5b7313..9b0372a81a91c 100644 --- a/frontend/src/scenes/surveys/SurveyEdit.tsx +++ b/frontend/src/scenes/surveys/SurveyEdit.tsx @@ -8,6 +8,7 @@ import { LemonButton, LemonCheckbox, LemonCollapse, + LemonDialog, LemonDivider, LemonInput, LemonSelect, @@ -51,6 +52,7 @@ export default function SurveyEdit(): JSX.Element { targetingFlagFilters, showSurveyRepeatSchedule, schedule, + hasBranchingLogic, } = useValues(surveyLogic) const { setSurveyValue, @@ -59,6 +61,7 @@ export default function SurveyEdit(): JSX.Element { setSelectedSection, setFlagPropertyErrors, setSchedule, + deleteBranchingLogic, } = useActions(surveyLogic) const { surveysMultipleQuestionsAvailable, surveysRecurringScheduleAvailable, surveysEventsAvailable } = useValues(surveysLogic) @@ -171,10 +174,37 @@ export default function SurveyEdit(): JSX.Element { { if (over && active.id !== over.id) { - onSortEnd({ - oldIndex: sortedItemIds.indexOf(active.id.toString()), - newIndex: sortedItemIds.indexOf(over.id.toString()), - }) + const finishDrag = (): void => + onSortEnd({ + oldIndex: sortedItemIds.indexOf(active.id.toString()), + newIndex: sortedItemIds.indexOf(over.id.toString()), + }) + + if (hasBranchingLogic) { + LemonDialog.open({ + title: 'Your survey has active branching logic', + description: ( +

+ Rearranging questions will remove your branching logic. + Are you sure you want to continue? +

+ ), + + primaryButton: { + children: 'Continue', + status: 'danger', + onClick: () => { + deleteBranchingLogic() + finishDrag() + }, + }, + secondaryButton: { + children: 'Cancel', + }, + }) + } else { + finishDrag() + } } }} > @@ -226,14 +256,48 @@ export default function SurveyEdit(): JSX.Element { icon={} data-attr="delete-survey-confirmation" onClick={(e) => { - e.stopPropagation() - setSelectedPageIndex( - survey.questions.length - 1 - ) - setSurveyValue('appearance', { - ...survey.appearance, - displayThankYouMessage: false, - }) + const deleteConfirmationMessage = + (): void => { + e.stopPropagation() + setSelectedPageIndex( + survey.questions.length - + 1 + ) + setSurveyValue('appearance', { + ...survey.appearance, + displayThankYouMessage: + false, + }) + } + + if (hasBranchingLogic) { + LemonDialog.open({ + title: 'Your survey has active branching logic', + description: ( +

+ Deleting the + confirmation message + will remove your + branching logic. Are + you sure you want to + continue? +

+ ), + primaryButton: { + children: 'Continue', + status: 'danger', + onClick: () => { + deleteBranchingLogic() + deleteConfirmationMessage() + }, + }, + secondaryButton: { + children: 'Cancel', + }, + }) + } else { + deleteConfirmationMessage() + } }} tooltipPlacement="top-end" /> diff --git a/frontend/src/scenes/surveys/SurveyEditQuestionRow.tsx b/frontend/src/scenes/surveys/SurveyEditQuestionRow.tsx index e1b24b1bea182..c6043bfc6ae3d 100644 --- a/frontend/src/scenes/surveys/SurveyEditQuestionRow.tsx +++ b/frontend/src/scenes/surveys/SurveyEditQuestionRow.tsx @@ -4,7 +4,7 @@ import { DraggableSyntheticListeners } from '@dnd-kit/core' import { useSortable } from '@dnd-kit/sortable' import { CSS } from '@dnd-kit/utilities' import { IconPlusSmall, IconTrash } from '@posthog/icons' -import { LemonButton, LemonCheckbox, LemonInput, LemonSelect } from '@posthog/lemon-ui' +import { LemonButton, LemonCheckbox, LemonDialog, LemonInput, LemonSelect } from '@posthog/lemon-ui' import { useActions, useValues } from 'kea' import { Group } from 'kea-forms' import { FEATURE_FLAGS } from 'lib/constants' @@ -38,6 +38,8 @@ export function SurveyEditQuestionHeader({ setSelectedPageIndex, setSurveyValue, }: SurveyQuestionHeaderProps): JSX.Element { + const { hasBranchingLogic } = useValues(surveyLogic) + const { deleteBranchingLogic } = useActions(surveyLogic) const { setNodeRef, attributes, transform, transition, listeners, isDragging } = useSortable({ id: index.toString(), }) @@ -71,12 +73,39 @@ export function SurveyEditQuestionHeader({ icon={} data-attr={`delete-survey-question-${index}`} onClick={(e) => { - e.stopPropagation() - setSelectedPageIndex(index <= 0 ? 0 : index - 1) - setSurveyValue( - 'questions', - survey.questions.filter((_, i) => i !== index) - ) + const deleteQuestion = (): void => { + e.stopPropagation() + setSelectedPageIndex(index <= 0 ? 0 : index - 1) + setSurveyValue( + 'questions', + survey.questions.filter((_, i) => i !== index) + ) + } + + if (hasBranchingLogic) { + LemonDialog.open({ + title: 'Your survey has active branching logic', + description: ( +

+ Deleting the question will remove your branching logic. Are you sure you want to + continue? +

+ ), + primaryButton: { + children: 'Continue', + status: 'danger', + onClick: () => { + deleteBranchingLogic() + deleteQuestion() + }, + }, + secondaryButton: { + children: 'Cancel', + }, + }) + } else { + deleteQuestion() + } }} tooltipPlacement="top-end" /> diff --git a/frontend/src/scenes/surveys/surveyLogic.tsx b/frontend/src/scenes/surveys/surveyLogic.tsx index 62948bdc12a87..2c7f48fd12ea9 100644 --- a/frontend/src/scenes/surveys/surveyLogic.tsx +++ b/frontend/src/scenes/surveys/surveyLogic.tsx @@ -170,6 +170,7 @@ export const surveyLogic = kea([ specificQuestionIndex, }), resetBranchingForQuestion: (questionIndex) => ({ questionIndex }), + deleteBranchingLogic: true, archiveSurvey: true, setWritingHTMLDescription: (writingHTML: boolean) => ({ writingHTML }), setSurveyTemplateValues: (template: any) => ({ template }), @@ -760,6 +761,17 @@ export const surveyLogic = kea([ questions: newQuestions, } }, + deleteBranchingLogic: (state) => { + const newQuestions = [...state.questions] + newQuestions.forEach((question) => { + delete question.branching + }) + + return { + ...state, + questions: newQuestions, + } + }, }, ], selectedPageIndex: [ @@ -1094,6 +1106,11 @@ export const surveyLogic = kea([ return cycleDetected }, ], + hasBranchingLogic: [ + (s) => [s.survey], + (survey) => + survey.questions.some((question) => question.branching && Object.keys(question.branching).length > 0), + ], }), forms(({ actions, props, values }) => ({ survey: {