vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 1.9k Packages Projects Releases Wiki Activity

chore: booking status reporting (#17733)

Browse Source 
* move booking status into new column

* update i18n

* nowrap + badge for submitedAt to provide consistant feel to other dates
This commit is contained in:
sean-brydon
2024-11-19 11:24:45 +00:00
committed by GitHub
parent 03e2c6278d
commit a99eda21af
1 changed files with 37 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/features/insights/components/RoutingFormResponsesTable.tsx
+37 -24
View File
@@ -87,10 +87,10 @@ function BookedByCell({
rowId: number;
}) {
const cellId = useId();
if (!attendees || attendees.length === 0) return null;
if (!attendees || attendees.length === 0) return <div className="min-w-[200px]" />;
return (
<div className="flex w-[200px] flex-wrap gap-1">
<div className="flex min-w-[200px] flex-wrap gap-1">
{attendees.map((attendee) => (
<CellWithOverflowX key={`${cellId}-${attendee.email}-${rowId}`} className="w-[200px]">
<Badge variant="gray" className="whitespace-nowrap">
@@ -141,7 +141,24 @@ function ResponseValueCell({ value, rowId }: { value: string[]; rowId: number })
);
}
function BookingStatusCell({
function BookingStatusBadge({ booking }: { booking: RoutingFormResponse["routedToBooking"] }) {
let badgeVariant: BadgeProps["variant"] = "success";
if (!booking) return null;
switch (booking.status) {
case BookingStatus.REJECTED:
case BookingStatus.AWAITING_HOST:
case BookingStatus.PENDING:
case BookingStatus.CANCELLED:
badgeVariant = "warning";
break;
}
return <Badge variant={badgeVariant}>{bookingStatusToText(booking.status)}</Badge>;
}
function BookingAtCell({
booking,
rowId,
copyToClipboard,
@@ -155,23 +172,7 @@ function BookingStatusCell({
const cellId = useId();
if (!booking || !booking.user) {
return (
<div className="w-[250px]">
<Badge variant="error" className="ml-6" key={`${cellId}-no-booking-${rowId}`}>
{t("no_booking")}
</Badge>
</div>
);
}
let badgeVariant: BadgeProps["variant"] = "success";
switch (booking.status) {
case BookingStatus.REJECTED:
case BookingStatus.AWAITING_HOST:
case BookingStatus.PENDING:
case BookingStatus.CANCELLED:
badgeVariant = "warning";
break;
return <div className="w-[250px]" />;
}
return (
@@ -180,7 +181,7 @@ function BookingStatusCell({
<div className="flex items-center gap-2" key={`${cellId}-booking-${rowId}`}>
<Avatar size="xs" imageSrc={booking.user.avatarUrl ?? ""} alt={booking.user.name ?? ""} />
<Link href={`/booking/${booking.uid}`}>
<Badge variant={badgeVariant}>{dayjs(booking.createdAt).format("MMM D, YYYY HH:mm")}</Badge>
<Badge variant="gray">{dayjs(booking.createdAt).format("MMM D, YYYY HH:mm")}</Badge>
</Link>
</div>
</HoverCardTrigger>
@@ -206,7 +207,7 @@ function BookingStatusCell({
</div>
<div className="text-emphasis mt-4 flex items-center gap-2 text-xs">
<span>Status:</span>
<Badge variant={badgeVariant}>{bookingStatusToText(booking.status)}</Badge>
<BookingStatusBadge booking={booking} />
</div>
</div>
</HoverCardContent>
@@ -346,11 +347,21 @@ export function RoutingFormResponsesTable({
}) ?? []),
columnHelper.accessor("routedToBooking", {
id: "bookingStatus",
header: t("routing_form_insights_booking_status"),
size: 250,
cell: (info) => (
<div className="max-w-[250px]">
<BookingStatusBadge booking={info.getValue()} />
</div>
),
}),
columnHelper.accessor("routedToBooking", {
id: "bookingAt",
header: t("routing_form_insights_booking_at"),
size: 250,
cell: (info) => (
<div className="max-w-[250px]">
<BookingStatusCell
<BookingAtCell
booking={info.getValue()}
rowId={info.row.original.id}
copyToClipboard={copyToClipboard}
@@ -364,7 +375,9 @@ export function RoutingFormResponsesTable({
header: t("routing_form_insights_submitted_at"),
size: 250,
cell: (info) => (
<div className="max-w-[250px]">{dayjs(info.getValue()).format("MMM D, YYYY HH:mm")}</div>
<div className="whitespace-nowrap">
<Badge variant="gray">{dayjs(info.getValue()).format("MMM D, YYYY HH:mm")}</Badge>
</div>
),
}),
],