import { useSession } from "next-auth/client"; import Image from "next/image"; import { useEffect, useRef, useState } from "react"; import classNames from "@lib/classNames"; import { useLocale } from "@lib/hooks/useLocale"; import { trpc } from "@lib/trpc"; import { Webhook } from "@lib/webhook"; import { Dialog, DialogClose, DialogContent, DialogHeader, DialogTrigger } from "@components/Dialog"; import { List, ListItem, ListItemText, ListItemTitle } from "@components/List"; import Loader from "@components/Loader"; import { ShellSubHeading } 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() { const user = trpc.useQuery(["viewer.me"]).data; 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(); }, []); 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); }; if (loading) { return ; } return ( <> {!editWebhookEnabled && ( <>
Webhooks
Webhooks Automation
{" "} {t("event_triggers")}{" "}

{t("booking_created")}

{ setBookingCreated(!bookingCreated); }} />

{t("booking_rescheduled")}

{ setBookingRescheduled(!bookingRescheduled); }} />

{t("booking_cancelled")}

{ setBookingCancelled(!bookingCancelled); }} />
{!!webhooks.length && ( )}