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

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

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>