feat: UI improvements to survey editor and summary cards (#6857)

apps/web/modules/ee/quotas/components/quota-condition-builder.tsx

@@ -18,6 +18,7 @@ interface QuotaConditionBuilderProps {
   conditions: TSurveyQuotaLogic;
   onChange: (conditions: TSurveyQuotaLogic) => void;
   quotaErrors?: FieldErrors<TSurveyQuotaInput>;
+  isSubmitted?: boolean;
 }
 
 export const QuotaConditionBuilder = ({
@@ -25,6 +26,7 @@ export const QuotaConditionBuilder = ({
   conditions,
   onChange,
   quotaErrors,
+  isSubmitted,
 }: QuotaConditionBuilderProps) => {
   const { t } = useTranslation();
 
@@ -66,6 +68,7 @@ export const QuotaConditionBuilder = ({
         config={config}
         callbacks={callbacks}
         quotaErrors={quotaErrors}
+        isSubmitted={isSubmitted}
       />
     </div>
   );

apps/web/modules/ee/quotas/components/quota-modal.tsx

@@ -18,9 +18,13 @@ import {
 } from "@formbricks/types/quota";
 import { TSurvey } from "@formbricks/types/surveys/types";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
+import { replaceHeadlineRecall } from "@/lib/utils/recall";
 import { createQuotaAction, updateQuotaAction } from "@/modules/ee/quotas/actions";
 import { EndingCardSelector } from "@/modules/ee/quotas/components/ending-card-selector";
-import { getDefaultOperatorForQuestion } from "@/modules/survey/editor/lib/utils";
+import {
+  getDefaultOperatorForQuestion,
+  replaceEndingCardHeadlineRecall,
+} from "@/modules/survey/editor/lib/utils";
 import { Button } from "@/modules/ui/components/button";
 import { ConfirmationModal } from "@/modules/ui/components/confirmation-modal";
 import {
@@ -80,6 +84,15 @@ export const QuotaModal = ({
   const { t } = useTranslation();
   const [openConfirmationModal, setOpenConfirmationModal] = useState(false);
   const [openConfirmChangesInInclusionCriteria, setOpenConfirmChangesInInclusionCriteria] = useState(false);
+
+  // Transform survey to replace recall: with actual question headlines
+  const transformedSurvey = useMemo(() => {
+    let modifiedSurvey = replaceHeadlineRecall(survey, "default");
+    modifiedSurvey = replaceEndingCardHeadlineRecall(modifiedSurvey, "default");
+
+    return modifiedSurvey;
+  }, [survey]);
+
   const defaultValues = useMemo(() => {
     return {
       name: quota?.name || "",
@@ -124,7 +137,7 @@ export const QuotaModal = ({
     reset,
     watch,
     control,
-    formState: { isSubmitting, isDirty, errors, isValid },
+    formState: { isSubmitting, isDirty, errors, isValid, isSubmitted },
   } = form;
 
   // Watch form values for conditional logic
@@ -312,14 +325,17 @@ export const QuotaModal = ({
                 render={({ field }) => (
                   <FormItem>
                     <div className="space-y-4 rounded-lg bg-slate-50 p-3">
-                      <FormLabel>{t("environments.surveys.edit.quotas.inclusion_criteria")}</FormLabel>
+                      <label className="text-sm font-medium text-slate-800">
+                        {t("environments.surveys.edit.quotas.inclusion_criteria")}
+                      </label>
                       <FormControl>
                         {field.value && (
                           <QuotaConditionBuilder
-                            survey={survey}
+                            survey={transformedSurvey}
                             conditions={field.value}
                             onChange={handleConditionsChange}
                             quotaErrors={errors}
+                            isSubmitted={isSubmitted}
                           />
                         )}
                       </FormControl>