Eunjae LeeandGitHub
3e299f9511
* refactor: update PopuplarEvents chart to use InsightsBookingService * use buildHashMapForUsers * refactor least booked * refactor charts * combine methods * refactor booking kpi cards * remove unused code * fix booking kpi cards * restore code that was removed accidentally * Revert "restore code that was removed accidentally" This reverts commit 0c0b444b02498b94fb29ef470da065bad3ad7ece. * Revert "fix booking kpi cards" This reverts commit b1e8e9afbd3632a5239495566551ae12bd926b66. * refactor booking kpi cards * revert method and remove unused code * fix previous period * fix metrics * clean up trpc call params * clean up Download.tsx * split utils * restructure folders for components * clean up imports * rename TotalUserFeedbackTable to UserStatsTable * add guide * use client * add curly braces to case * fix tests
70 lines
2.5 KiB
TypeScript
70 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useId } from "react";
|
|
|
|
import dayjs from "@calcom/dayjs";
|
|
import { useCopy } from "@calcom/lib/hooks/useCopy";
|
|
import { Avatar } from "@calcom/ui/components/avatar";
|
|
import { Badge } from "@calcom/ui/components/badge";
|
|
import {
|
|
HoverCard,
|
|
HoverCardContent,
|
|
HoverCardTrigger,
|
|
HoverCardPortal,
|
|
} from "@calcom/ui/components/hover-card";
|
|
import { Icon } from "@calcom/ui/components/icon";
|
|
|
|
import type { RoutingFormTableRow } from "../lib/types";
|
|
import { BookingStatusBadge } from "./BookingStatusBadge";
|
|
|
|
export function BookingAtCell({ row, rowId }: { row: RoutingFormTableRow; rowId: number }) {
|
|
const cellId = useId();
|
|
const { copyToClipboard } = useCopy();
|
|
|
|
if (!row.bookingUserId || !row.bookingCreatedAt) {
|
|
return <div className="w-[250px]" />;
|
|
}
|
|
|
|
return (
|
|
<HoverCard>
|
|
<HoverCardTrigger asChild>
|
|
<div className="flex items-center gap-2" key={`${cellId}-booking-${rowId}`}>
|
|
<Avatar size="xs" imageSrc={row.bookingUserAvatarUrl ?? ""} alt={row.bookingUserName ?? ""} />
|
|
<Link href={`/booking/${row.bookingUid}`}>
|
|
<Badge variant="gray">{dayjs(row.bookingCreatedAt).format("MMM D, YYYY HH:mm")}</Badge>
|
|
</Link>
|
|
</div>
|
|
</HoverCardTrigger>
|
|
<HoverCardPortal>
|
|
<HoverCardContent>
|
|
<div className="flex flex-col">
|
|
<div className="flex items-center gap-2">
|
|
<Avatar size="sm" imageSrc={row.bookingUserAvatarUrl ?? ""} alt={row.bookingUserName ?? ""} />
|
|
<div>
|
|
<p className="text-sm font-medium">{row.bookingUserName}</p>
|
|
<p className="group/booking_status_email text-subtle flex items-center text-xs">
|
|
<span className="truncate">{row.bookingUserEmail}</span>
|
|
<button
|
|
className="invisible ml-2 group-hover/booking_status_email:visible"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
copyToClipboard(row.bookingUserEmail ?? "");
|
|
}}>
|
|
<Icon name="copy" />
|
|
</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="text-emphasis mt-4 flex items-center gap-2 text-xs">
|
|
<span>Status:</span>
|
|
<BookingStatusBadge bookingStatus={row.bookingStatus} />
|
|
</div>
|
|
</div>
|
|
</HoverCardContent>
|
|
</HoverCardPortal>
|
|
</HoverCard>
|
|
);
|
|
}
|