create shuffle option select component in

packages/ui/components/ShuffleOptionSelect
which is imported in MatrixQuestionForm, MultipleChoiceQuestionForm,
RankingQuestionForm

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/MatrixQuestionForm.tsx

@@ -3,17 +3,11 @@
 import { PlusIcon, TrashIcon } from "lucide-react";
 import { createI18nString, extractLanguageCodes } from "@formbricks/lib/i18n/utils";
 import { TAttributeClass } from "@formbricks/types/attribute-classes";
-import { TI18nString, TShuffleOption, TSurvey, TSurveyMatrixQuestion } from "@formbricks/types/surveys/types";
+import { TI18nString, TSurvey, TSurveyMatrixQuestion } from "@formbricks/types/surveys/types";
 import { Button } from "@formbricks/ui/components/Button";
 import { Label } from "@formbricks/ui/components/Label";
 import { QuestionFormInput } from "@formbricks/ui/components/QuestionFormInput";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@formbricks/ui/components/Select";
+import { ShuffleOptionSelect } from "@formbricks/ui/components/ShuffleOptionSelect";
 import { isLabelValidForAllLanguages } from "../lib/validation";
 
 interface MatrixQuestionFormProps {
@@ -237,29 +231,12 @@ export const MatrixQuestionForm = ({
             </Button>
           </div>
           <div className="mt-3 flex flex-1 items-center justify-end gap-2">
-            <Select
-              defaultValue={question.shuffleOption}
-              value={question.shuffleOption}
-              onValueChange={(e: TShuffleOption) => {
-                updateQuestion(questionIdx, { shuffleOption: e });
-              }}>
-              <SelectTrigger className="w-fit space-x-2 overflow-hidden border-0 font-medium text-slate-600">
-                <SelectValue placeholder="Select ordering" />
-              </SelectTrigger>
-              <SelectContent>
-                {Object.values(shuffleOptionsTypes).map(
-                  (shuffleOptionsType) =>
-                    shuffleOptionsType.show && (
-                      <SelectItem
-                        key={shuffleOptionsType.id}
-                        value={shuffleOptionsType.id}
-                        title={shuffleOptionsType.label}>
-                        {shuffleOptionsType.label}
-                      </SelectItem>
-                    )
-                )}
-              </SelectContent>
-            </Select>
+            <ShuffleOptionSelect
+              shuffleOptionsTypes={shuffleOptionsTypes}
+              questionIdx={questionIdx}
+              updateQuestion={updateQuestion}
+              shuffleOption={question.shuffleOption}
+            />
           </div>
         </div>
       </div>

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/MultipleChoiceQuestionForm.tsx

@@ -19,13 +19,7 @@ import {
 import { Button } from "@formbricks/ui/components/Button";
 import { Label } from "@formbricks/ui/components/Label";
 import { QuestionFormInput } from "@formbricks/ui/components/QuestionFormInput";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@formbricks/ui/components/Select";
+import { ShuffleOptionSelect } from "@formbricks/ui/components/ShuffleOptionSelect";
 import { QuestionOptionChoice } from "./QuestionOptionChoice";
 
 interface OpenQuestionFormProps {
@@ -290,29 +284,12 @@ export const MultipleChoiceQuestionForm = ({
             </Button>
 
             <div className="flex flex-1 items-center justify-end gap-2">
-              <Select
-                defaultValue={question.shuffleOption}
-                value={question.shuffleOption}
-                onValueChange={(e: TShuffleOption) => {
-                  updateQuestion(questionIdx, { shuffleOption: e });
-                }}>
-                <SelectTrigger className="w-fit space-x-2 overflow-hidden border-0 font-medium text-slate-600">
-                  <SelectValue placeholder="Select ordering" />
-                </SelectTrigger>
-                <SelectContent>
-                  {Object.values(shuffleOptionsTypes).map(
-                    (shuffleOptionsType) =>
-                      shuffleOptionsType.show && (
-                        <SelectItem
-                          key={shuffleOptionsType.id}
-                          value={shuffleOptionsType.id}
-                          title={shuffleOptionsType.label}>
-                          {shuffleOptionsType.label}
-                        </SelectItem>
-                      )
-                  )}
-                </SelectContent>
-              </Select>
+              <ShuffleOptionSelect
+                questionIdx={questionIdx}
+                shuffleOption={question.shuffleOption}
+                updateQuestion={updateQuestion}
+                shuffleOptionsTypes={shuffleOptionsTypes}
+              />
             </div>
           </div>
         </div>

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/RankingQuestionForm.tsx

@@ -7,22 +7,11 @@ import { PlusIcon } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { createI18nString, extractLanguageCodes } from "@formbricks/lib/i18n/utils";
 import { TAttributeClass } from "@formbricks/types/attribute-classes";
-import {
-  TI18nString,
-  TShuffleOption,
-  TSurvey,
-  TSurveyRankingQuestion,
-} from "@formbricks/types/surveys/types";
+import { TI18nString, TSurvey, TSurveyRankingQuestion } from "@formbricks/types/surveys/types";
 import { Button } from "@formbricks/ui/components/Button";
 import { Label } from "@formbricks/ui/components/Label";
 import { QuestionFormInput } from "@formbricks/ui/components/QuestionFormInput";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@formbricks/ui/components/Select";
+import { ShuffleOptionSelect } from "@formbricks/ui/components/ShuffleOptionSelect";
 import { QuestionOptionChoice } from "./QuestionOptionChoice";
 
 interface RankingQuestionFormProps {
@@ -227,29 +216,12 @@ export const RankingQuestionForm = ({
               onClick={() => addOption()}>
               Add option
             </Button>
-            <Select
-              defaultValue={question.shuffleOption}
-              value={question.shuffleOption}
-              onValueChange={(option: TShuffleOption) => {
-                updateQuestion(questionIdx, { shuffleOption: option });
-              }}>
-              <SelectTrigger className="w-fit space-x-2 overflow-hidden border-0 font-medium text-slate-600">
-                <SelectValue placeholder="Select ordering" />
-              </SelectTrigger>
-              <SelectContent>
-                {Object.values(shuffleOptionsTypes).map(
-                  (shuffleOptionsType) =>
-                    shuffleOptionsType.show && (
-                      <SelectItem
-                        key={shuffleOptionsType.id}
-                        value={shuffleOptionsType.id}
-                        title={shuffleOptionsType.label}>
-                        {shuffleOptionsType.label}
-                      </SelectItem>
-                    )
-                )}
-              </SelectContent>
-            </Select>
+            <ShuffleOptionSelect
+              shuffleOptionsTypes={shuffleOptionsTypes}
+              updateQuestion={updateQuestion}
+              shuffleOption={question.shuffleOption}
+              questionIdx={questionIdx}
+            />
           </div>
         </div>
       </div>

packages/ui/components/ShuffleOptionSelect/index.tsx

@@ -0,0 +1,68 @@
+import {
+  TShuffleOption,
+  TSurveyMatrixQuestion,
+  TSurveyMultipleChoiceQuestion,
+  TSurveyRankingQuestion,
+} from "@formbricks/types/surveys/types";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../Select";
+
+type ShuffleOptionsTypes = {
+  none?: {
+    id: string;
+    label: string;
+    show: boolean;
+  };
+  all?: {
+    id: string;
+    label: string;
+    show: boolean;
+  };
+  exceptLast?: {
+    id: string;
+    label: string;
+    show: boolean;
+  };
+};
+
+interface ShuffleOptionSelectInterface {
+  shuffleOption: TShuffleOption | undefined;
+  updateQuestion: (
+    questionIdx: number,
+    updatedAttributes: Partial<TSurveyMatrixQuestion | TSurveyMultipleChoiceQuestion | TSurveyRankingQuestion>
+  ) => void;
+  questionIdx: number;
+  shuffleOptionsTypes: ShuffleOptionsTypes;
+}
+
+export const ShuffleOptionSelect: React.FC<ShuffleOptionSelectInterface> = ({
+  questionIdx,
+  shuffleOption,
+  updateQuestion,
+  shuffleOptionsTypes,
+}) => {
+  return (
+    <Select
+      defaultValue={shuffleOption}
+      value={shuffleOption}
+      onValueChange={(e: TShuffleOption) => {
+        updateQuestion(questionIdx, { shuffleOption: e });
+      }}>
+      <SelectTrigger className="w-fit space-x-2 overflow-hidden border-0 font-medium text-slate-600">
+        <SelectValue placeholder="Select ordering" />
+      </SelectTrigger>
+      <SelectContent>
+        {Object.values(shuffleOptionsTypes).map(
+          (shuffleOptionsType) =>
+            shuffleOptionsType.show && (
+              <SelectItem
+                key={shuffleOptionsType.id}
+                value={shuffleOptionsType.id}
+                title={shuffleOptionsType.label}>
+                {shuffleOptionsType.label}
+              </SelectItem>
+            )
+        )}
+      </SelectContent>
+    </Select>
+  );
+};