diff --git a/components/SettingsShell.tsx b/components/SettingsShell.tsx index eb6f2945..0227897e 100644 --- a/components/SettingsShell.tsx +++ b/components/SettingsShell.tsx @@ -1,4 +1,4 @@ -import { CodeIcon, CreditCardIcon, KeyIcon, UserGroupIcon, UserIcon } from "@heroicons/react/solid"; +import { CreditCardIcon, KeyIcon, UserGroupIcon, UserIcon } from "@heroicons/react/solid"; import React from "react"; import { useLocale } from "@lib/hooks/useLocale"; @@ -19,7 +19,6 @@ export default function SettingsShell({ children }: { children: React.ReactNode href: "/settings/security", icon: KeyIcon, }, - { name: t("embed_and_webhooks"), href: "/settings/embed", icon: CodeIcon }, { name: t("teams"), href: "/settings/teams", diff --git a/components/webhook/WebhookListItem.tsx b/components/webhook/WebhookListItem.tsx index 32818426..9f64837a 100644 --- a/components/webhook/WebhookListItem.tsx +++ b/components/webhook/WebhookListItem.tsx @@ -11,7 +11,7 @@ import Button from "@components/ui/Button"; export default function WebhookListItem(props: { onChange: () => void; - key: number; + key: string; webhook: Webhook; onEditWebhook: () => void; }) { diff --git a/pages/integrations/embed.tsx b/pages/integrations/embed.tsx new file mode 100644 index 00000000..ca1504a2 --- /dev/null +++ b/pages/integrations/embed.tsx @@ -0,0 +1,285 @@ +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 && ( + + )} +
+
+
+ + +
+
+

+

+
+
+
+ +
+