diff --git a/apps/web/playwright/availability.e2e.ts b/apps/web/playwright/availability.e2e.ts index f0ae7dc846..ae1a5d83b6 100644 --- a/apps/web/playwright/availability.e2e.ts +++ b/apps/web/playwright/availability.e2e.ts @@ -121,8 +121,9 @@ test.describe("Availability", () => { await test.step("Can delete a schedule", async () => { await page.getByTestId("go-back-button").click(); await page.locator('[data-testid="schedules"] > li').nth(1).getByTestId("schedule-more").click(); + await page.locator('[data-testid="delete-schedule"]').click() await submitAndWaitForResponse(page, "/api/trpc/availability/schedule.delete?batch=1", { - action: () => page.locator('[data-testid="delete-schedule"]').click(), + action: () => page.locator('[data-testid="dialog-confirmation"]').click(), }); await expect(page.locator('[data-testid="schedules"] > li').nth(1)).toHaveCount(0, { timeout: 0 }); }); diff --git a/packages/features/schedules/components/ScheduleListItem.tsx b/packages/features/schedules/components/ScheduleListItem.tsx index 2163c82142..e194260f78 100644 --- a/packages/features/schedules/components/ScheduleListItem.tsx +++ b/packages/features/schedules/components/ScheduleListItem.tsx @@ -1,12 +1,13 @@ "use client"; import Link from "next/link"; -import { Fragment } from "react"; +import { Fragment, useState } from "react"; import { availabilityAsString } from "@calcom/lib/availability"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { sortAvailabilityStrings } from "@calcom/lib/weekstart"; import type { RouterOutputs } from "@calcom/trpc/react"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { Badge } from "@calcom/ui/components/badge"; import { Button } from "@calcom/ui/components/button"; import { @@ -16,6 +17,7 @@ import { DropdownMenuItem, DropdownMenuTrigger, } from "@calcom/ui/components/dropdown"; +import { ConfirmationDialogContent } from "@calcom/ui/components/dialog"; import { Icon } from "@calcom/ui/components/icon"; import { showToast } from "@calcom/ui/components/toast"; @@ -41,6 +43,9 @@ export function ScheduleListItem({ redirectUrl: string; }) { const { t, i18n } = useLocale(); + const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false); + + type AvailabilityItem = (typeof schedule.availability)[number]; return (
{schedule.availability
- .filter((availability) => !!availability.days.length)
- .map((availability) =>
+ .filter(
+ (availability: AvailabilityItem) => !!availability.days.length
+ )
+ .map((availability: AvailabilityItem) =>
availabilityAsString(availability, {
locale: i18n.language,
hour12: displayOptions?.hour12,
})
)
// sort the availability strings as per user's weekstart (settings)
- .sort(sortAvailabilityStrings(i18n.language, displayOptions?.weekStart))
- .map((availabilityString, index) => (
-