From cab143e0f689df1c9f266401023a4c5f39d43c8b Mon Sep 17 00:00:00 2001 From: Dhairyashil Shinde Date: Wed, 14 Jan 2026 17:45:29 +0000 Subject: [PATCH 1/6] fix(companion): iOS event type detail fixes - Fix #1: Weekly schedule now shows multiple time slots per day in AvailabilityTab - Fix #2: Allow numeric input fields to be empty with proper validation - Fix #3: Add native iOS date picker for date range in Limits tab - Fix #4: Change 'Email verification' to 'Booker email verification' in Advanced tab - Fix #5: Fix Requires confirmation comparison logic in buildPartialUpdatePayload - Fix #6: Forward parameters toggle already working, verified wiring - Fix #7: Add toggles for redirect booking URL and interface language in Advanced tab - Fix #8: Increase scroll padding at bottom from 200 to 350 for better keyboard access --- .../(event-types)/event-type-detail.tsx | 55 +++++++----- .../event-type-detail/tabs/AdvancedTab.tsx | 89 ++++++++++++------- .../tabs/AvailabilityTab.tsx | 36 +++++--- .../event-type-detail/tabs/LimitsTab.tsx | 53 +++++------ .../tabs/LimitsTabDatePicker.ios.tsx | 44 +++++++++ .../tabs/LimitsTabDatePicker.tsx | 21 +++++ .../utils/buildPartialUpdatePayload.ts | 8 +- 7 files changed, 208 insertions(+), 98 deletions(-) create mode 100644 companion/components/event-type-detail/tabs/LimitsTabDatePicker.ios.tsx create mode 100644 companion/components/event-type-detail/tabs/LimitsTabDatePicker.tsx diff --git a/companion/app/(tabs)/(event-types)/event-type-detail.tsx b/companion/app/(tabs)/(event-types)/event-type-detail.tsx index cbef9d914941ac..a87dbca2f9eb36 100644 --- a/companion/app/(tabs)/(event-types)/event-type-detail.tsx +++ b/companion/app/(tabs)/(event-types)/event-type-detail.tsx @@ -220,6 +220,7 @@ export default function EventTypeDetail() { const [requiresBookerEmailVerification, setRequiresBookerEmailVerification] = useState(false); const [hideCalendarNotes, setHideCalendarNotes] = useState(false); const [hideCalendarEventDetails, setHideCalendarEventDetails] = useState(false); + const [redirectEnabled, setRedirectEnabled] = useState(false); const [successRedirectUrl, setSuccessRedirectUrl] = useState(""); const [forwardParamsSuccessRedirect, setForwardParamsSuccessRedirect] = useState(false); const [hideOrganizerEmail, setHideOrganizerEmail] = useState(false); @@ -231,6 +232,7 @@ export default function EventTypeDetail() { const [customReplyToEmail, setCustomReplyToEmail] = useState(""); const [eventTypeColorLight, setEventTypeColorLight] = useState("#292929"); const [eventTypeColorDark, setEventTypeColorDark] = useState("#FAFAFA"); + const [interfaceLanguageEnabled, setInterfaceLanguageEnabled] = useState(false); const [interfaceLanguage, setInterfaceLanguage] = useState(""); const [showOptimizedSlots, setShowOptimizedSlots] = useState(false); @@ -673,8 +675,8 @@ export default function EventTypeDetail() { setSendCalVideoTranscription(false); } - // Load interface language (API V2) - if (eventTypeExt.interfaceLanguage !== undefined) { + if (eventTypeExt.interfaceLanguage) { + setInterfaceLanguageEnabled(true); setInterfaceLanguage(eventTypeExt.interfaceLanguage); } @@ -737,8 +739,8 @@ export default function EventTypeDetail() { setHideOrganizerEmail(eventTypeExt.hideOrganizerEmail); } - // Load redirect URL if (eventType.successRedirectUrl) { + setRedirectEnabled(true); setSuccessRedirectUrl(eventType.successRedirectUrl); } if (eventType.forwardParamsSuccessRedirect !== undefined) { @@ -921,25 +923,34 @@ export default function EventTypeDetail() { const dayShort = day.substring(0, 3).toLowerCase(); // mon, tue, etc. const dayShortUpper = day.substring(0, 3).toUpperCase(); - const availability = selectedScheduleDetails.availability?.find((avail) => { - if (!avail.days || !Array.isArray(avail.days)) return false; - - return avail.days.some( - (d) => - d === dayLower || - d === dayUpper || - d === day || - d === dayShort || - d === dayShortUpper || - d.toLowerCase() === dayLower - ); - }); + // Find ALL matching availability slots for this day (not just the first one) + const matchingSlots = + selectedScheduleDetails.availability?.filter((avail) => { + if (!avail.days || !Array.isArray(avail.days)) return false; + + return avail.days.some( + (d) => + d === dayLower || + d === dayUpper || + d === day || + d === dayShort || + d === dayShortUpper || + d.toLowerCase() === dayLower + ); + }) || []; + + // Map to time slots array + const timeSlots = matchingSlots.map((slot) => ({ + startTime: slot.startTime, + endTime: slot.endTime, + })); return { day, - available: !!availability, - startTime: availability?.startTime, - endTime: availability?.endTime, + available: timeSlots.length > 0, + startTime: timeSlots[0]?.startTime, + endTime: timeSlots[0]?.endTime, + timeSlots, // Include all time slots for this day }; }); @@ -1400,7 +1411,7 @@ export default function EventTypeDetail() { style={{ flex: 1, }} - contentContainerStyle={{ padding: 16, paddingBottom: 200 }} + contentContainerStyle={{ padding: 16, paddingBottom: 350 }} contentInsetAdjustmentBehavior="automatic" > {activeTab === "basics" ? ( @@ -2161,6 +2172,8 @@ export default function EventTypeDetail() { setAllowReschedulingPastEvents={setAllowReschedulingPastEvents} allowBookingThroughRescheduleLink={allowBookingThroughRescheduleLink} setAllowBookingThroughRescheduleLink={setAllowBookingThroughRescheduleLink} + redirectEnabled={redirectEnabled} + setRedirectEnabled={setRedirectEnabled} successRedirectUrl={successRedirectUrl} setSuccessRedirectUrl={setSuccessRedirectUrl} forwardParamsSuccessRedirect={forwardParamsSuccessRedirect} @@ -2189,6 +2202,8 @@ export default function EventTypeDetail() { setDisableRescheduling={setDisableRescheduling} sendCalVideoTranscription={sendCalVideoTranscription} setSendCalVideoTranscription={setSendCalVideoTranscription} + interfaceLanguageEnabled={interfaceLanguageEnabled} + setInterfaceLanguageEnabled={setInterfaceLanguageEnabled} interfaceLanguage={interfaceLanguage} setInterfaceLanguage={setInterfaceLanguage} showOptimizedSlots={showOptimizedSlots} diff --git a/companion/components/event-type-detail/tabs/AdvancedTab.tsx b/companion/components/event-type-detail/tabs/AdvancedTab.tsx index 0a009da1ccba25..998aee7eaaeac2 100644 --- a/companion/components/event-type-detail/tabs/AdvancedTab.tsx +++ b/companion/components/event-type-detail/tabs/AdvancedTab.tsx @@ -246,6 +246,8 @@ interface AdvancedTabProps { setAllowReschedulingPastEvents: (value: boolean) => void; allowBookingThroughRescheduleLink: boolean; setAllowBookingThroughRescheduleLink: (value: boolean) => void; + redirectEnabled: boolean; + setRedirectEnabled: (value: boolean) => void; successRedirectUrl: string; setSuccessRedirectUrl: (value: string) => void; forwardParamsSuccessRedirect: boolean; @@ -271,6 +273,8 @@ interface AdvancedTabProps { setDisableRescheduling: (value: boolean) => void; sendCalVideoTranscription: boolean; setSendCalVideoTranscription: (value: boolean) => void; + interfaceLanguageEnabled: boolean; + setInterfaceLanguageEnabled: (value: boolean) => void; interfaceLanguage: string; setInterfaceLanguage: (value: string) => void; showOptimizedSlots: boolean; @@ -297,7 +301,7 @@ export function AdvancedTab(props: AdvancedTabProps) { onValueChange={props.setRequiresConfirmation} /> - setShowLanguagePicker(true)} - options={interfaceLanguageOptions} - onSelect={props.setInterfaceLanguage} + title="Custom interface language" + description="Override the default browser language for the booking page." + value={props.interfaceLanguageEnabled} + onValueChange={props.setInterfaceLanguageEnabled} + isLast={!props.interfaceLanguageEnabled} /> + {props.interfaceLanguageEnabled ? ( + setShowLanguagePicker(true)} + options={interfaceLanguageOptions} + onSelect={props.setInterfaceLanguage} + /> + ) : null} {/* Language Picker Modal */} @@ -527,34 +540,42 @@ export function AdvancedTab(props: AdvancedTabProps) { {/* Redirect */} - - - - Redirect URL after successful booking - - - {props.successRedirectUrl ? ( - - Adding a redirect will disable the success page. - - ) : null} - - + {props.redirectEnabled ? ( + <> + + + Redirect URL + + + Adding a redirect will disable the success page. + + + + + + ) : null} {/* Configure on Web Section */} diff --git a/companion/components/event-type-detail/tabs/AvailabilityTab.tsx b/companion/components/event-type-detail/tabs/AvailabilityTab.tsx index 76c4381ff23269..8d828b05395806 100644 --- a/companion/components/event-type-detail/tabs/AvailabilityTab.tsx +++ b/companion/components/event-type-detail/tabs/AvailabilityTab.tsx @@ -10,11 +10,17 @@ import { Platform, Text, TouchableOpacity, View } from "react-native"; import type { Schedule } from "@/services/calcom"; import { AvailabilityTabIOSPicker } from "./AvailabilityTabIOSPicker"; +interface TimeSlot { + startTime?: string; + endTime?: string; +} + interface DaySchedule { day: string; available: boolean; startTime?: string; endTime?: string; + timeSlots?: TimeSlot[]; } interface AvailabilityTabProps { @@ -181,6 +187,7 @@ export function AvailabilityTab(props: AvailabilityTabProps) { const dayInfo = daySchedules.find((d) => d.day === day); const isEnabled = dayInfo?.available ?? false; const isLast = index === DAYS.length - 1; + const timeSlots = dayInfo?.timeSlots || []; return ( - {/* Time range or Unavailable */} - - {isEnabled && dayInfo?.startTime && dayInfo?.endTime - ? `${formatTime12Hour(dayInfo.startTime)} - ${formatTime12Hour(dayInfo.endTime)}` - : "Unavailable"} - + {/* Time ranges or Unavailable - support multiple time slots */} + {isEnabled && timeSlots.length > 0 ? ( + + {timeSlots.map((slot, slotIndex) => ( + 0 ? "mt-1" : ""}`} + > + {slot.startTime && slot.endTime + ? `${formatTime12Hour(slot.startTime)} - ${formatTime12Hour(slot.endTime)}` + : ""} + + ))} + + ) : ( + + Unavailable + + )} ); })} diff --git a/companion/components/event-type-detail/tabs/LimitsTab.tsx b/companion/components/event-type-detail/tabs/LimitsTab.tsx index f9609482a945ca..fecf28f1a6e843 100644 --- a/companion/components/event-type-detail/tabs/LimitsTab.tsx +++ b/companion/components/event-type-detail/tabs/LimitsTab.tsx @@ -17,6 +17,7 @@ import { View, } from "react-native"; +import { LimitsTabDatePicker } from "./LimitsTabDatePicker"; import { LimitsTabIOSPicker } from "./LimitsTabIOSPicker"; interface FrequencyLimit { @@ -301,10 +302,7 @@ export function LimitsTab(props: LimitsTabProps) { value={props.minimumNoticeValue} onChangeText={(text) => { const numericValue = text.replace(/[^0-9]/g, ""); - const num = parseInt(numericValue, 10) || 0; - if (num >= 0) { - props.setMinimumNoticeValue(numericValue || "0"); - } + props.setMinimumNoticeValue(numericValue); }} placeholder="1" placeholderTextColor="#8E8E93" @@ -389,10 +387,7 @@ export function LimitsTab(props: LimitsTabProps) { value={limit.value} onChangeText={(text) => { const numericValue = text.replace(/[^0-9]/g, ""); - const num = parseInt(numericValue, 10) || 0; - if (num >= 0) { - props.updateFrequencyLimit(limit.id, "value", numericValue || "0"); - } + props.updateFrequencyLimit(limit.id, "value", numericValue); }} placeholder="1" placeholderTextColor="#8E8E93" @@ -451,10 +446,7 @@ export function LimitsTab(props: LimitsTabProps) { value={limit.value} onChangeText={(text) => { const numericValue = text.replace(/[^0-9]/g, ""); - const num = parseInt(numericValue, 10) || 0; - if (num >= 0) { - props.updateDurationLimit(limit.id, "value", numericValue || "0"); - } + props.updateDurationLimit(limit.id, "value", numericValue); }} placeholder="60" placeholderTextColor="#8E8E93" @@ -512,10 +504,7 @@ export function LimitsTab(props: LimitsTabProps) { value={props.maxActiveBookingsValue} onChangeText={(text) => { const numericValue = text.replace(/[^0-9]/g, ""); - const num = parseInt(numericValue, 10) || 0; - if (num >= 0) { - props.setMaxActiveBookingsValue(numericValue || "1"); - } + props.setMaxActiveBookingsValue(numericValue); }} placeholder="1" placeholderTextColor="#8E8E93" @@ -560,7 +549,7 @@ export function LimitsTab(props: LimitsTabProps) { value={props.rollingDays} onChangeText={(text) => { const numericValue = text.replace(/[^0-9]/g, ""); - props.setRollingDays(numericValue || "30"); + props.setRollingDays(numericValue); props.setFutureBookingType("rolling"); }} placeholder="30" @@ -603,20 +592,22 @@ export function LimitsTab(props: LimitsTabProps) { Within a date range {props.futureBookingType === "range" ? ( - - + + Start date + + + + End date + + ) : null} diff --git a/companion/components/event-type-detail/tabs/LimitsTabDatePicker.ios.tsx b/companion/components/event-type-detail/tabs/LimitsTabDatePicker.ios.tsx new file mode 100644 index 00000000000000..0c2b3303112724 --- /dev/null +++ b/companion/components/event-type-detail/tabs/LimitsTabDatePicker.ios.tsx @@ -0,0 +1,44 @@ +import { DatePicker, Host } from "@expo/ui/swift-ui"; +import { useCallback, useMemo } from "react"; +import { Text, View } from "react-native"; + +interface LimitsTabDatePickerProps { + value: string; + onChange: (value: string) => void; + placeholder?: string; +} + +export function LimitsTabDatePicker({ value, onChange, placeholder }: LimitsTabDatePickerProps) { + const dateValue = useMemo(() => { + if (!value) return new Date(); + const parsed = new Date(`${value}T00:00:00`); + return Number.isNaN(parsed.getTime()) ? new Date() : parsed; + }, [value]); + + const handleDateChange = useCallback( + (date: Date) => { + const year = date.getFullYear(); + const month = String(date.getMonth() + 1).padStart(2, "0"); + const day = String(date.getDate()).padStart(2, "0"); + onChange(`${year}-${month}-${day}`); + }, + [onChange] + ); + + const displayValue = value || placeholder || "Select date"; + + return ( + + + {displayValue} + + + + + + ); +} diff --git a/companion/components/event-type-detail/tabs/LimitsTabDatePicker.tsx b/companion/components/event-type-detail/tabs/LimitsTabDatePicker.tsx new file mode 100644 index 00000000000000..d798b7b75a8d2b --- /dev/null +++ b/companion/components/event-type-detail/tabs/LimitsTabDatePicker.tsx @@ -0,0 +1,21 @@ +import { TextInput, View } from "react-native"; + +interface LimitsTabDatePickerProps { + value: string; + onChange: (value: string) => void; + placeholder?: string; +} + +export function LimitsTabDatePicker({ value, onChange, placeholder }: LimitsTabDatePickerProps) { + return ( + + + + ); +} diff --git a/companion/components/event-type-detail/utils/buildPartialUpdatePayload.ts b/companion/components/event-type-detail/utils/buildPartialUpdatePayload.ts index 3ab73a64f10c43..37a58da2e21fdb 100644 --- a/companion/components/event-type-detail/utils/buildPartialUpdatePayload.ts +++ b/companion/components/event-type-detail/utils/buildPartialUpdatePayload.ts @@ -643,10 +643,12 @@ export function buildPartialUpdatePayload( } const originalRequiresConfirmation = - original.requiresConfirmation || + original.requiresConfirmation === true || (original.confirmationPolicy && - !("disabled" in original.confirmationPolicy && original.confirmationPolicy.disabled)); - if (currentState.requiresConfirmation !== originalRequiresConfirmation) { + !( + "disabled" in original.confirmationPolicy && original.confirmationPolicy.disabled === true + )); + if (currentState.requiresConfirmation !== !!originalRequiresConfirmation) { payload.requiresConfirmation = currentState.requiresConfirmation; } From 37720aa2e2bf4f3da7b20a4f8be83bda98fca065 Mon Sep 17 00:00:00 2001 From: Dhairyashil Shinde Date: Wed, 14 Jan 2026 17:53:03 +0000 Subject: [PATCH 2/6] fix(companion): conditional scroll padding for limits and advanced tabs only --- companion/app/(tabs)/(event-types)/event-type-detail.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/companion/app/(tabs)/(event-types)/event-type-detail.tsx b/companion/app/(tabs)/(event-types)/event-type-detail.tsx index a87dbca2f9eb36..78552bdfa210e6 100644 --- a/companion/app/(tabs)/(event-types)/event-type-detail.tsx +++ b/companion/app/(tabs)/(event-types)/event-type-detail.tsx @@ -1411,7 +1411,10 @@ export default function EventTypeDetail() { style={{ flex: 1, }} - contentContainerStyle={{ padding: 16, paddingBottom: 350 }} + contentContainerStyle={{ + padding: 16, + paddingBottom: activeTab === "limits" || activeTab === "advanced" ? 280 : 200, + }} contentInsetAdjustmentBehavior="automatic" > {activeTab === "basics" ? ( From 638f4b085e398bafcf9901b231c12ba9dd14533e Mon Sep 17 00:00:00 2001 From: Dhairyashil Shinde Date: Wed, 14 Jan 2026 17:55:55 +0000 Subject: [PATCH 3/6] fix(companion): remove static date text from iOS date picker, keep only picker --- .../event-type-detail/tabs/LimitsTabDatePicker.ios.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/companion/components/event-type-detail/tabs/LimitsTabDatePicker.ios.tsx b/companion/components/event-type-detail/tabs/LimitsTabDatePicker.ios.tsx index 0c2b3303112724..6b9cbd2b2e3de0 100644 --- a/companion/components/event-type-detail/tabs/LimitsTabDatePicker.ios.tsx +++ b/companion/components/event-type-detail/tabs/LimitsTabDatePicker.ios.tsx @@ -1,6 +1,6 @@ import { DatePicker, Host } from "@expo/ui/swift-ui"; import { useCallback, useMemo } from "react"; -import { Text, View } from "react-native"; +import { View } from "react-native"; interface LimitsTabDatePickerProps { value: string; @@ -8,7 +8,7 @@ interface LimitsTabDatePickerProps { placeholder?: string; } -export function LimitsTabDatePicker({ value, onChange, placeholder }: LimitsTabDatePickerProps) { +export function LimitsTabDatePicker({ value, onChange }: LimitsTabDatePickerProps) { const dateValue = useMemo(() => { if (!value) return new Date(); const parsed = new Date(`${value}T00:00:00`); @@ -25,13 +25,8 @@ export function LimitsTabDatePicker({ value, onChange, placeholder }: LimitsTabD [onChange] ); - const displayValue = value || placeholder || "Select date"; - return ( - - {displayValue} - Date: Wed, 14 Jan 2026 17:59:29 +0000 Subject: [PATCH 4/6] fix(companion): simplify iOS date picker to match RescheduleScreen pattern --- .../tabs/LimitsTabDatePicker.ios.tsx | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/companion/components/event-type-detail/tabs/LimitsTabDatePicker.ios.tsx b/companion/components/event-type-detail/tabs/LimitsTabDatePicker.ios.tsx index 6b9cbd2b2e3de0..5b9d1346209c56 100644 --- a/companion/components/event-type-detail/tabs/LimitsTabDatePicker.ios.tsx +++ b/companion/components/event-type-detail/tabs/LimitsTabDatePicker.ios.tsx @@ -1,6 +1,5 @@ import { DatePicker, Host } from "@expo/ui/swift-ui"; import { useCallback, useMemo } from "react"; -import { View } from "react-native"; interface LimitsTabDatePickerProps { value: string; @@ -26,14 +25,12 @@ export function LimitsTabDatePicker({ value, onChange }: LimitsTabDatePickerProp ); return ( - - - - - + + + ); } From 91534a09b0ba6d1f351d379ecfdf59bdc2f64be9 Mon Sep 17 00:00:00 2001 From: Dhairyashil Date: Thu, 15 Jan 2026 00:08:36 +0530 Subject: [PATCH 5/6] update code --- companion/components/LoginScreen.tsx | 30 ++++++++++--------- .../event-type-detail/tabs/AdvancedTab.tsx | 22 ++++++++++++-- .../event-type-detail/tabs/LimitsTab.tsx | 10 +++---- .../utils/buildPartialUpdatePayload.ts | 7 ++++- 4 files changed, 47 insertions(+), 22 deletions(-) diff --git a/companion/components/LoginScreen.tsx b/companion/components/LoginScreen.tsx index 2e896536ca7d9d..3febdebae46da8 100644 --- a/companion/components/LoginScreen.tsx +++ b/companion/components/LoginScreen.tsx @@ -61,20 +61,22 @@ export function LoginScreen() { Continue with Cal.com - {/* Sign up link */} - - - - Don't have an account? Sign up - - - - + {/* Sign up link - hidden on iOS */} + {Platform.OS !== "ios" && ( + + + + Don't have an account? Sign up + + + + + )} ); diff --git a/companion/components/event-type-detail/tabs/AdvancedTab.tsx b/companion/components/event-type-detail/tabs/AdvancedTab.tsx index 998aee7eaaeac2..3e55b519a86e8a 100644 --- a/companion/components/event-type-detail/tabs/AdvancedTab.tsx +++ b/companion/components/event-type-detail/tabs/AdvancedTab.tsx @@ -298,7 +298,16 @@ export function AdvancedTab(props: AdvancedTabProps) { title="Requires confirmation" description="The booking needs to be manually confirmed before it is pushed to your calendar and a confirmation is sent." value={props.requiresConfirmation} - onValueChange={props.setRequiresConfirmation} + onValueChange={(value) => { + if (value && props.seatsEnabled) { + Alert.alert( + "Disable 'Offer seats' first", + "You need to:\n1. Disable 'Offer seats' and Save\n2. Then enable 'Requires confirmation' and Save again" + ); + return; + } + props.setRequiresConfirmation(value); + }} /> { + if (value && props.requiresConfirmation) { + Alert.alert( + "Disable 'Requires confirmation' first", + "You need to:\n1. Disable 'Requires confirmation' and Save\n2. Then enable 'Offer seats' and Save again" + ); + return; + } + props.setSeatsEnabled(value); + }} learnMoreUrl="https://cal.com/help/event-types/offer-seats" isLast /> diff --git a/companion/components/event-type-detail/tabs/LimitsTab.tsx b/companion/components/event-type-detail/tabs/LimitsTab.tsx index fecf28f1a6e843..c3f718b9c3b92a 100644 --- a/companion/components/event-type-detail/tabs/LimitsTab.tsx +++ b/companion/components/event-type-detail/tabs/LimitsTab.tsx @@ -591,17 +591,17 @@ export function LimitsTab(props: LimitsTabProps) { Within a date range {props.futureBookingType === "range" ? ( - - - Start date + + + Start date - - End date + + End date Date: Tue, 20 Jan 2026 20:01:05 +0200 Subject: [PATCH 6/6] Apply changes for benchmark PR --- AGENTS.md | 333 ++++++------------ .../event-type-detail/tabs/AdvancedTab.tsx | 4 +- 2 files changed, 101 insertions(+), 236 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index 340304999fe5a9..879c978338fdb5 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -1,238 +1,103 @@ -# Cal.com Development Guide for AI Agents +# Compliance Rules -You are a senior Cal.com engineer working in a Yarn/Turbo monorepo. You prioritize type safety, security, and small, reviewable diffs. +This file contains the compliance and code quality rules for this repository. -## Do +## 1. Repository and Service Classes Must Follow Naming Conventions -- Use `select` instead of `include` in Prisma queries for performance and security -- Use `import type { X }` for TypeScript type imports -- Use early returns to reduce nesting: `if (!booking) return null;` -- Use `ErrorWithCode` for errors in non-tRPC files (services, repositories, utilities); use `TRPCError` only in tRPC routers -- Use conventional commits: `feat:`, `fix:`, `refactor:` -- Create PRs in draft mode by default -- Run `yarn type-check:ci --force` before concluding CI failures are unrelated to your changes -- Import directly from source files, not barrel files (e.g., `@calcom/ui/components/button` not `@calcom/ui`) -- Add translations to `apps/web/public/static/locales/en/common.json` for all UI strings -- Use `date-fns` or native `Date` instead of Day.js when timezone awareness isn't needed -- Put permission checks in `page.tsx`, never in `layout.tsx` -- Use `ast-grep` for searching if available; otherwise use `rg` (ripgrep), then fall back to `grep` -- Use Biome for formatting and linting - - -## Don't - -- Never use `as any` - use proper type-safe solutions instead -- Never expose `credential.key` field in API responses or queries -- Never commit secrets or API keys -- Never modify `*.generated.ts` files directly - they're created by app-store-cli -- Never put business logic in repositories - that belongs in Services -- Never use barrel imports from index.ts files -- Never skip running type checks before pushing -- Never create large PRs (>500 lines or >10 files) - split them instead - -## Commands - -### File-scoped (preferred for speed) - -```bash -# Type check - always run on changed files -yarn type-check:ci --force - -# Lint and format single file -yarn biome check --write path/to/file.tsx - -# Unit test specific file -yarn vitest run path/to/file.test.ts - -# Unit test specific file + specific test -yarn vitest run path/to/file.test.ts --testNamePattern="specific test name" - -# Integration test specific file -VITEST_MODE=integration yarn test path/to/file.integration-test.ts - -# Integration test specific file + specific test -VITEST_MODE=integration yarn test path/to/file.integration-test.ts --testNamePattern="specific test name" - -# E2E test specific file -PLAYWRIGHT_HEADLESS=1 yarn e2e path/to/file.e2e.ts - -# E2E test specific file + specific test -PLAYWRIGHT_HEADLESS=1 yarn e2e path/to/file.e2e.ts --grep "specific test name" -``` - -### Project-wide (use sparingly) - -```bash -# Development -yarn dev # Start dev server -yarn dx # Dev with database setup - -# Build & check -yarn build # Build all packages -yarn biome check --write . # Lint and format all -yarn type-check # Type check all - -# Tests (use TZ=UTC for consistency) -TZ=UTC yarn test # All unit tests -yarn e2e # All E2E tests - -# Database -yarn prisma generate # Regenerate types after schema changes -yarn workspace @calcom/prisma db-migrate # Run migrations -``` - -### Biome focused workflow -+ -```bash -yarn biome check --write . -yarn type-check:ci --force -``` - - -## Boundaries - -### Always do -- Run type check on changed files before committing -- Run relevant tests before pushing -- Use `select` in Prisma queries -- Follow conventional commits for PR titles -- Run Biome before pushing - -### Ask first -- Adding new dependencies -- Schema changes to `packages/prisma/schema.prisma` -- Changes affecting multiple packages -- Deleting files -- Running full build or E2E suites - -### Never do -- Commit secrets, API keys, or `.env` files -- Expose `credential.key` in any query -- Use `as any` type casting -- Force push or rebase shared branches -- Modify generated files directly - -## Project Structure - -``` -apps/web/ # Main Next.js application -packages/prisma/ # Database schema (schema.prisma) and migrations -packages/trpc/ # tRPC API layer (routers in server/routers/) -packages/ui/ # Shared UI components -packages/features/ # Feature-specific code -packages/app-store/ # Third-party integrations -packages/lib/ # Shared utilities -``` - -### Key files -- Routes: `apps/web/app/` (App Router) -- Database schema: `packages/prisma/schema.prisma` -- tRPC routers: `packages/trpc/server/routers/` -- Translations: `apps/web/public/static/locales/en/common.json` -- Workflow constants: `packages/features/ee/workflows/lib/constants.ts` - -## Tech Stack - -- **Framework**: Next.js 13+ (App Router in some areas) -- **Language**: TypeScript (strict) -- **Database**: PostgreSQL with Prisma ORM -- **API**: tRPC for type-safe APIs -- **Auth**: NextAuth.js -- **Styling**: Tailwind CSS -- **Testing**: Vitest (unit), Playwright (E2E) -- **i18n**: next-i18next - -## Code Examples - -### Good error handling - -```typescript -// Good - Descriptive error with context -throw new Error(`Unable to create booking: User ${userId} has no available time slots for ${date}`); - -// Bad - Generic error -throw new Error("Booking failed"); -``` - -For which error class to use (`ErrorWithCode` vs `TRPCError`) and concrete examples, see [Error Types in knowledge-base.md](agents/knowledge-base.md#error-types). - -### Good Prisma query - -```typescript -// Good - Use select for performance and security -const booking = await prisma.booking.findFirst({ - select: { - id: true, - title: true, - user: { - select: { - id: true, - name: true, - email: true, - } - } - } -}); - -// Bad - Include fetches all fields including sensitive ones -const booking = await prisma.booking.findFirst({ - include: { user: true } -}); -``` - -### Good imports - -```typescript -// Good - Type imports and direct paths -import type { User } from "@prisma/client"; -import { Button } from "@calcom/ui/components/button"; - -// Bad - Regular import for types, barrel imports -import { User } from "@prisma/client"; -import { Button } from "@calcom/ui"; -``` - -### API v2 Imports (apps/api/v2) - -When importing from `@calcom/features` or `@calcom/trpc` into `apps/api/v2`, **do not import directly** because the API v2 app's `tsconfig.json` doesn't have path mappings for these modules, which causes "module not found" errors. - -Instead, re-export from `packages/platform/libraries/index.ts` and import from `@calcom/platform-libraries`: - -```typescript -// Step 1: In packages/platform/libraries/index.ts, add the export -export { ProfileRepository } from "@calcom/features/profile/repositories/ProfileRepository"; - -// Step 2: In apps/api/v2, import from platform-libraries -import { ProfileRepository } from "@calcom/platform-libraries"; - -// Bad - Direct import causes module not found error in apps/api/v2 -import { ProfileRepository } from "@calcom/features/profile/repositories/ProfileRepository"; -``` - -## PR Checklist - -- [ ] Title follows conventional commits: `feat(scope): description` -- [ ] Type check passes: `yarn type-check:ci --force` -- [ ] Lint passes: `yarn lint:fix` -- [ ] Relevant tests pass -- [ ] Diff is small and focused (<500 lines, <10 files) -- [ ] No secrets or API keys committed -- [ ] UI strings added to translation files -- [ ] Created as draft PR - -## When Stuck - -- Ask a clarifying question before making large speculative changes -- Propose a short plan for complex tasks -- Open a draft PR with notes if unsure about approach -- Fix type errors before test failures - they're often the root cause -- Run `yarn prisma generate` if you see missing enum/type errors - -## Extended Documentation +**Objective:** Ensure consistency and discoverability by requiring repository classes to use 'PrismaRepository' pattern and service classes to use 'Service' pattern, with filenames matching class names exactly in PascalCase -For detailed information, see the `agents/` directory: - -- **[agents/README.md](agents/README.md)** - Architecture overview and patterns -- **[agents/commands.md](agents/commands.md)** - Complete command reference -- **[agents/knowledge-base.md](agents/knowledge-base.md)** - Domain knowledge and best practices -- **[agents/coding-standards.md](agents/coding-standards.md)** - Coding standards with examples +**Success Criteria:** Repository files are named 'PrismaRepository.ts' with matching exported class names (e.g., PrismaAppRepository), and service files are named 'Service.ts' with matching class names (e.g., MembershipService) + +**Failure Criteria:** Repository or service files use generic names like 'app.ts', use dot-suffixes like '.service.ts' or '.repository.ts', or have filename/class name mismatches + +--- + +## 2. Prevent Circular Dependencies Between Core Packages + +**Objective:** Maintain clear architectural boundaries and prevent circular dependencies by enforcing import restrictions between core packages (lib, app-store, features, trpc) + +**Success Criteria:** The lib package does not import from app-store, features, or trpc; app-store does not import from features or trpc; features does not import from trpc; and trpc does not import from apps/web + +**Failure Criteria:** Code contains imports that violate the dependency hierarchy, such as lib importing from features, app-store importing from trpc, or any other restricted cross-package imports + +--- + +## 3. Use Biome for Code Formatting with Standardized Configuration + +**Objective:** Ensure consistent code formatting across the entire codebase by using Biome with specific formatting rules for line width, indentation, quotes, and semicolons + +**Success Criteria:** All TypeScript/JavaScript files use 110 character line width, 2-space indentation, LF line endings, double quotes for JSX, always include semicolons, use ES5 trailing commas, and always use arrow function parentheses + +**Failure Criteria:** Code files deviate from the standard formatting rules, such as using single quotes in JSX, omitting semicolons, using different indentation widths, or exceeding line width limits + +--- + +## 4. Default Exports Allowed Only in Next.js Page and Layout Files + +**Objective:** Enforce named exports throughout the codebase for better refactoring and tree-shaking, while allowing default exports only where Next.js requires them (page.tsx and layout.tsx files) + +**Success Criteria:** Files use named exports (export const, export function, export class) except for files matching patterns 'apps/web/app/**/page.tsx', 'apps/web/app/**/layout.tsx', and 'apps/web/app/pages/**/*.tsx' which may use default exports + +**Failure Criteria:** Non-page/layout files use default exports, or page/layout files fail to export the required default component + +--- + +## 5. Schema and Handler Files Must Be Separated with Type-Safe Patterns + +**Objective:** Maintain separation of concerns and type safety by requiring schema definitions in separate '.schema.ts' files with both Zod schema and TypeScript type exports, while handlers in '.handler.ts' files use these typed schemas + +**Success Criteria:** Schema files export both a TypeScript type (TInputSchema) and a corresponding Zod schema (ZInputSchema: z.ZodTypeInputSchema>), and handler files import and use these typed schemas for validation + +**Failure Criteria:** Schema and handler logic are mixed in the same file, schema files lack either TypeScript types or Zod schemas, or handler files perform validation without using the defined schemas + +--- + +## 6. Lint Staged Files Before Commit with Error-on-Warnings Enforcement + +**Objective:** Ensure code quality by running Biome linting on staged files before commits and treating warnings as errors unless explicitly skipped via SKIP_WARNINGS environment variable + +**Success Criteria:** Pre-commit hook runs 'biome lint --error-on-warnings' on staged TypeScript/JavaScript files, 'biome format' on JSON files, and 'prisma format' on schema.prisma, and all checks pass before commit is allowed + +**Failure Criteria:** Commits are made with linting warnings or formatting issues, staged files are not checked before commit, or the pre-commit hook is bypassed without proper justification + +--- + +## 7. Environment Variables Must Not Be Accessed Directly in Non-Configuration Code + +**Objective:** Prevent runtime errors and improve testability by avoiding direct process.env access in business logic and instead using centralized configuration modules or environment-specific checks + +**Success Criteria:** Direct process.env access is limited to configuration files, environment detection utilities (isENVProd, isENVDev), and build-time configuration, while business logic receives environment values through dependency injection or configuration objects + +**Failure Criteria:** Business logic, handlers, or service classes directly access process.env properties instead of using configuration abstractions or injected values + +--- + +## 8. All Tests Must Use Vitest Framework and UTC Timezone + +**Objective:** Ensure consistent test execution and prevent timezone-related bugs by standardizing on Vitest as the test framework and enforcing UTC timezone for all test runs + +**Success Criteria:** Test files use Vitest syntax (vi.mock, vi.fn, describe, it, expect), test commands set TZ=UTC environment variable, and tests do not depend on local timezone settings + +**Failure Criteria:** Tests use Jest-specific APIs, test commands omit TZ=UTC setting, or tests fail when run in different timezones + +--- + +## 9. React Components Must Use react-hook-form with Zod Schema Validation + +**Objective:** Ensure consistent form handling and validation by requiring React Hook Form with Zod resolver for all form components, providing type-safe validation and error handling + +**Success Criteria:** Form components use useForm hook with zodResolver, define Zod schemas for form validation, use Controller or register for form fields, and properly handle validation errors with error messages + +**Failure Criteria:** Form components implement custom validation logic without react-hook-form, lack Zod schema validation, or fail to properly display validation errors to users + +--- + +## 10. Custom Error Classes Must Use Hierarchical Structure with Typed Codes + +**Objective:** Enable robust error handling and debugging by requiring custom error classes that extend base Error classes with typed error codes, HTTP status codes, and structured error information + +**Success Criteria:** Error classes extend from base error types (HttpError, CalendarAppError, ErrorWithCode), include typed error codes for categorization, provide statusCode for HTTP errors, and include relevant context (URL, method, cause) + +**Failure Criteria:** Code throws generic Error objects, lacks error categorization, omits HTTP status codes for API errors, or fails to include sufficient debugging context + +--- diff --git a/companion/components/event-type-detail/tabs/AdvancedTab.tsx b/companion/components/event-type-detail/tabs/AdvancedTab.tsx index 3e55b519a86e8a..0c1c3f80bee669 100644 --- a/companion/components/event-type-detail/tabs/AdvancedTab.tsx +++ b/companion/components/event-type-detail/tabs/AdvancedTab.tsx @@ -301,8 +301,8 @@ export function AdvancedTab(props: AdvancedTabProps) { onValueChange={(value) => { if (value && props.seatsEnabled) { Alert.alert( - "Disable 'Offer seats' first", - "You need to:\n1. Disable 'Offer seats' and Save\n2. Then enable 'Requires confirmation' and Save again" + 'Disable "Offer seats" first', + 'You need to:\n1. Disable "Offer seats" and Save\n2. Then enable "Requires confirmation" and Save again' ); return; }