feat: Placeholder input for contact and address question (#4549)

Co-authored-by: pandeymangg <anshuman.pandey9999@gmail.com>

apps/web/modules/ee/multi-language-surveys/components/language-indicator.tsx

@@ -25,7 +25,7 @@ export function LanguageIndicator({
   const languageDropdownRef = useRef(null);
 
   const changeLanguage = (language: TSurveyLanguage) => {
-    setSelectedLanguageCode(language.language.code);
+    setSelectedLanguageCode(language.default ? "default" : language.language.code);
     if (setFirstRender) {
       //for lexical editor
       setFirstRender(true);

apps/web/modules/surveys/components/QuestionFormInput/index.tsx

@@ -148,7 +148,12 @@ export const QuestionFormInput = ({
     }
 
     return (
-      (question && (question[id as keyof TSurveyQuestion] as TI18nString)) ||
+      (question &&
+        (id.includes(".")
+          ? // Handle nested properties
+            (question[id.split(".")[0] as keyof TSurveyQuestion] as any)?.[id.split(".")[1]]
+          : // Original behavior
+            (question[id as keyof TSurveyQuestion] as TI18nString))) ||
       createI18nString("", surveyLanguageCodes)
     );
   }, [
@@ -340,10 +345,22 @@ export const QuestionFormInput = ({
   const updateQuestionDetails = useCallback(
     (translatedText: TI18nString) => {
       if (updateQuestion) {
-        updateQuestion(questionIdx, { [id]: translatedText });
+        // Handle nested properties if id contains a dot
+        if (id.includes(".")) {
+          const [parent, child] = id.split(".");
+          updateQuestion(questionIdx, {
+            [parent]: {
+              ...question[parent],
+              [child]: translatedText,
+            },
+          });
+        } else {
+          // Original behavior for non-nested properties
+          updateQuestion(questionIdx, { [id]: translatedText });
+        }
       }
     },
-    [id, questionIdx, updateQuestion]
+    [id, questionIdx, updateQuestion, question]
   );
 
   const handleUpdate = useCallback(

apps/web/modules/ui/components/question-toggle-table/index.tsx

@@ -1,5 +1,13 @@
+import { QuestionFormInput } from "@/modules/surveys/components/QuestionFormInput";
 import { Switch } from "@/modules/ui/components/switch";
 import { useTranslations } from "next-intl";
+import {
+  TI18nString,
+  TSurvey,
+  TSurveyAddressQuestion,
+  TSurveyContactInfoQuestion,
+} from "@formbricks/types/surveys/types";
+import { TUserLocale } from "@formbricks/types/user";
 
 interface QuestionToggleTableProps {
   type: "address" | "contact";
@@ -8,48 +16,75 @@ interface QuestionToggleTableProps {
     show: boolean;
     id: string;
     label: string;
+    placeholder: TI18nString;
   }[];
-  onShowToggle: (
-    field: {
-      id: string;
-      required: boolean;
-      show: boolean;
-    },
-    show: boolean
-  ) => void;
-  onRequiredToggle: (
-    field: {
-      id: string;
-      show: boolean;
-      required: boolean;
-    },
-    required: boolean
+  localSurvey: TSurvey;
+  questionIdx: number;
+  isInvalid: boolean;
+  updateQuestion: (
+    questionIdx: number,
+    updatedAttributes: Partial<TSurveyContactInfoQuestion | TSurveyAddressQuestion>
   ) => void;
+  selectedLanguageCode: string;
+  setSelectedLanguageCode: (languageCode: string) => void;
+  locale: TUserLocale;
 }
 
 export const QuestionToggleTable = ({
   type,
   fields,
-  onShowToggle,
-  onRequiredToggle,
+  localSurvey,
+  questionIdx,
+  isInvalid,
+  updateQuestion,
+  selectedLanguageCode,
+  setSelectedLanguageCode,
+  locale,
 }: QuestionToggleTableProps) => {
+  const onShowToggle = (
+    field: { id: string; show: boolean; required: boolean; placeholder: TI18nString },
+    show: boolean
+  ) => {
+    updateQuestion(questionIdx, {
+      [field.id]: {
+        show,
+        required: field.required,
+        placeholder: field.placeholder,
+      },
+    });
+  };
+
+  const onRequiredToggle = (
+    field: { id: string; show: boolean; required: boolean; placeholder: TI18nString },
+    required: boolean
+  ) => {
+    updateQuestion(questionIdx, {
+      [field.id]: {
+        show: field.show,
+        required,
+        placeholder: field.placeholder,
+      },
+    });
+  };
+
   const t = useTranslations();
   return (
-    <table className="mt-4 w-1/2 table-fixed">
+    <table className="mt-4 w-full table-fixed">
       <thead>
         <tr className="text-left text-slate-800">
-          <th className="w-1/2 text-sm font-semibold">
+          <th className="w-1/4 text-sm font-semibold">
             {type === "address"
               ? t("environments.surveys.edit.address_fields")
               : t("environments.surveys.edit.contact_fields")}
           </th>
-          <th className="w-1/4 text-sm font-semibold">{t("common.show")}</th>
-          <th className="w-1/4 text-sm font-semibold">{t("environments.surveys.edit.required")}</th>
+          <th className="w-1/6 text-sm font-semibold">{t("common.show")}</th>
+          <th className="w-1/6 text-sm font-semibold">{t("environments.surveys.edit.required")}</th>
+          <th className="text-sm font-semibold">{t("common.placeholder")}</th>
         </tr>
       </thead>
       <tbody>
         {fields.map((field) => (
-          <tr className="text-slate-900">
+          <tr className="text-slate-900" key={field.id}>
             <td className="py-2 text-sm">{field.label}</td>
             <td className="py-">
               <Switch
@@ -72,6 +107,21 @@ export const QuestionToggleTable = ({
                 disabled={!field.show}
               />
             </td>
+            <td className="py-2">
+              <QuestionFormInput
+                id={`${field.id}.placeholder`}
+                label={""}
+                value={field.placeholder}
+                localSurvey={localSurvey}
+                questionIdx={questionIdx}
+                isInvalid={isInvalid}
+                updateQuestion={updateQuestion}
+                selectedLanguageCode={selectedLanguageCode}
+                setSelectedLanguageCode={setSelectedLanguageCode}
+                contactAttributeKeys={[]}
+                locale={locale}
+              />
+            </td>
           </tr>
         ))}
       </tbody>