Availability uiux improvements (#7466)

* Delete modal + button on [schedule]

* Update to V2 component

* Default Icon

---------

Co-authored-by: Alex van Andel <me@alexvanandel.com>

apps/web/pages/availability/[schedule].tsx

@@ -1,4 +1,5 @@
 import type { GetServerSidePropsContext } from "next";
+import { useRouter } from "next/router";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -22,9 +23,12 @@ import {
   Switch,
   TimezoneSelect,
   Tooltip,
+  Dialog,
+  DialogTrigger,
+  ConfirmationDialogContent,
   VerticalDivider,
 } from "@calcom/ui";
-import { FiInfo, FiPlus } from "@calcom/ui/components/icon";
+import { FiInfo, FiPlus, FiTrash } from "@calcom/ui/components/icon";
 
 import { HttpError } from "@lib/core/http/error";
 
@@ -86,6 +90,7 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
 
 export default function Availability({ schedule }: { schedule: number }) {
   const { t, i18n } = useLocale();
+  const router = useRouter();
   const utils = trpc.useContext();
   const me = useMeQuery();
   const { timeFormat } = me.data || { timeFormat: null };
@@ -120,6 +125,22 @@ export default function Availability({ schedule }: { schedule: number }) {
     },
   });
 
+  const deleteMutation = trpc.viewer.availability.schedule.delete.useMutation({
+    onError: (err) => {
+      if (err instanceof HttpError) {
+        const message = `${err.statusCode}: ${err.message}`;
+        showToast(message, "error");
+      }
+    },
+    onSettled: () => {
+      utils.viewer.availability.list.invalidate();
+    },
+    onSuccess: () => {
+      showToast(t("schedule_deleted_successfully"), "success");
+      router.push("/availability");
+    },
+  });
+
   return (
     <Shell
       backPath="/availability"
@@ -166,6 +187,24 @@ export default function Availability({ schedule }: { schedule: number }) {
             />
           </div>
 
+          <VerticalDivider />
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button StartIcon={FiTrash} variant="icon" color="destructive" aria-label={t("delete")} />
+            </DialogTrigger>
+            <ConfirmationDialogContent
+              isLoading={deleteMutation.isLoading}
+              variety="danger"
+              title={t("delete_schedule")}
+              confirmBtnText={t("delete")}
+              loadingText={t("delete")}
+              onConfirm={() => {
+                deleteMutation.mutate({ scheduleId: schedule });
+              }}>
+              {t("delete_schedule_description")}
+            </ConfirmationDialogContent>
+          </Dialog>
+
           <VerticalDivider />
 
           <div className="border-l-2 border-gray-300" />

apps/web/public/static/locales/en/common.json

@@ -860,6 +860,7 @@
   "add_new_calendar": "Add a new calendar",
   "set_calendar": "Set where to add new events to when you're booked.",
   "delete_schedule": "Delete schedule",
+  "delete_schedule_description":"Deleting a schedule will remove it from all event types. This action cannot be undone.",
   "schedule_created_successfully": "{{scheduleName}} schedule created successfully",
   "availability_updated_successfully": "{{scheduleName}} schedule updated successfully",
   "schedule_deleted_successfully": "Schedule deleted successfully",

packages/features/schedules/components/NewScheduleButton.tsx

@@ -12,6 +12,7 @@ import {
   DialogFooter,
   DialogTrigger,
   Form,
+  InputField,
   showToast,
 } from "@calcom/ui";
 import { FiPlus } from "@calcom/ui/components/icon";
@@ -68,21 +69,14 @@ export function NewScheduleButton({ name = "new-schedule" }: { name?: string })
           handleSubmit={(values) => {
             createMutation.mutate(values);
           }}>
-          <div className="space-y-2">
-            <label htmlFor="label" className="block text-sm font-medium text-gray-700">
-              {t("name")}
-            </label>
-            <div className="mt-1">
-              <input
-                type="text"
-                id="name"
-                required
-                className="block w-full rounded-sm border-gray-300 text-sm"
-                placeholder={t("default_schedule_name")}
-                {...register("name")}
-              />
-            </div>
-          </div>
+          <InputField
+            label={t("name")}
+            type="text"
+            id="name"
+            required
+            placeholder={t("default_schedule_name")}
+            {...register("name")}
+          />
           <DialogFooter>
             <DialogClose />
             <Button type="submit" loading={createMutation.isLoading}>

packages/features/schedules/components/ScheduleListItem.tsx

@@ -14,7 +14,7 @@ import {
   DropdownItem,
   DropdownMenuTrigger,
 } from "@calcom/ui";
-import { FiGlobe, FiMoreHorizontal, FiTrash } from "@calcom/ui/components/icon";
+import { FiGlobe, FiMoreHorizontal, FiTrash, FiClock } from "@calcom/ui/components/icon";
 
 export function ScheduleListItem({
   schedule,
@@ -87,6 +87,7 @@ export function ScheduleListItem({
                 {!schedule.isDefault && (
                   <DropdownItem
                     type="button"
+                    StartIcon={FiClock}
                     onClick={() => {
                       updateDefault({
                         scheduleId: schedule.id,