import { BookOpenIcon, DocumentTextIcon, ExternalLinkIcon, FlagIcon, MailIcon, ShieldCheckIcon, } 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 } 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(false); 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", }, }); if (result.status === 200) { setInstalledApp(true); } } 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 })}

{isGlobal || installedApp ? ( ) : ( ( )} /> )} {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
); }