removed unused imports and function in integrations
This commit is contained in:
Peer Richelsen
parent
906168c9b0
commit
2b19a28f89
2 changed files with 117 additions and 229 deletions
|
|
@ -19,6 +19,19 @@ export const DialogContent = React.forwardRef(({ children, ...props }, forwarded
|
||||||
</DialogPrimitive.Content>
|
</DialogPrimitive.Content>
|
||||||
));
|
));
|
||||||
|
|
||||||
|
export function DialogHeader({ title, subtitle }: { title: string; subtitle: string }) {
|
||||||
|
return (
|
||||||
|
<div className="mb-8">
|
||||||
|
<h3 className="text-lg leading-6 font-bold text-gray-900" id="modal-title">
|
||||||
|
{title}
|
||||||
|
</h3>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-400">{subtitle}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
DialogContent.displayName = "DialogContent";
|
DialogContent.displayName = "DialogContent";
|
||||||
|
|
||||||
export const DialogTrigger = DialogPrimitive.Trigger;
|
export const DialogTrigger = DialogPrimitive.Trigger;
|
||||||
|
|
|
||||||
|
|
@ -4,34 +4,18 @@ import prisma from "../../lib/prisma";
|
||||||
import Shell from "../../components/Shell";
|
import Shell from "../../components/Shell";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { getSession, useSession } from "next-auth/client";
|
import { getSession, useSession } from "next-auth/client";
|
||||||
import {
|
import { CheckCircleIcon, ChevronRightIcon, PlusIcon, XCircleIcon } from "@heroicons/react/solid";
|
||||||
CalendarIcon,
|
|
||||||
CheckCircleIcon,
|
|
||||||
ChevronRightIcon,
|
|
||||||
PlusIcon,
|
|
||||||
XCircleIcon,
|
|
||||||
} from "@heroicons/react/solid";
|
|
||||||
import { InformationCircleIcon } from "@heroicons/react/outline";
|
import { InformationCircleIcon } from "@heroicons/react/outline";
|
||||||
import { Switch } from "@headlessui/react";
|
import { Switch } from "@headlessui/react";
|
||||||
import Loader from '@components/Loader';
|
import Loader from "@components/Loader";
|
||||||
import classNames from "@lib/classNames";
|
import classNames from "@lib/classNames";
|
||||||
|
import { Dialog, DialogClose, DialogContent, DialogTrigger, DialogHeader } from "@components/Dialog";
|
||||||
|
|
||||||
export default function IntegrationHome({ integrations }) {
|
export default function IntegrationHome({ integrations }) {
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
const [session, loading] = useSession();
|
const [session, loading] = useSession();
|
||||||
|
|
||||||
const [showAddModal, setShowAddModal] = useState(false);
|
|
||||||
const [showSelectCalendarModal, setShowSelectCalendarModal] = useState(false);
|
|
||||||
const [selectableCalendars, setSelectableCalendars] = useState([]);
|
const [selectableCalendars, setSelectableCalendars] = useState([]);
|
||||||
|
|
||||||
function toggleAddModal() {
|
|
||||||
setShowAddModal(!showAddModal);
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleShowCalendarModal() {
|
|
||||||
setShowSelectCalendarModal(!showSelectCalendarModal);
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadCalendars() {
|
function loadCalendars() {
|
||||||
fetch("api/availability/calendar")
|
fetch("api/availability/calendar")
|
||||||
.then((response) => response.json())
|
.then((response) => response.json())
|
||||||
|
|
@ -89,6 +73,104 @@ export default function IntegrationHome({ integrations }) {
|
||||||
return <Loader />;
|
return <Loader />;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const ConnectNewAppDialog = () => (
|
||||||
|
<Dialog>
|
||||||
|
<DialogTrigger className="py-2 px-4 mt-6 border border-transparent rounded-sm shadow-sm text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900">
|
||||||
|
<PlusIcon className="w-5 h-5 mr-1 inline" />
|
||||||
|
Connect a new App
|
||||||
|
</DialogTrigger>
|
||||||
|
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader title="Connect a new App" subtitle="Connect a new app to your account." />
|
||||||
|
<div className="my-4">
|
||||||
|
<ul className="divide-y divide-gray-200">
|
||||||
|
{integrations
|
||||||
|
.filter((integration) => integration.installed)
|
||||||
|
.map((integration) => (
|
||||||
|
<li key={integration.type} className="flex py-4">
|
||||||
|
<div className="w-1/12 mr-4 pt-2">
|
||||||
|
<img className="h-8 w-8 mr-2" src={integration.imageSrc} alt={integration.title} />
|
||||||
|
</div>
|
||||||
|
<div className="w-10/12">
|
||||||
|
<h2 className="text-gray-800 font-medium">{integration.title}</h2>
|
||||||
|
<p className="text-gray-400 text-sm">{integration.description}</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-2/12 text-right pt-2">
|
||||||
|
<button
|
||||||
|
onClick={() => integrationHandler(integration.type)}
|
||||||
|
className="font-medium text-neutral-900 hover:text-neutral-500">
|
||||||
|
Add
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
|
||||||
|
<DialogClose as="button" className="btn btn-white mx-2">
|
||||||
|
Cancel
|
||||||
|
</DialogClose>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
|
||||||
|
const SelectCalendarDialog = () => (
|
||||||
|
<Dialog>
|
||||||
|
<DialogTrigger className="py-2 px-4 mt-6 border border-transparent rounded-sm shadow-sm text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900">
|
||||||
|
Select calendars
|
||||||
|
</DialogTrigger>
|
||||||
|
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader
|
||||||
|
title="Select calendars"
|
||||||
|
subtitle="If no entry is selected, all calendars will be checked"
|
||||||
|
/>
|
||||||
|
<div className="my-4">
|
||||||
|
<ul className="divide-y divide-gray-200">
|
||||||
|
{selectableCalendars.map((calendar) => (
|
||||||
|
<li key={calendar.name} className="flex py-4">
|
||||||
|
<div className="w-1/12 mr-4 pt-2">
|
||||||
|
<img
|
||||||
|
className="h-8 w-8 mr-2"
|
||||||
|
src={getCalendarIntegrationImage(calendar.integration)}
|
||||||
|
alt={calendar.integration}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="w-10/12 pt-3">
|
||||||
|
<h2 className="text-gray-800 font-medium">{calendar.name}</h2>
|
||||||
|
</div>
|
||||||
|
<div className="w-2/12 text-right pt-3">
|
||||||
|
<Switch
|
||||||
|
checked={calendar.selected}
|
||||||
|
onChange={calendarSelectionHandler(calendar)}
|
||||||
|
className={classNames(
|
||||||
|
calendar.selected ? "bg-neutral-900" : "bg-gray-200",
|
||||||
|
"relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500"
|
||||||
|
)}>
|
||||||
|
<span className="sr-only">Select calendar</span>
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
className={classNames(
|
||||||
|
calendar.selected ? "translate-x-5" : "translate-x-0",
|
||||||
|
"pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Switch>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
|
||||||
|
<DialogClose as="button" className="btn btn-white mx-2">
|
||||||
|
Cancel
|
||||||
|
</DialogClose>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Head>
|
<Head>
|
||||||
|
|
@ -96,18 +178,7 @@ export default function IntegrationHome({ integrations }) {
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<Shell
|
<Shell heading="App Store" subtitle="Connect your favourite apps." CTA={<ConnectNewAppDialog />}>
|
||||||
heading="App Store"
|
|
||||||
subtitle="Connect your favourite apps."
|
|
||||||
CTA={
|
|
||||||
<button
|
|
||||||
onClick={toggleAddModal}
|
|
||||||
type="button"
|
|
||||||
className="flex justify-center py-2 px-4 border border-transparent rounded-sm shadow-sm text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900">
|
|
||||||
<PlusIcon className="w-5 h-5 mr-1" />
|
|
||||||
Connect a new App
|
|
||||||
</button>
|
|
||||||
}>
|
|
||||||
<div className="bg-white border border-gray-200 overflow-hidden rounded-sm mb-8">
|
<div className="bg-white border border-gray-200 overflow-hidden rounded-sm mb-8">
|
||||||
{integrations.filter((ig) => ig.credential).length !== 0 ? (
|
{integrations.filter((ig) => ig.credential).length !== 0 ? (
|
||||||
<ul className="divide-y divide-gray-200">
|
<ul className="divide-y divide-gray-200">
|
||||||
|
|
@ -174,217 +245,21 @@ export default function IntegrationHome({ integrations }) {
|
||||||
You currently do not have any apps connected. Connect your first app to get started.
|
You currently do not have any apps connected. Connect your first app to get started.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-3 text-sm">
|
<ConnectNewAppDialog />
|
||||||
<button
|
|
||||||
onClick={toggleAddModal}
|
|
||||||
className="font-medium text-neutral-900 hover:text-neutral-500">
|
|
||||||
{" "}
|
|
||||||
Connect your first app <span aria-hidden="true">→</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{showAddModal && (
|
|
||||||
<div
|
|
||||||
className="fixed z-50 inset-0 overflow-y-auto"
|
|
||||||
aria-labelledby="modal-title"
|
|
||||||
role="dialog"
|
|
||||||
aria-modal="true">
|
|
||||||
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
|
||||||
{/* <!--
|
|
||||||
Background overlay, show/hide based on modal state.
|
|
||||||
|
|
||||||
Entering: "ease-out duration-300"
|
|
||||||
From: "opacity-0"
|
|
||||||
To: "opacity-100"
|
|
||||||
Leaving: "ease-in duration-200"
|
|
||||||
From: "opacity-100"
|
|
||||||
To: "opacity-0"
|
|
||||||
--> */}
|
|
||||||
<div
|
|
||||||
className="fixed inset-0 bg-gray-500 z-0 bg-opacity-75 transition-opacity"
|
|
||||||
aria-hidden="true"></div>
|
|
||||||
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
|
|
||||||
​
|
|
||||||
</span>
|
|
||||||
{/* <!--
|
|
||||||
Modal panel, show/hide based on modal state.
|
|
||||||
|
|
||||||
Entering: "ease-out duration-300"
|
|
||||||
From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
||||||
To: "opacity-100 translate-y-0 sm:scale-100"
|
|
||||||
Leaving: "ease-in duration-200"
|
|
||||||
From: "opacity-100 translate-y-0 sm:scale-100"
|
|
||||||
To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
||||||
--> */}
|
|
||||||
<div className="inline-block align-bottom bg-white rounded-sm px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
|
|
||||||
<div className="sm:flex sm:items-start">
|
|
||||||
<div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-neutral-100 sm:mx-0 sm:h-10 sm:w-10">
|
|
||||||
<PlusIcon className="h-6 w-6 text-neutral-900" />
|
|
||||||
</div>
|
|
||||||
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
|
||||||
<h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
|
|
||||||
Connect a new App
|
|
||||||
</h3>
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-400">Connect a new app to your account.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="my-4">
|
|
||||||
<ul className="divide-y divide-gray-200">
|
|
||||||
{integrations
|
|
||||||
.filter((integration) => integration.installed)
|
|
||||||
.map((integration) => (
|
|
||||||
<li key={integration.type} className="flex py-4">
|
|
||||||
<div className="w-1/12 mr-4 pt-2">
|
|
||||||
<img
|
|
||||||
className="h-8 w-8 mr-2"
|
|
||||||
src={integration.imageSrc}
|
|
||||||
alt={integration.title}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="w-10/12">
|
|
||||||
<h2 className="text-gray-800 font-medium">{integration.title}</h2>
|
|
||||||
<p className="text-gray-400 text-sm">{integration.description}</p>
|
|
||||||
</div>
|
|
||||||
<div className="w-2/12 text-right pt-2">
|
|
||||||
<button
|
|
||||||
onClick={() => integrationHandler(integration.type)}
|
|
||||||
className="font-medium text-neutral-900 hover:text-neutral-500">
|
|
||||||
Add
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
|
|
||||||
<button
|
|
||||||
onClick={toggleAddModal}
|
|
||||||
type="button"
|
|
||||||
className="mt-3 w-full inline-flex justify-center rounded-sm border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500 sm:mt-0 sm:w-auto sm:text-sm">
|
|
||||||
Close
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="bg-white border border-gray-200 rounded-sm mb-8">
|
<div className="bg-white border border-gray-200 rounded-sm mb-8">
|
||||||
<div className="px-4 py-5 sm:p-6">
|
<div className="px-4 py-5 sm:p-6">
|
||||||
<h3 className="text-lg leading-6 font-medium text-gray-900">Select calendars</h3>
|
<h3 className="text-lg leading-6 font-medium text-gray-900">Select calendars</h3>
|
||||||
<div className="mt-2 max-w-xl text-sm text-gray-500">
|
<div className="mt-2 max-w-xl text-sm text-gray-500">
|
||||||
<p>Select which calendars are checked for availability to prevent double bookings.</p>
|
<p>Select which calendars are checked for availability to prevent double bookings.</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-5">
|
<SelectCalendarDialog />
|
||||||
<button type="button" onClick={toggleShowCalendarModal} className="btn btn-primary">
|
|
||||||
Select calendars
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{showSelectCalendarModal && (
|
|
||||||
<div
|
|
||||||
className="fixed z-50 inset-0 overflow-y-auto"
|
|
||||||
aria-labelledby="modal-title"
|
|
||||||
role="dialog"
|
|
||||||
aria-modal="true">
|
|
||||||
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
|
||||||
{/* <!--
|
|
||||||
Background overlay, show/hide based on modal state.
|
|
||||||
|
|
||||||
Entering: "ease-out duration-300"
|
|
||||||
From: "opacity-0"
|
|
||||||
To: "opacity-100"
|
|
||||||
Leaving: "ease-in duration-200"
|
|
||||||
From: "opacity-100"
|
|
||||||
To: "opacity-0"
|
|
||||||
--> */}
|
|
||||||
<div
|
|
||||||
className="fixed inset-0 bg-gray-500 z-0 bg-opacity-75 transition-opacity"
|
|
||||||
aria-hidden="true"></div>
|
|
||||||
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
|
|
||||||
​
|
|
||||||
</span>
|
|
||||||
{/* <!--
|
|
||||||
Modal panel, show/hide based on modal state.
|
|
||||||
|
|
||||||
Entering: "ease-out duration-300"
|
|
||||||
From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
||||||
To: "opacity-100 translate-y-0 sm:scale-100"
|
|
||||||
Leaving: "ease-in duration-200"
|
|
||||||
From: "opacity-100 translate-y-0 sm:scale-100"
|
|
||||||
To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
||||||
--> */}
|
|
||||||
<div className="inline-block align-bottom bg-white rounded-sm px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
|
|
||||||
<div className="sm:flex sm:items-start">
|
|
||||||
<div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-neutral-100 sm:mx-0 sm:h-10 sm:w-10">
|
|
||||||
<CalendarIcon className="h-6 w-6 text-neutral-900" />
|
|
||||||
</div>
|
|
||||||
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
|
||||||
<h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
|
|
||||||
Select calendars
|
|
||||||
</h3>
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-400">
|
|
||||||
If no entry is selected, all calendars will be checked
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="my-4">
|
|
||||||
<ul className="divide-y divide-gray-200">
|
|
||||||
{selectableCalendars.map((calendar) => (
|
|
||||||
<li key={calendar.name} className="flex py-4">
|
|
||||||
<div className="w-1/12 mr-4 pt-2">
|
|
||||||
<img
|
|
||||||
className="h-8 w-8 mr-2"
|
|
||||||
src={getCalendarIntegrationImage(calendar.integration)}
|
|
||||||
alt={calendar.integration}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="w-10/12 pt-3">
|
|
||||||
<h2 className="text-gray-800 font-medium">{calendar.name}</h2>
|
|
||||||
</div>
|
|
||||||
<div className="w-2/12 text-right pt-3">
|
|
||||||
<Switch
|
|
||||||
checked={calendar.selected}
|
|
||||||
onChange={calendarSelectionHandler(calendar)}
|
|
||||||
className={classNames(
|
|
||||||
calendar.selected ? "bg-neutral-900" : "bg-gray-200",
|
|
||||||
"relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500"
|
|
||||||
)}>
|
|
||||||
<span className="sr-only">Select calendar</span>
|
|
||||||
<span
|
|
||||||
aria-hidden="true"
|
|
||||||
className={classNames(
|
|
||||||
calendar.selected ? "translate-x-5" : "translate-x-0",
|
|
||||||
"pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Switch>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
|
|
||||||
<button
|
|
||||||
onClick={toggleShowCalendarModal}
|
|
||||||
type="button"
|
|
||||||
className="mt-3 w-full inline-flex justify-center rounded-sm border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500 sm:mt-0 sm:w-auto sm:text-sm">
|
|
||||||
Close
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="border border-gray-200 rounded-sm">
|
<div className="border border-gray-200 rounded-sm">
|
||||||
<div className="px-4 py-5 sm:p-6">
|
<div className="px-4 py-5 sm:p-6">
|
||||||
<h3 className="text-lg leading-6 font-medium text-gray-900">Launch your own App</h3>
|
<h3 className="text-lg leading-6 font-medium text-gray-900">Launch your own App</h3>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue