import { useCallback, useState } from "react"; import type { EventLocationType } from "@calcom/app-store/locations"; import { getEventLocationTypeFromApp } from "@calcom/app-store/locations"; import { AppSetDefaultLinkDialog } from "@calcom/features/apps/components/AppSetDefaultLinkDialog"; import { BulkEditDefaultConferencingModal } from "@calcom/features/eventtypes/components/BulkEditDefaultConferencingModal"; import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Button, Dialog, DialogClose, DialogContent, DialogFooter, Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownItem, DropdownMenuTrigger, List, Meta, showToast, SkeletonContainer, SkeletonText, } from "@calcom/ui"; import { FiAlertCircle, FiMoreHorizontal, FiTrash, FiVideo } from "@calcom/ui/components/icon"; import AppListCard from "@components/AppListCard"; const SkeletonLoader = ({ title, description }: { title: string; description: string }) => { return (
); }; const ConferencingLayout = () => { const { t } = useLocale(); const utils = trpc.useContext(); const { data: defaultConferencingApp, isLoading: defaultConferencingAppLoading } = trpc.viewer.getUsersDefaultConferencingApp.useQuery(); const { data: apps, isLoading } = trpc.viewer.integrations.useQuery({ variant: "conferencing", onlyInstalled: true, }); const deleteAppMutation = trpc.viewer.deleteCredential.useMutation({ onSuccess: () => { showToast("Integration deleted successfully", "success"); utils.viewer.integrations.invalidate({ variant: "conferencing", onlyInstalled: true }); setDeleteAppModal(false); }, onError: () => { showToast("Error deleting app", "error"); setDeleteAppModal(false); }, }); const onSuccessCallback = useCallback(() => { setBulkUpdateModal(true); showToast("Default app updated successfully", "success"); }, []); const updateDefaultAppMutation = trpc.viewer.updateUserDefaultConferencingApp.useMutation({ onSuccess: async () => { await utils.viewer.getUsersDefaultConferencingApp.invalidate(); onSuccessCallback(); }, onError: (error) => { showToast(`Error: ${error.message}`, "error"); }, }); const [deleteAppModal, setDeleteAppModal] = useState(false); const [bulkUpdateModal, setBulkUpdateModal] = useState(false); const [locationType, setLocationType] = useState<(EventLocationType & { slug: string }) | undefined>( undefined ); const [deleteCredentialId, setDeleteCredentialId] = useState(0); if (isLoading || defaultConferencingAppLoading) return ; return (
{apps?.items && apps.items .map((app) => ({ ...app, title: app.title || app.name })) .map((app) => { const appSlug = app?.slug; const appIsDefault = appSlug === defaultConferencingApp?.appSlug || (appSlug === "daily-video" && !defaultConferencingApp?.appSlug); // Default to cal video if the user doesnt have it set (we do this on new account creation but not old) return (
} /> ); })} {locationType && ( )} {bulkUpdateModal && ( )} ); }; ConferencingLayout.getLayout = getLayout; export default ConferencingLayout;