diff --git a/components/dialog/ConfirmationDialogContent.tsx b/components/dialog/ConfirmationDialogContent.tsx new file mode 100644 index 0000000000..6e4cda08aa --- /dev/null +++ b/components/dialog/ConfirmationDialogContent.tsx @@ -0,0 +1,42 @@ +import { DialogClose, DialogContent } from "@components/Dialog"; +import * as DialogPrimitive from "@radix-ui/react-dialog"; +import { ExclamationIcon } from "@heroicons/react/outline"; +import React from "react"; + +export default function ConfirmationDialogContent({ + title, + alert, + confirmBtnText, + cancelBtnText, + onConfirm, + children, +}) { + confirmBtnText = confirmBtnText || "Confirm"; + cancelBtnText = cancelBtnText || "Cancel"; + + return ( + +
+ {alert && ( +
+ {alert === "danger" && ( +
+ +
+ )} +
+ )} +
+ {title} + {children} +
+
+
+ + {confirmBtnText} + + {cancelBtnText} +
+ + ); +} diff --git a/pages/event-types/[type].tsx b/pages/event-types/[type].tsx index 6042020f7a..de360693cd 100644 --- a/pages/event-types/[type].tsx +++ b/pages/event-types/[type].tsx @@ -2,7 +2,7 @@ import { GetServerSideProps } from "next"; import Head from "next/head"; import Link from "next/link"; import { useRouter } from "next/router"; -import { useEffect, useRef, useState } from "react"; +import React, { useEffect, useRef, useState } from "react"; import Select, { OptionBase } from "react-select"; import prisma from "@lib/prisma"; import { LocationType } from "@lib/location"; @@ -10,18 +10,17 @@ import Shell from "@components/Shell"; import { getSession } from "next-auth/client"; import { Scheduler } from "@components/ui/Scheduler"; import { Disclosure, RadioGroup } from "@headlessui/react"; - import { PhoneIcon, XIcon } from "@heroicons/react/outline"; import { EventTypeCustomInput, EventTypeCustomInputType } from "@lib/eventTypeInput"; import { + LocationMarkerIcon, + LinkIcon, + PlusIcon, + DocumentIcon, ChevronRightIcon, ClockIcon, - DocumentIcon, - ExternalLinkIcon, - LinkIcon, - LocationMarkerIcon, - PlusIcon, TrashIcon, + ExternalLinkIcon, } from "@heroicons/react/solid"; import dayjs from "dayjs"; @@ -34,6 +33,9 @@ import throttle from "lodash.throttle"; import "react-dates/initialize"; import "react-dates/lib/css/_datepicker.css"; import { DateRangePicker, OrientationShape, toMomentObject } from "react-dates"; +import Switch from "@components/ui/Switch"; +import { Dialog, DialogTrigger } from "@components/Dialog"; +import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent"; dayjs.extend(utc); dayjs.extend(timezone); @@ -57,7 +59,17 @@ type DateOverride = { endTime: number; }; -type EventTypeInput = { +type AdvancedOptions = { + eventName?: string; + periodType?: string; + periodDays?: number; + periodStartDate?: Date | string; + periodEndDate?: Date | string; + periodCountCalendarDays?: boolean; + requiresConfirmation?: boolean; +}; + +type EventTypeInput = AdvancedOptions & { id: number; title: string; slug: string; @@ -65,16 +77,9 @@ type EventTypeInput = { length: number; hidden: boolean; locations: unknown; - eventName: string; customInputs: EventTypeCustomInput[]; timeZone: string; availability?: { openingHours: OpeningHours[]; dateOverrides: DateOverride[] }; - periodType?: string; - periodDays?: number; - periodStartDate?: Date | string; - periodEndDate?: Date | string; - periodCountCalendarDays?: boolean; - enteredRequiresConfirmation: boolean; }; const PERIOD_TYPES = [ @@ -100,7 +105,6 @@ export default function EventTypePage({ }: Props): JSX.Element { const router = useRouter(); - console.log(eventType); const inputOptions: OptionBase[] = [ { value: EventTypeCustomInputType.Text, label: "Text" }, { value: EventTypeCustomInputType.TextLong, label: "Multiline Text" }, @@ -176,11 +180,11 @@ export default function EventTypePage({ ); }); + const [hidden, setHidden] = useState(eventType.hidden); const titleRef = useRef(); const slugRef = useRef(); const descriptionRef = useRef(); const lengthRef = useRef(); - const isHiddenRef = useRef(); const requiresConfirmationRef = useRef(); const eventNameRef = useRef(); const periodDaysRef = useRef(); @@ -197,26 +201,17 @@ export default function EventTypePage({ const enteredSlug: string = slugRef.current.value; const enteredDescription: string = descriptionRef.current.value; const enteredLength: number = parseInt(lengthRef.current.value); - const enteredIsHidden: boolean = isHiddenRef.current.checked; - const enteredRequiresConfirmation: boolean = requiresConfirmationRef.current.checked; - const enteredEventName: string = eventNameRef.current.value; - const type = periodType.type; - const enteredPeriodDays = parseInt(periodDaysRef?.current?.value); - const enteredPeriodDaysType = Boolean(parseInt(periodDaysTypeRef?.current.value)); - - const enteredPeriodStartDate = periodStartDate ? periodStartDate.toDate() : null; - const enteredPeriodEndDate = periodEndDate ? periodEndDate.toDate() : null; - - console.log("values", { - type, - periodDaysTypeRef, - enteredPeriodDays, - enteredPeriodDaysType, - enteredPeriodStartDate, - enteredPeriodEndDate, - }); - // TODO: Add validation + const advancedOptionsPayload: AdvancedOptions = {}; + if (requiresConfirmationRef.current) { + advancedOptionsPayload.requiresConfirmation = requiresConfirmationRef.current.checked; + advancedOptionsPayload.eventName = eventNameRef.current.value; + advancedOptionsPayload.periodType = periodType.type; + advancedOptionsPayload.periodDays = parseInt(periodDaysRef?.current?.value); + advancedOptionsPayload.periodCountCalendarDays = Boolean(parseInt(periodDaysTypeRef?.current.value)); + advancedOptionsPayload.periodStartDate = periodStartDate ? periodStartDate.toDate() : null; + advancedOptionsPayload.periodEndDate = periodEndDate ? periodEndDate.toDate() : null; + } const payload: EventTypeInput = { id: eventType.id, @@ -224,23 +219,14 @@ export default function EventTypePage({ slug: enteredSlug, description: enteredDescription, length: enteredLength, - hidden: enteredIsHidden, + hidden, locations, - eventName: enteredEventName, customInputs, timeZone: selectedTimeZone, - periodType: type, - periodDays: enteredPeriodDays, - periodStartDate: enteredPeriodStartDate, - periodEndDate: enteredPeriodEndDate, - periodCountCalendarDays: enteredPeriodDaysType, - requiresConfirmation: enteredRequiresConfirmation, + availability: enteredAvailability || null, + ...advancedOptionsPayload, }; - if (enteredAvailability) { - payload.availability = enteredAvailability; - } - await fetch("/api/availability/eventtype", { method: "PATCH", body: JSON.stringify(payload), @@ -249,7 +235,7 @@ export default function EventTypePage({ }, }); - router.push("/availability"); + router.push("/event-types"); } async function deleteEventTypeHandler(event) { @@ -696,33 +682,6 @@ export default function EventTypePage({ -
-
- -
-
-
-
- -
-
-

- Hide the event type from your page, so it can only be booked through its - URL. -

-
-
-
-