fix: first question preview in share embed modal (#2284)

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/lib/emailTemplate.tsx

@@ -10,7 +10,7 @@ import {
   Text,
 } from "@react-email/components";
 import { render } from "@react-email/render";
-import { CalendarDaysIcon } from "lucide-react";
+import { CalendarDaysIcon, UploadIcon } from "lucide-react";
 
 import { cn } from "@formbricks/lib/cn";
 import { WEBAPP_URL } from "@formbricks/lib/constants";
@@ -268,16 +268,14 @@ const EmailTemplate = ({ survey, surveyUrl, brandColor }: EmailTemplateProps) =>
             {getLocalizedValue(firstQuestion.subheader, defaultLanguageCode)}
           </Text>
           <Container className="mx-0 max-w-none">
-            {firstQuestion.choices
-              .filter((choice) => choice.id !== "other")
-              .map((choice) => (
-                <Link
-                  key={choice.id}
-                  className="mt-2 block rounded-lg border border-solid border-slate-200 bg-slate-50 p-4 text-slate-800 hover:bg-slate-100"
-                  href={`${urlWithPrefilling}${firstQuestion.id}=${choice.label}`}>
-                  {getLocalizedValue(choice.label, defaultLanguageCode)}
-                </Link>
-              ))}
+            {firstQuestion.choices.map((choice) => (
+              <Link
+                key={choice.id}
+                className="mt-2 block rounded-lg border border-solid border-slate-200 bg-slate-50 p-4 text-slate-800 hover:bg-slate-100"
+                href={`${urlWithPrefilling}${firstQuestion.id}=${getLocalizedValue(choice.label, defaultLanguageCode)}`}>
+                {getLocalizedValue(choice.label, defaultLanguageCode)}
+              </Link>
+            ))}
           </Container>
           <EmailFooter />
         </EmailTemplateWrapper>
@@ -314,12 +312,21 @@ const EmailTemplate = ({ survey, surveyUrl, brandColor }: EmailTemplateProps) =>
     case TSurveyQuestionType.Cal:
       return (
         <EmailTemplateWrapper surveyUrl={url} brandColor={brandColor}>
-          <Text className="m-0 mb-2 block p-0 text-sm font-normal leading-6 text-slate-500">
-            {getLocalizedValue(firstQuestion.subheader, defaultLanguageCode)}
-          </Text>
-          <Text className="m-0 mb-2 block p-0 text-sm font-normal leading-6 text-slate-500">
-            You have been invited to schedule a meet via cal.com Open Survey to continue{" "}
-          </Text>
+          <Container>
+            <Text className="m-0 mb-2 block p-0 text-sm font-normal leading-6 text-slate-500">
+              {getLocalizedValue(firstQuestion.subheader, defaultLanguageCode)}
+            </Text>
+            <Text className="m-0 mb-2 block p-0 text-sm font-normal leading-6 text-slate-500">
+              You have been invited to schedule a meet via cal.com.
+            </Text>
+            <EmailButton
+              className={cn(
+                "bg-brand-color mx-auto block w-max cursor-pointer appearance-none rounded-md px-6 py-3 text-sm font-medium ",
+                isLight(brandColor) ? "text-black" : "text-white"
+              )}>
+              Schedule your meeting
+            </EmailButton>
+          </Container>
           <EmailFooter />
         </EmailTemplateWrapper>
       );
@@ -339,6 +346,24 @@ const EmailTemplate = ({ survey, surveyUrl, brandColor }: EmailTemplateProps) =>
           <EmailFooter />
         </EmailTemplateWrapper>
       );
+    case TSurveyQuestionType.FileUpload:
+      return (
+        <EmailTemplateWrapper surveyUrl={url} brandColor={brandColor}>
+          <Text className="m-0 mr-8 block p-0 text-base font-semibold leading-6 text-slate-800">
+            {getLocalizedValue(firstQuestion.headline, defaultLanguageCode)}
+          </Text>
+          <Text className="m-0 block p-0 text-sm font-normal leading-6 text-slate-500">
+            {getLocalizedValue(firstQuestion.subheader, defaultLanguageCode)}
+          </Text>
+          <Section className="mt-4 flex w-full items-center justify-center rounded-lg border-2 border-dashed border-slate-300 bg-slate-50 p-5">
+            <UploadIcon className="mx-auto mb-1 block h-5 w-5" />
+            <Section>
+              <Text className="inline text-sm font-medium text-slate-500 ">Click to upload files</Text>
+            </Section>
+          </Section>
+          <EmailFooter />
+        </EmailTemplateWrapper>
+      );
   }
 };
 

apps/web/app/s/[surveyId]/lib/prefilling.ts

@@ -49,6 +49,11 @@ export const checkValidity = (question: TSurveyQuestion, answer: any, language:
           if (!question.choices.find((choice) => choice.label[language] === answer)) return false;
           return true;
         }
+
+        if (question.choices[question.choices.length - 1].label[language] === answer) {
+          return false;
+        }
+
         return true;
       }
       case TSurveyQuestionType.MultipleChoiceMulti: {

packages/surveys/src/components/general/QuestionConditional.tsx

@@ -47,6 +47,7 @@ export default function QuestionConditional({
 }: QuestionConditionalProps) {
   return question.type === TSurveyQuestionType.OpenText ? (
     <OpenTextQuestion
+      key={question.id}
       question={question}
       value={value}
       onChange={onChange}
@@ -61,6 +62,7 @@ export default function QuestionConditional({
     />
   ) : question.type === TSurveyQuestionType.MultipleChoiceSingle ? (
     <MultipleChoiceSingleQuestion
+      key={question.id}
       question={question}
       value={value}
       onChange={onChange}
@@ -75,6 +77,7 @@ export default function QuestionConditional({
     />
   ) : question.type === TSurveyQuestionType.MultipleChoiceMulti ? (
     <MultipleChoiceMultiQuestion
+      key={question.id}
       question={question}
       value={value}
       onChange={onChange}
@@ -89,6 +92,7 @@ export default function QuestionConditional({
     />
   ) : question.type === TSurveyQuestionType.NPS ? (
     <NPSQuestion
+      key={question.id}
       question={question}
       value={value}
       onChange={onChange}
@@ -103,6 +107,7 @@ export default function QuestionConditional({
     />
   ) : question.type === TSurveyQuestionType.CTA ? (
     <CTAQuestion
+      key={question.id}
       question={question}
       value={value}
       onChange={onChange}
@@ -117,6 +122,7 @@ export default function QuestionConditional({
     />
   ) : question.type === TSurveyQuestionType.Rating ? (
     <RatingQuestion
+      key={question.id}
       question={question}
       value={value}
       onChange={onChange}
@@ -131,6 +137,7 @@ export default function QuestionConditional({
     />
   ) : question.type === TSurveyQuestionType.Consent ? (
     <ConsentQuestion
+      key={question.id}
       question={question}
       value={value}
       onChange={onChange}
@@ -145,6 +152,7 @@ export default function QuestionConditional({
     />
   ) : question.type === TSurveyQuestionType.Date ? (
     <DateQuestion
+      key={question.id}
       question={question}
       value={value}
       onChange={onChange}
@@ -159,6 +167,7 @@ export default function QuestionConditional({
     />
   ) : question.type === TSurveyQuestionType.PictureSelection ? (
     <PictureSelectionQuestion
+      key={question.id}
       question={question}
       value={value}
       onChange={onChange}
@@ -173,6 +182,7 @@ export default function QuestionConditional({
     />
   ) : question.type === TSurveyQuestionType.FileUpload ? (
     <FileUploadQuestion
+      key={question.id}
       surveyId={surveyId}
       question={question}
       value={value}
@@ -189,6 +199,7 @@ export default function QuestionConditional({
     />
   ) : question.type === TSurveyQuestionType.Cal ? (
     <CalQuestion
+      key={question.id}
       question={question}
       value={value}
       onChange={onChange}

packages/surveys/src/components/questions/MultipleChoiceSingleQuestion.tsx

@@ -62,10 +62,20 @@ export default function MultipleChoiceSingleQuestion({
   );
 
   useEffect(() => {
+    if (isFirstQuestion && !value) {
+      const prefillAnswer = new URLSearchParams(window.location.search).get(question.id);
+      if (prefillAnswer) {
+        if (otherOption && prefillAnswer === getLocalizedValue(otherOption.label, languageCode)) {
+          setOtherSelected(true);
+          return;
+        }
+      }
+    }
+
     const isOtherSelected =
-      value !== undefined && !question.choices.some((choice) => choice.label[languageCode] === value);
+      value !== undefined && !questionChoices.some((choice) => choice.label[languageCode] === value);
     setOtherSelected(isOtherSelected);
-  }, [question.id, question.choices, value, languageCode]);
+  }, [isFirstQuestion, languageCode, otherOption, question.id, questionChoices, value]);
 
   useEffect(() => {
     // Scroll to the bottom of choices container and focus on 'otherSpecify' input when 'otherSelected' is true