Skip to content

Commit f9e24f5

Browse files
joeauyeungjoeauyeung
authored
refactor: Extract <CalVideoSettings /> from `<Locations /> (calcom#23113)
* Create `CalVideoSettings` type * Create `LocationOptionContainer` * Extract cal video settings to `CalVideoSettings` * Refactor `<Locations />` component to use `<CalVideoSettings />` * Unify naming * Move location folder back under components * Type fixes * Delete console.log
1 parent 9e9f815 commit f9e24f5

6 files changed

Lines changed: 176 additions & 143 deletions

File tree

‎apps/web/components/apps/installation/EventTypeConferencingAppSettings.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@ import { useMemo } from "react";
22
import { useFormContext } from "react-hook-form";
33
import type { UseFormGetValues, UseFormSetValue, Control, FormState } from "react-hook-form";
44

5-
import type { TLocationOptions } from "@calcom/features/eventtypes/components/Locations";
6-
import type { TEventTypeLocation } from "@calcom/features/eventtypes/components/Locations";
7-
import Locations from "@calcom/features/eventtypes/components/Locations";
5+
import type {
6+
TLocationOptions,
7+
TEventTypeLocation,
8+
} from "@calcom/features/eventtypes/components/locations/Locations";
9+
import Locations from "@calcom/features/eventtypes/components/locations/Locations";
810
import type { LocationFormValues } from "@calcom/features/eventtypes/lib/types";
911
import type { SingleValueLocationOption } from "@calcom/features/form/components/LocationSelect";
1012
import { useLocale } from "@calcom/lib/hooks/useLocale";

‎packages/features/eventtypes/components/locations/CalVideoSettings.tsx‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
import { ErrorMessage } from "@hookform/error-message";
2+
import { useFormContext, Controller } from "react-hook-form";
3+
4+
import { useIsPlatform } from "@calcom/atoms/hooks/useIsPlatform";
5+
import type { FormValues } from "@calcom/features/eventtypes/lib/types";
6+
import type { CalVideoSettings as CalVideoSettingsType } from "@calcom/features/eventtypes/lib/types";
7+
import { useLocale } from "@calcom/lib/hooks/useLocale";
8+
import classNames from "@calcom/ui/classNames";
9+
import { UpgradeTeamsBadge } from "@calcom/ui/components/badge";
10+
import { TextField } from "@calcom/ui/components/form";
11+
import { SettingsToggle } from "@calcom/ui/components/form";
12+
13+
import LocationSettingsContainer from "./LocationSettingsContainer";
14+
15+
const CalVideoSettings = ({ calVideoSettings }: { calVideoSettings?: CalVideoSettingsType }) => {
16+
const { t } = useLocale();
17+
const formMethods = useFormContext<FormValues>();
18+
const isPlatform = useIsPlatform();
19+
return (
20+
<LocationSettingsContainer>
21+
<Controller
22+
name="calVideoSettings.disableRecordingForGuests"
23+
defaultValue={!!calVideoSettings?.disableRecordingForGuests}
24+
render={({ field: { onChange, value } }) => {
25+
return (
26+
<SettingsToggle
27+
title={t("disable_recording_for_guests")}
28+
labelClassName="text-sm leading-6 whitespace-normal break-words"
29+
checked={value}
30+
onCheckedChange={onChange}
31+
Badge={<UpgradeTeamsBadge checkForActiveStatus />}
32+
/>
33+
);
34+
}}
35+
/>
36+
37+
<Controller
38+
name="calVideoSettings.disableRecordingForOrganizer"
39+
defaultValue={!!calVideoSettings?.disableRecordingForOrganizer}
40+
render={({ field: { onChange, value } }) => {
41+
return (
42+
<SettingsToggle
43+
title={t("disable_recording_for_organizer")}
44+
labelClassName="text-sm leading-6 whitespace-normal break-words"
45+
checked={value}
46+
onCheckedChange={onChange}
47+
Badge={<UpgradeTeamsBadge checkForActiveStatus />}
48+
/>
49+
);
50+
}}
51+
/>
52+
53+
{!isPlatform && (
54+
<Controller
55+
name="calVideoSettings.enableAutomaticRecordingForOrganizer"
56+
defaultValue={!!calVideoSettings?.enableAutomaticRecordingForOrganizer}
57+
render={({ field: { onChange, value } }) => {
58+
return (
59+
<SettingsToggle
60+
title={t("enable_automatic_recording")}
61+
labelClassName="text-sm"
62+
checked={value}
63+
onCheckedChange={onChange}
64+
Badge={<UpgradeTeamsBadge checkForActiveStatus />}
65+
/>
66+
);
67+
}}
68+
/>
69+
)}
70+
71+
<Controller
72+
name="calVideoSettings.enableAutomaticTranscription"
73+
defaultValue={!!calVideoSettings?.enableAutomaticTranscription}
74+
render={({ field: { onChange, value } }) => {
75+
return (
76+
<SettingsToggle
77+
title={t("enable_automatic_transcription")}
78+
labelClassName="text-sm leading-6 whitespace-normal break-words"
79+
checked={value}
80+
onCheckedChange={onChange}
81+
Badge={<UpgradeTeamsBadge checkForActiveStatus />}
82+
/>
83+
);
84+
}}
85+
/>
86+
87+
{!isPlatform && (
88+
<Controller
89+
name="calVideoSettings.disableTranscriptionForGuests"
90+
defaultValue={!!calVideoSettings?.disableTranscriptionForGuests}
91+
render={({ field: { onChange, value } }) => {
92+
return (
93+
<SettingsToggle
94+
title={t("disable_transcription_for_guests")}
95+
labelClassName="text-sm leading-6 whitespace-normal break-words"
96+
checked={value}
97+
onCheckedChange={onChange}
98+
Badge={<UpgradeTeamsBadge checkForActiveStatus />}
99+
/>
100+
);
101+
}}
102+
/>
103+
)}
104+
{!isPlatform && (
105+
<Controller
106+
name="calVideoSettings.disableTranscriptionForOrganizer"
107+
defaultValue={!!calVideoSettings?.disableTranscriptionForOrganizer}
108+
render={({ field: { onChange, value } }) => {
109+
return (
110+
<SettingsToggle
111+
title={t("disable_transcription_for_organizer")}
112+
labelClassName="text-sm leading-6 whitespace-normal break-words"
113+
checked={value}
114+
onCheckedChange={onChange}
115+
Badge={<UpgradeTeamsBadge checkForActiveStatus />}
116+
/>
117+
);
118+
}}
119+
/>
120+
)}
121+
122+
<TextField
123+
label={t("enter_redirect_url_on_exit_description")}
124+
defaultValue={calVideoSettings?.redirectUrlOnExit || ""}
125+
data-testid="calVideoSettings.redirectUrlOnExit"
126+
containerClassName="mt-4"
127+
className="leading-6"
128+
{...formMethods.register("calVideoSettings.redirectUrlOnExit", {
129+
setValueAs: (v) => (!v || v.trim() === "" ? null : v),
130+
})}
131+
/>
132+
<ErrorMessage
133+
errors={formMethods.formState.errors?.calVideoSettings}
134+
name="redirectUrlOnExit"
135+
className={classNames("text-error text-sm")}
136+
as="div"
137+
id="calVideoSettings.redirectUrlOnExit-error"
138+
/>
139+
</LocationSettingsContainer>
140+
);
141+
};
142+
143+
export default CalVideoSettings;

‎packages/features/eventtypes/components/locations/LocationSettingsContainer.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const LocationSettingsContainer = ({ children }: { children: React.ReactNode }) => {
2+
return (
3+
<div className="bg-muted mt-2 space-y-2 rounded-lg p-4">
4+
<div className="w-full">
5+
<div className="flex flex-col gap-4">{children}</div>
6+
</div>
7+
</div>
8+
);
9+
};
10+
11+
export default LocationSettingsContainer;

packages/features/eventtypes/components/Locations.tsx renamed to packages/features/eventtypes/components/locations/Locations.tsx

Lines changed: 3 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,13 @@ import ServerTrans from "@calcom/lib/components/ServerTrans";
2525
import { WEBAPP_URL } from "@calcom/lib/constants";
2626
import { useLocale } from "@calcom/lib/hooks/useLocale";
2727
import classNames from "@calcom/ui/classNames";
28-
import { UpgradeTeamsBadge } from "@calcom/ui/components/badge";
2928
import { Button } from "@calcom/ui/components/button";
30-
import { TextField } from "@calcom/ui/components/form";
31-
import { SettingsToggle } from "@calcom/ui/components/form";
3229
import { Input } from "@calcom/ui/components/form";
3330
import { Icon } from "@calcom/ui/components/icon";
3431
import { showToast } from "@calcom/ui/components/toast";
3532

33+
import CalVideoSettings from "./CalVideoSettings";
34+
3635
export type TEventTypeLocation = Pick<EventTypeSetupProps["eventType"], "locations" | "calVideoSettings">;
3736
export type TLocationOptions = Pick<EventTypeSetupProps, "locationOptions">["locationOptions"];
3837
export type TDestinationCalendar = { integration: string } | null;
@@ -342,132 +341,7 @@ const Locations: React.FC<LocationsProps> = ({
342341
)}
343342
</div>
344343

345-
{isCalVideo && !isPlatform && (
346-
<div className="bg-muted mt-2 space-y-2 rounded-lg p-4">
347-
<div className="w-full">
348-
<div className="flex flex-col gap-4">
349-
<Controller
350-
name="calVideoSettings.disableRecordingForGuests"
351-
defaultValue={!!eventType.calVideoSettings?.disableRecordingForGuests}
352-
render={({ field: { onChange, value } }) => {
353-
return (
354-
<SettingsToggle
355-
title={t("disable_recording_for_guests")}
356-
labelClassName="text-sm leading-6 whitespace-normal break-words"
357-
checked={value}
358-
onCheckedChange={onChange}
359-
Badge={<UpgradeTeamsBadge checkForActiveStatus />}
360-
/>
361-
);
362-
}}
363-
/>
364-
365-
<Controller
366-
name="calVideoSettings.disableRecordingForOrganizer"
367-
defaultValue={!!eventType.calVideoSettings?.disableRecordingForOrganizer}
368-
render={({ field: { onChange, value } }) => {
369-
return (
370-
<SettingsToggle
371-
title={t("disable_recording_for_organizer")}
372-
labelClassName="text-sm leading-6 whitespace-normal break-words"
373-
checked={value}
374-
onCheckedChange={onChange}
375-
Badge={<UpgradeTeamsBadge checkForActiveStatus />}
376-
/>
377-
);
378-
}}
379-
/>
380-
381-
{!isPlatform && (
382-
<Controller
383-
name="calVideoSettings.enableAutomaticRecordingForOrganizer"
384-
defaultValue={!!eventType.calVideoSettings?.enableAutomaticRecordingForOrganizer}
385-
render={({ field: { onChange, value } }) => {
386-
return (
387-
<SettingsToggle
388-
title={t("enable_automatic_recording")}
389-
labelClassName="text-sm"
390-
checked={value}
391-
onCheckedChange={onChange}
392-
Badge={<UpgradeTeamsBadge checkForActiveStatus />}
393-
/>
394-
);
395-
}}
396-
/>
397-
)}
398-
399-
<Controller
400-
name="calVideoSettings.enableAutomaticTranscription"
401-
defaultValue={!!eventType.calVideoSettings?.enableAutomaticTranscription}
402-
render={({ field: { onChange, value } }) => {
403-
return (
404-
<SettingsToggle
405-
title={t("enable_automatic_transcription")}
406-
labelClassName="text-sm leading-6 whitespace-normal break-words"
407-
checked={value}
408-
onCheckedChange={onChange}
409-
Badge={<UpgradeTeamsBadge checkForActiveStatus />}
410-
/>
411-
);
412-
}}
413-
/>
414-
415-
{!isPlatform && (
416-
<Controller
417-
name="calVideoSettings.disableTranscriptionForGuests"
418-
defaultValue={!!eventType.calVideoSettings?.disableTranscriptionForGuests}
419-
render={({ field: { onChange, value } }) => {
420-
return (
421-
<SettingsToggle
422-
title={t("disable_transcription_for_guests")}
423-
labelClassName="text-sm leading-6 whitespace-normal break-words"
424-
checked={value}
425-
onCheckedChange={onChange}
426-
Badge={<UpgradeTeamsBadge checkForActiveStatus />}
427-
/>
428-
);
429-
}}
430-
/>
431-
)}
432-
{!isPlatform && (
433-
<Controller
434-
name="calVideoSettings.disableTranscriptionForOrganizer"
435-
defaultValue={!!eventType.calVideoSettings?.disableTranscriptionForOrganizer}
436-
render={({ field: { onChange, value } }) => {
437-
return (
438-
<SettingsToggle
439-
title={t("disable_transcription_for_organizer")}
440-
labelClassName="text-sm leading-6 whitespace-normal break-words"
441-
checked={value}
442-
onCheckedChange={onChange}
443-
Badge={<UpgradeTeamsBadge checkForActiveStatus />}
444-
/>
445-
);
446-
}}
447-
/>
448-
)}
449-
450-
<TextField
451-
label={t("enter_redirect_url_on_exit_description")}
452-
defaultValue={eventType.calVideoSettings?.redirectUrlOnExit || ""}
453-
data-testid="calVideoSettings.redirectUrlOnExit"
454-
containerClassName="mt-4"
455-
className="leading-6"
456-
{...formMethods.register("calVideoSettings.redirectUrlOnExit", {
457-
setValueAs: (v) => (!v || v.trim() === "" ? null : v),
458-
})}
459-
/>
460-
<ErrorMessage
461-
errors={formMethods.formState.errors?.calVideoSettings}
462-
name="redirectUrlOnExit"
463-
className={classNames("text-error text-sm")}
464-
as="div"
465-
id="calVideoSettings.redirectUrlOnExit-error"
466-
/>
467-
</div>
468-
</div>
469-
</div>
470-
)}
344+
{isCalVideo && !isPlatform && <CalVideoSettings />}
471345

472346
{eventLocationType?.organizerInputType && (
473347
<div className="mt-2 space-y-2">

‎packages/features/eventtypes/components/tabs/setup/EventSetupTab.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ import type { MultiValue } from "react-select";
55

66
import { useIsPlatform } from "@calcom/atoms/hooks/useIsPlatform";
77
import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
8-
import type { LocationCustomClassNames } from "@calcom/features/eventtypes/components/Locations";
9-
import Locations from "@calcom/features/eventtypes/components/Locations";
108
import type {
119
EventTypeSetupProps,
1210
InputClassNames,
@@ -28,6 +26,9 @@ import { Select } from "@calcom/ui/components/form";
2826
import { SettingsToggle } from "@calcom/ui/components/form";
2927
import { Skeleton } from "@calcom/ui/components/skeleton";
3028

29+
import type { LocationCustomClassNames } from "../../locations/Locations";
30+
import Locations from "../../locations/Locations";
31+
3132
export type EventSetupTabCustomClassNames = {
3233
wrapper?: string;
3334
titleSection?: {

‎packages/features/eventtypes/lib/types.ts‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -168,15 +168,7 @@ export type FormValues = {
168168
restrictionScheduleId: number | null;
169169
useBookerTimezone: boolean;
170170
restrictionScheduleName: string | null;
171-
calVideoSettings?: {
172-
disableRecordingForOrganizer?: boolean;
173-
disableRecordingForGuests?: boolean;
174-
enableAutomaticTranscription?: boolean;
175-
enableAutomaticRecordingForOrganizer?: boolean;
176-
disableTranscriptionForGuests?: boolean;
177-
disableTranscriptionForOrganizer?: boolean;
178-
redirectUrlOnExit?: string;
179-
};
171+
calVideoSettings?: CalVideoSettings;
180172
maxActiveBookingPerBookerOfferReschedule: boolean;
181173
};
182174

@@ -243,3 +235,13 @@ export interface EventTypePlatformWrapperRef {
243235
validateForm: () => Promise<FormValidationResult>;
244236
handleFormSubmit: (callbacks?: { onSuccess?: () => void; onError?: (error: Error) => void }) => void;
245237
}
238+
239+
export interface CalVideoSettings {
240+
disableRecordingForOrganizer?: boolean;
241+
disableRecordingForGuests?: boolean;
242+
enableAutomaticTranscription?: boolean;
243+
enableAutomaticRecordingForOrganizer?: boolean;
244+
disableTranscriptionForGuests?: boolean;
245+
disableTranscriptionForOrganizer?: boolean;
246+
redirectUrlOnExit?: string;
247+
}

0 commit comments

Comments
 (0)