mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-01-23 10:32:25 -06:00
Code Issues Packages Projects Releases 119 Wiki Activity

style: Use AdvancedOptionToggle in schedule a call form (#2925)

Browse Source 
Signed-off-by: Rakshit Bhardwaj <157364563+Acksout@users.noreply.github.com>
Co-authored-by: Johannes <johannes@formbricks.com>
This commit is contained in:
Rakshit Bhardwaj
2024-07-30 16:32:30 +05:30
committed by GitHub
parent d60dd5f281
commit da0c811846
1 changed files with 18 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,8 +3,8 @@ import { useEffect, useState } from "react";
import { createI18nString, extractLanguageCodes } from "@formbricks/lib/i18n/utils";
import { TAttributeClass } from "@formbricks/types/attribute-classes";
import { TSurvey, TSurveyCalQuestion } from "@formbricks/types/surveys/types";
import { AdvancedOptionToggle } from "@formbricks/ui/AdvancedOptionToggle";
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";
@@ -91,9 +91,9 @@ export const CalQuestionForm = ({
Add Description
</Button>
)}
<div className="mt-3 flex flex-col gap-4">
<div className="mt-3 flex flex-col gap-6">
<div className="flex flex-col gap-3">
<Label htmlFor="calUserName">Add your Cal.com username or username/event</Label>
<Label htmlFor="calUserName">Cal.com username or username/event</Label>
<div>
<Input
id="calUserName"
@@ -104,29 +104,28 @@ export const CalQuestionForm = ({
</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>
<AdvancedOptionToggle
isChecked={isCalHostEnabled}
onToggle={(checked: boolean) => setIsCalHostEnabled(checked)}
htmlId="calHost"
description="Needed for a self-hosted Cal.com instance"
childBorder
title="Custom hostname"
customContainerClass="p-0">
<div className="p-4">
<div className="flex items-center gap-2">
<Label htmlFor="calHost">Hostname</Label>
<Input
id="calHost"
name="calHost"
placeholder="cal.com"
placeholder="my-cal-instance.com"
value={question.calHost}
className="bg-white"
onChange={(e) => updateQuestion(questionIdx, { calHost: e.target.value })}
/>
</div>
)}
</div>
</div>
</AdvancedOptionToggle>
</div>
</div>
</form>