fix(surveys): Show shuffle questions only if survey has multiple ques…

…tions (#23025)

We were showing the shuffle questions checkbox option even if there was only one question in the survey.
Changed this to use a selector that checks for the number of questions in a survey to enable/disable the shuffle questions checkbox.

frontend/src/scenes/surveys/SurveyCustomization.tsx

@@ -2,6 +2,7 @@ import { LemonButton, LemonCheckbox, LemonInput, LemonSelect } from '@posthog/le
 import { useValues } from 'kea'
 import { PayGateMini } from 'lib/components/PayGateMini/PayGateMini'
 import { upgradeModalLogic } from 'lib/components/UpgradeModal/upgradeModalLogic'
+import { surveyLogic } from 'scenes/surveys/surveyLogic'
 
 import {
     AvailableFeature,
@@ -25,6 +26,10 @@ interface WidgetCustomizationProps extends Omit<CustomizationProps, 'surveyQuest
 
 export function Customization({ appearance, surveyQuestionItem, onAppearanceChange }: CustomizationProps): JSX.Element {
     const { surveysStylingAvailable } = useValues(surveysLogic)
+    const { surveyShufflingQuestionsAvailable } = useValues(surveyLogic)
+    const surveyShufflingQuestionsDisabledReason = surveyShufflingQuestionsAvailable
+        ? ''
+        : 'Please add more than one question to the survey to enable shuffling questions'
     const { guardAvailableFeature } = useValues(upgradeModalLogic)
     return (
         <>
@@ -117,9 +122,9 @@ export function Customization({ appearance, surveyQuestionItem, onAppearanceChan
                         checked={appearance?.whiteLabel}
                     />
                 </div>
-
                 <div className="mt-2">
                     <LemonCheckbox
+                        disabledReason={surveyShufflingQuestionsDisabledReason}
                         label={
                             <div className="flex items-center">
                                 <span>Shuffle questions</span>

frontend/src/scenes/surveys/surveyLogic.tsx

@@ -854,6 +854,12 @@ export const surveyLogic = kea<surveyLogicType>([
                 return !!(survey.start_date && !survey.end_date)
             },
         ],
+        surveyShufflingQuestionsAvailable: [
+            (s) => [s.survey],
+            (survey: Survey): boolean => {
+                return survey.questions.length > 1
+            },
+        ],
         showSurveyRepeatSchedule: [(s) => [s.schedule], (schedule: ScheduleType) => schedule == 'recurring'],
         descriptionContentType: [
             (s) => [s.survey],