feat: added custom classnames to event-assignment tab atom (#17527)
* added classNames to common types * Update types.ts * feat: added custom classnames to event-assignment tab atom * Update EventTypePlatformWrapper.tsx * update: better classnames * added example clasnames for demo * fix: classnames * fix: type check * fixed classnames * fix: better calssnames assingAllTeamMembersToggle -> assingAllTeamMembers enableWeightsToggle -> enableWeights assingAllTeamMembersToggle -> assingAllTeamMembers
This commit is contained in:
Somay Chauhan
@@ -9,14 +9,19 @@ import {
|
||||
AddMembersWithSwitchPlatformWrapper,
|
||||
} from "@calcom/atoms/monorepo";
|
||||
import { Segment } from "@calcom/features/Segment";
|
||||
import type { FormValues, Host, TeamMember } from "@calcom/features/eventtypes/lib/types";
|
||||
import type {
|
||||
FormValues,
|
||||
Host,
|
||||
SettingsToggleClassNames,
|
||||
TeamMember,
|
||||
} from "@calcom/features/eventtypes/lib/types";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import type { AttributesQueryValue } from "@calcom/lib/raqb/types";
|
||||
import { Label, SettingsToggle } from "@calcom/ui";
|
||||
|
||||
import AssignAllTeamMembers from "./AssignAllTeamMembers";
|
||||
import CheckedTeamSelect from "./CheckedTeamSelect";
|
||||
import type { CheckedSelectOption } from "./CheckedTeamSelect";
|
||||
import type { CheckedSelectOption, CheckedTeamSelectCustomClassNames } from "./CheckedTeamSelect";
|
||||
|
||||
interface IUserToValue {
|
||||
id: number | null;
|
||||
@@ -57,6 +62,7 @@ const CheckedHostField = ({
|
||||
onChange,
|
||||
helperText,
|
||||
isRRWeightsEnabled,
|
||||
customClassNames,
|
||||
...rest
|
||||
}: {
|
||||
labelText?: string;
|
||||
@@ -100,6 +106,7 @@ const CheckedHostField = ({
|
||||
options={options}
|
||||
placeholder={placeholder}
|
||||
isRRWeightsEnabled={isRRWeightsEnabled}
|
||||
customClassNames={customClassNames}
|
||||
{...rest}
|
||||
/>
|
||||
</div>
|
||||
@@ -154,6 +161,11 @@ function MembersSegmentWithToggle({
|
||||
);
|
||||
}
|
||||
|
||||
export type AddMembersWithSwitchCustomClassNames = {
|
||||
assingAllTeamMembers?: SettingsToggleClassNames;
|
||||
teamMemberSelect?: CheckedTeamSelectCustomClassNames;
|
||||
};
|
||||
|
||||
export type AddMembersWithSwitchProps = {
|
||||
teamMembers: TeamMember[];
|
||||
value: Host[];
|
||||
@@ -168,6 +180,7 @@ export type AddMembersWithSwitchProps = {
|
||||
teamId: number;
|
||||
isSegmentApplicable?: boolean;
|
||||
"data-testid"?: string;
|
||||
customClassNames?: AddMembersWithSwitchCustomClassNames;
|
||||
};
|
||||
|
||||
const enum AssignmentState {
|
||||
@@ -232,6 +245,7 @@ export function AddMembersWithSwitch({
|
||||
isRRWeightsEnabled,
|
||||
teamId,
|
||||
isSegmentApplicable,
|
||||
customClassNames,
|
||||
...rest
|
||||
}: AddMembersWithSwitchProps) {
|
||||
const { t } = useLocale();
|
||||
@@ -267,6 +281,7 @@ export function AddMembersWithSwitch({
|
||||
onActive();
|
||||
}}
|
||||
onInactive={onAssignAllTeamMembersInactive}
|
||||
customClassNames={customClassNames?.assingAllTeamMembers}
|
||||
/>
|
||||
{assignmentState !== AssignmentState.ALL_TEAM_MEMBERS_ENABLED_AND_SEGMENT_NOT_APPLICABLE && (
|
||||
<div className="mt-2">
|
||||
@@ -293,6 +308,7 @@ export function AddMembersWithSwitch({
|
||||
setAssignAllTeamMembers={setAssignAllTeamMembers}
|
||||
onActive={onActive}
|
||||
onInactive={onAssignAllTeamMembersInactive}
|
||||
customClassNames={customClassNames?.assingAllTeamMembers}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
@@ -306,6 +322,7 @@ export function AddMembersWithSwitch({
|
||||
options={teamMembers.sort(sortByLabel)}
|
||||
placeholder={placeholder ?? t("add_attendees")}
|
||||
isRRWeightsEnabled={isRRWeightsEnabled}
|
||||
customClassNames={customClassNames?.teamMemberSelect}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import type { Dispatch, SetStateAction } from "react";
|
||||
import { Controller, useFormContext } from "react-hook-form";
|
||||
|
||||
import type { FormValues } from "@calcom/features/eventtypes/lib/types";
|
||||
import type { FormValues, SettingsToggleClassNames } from "@calcom/features/eventtypes/lib/types";
|
||||
import { classNames } from "@calcom/lib";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { SettingsToggle } from "@calcom/ui";
|
||||
|
||||
@@ -10,11 +11,13 @@ const AssignAllTeamMembers = ({
|
||||
setAssignAllTeamMembers,
|
||||
onActive,
|
||||
onInactive,
|
||||
customClassNames,
|
||||
}: {
|
||||
assignAllTeamMembers: boolean;
|
||||
setAssignAllTeamMembers: Dispatch<SetStateAction<boolean>>;
|
||||
onActive: () => void;
|
||||
onInactive?: () => void;
|
||||
customClassNames?: SettingsToggleClassNames;
|
||||
}) => {
|
||||
const { t } = useLocale();
|
||||
const { setValue } = useFormContext<FormValues>();
|
||||
@@ -26,7 +29,8 @@ const AssignAllTeamMembers = ({
|
||||
<SettingsToggle
|
||||
data-testid="assign-all-team-members-toggle"
|
||||
title={t("automatically_add_all_team_members")}
|
||||
labelClassName="mt-0.5 font-normal"
|
||||
labelClassName={classNames("mt-0.5 font-normal", customClassNames?.label)}
|
||||
switchContainerClassName={customClassNames?.container}
|
||||
checked={assignAllTeamMembers}
|
||||
onCheckedChange={(active) => {
|
||||
setValue("assignAllTeamMembers", active, { shouldDirty: true });
|
||||
|
||||
@@ -5,10 +5,12 @@ import { useState } from "react";
|
||||
import type { Props } from "react-select";
|
||||
|
||||
import { useIsPlatform } from "@calcom/atoms/monorepo";
|
||||
import type { SelectClassNames } from "@calcom/features/eventtypes/lib/types";
|
||||
import { classNames } from "@calcom/lib";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { Avatar, Button, Icon, Select, Tooltip } from "@calcom/ui";
|
||||
|
||||
import type { PriorityDialogCustomClassNames, WeightDialogCustomClassNames } from "./HostEditDialogs";
|
||||
import { PriorityDialog, WeightDialog } from "./HostEditDialogs";
|
||||
|
||||
export type CheckedSelectOption = {
|
||||
@@ -22,15 +24,33 @@ export type CheckedSelectOption = {
|
||||
defaultScheduleId?: number | null;
|
||||
};
|
||||
|
||||
export type CheckedTeamSelectCustomClassNames = {
|
||||
hostsSelect?: SelectClassNames;
|
||||
selectedHostList?: {
|
||||
container?: string;
|
||||
listItem?: {
|
||||
container?: string;
|
||||
avatar?: string;
|
||||
name?: string;
|
||||
changePriorityButton?: string;
|
||||
changeWeightButton?: string;
|
||||
removeButton?: string;
|
||||
};
|
||||
};
|
||||
priorityDialog?: PriorityDialogCustomClassNames;
|
||||
weightDialog?: WeightDialogCustomClassNames;
|
||||
};
|
||||
export const CheckedTeamSelect = ({
|
||||
options = [],
|
||||
value = [],
|
||||
isRRWeightsEnabled,
|
||||
customClassNames,
|
||||
...props
|
||||
}: Omit<Props<CheckedSelectOption, true>, "value" | "onChange"> & {
|
||||
value?: readonly CheckedSelectOption[];
|
||||
onChange: (value: readonly CheckedSelectOption[]) => void;
|
||||
isRRWeightsEnabled?: boolean;
|
||||
customClassNames?: CheckedTeamSelectCustomClassNames;
|
||||
}) => {
|
||||
const isPlatform = useIsPlatform();
|
||||
const [priorityDialogOpen, setPriorityDialogOpen] = useState(false);
|
||||
@@ -50,21 +70,44 @@ export const CheckedTeamSelect = ({
|
||||
options={options}
|
||||
value={value}
|
||||
isMulti
|
||||
className={customClassNames?.hostsSelect?.select}
|
||||
innerClassNames={customClassNames?.hostsSelect?.innerClassNames}
|
||||
{...props}
|
||||
/>
|
||||
{/* This class name conditional looks a bit odd but it allows a seemless transition when using autoanimate
|
||||
- Slides down from the top instead of just teleporting in from nowhere*/}
|
||||
<ul
|
||||
className={classNames("mb-4 mt-3 rounded-md", value.length >= 1 && "border-subtle border")}
|
||||
className={classNames(
|
||||
"mb-4 mt-3 rounded-md",
|
||||
value.length >= 1 && "border-subtle border",
|
||||
customClassNames?.selectedHostList?.container
|
||||
)}
|
||||
ref={animationRef}>
|
||||
{value.map((option, index) => (
|
||||
<>
|
||||
<li
|
||||
key={option.value}
|
||||
className={`flex px-3 py-2 ${index === value.length - 1 ? "" : "border-subtle border-b"}`}>
|
||||
className={classNames(
|
||||
`flex px-3 py-2 ${index === value.length - 1 ? "" : "border-subtle border-b"}`,
|
||||
customClassNames?.selectedHostList?.listItem?.container
|
||||
)}>
|
||||
{!isPlatform && <Avatar size="sm" imageSrc={option.avatar} alt={option.label} />}
|
||||
{isPlatform && <Icon name="user" className="mt-0.5 h-4 w-4" />}
|
||||
<p className="text-emphasis my-auto ms-3 text-sm">{option.label}</p>
|
||||
{isPlatform && (
|
||||
<Icon
|
||||
name="user"
|
||||
className={classNames(
|
||||
"mt-0.5 h-4 w-4",
|
||||
customClassNames?.selectedHostList?.listItem?.avatar
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
<p
|
||||
className={classNames(
|
||||
"text-emphasis my-auto ms-3 text-sm",
|
||||
customClassNames?.selectedHostList?.listItem?.name
|
||||
)}>
|
||||
{option.label}
|
||||
</p>
|
||||
<div className="ml-auto flex items-center">
|
||||
{option && !option.isFixed ? (
|
||||
<>
|
||||
@@ -77,7 +120,8 @@ export const CheckedTeamSelect = ({
|
||||
}}
|
||||
className={classNames(
|
||||
"mr-6 h-2 p-0 text-sm hover:bg-transparent",
|
||||
getPriorityTextAndColor(option.priority).color
|
||||
getPriorityTextAndColor(option.priority).color,
|
||||
customClassNames?.selectedHostList?.listItem?.changePriorityButton
|
||||
)}>
|
||||
{t(getPriorityTextAndColor(option.priority).text)}
|
||||
</Button>
|
||||
@@ -85,7 +129,10 @@ export const CheckedTeamSelect = ({
|
||||
{isRRWeightsEnabled ? (
|
||||
<Button
|
||||
color="minimal"
|
||||
className="mr-6 h-2 w-4 p-0 text-sm hover:bg-transparent"
|
||||
className={classNames(
|
||||
"mr-6 h-2 w-4 p-0 text-sm hover:bg-transparent",
|
||||
customClassNames?.selectedHostList?.listItem?.changeWeightButton
|
||||
)}
|
||||
onClick={() => {
|
||||
setWeightDialogOpen(true);
|
||||
setCurrentOption(option);
|
||||
@@ -103,7 +150,10 @@ export const CheckedTeamSelect = ({
|
||||
<Icon
|
||||
name="x"
|
||||
onClick={() => props.onChange(value.filter((item) => item.value !== option.value))}
|
||||
className="my-auto ml-2 h-4 w-4"
|
||||
className={classNames(
|
||||
"my-auto ml-2 h-4 w-4",
|
||||
customClassNames?.selectedHostList?.listItem?.removeButton
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
@@ -117,12 +167,14 @@ export const CheckedTeamSelect = ({
|
||||
setIsOpenDialog={setPriorityDialogOpen}
|
||||
option={currentOption}
|
||||
onChange={props.onChange}
|
||||
customClassNames={customClassNames?.priorityDialog}
|
||||
/>
|
||||
<WeightDialog
|
||||
isOpenDialog={weightDialogOpen}
|
||||
setIsOpenDialog={setWeightDialogOpen}
|
||||
option={currentOption}
|
||||
onChange={props.onChange}
|
||||
customClassNames={customClassNames?.weightDialog}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useAutoAnimate } from "@formkit/auto-animate/react";
|
||||
import type { Props } from "react-select";
|
||||
|
||||
import type { SelectClassNames } from "@calcom/features/eventtypes/lib/types";
|
||||
import { classNames } from "@calcom/lib";
|
||||
import { getBookerBaseUrlSync } from "@calcom/lib/getBookerUrl/client";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
@@ -26,14 +27,38 @@ export type ChildrenEventType = {
|
||||
hidden: boolean;
|
||||
};
|
||||
|
||||
export type ChildrenEventTypeSelectCustomClassNames = {
|
||||
assignToSelect?: SelectClassNames;
|
||||
selectedChildrenList?: {
|
||||
container?: string;
|
||||
listItem?: {
|
||||
container?: string;
|
||||
avatar?: string;
|
||||
name?: string;
|
||||
ownerBadge?: string;
|
||||
memberBadge?: string;
|
||||
hiddenBadge?: string;
|
||||
badgeContainer?: string;
|
||||
eventLink?: string;
|
||||
showOnProfileTooltip?: string;
|
||||
previewEventTypeTooltip?: string;
|
||||
previewEventTypeButton?: string;
|
||||
deleteEventTypeTooltip?: string;
|
||||
deleteEventTypeButton?: string;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
// TODO: This isnt just a select... rename this component in the future took me ages to find the component i was looking for
|
||||
export const ChildrenEventTypeSelect = ({
|
||||
options = [],
|
||||
value = [],
|
||||
customClassNames,
|
||||
...props
|
||||
}: Omit<Props<ChildrenEventType, true>, "value" | "onChange"> & {
|
||||
value?: ChildrenEventType[];
|
||||
onChange: (value: readonly ChildrenEventType[]) => void;
|
||||
customClassNames?: ChildrenEventTypeSelectCustomClassNames;
|
||||
}) => {
|
||||
const { t } = useLocale();
|
||||
const [animationRef] = useAutoAnimate<HTMLUListElement>();
|
||||
@@ -44,6 +69,8 @@ export const ChildrenEventTypeSelect = ({
|
||||
name={props.name}
|
||||
placeholder={t("select")}
|
||||
options={options}
|
||||
className={customClassNames?.assignToSelect?.select}
|
||||
innerClassNames={customClassNames?.assignToSelect?.innerClassNames}
|
||||
value={value}
|
||||
isMulti
|
||||
{...props}
|
||||
@@ -53,39 +80,75 @@ export const ChildrenEventTypeSelect = ({
|
||||
<ul
|
||||
className={classNames(
|
||||
"border-subtle divide-subtle mt-3 divide-y rounded-md",
|
||||
value.length >= 1 && "border"
|
||||
value.length >= 1 && "border",
|
||||
customClassNames?.selectedChildrenList?.container
|
||||
)}
|
||||
ref={animationRef}>
|
||||
{value.map((children, index) => (
|
||||
<li key={index}>
|
||||
<div className="flex flex-row items-center gap-3 p-3">
|
||||
<div
|
||||
className={classNames(
|
||||
"flex flex-row items-center gap-3 p-3",
|
||||
customClassNames?.selectedChildrenList?.listItem?.container
|
||||
)}>
|
||||
<Avatar
|
||||
size="mdLg"
|
||||
className="overflow-visible"
|
||||
className={classNames(
|
||||
"overflow-visible",
|
||||
customClassNames?.selectedChildrenList?.listItem?.avatar
|
||||
)}
|
||||
imageSrc={children.owner.avatar}
|
||||
alt={children.owner.name || children.owner.email || ""}
|
||||
/>
|
||||
<div className="flex w-full flex-row justify-between">
|
||||
<div className="flex flex-col">
|
||||
<span className="text text-sm font-semibold leading-none">
|
||||
<span
|
||||
className={classNames(
|
||||
"text text-sm font-semibold leading-none",
|
||||
customClassNames?.selectedChildrenList?.listItem?.name
|
||||
)}>
|
||||
{children.owner.name || children.owner.email}
|
||||
<div className="flex flex-row gap-1">
|
||||
<div
|
||||
className={classNames(
|
||||
"flex flex-row gap-1",
|
||||
customClassNames?.selectedChildrenList?.listItem?.badgeContainer
|
||||
)}>
|
||||
{children.owner.membership === MembershipRole.OWNER ? (
|
||||
<Badge variant="gray">{t("owner")}</Badge>
|
||||
<Badge
|
||||
variant="gray"
|
||||
className={customClassNames?.selectedChildrenList?.listItem?.ownerBadge}>
|
||||
{t("owner")}
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="gray">{t("member")}</Badge>
|
||||
<Badge
|
||||
variant="gray"
|
||||
className={customClassNames?.selectedChildrenList?.listItem?.memberBadge}>
|
||||
{t("member")}
|
||||
</Badge>
|
||||
)}
|
||||
{children.hidden && (
|
||||
<Badge
|
||||
variant="gray"
|
||||
className={customClassNames?.selectedChildrenList?.listItem?.hiddenBadge}>
|
||||
{t("hidden")}
|
||||
</Badge>
|
||||
)}
|
||||
{children.hidden && <Badge variant="gray">{t("hidden")}</Badge>}
|
||||
</div>
|
||||
</span>
|
||||
{children.owner.username && (
|
||||
<small className="text-subtle font-normal leading-normal">
|
||||
<small
|
||||
className={classNames(
|
||||
"text-subtle font-normal leading-normal",
|
||||
customClassNames?.selectedChildrenList?.listItem?.eventLink
|
||||
)}>
|
||||
{`/${children.owner.username}/${children.slug}`}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-row items-center gap-2">
|
||||
<Tooltip content={t("show_eventtype_on_profile")}>
|
||||
<div className={classNames("flex flex-row items-center gap-2")}>
|
||||
<Tooltip
|
||||
className={customClassNames?.selectedChildrenList?.listItem?.showOnProfileTooltip}
|
||||
content={t("show_eventtype_on_profile")}>
|
||||
<div className="self-center rounded-md p-2">
|
||||
<Switch
|
||||
name="Hidden"
|
||||
@@ -101,12 +164,15 @@ export const ChildrenEventTypeSelect = ({
|
||||
</Tooltip>
|
||||
<ButtonGroup combined>
|
||||
{children.created && children.owner.username && (
|
||||
<Tooltip content={t("preview")}>
|
||||
<Tooltip
|
||||
className={customClassNames?.selectedChildrenList?.listItem?.previewEventTypeTooltip}
|
||||
content={t("preview")}>
|
||||
<Button
|
||||
data-testid="preview-button"
|
||||
color="secondary"
|
||||
target="_blank"
|
||||
variant="icon"
|
||||
className={customClassNames?.selectedChildrenList?.listItem?.previewEventTypeButton}
|
||||
href={`${getBookerBaseUrlSync(
|
||||
children.owner.profile?.organization?.slug ?? null
|
||||
)}/${children.owner?.username}/${children.slug}`}
|
||||
@@ -114,11 +180,14 @@ export const ChildrenEventTypeSelect = ({
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Tooltip content={t("delete")}>
|
||||
<Tooltip
|
||||
className={customClassNames?.selectedChildrenList?.listItem?.deleteEventTypeTooltip}
|
||||
content={t("delete")}>
|
||||
<Button
|
||||
color="secondary"
|
||||
target="_blank"
|
||||
variant="icon"
|
||||
className={customClassNames?.selectedChildrenList?.listItem?.deleteEventTypeButton}
|
||||
onClick={() =>
|
||||
props.onChange(value.filter((item) => item.owner.id !== children.owner.id))
|
||||
}
|
||||
|
||||
@@ -4,7 +4,13 @@ import type { Dispatch, SetStateAction } from "react";
|
||||
import { useState } from "react";
|
||||
import { useFormContext } from "react-hook-form";
|
||||
|
||||
import type { FormValues, Host } from "@calcom/features/eventtypes/lib/types";
|
||||
import type {
|
||||
FormValues,
|
||||
Host,
|
||||
InputClassNames,
|
||||
SelectClassNames,
|
||||
} from "@calcom/features/eventtypes/lib/types";
|
||||
import { classNames } from "@calcom/lib";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import {
|
||||
Dialog,
|
||||
@@ -26,9 +32,17 @@ interface IDialog {
|
||||
onChange: (value: readonly CheckedSelectOption[]) => void;
|
||||
}
|
||||
|
||||
export const PriorityDialog = (props: IDialog) => {
|
||||
export type PriorityDialogCustomClassNames = SelectClassNames & {
|
||||
confirmButton?: string;
|
||||
};
|
||||
|
||||
export const PriorityDialog = (
|
||||
props: IDialog & {
|
||||
customClassNames?: PriorityDialogCustomClassNames;
|
||||
}
|
||||
) => {
|
||||
const { t } = useLocale();
|
||||
const { isOpenDialog, setIsOpenDialog, option, onChange } = props;
|
||||
const { isOpenDialog, setIsOpenDialog, option, onChange, customClassNames } = props;
|
||||
const { getValues } = useFormContext<FormValues>();
|
||||
|
||||
const priorityOptions = [
|
||||
@@ -65,10 +79,14 @@ export const PriorityDialog = (props: IDialog) => {
|
||||
return (
|
||||
<Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
|
||||
<DialogContent title={t("set_priority")}>
|
||||
<div className="mb-4">
|
||||
<Label>{t("priority_for_user", { userName: option.label })}</Label>
|
||||
<div className={classNames("mb-4", customClassNames?.container)}>
|
||||
<Label className={customClassNames?.label}>
|
||||
{t("priority_for_user", { userName: option.label })}
|
||||
</Label>
|
||||
<Select
|
||||
defaultValue={priorityOptions[option.priority ?? 2]}
|
||||
className={customClassNames?.select}
|
||||
innerClassNames={customClassNames?.innerClassNames}
|
||||
value={newPriority}
|
||||
onChange={(value) => setNewPriority(value ?? priorityOptions[2])}
|
||||
options={priorityOptions}
|
||||
@@ -77,7 +95,9 @@ export const PriorityDialog = (props: IDialog) => {
|
||||
|
||||
<DialogFooter>
|
||||
<DialogClose onClick={() => setNewPriority(undefined)} />
|
||||
<Button onClick={setPriority}>{t("confirm")}</Button>
|
||||
<Button onClick={setPriority} className={customClassNames?.confirmButton}>
|
||||
{t("confirm")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
@@ -117,9 +137,15 @@ export function sortHosts(
|
||||
}
|
||||
}
|
||||
|
||||
export const WeightDialog = (props: IDialog) => {
|
||||
export type WeightDialogCustomClassNames = {
|
||||
container?: string;
|
||||
label?: string;
|
||||
confirmButton?: string;
|
||||
weightInput?: InputClassNames;
|
||||
};
|
||||
export const WeightDialog = (props: IDialog & { customClassNames?: WeightDialogCustomClassNames }) => {
|
||||
const { t } = useLocale();
|
||||
const { isOpenDialog, setIsOpenDialog, option, onChange } = props;
|
||||
const { isOpenDialog, setIsOpenDialog, option, onChange, customClassNames } = props;
|
||||
const { getValues } = useFormContext<FormValues>();
|
||||
const [newWeight, setNewWeight] = useState<number | undefined>();
|
||||
|
||||
@@ -147,12 +173,17 @@ export const WeightDialog = (props: IDialog) => {
|
||||
return (
|
||||
<Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
|
||||
<DialogContent title={t("set_weight")} description={weightDescription}>
|
||||
<div className="mb-4 mt-2">
|
||||
<Label>{t("weight_for_user", { userName: option.label })}</Label>
|
||||
<div className="w-36">
|
||||
<div className={classNames("mb-4 mt-2", customClassNames?.container)}>
|
||||
<Label className={customClassNames?.label}>
|
||||
{t("weight_for_user", { userName: option.label })}
|
||||
</Label>
|
||||
<div className={classNames("w-36", customClassNames?.weightInput?.container)}>
|
||||
<TextField
|
||||
required
|
||||
min={0}
|
||||
className={customClassNames?.weightInput?.input}
|
||||
labelClassName={customClassNames?.weightInput?.label}
|
||||
addOnClassname={customClassNames?.weightInput?.addOn}
|
||||
label={t("Weight")}
|
||||
value={newWeight}
|
||||
defaultValue={option.weight ?? 100}
|
||||
@@ -164,7 +195,9 @@ export const WeightDialog = (props: IDialog) => {
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<DialogClose onClick={() => setNewWeight(undefined)} />
|
||||
<Button onClick={setWeight}>{t("confirm")}</Button>
|
||||
<Button onClick={setWeight} className={customClassNames?.confirmButton}>
|
||||
{t("confirm")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
+138
-22
@@ -5,10 +5,12 @@ import type { ComponentProps, Dispatch, SetStateAction } from "react";
|
||||
import { Controller, useFormContext, useWatch } from "react-hook-form";
|
||||
import type { Options } from "react-select";
|
||||
|
||||
import type { AddMembersWithSwitchCustomClassNames } from "@calcom/features/eventtypes/components/AddMembersWithSwitch";
|
||||
import AddMembersWithSwitch, {
|
||||
mapUserToValue,
|
||||
} from "@calcom/features/eventtypes/components/AddMembersWithSwitch";
|
||||
import AssignAllTeamMembers from "@calcom/features/eventtypes/components/AssignAllTeamMembers";
|
||||
import type { ChildrenEventTypeSelectCustomClassNames } from "@calcom/features/eventtypes/components/ChildrenEventTypeSelect";
|
||||
import ChildrenEventTypeSelect from "@calcom/features/eventtypes/components/ChildrenEventTypeSelect";
|
||||
import { sortHosts, weightDescription } from "@calcom/features/eventtypes/components/HostEditDialogs";
|
||||
import type {
|
||||
@@ -16,15 +18,30 @@ import type {
|
||||
TeamMember,
|
||||
EventTypeSetupProps,
|
||||
Host,
|
||||
SelectClassNames,
|
||||
SettingsToggleClassNames,
|
||||
} from "@calcom/features/eventtypes/lib/types";
|
||||
import { classNames } from "@calcom/lib";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { SchedulingType } from "@calcom/prisma/enums";
|
||||
import { Label, Select, SettingsToggle, RadioGroup as RadioArea } from "@calcom/ui";
|
||||
|
||||
export type EventTeamAssignmentTabCustomClassNames = {
|
||||
assignmentType?: {
|
||||
container?: string;
|
||||
label?: string;
|
||||
description?: string;
|
||||
schedulingTypeSelect?: SelectClassNames;
|
||||
};
|
||||
hosts?: HostsCustomClassNames;
|
||||
childrenEventTypes?: ChildrenEventTypesCustomClassNames;
|
||||
};
|
||||
|
||||
export type EventTeamAssignmentTabBaseProps = Pick<
|
||||
EventTypeSetupProps,
|
||||
"teamMembers" | "team" | "eventType"
|
||||
> & {
|
||||
customClassNames?: EventTeamAssignmentTabCustomClassNames;
|
||||
orgId: number | null;
|
||||
isSegmentApplicable: boolean;
|
||||
};
|
||||
@@ -57,17 +74,19 @@ const ChildrenEventTypesList = ({
|
||||
options = [],
|
||||
value,
|
||||
onChange,
|
||||
customClassNames,
|
||||
...rest
|
||||
}: {
|
||||
value: ReturnType<typeof mapMemberToChildrenOption>[];
|
||||
onChange?: (options: ReturnType<typeof mapMemberToChildrenOption>[]) => void;
|
||||
options?: Options<ReturnType<typeof mapMemberToChildrenOption>>;
|
||||
customClassNames?: ChildrenEventTypeSelectCustomClassNames;
|
||||
} & Omit<Partial<ComponentProps<typeof ChildrenEventTypeSelect>>, "onChange" | "value">) => {
|
||||
const { t } = useLocale();
|
||||
return (
|
||||
<div className="flex flex-col space-y-5">
|
||||
<div className={classNames("flex flex-col space-y-5", customClassNames?.assignToSelect?.container)}>
|
||||
<div>
|
||||
<Label>{t("assign_to")}</Label>
|
||||
<Label className={customClassNames?.assignToSelect?.label}>{t("assign_to")}</Label>
|
||||
<ChildrenEventTypeSelect
|
||||
aria-label="assignment-dropdown"
|
||||
data-testid="assignment-dropdown"
|
||||
@@ -82,6 +101,7 @@ const ChildrenEventTypesList = ({
|
||||
value={value}
|
||||
options={options.filter((opt) => !value.find((val) => val.owner.id.toString() === opt.value))}
|
||||
controlShouldRenderValue={false}
|
||||
customClassNames={customClassNames}
|
||||
{...rest}
|
||||
/>
|
||||
</div>
|
||||
@@ -101,6 +121,9 @@ const FixedHostHelper = (
|
||||
</Trans>
|
||||
);
|
||||
|
||||
type FixedHostsCustomClassNames = SettingsToggleClassNames & {
|
||||
addMembers?: AddMembersWithSwitchCustomClassNames;
|
||||
};
|
||||
const FixedHosts = ({
|
||||
teamId,
|
||||
teamMembers,
|
||||
@@ -109,6 +132,7 @@ const FixedHosts = ({
|
||||
assignAllTeamMembers,
|
||||
setAssignAllTeamMembers,
|
||||
isRoundRobinEvent = false,
|
||||
customClassNames,
|
||||
}: {
|
||||
teamId: number;
|
||||
value: Host[];
|
||||
@@ -117,6 +141,7 @@ const FixedHosts = ({
|
||||
assignAllTeamMembers: boolean;
|
||||
setAssignAllTeamMembers: Dispatch<SetStateAction<boolean>>;
|
||||
isRoundRobinEvent?: boolean;
|
||||
customClassNames?: FixedHostsCustomClassNames;
|
||||
}) => {
|
||||
const { t } = useLocale();
|
||||
const { getValues, setValue } = useFormContext<FormValues>();
|
||||
@@ -126,12 +151,24 @@ const FixedHosts = ({
|
||||
const [isDisabled, setIsDisabled] = useState(hasActiveFixedHosts);
|
||||
|
||||
return (
|
||||
<div className="mt-5 rounded-lg">
|
||||
<div className={classNames("mt-5 rounded-lg", customClassNames?.container)}>
|
||||
{!isRoundRobinEvent ? (
|
||||
<>
|
||||
<div className="border-subtle mt-5 rounded-t-md border p-6 pb-5">
|
||||
<Label className="mb-1 text-sm font-semibold">{t("fixed_hosts")}</Label>
|
||||
<p className="text-subtle max-w-full break-words text-sm leading-tight">{FixedHostHelper}</p>
|
||||
<div
|
||||
className={classNames(
|
||||
"border-subtle mt-5 rounded-t-md border p-6 pb-5",
|
||||
customClassNames?.container
|
||||
)}>
|
||||
<Label className={classNames("mb-1 text-sm font-semibold", customClassNames?.label)}>
|
||||
{t("fixed_hosts")}
|
||||
</Label>
|
||||
<p
|
||||
className={classNames(
|
||||
"text-subtle max-w-full break-words text-sm leading-tight",
|
||||
customClassNames?.description
|
||||
)}>
|
||||
{FixedHostHelper}
|
||||
</p>
|
||||
</div>
|
||||
<div className="border-subtle rounded-b-md border border-t-0 px-6">
|
||||
<AddMembersWithSwitch
|
||||
@@ -143,6 +180,7 @@ const FixedHosts = ({
|
||||
setAssignAllTeamMembers={setAssignAllTeamMembers}
|
||||
automaticAddAllEnabled={!isRoundRobinEvent}
|
||||
isFixed={true}
|
||||
customClassNames={customClassNames?.addMembers}
|
||||
onActive={() => {
|
||||
const currentHosts = getValues("hosts");
|
||||
setValue(
|
||||
@@ -171,8 +209,9 @@ const FixedHosts = ({
|
||||
title={t("fixed_hosts")}
|
||||
description={FixedHostHelper}
|
||||
checked={isDisabled}
|
||||
labelClassName="text-sm"
|
||||
descriptionClassName=" text-sm text-subtle"
|
||||
labelClassName={classNames("text-sm", customClassNames?.label)}
|
||||
descriptionClassName={classNames("text-sm text-subtle", customClassNames?.description)}
|
||||
switchContainerClassName={customClassNames?.container}
|
||||
onCheckedChange={(checked) => {
|
||||
if (!checked) {
|
||||
const rrHosts = getValues("hosts")
|
||||
@@ -182,12 +221,13 @@ const FixedHosts = ({
|
||||
}
|
||||
setIsDisabled(checked);
|
||||
}}
|
||||
childrenClassName="lg:ml-0">
|
||||
childrenClassName={classNames("lg:ml-0", customClassNames?.children)}>
|
||||
<div className="border-subtle flex flex-col gap-6 rounded-bl-md rounded-br-md border border-t-0 px-6">
|
||||
<AddMembersWithSwitch
|
||||
data-testid="fixed-hosts-select"
|
||||
teamId={teamId}
|
||||
teamMembers={teamMembers}
|
||||
customClassNames={customClassNames?.addMembers}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
assignAllTeamMembers={assignAllTeamMembers}
|
||||
@@ -220,6 +260,14 @@ const FixedHosts = ({
|
||||
);
|
||||
};
|
||||
|
||||
type RoundRobinHostsCustomClassNames = {
|
||||
container?: string;
|
||||
label?: string;
|
||||
description?: string;
|
||||
enableWeights?: SettingsToggleClassNames;
|
||||
addMembers?: AddMembersWithSwitchCustomClassNames;
|
||||
};
|
||||
|
||||
const RoundRobinHosts = ({
|
||||
orgId,
|
||||
teamMembers,
|
||||
@@ -227,6 +275,7 @@ const RoundRobinHosts = ({
|
||||
onChange,
|
||||
assignAllTeamMembers,
|
||||
setAssignAllTeamMembers,
|
||||
customClassNames,
|
||||
teamId,
|
||||
isSegmentApplicable,
|
||||
}: {
|
||||
@@ -236,6 +285,7 @@ const RoundRobinHosts = ({
|
||||
teamMembers: TeamMember[];
|
||||
assignAllTeamMembers: boolean;
|
||||
setAssignAllTeamMembers: Dispatch<SetStateAction<boolean>>;
|
||||
customClassNames?: RoundRobinHostsCustomClassNames;
|
||||
teamId: number;
|
||||
isSegmentApplicable: boolean;
|
||||
}) => {
|
||||
@@ -249,10 +299,22 @@ const RoundRobinHosts = ({
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="rounded-lg ">
|
||||
<div className="border-subtle mt-5 rounded-t-md border p-6 pb-5">
|
||||
<Label className="mb-1 text-sm font-semibold">{t("round_robin_hosts")}</Label>
|
||||
<p className="text-subtle max-w-full break-words text-sm leading-tight">{t("round_robin_helper")}</p>
|
||||
<div className={classNames("rounded-lg")}>
|
||||
<div
|
||||
className={classNames(
|
||||
"border-subtle mt-5 rounded-t-md border p-6 pb-5",
|
||||
customClassNames?.container
|
||||
)}>
|
||||
<Label className={classNames("mb-1 text-sm font-semibold", customClassNames?.label)}>
|
||||
{t("round_robin_hosts")}
|
||||
</Label>
|
||||
<p
|
||||
className={classNames(
|
||||
"text-subtle max-w-full break-words text-sm leading-tight",
|
||||
customClassNames?.description
|
||||
)}>
|
||||
{t("round_robin_helper")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="border-subtle rounded-b-md border border-t-0 px-6 pt-4">
|
||||
{!assignAllTeamMembers && !assignRRMembersUsingSegment && (
|
||||
@@ -263,9 +325,11 @@ const RoundRobinHosts = ({
|
||||
title={t("enable_weights")}
|
||||
description={weightDescription}
|
||||
checked={value}
|
||||
switchContainerClassName={customClassNames?.enableWeights?.container}
|
||||
labelClassName={customClassNames?.enableWeights?.label}
|
||||
descriptionClassName={customClassNames?.enableWeights?.description}
|
||||
onCheckedChange={(active) => {
|
||||
onChange(active);
|
||||
|
||||
const rrHosts = getValues("hosts").filter((host) => !host.isFixed);
|
||||
const sortedRRHosts = rrHosts.sort((a, b) => sortHosts(a, b, active));
|
||||
setValue("hosts", sortedRRHosts);
|
||||
@@ -305,35 +369,54 @@ const RoundRobinHosts = ({
|
||||
);
|
||||
setValue("isRRWeightsEnabled", false);
|
||||
}}
|
||||
customClassNames={customClassNames?.addMembers}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
type ChildrenEventTypesCustomClassNames = {
|
||||
container?: string;
|
||||
assignAllTeamMembers?: SettingsToggleClassNames;
|
||||
childrenEventTypesList?: ChildrenEventTypeSelectCustomClassNames;
|
||||
};
|
||||
|
||||
const ChildrenEventTypes = ({
|
||||
childrenEventTypeOptions,
|
||||
assignAllTeamMembers,
|
||||
setAssignAllTeamMembers,
|
||||
customClassNames,
|
||||
}: {
|
||||
childrenEventTypeOptions: ReturnType<typeof mapMemberToChildrenOption>[];
|
||||
assignAllTeamMembers: boolean;
|
||||
setAssignAllTeamMembers: Dispatch<SetStateAction<boolean>>;
|
||||
customClassNames?: ChildrenEventTypesCustomClassNames;
|
||||
}) => {
|
||||
const { setValue } = useFormContext<FormValues>();
|
||||
return (
|
||||
<div className="border-subtle mt-6 space-y-5 rounded-lg border px-4 py-6 sm:px-6">
|
||||
<div
|
||||
className={classNames(
|
||||
"border-subtle mt-6 space-y-5 rounded-lg border px-4 py-6 sm:px-6",
|
||||
customClassNames?.container
|
||||
)}>
|
||||
<div className="flex flex-col gap-4">
|
||||
<AssignAllTeamMembers
|
||||
assignAllTeamMembers={assignAllTeamMembers}
|
||||
setAssignAllTeamMembers={setAssignAllTeamMembers}
|
||||
customClassNames={customClassNames?.assignAllTeamMembers}
|
||||
onActive={() => setValue("children", childrenEventTypeOptions, { shouldDirty: true })}
|
||||
/>
|
||||
{!assignAllTeamMembers ? (
|
||||
<Controller<FormValues>
|
||||
name="children"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<ChildrenEventTypesList value={value} options={childrenEventTypeOptions} onChange={onChange} />
|
||||
<ChildrenEventTypesList
|
||||
value={value}
|
||||
options={childrenEventTypeOptions}
|
||||
onChange={onChange}
|
||||
customClassNames={customClassNames?.childrenEventTypesList}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
@@ -344,12 +427,17 @@ const ChildrenEventTypes = ({
|
||||
);
|
||||
};
|
||||
|
||||
type HostsCustomClassNames = {
|
||||
fixedHosts?: FixedHostsCustomClassNames;
|
||||
roundRobinHosts?: RoundRobinHostsCustomClassNames;
|
||||
};
|
||||
const Hosts = ({
|
||||
orgId,
|
||||
teamId,
|
||||
teamMembers,
|
||||
assignAllTeamMembers,
|
||||
setAssignAllTeamMembers,
|
||||
customClassNames,
|
||||
isSegmentApplicable,
|
||||
}: {
|
||||
orgId: number | null;
|
||||
@@ -357,6 +445,7 @@ const Hosts = ({
|
||||
teamMembers: TeamMember[];
|
||||
assignAllTeamMembers: boolean;
|
||||
setAssignAllTeamMembers: Dispatch<SetStateAction<boolean>>;
|
||||
customClassNames?: HostsCustomClassNames;
|
||||
isSegmentApplicable: boolean;
|
||||
}) => {
|
||||
const {
|
||||
@@ -418,6 +507,7 @@ const Hosts = ({
|
||||
}}
|
||||
assignAllTeamMembers={assignAllTeamMembers}
|
||||
setAssignAllTeamMembers={setAssignAllTeamMembers}
|
||||
customClassNames={customClassNames?.fixedHosts}
|
||||
/>
|
||||
),
|
||||
ROUND_ROBIN: (
|
||||
@@ -432,6 +522,7 @@ const Hosts = ({
|
||||
assignAllTeamMembers={assignAllTeamMembers}
|
||||
setAssignAllTeamMembers={setAssignAllTeamMembers}
|
||||
isRoundRobinEvent={true}
|
||||
customClassNames={customClassNames?.fixedHosts}
|
||||
/>
|
||||
<RoundRobinHosts
|
||||
orgId={orgId}
|
||||
@@ -444,6 +535,7 @@ const Hosts = ({
|
||||
}}
|
||||
assignAllTeamMembers={assignAllTeamMembers}
|
||||
setAssignAllTeamMembers={setAssignAllTeamMembers}
|
||||
customClassNames={customClassNames?.roundRobinHosts}
|
||||
isSegmentApplicable={isSegmentApplicable}
|
||||
/>
|
||||
</>
|
||||
@@ -460,6 +552,7 @@ export const EventTeamAssignmentTab = ({
|
||||
team,
|
||||
teamMembers,
|
||||
eventType,
|
||||
customClassNames,
|
||||
orgId,
|
||||
isSegmentApplicable,
|
||||
}: EventTeamAssignmentTabBaseProps) => {
|
||||
@@ -514,22 +607,43 @@ export const EventTeamAssignmentTab = ({
|
||||
<div>
|
||||
{team && !isManagedEventType && (
|
||||
<>
|
||||
<div className="border-subtle flex flex-col rounded-md">
|
||||
<div
|
||||
className={classNames(
|
||||
"border-subtle flex flex-col rounded-md",
|
||||
customClassNames?.assignmentType?.container
|
||||
)}>
|
||||
<div className="border-subtle rounded-t-md border p-6 pb-5">
|
||||
<Label className="mb-1 text-sm font-semibold">{t("assignment")}</Label>
|
||||
<p className="text-subtle max-w-full break-words text-sm leading-tight">
|
||||
<Label
|
||||
className={classNames("mb-1 text-sm font-semibold", customClassNames?.assignmentType?.label)}>
|
||||
{t("assignment")}
|
||||
</Label>
|
||||
<p
|
||||
className={classNames(
|
||||
"text-subtle max-w-full break-words text-sm leading-tight",
|
||||
customClassNames?.assignmentType?.description
|
||||
)}>
|
||||
{t("assignment_description")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="border-subtle rounded-b-md border border-t-0 p-6">
|
||||
<Label>{t("scheduling_type")}</Label>
|
||||
<div
|
||||
className={classNames(
|
||||
"border-subtle rounded-b-md border border-t-0 p-6",
|
||||
customClassNames?.assignmentType?.schedulingTypeSelect?.container
|
||||
)}>
|
||||
<Label className={customClassNames?.assignmentType?.schedulingTypeSelect?.label}>
|
||||
{t("scheduling_type")}
|
||||
</Label>
|
||||
<Controller<FormValues>
|
||||
name="schedulingType"
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<Select
|
||||
options={schedulingTypeOptions}
|
||||
value={schedulingTypeOptions.find((opt) => opt.value === value)}
|
||||
className="w-full"
|
||||
className={classNames(
|
||||
"w-full",
|
||||
customClassNames?.assignmentType?.schedulingTypeSelect?.select
|
||||
)}
|
||||
innerClassNames={customClassNames?.assignmentType?.schedulingTypeSelect?.innerClassNames}
|
||||
onChange={(val) => {
|
||||
onChange(val?.value);
|
||||
resetRROptions();
|
||||
@@ -584,6 +698,7 @@ export const EventTeamAssignmentTab = ({
|
||||
assignAllTeamMembers={assignAllTeamMembers}
|
||||
setAssignAllTeamMembers={setAssignAllTeamMembers}
|
||||
teamMembers={teamMembersOptions}
|
||||
customClassNames={customClassNames?.hosts}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
@@ -592,6 +707,7 @@ export const EventTeamAssignmentTab = ({
|
||||
assignAllTeamMembers={assignAllTeamMembers}
|
||||
setAssignAllTeamMembers={setAssignAllTeamMembers}
|
||||
childrenEventTypeOptions={childrenEventTypeOptions}
|
||||
customClassNames={customClassNames?.childrenEventTypes}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -191,4 +191,3 @@ export const RECORDING_DEFAULT_ICON = IS_PRODUCTION
|
||||
export const RECORDING_IN_PROGRESS_ICON = IS_PRODUCTION
|
||||
? `${WEBAPP_URL}/stop-recording.svg`
|
||||
: `https://app.cal.com/stop-recording.svg`;
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@ import { useRef, useState, useEffect } from "react";
|
||||
import type { ChildrenEventType } from "@calcom/features/eventtypes/components/ChildrenEventTypeSelect";
|
||||
import { EventType as EventTypeComponent } from "@calcom/features/eventtypes/components/EventType";
|
||||
import ManagedEventTypeDialog from "@calcom/features/eventtypes/components/dialogs/ManagedEventDialog";
|
||||
import type { EventTeamAssignmentTabCustomClassNames } from "@calcom/features/eventtypes/components/tabs/assignment/EventTeamAssignmentTab";
|
||||
import type { EventAvailabilityTabCustomClassNames } from "@calcom/features/eventtypes/components/tabs/availability/EventAvailabilityTab";
|
||||
import type { EventRecurringTabCustomClassNames } from "@calcom/features/eventtypes/components/tabs/recurring/RecurringEventController";
|
||||
import type { EventTypeSetupProps, FormValues, TabMap } from "@calcom/features/eventtypes/lib/types";
|
||||
@@ -31,14 +32,12 @@ import SetupTab from "./EventSetupTabPlatformWrapper";
|
||||
import EventTeamAssignmentTabPlatformWrapper from "./EventTeamAssignmentTabPlatformWrapper";
|
||||
|
||||
export type PlatformTabs = keyof Omit<TabMap, "workflows" | "webhooks" | "instant" | "ai" | "apps">;
|
||||
export type eventTypeCustomClassNames = {
|
||||
atomsWrapper?: string;
|
||||
eventAvailabilityTab?: EventAvailabilityTabCustomClassNames;
|
||||
};
|
||||
|
||||
export type EventTypeCustomClassNames = {
|
||||
atomsWrapper?: string;
|
||||
eventAssignmentTab?: EventTeamAssignmentTabCustomClassNames;
|
||||
eventRecurringTab?: EventRecurringTabCustomClassNames;
|
||||
eventAvailabilityTab?: EventAvailabilityTabCustomClassNames;
|
||||
};
|
||||
|
||||
export type EventTypePlatformWrapperProps = {
|
||||
@@ -50,7 +49,6 @@ export type EventTypePlatformWrapperProps = {
|
||||
onDeleteError?: (msg: string) => void;
|
||||
allowDelete: boolean;
|
||||
customClassNames?: eventTypeCustomClassNames;
|
||||
customClassNames?: EventTypeCustomClassNames;
|
||||
disableToasts?: boolean;
|
||||
};
|
||||
|
||||
@@ -170,7 +168,12 @@ const EventType = ({
|
||||
<></>
|
||||
),
|
||||
team: tabs.includes("team") ? (
|
||||
<EventTeamAssignmentTabPlatformWrapper team={team} eventType={eventType} teamMembers={teamMembers} />
|
||||
<EventTeamAssignmentTabPlatformWrapper
|
||||
team={team}
|
||||
eventType={eventType}
|
||||
teamMembers={teamMembers}
|
||||
customClassNames={customClassNames?.eventAssignmentTab}
|
||||
/>
|
||||
) : (
|
||||
<></>
|
||||
),
|
||||
|
||||
@@ -97,6 +97,159 @@ export default function Bookings(props: { calUsername: string; calEmail: string
|
||||
<EventTypeSettings
|
||||
customClassNames={{
|
||||
atomsWrapper: "!w-[50vw] !m-auto",
|
||||
eventAssignmentTab: {
|
||||
assignmentType: {
|
||||
container: "border border-purple-200 bg-white rounded-lg p-6",
|
||||
label: "text-purple-700 font-semibold",
|
||||
description: "text-gray-600 text-sm",
|
||||
schedulingTypeSelect: {
|
||||
container: "mt-2",
|
||||
label: "text-purple-700",
|
||||
select: "border border-purple-300 rounded-md bg-white",
|
||||
innerClassNames: {
|
||||
control: "border-purple-300",
|
||||
input: "text-purple-900",
|
||||
option: "hover:bg-purple-100",
|
||||
menu: "border border-purple-200 rounded-md",
|
||||
singleValue: "text-purple-700",
|
||||
},
|
||||
},
|
||||
},
|
||||
hosts: {
|
||||
fixedHosts: {
|
||||
container: "mt-4 border border-purple-200 bg-purple-50 rounded-lg p-6",
|
||||
label: "text-purple-700 font-semibold",
|
||||
description: "text-purple-600 text-sm",
|
||||
addMembers: {
|
||||
assingAllTeamMembers: {
|
||||
container: "border border-purple-200 bg-white rounded-md",
|
||||
label: "text-purple-700",
|
||||
description: "text-gray-600",
|
||||
},
|
||||
teamMemberSelect: {
|
||||
hostsSelect: {
|
||||
container: "mt-2",
|
||||
select: "border border-purple-300 rounded-md bg-white",
|
||||
label: "text-purple-700",
|
||||
innerClassNames: {
|
||||
input: "text-purple-900",
|
||||
option: "hover:bg-purple-100",
|
||||
control: "border-purple-300",
|
||||
singleValue: "text-purple-700",
|
||||
},
|
||||
},
|
||||
selectedHostList: {
|
||||
container: "mt-4 border border-purple-200 rounded-md bg-white",
|
||||
listItem: {
|
||||
container: "flex items-center gap-2 p-3 bg-white hover:bg-purple-50",
|
||||
avatar: "rounded-full border border-purple-300",
|
||||
name: "text-purple-800 font-semibold",
|
||||
changePriorityButton: "text-purple-700 hover:bg-purple-100",
|
||||
changeWeightButton: "text-purple-700 hover:bg-purple-100",
|
||||
removeButton: "text-purple-600 hover:bg-purple-100",
|
||||
},
|
||||
},
|
||||
priorityDialog: {
|
||||
confirmButton: "bg-purple-700 text-white rounded-md px-4 py-2",
|
||||
label: "text-purple-700",
|
||||
select: "border border-purple-300 rounded-md bg-white",
|
||||
},
|
||||
weightDialog: {
|
||||
container: "w-full bg-white p-4 rounded-md border border-purple-300",
|
||||
label: "text-purple-700 font-semibold",
|
||||
confirmButton: "bg-purple-700 text-white rounded-md px-4 py-2",
|
||||
weightInput: {
|
||||
container: "w-24",
|
||||
label: "text-purple-700",
|
||||
input: "border border-purple-300 rounded-md bg-white text-purple-900",
|
||||
addOn: "text-purple-500",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
roundRobinHosts: {
|
||||
container: "mt-4 border border-purple-200 bg-purple-50 rounded-lg p-6",
|
||||
label: "text-purple-700 font-semibold",
|
||||
description: "text-purple-600 text-sm",
|
||||
enableWeights: {
|
||||
container: "border border-purple-200 bg-white rounded-md",
|
||||
label: "text-purple-700",
|
||||
description: "text-gray-600",
|
||||
},
|
||||
addMembers: {
|
||||
assingAllTeamMembers: {
|
||||
container: "border border-purple-200 bg-white rounded-md",
|
||||
label: "text-purple-700",
|
||||
description: "text-gray-600",
|
||||
},
|
||||
teamMemberSelect: {
|
||||
hostsSelect: {
|
||||
container: "mt-2",
|
||||
select: "border border-purple-300 rounded-md bg-white",
|
||||
label: "text-purple-700",
|
||||
innerClassNames: {
|
||||
input: "text-purple-900",
|
||||
option: "hover:bg-purple-100",
|
||||
control: "border-purple-300",
|
||||
singleValue: "text-purple-700",
|
||||
},
|
||||
},
|
||||
selectedHostList: {
|
||||
container: "mt-4 border border-purple-200 rounded-md bg-white",
|
||||
listItem: {
|
||||
container: "flex items-center gap-2 p-3 bg-white hover:bg-purple-50",
|
||||
avatar: "rounded-full border border-purple-300",
|
||||
name: "text-purple-800 font-semibold",
|
||||
changePriorityButton: "text-purple-700 hover:bg-purple-100",
|
||||
changeWeightButton: "text-purple-700 hover:bg-purple-100",
|
||||
removeButton: "text-purple-600 hover:bg-purple-100",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
childrenEventTypes: {
|
||||
container: "mt-4 border border-purple-200 bg-purple-50 rounded-lg p-6",
|
||||
assignAllTeamMembers: {
|
||||
container: "border border-purple-200 bg-white rounded-md",
|
||||
label: "text-purple-700",
|
||||
description: "text-gray-600",
|
||||
},
|
||||
childrenEventTypesList: {
|
||||
assignToSelect: {
|
||||
container: "mt-2",
|
||||
select: "border border-purple-300 rounded-md bg-white",
|
||||
label: "text-purple-700",
|
||||
innerClassNames: {
|
||||
input: "text-purple-900",
|
||||
option: "hover:bg-purple-100",
|
||||
control: "border-purple-300",
|
||||
singleValue: "text-purple-700",
|
||||
},
|
||||
},
|
||||
selectedChildrenList: {
|
||||
container: "mt-4 border border-purple-200 rounded-md bg-white",
|
||||
listItem: {
|
||||
container: "flex items-center gap-2 p-3 bg-white hover:bg-purple-50",
|
||||
avatar: "rounded-full border border-purple-300",
|
||||
name: "text-purple-800 font-semibold",
|
||||
ownerBadge: "text-purple-600 bg-purple-100 rounded-md px-2",
|
||||
memberBadge: "text-purple-600 bg-purple-100 rounded-md px-2",
|
||||
hiddenBadge: "text-gray-400 bg-gray-100 rounded-md px-2",
|
||||
badgeContainer: "flex gap-1",
|
||||
eventLink: "text-purple-700",
|
||||
showOnProfileTooltip: "text-purple-600",
|
||||
previewEventTypeTooltip: "text-purple-600",
|
||||
previewEventTypeButton: "text-purple-700 hover:bg-purple-100",
|
||||
deleteEventTypeTooltip: "text-red-500",
|
||||
deleteEventTypeButton: "text-red-600 hover:bg-red-100",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
eventAvailabilityTab: {
|
||||
teamAvailability: {
|
||||
chooseHostSchedulesLabelContainer: "border border-purple-200 bg-purple-50 rounded-md p-4",
|
||||
|
||||
Reference in New Issue
Block a user