fix: calHost UX and validation in cal question (#2944)

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

@@ -37,6 +37,8 @@ export const CalQuestionForm = ({
   useEffect(() => {
     if (!isCalHostEnabled) {
       updateQuestion(questionIdx, { calHost: undefined });
+    } else {
+      updateQuestion(questionIdx, { calHost: question.calHost ?? "cal.com" });
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps

apps/web/app/lib/questions.tsx

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

packages/types/surveys/types.ts

@@ -854,6 +854,19 @@ export const ZSurvey = z
         }
       }
 
+      if (question.type === TSurveyQuestionTypeEnum.Cal) {
+        if (question.calHost !== undefined) {
+          const hostnameRegex = /^[a-zA-Z0-9]+(?<domain>\.[a-zA-Z0-9]+)+$/;
+          if (!hostnameRegex.test(question.calHost)) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              message: `Question ${String(questionIndex + 1)} must have a valid host name`,
+              path: ["questions", questionIndex, "calHost"],
+            });
+          }
+        }
+      }
+
       if (question.logic) {
         question.logic.forEach((logic, logicIndex) => {
           const logicConditions = ["condition", "value", "destination"] as const;