diff --git a/apps/web/components/AppListCard.tsx b/apps/web/components/AppListCard.tsx index e9deaae260ffff..6120388553d7fe 100644 --- a/apps/web/components/AppListCard.tsx +++ b/apps/web/components/AppListCard.tsx @@ -32,6 +32,7 @@ type AppListCardProps = { invalidCredential?: boolean; children?: ReactNode; credentialOwner?: CredentialOwner; + className?: string; } & ShouldHighlight; const schema = z.object({ hl: z.string().optional() }); @@ -50,6 +51,7 @@ export default function AppListCard(props: AppListCardProps) { invalidCredential, children, credentialOwner, + className, } = props; const { data: { hl }, @@ -83,7 +85,7 @@ export default function AppListCard(props: AppListCardProps) { }, [highlight, pathname, router, searchParams, shouldHighlight]); return ( -
+
{logo ? ( unknown | Promise; fromOnboarding?: boolean; destinationCalendarId?: string; + isLoading?: boolean; }; function CalendarList(props: Props) { @@ -70,8 +72,9 @@ function ConnectedCalendarsList(props: Props) { const { t } = useLocale(); const query = trpc.viewer.connectedCalendars.useQuery(undefined, { suspense: true, + refetchOnWindowFocus: false, }); - const { fromOnboarding } = props; + const { fromOnboarding, isLoading } = props; return ( - {data.connectedCalendars.map((item) => ( - - {item.calendars ? ( - - -
- }> -
- {!fromOnboarding && ( - <> -

{t("toggle_calendars_conflict")}

-
    - {item.calendars.map((cal) => ( - - ))} -
- - )} +
+
+
+
+

+ {t("check_for_conflicts")} +

+

{t("select_calendars")}

+
+
+ {!!data.connectedCalendars.length && ( +
+
- - ) : ( - - {item.integration.name}:{" "} - {t("calendar_error")} - - } - iconClassName="h-10 w-10 ml-2 mr-1 mt-0.5" - actions={ -
- + )} +
+
+
+ + {data.connectedCalendars.map((item) => ( + + {item.calendars ? ( + + +
+ }> +
+ {!fromOnboarding && ( + <> +

{t("toggle_calendars_conflict")}

+
    + {item.calendars.map((cal) => ( + + ))} +
+ + )}
- } - /> - )} - - ))} - + + ) : ( + + {item.integration.name}:{" "} + {t("calendar_error")} + + } + iconClassName="h-10 w-10 ml-2 mr-1 mt-0.5" + actions={ +
+ +
+ } + /> + )} + + ))} + +
); }} /> @@ -187,42 +210,28 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding {!!data.connectedCalendars.length || !!installedCalendars.data?.items.length ? ( <> {heading && ( -
- - {!!data.connectedCalendars.length && ( -
- -
- )} -
- } - /> -
-
-
- - -
-
-

{t("create_events_on")}

-

{t("set_calendar")}

-
-
- + <> +
+
+

+ {t("add_to_calendar")} +

+ +

+ {t("add_to_calendar_description")} +

+
+
+
+
+ + +
@@ -230,8 +239,9 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding onChanged={onChanged} fromOnboarding={fromOnboarding} destinationCalendarId={data.destinationCalendar?.externalId} + isLoading={mutation.isLoading} /> -
+ )} ) : fromOnboarding ? ( diff --git a/apps/web/pages/settings/my-account/calendars.tsx b/apps/web/pages/settings/my-account/calendars.tsx index 0bdeeadf98fcb1..522d7fc4ecbe6a 100644 --- a/apps/web/pages/settings/my-account/calendars.tsx +++ b/apps/web/pages/settings/my-account/calendars.tsx @@ -1,37 +1,12 @@ -import { Trans } from "next-i18next"; -import Link from "next/link"; -import { useRouter } from "next/navigation"; -import { Fragment, useState, useEffect } from "react"; +import { Fragment } from "react"; -import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration"; -import { CalendarSwitch } from "@calcom/features/calendars/CalendarSwitch"; -import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector"; -import SectionBottomActions from "@calcom/features/settings/SectionBottomActions"; import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout"; -import { classNames } from "@calcom/lib"; import { useLocale } from "@calcom/lib/hooks/useLocale"; -import { trpc } from "@calcom/trpc/react"; -import { - Alert, - Badge, - Button, - EmptyScreen, - List, - ListItem, - ListItemText, - ListItemTitle, - Meta, - SkeletonButton, - SkeletonContainer, - SkeletonText, - showToast, - Label, -} from "@calcom/ui"; -import { Plus, Calendar } from "@calcom/ui/components/icon"; - -import { QueryCell } from "@lib/QueryCell"; +import { Button, Meta, SkeletonButton, SkeletonContainer, SkeletonText } from "@calcom/ui"; +import { Plus } from "@calcom/ui/components/icon"; import PageWrapper from "@components/PageWrapper"; +import { CalendarListContainer } from "@components/apps/CalendarListContainer"; const SkeletonLoader = () => { return ( @@ -62,37 +37,6 @@ const AddCalendarButton = () => { const CalendarsView = () => { const { t } = useLocale(); - const router = useRouter(); - - const utils = trpc.useContext(); - - const query = trpc.viewer.connectedCalendars.useQuery(); - - const [selectedDestinationCalendarOption, setSelectedDestinationCalendar] = useState<{ - integration: string; - externalId: string; - } | null>(null); - - useEffect(() => { - if (query?.data?.destinationCalendar) { - setSelectedDestinationCalendar({ - integration: query.data.destinationCalendar.integration, - externalId: query.data.destinationCalendar.externalId, - }); - } - }, [query?.isLoading, query?.data?.destinationCalendar]); - - const mutation = trpc.viewer.setDestinationCalendar.useMutation({ - async onSettled() { - await utils.viewer.connectedCalendars.invalidate(); - }, - onSuccess: async () => { - showToast(t("calendar_updated_successfully"), "success"); - }, - onError: () => { - showToast(t("unexpected_error_try_again"), "error"); - }, - }); return ( <> @@ -102,167 +46,9 @@ const CalendarsView = () => { CTA={} borderInShellHeader={false} /> - } - success={({ data }) => { - const isDestinationUpdateBtnDisabled = - selectedDestinationCalendarOption?.externalId === query?.data?.destinationCalendar?.externalId; - return data.connectedCalendars.length ? ( -
-
-

- {t("add_to_calendar")} -

-

{t("add_to_calendar_description")}

-
-
-
- - { - setSelectedDestinationCalendar(option); - }} - isLoading={mutation.isLoading} - /> -
-
- - - - -
-

- {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-default py-[2px]", - color: "secondary", - }} - /> - - } - /> - )} - {item?.error === undefined && item.calendars && ( - -
- { - // eslint-disable-next-line @next/next/no-img-element - item.integration.logo && ( - {item.integration.title} - ) - } -
- - - {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")} - className="mt-6" - /> - ); - }} - error={() => { - return ( - - An error ocurred while fetching your Calendars. - query.refetch()}> - try again - - . - - } - severity="error" - /> - ); - }} - /> +
+ +
); }; diff --git a/packages/features/apps/components/DisconnectIntegration.tsx b/packages/features/apps/components/DisconnectIntegration.tsx index c955f7403c0483..73ec96c5f6e71e 100644 --- a/packages/features/apps/components/DisconnectIntegration.tsx +++ b/packages/features/apps/components/DisconnectIntegration.tsx @@ -37,6 +37,7 @@ export default function DisconnectIntegration({ }, async onSettled() { await utils.viewer.connectedCalendars.invalidate(); + await utils.viewer.integrations.invalidate(); }, });