Compare commits
42 Commits
main
...
event-type
Author | SHA1 | Date | |
---|---|---|---|
|
5309a1ef68 | ||
|
3181ec2caa | ||
|
e7247f0c65 | ||
|
8fece41be6 | ||
|
cdcae40c7a | ||
|
81e9323fd9 | ||
|
a74e5f2755 | ||
|
8fc409f6c7 | ||
|
7896c9385d | ||
|
4657a12066 | ||
|
1b6414b660 | ||
|
5f8b99d3bb | ||
|
652966b3f1 | ||
|
c737422ce3 | ||
|
681d20c0dc | ||
|
4bc4b43a92 | ||
|
8e271b6620 | ||
|
1f49f4546c | ||
|
8646214a9a | ||
|
c2bbe6023b | ||
|
cf53d04455 | ||
|
2e912078a4 | ||
|
57d1de4709 | ||
|
d1c2fd2c9c | ||
|
1bdb75a363 | ||
|
c517d4dacd | ||
|
ce98f69ca4 | ||
|
6e28c0fc1f | ||
|
4cf3e163bd | ||
|
2d27284f0e | ||
|
5354615154 | ||
|
fc0c7dc05b | ||
|
11afe35bdc | ||
|
5543e04876 | ||
|
f4bcb783e7 | ||
|
4e0b978aa7 | ||
|
3f2852f5fa | ||
|
be5904941b | ||
|
95c4b59dfd | ||
|
b394975199 | ||
|
d0960ff55c | ||
|
a300a565e4 |
|
@ -0,0 +1,16 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://ui.shadcn.com/schema.json",
|
||||||
|
"style": "default",
|
||||||
|
"rsc": false,
|
||||||
|
"tsx": true,
|
||||||
|
"tailwind": {
|
||||||
|
"config": "tailwind.config.cjs",
|
||||||
|
"css": "globals.css",
|
||||||
|
"baseColor": "slate",
|
||||||
|
"cssVariables": true
|
||||||
|
},
|
||||||
|
"aliases": {
|
||||||
|
"components": "@/components",
|
||||||
|
"utils": "@/lib/utils"
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,73 @@
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { DropdownMenuItem, DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
|
||||||
|
import type { EventTypeGroup } from "event-type-list";
|
||||||
|
import { Copy, Code, Trash } from "lucide-react";
|
||||||
|
|
||||||
|
import { EventTypeEmbedButton } from "@calcom/features/embed/EventTypeEmbed";
|
||||||
|
|
||||||
|
type DesktopDropdownContentProps = {
|
||||||
|
group: EventTypeGroup;
|
||||||
|
embedLink: string;
|
||||||
|
isReadOnly: boolean;
|
||||||
|
isManagedEventType: boolean;
|
||||||
|
isChildrenManagedEventType: boolean;
|
||||||
|
id: number;
|
||||||
|
onEdit: () => void;
|
||||||
|
onDuplicate: () => void;
|
||||||
|
onDelete: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function DesktopDropdownContent({
|
||||||
|
group,
|
||||||
|
embedLink,
|
||||||
|
isReadOnly,
|
||||||
|
id,
|
||||||
|
isManagedEventType,
|
||||||
|
isChildrenManagedEventType,
|
||||||
|
onEdit,
|
||||||
|
onDuplicate,
|
||||||
|
onDelete,
|
||||||
|
}: DesktopDropdownContentProps) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{!isReadOnly && (
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<Button type="button" data-testid={`event-type-edit-${id}`} onClick={onEdit}>
|
||||||
|
Edit
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
)}
|
||||||
|
{!isManagedEventType && !isChildrenManagedEventType && (
|
||||||
|
<DropdownMenuItem className="outline-none">
|
||||||
|
<Button type="button" data-testid={`event-type-duplicate-${id}`} onClick={onDuplicate}>
|
||||||
|
<Copy />
|
||||||
|
Duplicate
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
)}
|
||||||
|
{!isManagedEventType && (
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<EventTypeEmbedButton
|
||||||
|
className="w-full rounded-none"
|
||||||
|
eventId={id}
|
||||||
|
type="button"
|
||||||
|
StartIcon={Code}
|
||||||
|
embedUrl={encodeURIComponent(embedLink)}>
|
||||||
|
Embed
|
||||||
|
</EventTypeEmbedButton>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
)}
|
||||||
|
{(group.metadata?.readOnly === false || group.metadata.readOnly === null) &&
|
||||||
|
!isChildrenManagedEventType && (
|
||||||
|
<>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<Button variant="destructive" onClick={onDelete} className="w-full rounded-none">
|
||||||
|
<Trash /> Delete
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
|
@ -0,0 +1,30 @@
|
||||||
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
|
||||||
|
import type { ReactNode } from "react";
|
||||||
|
|
||||||
|
export function EventTypeDialog({
|
||||||
|
open,
|
||||||
|
onOpenChange,
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
content,
|
||||||
|
}: {
|
||||||
|
open: boolean;
|
||||||
|
onOpenChange: () => void;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
content?: ReactNode;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>{title}</DialogTitle>
|
||||||
|
<DialogDescription>{description}</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
{!!content && content}
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
|
@ -0,0 +1,91 @@
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } from "@/components/ui/dropdown-menu";
|
||||||
|
import type { EventTypeGroup } from "event-type-list";
|
||||||
|
import { DesktopDropdownContent } from "event-type-list/components/controls/DesktopDropdownContent";
|
||||||
|
import { MobileDropdownContent } from "event-type-list/components/controls/MobileDropdownContent";
|
||||||
|
import { MoreHorizontal } from "lucide-react";
|
||||||
|
|
||||||
|
type DesktopContent = {
|
||||||
|
variant: "desktop";
|
||||||
|
group: EventTypeGroup;
|
||||||
|
embedLink: string;
|
||||||
|
isReadOnly: boolean;
|
||||||
|
isManagedEventType: boolean;
|
||||||
|
isChildrenManagedEventType: boolean;
|
||||||
|
id: number;
|
||||||
|
onEdit: () => void;
|
||||||
|
onDuplicate: () => void;
|
||||||
|
onDelete: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
type MobileContent = {
|
||||||
|
variant: "mobile";
|
||||||
|
group: EventTypeGroup;
|
||||||
|
isManagedEventType: boolean;
|
||||||
|
isChildrenManagedEventType: boolean;
|
||||||
|
isNativeShare: boolean;
|
||||||
|
readOnly: boolean;
|
||||||
|
id: number;
|
||||||
|
onPreview: () => void;
|
||||||
|
onCopy: () => void;
|
||||||
|
onShare: () => void;
|
||||||
|
onEdit: () => void;
|
||||||
|
onDuplicate: () => void;
|
||||||
|
onDelete: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
// EventTypeDropdownProps is a discriminated union
|
||||||
|
// where discriminant is the variant prop
|
||||||
|
type EventTypeDropdownProps = DesktopContent | MobileContent;
|
||||||
|
|
||||||
|
// Two more separate components one for desktop content for dropdown and other for mobile dropdown content
|
||||||
|
export function EventTypeDropdown(props: EventTypeDropdownProps) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild data-testid={`event-type-options-${id}`}>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
className={`${
|
||||||
|
props.variant === "desktop"
|
||||||
|
? "bg-secondary text-secondary ltr:radix-state-open:rounded-r-md rtl:radix-state-open:rounded-l-md"
|
||||||
|
: "bg-secondary text-secondary"
|
||||||
|
}`}>
|
||||||
|
<MoreHorizontal />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent>
|
||||||
|
{props.variant === "desktop" && (
|
||||||
|
<DesktopDropdownContent
|
||||||
|
group={props.group}
|
||||||
|
embedLink={props.embedLink}
|
||||||
|
isReadOnly={props.isReadOnly}
|
||||||
|
isManagedEventType={props.isManagedEventType}
|
||||||
|
isChildrenManagedEventType={props.isChildrenManagedEventType}
|
||||||
|
id={props.id}
|
||||||
|
onEdit={props.onEdit}
|
||||||
|
onDuplicate={props.onDuplicate}
|
||||||
|
onDelete={props.onDelete}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{props.variant === "mobile" && (
|
||||||
|
<MobileDropdownContent
|
||||||
|
group={props.group}
|
||||||
|
isManagedEventType={props.isManagedEventType}
|
||||||
|
isChildrenManagedEventType={props.isChildrenManagedEventType}
|
||||||
|
isNativeShare={props.isNativeShare}
|
||||||
|
readOnly={props.readOnly}
|
||||||
|
id={props.id}
|
||||||
|
onPreview={props.onPreview}
|
||||||
|
onCopy={props.onCopy}
|
||||||
|
onShare={props.onShare}
|
||||||
|
onEdit={props.onEdit}
|
||||||
|
onDuplicate={props.onDuplicate}
|
||||||
|
onDelete={props.onDelete}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
|
@ -0,0 +1,117 @@
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { DropdownMenuItem, DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
|
||||||
|
import { Switch } from "@/components/ui/switch";
|
||||||
|
import type { EventTypeGroup } from "event-type-list";
|
||||||
|
import { ExternalLink, Upload, Edit, Copy, Trash } from "lucide-react";
|
||||||
|
|
||||||
|
import { Skeleton, Label } from "@calcom/ui";
|
||||||
|
|
||||||
|
type MobileDropdownContentProps = {
|
||||||
|
group: EventTypeGroup;
|
||||||
|
isManagedEventType: boolean;
|
||||||
|
isChildrenManagedEventType: boolean;
|
||||||
|
isNativeShare: boolean;
|
||||||
|
isHidden: boolean;
|
||||||
|
readOnly: boolean;
|
||||||
|
id: number;
|
||||||
|
onPreview: () => void;
|
||||||
|
onCopy: () => void;
|
||||||
|
onShare: () => void;
|
||||||
|
onEdit: () => void;
|
||||||
|
onDuplicate: () => void;
|
||||||
|
onDelete: () => void;
|
||||||
|
onMutate: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function MobileDropdownContent({
|
||||||
|
group,
|
||||||
|
isManagedEventType,
|
||||||
|
isChildrenManagedEventType,
|
||||||
|
isNativeShare,
|
||||||
|
isHidden,
|
||||||
|
readOnly,
|
||||||
|
id,
|
||||||
|
onPreview,
|
||||||
|
onCopy,
|
||||||
|
onShare,
|
||||||
|
onEdit,
|
||||||
|
onDuplicate,
|
||||||
|
onDelete,
|
||||||
|
onMutate,
|
||||||
|
}: MobileDropdownContentProps) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{isManagedEventType && (
|
||||||
|
<>
|
||||||
|
<DropdownMenuItem className="outline-none">
|
||||||
|
<Button
|
||||||
|
onClick={onPreview}
|
||||||
|
data-testid="preview-link-button"
|
||||||
|
type="button"
|
||||||
|
className="w-full rounded-none">
|
||||||
|
<ExternalLink />
|
||||||
|
Preview
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem className="outline-none">
|
||||||
|
<Button
|
||||||
|
data-testid={`event-type-duplicate-${id}`}
|
||||||
|
type="button"
|
||||||
|
className="w-full rounded-none text-left"
|
||||||
|
onClick={onCopy}>
|
||||||
|
Copy link to event
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{isNativeShare ? (
|
||||||
|
<DropdownMenuItem className="outline-none">
|
||||||
|
<Button
|
||||||
|
data-testid={`event-type-duplicate-${id}`}
|
||||||
|
type="button"
|
||||||
|
className="w-full rounded-none"
|
||||||
|
onClick={onShare}>
|
||||||
|
<Upload /> Share
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
) : null}
|
||||||
|
{readOnly && (
|
||||||
|
<DropdownMenuItem className="outline-none">
|
||||||
|
<Button type="button" className="w-full rounded-none" onClick={onEdit}>
|
||||||
|
<Edit /> Edit
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
)}
|
||||||
|
{!isManagedEventType && !isChildrenManagedEventType && (
|
||||||
|
<DropdownMenuItem className="outline-none">
|
||||||
|
<Button data-testid={`event-type-duplicate-${id}`} onClick={onDuplicate}>
|
||||||
|
<Copy />
|
||||||
|
Duplicate
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
)}
|
||||||
|
{(group.metadata?.readOnly === false || group.metadata.readOnly === null) &&
|
||||||
|
!isChildrenManagedEventType && (
|
||||||
|
<>
|
||||||
|
<DropdownMenuItem className="outline-none">
|
||||||
|
<Button variant="destructive" className="w-full rounded-none" onClick={onDelete}>
|
||||||
|
<Trash /> Delete
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
{!isManagedEventType && (
|
||||||
|
<div className="hover:bg-subtle flex h-9 cursor-pointer flex-row items-center justify-between px-4 py-2">
|
||||||
|
<Skeleton
|
||||||
|
as={Label}
|
||||||
|
htmlFor="hiddenSwitch"
|
||||||
|
className="mt-2 inline cursor-pointer self-center pr-2 ">
|
||||||
|
{isHidden ? "Show on profile" : "Hide from profile"}
|
||||||
|
</Skeleton>
|
||||||
|
<Switch id="hiddenSwitch" name="Hidden" checked={isHidden} onCheckedChange={onMutate} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
|
||||||
|
import type { ReactNode } from "react";
|
||||||
|
|
||||||
|
export function EventTypeTooltip({
|
||||||
|
trigger,
|
||||||
|
content,
|
||||||
|
}: {
|
||||||
|
trigger: ReactNode | string;
|
||||||
|
content: ReactNode | string;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<TooltipProvider>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>{trigger}</TooltipTrigger>
|
||||||
|
<TooltipContent>{content}</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { EmptyScreen } from "event-type-list/components/empty-screen";
|
||||||
|
import { LinkIcon } from "lucide-react";
|
||||||
|
|
||||||
|
export function CreateFirstEventTypeView({ slug }: { slug: string }) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<EmptyScreen
|
||||||
|
Icon={LinkIcon}
|
||||||
|
className="mb-16"
|
||||||
|
headline="Create your first event type"
|
||||||
|
description="Event types enable you to share links that show available times on your calendar and allow people to make bookings with you."
|
||||||
|
buttonRaw={
|
||||||
|
<Button>
|
||||||
|
<a href={`?dialog=new&eventPage=${slug}`}>Create</a>
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
|
@ -0,0 +1,17 @@
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { EmptyScreen } from "event-type-list/components/empty-screen";
|
||||||
|
|
||||||
|
export function EmptyEventTypeList({ group }: { group: any }) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<EmptyScreen
|
||||||
|
headline="This team has no event types"
|
||||||
|
buttonRaw={
|
||||||
|
<Button type="button" className="mt-5">
|
||||||
|
<a href={`?dialog=new&eventPage=${group.profile.slug}&teamId=${group.teamId}`}>Create</a>
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
|
@ -0,0 +1,66 @@
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import type { LucideIcon as IconType } from "lucide-react";
|
||||||
|
import type { ReactNode } from "react";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
import type { SVGComponent } from "@calcom/types/SVGComponent";
|
||||||
|
|
||||||
|
type EmptyScreenProps = {
|
||||||
|
Icon?: SVGComponent | IconType;
|
||||||
|
avatar?: React.ReactElement;
|
||||||
|
headline: string | React.ReactElement;
|
||||||
|
description?: string | React.ReactElement;
|
||||||
|
buttonText?: string;
|
||||||
|
buttonOnClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
|
||||||
|
buttonRaw?: ReactNode; // Used incase you want to provide your own button.
|
||||||
|
border?: boolean;
|
||||||
|
dashedBorder?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function EmptyScreen({
|
||||||
|
Icon,
|
||||||
|
avatar,
|
||||||
|
headline,
|
||||||
|
description,
|
||||||
|
buttonText,
|
||||||
|
buttonOnClick,
|
||||||
|
buttonRaw,
|
||||||
|
border = true,
|
||||||
|
dashedBorder = true,
|
||||||
|
className,
|
||||||
|
}: EmptyScreenProps & React.HTMLAttributes<HTMLDivElement>) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
data-testid="empty-screen"
|
||||||
|
className={cn(
|
||||||
|
"flex w-full select-none flex-col items-center justify-center rounded-lg p-7 lg:p-20",
|
||||||
|
border && "border-subtle border",
|
||||||
|
dashedBorder && "border-dashed",
|
||||||
|
className
|
||||||
|
)}>
|
||||||
|
{!avatar ? null : (
|
||||||
|
<div className="flex h-[72px] w-[72px] items-center justify-center rounded-full">{avatar}</div>
|
||||||
|
)}
|
||||||
|
{!Icon ? null : (
|
||||||
|
<div className="bg-emphasis flex h-[72px] w-[72px] items-center justify-center rounded-full ">
|
||||||
|
<Icon className="text-default inline-block h-10 w-10 stroke-[1.3px]" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="flex max-w-[420px] flex-col items-center">
|
||||||
|
<h2 className={cn("text-semibold font-cal text-emphasis text-center text-xl", !!Icon && "mt-6")}>
|
||||||
|
{headline}
|
||||||
|
</h2>
|
||||||
|
{!!description && (
|
||||||
|
<div className="text-default mb-8 mt-3 text-center text-sm font-normal leading-6">
|
||||||
|
{description}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!!buttonOnClick && !!buttonText && <Button onClick={(e) => buttonOnClick(e)}>{buttonText}</Button>}
|
||||||
|
{buttonRaw}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
|
@ -0,0 +1,146 @@
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { Price } from "event-type-list/components/price";
|
||||||
|
import { Clock, Users, Lock, RefreshCw, Clipboard, Plus, User } from "lucide-react";
|
||||||
|
import type { Prisma } from "prisma/client";
|
||||||
|
import { useMemo } from "react";
|
||||||
|
import type { z } from "zod";
|
||||||
|
|
||||||
|
import { getPriceIcon } from "@calcom/features/bookings/components/event-meta";
|
||||||
|
import { parseRecurringEvent } from "@calcom/lib";
|
||||||
|
import getPaymentAppData from "@calcom/lib/getPaymentAppData";
|
||||||
|
import type { baseEventTypeSelect } from "@calcom/prisma";
|
||||||
|
import { SchedulingType } from "@calcom/prisma/enums";
|
||||||
|
import type { EventTypeModel } from "@calcom/prisma/zod";
|
||||||
|
|
||||||
|
type EventTypeDescriptionProps = {
|
||||||
|
eventType: Pick<
|
||||||
|
z.infer<typeof EventTypeModel>,
|
||||||
|
Exclude<keyof typeof baseEventTypeSelect, "recurringEvent"> | "metadata"
|
||||||
|
> & {
|
||||||
|
descriptionAsSafeHTML?: string | null;
|
||||||
|
recurringEvent: Prisma.JsonValue;
|
||||||
|
seatsPerTimeSlot?: number;
|
||||||
|
};
|
||||||
|
className?: string;
|
||||||
|
shortenDescription?: boolean;
|
||||||
|
isPublic?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function EventTypeDescription({
|
||||||
|
eventType,
|
||||||
|
className,
|
||||||
|
shortenDescription,
|
||||||
|
isPublic,
|
||||||
|
}: EventTypeDescriptionProps) {
|
||||||
|
const recurringEvent = useMemo(
|
||||||
|
() => parseRecurringEvent(eventType.recurringEvent),
|
||||||
|
[eventType.recurringEvent]
|
||||||
|
);
|
||||||
|
const paymentAppData = getPaymentAppData(eventType);
|
||||||
|
const priceIcon = getPriceIcon(paymentAppData.currency);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className={cn("text-subtle", className)}>
|
||||||
|
{eventType.description && (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"text-subtle line-clamp-3 break-words py-1 text-sm sm:max-w-[650px] [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600",
|
||||||
|
shortenDescription ? "line-clamp-4 [&>*:not(:first-child)]:hidden" : ""
|
||||||
|
)}
|
||||||
|
dangerouslySetInnerHTML={{
|
||||||
|
__html: eventType.descriptionAsSafeHTML || "",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<ul className="mt-2 flex flex-wrap gap-x-2 gap-y-1">
|
||||||
|
{eventType.metadata?.multipleDuration ? (
|
||||||
|
eventType.metadata.multipleDuration.map((dur, idx) => (
|
||||||
|
<li key={idx}>
|
||||||
|
<Badge variant="default" className="rounded-sm">
|
||||||
|
<Clock />
|
||||||
|
{dur}m
|
||||||
|
</Badge>
|
||||||
|
</li>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<li>
|
||||||
|
<Badge variant="default" className="rounded-sm">
|
||||||
|
<Clock />
|
||||||
|
{eventType.length}m
|
||||||
|
</Badge>
|
||||||
|
</li>
|
||||||
|
)}
|
||||||
|
{eventType.schedulingType && eventType.schedulingType !== SchedulingType.MANAGED && (
|
||||||
|
<li>
|
||||||
|
<Badge variant="default" className="rounded-sm">
|
||||||
|
<Users />
|
||||||
|
{eventType.schedulingType === SchedulingType.ROUND_ROBIN && "Round Robin"}
|
||||||
|
{eventType.schedulingType === SchedulingType.COLLECTIVE && "Collective"}
|
||||||
|
</Badge>
|
||||||
|
</li>
|
||||||
|
)}
|
||||||
|
{eventType.metadata?.managedEventConfig && !isPublic && (
|
||||||
|
<Badge variant="default" className="rounded-sm">
|
||||||
|
<Lock />
|
||||||
|
Managed
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
{recurringEvent?.count && recurringEvent.count > 0 && (
|
||||||
|
<li className="hidden xl:block">
|
||||||
|
<Badge variant="default" className="rounded-sm">
|
||||||
|
<RefreshCw />
|
||||||
|
Repeats up to{" "}
|
||||||
|
{recurringEvent.count === 1
|
||||||
|
? `${recurringEvent.count} time`
|
||||||
|
: `${recurringEvent.count} times`}
|
||||||
|
</Badge>
|
||||||
|
</li>
|
||||||
|
)}
|
||||||
|
{paymentAppData.enabled && (
|
||||||
|
<li>
|
||||||
|
<Badge variant="default" className="rounded-sm">
|
||||||
|
<>{priceIcon}</>
|
||||||
|
<Price
|
||||||
|
currency={paymentAppData.currency}
|
||||||
|
price={paymentAppData.price}
|
||||||
|
displayAlternateSymbol={false}
|
||||||
|
/>
|
||||||
|
</Badge>
|
||||||
|
</li>
|
||||||
|
)}
|
||||||
|
{eventType.requiresConfirmation && (
|
||||||
|
<li className="hidden xl:block">
|
||||||
|
<Badge variant="default" className="rounded-sm">
|
||||||
|
<Clipboard />
|
||||||
|
{eventType.metadata?.requiresConfirmationThreshold
|
||||||
|
? "May require confirmation"
|
||||||
|
: "Requires confirmation"}
|
||||||
|
</Badge>
|
||||||
|
</li>
|
||||||
|
)}
|
||||||
|
{/* TODO: Maybe add a tool tip to this? */}
|
||||||
|
{eventType.requiresConfirmation || (recurringEvent?.count && recurringEvent.count) ? (
|
||||||
|
<li className="block xl:hidden">
|
||||||
|
<Badge variant="default" className="rounded-sm">
|
||||||
|
<Plus />
|
||||||
|
<p>{[eventType.requiresConfirmation, recurringEvent?.count].filter(Boolean).length}</p>
|
||||||
|
</Badge>
|
||||||
|
</li>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
|
{eventType?.seatsPerTimeSlot ? (
|
||||||
|
<li>
|
||||||
|
<Badge variant="default">
|
||||||
|
<User />
|
||||||
|
<p>{eventType.seatsPerTimeSlot} seats</p>
|
||||||
|
</Badge>
|
||||||
|
</li>
|
||||||
|
) : null}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
|
@ -0,0 +1,243 @@
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Switch } from "@/components/ui/switch";
|
||||||
|
import type { EventTypeGroup } from "event-type-list";
|
||||||
|
import { EventTypeDialog } from "event-type-list/components/controls/Dialog";
|
||||||
|
import { EventTypeDropdown } from "event-type-list/components/controls/Dropdown";
|
||||||
|
import { EventTypeTooltip } from "event-type-list/components/controls/Tooltip";
|
||||||
|
import { EventTypeDescription } from "event-type-list/components/event-type-description";
|
||||||
|
import { ExternalLink, LinkIcon } from "lucide-react";
|
||||||
|
import { memo, useState } from "react";
|
||||||
|
|
||||||
|
import { useOrgBranding } from "@calcom/ee/organizations/context/provider";
|
||||||
|
import { CAL_URL } from "@calcom/lib/constants";
|
||||||
|
import { WEBAPP_URL } from "@calcom/lib/constants";
|
||||||
|
import { SchedulingType } from "@calcom/prisma/enums";
|
||||||
|
import { ArrowButton, AvatarGroup, ButtonGroup } from "@calcom/ui";
|
||||||
|
|
||||||
|
type EventType = EventTypeGroup["eventTypes"][number];
|
||||||
|
|
||||||
|
type EventTypeProps = {
|
||||||
|
group: EventTypeGroup;
|
||||||
|
type: EventType;
|
||||||
|
readOnly: boolean;
|
||||||
|
index: number;
|
||||||
|
firstItem: EventType;
|
||||||
|
lastItem: EventType;
|
||||||
|
moveEventType: (index: number, increment: 1 | -1) => void;
|
||||||
|
onMutate: () => void;
|
||||||
|
onCopy: () => void;
|
||||||
|
onEdit: () => void;
|
||||||
|
onDuplicate: () => void;
|
||||||
|
onDelete: () => void;
|
||||||
|
onPreview: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Item = ({ type, group, readOnly }: { type: EventType; group: EventTypeGroup; readOnly: boolean }) => {
|
||||||
|
const content = () => (
|
||||||
|
<div>
|
||||||
|
<span
|
||||||
|
className="text-default font-semibold ltr:mr-1 rtl:ml-1"
|
||||||
|
data-testid={`event-type-title-${type.id}`}>
|
||||||
|
{type.title}
|
||||||
|
</span>
|
||||||
|
{group.profile.slug ? (
|
||||||
|
<small
|
||||||
|
className="text-subtle hidden font-normal leading-4 sm:inline"
|
||||||
|
data-testid={`event-type-slug-${type.id}`}>
|
||||||
|
{`/${type.schedulingType !== SchedulingType.MANAGED ? group.profile.slug : "username"}/${
|
||||||
|
type.slug
|
||||||
|
}`}
|
||||||
|
</small>
|
||||||
|
) : null}
|
||||||
|
{readOnly && <Badge className="ml-2">Readonly</Badge>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
return readOnly ? (
|
||||||
|
<div className="flex-1 overflow-hidden pr-4 text-sm">
|
||||||
|
{content()}
|
||||||
|
<EventTypeDescription
|
||||||
|
// @ts-expect-error FIXME: We have a type mismatch here @hariombalhara @sean-brydon
|
||||||
|
eventType={type}
|
||||||
|
shortenDescription
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<a className="text-s flex-1 overflow-hidden pr-4" href={`/event-types/${type.id}?tabName=setup`}>
|
||||||
|
<div>
|
||||||
|
<span
|
||||||
|
className="text-default font-semibold ltr:mr-1 rtl:ml-1"
|
||||||
|
data-testid={`event-type-title-${type.id}`}>
|
||||||
|
{type.title}
|
||||||
|
</span>
|
||||||
|
{group.profile.slug ? (
|
||||||
|
<small
|
||||||
|
className="text-subtle hidden font-normal leading-4 sm:inline"
|
||||||
|
data-testid={`event-type-slug-${type.id}`}>
|
||||||
|
{`/${group.profile.slug}/${type.slug}`}
|
||||||
|
</small>
|
||||||
|
) : null}
|
||||||
|
{readOnly && <Badge className="ml-2">Readonly</Badge>}
|
||||||
|
</div>
|
||||||
|
<EventTypeDescription
|
||||||
|
// @ts-expect-error FIXME: We have a type mismatch here @hariombalhara @sean-brydon
|
||||||
|
eventType={{ ...type, descriptionAsSafeHTML: type.safeDescription }}
|
||||||
|
shortenDescription
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const MemoizedItem = memo(Item);
|
||||||
|
|
||||||
|
export function EventType({
|
||||||
|
group,
|
||||||
|
type,
|
||||||
|
readOnly,
|
||||||
|
index,
|
||||||
|
firstItem,
|
||||||
|
lastItem,
|
||||||
|
moveEventType,
|
||||||
|
onMutate,
|
||||||
|
onCopy,
|
||||||
|
onEdit,
|
||||||
|
onDuplicate,
|
||||||
|
onDelete,
|
||||||
|
onPreview,
|
||||||
|
}: EventTypeProps) {
|
||||||
|
const isManagedEventType = type.schedulingType === SchedulingType.MANAGED;
|
||||||
|
const embedLink = `${group.profile.slug}/${type.slug}`;
|
||||||
|
const isChildrenManagedEventType =
|
||||||
|
type.metadata?.managedEventConfig !== undefined && type.schedulingType !== SchedulingType.MANAGED;
|
||||||
|
const orgBranding = useOrgBranding();
|
||||||
|
const calLink = `${orgBranding?.fullDomain ?? CAL_URL}/${embedLink}`;
|
||||||
|
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<li key={index}>
|
||||||
|
<div className="hover:bg-muted flex w-full items-center justify-between">
|
||||||
|
<div className="group flex w-full max-w-full items-center justify-between overflow-hidden px-4 py-4 sm:px-6">
|
||||||
|
{!(firstItem && firstItem.id === type.id) && (
|
||||||
|
<ArrowButton arrowDirection="up" onClick={() => moveEventType(index, -1)} />
|
||||||
|
)}
|
||||||
|
{!(lastItem && lastItem.id === type.id) && (
|
||||||
|
<ArrowButton arrowDirection="down" onClick={() => moveEventType(index, 1)} />
|
||||||
|
)}
|
||||||
|
<MemoizedItem type={type} group={group} readOnly={readOnly} />
|
||||||
|
<div className="mt-4 hidden sm:mt-0 sm:flex">
|
||||||
|
<div className="flex justify-between space-x-2 rtl:space-x-reverse">
|
||||||
|
{type.team && !isManagedEventType && (
|
||||||
|
<AvatarGroup
|
||||||
|
className="relative right-3 top-1"
|
||||||
|
size="sm"
|
||||||
|
truncateAfter={4}
|
||||||
|
items={
|
||||||
|
type?.users
|
||||||
|
? type.users.map((organizer: { name: string | null; username: string | null }) => ({
|
||||||
|
alt: organizer.name || "",
|
||||||
|
image: `${orgBranding?.fullDomain ?? WEBAPP_URL}/${organizer.username}/avatar.png`,
|
||||||
|
title: organizer.name || "",
|
||||||
|
}))
|
||||||
|
: []
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{isManagedEventType && type?.children && type.children?.length > 0 && (
|
||||||
|
<AvatarGroup
|
||||||
|
className="relative right-3 top-1"
|
||||||
|
size="sm"
|
||||||
|
truncateAfter={4}
|
||||||
|
items={type?.children
|
||||||
|
.flatMap((ch) => ch.users)
|
||||||
|
.map((user: Pick<User, "name" | "username">) => ({
|
||||||
|
alt: user.name || "",
|
||||||
|
image: `${orgBranding?.fullDomain ?? WEBAPP_URL}/${user.username}/avatar.png`,
|
||||||
|
title: user.name || "",
|
||||||
|
}))}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<div className="flex items-center justify-between space-x-2 rtl:space-x-reverse">
|
||||||
|
{isManagedEventType && (
|
||||||
|
<>
|
||||||
|
{type.hidden && <Badge>Hidden</Badge>}
|
||||||
|
<EventTypeTooltip
|
||||||
|
trigger={
|
||||||
|
<div className="self-center rounded-md p-2">
|
||||||
|
<Switch name="hidden" checked={!type.hidden} onCheckedChange={onMutate} />
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
content={type.hidden ? "Show on profile" : "Hide from profile"}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<ButtonGroup combined>
|
||||||
|
{!isManagedEventType && (
|
||||||
|
<>
|
||||||
|
<EventTypeTooltip
|
||||||
|
trigger={
|
||||||
|
<Button
|
||||||
|
data-testid="preview-link-button"
|
||||||
|
className="bg-secondary color-secondary"
|
||||||
|
onClick={onPreview}>
|
||||||
|
<ExternalLink />
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
content="Preview"
|
||||||
|
/>
|
||||||
|
<EventTypeTooltip
|
||||||
|
trigger={
|
||||||
|
<Button className="bg-secondary color-secondary" onClick={onCopy}>
|
||||||
|
<LinkIcon />
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
content="Copy link to event"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{/* Dropdown for desktop view */}
|
||||||
|
<EventTypeDropdown
|
||||||
|
variant="desktop"
|
||||||
|
group={group}
|
||||||
|
isReadOnly={readOnly}
|
||||||
|
isManagedEventType={isManagedEventType}
|
||||||
|
isChildrenManagedEventType={isChildrenManagedEventType}
|
||||||
|
embedLink={embedLink}
|
||||||
|
id={type.id}
|
||||||
|
onEdit={onEdit}
|
||||||
|
onDuplicate={onDuplicate}
|
||||||
|
onDelete={onDelete}
|
||||||
|
/>
|
||||||
|
</ButtonGroup>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<EventTypeDialog
|
||||||
|
open={deleteDialogOpen}
|
||||||
|
onOpenChange={setDeleteDialogOpen}
|
||||||
|
title="Delete event type?"
|
||||||
|
description="Anyone who you've shared this link with will no longer be able to book using it."
|
||||||
|
content={
|
||||||
|
<div className="flex items-center justify-end">
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
setDeleteDialogOpen(false);
|
||||||
|
}}
|
||||||
|
variant="outline"
|
||||||
|
className="border-none">
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
// Add appropriate event handler to delete given event type
|
||||||
|
}}>
|
||||||
|
Yes, delete
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
}
|
|
@ -0,0 +1,34 @@
|
||||||
|
import { fiat } from "@getalby/lightning-tools";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
import { Tooltip } from "@calcom/ui";
|
||||||
|
import { SatSymbol } from "@calcom/ui/components/icon/SatSymbol";
|
||||||
|
|
||||||
|
type AlbyPriceComponentProps = {
|
||||||
|
displaySymbol: boolean;
|
||||||
|
price: number;
|
||||||
|
formattedPrice: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function AlbyPriceComponent({
|
||||||
|
displaySymbol,
|
||||||
|
price,
|
||||||
|
formattedPrice,
|
||||||
|
}: AlbyPriceComponentProps) {
|
||||||
|
const [fiatValue, setFiatValue] = React.useState<string>("loading...");
|
||||||
|
React.useEffect(() => {
|
||||||
|
(async () => {
|
||||||
|
const unformattedFiatValue = await fiat.getFiatValue({ satoshi: price, currency: "USD" });
|
||||||
|
setFiatValue(`$${unformattedFiatValue.toFixed(2)}`);
|
||||||
|
})();
|
||||||
|
}, [price]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Tooltip content={fiatValue}>
|
||||||
|
<div className="inline-flex items-center justify-center">
|
||||||
|
{displaySymbol && <SatSymbol className="h-4 w-4" />}
|
||||||
|
{formattedPrice}
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
}
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { lazy, Suspense } from "react";
|
||||||
|
|
||||||
|
import { formatPrice } from "@calcom/lib/price";
|
||||||
|
|
||||||
|
type EventPrice = { currency: string; price: number; displayAlternateSymbol?: boolean };
|
||||||
|
|
||||||
|
const AlbyPriceComponent = lazy(() => import("./AlbyPriceComponent"));
|
||||||
|
|
||||||
|
export function Price({ price, currency, displayAlternateSymbol = true }: EventPrice) {
|
||||||
|
const formattedPrice = formatPrice(price, currency);
|
||||||
|
|
||||||
|
if (price === 0) return null;
|
||||||
|
|
||||||
|
return currency !== "BTC" ? (
|
||||||
|
<>{formattedPrice}</>
|
||||||
|
) : (
|
||||||
|
<Suspense>
|
||||||
|
<AlbyPriceComponent
|
||||||
|
displaySymbol={displayAlternateSymbol}
|
||||||
|
price={price}
|
||||||
|
formattedPrice={formattedPrice}
|
||||||
|
/>
|
||||||
|
</Suspense>
|
||||||
|
);
|
||||||
|
}
|
|
@ -0,0 +1,2 @@
|
||||||
|
export { EventType } from "./components/event-type/index";
|
||||||
|
export { EventTypeList } from "./index";
|
|
@ -0,0 +1,161 @@
|
||||||
|
import { useApiKey } from "cal-provider";
|
||||||
|
import { CreateFirstEventTypeView } from "event-type-list/components/empty-screen/createFirstEventType";
|
||||||
|
import { EmptyEventTypeList } from "event-type-list/components/empty-screen/emptyEventTypeList";
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
|
||||||
|
import type { RouterOutputs } from "@calcom/trpc";
|
||||||
|
import { trpc } from "@calcom/trpc/react";
|
||||||
|
|
||||||
|
import { EventType } from "./components/event-type/index";
|
||||||
|
|
||||||
|
type EventTypeGroups = RouterOutputs["viewer"]["eventTypes"]["getByViewer"]["eventTypeGroups"];
|
||||||
|
|
||||||
|
export type EventTypeGroup = EventTypeGroups[number];
|
||||||
|
type EventType = EventTypeGroup["eventTypes"][number];
|
||||||
|
|
||||||
|
type EventTypeListProps = {
|
||||||
|
group: EventTypeGroup;
|
||||||
|
groupIndex: number;
|
||||||
|
readOnly: boolean;
|
||||||
|
types: EventType[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export function EventTypeList({ group, groupIndex, readOnly, types }: EventTypeListProps): JSX.Element {
|
||||||
|
const key = useApiKey();
|
||||||
|
const [isKeyPresent, setIsKeyPresent] = useState(false);
|
||||||
|
const [eventTypeGroup, setEventTypeGroup] = useState<EventTypeGroup>();
|
||||||
|
|
||||||
|
// missing props from event type component
|
||||||
|
// moveEventType, onMutate, onCopy, onEdit, onDuplicate, onDelete, onPreview
|
||||||
|
const utils = trpc.useContext();
|
||||||
|
const mutation = trpc.viewer.eventTypeOrder.useMutation({
|
||||||
|
onError: async (err) => {
|
||||||
|
console.error(err.message);
|
||||||
|
await utils.viewer.eventTypes.getByViewer.cancel();
|
||||||
|
await utils.viewer.eventTypes.invalidate();
|
||||||
|
},
|
||||||
|
onSettled: () => {
|
||||||
|
utils.viewer.eventTypes.invalidate();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
async function moveEventType(index: number, increment: 1 | -1) {
|
||||||
|
const newList = [...types];
|
||||||
|
|
||||||
|
const type = types[index];
|
||||||
|
const tmp = types[index + increment];
|
||||||
|
if (tmp) {
|
||||||
|
newList[index] = tmp;
|
||||||
|
newList[index + increment] = type;
|
||||||
|
}
|
||||||
|
|
||||||
|
await utils.viewer.eventTypes.getByViewer.cancel();
|
||||||
|
|
||||||
|
const previousValue = utils.viewer.eventTypes.getByViewer.getData();
|
||||||
|
if (previousValue) {
|
||||||
|
utils.viewer.eventTypes.getByViewer.setData(undefined, {
|
||||||
|
...previousValue,
|
||||||
|
eventTypeGroups: [
|
||||||
|
...previousValue.eventTypeGroups.slice(0, groupIndex),
|
||||||
|
{ ...group, eventTypes: newList },
|
||||||
|
...previousValue.eventTypeGroups.slice(groupIndex + 1),
|
||||||
|
],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
mutation.mutate({
|
||||||
|
ids: newList.map((type) => type.id),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const setHiddenMutation = trpc.viewer.eventTypes.update.useMutation({
|
||||||
|
onMutate: async ({ id }) => {
|
||||||
|
await utils.viewer.eventTypes.getByViewer.cancel();
|
||||||
|
const previousValue = utils.viewer.eventTypes.getByViewer.getData();
|
||||||
|
|
||||||
|
if (previousValue) {
|
||||||
|
const newList = [...types];
|
||||||
|
const itemIndex = newList.findIndex((item) => item.id === id);
|
||||||
|
if (itemIndex !== -1 && newList[itemIndex]) {
|
||||||
|
newList[itemIndex].hidden = !newList[itemIndex].hidden;
|
||||||
|
}
|
||||||
|
utils.viewer.eventTypes.getByViewer.setData(undefined, {
|
||||||
|
...previousValue,
|
||||||
|
eventTypeGroups: [
|
||||||
|
...previousValue.eventTypeGroups.slice(0, groupIndex),
|
||||||
|
{ ...group, eventTypes: newList },
|
||||||
|
...previousValue.eventTypeGroups.slice(groupIndex + 1),
|
||||||
|
],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return { previousValue };
|
||||||
|
},
|
||||||
|
onError: async (err, _, context) => {
|
||||||
|
if (context?.previousValue) {
|
||||||
|
utils.viewer.eventTypes.getByViewer.setData(undefined, context.previousValue);
|
||||||
|
}
|
||||||
|
console.error(err.message);
|
||||||
|
},
|
||||||
|
onSettled: () => {
|
||||||
|
utils.viewer.eventTypes.invalidate();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
async function getEventTypes(key: string) {
|
||||||
|
// here we're supposed call the /event-types endpoint in v2 to get event types
|
||||||
|
// since v2 is not ready yet thats why calling localhost for now
|
||||||
|
const response = await fetch(`/v2/event-types?apiKey=${key}`);
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
setEventTypeGroup(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (key !== "no_key" && key !== "invalid_key") {
|
||||||
|
setIsKeyPresent(true);
|
||||||
|
getEventTypes(key);
|
||||||
|
}
|
||||||
|
}, [key]);
|
||||||
|
|
||||||
|
if (key === "no_key") {
|
||||||
|
return <>You havent entered a key</>;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (key === "invalid_key") {
|
||||||
|
return <>This is not a valid key, please enter a valid key</>;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isKeyPresent && !types.length) {
|
||||||
|
return group.teamId ? (
|
||||||
|
<EmptyEventTypeList group={group} />
|
||||||
|
) : (
|
||||||
|
<CreateFirstEventTypeView slug={group.profile.slug ?? ""} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const firstItem = types[0];
|
||||||
|
const lastItem = types[types.length - 1];
|
||||||
|
|
||||||
|
if (isKeyPresent && !!types) {
|
||||||
|
return (
|
||||||
|
<div className="bg-default border-subtle mb-16 flex overflow-hidden rounded-md border">
|
||||||
|
<ul className="divide-subtle !static w-full divide-y" data-testid="event-types">
|
||||||
|
{types.map((type, index) => {
|
||||||
|
return (
|
||||||
|
<EventType
|
||||||
|
key={type.id}
|
||||||
|
index={index}
|
||||||
|
group={group}
|
||||||
|
type={type}
|
||||||
|
readOnly={readOnly}
|
||||||
|
firstItem={firstItem}
|
||||||
|
lastItem={lastItem}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
|
@ -6,5 +6,78 @@
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
@import "../ui/styles/shared-globals.css";
|
@import "../ui/styles/shared-globals.css";
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
:root {
|
||||||
|
--background: 0 0% 100%;
|
||||||
|
--foreground: 222.2 84% 4.9%;
|
||||||
|
|
||||||
|
--card: 0 0% 100%;
|
||||||
|
--card-foreground: 222.2 84% 4.9%;
|
||||||
|
|
||||||
|
--popover: 0 0% 100%;
|
||||||
|
--popover-foreground: 222.2 84% 4.9%;
|
||||||
|
|
||||||
|
--primary: 222.2 47.4% 11.2%;
|
||||||
|
--primary-foreground: 210 40% 98%;
|
||||||
|
|
||||||
|
--secondary: 210 40% 96.1%;
|
||||||
|
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||||
|
|
||||||
|
--muted: 210 40% 96.1%;
|
||||||
|
--muted-foreground: 215.4 16.3% 46.9%;
|
||||||
|
|
||||||
|
--accent: 210 40% 96.1%;
|
||||||
|
--accent-foreground: 222.2 47.4% 11.2%;
|
||||||
|
|
||||||
|
--destructive: 0 84.2% 60.2%;
|
||||||
|
--destructive-foreground: 210 40% 98%;
|
||||||
|
|
||||||
|
--border: 214.3 31.8% 91.4%;
|
||||||
|
--input: 214.3 31.8% 91.4%;
|
||||||
|
--ring: 222.2 84% 4.9%;
|
||||||
|
|
||||||
|
--radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--background: 222.2 84% 4.9%;
|
||||||
|
--foreground: 210 40% 98%;
|
||||||
|
|
||||||
|
--card: 222.2 84% 4.9%;
|
||||||
|
--card-foreground: 210 40% 98%;
|
||||||
|
|
||||||
|
--popover: 222.2 84% 4.9%;
|
||||||
|
--popover-foreground: 210 40% 98%;
|
||||||
|
|
||||||
|
--primary: 210 40% 98%;
|
||||||
|
--primary-foreground: 222.2 47.4% 11.2%;
|
||||||
|
|
||||||
|
--secondary: 217.2 32.6% 17.5%;
|
||||||
|
--secondary-foreground: 210 40% 98%;
|
||||||
|
|
||||||
|
--muted: 217.2 32.6% 17.5%;
|
||||||
|
--muted-foreground: 215 20.2% 65.1%;
|
||||||
|
|
||||||
|
--accent: 217.2 32.6% 17.5%;
|
||||||
|
--accent-foreground: 210 40% 98%;
|
||||||
|
|
||||||
|
--destructive: 0 62.8% 30.6%;
|
||||||
|
--destructive-foreground: 210 40% 98%;
|
||||||
|
|
||||||
|
--border: 217.2 32.6% 17.5%;
|
||||||
|
--input: 217.2 32.6% 17.5%;
|
||||||
|
--ring: 212.7 26.8% 83.9%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,2 +1,4 @@
|
||||||
export { Booker } from "./booker/Booker";
|
export { Booker } from "./booker/Booker";
|
||||||
export { CalProvider } from "./cal-provider/index";
|
export { CalProvider } from "./cal-provider/index";
|
||||||
|
export { EventType } from "./event-type-list/components/event-type";
|
||||||
|
export { EventTypeList } from "./event-type-list";
|
||||||
|
|
|
@ -11,6 +11,7 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@rollup/plugin-node-resolve": "^15.0.1",
|
"@rollup/plugin-node-resolve": "^15.0.1",
|
||||||
|
"@types/node": "^20.8.7",
|
||||||
"@types/react": "18.0.26",
|
"@types/react": "18.0.26",
|
||||||
"@types/react-dom": "^18.0.9",
|
"@types/react-dom": "^18.0.9",
|
||||||
"@vitejs/plugin-react": "^2.2.0",
|
"@vitejs/plugin-react": "^2.2.0",
|
||||||
|
@ -18,5 +19,17 @@
|
||||||
"typescript": "^4.9.4",
|
"typescript": "^4.9.4",
|
||||||
"vite": "^4.1.2"
|
"vite": "^4.1.2"
|
||||||
},
|
},
|
||||||
"main": "./index"
|
"main": "./index",
|
||||||
|
"dependencies": {
|
||||||
|
"@radix-ui/react-dialog": "^1.0.5",
|
||||||
|
"@radix-ui/react-dropdown-menu": "^2.0.6",
|
||||||
|
"@radix-ui/react-slot": "^1.0.2",
|
||||||
|
"@radix-ui/react-switch": "^1.0.3",
|
||||||
|
"@radix-ui/react-tooltip": "^1.0.7",
|
||||||
|
"class-variance-authority": "^0.7.0",
|
||||||
|
"clsx": "^2.0.0",
|
||||||
|
"lucide-react": "^0.288.0",
|
||||||
|
"tailwind-merge": "^1.14.0",
|
||||||
|
"tailwindcss-animate": "^1.0.7"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,30 @@
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority";
|
||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
const badgeVariants = cva(
|
||||||
|
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
|
||||||
|
secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||||
|
destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
|
||||||
|
outline: "text-foreground",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export interface BadgeProps
|
||||||
|
extends React.HTMLAttributes<HTMLDivElement>,
|
||||||
|
VariantProps<typeof badgeVariants> {}
|
||||||
|
|
||||||
|
function Badge({ className, variant, ...props }: BadgeProps) {
|
||||||
|
return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Badge, badgeVariants };
|
|
@ -0,0 +1,46 @@
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { Slot } from "@radix-ui/react-slot";
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority";
|
||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
const buttonVariants = cva(
|
||||||
|
"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||||
|
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
||||||
|
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
||||||
|
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||||
|
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||||
|
link: "text-primary underline-offset-4 hover:underline",
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: "h-10 px-4 py-2",
|
||||||
|
sm: "h-9 rounded-md px-3",
|
||||||
|
lg: "h-11 rounded-md px-8",
|
||||||
|
icon: "h-10 w-10",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
size: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export interface ButtonProps
|
||||||
|
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||||
|
VariantProps<typeof buttonVariants> {
|
||||||
|
asChild?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||||
|
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||||
|
const Comp = asChild ? Slot : "button";
|
||||||
|
return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
Button.displayName = "Button";
|
||||||
|
|
||||||
|
export { Button, buttonVariants };
|
|
@ -0,0 +1,100 @@
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
||||||
|
import { X } from "lucide-react";
|
||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
const Dialog = DialogPrimitive.Root;
|
||||||
|
|
||||||
|
const DialogTrigger = DialogPrimitive.Trigger;
|
||||||
|
|
||||||
|
const DialogPortal = DialogPrimitive.Portal;
|
||||||
|
|
||||||
|
const DialogClose = DialogPrimitive.Close;
|
||||||
|
|
||||||
|
const DialogOverlay = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DialogPrimitive.Overlay
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"bg-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
||||||
|
|
||||||
|
const DialogContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<DialogPortal>
|
||||||
|
<DialogOverlay />
|
||||||
|
<DialogPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg md:w-full",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}>
|
||||||
|
{children}
|
||||||
|
<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
<span className="sr-only">Close</span>
|
||||||
|
</DialogPrimitive.Close>
|
||||||
|
</DialogPrimitive.Content>
|
||||||
|
</DialogPortal>
|
||||||
|
));
|
||||||
|
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
||||||
|
|
||||||
|
const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
|
||||||
|
<div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
|
||||||
|
);
|
||||||
|
DialogHeader.displayName = "DialogHeader";
|
||||||
|
|
||||||
|
const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
|
||||||
|
<div
|
||||||
|
className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
DialogFooter.displayName = "DialogFooter";
|
||||||
|
|
||||||
|
const DialogTitle = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Title>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DialogPrimitive.Title
|
||||||
|
ref={ref}
|
||||||
|
className={cn("text-lg font-semibold leading-none tracking-tight", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
||||||
|
|
||||||
|
const DialogDescription = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Description>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DialogPrimitive.Description
|
||||||
|
ref={ref}
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
DialogDescription.displayName = DialogPrimitive.Description.displayName;
|
||||||
|
|
||||||
|
export {
|
||||||
|
Dialog,
|
||||||
|
DialogPortal,
|
||||||
|
DialogOverlay,
|
||||||
|
DialogClose,
|
||||||
|
DialogTrigger,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogFooter,
|
||||||
|
DialogTitle,
|
||||||
|
DialogDescription,
|
||||||
|
};
|
|
@ -0,0 +1,179 @@
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
||||||
|
import { Check, ChevronRight, Circle } from "lucide-react";
|
||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
const DropdownMenu = DropdownMenuPrimitive.Root;
|
||||||
|
|
||||||
|
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
|
||||||
|
|
||||||
|
const DropdownMenuGroup = DropdownMenuPrimitive.Group;
|
||||||
|
|
||||||
|
const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
|
||||||
|
|
||||||
|
const DropdownMenuSub = DropdownMenuPrimitive.Sub;
|
||||||
|
|
||||||
|
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
|
||||||
|
|
||||||
|
const DropdownMenuSubTrigger = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||||
|
inset?: boolean;
|
||||||
|
}
|
||||||
|
>(({ className, inset, children, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.SubTrigger
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
|
||||||
|
inset && "pl-8",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}>
|
||||||
|
{children}
|
||||||
|
<ChevronRight className="ml-auto h-4 w-4" />
|
||||||
|
</DropdownMenuPrimitive.SubTrigger>
|
||||||
|
));
|
||||||
|
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
|
||||||
|
|
||||||
|
const DropdownMenuSubContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.SubContent
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
|
||||||
|
|
||||||
|
const DropdownMenuContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
|
||||||
|
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.Portal>
|
||||||
|
<DropdownMenuPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</DropdownMenuPrimitive.Portal>
|
||||||
|
));
|
||||||
|
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
|
||||||
|
|
||||||
|
const DropdownMenuItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
|
||||||
|
inset?: boolean;
|
||||||
|
}
|
||||||
|
>(({ className, inset, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.Item
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||||
|
inset && "pl-8",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
|
||||||
|
|
||||||
|
const DropdownMenuCheckboxItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
|
||||||
|
>(({ className, children, checked, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.CheckboxItem
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
checked={checked}
|
||||||
|
{...props}>
|
||||||
|
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||||
|
<DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
<Check className="h-4 w-4" />
|
||||||
|
</DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</DropdownMenuPrimitive.CheckboxItem>
|
||||||
|
));
|
||||||
|
DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
|
||||||
|
|
||||||
|
const DropdownMenuRadioItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.RadioItem
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}>
|
||||||
|
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||||
|
<DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
<Circle className="h-2 w-2 fill-current" />
|
||||||
|
</DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</DropdownMenuPrimitive.RadioItem>
|
||||||
|
));
|
||||||
|
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
|
||||||
|
|
||||||
|
const DropdownMenuLabel = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
|
||||||
|
inset?: boolean;
|
||||||
|
}
|
||||||
|
>(({ className, inset, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.Label
|
||||||
|
ref={ref}
|
||||||
|
className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
|
||||||
|
|
||||||
|
const DropdownMenuSeparator = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.Separator
|
||||||
|
ref={ref}
|
||||||
|
className={cn("bg-muted -mx-1 my-1 h-px", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
|
||||||
|
|
||||||
|
const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
|
||||||
|
return <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />;
|
||||||
|
};
|
||||||
|
DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
|
||||||
|
|
||||||
|
export {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuCheckboxItem,
|
||||||
|
DropdownMenuRadioItem,
|
||||||
|
DropdownMenuLabel,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuShortcut,
|
||||||
|
DropdownMenuGroup,
|
||||||
|
DropdownMenuPortal,
|
||||||
|
DropdownMenuSub,
|
||||||
|
DropdownMenuSubContent,
|
||||||
|
DropdownMenuSubTrigger,
|
||||||
|
DropdownMenuRadioGroup,
|
||||||
|
};
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import * as SwitchPrimitives from "@radix-ui/react-switch";
|
||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
const Switch = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SwitchPrimitives.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<SwitchPrimitives.Root
|
||||||
|
className={cn(
|
||||||
|
"focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
ref={ref}>
|
||||||
|
<SwitchPrimitives.Thumb
|
||||||
|
className={cn(
|
||||||
|
"bg-background pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</SwitchPrimitives.Root>
|
||||||
|
));
|
||||||
|
Switch.displayName = SwitchPrimitives.Root.displayName;
|
||||||
|
|
||||||
|
export { Switch };
|
|
@ -0,0 +1,27 @@
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
const TooltipProvider = TooltipPrimitive.Provider;
|
||||||
|
|
||||||
|
const Tooltip = TooltipPrimitive.Root;
|
||||||
|
|
||||||
|
const TooltipTrigger = TooltipPrimitive.Trigger;
|
||||||
|
|
||||||
|
const TooltipContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof TooltipPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
|
||||||
|
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||||
|
<TooltipPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
||||||
|
|
||||||
|
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { type ClassValue, clsx } from "clsx";
|
||||||
|
import { twMerge } from "tailwind-merge";
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs));
|
||||||
|
}
|
|
@ -3,5 +3,78 @@ const base = require("@calcom/config/tailwind-preset");
|
||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
module.exports = {
|
module.exports = {
|
||||||
...base,
|
...base,
|
||||||
content: ["./bookings/**/*.tsx"],
|
darkMode: ["class"],
|
||||||
|
content: [
|
||||||
|
"./pages/**/*.{ts,tsx}",
|
||||||
|
"./components/**/*.{ts,tsx}",
|
||||||
|
"./app/**/*.{ts,tsx}",
|
||||||
|
"./src/**/*.{ts,tsx}",
|
||||||
|
"./bookings/**/*.tsx",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
container: {
|
||||||
|
center: true,
|
||||||
|
padding: "2rem",
|
||||||
|
screens: {
|
||||||
|
"2xl": "1400px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
border: "hsl(var(--border))",
|
||||||
|
input: "hsl(var(--input))",
|
||||||
|
ring: "hsl(var(--ring))",
|
||||||
|
background: "hsl(var(--background))",
|
||||||
|
foreground: "hsl(var(--foreground))",
|
||||||
|
primary: {
|
||||||
|
DEFAULT: "hsl(var(--primary))",
|
||||||
|
foreground: "hsl(var(--primary-foreground))",
|
||||||
|
},
|
||||||
|
secondary: {
|
||||||
|
DEFAULT: "hsl(var(--secondary))",
|
||||||
|
foreground: "hsl(var(--secondary-foreground))",
|
||||||
|
},
|
||||||
|
destructive: {
|
||||||
|
DEFAULT: "hsl(var(--destructive))",
|
||||||
|
foreground: "hsl(var(--destructive-foreground))",
|
||||||
|
},
|
||||||
|
muted: {
|
||||||
|
DEFAULT: "hsl(var(--muted))",
|
||||||
|
foreground: "hsl(var(--muted-foreground))",
|
||||||
|
},
|
||||||
|
accent: {
|
||||||
|
DEFAULT: "hsl(var(--accent))",
|
||||||
|
foreground: "hsl(var(--accent-foreground))",
|
||||||
|
},
|
||||||
|
popover: {
|
||||||
|
DEFAULT: "hsl(var(--popover))",
|
||||||
|
foreground: "hsl(var(--popover-foreground))",
|
||||||
|
},
|
||||||
|
card: {
|
||||||
|
DEFAULT: "hsl(var(--card))",
|
||||||
|
foreground: "hsl(var(--card-foreground))",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
borderRadius: {
|
||||||
|
lg: "var(--radius)",
|
||||||
|
md: "calc(var(--radius) - 2px)",
|
||||||
|
sm: "calc(var(--radius) - 4px)",
|
||||||
|
},
|
||||||
|
keyframes: {
|
||||||
|
"accordion-down": {
|
||||||
|
from: { height: 0 },
|
||||||
|
to: { height: "var(--radix-accordion-content-height)" },
|
||||||
|
},
|
||||||
|
"accordion-up": {
|
||||||
|
from: { height: "var(--radix-accordion-content-height)" },
|
||||||
|
to: { height: 0 },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
"accordion-down": "accordion-down 0.2s ease-out",
|
||||||
|
"accordion-up": "accordion-up 0.2s ease-out",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [require("tailwindcss-animate")],
|
||||||
};
|
};
|
||||||
|
|
|
@ -3,7 +3,8 @@
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"baseUrl": ".",
|
"baseUrl": ".",
|
||||||
"paths": {
|
"paths": {
|
||||||
"~/*": ["/*"]
|
"~/*": ["/*"],
|
||||||
|
"@/*": ["./src/*"]
|
||||||
},
|
},
|
||||||
"resolveJsonModule": true
|
"resolveJsonModule": true
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,7 +1,12 @@
|
||||||
|
import react from "@vitejs/plugin-react";
|
||||||
|
import path from "path";
|
||||||
import { resolve } from "path";
|
import { resolve } from "path";
|
||||||
import { defineConfig } from "vite";
|
import { defineConfig } from "vite";
|
||||||
|
|
||||||
|
// setting up shadcn for vite: https://ui.shadcn.com/docs/installation/vite
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
build: {
|
build: {
|
||||||
lib: {
|
lib: {
|
||||||
entry: [resolve(__dirname, "booker/export.ts")],
|
entry: [resolve(__dirname, "booker/export.ts")],
|
||||||
|
@ -23,6 +28,7 @@ export default defineConfig({
|
||||||
fs: resolve("../../node_modules/rollup-plugin-node-builtins"),
|
fs: resolve("../../node_modules/rollup-plugin-node-builtins"),
|
||||||
path: resolve("../../node_modules/rollup-plugin-node-builtins"),
|
path: resolve("../../node_modules/rollup-plugin-node-builtins"),
|
||||||
os: resolve("../../node_modules/rollup-plugin-node-builtins"),
|
os: resolve("../../node_modules/rollup-plugin-node-builtins"),
|
||||||
|
"@": path.resolve(__dirname, "./src"),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue
Block a user