Adds specfific empty copy by status (#842)
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
This commit is contained in:
parent
e12c879242
commit
342ea3e5d2
1 changed files with 17 additions and 7 deletions
|
@ -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={
|
||||||
|
status
|
||||||
|
? () => (
|
||||||
<EmptyScreen
|
<EmptyScreen
|
||||||
Icon={CalendarIcon}
|
Icon={CalendarIcon}
|
||||||
headline={`No upcoming bookings, yet`}
|
headline={`No ${status} bookings, yet`}
|
||||||
description="You have no upcoming bookings. As soon as someone books a time with you it will show up here."
|
description={`You have no ${status} bookings. ${descriptionByStatus[status]}`}
|
||||||
/>
|
/>
|
||||||
)}
|
)
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue