fix: placeholder

Closes: #2654

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/CalQuestionForm.tsx

@@ -1,8 +1,10 @@
 import { PlusIcon } from "lucide-react";
+import { useEffect, useState } from "react";
 import { createI18nString, extractLanguageCodes } from "@formbricks/lib/i18n/utils";
 import { TAttributeClass } from "@formbricks/types/attributeClasses";
 import { TSurvey, TSurveyCalQuestion } from "@formbricks/types/surveys";
 import { Button } from "@formbricks/ui/Button";
+import { Checkbox } from "@formbricks/ui/Checkbox";
 import { Input } from "@formbricks/ui/Input";
 import { Label } from "@formbricks/ui/Label";
 import { QuestionFormInput } from "@formbricks/ui/QuestionFormInput";
@@ -30,6 +32,15 @@ export const CalQuestionForm = ({
   attributeClasses,
 }: CalQuestionFormProps): JSX.Element => {
   const surveyLanguageCodes = extractLanguageCodes(localSurvey.languages);
+  const [isCalHostEnabled, setIsCalHostEnabled] = useState(!!question.calHost);
+
+  useEffect(() => {
+    if (!isCalHostEnabled) {
+      updateQuestion(questionIdx, { calHost: undefined });
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isCalHostEnabled]);
 
   return (
     <form>
@@ -80,15 +91,41 @@ export const CalQuestionForm = ({
             Add Description
           </Button>
         )}
-        <div className="mt-3">
+        <div className="mt-3 flex flex-col gap-4">
-          <Label htmlFor="calUserName">Add your Cal.com username or username/event</Label>
+          <div className="flex flex-col gap-3">
-          <div className="mt-2">
+            <Label htmlFor="calUserName">Add your Cal.com username or username/event</Label>
-            <Input
+            <div>
-              id="calUserName"
+              <Input
-              name="calUserName"
+                id="calUserName"
-              value={question.calUserName}
+                name="calUserName"
-              onChange={(e) => updateQuestion(questionIdx, { calUserName: e.target.value })}
+                value={question.calUserName}
-            />
+                onChange={(e) => updateQuestion(questionIdx, { calUserName: e.target.value })}
+              />
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-4">
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="calHost"
+                checked={isCalHostEnabled}
+                onCheckedChange={(checked: boolean) => setIsCalHostEnabled(checked)}
+              />
+              <Label htmlFor="calHost">Do you have a self-hosted Cal.com instance?</Label>
+            </div>
+
+            {isCalHostEnabled && (
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="calHost">Enter the hostname of your self-hosted Cal.com instance</Label>
+                <Input
+                  id="calHost"
+                  name="calHost"
+                  placeholder="cal.com"
+                  value={question.calHost}
+                  onChange={(e) => updateQuestion(questionIdx, { calHost: e.target.value })}
+                />
+              </div>
+            )}
           </div>
         </div>
       </div>

apps/web/app/lib/questions.tsx

@@ -185,6 +185,7 @@ export const questionTypes: TQuestion[] = [
     preset: {
       headline: { default: "Schedule a call with me" },
       calUserName: "rick/get-rick-rolled",
+      calHost: "cal.com",
     } as Partial<TSurveyCalQuestion>,
   },
   {

packages/lib/i18n/i18n.mock.ts

@@ -228,6 +228,7 @@ export const mockCalQuestion: TSurveyCalQuestion = {
     default: "Skip",
   },
   calUserName: "rick/get-rick-rolled",
+  calHost: "cal.com",
   id: "o3bnux6p42u9ew9d02l14r26",
   type: TSurveyQuestionTypeEnum.Cal,
   isDraft: true,

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

@@ -44,8 +44,12 @@ export const CalEmbed = ({ question, onSuccessfulBooking }: CalEmbedProps) => {
   useEffect(() => {
     // remove any existing cal-inline elements
     document.querySelectorAll("cal-inline").forEach((el) => el.remove());
-    cal("inline", { elementOrSelector: "#fb-cal-embed", calLink: question.calUserName });
+    cal("init", { calOrigin: question.calHost ? `https://${question.calHost}` : "https://cal.com" });
-  }, [cal, question.calUserName]);
+    cal("inline", {
+      elementOrSelector: "#fb-cal-embed",
+      calLink: question.calUserName,
+    });
+  }, [cal, question.calHost, question.calUserName]);
 
   return (
     <div className="fb-relative fb-mt-4 fb-overflow-auto">

packages/types/LegacySurvey.ts

@@ -136,6 +136,7 @@ export type TLegacySurveyFileUploadQuestion = z.infer<typeof ZLegacySurveyFileUp
 export const ZLegacySurveyCalQuestion = ZLegacySurveyQuestionBase.extend({
   type: z.literal(TSurveyQuestionTypeEnum.Cal),
   calUserName: z.string(),
+  calHost: z.string().optional(),
   logic: z.array(ZSurveyCalLogic).optional(),
 });
 

packages/types/surveys.ts

@@ -385,6 +385,7 @@ export type TSurveyFileUploadQuestion = z.infer<typeof ZSurveyFileUploadQuestion
 export const ZSurveyCalQuestion = ZSurveyQuestionBase.extend({
   type: z.literal(TSurveyQuestionTypeEnum.Cal),
   calUserName: z.string(),
+  calHost: z.string().optional(),
   logic: z.array(ZSurveyCalLogic).optional(),
 });