import { PlusIcon } from "@heroicons/react/outline"; import { GetServerSidePropsContext } from "next"; import { useSession } from "next-auth/client"; import { serverSideTranslations } from "next-i18next/serverSideTranslations"; import { useEffect, useState, useRef } from "react"; import { getSession } from "@lib/auth"; import { getOrSetUserLocaleFromHeaders } from "@lib/core/i18n/i18n.utils"; import { useLocale } from "@lib/hooks/useLocale"; import prisma from "@lib/prisma"; import { inferSSRProps } from "@lib/types/inferSSRProps"; import { Webhook } from "@lib/webhook"; import { Dialog, DialogClose, DialogContent, DialogHeader, DialogTrigger } from "@components/Dialog"; import Loader from "@components/Loader"; import SettingsShell from "@components/SettingsShell"; import Shell from "@components/Shell"; import Button from "@components/ui/Button"; import Switch from "@components/ui/Switch"; import EditWebhook from "@components/webhook/EditWebhook"; import WebhookList from "@components/webhook/WebhookList"; export default function Embed(props: inferSSRProps) { const [, loading] = useSession(); const { t } = useLocale(); const [isLoading, setLoading] = useState(false); const [bookingCreated, setBookingCreated] = useState(true); const [bookingRescheduled, setBookingRescheduled] = useState(true); const [bookingCancelled, setBookingCancelled] = useState(true); const [editWebhookEnabled, setEditWebhookEnabled] = useState(false); const [webhooks, setWebhooks] = useState([]); const [webhookToEdit, setWebhookToEdit] = useState(); const [webhookEventTrigger, setWebhookEventTriggers] = useState([ "BOOKING_CREATED", "BOOKING_RESCHEDULED", "BOOKING_CANCELLED", ]); const subUrlRef = useRef() as React.MutableRefObject; useEffect(() => { const arr = []; bookingCreated && arr.push("BOOKING_CREATED"); bookingRescheduled && arr.push("BOOKING_RESCHEDULED"); bookingCancelled && arr.push("BOOKING_CANCELLED"); setWebhookEventTriggers(arr); }, [bookingCreated, bookingRescheduled, bookingCancelled]); useEffect(() => { getWebhooks(); }, []); if (loading) { return ; } const iframeTemplate = ``; const htmlTemplate = `${t( "schedule_a_meeting" )}${iframeTemplate}`; const handleErrors = async (resp: Response) => { if (!resp.ok) { const err = await resp.json(); throw new Error(err.message); } return resp.json(); }; const getWebhooks = () => { fetch("/api/webhook") .then(handleErrors) .then((data) => { setWebhooks( data.webhooks.map((webhook: Webhook) => { return { ...webhook, eventTriggers: webhook.eventTriggers.map((eventTrigger: string) => eventTrigger.toLowerCase()), }; }) ); console.log(data.webhooks); }) .catch(console.log); setLoading(false); }; const createWebhook = () => { setLoading(true); fetch("/api/webhook", { method: "POST", body: JSON.stringify({ subscriberUrl: subUrlRef.current.value, eventTriggers: webhookEventTrigger, }), headers: { "Content-Type": "application/json", }, }) .then(getWebhooks) .catch(console.log); }; const editWebhook = (webhook: Webhook) => { setEditWebhookEnabled(true); setWebhookToEdit(webhook); }; const onCloseEdit = () => { getWebhooks(); setEditWebhookEnabled(false); }; return ( {!editWebhookEnabled && (

{t("iframe_embed")}

{t("embed_calcom")}