Adds specfific empty copy by status (#842)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
This commit is contained in:
Omar López 2021-10-02 05:08:35 -06:00 committed by GitHub
parent e12c879242
commit 342ea3e5d2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

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