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, showToast, Tooltip } from "@calcom/ui"; import { ClipboardCopyIcon } from "@calcom/ui/components/icon"; export interface IZapierSetupProps { inviteLink: string; } const ZAPIER = "zapier"; export default function ZapierSetup(props: IZapierSetupProps) { const [newApiKey, setNewApiKey] = 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 deleteApiKey = trpc.viewer.apiKeys.delete.useMutation(); const zapierCredentials: { credentialIds: number[] } | undefined = integrations.data?.items.find( (item: { type: string }) => item.type === "zapier_automation" ); const [credentialId] = zapierCredentials?.credentialIds || [false]; const showContent = integrations.data && integrations.isSuccess && credentialId; const isCalDev = process.env.NEXT_PUBLIC_WEBAPP_URL === "https://app.cal.dev"; async function createApiKey() { const event = { note: "Zapier", expiresAt: null, appId: ZAPIER }; const apiKey = await utils.client.viewer.apiKeys.create.mutate(event); if (oldApiKey.data) { deleteApiKey.mutate({ id: oldApiKey.data.id, }); } setNewApiKey(apiKey); } if (integrations.isLoading) { return
; } return (
{showContent ? (
Zapier Logo
{t("setting_up_zapier")}
{!newApiKey ? ( <>
{t("generate_api_key")}:
) : ( <>
{t("your_unique_api_key")}
{newApiKey}
{t("copy_safe_api_key")}
)}
    {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")}
)}
); }