Anik Dhabal BabuandGitHub
2689cdfdff
* perf: pass app data to OmniInstallAppButton to avoid redundant API calls * Clean up comments in OmniInstallAppButton component Removed comment about pre-fetched app data and fetching logic.
90 lines
2.7 KiB
TypeScript
90 lines
2.7 KiB
TypeScript
import useApp from "@calcom/features/apps/hooks/useApp";
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import classNames from "@calcom/ui/classNames";
|
|
import { Button } from "@calcom/ui/components/button";
|
|
import { showToast } from "@calcom/ui/components/toast";
|
|
|
|
import { InstallAppButton } from "../InstallAppButton";
|
|
import type { AppCardApp } from "../types";
|
|
import useAddAppMutation from "../_utils/useAddAppMutation";
|
|
|
|
type AppData = Pick<AppCardApp, "type" | "variant" | "slug" | "teamsPlanRequired">;
|
|
|
|
/**
|
|
* Use this component to allow installing an app from anywhere on the app.
|
|
* Use of this component requires you to remove custom InstallAppButtonComponent so that it can manage the redirection itself.
|
|
*
|
|
* When `app` prop is provided, it will use that data directly instead of fetching via useApp.
|
|
* This is useful when the app data is already available (e.g., from the integrations query)
|
|
* to avoid redundant API calls that can cause URL length issues when batched.
|
|
*/
|
|
export default function OmniInstallAppButton({
|
|
appId,
|
|
app: appProp,
|
|
className,
|
|
returnTo,
|
|
teamId,
|
|
onAppInstallSuccess,
|
|
}: {
|
|
appId: string;
|
|
app?: AppData;
|
|
className: string;
|
|
onAppInstallSuccess: () => void;
|
|
returnTo?: string;
|
|
teamId?: number;
|
|
}) {
|
|
const { t } = useLocale();
|
|
const { data: fetchedApp } = useApp(appId, { enabled: !appProp });
|
|
const app = appProp ?? fetchedApp;
|
|
|
|
const mutation = useAddAppMutation(null, {
|
|
returnTo,
|
|
onSuccess: (data) => {
|
|
onAppInstallSuccess();
|
|
if (data?.setupPending) return;
|
|
showToast(t("app_successfully_installed"), "success");
|
|
},
|
|
onError: (error) => {
|
|
if (error instanceof Error) showToast(error.message || t("app_could_not_be_installed"), "error");
|
|
},
|
|
});
|
|
|
|
if (!app) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<InstallAppButton
|
|
type={app.type}
|
|
teamsPlanRequired={app.teamsPlanRequired}
|
|
wrapperClassName={classNames("[@media(max-width:260px)]:w-full", className)}
|
|
render={({ useDefaultComponent, ...props }) => {
|
|
if (useDefaultComponent) {
|
|
props = {
|
|
...props,
|
|
onClick: () => {
|
|
mutation.mutate({
|
|
type: app.type,
|
|
variant: app.variant,
|
|
slug: app.slug,
|
|
...(teamId && { teamId }),
|
|
});
|
|
},
|
|
};
|
|
}
|
|
|
|
return (
|
|
<Button
|
|
loading={mutation.isPending}
|
|
color="secondary"
|
|
className="[@media(max-width:260px)]:w-full [@media(max-width:260px)]:justify-center"
|
|
StartIcon="plus"
|
|
{...props}>
|
|
{t("add")}
|
|
</Button>
|
|
);
|
|
}}
|
|
/>
|
|
);
|
|
}
|