/availability - Add ability to set as default in the dropdown (#5717)

Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev>
Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: Matheus Benini Ferreira <88898100+MatheusBeniniF@users.noreply.github.com>
Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com>
Co-authored-by: niteshsingh1357 <niteshsingh1357@gmail.com>
Co-authored-by: gitstart-app[bot] <57568882+gitstart-app[bot]@users.noreply.github.com>
Co-authored-by: gitstart <gitstart@gitstart.com>
Co-authored-by: gGh00sTt <coolmagnas@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: Matheus Muniz <87545749+matheusmuniz03@users.noreply.github.com>

Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev>
Co-authored-by: Matheus Benini Ferreira <88898100+MatheusBeniniF@users.noreply.github.com>
Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com>
Co-authored-by: niteshsingh1357 <niteshsingh1357@gmail.com>
Co-authored-by: gitstart-app[bot] <57568882+gitstart-app[bot]@users.noreply.github.com>
Co-authored-by: gitstart <gitstart@gitstart.com>
Co-authored-by: gGh00sTt <coolmagnas@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: Matheus Muniz <87545749+matheusmuniz03@users.noreply.github.com>
Co-authored-by: Omar López <zomars@me.com>

apps/web/pages/availability/index.tsx

@@ -45,6 +45,24 @@ export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availab
     },
   });
 
+  const updateMutation = trpc.viewer.availability.schedule.update.useMutation({
+    onSuccess: async ({ schedule }) => {
+      await utils.viewer.availability.list.invalidate();
+      showToast(
+        t("availability_updated_successfully", {
+          scheduleName: schedule.name,
+        }),
+        "success"
+      );
+    },
+    onError: (err) => {
+      if (err instanceof HttpError) {
+        const message = `${err.statusCode}: ${err.message}`;
+        showToast(message, "error");
+      }
+    },
+  });
+
   // Adds smooth delete button - item fades and old item slides into place
 
   const [animationParentRef] = useAutoAnimate<HTMLUListElement>();
@@ -71,6 +89,7 @@ export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availab
                 }}
                 key={schedule.id}
                 schedule={schedule}
+                updateDefault={updateMutation.mutate}
                 deleteFunction={deleteMutation.mutate}
               />
             ))}

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

@@ -1408,5 +1408,6 @@
   "enter_option": "Enter Option {{index}}",
   "add_an_option": "Add an option",
   "radio": "Radio",
-  "kbar_search_placeholder" : "Start typing to search"
+  "kbar_search_placeholder" : "Start typing to search",
+  "set_as_default": "Set as default"
 }

packages/features/schedules/components/ScheduleListItem.tsx

@@ -2,9 +2,12 @@ import Link from "next/link";
 import { Fragment } from "react";
 
 import { availabilityAsString } from "@calcom/lib/availability";
+import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Availability } from "@calcom/prisma/client";
 import { RouterOutputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
+import { Schedule } from "@calcom/types/schedule";
 import {
   Badge,
   Button,
@@ -19,6 +22,7 @@ export function ScheduleListItem({
   schedule,
   deleteFunction,
   displayOptions,
+  updateDefault,
 }: {
   schedule: RouterOutputs["viewer"]["availability"]["list"]["schedules"][number];
   deleteFunction: ({ scheduleId }: { scheduleId: number }) => void;
@@ -26,9 +30,20 @@ export function ScheduleListItem({
     timeZone?: string;
     hour12?: boolean;
   };
+  updateDefault: ({
+    scheduleId,
+    isDefault,
+    schedule,
+  }: {
+    scheduleId: number;
+    isDefault: boolean;
+    schedule: Schedule;
+  }) => void;
 }) {
   const { t, i18n } = useLocale();
 
+  const { data, isLoading } = trpc.viewer.availability.schedule.get.useQuery({ scheduleId: schedule.id });
+
   return (
     <li key={schedule.id}>
       <div className="flex items-center justify-between py-5 hover:bg-neutral-50 ltr:pl-4 rtl:pr-4 sm:ltr:pl-0 sm:rtl:pr-0">
@@ -67,22 +82,44 @@ export function ScheduleListItem({
           <DropdownMenuTrigger asChild className="mr-5">
             <Button type="button" size="icon" color="secondary" StartIcon={Icon.FiMoreHorizontal} />
           </DropdownMenuTrigger>
-          <DropdownMenuContent>
+          {!isLoading && data && (
-            <DropdownMenuItem>
+            <DropdownMenuContent>
-              <Button
+              <DropdownMenuItem className="min-w-40 focus:ring-gray-100">
-                onClick={() => {
+                {!schedule.isDefault && (
-                  deleteFunction({
+                  <Button
-                    scheduleId: schedule.id,
+                    type="button"
-                  });
+                    color="minimal"
-                }}
+                    className="w-full rounded-b-none border-none font-normal"
-                type="button"
+                    disabled={schedule.isDefault}
-                color="destructive"
+                    onClick={() => {
-                className="w-full font-normal"
+                      updateDefault({
-                StartIcon={Icon.FiTrash}>
+                        scheduleId: schedule.id,
-                {t("delete_schedule")}
+                        isDefault: true,
-              </Button>
+                        schedule: data.availability,
-            </DropdownMenuItem>
+                      });
-          </DropdownMenuContent>
+                    }}>
+                    {t("set_as_default")}
+                  </Button>
+                )}
+              </DropdownMenuItem>
+              <DropdownMenuItem className="min-w-40 focus:ring-gray-100">
+                <Button
+                  onClick={() => {
+                    deleteFunction({
+                      scheduleId: schedule.id,
+                    });
+                  }}
+                  type="button"
+                  color="destructive"
+                  className={classNames(
+                    "w-full border-none font-normal",
+                    !schedule.isDefault && "rounded-t-none"
+                  )}>
+                  {t("delete")}
+                </Button>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          )}
         </Dropdown>
       </div>
     </li>