From 342ea3e5d243c4d9744bcad2090d61698e7ffa28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20L=C3=B3pez?= <zomars@me.com>
Date: Sat, 2 Oct 2021 05:08:35 -0600
Subject: [PATCH] Adds specfific empty copy by status (#842)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 pages/bookings/[status].tsx | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/pages/bookings/[status].tsx b/pages/bookings/[status].tsx
index 6079889f..02ec6841 100644
--- a/pages/bookings/[status].tsx
+++ b/pages/bookings/[status].tsx
@@ -11,6 +11,12 @@ import BookingListItem from "@components/booking/BookingListItem";
 
 type BookingListingStatus = inferQueryInput<"viewer.bookings">["status"];
 
+const descriptionByStatus = {
+  upcoming: "As soon as someone books a time with you it will show up here.",
+  past: "Your past bookings will show up here.",
+  cancelled: "Your cancelled bookings will show up here.",
+};
+
 export default function Bookings() {
   const router = useRouter();
   const status = router.query?.status as BookingListingStatus;
@@ -35,13 +41,17 @@ export default function Bookings() {
                     </table>
                   </div>
                 )}
-                empty={() => (
-                  <EmptyScreen
-                    Icon={CalendarIcon}
-                    headline={`No upcoming bookings, yet`}
-                    description="You have no upcoming bookings. As soon as someone books a time with you it will show up here."
-                  />
-                )}
+                empty={
+                  status
+                    ? () => (
+                        <EmptyScreen
+                          Icon={CalendarIcon}
+                          headline={`No ${status} bookings, yet`}
+                          description={`You have no ${status} bookings. ${descriptionByStatus[status]}`}
+                        />
+                      )
+                    : undefined
+                }
               />
             </div>
           </div>