import { Trans } from "next-i18next"; import Link from "next/link"; import { useState } from "react"; import { Toaster } from "react-hot-toast"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Button, Tooltip, showToast } from "@calcom/ui"; import { Clipboard } from "@calcom/ui/components/icon"; export interface IZapierSetupProps { inviteLink?: string; } const ZAPIER = "zapier"; export default function ZapierSetup(props: IZapierSetupProps) { const [newApiKeys, setNewApiKeys] = useState>({}); const { t } = useLocale(); const utils = trpc.useContext(); const integrations = trpc.viewer.integrations.useQuery({ variant: "automation" }); const oldApiKey = trpc.viewer.apiKeys.findKeyOfType.useQuery({ appId: ZAPIER }); const teamsList = trpc.viewer.teams.listOwnedTeams.useQuery(undefined, { refetchOnWindowFocus: false, }); const teams = teamsList.data?.map((team) => ({ id: team.id, name: team.name })); const deleteApiKey = trpc.viewer.apiKeys.delete.useMutation({ onSuccess: () => { utils.viewer.apiKeys.findKeyOfType.invalidate(); }, }); const zapierCredentials: { userCredentialIds: number[] } | undefined = integrations.data?.items.find( (item: { type: string }) => item.type === "zapier_automation" ); const [credentialId] = zapierCredentials?.userCredentialIds || [false]; const showContent = integrations.data && integrations.isSuccess && credentialId; const isCalDev = process.env.NEXT_PUBLIC_WEBAPP_URL === "https://app.cal.dev"; async function createApiKey(teamId?: number) { const event = { note: "Zapier", expiresAt: null, appId: ZAPIER, teamId }; const apiKey = await utils.client.viewer.apiKeys.create.mutate(event); if (oldApiKey.data) { const oldKey = teamId ? oldApiKey.data.find((key) => key.teamId === teamId) : oldApiKey.data.find((key) => !key.teamId); if (oldKey) { deleteApiKey.mutate({ id: oldKey.id, }); } } return apiKey; } async function generateApiKey(teamId?: number) { const apiKey = await createApiKey(teamId); setNewApiKeys({ ...newApiKeys, [teamId || ""]: apiKey }); } if (integrations.isLoading) { return
; } return (
{showContent ? (
Zapier Logo
{t("setting_up_zapier")}
<>
{t("generate_api_key")}:
{!teams ? ( ) : ( <>
Your event types:
{!newApiKeys[""] ? ( ) : ( )} {teams.map((team) => { return (
{team.name}:
{!newApiKeys[team.id] ? ( ) : ( )}
); })} )}
    {isCalDev && (
  1. {t("go_to")} {t("zapier_invite_link")}
  2. )}
  3. Log into your Zapier account and create a new Zap.
  4. Select Cal.com as your Trigger app. Also choose a Trigger event.
  5. Choose your account and then enter your Unique API Key.
  6. Test your Trigger.
  7. You're set!
) : (
{t("install_zapier_app")}
)}
); } const CopyApiKey = ({ apiKey }: { apiKey: string }) => { const { t } = useLocale(); return (
{apiKey}
{t("copy_somewhere_safe")}
); };