{data.eventTypes.length > 0 && (
diff --git a/packages/platform/atoms/availability/AvailabilitySettings.tsx b/packages/platform/atoms/availability/AvailabilitySettings.tsx
index 7bb6be7b7d..9af4e8d763 100644
--- a/packages/platform/atoms/availability/AvailabilitySettings.tsx
+++ b/packages/platform/atoms/availability/AvailabilitySettings.tsx
@@ -5,6 +5,7 @@ import { useMemo, useState } from "react";
import { Controller, useFieldArray, useForm, useWatch } from "react-hook-form";
import dayjs from "@calcom/dayjs";
+import type { BulkUpdatParams } from "@calcom/features/eventtypes/components/BulkEditDefaultForEventsModal";
import { BulkEditDefaultForEventsModal } from "@calcom/features/eventtypes/components/BulkEditDefaultForEventsModal";
import { DateOverrideInputDialog, DateOverrideList } from "@calcom/features/schedules";
import WebSchedule, {
@@ -106,7 +107,7 @@ type AvailabilitySettingsProps = {
bulkUpdateModalProps?: {
isOpen: boolean;
setIsOpen: Dispatch
>;
- save: ({ eventTypeIds }: { eventTypeIds: number[] }) => void;
+ save: (params: BulkUpdatParams) => void;
isSaving: boolean;
};
};
diff --git a/packages/platform/atoms/connect/conferencing-apps/ConferencingAppsViewWebWrapper.tsx b/packages/platform/atoms/connect/conferencing-apps/ConferencingAppsViewWebWrapper.tsx
new file mode 100644
index 0000000000..0571f4b03d
--- /dev/null
+++ b/packages/platform/atoms/connect/conferencing-apps/ConferencingAppsViewWebWrapper.tsx
@@ -0,0 +1,187 @@
+"use client";
+
+import { useReducer } from "react";
+
+import { AppList } from "@calcom/features/apps/components/AppList";
+import DisconnectIntegrationModal from "@calcom/features/apps/components/DisconnectIntegrationModal";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { QueryCell } from "@calcom/trpc/components/QueryCell";
+import { trpc } from "@calcom/trpc/react";
+import { Button, EmptyScreen, showToast, SkeletonContainer, SkeletonText } from "@calcom/ui";
+
+type ConferencingAppsViewWebWrapperProps = {
+ title: string;
+ description: string;
+ add: string;
+};
+
+type UpdateDefaultConferencingAppParams = { appSlug: string; callback: () => void };
+type BulkUpdatParams = { eventTypeIds: number[]; callback: () => void };
+type RemoveAppParams = { credentialId: number; teamId?: number; callback: () => void };
+
+const SkeletonLoader = () => {
+ return (
+
+
+
+
+
+
+ );
+};
+
+type ModalState = {
+ isOpen: boolean;
+ credentialId: null | number;
+};
+
+export const ConferencingAppsViewWebWrapper = ({
+ title,
+ description,
+ add,
+}: ConferencingAppsViewWebWrapperProps) => {
+ const { t } = useLocale();
+ const utils = trpc.useUtils();
+
+ const [modal, updateModal] = useReducer(
+ (data: ModalState, partialData: Partial) => ({ ...data, ...partialData }),
+ {
+ isOpen: false,
+ credentialId: null,
+ }
+ );
+
+ const handleModelClose = () => {
+ updateModal({ isOpen: false, credentialId: null });
+ };
+
+ const handleDisconnect = (credentialId: number) => {
+ updateModal({ isOpen: true, credentialId });
+ };
+
+ const installedIntegrationsQuery = trpc.viewer.integrations.useQuery({
+ variant: "conferencing",
+ onlyInstalled: true,
+ });
+
+ const { data: defaultConferencingApp } = trpc.viewer.getUsersDefaultConferencingApp.useQuery();
+
+ const deleteCredentialMutation = trpc.viewer.deleteCredential.useMutation();
+
+ const updateDefaultAppMutation = trpc.viewer.updateUserDefaultConferencingApp.useMutation();
+
+ const updateLocationsMutation = trpc.viewer.eventTypes.bulkUpdateToDefaultLocation.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();
+ },
+ }
+ );
+ };
+
+ 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();
+ },
+ }
+ );
+ };
+
+ const AddConferencingButton = () => {
+ return (
+
+ );
+ };
+
+ return (
+ }
+ borderInShellHeader={true}>
+ <>
+
+
}
+ success={({ data }) => {
+ if (!data.items.length) {
+ return (
+
+ {t("connect_conference_apps")}
+
+ }
+ />
+ );
+ }
+ return (
+
+ );
+ }}
+ />
+