import { Trans } from "next-i18next";
import Link from "next/link";
import { useRouter } from "next/router";
import { Fragment } from "react";
import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import {
Alert,
Badge,
Button,
DisconnectIntegration,
EmptyScreen,
getSettingsLayout as getLayout,
Icon,
List,
ListItem,
ListItemText,
ListItemTitle,
Meta,
SkeletonButton,
SkeletonContainer,
SkeletonText,
} from "@calcom/ui";
import { QueryCell } from "@lib/QueryCell";
import { CalendarSwitch } from "@components/settings/CalendarSwitch";
const SkeletonLoader = () => {
return (
);
};
const AddCalendarButton = () => {
const { t } = useLocale();
return (
<>
>
);
};
const CalendarsView = () => {
const { t } = useLocale();
const router = useRouter();
const utils = trpc.useContext();
const query = trpc.viewer.connectedCalendars.useQuery();
const mutation = trpc.viewer.setDestinationCalendar.useMutation({
async onSettled() {
await utils.viewer.connectedCalendars.invalidate();
},
});
return (
<>
}
/>
}
success={({ data }) => {
return data.connectedCalendars.length ? (
{t("add_to_calendar")}
Where to add events when you re booked. You can override this on a per-event basis in
advanced settings in the event type.
{t("check_for_conflicts")}
{t("select_calendars")}
{data.connectedCalendars.map((item) => (
{item.error && item.error.message && (
{/* @TODO: add a reconnect button, that calls add api and delete old credential */}
query.refetch()}
buttonProps={{
className: "border border-gray-300 py-[2px]",
color: "secondary",
}}
/>
>
}
/>
)}
{item?.error === undefined && item.calendars && (
{
// eslint-disable-next-line @next/next/no-img-element
item.integration.logo && (
)
}
{item.integration.name || item.integration.title}
{data?.destinationCalendar?.credentialId === item.credentialId && (
Default
)}
{item.integration.description}
{t("toggle_calendars_conflict")}
{item.calendars.map((cal) => (
))}
)}
))}
) : (
router.push("/apps/categories/calendar")}
/>
);
}}
error={() => {
return (
An error ocurred while fetching your Calendars.
query.refetch()}>
try again
.
}
severity="error"
/>
);
}}
/>
>
);
};
CalendarsView.getLayout = getLayout;
export default CalendarsView;