import { BookOpenIcon, DocumentTextIcon, ExternalLinkIcon, FlagIcon, MailIcon, ShieldCheckIcon, PlusIcon, CheckIcon, } from "@heroicons/react/outline"; import { ChevronLeftIcon } from "@heroicons/react/solid"; import Link from "next/link"; import React, { useEffect, useState } from "react"; import { InstallAppButton } from "@calcom/app-store/components"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { App as AppType } from "@calcom/types/App"; import { Button, SkeletonButton } from "@calcom/ui"; import Shell from "@components/Shell"; import Badge from "@components/ui/Badge"; export default function App({ name, type, logo, body, categories, author, price = 0, commission, isGlobal = false, feeType, docs, website, email, tos, privacy, }: { 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; }) { const { t } = useLocale(); const priceInDollar = Intl.NumberFormat("en-US", { style: "currency", currency: "USD", useGrouping: false, }).format(price); const [installedApp, setInstalledApp] = useState(0); const [isLoading, setIsLoading] = useState(true); useEffect(() => { async function getInstalledApp(appCredentialType: string) { const queryParam = new URLSearchParams(); queryParam.set("app-credential-type", appCredentialType); try { const result = await fetch(`/api/app-store/installed?${queryParam.toString()}`, { method: "GET", headers: { "Content-Type": "application/json", }, }).then((data) => { setIsLoading(false); return data; }); if (result.status === 200) { const res = await result.json(); setInstalledApp(res.count); } } catch (error) { if (error instanceof Error) { console.log(error.message); } } } getInstalledApp(type); }, [type]); return ( <>
{t("browse_apps")}
{ // eslint-disable-next-line @next/next/no-img-element {name} }

{name}

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

{!isLoading ? ( isGlobal || installedApp > 0 ? (
( )} />
) : ( ( )} /> ) ) : ( )} {price !== 0 && ( {feeType === "usage-based" ? commission + "% + " + priceInDollar + "/booking" : priceInDollar} {feeType === "monthly" && "/" + t("month")} )}
{/* reintroduce once we show permissions and features */}
{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
); }