feat(calcom): add custom cal.com field

Closes: #2654

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

@@ -90,6 +90,15 @@ export const CalQuestionForm = ({
               onChange={(e) => updateQuestion(questionIdx, { calUserName: e.target.value })}
             />
           </div>
+          <Label htmlFor="calHost">Your self-hosted Cal.com instance</Label>
+          <div className="mt-2">
+            <Input
+              id="calHost"
+              name="calHost"
+              value={question.calHost}
+              onChange={(e) => updateQuestion(questionIdx, { calHost: e.target.value })}
+            />
+          </div>
         </div>
       </div>
     </form>

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,7 +44,10 @@ 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("inline", {
+      elementOrSelector: "#fb-cal-embed",
+      calLink: `https://${question.calHost}/${question.calUserName}`,
+    });
   }, [cal, question.calUserName]);
 
   return (

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

@@ -383,6 +383,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(),
 });