-
-
- {t("something_doesnt_look_right")}
-
-
-
{t("troubleshoot_availability")}
-
-
-
-
-
+
+
+
+
{t("new_schedule_heading")}
+
{t("new_schedule_description")}
+
);
+};
+
+export function AvailabilityList({ schedules }: inferQueryOutput<"viewer.availability.list">) {
+ const { t, i18n } = useLocale();
+ const deleteMutation = trpc.useMutation("viewer.availability.schedule.delete", {
+ onSuccess: async () => {
+ showToast(t("schedule_deleted_successfully"), "success");
+ window.location.reload();
+ },
+ onError: (err) => {
+ if (err instanceof HttpError) {
+ const message = `${err.statusCode}: ${err.message}`;
+ showToast(message, "error");
+ }
+ },
+ });
+ return (
+
+ {schedules.length === 0 &&
}
+
+ {schedules.map((schedule) => (
+ -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ))}
+
+
+ );
}
-export default function Availability() {
+export default function AvailabilityPage() {
const { t } = useLocale();
- const query = trpc.useQuery(["viewer.availability"]);
+ const query = trpc.useQuery(["viewer.availability.list"]);
return (
);
diff --git a/apps/web/pages/event-types/[type].tsx b/apps/web/pages/event-types/[type].tsx
index 4f2c7d25..81185142 100644
--- a/apps/web/pages/event-types/[type].tsx
+++ b/apps/web/pages/event-types/[type].tsx
@@ -14,28 +14,32 @@ import {
} from "@heroicons/react/solid";
import { zodResolver } from "@hookform/resolvers/zod";
import { MembershipRole } from "@prisma/client";
-import { Availability, EventTypeCustomInput, PeriodType, Prisma, SchedulingType } from "@prisma/client";
+import { EventTypeCustomInput, PeriodType, Prisma, SchedulingType } from "@prisma/client";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
import * as RadioGroup from "@radix-ui/react-radio-group";
+import classNames from "classnames";
import dayjs from "dayjs";
import timezone from "dayjs/plugin/timezone";
import utc from "dayjs/plugin/utc";
import { GetServerSidePropsContext } from "next";
+import Link from "next/link";
import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
import { Controller, useForm } from "react-hook-form";
import { FormattedNumber, IntlProvider } from "react-intl";
-import Select from "react-select";
+import Select, { Props as SelectProps } from "react-select";
import { JSONObject } from "superjson/dist/types";
import { z } from "zod";
import showToast from "@calcom/lib/notification";
import { StripeData } from "@calcom/stripe/server";
+import { Alert } from "@calcom/ui/Alert";
import Button from "@calcom/ui/Button";
import { Dialog, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
import Switch from "@calcom/ui/Switch";
import { Form } from "@calcom/ui/form/fields";
+import { QueryCell } from "@lib/QueryCell";
import { asStringOrThrow, asStringOrUndefined } from "@lib/asStringOrNull";
import { getSession } from "@lib/auth";
import { HttpError } from "@lib/core/http/error";
@@ -54,7 +58,6 @@ import Shell from "@components/Shell";
import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
import CustomInputTypeForm from "@components/pages/eventtypes/CustomInputTypeForm";
import InfoBadge from "@components/ui/InfoBadge";
-import { Scheduler } from "@components/ui/Scheduler";
import CheckboxField from "@components/ui/form/CheckboxField";
import CheckedSelect from "@components/ui/form/CheckedSelect";
import { DateRangePicker } from "@components/ui/form/DateRangePicker";
@@ -77,7 +80,6 @@ interface NFT extends Token {
// Some OpenSea NFTs have several contracts
contracts: Array
;
}
-type AvailabilityInput = Pick;
type OptionTypeBase = {
label: string;
@@ -98,6 +100,41 @@ const addDefaultLocationOptions = (
});
};
+const AvailabilitySelect = ({ className, ...props }: SelectProps) => {
+ const query = trpc.useQuery(["viewer.availability.list"]);
+
+ return (
+ {
+ const options = data.schedules.map((schedule) => ({
+ value: schedule.id,
+ label: schedule.name,
+ }));
+
+ const value = options.find((option) =>
+ props.value
+ ? option.value === props.value
+ : option.value === data.schedules.find((schedule) => schedule.isDefault)?.id
+ );
+ return (
+
+ );
+ }}
+ />
+ );
+};
+
const EventTypePage = (props: inferSSRProps) => {
const { t } = useLocale();
const PERIOD_TYPES = [
@@ -169,7 +206,6 @@ const EventTypePage = (props: inferSSRProps) => {
const [editIcon, setEditIcon] = useState(true);
const [showLocationModal, setShowLocationModal] = useState(false);
- const [selectedTimeZone, setSelectedTimeZone] = useState("");
const [selectedLocation, setSelectedLocation] = useState(undefined);
const [selectedCustomInput, setSelectedCustomInput] = useState(undefined);
const [selectedCustomInputModalOpen, setSelectedCustomInputModalOpen] = useState(false);
@@ -185,11 +221,6 @@ const EventTypePage = (props: inferSSRProps) => {
const [requirePayment, setRequirePayment] = useState(eventType.price > 0);
const [advancedSettingsVisible, setAdvancedSettingsVisible] = useState(false);
- const [availabilityState, setAvailabilityState] = useState<{
- openingHours: AvailabilityInput[];
- dateOverrides: AvailabilityInput[];
- }>({ openingHours: [], dateOverrides: [] });
-
useEffect(() => {
const fetchTokens = async () => {
// Get a list of most popular ERC20s and ERC777s, combine them into a single list, set as tokensList
@@ -225,10 +256,6 @@ const EventTypePage = (props: inferSSRProps) => {
fetchTokens();
}, []);
- useEffect(() => {
- setSelectedTimeZone(eventType.timeZone || "");
- }, []);
-
async function deleteEventTypeHandler(event: React.MouseEvent) {
event.preventDefault();
@@ -383,11 +410,7 @@ const EventTypePage = (props: inferSSRProps) => {
locations: { type: LocationType; address?: string; link?: string }[];
customInputs: EventTypeCustomInput[];
users: string[];
- availability: {
- openingHours: AvailabilityInput[];
- dateOverrides: AvailabilityInput[];
- };
- timeZone: string;
+ schedule: number;
periodType: PeriodType;
periodDays: number;
periodCountCalendarDays: "1" | "0";
@@ -403,6 +426,7 @@ const EventTypePage = (props: inferSSRProps) => {
}>({
defaultValues: {
locations: eventType.locations || [],
+ schedule: eventType.schedule?.id,
periodDates: {
startDate: periodDates.startDate,
endDate: periodDates.endDate,
@@ -748,7 +772,6 @@ const EventTypePage = (props: inferSSRProps) => {
updateMutation.mutate({
...input,
locations,
- availability: availabilityState,
periodStartDate: periodDates.startDate,
periodEndDate: periodDates.endDate,
periodCountCalendarDays: periodCountCalendarDays === "1",
@@ -1346,8 +1369,6 @@ const EventTypePage = (props: inferSSRProps) => {