feat: add picture selection support to response filters (#2105)

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponsePage.tsx

@@ -53,7 +53,10 @@ const ResponsePage = ({
 
   const { selectedFilter, dateRange, resetState } = useResponseFilter();
 
-  const filters = useMemo(() => getFormattedFilters(selectedFilter, dateRange), [selectedFilter, dateRange]);
+  const filters = useMemo(
+    () => getFormattedFilters(survey, selectedFilter, dateRange),
+    [survey, selectedFilter, dateRange]
+  );
 
   const searchParams = useSearchParams();
 

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/CustomFilter.tsx

@@ -86,7 +86,10 @@ const CustomFilter = ({ environmentTags, attributes, survey }: CustomFilterProps
     setSelectedOptions({ questionFilterOptions, questionOptions });
   }, [survey, setSelectedOptions, environmentTags, attributes]);
 
-  const filters = useMemo(() => getFormattedFilters(selectedFilter, dateRange), [selectedFilter, dateRange]);
+  const filters = useMemo(
+    () => getFormattedFilters(survey, selectedFilter, dateRange),
+    [survey, selectedFilter, dateRange]
+  );
 
   const datePickerRef = useRef<HTMLDivElement>(null);
 

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionFilterComboBox.tsx

@@ -44,7 +44,9 @@ const QuestionFilterComboBox = ({
 
   // multiple when question type is multi selection
   const isMultiple =
-    type === TSurveyQuestionType.MultipleChoiceMulti || type === TSurveyQuestionType.MultipleChoiceSingle;
+    type === TSurveyQuestionType.MultipleChoiceMulti ||
+    type === TSurveyQuestionType.MultipleChoiceSingle ||
+    type === TSurveyQuestionType.PictureSelection;
 
   // when question type is multi selection so we remove the option from the options which has been already selected
   const options = isMultiple

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionsComboBox.tsx

@@ -5,6 +5,7 @@ import {
   CursorArrowRippleIcon,
   HashtagIcon,
   ListBulletIcon,
+  PhotoIcon,
   QuestionMarkCircleIcon,
   QueueListIcon,
   StarIcon,
@@ -60,6 +61,8 @@ const SelectedCommandItem = ({ label, questionType, type }: Partial<QuestionOpti
           return <NetPromoterScoreIcon width={18} height={18} className="text-white" />;
         case TSurveyQuestionType.Consent:
           return <CheckIcon width={18} height={18} className="text-white" />;
+        case TSurveyQuestionType.PictureSelection:
+          return <PhotoIcon width={18} className="text-white" />;
       }
     }
     if (type === OptionsType.ATTRIBUTES) {

apps/web/app/lib/surveys/surveys.ts

@@ -23,6 +23,7 @@ const conditionOptions = {
   rating: ["Is equal to", "Is less than", "Is more than", "Submitted", "Skipped"],
   cta: ["is"],
   tags: ["is"],
+  pictureSelection: ["Includes all", "Includes either"],
   userAttributes: ["Equals", "Not equals"],
   consent: ["is"],
 };
@@ -72,6 +73,13 @@ export const generateQuestionAndFilterOptions = (
           filterComboBoxOptions: q?.choices ? q?.choices?.map((c) => c?.label) : [""],
           id: q.id,
         });
+      } else if (q.type === TSurveyQuestionType.PictureSelection) {
+        questionFilterOptions.push({
+          type: q.type,
+          filterOptions: conditionOptions[q.type],
+          filterComboBoxOptions: q?.choices ? q?.choices?.map((_, idx) => `Picture ${idx + 1}`) : [""],
+          id: q.id,
+        });
       } else {
         questionFilterOptions.push({
           type: q.type,
@@ -123,6 +131,7 @@ export const generateQuestionAndFilterOptions = (
 
 // get the formatted filter expression to fetch filtered responses
 export const getFormattedFilters = (
+  survey: TSurvey,
   selectedFilter: SelectedFilterValue,
   dateRange: DateRange
 ): TResponseFilterCriteria => {
@@ -249,6 +258,34 @@ export const getFormattedFilters = (
             };
           }
         }
+        case TSurveyQuestionType.PictureSelection: {
+          const questionId = questionType.id ?? "";
+          const question = survey.questions.find((q) => q.id === questionId);
+
+          if (
+            question?.type !== TSurveyQuestionType.PictureSelection ||
+            !Array.isArray(filterType.filterComboBoxValue)
+          ) {
+            return;
+          }
+
+          const selectedOptions = filterType.filterComboBoxValue.map((option) => {
+            const index = parseInt(option.split(" ")[1]);
+            return question?.choices[index - 1].id;
+          });
+
+          if (filterType.filterValue === "Includes all") {
+            filters.data[questionId] = {
+              op: "includesAll",
+              value: selectedOptions,
+            };
+          } else if (filterType.filterValue === "Includes either") {
+            filters.data[questionId] = {
+              op: "includesOne",
+              value: selectedOptions,
+            };
+          }
+        }
       }
     });
   }