Skip to content

Commit

Permalink
fix: overlapping-dropdown-bookings-page (#19216)
Browse files Browse the repository at this point in the history
  • Loading branch information
@TusharBhatt1
TusharBhatt1 authored Feb 12, 2025
1 parent 4f226cd commit 3a29327
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 60 deletions.
105 changes: 54 additions & 51 deletions apps/web/components/booking/BookingListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import {
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
DropdownMenuPortal,
Icon,
MeetingTimeInTimezones,
showToast,
Expand Down Expand Up @@ -909,71 +910,73 @@ const Attendee = (attendeeProps: AttendeeProps & NoShowProps) => {
onClick={(e) => e.stopPropagation()}
className="radix-state-open:text-blue-500 transition hover:text-blue-500">
{noShow ? (
<s>
<>
{name || email} <Icon name="eye-off" className="inline h-4" />
</s>
</>
) : (
<>{name || email}</>
)}
</button>
</DropdownMenuTrigger>
<DropdownMenuContent>
{!isSmsCalEmail(email) && (
<DropdownMenuPortal>
<DropdownMenuContent>
{!isSmsCalEmail(email) && (
<DropdownMenuItem className="focus:outline-none">
<DropdownItem
StartIcon="mail"
href={`mailto:${email}`}
onClick={(e) => {
setOpenDropdown(false);
e.stopPropagation();
}}>
<a href={`mailto:${email}`}>{t("email")}</a>
</DropdownItem>
</DropdownMenuItem>
)}

<DropdownMenuItem className="focus:outline-none">
<DropdownItem
StartIcon="mail"
href={`mailto:${email}`}
StartIcon={isCopied ? "clipboard-check" : "clipboard"}
onClick={(e) => {
e.preventDefault();
const isEmailCopied = isSmsCalEmail(email);
copyToClipboard(isEmailCopied ? email : phoneNumber ?? "");
setOpenDropdown(false);
e.stopPropagation();
showToast(isEmailCopied ? t("email_copied") : t("phone_number_copied"), "success");
}}>
<a href={`mailto:${email}`}>{t("email")}</a>
{!isCopied ? t("copy") : t("copied")}
</DropdownItem>
</DropdownMenuItem>
)}

<DropdownMenuItem className="focus:outline-none">
<DropdownItem
StartIcon={isCopied ? "clipboard-check" : "clipboard"}
onClick={(e) => {
e.preventDefault();
const isEmailCopied = isSmsCalEmail(email);
copyToClipboard(isEmailCopied ? email : phoneNumber ?? "");
setOpenDropdown(false);
showToast(isEmailCopied ? t("email_copied") : t("phone_number_copied"), "success");
}}>
{!isCopied ? t("copy") : t("copied")}
</DropdownItem>
</DropdownMenuItem>

{isBookingInPast && (
<DropdownMenuItem className="focus:outline-none">
{noShow ? (
<DropdownItem
data-testid="unmark-no-show"
onClick={(e) => {
e.preventDefault();
setOpenDropdown(false);
toggleNoShow({ attendee: { noShow: false, email }, bookingUid });
}}
StartIcon="eye">
{t("unmark_as_no_show")}
</DropdownItem>
) : (
<DropdownItem
data-testid="mark-no-show"
onClick={(e) => {
e.preventDefault();
setOpenDropdown(false);
toggleNoShow({ attendee: { noShow: true, email }, bookingUid });
}}
StartIcon="eye-off">
{t("mark_as_no_show")}
</DropdownItem>
)}
</DropdownMenuItem>
)}
</DropdownMenuContent>
{isBookingInPast && (
<DropdownMenuItem className="focus:outline-none">
{noShow ? (
<DropdownItem
data-testid="unmark-no-show"
onClick={(e) => {
e.preventDefault();
setOpenDropdown(false);
toggleNoShow({ attendee: { noShow: false, email }, bookingUid });
}}
StartIcon="eye">
{t("unmark_as_no_show")}
</DropdownItem>
) : (
<DropdownItem
data-testid="mark-no-show"
onClick={(e) => {
e.preventDefault();
setOpenDropdown(false);
toggleNoShow({ attendee: { noShow: true, email }, bookingUid });
}}
StartIcon="eye-off">
{t("mark_as_no_show")}
</DropdownItem>
)}
</DropdownMenuItem>
)}
</DropdownMenuContent>
</DropdownMenuPortal>
</Dropdown>
);
};
Expand Down
18 changes: 9 additions & 9 deletions apps/web/playwright/bookings-list.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,12 +90,12 @@ test.describe("Bookings", () => {
const titleAndAttendees = firstPastBooking.locator('[data-testid="title-and-attendees"]');
const firstGuest = firstPastBooking.locator('[data-testid="guest"]').nth(0);
await firstGuest.click();
await expect(titleAndAttendees.locator('[data-testid="unmark-no-show"]')).toBeHidden();
await expect(titleAndAttendees.locator('[data-testid="mark-no-show"]')).toBeVisible();
await titleAndAttendees.locator('[data-testid="mark-no-show"]').click();
await expect(page.locator('[data-testid="unmark-no-show"]')).toBeHidden();
await expect(page.locator('[data-testid="mark-no-show"]')).toBeVisible();
await page.locator('[data-testid="mark-no-show"]').click();
await firstGuest.click();
await expect(titleAndAttendees.locator('[data-testid="unmark-no-show"]')).toBeVisible();
await expect(titleAndAttendees.locator('[data-testid="mark-no-show"]')).toBeHidden();
await expect(page.locator('[data-testid="unmark-no-show"]')).toBeVisible();
await expect(page.locator('[data-testid="mark-no-show"]')).toBeHidden();
await webhookReceiver.waitForRequestCount(1);
const [request] = webhookReceiver.requestList;
const body = request.body;
Expand Down Expand Up @@ -181,11 +181,11 @@ test.describe("Bookings", () => {
const titleAndAttendees = firstPastBooking.locator('[data-testid="title-and-attendees"]');
const firstGuest = firstPastBooking.locator('[data-testid="guest"]').nth(0);
await firstGuest.click();
await expect(titleAndAttendees.locator('[data-testid="mark-no-show"]')).toBeVisible();
await titleAndAttendees.locator('[data-testid="mark-no-show"]').click();
await expect(page.locator('[data-testid="mark-no-show"]')).toBeVisible();
await page.locator('[data-testid="mark-no-show"]').click();
await firstGuest.click();
await expect(titleAndAttendees.locator('[data-testid="unmark-no-show"]')).toBeVisible();
await expect(titleAndAttendees.locator('[data-testid="mark-no-show"]')).toBeHidden();
await expect(page.locator('[data-testid="unmark-no-show"]')).toBeVisible();
await expect(page.locator('[data-testid="mark-no-show"]')).toBeHidden();
await webhookReceiver.waitForRequestCount(1);
const [request] = webhookReceiver.requestList;
const body = request.body;
Expand Down

0 comments on commit 3a29327

Please sign in to comment.