From a99eda21afab3c10964bc9155faa54c94537875e Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Tue, 19 Nov 2024 11:24:45 +0000
Subject: [PATCH] chore: booking status reporting (#17733)

* move booking status into new column

* update i18n

* nowrap + badge for submitedAt to provide consistant feel to other dates
---
 .../components/RoutingFormResponsesTable.tsx  | 61 +++++++++++--------
 1 file changed, 37 insertions(+), 24 deletions(-)

diff --git a/packages/features/insights/components/RoutingFormResponsesTable.tsx b/packages/features/insights/components/RoutingFormResponsesTable.tsx
index 9a73fffbaf..866cb5ee98 100644
--- a/packages/features/insights/components/RoutingFormResponsesTable.tsx
+++ b/packages/features/insights/components/RoutingFormResponsesTable.tsx
@@ -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>
         ),
       }),
     ],