Fix: `pending payment` label appears twice (#6109)

* fix: remove duplicate label

* feat: replace Tag component with the badge component

* refactor: remove unused Tag component

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
pull/6098/head^2
Nafees Nazik 2022-12-19 22:29:11 +05:30 committed by GitHub
parent 11a07961d0
commit 48611d5c99
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 3 additions and 15 deletions

View File

@ -275,11 +275,6 @@ function BookingListItem(booking: BookingItemProps) {
{booking.eventType.team.name}
</Badge>
)}
{!!booking?.eventType?.price && !booking.paid && (
<Badge className="ltr:mr-2 rtl:ml-2" variant="orange">
{t("pending_payment")}
</Badge>
)}
{booking.paid && (
<Badge className="ltr:mr-2 rtl:ml-2" variant="green">
{t("paid")}
@ -343,7 +338,9 @@ function BookingListItem(booking: BookingItemProps) {
<span> </span>
{!!booking?.eventType?.price && !booking.paid && (
<Tag className="hidden ltr:ml-2 rtl:mr-2 sm:inline-flex">Pending payment</Tag>
<Badge className="hidden ltr:ml-2 rtl:mr-2 sm:inline-flex" variant="orange">
{t("pending_payment")}
</Badge>
)}
</div>
{booking.description && (
@ -531,13 +528,4 @@ const DisplayAttendees = ({
);
};
const Tag = ({ children, className = "" }: React.PropsWithChildren<{ className?: string }>) => {
return (
<span
className={`inline-flex items-center rounded-sm bg-yellow-100 px-1.5 py-0.5 text-xs font-medium text-yellow-800 ${className}`}>
{children}
</span>
);
};
export default BookingListItem;