Fixing availability for MET (#8662)

* Fixing availability for MET

* Removing unneeded code

* Fixing unit tests

* Lint fixes

---------

Co-authored-by: Joe Au-Yeung <j.auyeung419@gmail.com>

apps/web/components/eventtype/EventAvailabilityTab.tsx

@@ -154,12 +154,11 @@ const EventTypeScheduleDetails = ({
 
 const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
   const { t } = useLocale();
-  const { shouldLockIndicator, shouldLockDisableProps, isManagedEventType, isChildrenManagedEventType } =
-    useLockedFieldsManager(
-      eventType,
-      t("locked_fields_admin_description"),
-      t("locked_fields_member_description")
-    );
+  const { shouldLockIndicator, isManagedEventType, isChildrenManagedEventType } = useLockedFieldsManager(
+    eventType,
+    t("locked_fields_admin_description"),
+    t("locked_fields_member_description")
+  );
   const { watch } = useFormContext<FormValues>();
   const watchSchedule = watch("schedule");
   const formMethods = useFormContext<FormValues>();
@@ -205,6 +204,8 @@ const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
       const value = options.find((option) =>
         scheduleId
           ? option.value === scheduleId
+          : isManagedEventType
+          ? option.value === 0
           : option.value === schedules.find((schedule) => schedule.isDefault)?.id
       );
 

apps/web/pages/event-types/index.tsx

@@ -352,6 +352,9 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
 
   const firstItem = types[0];
   const lastItem = types[types.length - 1];
+  const isManagedEventPrefix = () => {
+    return deleteDialogTypeSchedulingType === SchedulingType.MANAGED ? "_managed" : "";
+  };
   return (
     <div className="bg-default border-subtle mb-16 flex overflow-hidden rounded-md border">
       <ul ref={parent} className="divide-subtle !static w-full divide-y" data-testid="event-types">
@@ -501,7 +504,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                               )}
                               {/* readonly is only set when we are on a team - if we are on a user event type null will be the value. */}
                               {(group.metadata?.readOnly === false || group.metadata.readOnly === null) &&
-                                isManagedEventType && (
+                                !isChildrenManagedEventType && (
                                   <>
                                     <DropdownMenuSeparator />
                                     <DropdownMenuItem>
@@ -533,27 +536,31 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                     </DropdownMenuTrigger>
                     <DropdownMenuPortal>
                       <DropdownMenuContent>
-                        <DropdownMenuItem className="outline-none">
-                          <DropdownItem
-                            href={calLink}
-                            target="_blank"
-                            StartIcon={ExternalLink}
-                            className="w-full rounded-none">
-                            {t("preview")}
-                          </DropdownItem>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem className="outline-none">
-                          <DropdownItem
-                            data-testid={"event-type-duplicate-" + type.id}
-                            onClick={() => {
-                              navigator.clipboard.writeText(calLink);
-                              showToast(t("link_copied"), "success");
-                            }}
-                            StartIcon={Clipboard}
-                            className="w-full rounded-none text-left">
-                            {t("copy_link")}
-                          </DropdownItem>
-                        </DropdownMenuItem>
+                        {!isManagedEventType && (
+                          <>
+                            <DropdownMenuItem className="outline-none">
+                              <DropdownItem
+                                href={calLink}
+                                target="_blank"
+                                StartIcon={ExternalLink}
+                                className="w-full rounded-none">
+                                {t("preview")}
+                              </DropdownItem>
+                            </DropdownMenuItem>
+                            <DropdownMenuItem className="outline-none">
+                              <DropdownItem
+                                data-testid={"event-type-duplicate-" + type.id}
+                                onClick={() => {
+                                  navigator.clipboard.writeText(calLink);
+                                  showToast(t("link_copied"), "success");
+                                }}
+                                StartIcon={Clipboard}
+                                className="w-full rounded-none text-left">
+                                {t("copy_link")}
+                              </DropdownItem>
+                            </DropdownMenuItem>
+                          </>
+                        )}
                         {isNativeShare ? (
                           <DropdownMenuItem className="outline-none">
                             <DropdownItem
@@ -574,36 +581,46 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                             </DropdownItem>
                           </DropdownMenuItem>
                         ) : null}
-                        <DropdownMenuItem className="outline-none">
-                          <DropdownItem
-                            onClick={() => router.push("/event-types/" + type.id)}
-                            StartIcon={Edit}
-                            className="w-full rounded-none">
-                            {t("edit")}
-                          </DropdownItem>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem className="outline-none">
-                          <DropdownItem
-                            onClick={() => openDuplicateModal(type, group)}
-                            StartIcon={Copy}
-                            data-testid={"event-type-duplicate-" + type.id}>
-                            {t("duplicate")}
-                          </DropdownItem>
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem className="outline-none">
-                          <DropdownItem
-                            color="destructive"
-                            onClick={() => {
-                              setDeleteDialogOpen(true);
-                              setDeleteDialogTypeId(type.id);
-                              setDeleteDialogSchedulingType(type.schedulingType);
-                            }}
-                            StartIcon={Trash}
-                            className="w-full rounded-none">
-                            {t("delete")}
-                          </DropdownItem>
-                        </DropdownMenuItem>
+                        {!readOnly && (
+                          <DropdownMenuItem className="outline-none">
+                            <DropdownItem
+                              onClick={() => router.push("/event-types/" + type.id)}
+                              StartIcon={Edit}
+                              className="w-full rounded-none">
+                              {t("edit")}
+                            </DropdownItem>
+                          </DropdownMenuItem>
+                        )}
+                        {!isManagedEventType && !isChildrenManagedEventType && (
+                          <DropdownMenuItem className="outline-none">
+                            <DropdownItem
+                              onClick={() => openDuplicateModal(type, group)}
+                              StartIcon={Copy}
+                              data-testid={"event-type-duplicate-" + type.id}>
+                              {t("duplicate")}
+                            </DropdownItem>
+                          </DropdownMenuItem>
+                        )}
+                        {/* readonly is only set when we are on a team - if we are on a user event type null will be the value. */}
+                        {(group.metadata?.readOnly === false || group.metadata.readOnly === null) &&
+                          !isChildrenManagedEventType && (
+                            <>
+                              <DropdownMenuSeparator />
+                              <DropdownMenuItem className="outline-none">
+                                <DropdownItem
+                                  color="destructive"
+                                  onClick={() => {
+                                    setDeleteDialogOpen(true);
+                                    setDeleteDialogTypeId(type.id);
+                                    setDeleteDialogSchedulingType(type.schedulingType);
+                                  }}
+                                  StartIcon={Trash}
+                                  className="w-full rounded-none">
+                                  {t("delete")}
+                                </DropdownItem>
+                              </DropdownMenuItem>
+                            </>
+                          )}
                       </DropdownMenuContent>
                     </DropdownMenuPortal>
                   </Dropdown>
@@ -616,36 +633,24 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
       <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
         <ConfirmationDialogContent
           variety="danger"
-          title={t(
-            `delete_${deleteDialogTypeSchedulingType === SchedulingType.MANAGED && "managed"}_event_type`
-          )}
-          confirmBtnText={t(
-            `confirm_delete_${
-              deleteDialogTypeSchedulingType === SchedulingType.MANAGED && "managed"
-            }_event_type`
-          )}
-          loadingText={t(
-            `confirm_delete_${
-              deleteDialogTypeSchedulingType === SchedulingType.MANAGED && "managed"
-            }_event_type`
-          )}
+          title={t(`delete${isManagedEventPrefix()}_event_type`)}
+          confirmBtnText={t(`confirm_delete_event_type`)}
+          loadingText={t(`confirm_delete_event_type`)}
           onConfirm={(e) => {
             e.preventDefault();
             deleteEventTypeHandler(deleteDialogTypeId);
           }}>
-          <p className="mt-5">
-            {t(
-              `delete_${
-                deleteDialogTypeSchedulingType === SchedulingType.MANAGED && "managed"
-              }_event_type_description`
-            )}
-          </p>
           <p className="mt-5">
             <Trans
-              i18nKey={`delete_${
-                deleteDialogTypeSchedulingType === SchedulingType.MANAGED && "managed"
-              }_event_type_warning`}
-            />
+              i18nKey={`delete${isManagedEventPrefix()}_event_type_description`}
+              components={{ li: <li />, ul: <ul className="ml-4 list-disc" /> }}>
+              <ul>
+                <li>Members assigned to this event type will also have their event types deleted.</li>
+                <li>
+                  Anyone who they&apos;ve shared their link with will no longer be able to book using it.
+                </li>
+              </ul>
+            </Trans>
           </p>
         </ConfirmationDialogContent>
       </Dialog>

apps/web/test/lib/handleChildrenEventTypes.test.ts

@@ -95,7 +95,8 @@ describe("handleChildrenEventTypes", () => {
     it("Adds new users", async () => {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
-      const { schedulingType, id, teamId, timeZone, scheduleId, users, ...evType } = mockFindFirstEventType({
+      // eslint-disable-next-line
+      const { schedulingType, id, teamId, timeZone, users, ...evType } = mockFindFirstEventType({
         id: 123,
         metadata: { managedEventConfig: {} },
         locations: [],
@@ -130,6 +131,7 @@ describe("handleChildrenEventTypes", () => {
     it("Updates old users", async () => {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
+      // eslint-disable-next-line
       const { schedulingType, id, teamId, timeZone, locations, parentId, userId, scheduleId, ...evType } =
         mockFindFirstEventType({
           metadata: { managedEventConfig: {} },
@@ -214,7 +216,8 @@ describe("handleChildrenEventTypes", () => {
     it("Deletes existent event types for new users added", async () => {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
-      const { schedulingType, id, teamId, timeZone, scheduleId, users, ...evType } = mockFindFirstEventType({
+      // eslint-disable-next-line
+      const { schedulingType, id, teamId, timeZone, users, ...evType } = mockFindFirstEventType({
         id: 123,
         metadata: { managedEventConfig: {} },
         locations: [],
@@ -250,6 +253,7 @@ describe("handleChildrenEventTypes", () => {
     it("Deletes existent event types for old users updated", async () => {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
+      // eslint-disable-next-line
       const { schedulingType, id, teamId, timeZone, users, locations, parentId, userId, ...evType } =
         mockFindFirstEventType({
           metadata: { managedEventConfig: {} },

packages/prisma/zod-utils.ts

@@ -517,7 +517,7 @@ export const allManagedEventTypeProps: { [k in keyof Omit<Prisma.EventTypeSelect
   periodCountCalendarDays: true,
   bookingLimits: true,
   slotInterval: true,
-  schedule: true,
+  scheduleId: true,
   workflows: true,
   bookingFields: true,
   durationLimits: true,
@@ -526,5 +526,5 @@ export const allManagedEventTypeProps: { [k in keyof Omit<Prisma.EventTypeSelect
 // All properties that are defined as unlocked based on all managed props
 // Eventually this is going to be just a default and the user can change the config through the UI
 export const unlockedManagedEventTypeProps = {
-  ...pick(allManagedEventTypeProps, ["locations", "schedule", "destinationCalendar"]),
+  ...pick(allManagedEventTypeProps, ["locations", "scheduleId", "destinationCalendar"]),
 };