tRPC v10 merge

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

@@ -1,11 +1,4 @@
-import {
-  DropdownMenuCheckboxItem as PrimitiveDropdownMenuCheckboxItem,
-  DropdownMenuCheckboxItemProps,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-} from "@radix-ui/react-dropdown-menu";
+import { DropdownMenuItemIndicator } from "@radix-ui/react-dropdown-menu";
 import classNames from "classnames";
 import { GetStaticPaths, GetStaticProps } from "next";
 import { useRouter } from "next/router";
@@ -24,7 +17,15 @@ import type { Schedule as ScheduleType } from "@calcom/types/schedule";
 import { Icon } from "@calcom/ui";
 import TimezoneSelect from "@calcom/ui/form/TimezoneSelect";
 import Button from "@calcom/ui/v2/core/Button";
-import Dropdown, { DropdownMenuTrigger, DropdownMenuContent } from "@calcom/ui/v2/core/Dropdown";
+import Dropdown, {
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuCheckboxItem,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+} from "@calcom/ui/v2/core/Dropdown";
 import Shell from "@calcom/ui/v2/core/Shell";
 import Switch from "@calcom/ui/v2/core/Switch";
 import VerticalDivider from "@calcom/ui/v2/core/VerticalDivider";
@@ -48,44 +49,50 @@ type AvailabilityFormValues = {
   isDefault: boolean;
 };
 
-const DropdownMenuCheckboxItem = React.forwardRef<HTMLDivElement, DropdownMenuCheckboxItemProps>(
-  ({ children }, ref) => (
-    <PrimitiveDropdownMenuCheckboxItem ref={ref}>
-      <label className="flex w-60 items-center justify-between">
-        {children}
-        <input
-          type="checkbox"
-          onClick={(e) => e.stopPropagation()}
-          onChange={(e) => e.stopPropagation()}
-          className="inline-block rounded-[4px] border-gray-300 text-neutral-900 focus:ring-neutral-500 disabled:text-neutral-400"
-        />
-      </label>
-    </PrimitiveDropdownMenuCheckboxItem>
-  )
-);
-
 DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
 
-const ActiveOnEventTypeSelect = () => {
+type EventTypeGroup = { groupName: string; eventTypes: { title: string; isActive: boolean }[] };
+
+const ActiveOnEventTypeSelect = ({ scheduleId }: { scheduleId: number }) => {
   const { t } = useLocale();
   const [isOpen, setOpen] = useState(false);
+  // I was doubtful to make this RHF but this has no point: because the DropdownMenuCheckboxItem is
+  // controlled anyway; requiring the use of Controller regardless.
+  const [eventTypeIds, setEventTypeIds] = useState<number[]>([]);
 
   const { data } = trpc.useQuery(["viewer.eventTypes"]);
+  const mutation = trpc.useMutation("viewer.availability.activateOnEventTypes");
+  const { data: user } = useMeQuery();
 
   const eventTypeGroups = data?.eventTypeGroups.reduce((aggregate, eventTypeGroups) => {
     if (eventTypeGroups.eventTypes[0].team !== null) {
       aggregate.push({
         groupName: eventTypeGroups.eventTypes[0].team.name || "",
-        eventTypeNames: [...eventTypeGroups.eventTypes.map((eventType) => eventType.title)],
+        eventTypes: [
+          ...eventTypeGroups.eventTypes.map((eventType) => ({
+            title: eventType.title,
+            isActive: eventType.scheduleId
+              ? scheduleId === eventType.scheduleId
+              : scheduleId === user?.defaultScheduleId,
+          })),
+        ],
       });
     } else {
       aggregate.push({
         groupName: eventTypeGroups.eventTypes[0].users[0].name || "",
-        eventTypeNames: [...eventTypeGroups.eventTypes.map((eventType) => eventType.title)],
+        eventTypes: [
+          ...eventTypeGroups.eventTypes.map((eventType) => ({
+            title: eventType.title,
+            isActive: eventType.scheduleId
+              ? scheduleId === eventType.scheduleId
+              : scheduleId === user?.defaultScheduleId,
+          })),
+        ],
       });
     }
+
     return aggregate;
-  }, [] as { groupName: string; eventTypeNames: string[] }[]);
+  }, [] as EventTypeGroup[]);
 
   return (
     <Dropdown onOpenChange={setOpen} open={isOpen}>
@@ -107,7 +114,12 @@ const ActiveOnEventTypeSelect = () => {
               />
             )
           }>
-          {t("nr_event_type", { count: 3 })}
+          {t("nr_event_type", {
+            count: eventTypeGroups?.reduce(
+              (count, group) => count + group.eventTypes.filter((eventType) => eventType.isActive).length,
+              0
+            ),
+          })}
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start">
@@ -116,9 +128,16 @@ const ActiveOnEventTypeSelect = () => {
             <DropdownMenuLabel className="h6 pb-3 pl-1 text-xs font-medium uppercase text-neutral-400">
               {eventTypeGroup.groupName}
             </DropdownMenuLabel>
-            {eventTypeGroup.eventTypeNames.map((eventTypeTitle) => (
-              <DropdownMenuCheckboxItem key={eventTypeTitle}>
-                <span className="w-[200px] truncate">{eventTypeTitle}</span>
+            {eventTypeGroup.eventTypes.map((eventType) => (
+              <DropdownMenuCheckboxItem
+                key={eventType.title}
+                defaultChecked={eventType.isActive}
+                onSelect={(e) => e.preventDefault()}
+                onCheckedChange={(e) => {
+                  console.log(e);
+                }}>
+                <span className="w-[200px] truncate">{eventType.title}</span>
+                <DropdownMenuItemIndicator>Bliep</DropdownMenuItemIndicator>
               </DropdownMenuCheckboxItem>
             ))}
           </DropdownMenuGroup>
@@ -130,11 +149,7 @@ const ActiveOnEventTypeSelect = () => {
           <Button color="minimalSecondary" onClick={() => setOpen(false)}>
             {t("cancel")}
           </Button>
-          <Button
-            color="primary"
-            onClick={() => {
-              console.log("do nothing");
-            }}>
+          <Button color="primary" type="submit" onClick={() => mutation.mutate({ scheduleId, eventTypeIds })}>
             {t("apply")}
           </Button>
         </DropdownMenuItem>
@@ -293,7 +308,7 @@ export default function Availability({ schedule }: { schedule: number }) {
                   </div>
                   <Label className="mt-1 cursor-pointer space-y-2 sm:w-full md:w-1/2 lg:w-full">
                     <span>Active on</span>
-                    <ActiveOnEventTypeSelect />
+                    <ActiveOnEventTypeSelect scheduleId={schedule} />
                   </Label>
                 </div>
                 <hr className="my-8" />

packages/trpc/server/routers/viewer.tsx

@@ -175,6 +175,7 @@ const loggedInViewerRouter = createProtectedRouter()
         theme: user.theme,
         hideBranding: user.hideBranding,
         metadata: user.metadata,
+        defaultScheduleId: user.defaultScheduleId,
       };
     },
   })

packages/trpc/server/routers/viewer/availability.tsx

@@ -37,6 +37,15 @@ export const availabilityRouter = createProtectedRouter()
       };
     },
   })
+  .mutation("activateOnEventTypes", {
+    input: z.object({
+      scheduleId: z.number(),
+      eventTypeIds: z.array(z.number()).nonempty(),
+    }),
+    async resolve(/*{ ctx, input }*/) {
+      // intentionally empty
+    },
+  })
   .query("schedule", {
     input: z.object({
       scheduleId: z.optional(z.number()),