import Link from "next/link"; import { useRouter } from "next/router"; import React, { useState } from "react"; import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation"; import { InstallAppButton } from "@calcom/app-store/components"; import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import showToast from "@calcom/lib/notification"; import { trpc } from "@calcom/trpc/react"; import { App as AppType } from "@calcom/types/App"; import { Button, SkeletonButton } from "@calcom/ui"; import { Icon } from "@calcom/ui/Icon"; import Shell from "@calcom/ui/Shell"; import Badge from "@calcom/ui/v2/core/Badge"; import DisconnectIntegration from "@components/integrations/DisconnectIntegration"; const Component = ({ name, type, logo, body, categories, author, price = 0, commission, isGlobal = false, feeType, docs, website, email, tos, privacy, isProOnly, }: Parameters[0]) => { const { t } = useLocale(); const router = useRouter(); const { data: user } = trpc.useQuery(["viewer.me"]); const utils = trpc.useContext(); const handleOpenChange = () => { utils.invalidateQueries(["viewer.integrations"]); router.replace("/apps/installed"); }; const mutation = useAddAppMutation(null, { onSuccess: () => { showToast("App successfully installed", "success"); }, onError: (error) => { if (error instanceof Error) showToast(error.message || "App could not be installed", "error"); }, }); const priceInDollar = Intl.NumberFormat("en-US", { style: "currency", currency: "USD", useGrouping: false, }).format(price); const [existingCredentials, setExistingCredentials] = useState([]); const appCredentials = trpc.useQuery(["viewer.appCredentialsByType", { appType: type }], { onSuccess(data) { setExistingCredentials(data); }, }); const allowedMultipleInstalls = categories.indexOf("calendar") > -1; return (
{t("browse_apps")}
{name}

{name}

{categories[0]} • {t("published_by", { author })}

{!appCredentials.isLoading ? ( isGlobal || (existingCredentials.length > 0 && allowedMultipleInstalls ? (
{!isGlobal && ( { if (useDefaultComponent) { props = { onClick: () => { mutation.mutate({ type }); }, loading: mutation.isLoading, }; } return ( ); }} /> )}
) : existingCredentials.length > 0 ? ( ( )} onOpenChange={handleOpenChange} /> ) : ( { if (useDefaultComponent) { props = { onClick: () => { mutation.mutate({ type }); }, loading: mutation.isLoading, }; } return ( ); }} /> )) ) : ( )} {price !== 0 && ( {feeType === "usage-based" ? commission + "% + " + priceInDollar + "/booking" : priceInDollar} {feeType === "monthly" && "/" + t("month")} )}
{body}

{t("categories")}

{categories.map((category) => ( {category} ))}

{t("pricing")}

{price === 0 ? ( "Free" ) : ( <> {Intl.NumberFormat("en-US", { style: "currency", currency: "USD", useGrouping: false, }).format(price)} {feeType === "monthly" && "/" + t("month")} )}

{t("learn_more")}


Every app published on the Cal.com App Store is open source and thoroughly tested via peer reviews. Nevertheless, Cal.com, Inc. does not endorse or certify these apps unless they are published by Cal.com. If you encounter inappropriate content or behaviour please report it. Report App
); }; export default function App(props: { name: string; type: AppType["type"]; isGlobal?: AppType["isGlobal"]; logo: string; body: React.ReactNode; categories: string[]; author: string; pro?: boolean; price?: number; commission?: number; feeType?: AppType["feeType"]; docs?: string; website?: string; email: string; // required tos?: string; privacy?: string; licenseRequired: AppType["licenseRequired"]; isProOnly: AppType["isProOnly"]; }) { return ( {props.licenseRequired ? ( ) : ( )} ); }