feat: Enable recall for welcome cards. (#5963)

Co-authored-by: Dhruwang <dhruwangjariwala18@gmail.com>

apps/web/modules/survey/components/question-form-input/components/recall-item-select.test.tsx

@@ -89,6 +89,31 @@ describe("RecallItemSelect", () => {
     expect(screen.queryByText("_File Upload Question_")).not.toBeInTheDocument();
   });
 
+  test("do not render questions if questionId is 'start' (welcome card)", async () => {
+    render(
+      <RecallItemSelect
+        localSurvey={mockSurvey}
+        questionId="start"
+        addRecallItem={mockAddRecallItem}
+        setShowRecallItemSelect={mockSetShowRecallItemSelect}
+        recallItems={mockRecallItems}
+        selectedLanguageCode="en"
+        hiddenFields={mockSurvey.hiddenFields}
+      />
+    );
+
+    expect(screen.queryByText("_Question 1_")).not.toBeInTheDocument();
+    expect(screen.queryByText("_Question 2_")).not.toBeInTheDocument();
+
+    expect(screen.getByText("_hidden1_")).toBeInTheDocument();
+    expect(screen.getByText("_hidden2_")).toBeInTheDocument();
+    expect(screen.getByText("_Variable 1_")).toBeInTheDocument();
+    expect(screen.getByText("_Variable 2_")).toBeInTheDocument();
+
+    expect(screen.queryByText("_Current Question_")).not.toBeInTheDocument();
+    expect(screen.queryByText("_File Upload Question_")).not.toBeInTheDocument();
+  });
+
   test("filters recall items based on search input", async () => {
     const user = userEvent.setup();
     render(

apps/web/modules/survey/components/question-form-input/components/recall-item-select.tsx

@@ -109,6 +109,9 @@ export const RecallItemSelect = ({
   }, [localSurvey.variables, recallItemIds]);
 
   const surveyQuestionRecallItems = useMemo(() => {
+    const isWelcomeCard = questionId === "start";
+    if (isWelcomeCard) return [];
+
     const isEndingCard = !localSurvey.questions.map((question) => question.id).includes(questionId);
     const idx = isEndingCard
       ? localSurvey.questions.length

apps/web/modules/survey/components/question-form-input/index.tsx

@@ -129,9 +129,9 @@ export const QuestionFormInput = ({
       (question &&
         (id.includes(".")
           ? // Handle nested properties
-            (question[id.split(".")[0] as keyof TSurveyQuestion] as any)?.[id.split(".")[1]]
+          (question[id.split(".")[0] as keyof TSurveyQuestion] as any)?.[id.split(".")[1]]
           : // Original behavior
-            (question[id as keyof TSurveyQuestion] as TI18nString))) ||
+          (question[id as keyof TSurveyQuestion] as TI18nString))) ||
       createI18nString("", surveyLanguageCodes)
     );
   }, [
@@ -309,7 +309,7 @@ export const QuestionFormInput = ({
               onAddFallback={() => {
                 inputRef.current?.focus();
               }}
-              isRecallAllowed={!isWelcomeCard && (id === "headline" || id === "subheader")}
+              isRecallAllowed={id === "headline" || id === "subheader"}
               usedLanguageCode={usedLanguageCode}
               render={({
                 value,
@@ -351,9 +351,8 @@ export const QuestionFormInput = ({
                         <div className="h-10 w-full"></div>
                         <div
                           ref={highlightContainerRef}
-                          className={`no-scrollbar absolute top-0 z-0 mt-0.5 flex h-10 w-full overflow-scroll whitespace-nowrap px-3 py-2 text-center text-sm text-transparent ${
+                          className={`no-scrollbar absolute top-0 z-0 mt-0.5 flex h-10 w-full overflow-scroll whitespace-nowrap px-3 py-2 text-center text-sm text-transparent ${localSurvey.languages?.length > 1 ? "pr-24" : ""
-                            localSurvey.languages?.length > 1 ? "pr-24" : ""
+                            }`}
-                          }`}
                           dir="auto"
                           key={highlightedJSX.toString()}>
                           {highlightedJSX}
@@ -380,9 +379,8 @@ export const QuestionFormInput = ({
                           maxLength={maxLength}
                           ref={inputRef}
                           onBlur={onBlur}
-                          className={`absolute top-0 text-black caret-black ${
+                          className={`absolute top-0 text-black caret-black ${localSurvey.languages?.length > 1 ? "pr-24" : ""
-                            localSurvey.languages?.length > 1 ? "pr-24" : ""
+                            } ${className}`}
-                          } ${className}`}
                           isInvalid={
                             isInvalid &&
                             text[usedLanguageCode]?.trim() === "" &&

apps/web/modules/survey/editor/components/end-screen-form.tsx

@@ -42,7 +42,7 @@ export const EndScreenForm = ({
 
   const [showEndingCardCTA, setshowEndingCardCTA] = useState<boolean>(
     endingCard.type === "endScreen" &&
-      (!!getLocalizedValue(endingCard.buttonLabel, selectedLanguageCode) || !!endingCard.buttonLink)
+    (!!getLocalizedValue(endingCard.buttonLabel, selectedLanguageCode) || !!endingCard.buttonLink)
   );
   return (
     <form>