refactor: conferencing apps atoms web wrapper (#17732)

* conferencing apps atoms web wrapper

* Update DisconnectIntegrationModal.tsx

* formating changes

* handleBulkUpdateDefaultLocation -> bulkUpdateFunction

* fix: type error for handleRemoveApp

* fix: type error for handleRemoveApp

* refactor: removed ConferencingView component and migrated its functionality to ConferencingAppsViewWebWrapper

* refactor: moved AppList, AppListCard to packages/features

* fix: type changes

---------

Co-authored-by: Morgan <33722304+ThyMinimalDev@users.noreply.github.com>

apps/web/modules/apps/installed/[category]/installed-category-view.tsx

@@ -3,19 +3,28 @@
 import { useReducer } from "react";
 
 import getAppCategoryTitle from "@calcom/app-store/_utils/getAppCategoryTitle";
+import type { UpdateDefaultConferencingAppParams } from "@calcom/features/apps/components/AppList";
+import { AppList } from "@calcom/features/apps/components/AppList";
 import DisconnectIntegrationModal from "@calcom/features/apps/components/DisconnectIntegrationModal";
+import type { RemoveAppParams } from "@calcom/features/apps/components/DisconnectIntegrationModal";
+import type { BulkUpdatParams } from "@calcom/features/eventtypes/components/BulkEditDefaultForEventsModal";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { AppCategories } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
 import type { Icon } from "@calcom/ui";
-import { AppSkeletonLoader as SkeletonLoader, Button, EmptyScreen, ShellSubHeading } from "@calcom/ui";
+import {
+  AppSkeletonLoader as SkeletonLoader,
+  Button,
+  EmptyScreen,
+  ShellSubHeading,
+  showToast,
+} from "@calcom/ui";
 
 import { QueryCell } from "@lib/QueryCell";
 import type { querySchemaType, getServerSideProps } from "@lib/apps/installed/[category]/getServerSideProps";
 
-import { AppList } from "@components/apps/AppList";
 import { CalendarListContainer } from "@components/apps/CalendarListContainer";
 import InstalledAppsLayout from "@components/apps/layouts/InstalledAppsLayout";
 
@@ -31,6 +40,7 @@ const IntegrationsContainer = ({
   handleDisconnect,
 }: IntegrationsContainerProps): JSX.Element => {
   const { t } = useLocale();
+  const utils = trpc.useUtils();
   const query = trpc.viewer.integrations.useQuery({
     variant,
     exclude,
@@ -38,6 +48,42 @@ const IntegrationsContainer = ({
     includeTeamInstalledApps: true,
   });
 
+  const { data: defaultConferencingApp } = trpc.viewer.getUsersDefaultConferencingApp.useQuery();
+
+  const updateDefaultAppMutation = trpc.viewer.updateUserDefaultConferencingApp.useMutation();
+
+  const updateLocationsMutation = trpc.viewer.eventTypes.bulkUpdateToDefaultLocation.useMutation();
+
+  const handleUpdateDefaultConferencingApp = ({ appSlug, callback }: UpdateDefaultConferencingAppParams) => {
+    updateDefaultAppMutation.mutate(
+      { appSlug },
+      {
+        onSuccess: () => {
+          showToast("Default app updated successfully", "success");
+          utils.viewer.getUsersDefaultConferencingApp.invalidate();
+          callback();
+        },
+        onError: (error) => {
+          showToast(`Error: ${error.message}`, "error");
+        },
+      }
+    );
+  };
+
+  const handleBulkUpdateDefaultLocation = ({ eventTypeIds, callback }: BulkUpdatParams) => {
+    updateLocationsMutation.mutate(
+      {
+        eventTypeIds,
+      },
+      {
+        onSuccess: () => {
+          utils.viewer.getUsersDefaultConferencingApp.invalidate();
+          callback();
+        },
+      }
+    );
+  };
+
   // TODO: Refactor and reuse getAppCategories?
   const emptyIcon: Record<AppCategories, React.ComponentProps<typeof Icon>["name"]> = {
     calendar: "calendar",
@@ -95,7 +141,15 @@ const IntegrationsContainer = ({
               }
             />
 
-            <AppList handleDisconnect={handleDisconnect} data={data} variant={variant} />
+            <AppList
+              handleDisconnect={handleDisconnect}
+              data={data}
+              variant={variant}
+              defaultConferencingApp={defaultConferencingApp}
+              handleUpdateDefaultConferencingApp={handleUpdateDefaultConferencingApp}
+              handleBulkUpdateDefaultLocation={handleBulkUpdateDefaultLocation}
+              isBulkUpdateDefaultLocationPending={updateDefaultAppMutation.isPending}
+            />
           </div>
         );
       }}
@@ -114,6 +168,7 @@ export type PageProps = inferSSRProps<typeof getServerSideProps>;
 export default function InstalledApps(props: PageProps) {
   const searchParams = useCompatSearchParams();
   const { t } = useLocale();
+  const utils = trpc.useUtils();
   const category = searchParams?.get("category") as querySchemaType["category"];
   const categoryList: AppCategories[] = Object.values(AppCategories).filter((category) => {
     // Exclude calendar and other from categoryList, we handle those slightly differently below
@@ -136,6 +191,26 @@ export default function InstalledApps(props: PageProps) {
     updateData({ isOpen: true, credentialId, teamId });
   };
 
+  const deleteCredentialMutation = trpc.viewer.deleteCredential.useMutation();
+
+  const handleRemoveApp = ({ credentialId, teamId, callback }: RemoveAppParams) => {
+    deleteCredentialMutation.mutate(
+      { id: credentialId, teamId },
+      {
+        onSuccess: () => {
+          showToast(t("app_removed_successfully"), "success");
+          callback();
+          utils.viewer.integrations.invalidate();
+          utils.viewer.connectedCalendars.invalidate();
+        },
+        onError: () => {
+          showToast(t("error_removing_app"), "error");
+          callback();
+        },
+      }
+    );
+  };
+
   return (
     <>
       <InstalledAppsLayout heading={t("installed_apps")} subtitle={t("manage_your_connected_apps")}>
@@ -156,6 +231,7 @@ export default function InstalledApps(props: PageProps) {
         isOpen={data.isOpen}
         credentialId={data.credentialId}
         teamId={data.teamId}
+        handleRemoveApp={handleRemoveApp}
       />
     </>
   );

apps/web/modules/availability/[schedule]/schedule-view.tsx

@@ -4,6 +4,7 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 
 import { AvailabilitySettings } from "@calcom/atoms/monorepo";
+import type { BulkUpdatParams } from "@calcom/features/eventtypes/components/BulkEditDefaultForEventsModal";
 import { withErrorFromUnknown } from "@calcom/lib/getClientErrorFromUnknown";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -47,13 +48,22 @@ export const AvailabilitySettingsWebWrapper = ({
 
   const [isBulkUpdateModalOpen, setIsBulkUpdateModalOpen] = useState(false);
   const bulkUpdateDefaultAvailabilityMutation =
-    trpc.viewer.availability.schedule.bulkUpdateToDefaultAvailability.useMutation({
-      onSuccess: () => {
-        utils.viewer.availability.list.invalidate();
-        setIsBulkUpdateModalOpen(false);
-        showToast(t("success"), "success");
+    trpc.viewer.availability.schedule.bulkUpdateToDefaultAvailability.useMutation();
+
+  const bulkUpdateFunction = ({ eventTypeIds, callback }: BulkUpdatParams) => {
+    bulkUpdateDefaultAvailabilityMutation.mutate(
+      {
+        eventTypeIds,
       },
-    });
+      {
+        onSuccess: () => {
+          utils.viewer.availability.list.invalidate();
+          callback();
+          showToast(t("success"), "success");
+        },
+      }
+    );
+  };
 
   const isDefaultSchedule = me.data?.defaultScheduleId === scheduleId;
 
@@ -130,7 +140,7 @@ export const AvailabilitySettingsWebWrapper = ({
       bulkUpdateModalProps={{
         isOpen: isBulkUpdateModalOpen,
         setIsOpen: setIsBulkUpdateModalOpen,
-        save: bulkUpdateDefaultAvailabilityMutation.mutate,
+        save: bulkUpdateFunction,
         isSaving: bulkUpdateDefaultAvailabilityMutation.isPending,
       }}
     />

apps/web/modules/availability/availability-view.tsx

@@ -7,6 +7,7 @@ import { useCallback, useState } from "react";
 
 import SkeletonLoader from "@calcom/features/availability/components/SkeletonLoader";
 import { BulkEditDefaultForEventsModal } from "@calcom/features/eventtypes/components/BulkEditDefaultForEventsModal";
+import type { BulkUpdatParams } from "@calcom/features/eventtypes/components/BulkEditDefaultForEventsModal";
 import { NewScheduleButton, ScheduleListItem } from "@calcom/features/schedules";
 import Shell from "@calcom/features/shell/Shell";
 import { AvailabilitySliderTable } from "@calcom/features/timezone-buddy/components/AvailabilitySliderTable";
@@ -80,13 +81,22 @@ export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availab
   });
 
   const bulkUpdateDefaultAvailabilityMutation =
-    trpc.viewer.availability.schedule.bulkUpdateToDefaultAvailability.useMutation({
-      onSuccess: () => {
-        utils.viewer.availability.list.invalidate();
-        setBulkUpdateModal(false);
-        showToast(t("success"), "success");
+    trpc.viewer.availability.schedule.bulkUpdateToDefaultAvailability.useMutation();
+
+  const bulkUpdateFunction = ({ eventTypeIds, callback }: BulkUpdatParams) => {
+    bulkUpdateDefaultAvailabilityMutation.mutate(
+      {
+        eventTypeIds,
       },
-    });
+      {
+        onSuccess: () => {
+          utils.viewer.availability.list.invalidate();
+          showToast(t("success"), "success");
+          callback();
+        },
+      }
+    );
+  };
 
   const duplicateMutation = trpc.viewer.availability.schedule.duplicate.useMutation({
     onSuccess: async ({ schedule }) => {
@@ -149,7 +159,7 @@ export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availab
               isPending={bulkUpdateDefaultAvailabilityMutation.isPending}
               open={bulkUpdateModal}
               setOpen={setBulkUpdateModal}
-              bulkUpdateFunction={bulkUpdateDefaultAvailabilityMutation.mutate}
+              bulkUpdateFunction={bulkUpdateFunction}
               description={t("default_schedules_bulk_description")}
             />
           )}

apps/web/modules/settings/my-account/conferencing-view.tsx

@@ -1,100 +0,0 @@
-"use client";
-
-import { useReducer } from "react";
-
-import DisconnectIntegrationModal from "@calcom/features/apps/components/DisconnectIntegrationModal";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc/react";
-import { Button, EmptyScreen, SkeletonContainer, SkeletonText } from "@calcom/ui";
-
-import { QueryCell } from "@lib/QueryCell";
-
-import { AppList } from "@components/apps/AppList";
-
-const SkeletonLoader = () => {
-  return (
-    <SkeletonContainer>
-      <div className="divide-subtle border-subtle space-y-6 rounded-b-lg border border-t-0 px-6 py-4">
-        <SkeletonText className="h-8 w-full" />
-        <SkeletonText className="h-8 w-full" />
-      </div>
-    </SkeletonContainer>
-  );
-};
-
-type ModalState = {
-  isOpen: boolean;
-  credentialId: null | number;
-};
-
-const ConferencingView = () => {
-  const { t } = useLocale();
-
-  const [modal, updateModal] = useReducer(
-    (data: ModalState, partialData: Partial<ModalState>) => ({ ...data, ...partialData }),
-    {
-      isOpen: false,
-      credentialId: null,
-    }
-  );
-
-  const query = trpc.viewer.integrations.useQuery({
-    variant: "conferencing",
-    onlyInstalled: true,
-  });
-
-  const handleModelClose = () => {
-    updateModal({ isOpen: false, credentialId: null });
-  };
-
-  const handleDisconnect = (credentialId: number) => {
-    updateModal({ isOpen: true, credentialId });
-  };
-
-  return (
-    <>
-      <div className="bg-default w-full sm:mx-0 xl:mt-0">
-        <QueryCell
-          query={query}
-          customLoader={<SkeletonLoader />}
-          success={({ data }) => {
-            if (!data.items.length) {
-              return (
-                <EmptyScreen
-                  Icon="calendar"
-                  headline={t("no_category_apps", {
-                    category: t("conferencing").toLowerCase(),
-                  })}
-                  description={t("no_category_apps_description_conferencing")}
-                  buttonRaw={
-                    <Button
-                      color="secondary"
-                      data-testid="connect-conferencing-apps"
-                      href="/apps/categories/conferencing">
-                      {t("connect_conference_apps")}
-                    </Button>
-                  }
-                />
-              );
-            }
-            return (
-              <AppList
-                listClassName="rounded-lg rounded-t-none border-t-0 max-w-full"
-                handleDisconnect={handleDisconnect}
-                data={data}
-                variant="conferencing"
-              />
-            );
-          }}
-        />
-      </div>
-      <DisconnectIntegrationModal
-        handleModelClose={handleModelClose}
-        isOpen={modal.isOpen}
-        credentialId={modal.credentialId}
-      />
-    </>
-  );
-};
-
-export default ConferencingView;