calcom/pages/event-types/[type].tsx

1367 lines
60 KiB
TypeScript
Raw Normal View History

// TODO: replace headlessui with radix-ui
import { Disclosure, RadioGroup } from "@headlessui/react";
2021-08-02 15:24:01 +00:00
import { PhoneIcon, XIcon } from "@heroicons/react/outline";
2021-07-30 23:05:38 +00:00
import {
LocationMarkerIcon,
LinkIcon,
2021-07-30 23:05:38 +00:00
PlusIcon,
DocumentIcon,
ChevronRightIcon,
ClockIcon,
2021-07-30 23:05:38 +00:00
TrashIcon,
ExternalLinkIcon,
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
UsersIcon,
UserAddIcon,
2021-07-30 23:05:38 +00:00
} from "@heroicons/react/solid";
import { EventTypeCustomInput, EventTypeCustomInputType, SchedulingType } from "@prisma/client";
2021-07-30 23:05:38 +00:00
import dayjs from "dayjs";
import timezone from "dayjs/plugin/timezone";
import utc from "dayjs/plugin/utc";
2021-07-30 23:05:38 +00:00
import throttle from "lodash.throttle";
import { GetServerSidePropsContext } from "next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import { useRouter } from "next/router";
import React, { useEffect, useRef, useState } from "react";
import { DateRangePicker, OrientationShape, toMomentObject } from "react-dates";
2021-07-30 23:05:38 +00:00
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
import { FormattedNumber, IntlProvider } from "react-intl";
import { useMutation } from "react-query";
import Select, { OptionTypeBase } from "react-select";
import Stripe from "stripe";
import { asStringOrThrow } from "@lib/asStringOrNull";
import { getSession } from "@lib/auth";
import classNames from "@lib/classNames";
import { HttpError } from "@lib/core/http/error";
import { extractLocaleInfo } from "@lib/core/i18n/i18n.utils";
import getIntegrations, { hasIntegration } from "@lib/integrations/getIntegrations";
import { LocationType } from "@lib/location";
import deleteEventType from "@lib/mutations/event-types/delete-event-type";
import updateEventType from "@lib/mutations/event-types/update-event-type";
import showToast from "@lib/notification";
import prisma from "@lib/prisma";
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
import { defaultAvatarSrc } from "@lib/profile";
import { AdvancedOptions, EventTypeInput } from "@lib/types/event-type";
2021-09-02 16:10:44 +00:00
import { inferSSRProps } from "@lib/types/inferSSRProps";
import { Dialog, DialogTrigger } from "@components/Dialog";
import Modal from "@components/Modal";
import Shell from "@components/Shell";
import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
import Button from "@components/ui/Button";
import { Scheduler } from "@components/ui/Scheduler";
import Switch from "@components/ui/Switch";
import CheckboxField from "@components/ui/form/CheckboxField";
import CheckedSelect from "@components/ui/form/CheckedSelect";
import MinutesField from "@components/ui/form/MinutesField";
import * as RadioArea from "@components/ui/form/radio-area";
2021-07-30 23:05:38 +00:00
dayjs.extend(utc);
dayjs.extend(timezone);
const PERIOD_TYPES = [
{
type: "rolling",
suffix: "into the future",
},
{
type: "range",
prefix: "Within a date range",
},
{
type: "unlimited",
prefix: "Indefinitely into the future",
},
];
2021-09-02 16:10:44 +00:00
const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
const { eventType, locationOptions, availability, team, teamMembers, hasPaymentIntegration, currency } =
props;
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
2021-07-30 23:05:38 +00:00
const router = useRouter();
const [successModalOpen, setSuccessModalOpen] = useState(false);
2021-07-30 23:05:38 +00:00
const inputOptions: OptionTypeBase[] = [
{ value: EventTypeCustomInputType.TEXT, label: "Text" },
{ value: EventTypeCustomInputType.TEXTLONG, label: "Multiline Text" },
{ value: EventTypeCustomInputType.NUMBER, label: "Number" },
{ value: EventTypeCustomInputType.BOOL, label: "Checkbox" },
2021-07-30 23:05:38 +00:00
];
const [DATE_PICKER_ORIENTATION, setDatePickerOrientation] = useState<OrientationShape>("horizontal");
const [contentSize, setContentSize] = useState({ width: 0, height: 0 });
const updateMutation = useMutation(updateEventType, {
onSuccess: async ({ eventType }) => {
await router.push("/event-types");
showToast(`${eventType.title} event type updated successfully`, "success");
},
onError: (err: HttpError) => {
const message = `${err.statusCode}: ${err.message}`;
showToast(message, "error");
},
});
const deleteMutation = useMutation(deleteEventType, {
onSuccess: async () => {
await router.push("/event-types");
showToast("Event type deleted successfully", "success");
},
onError: (err: HttpError) => {
const message = `${err.statusCode}: ${err.message}`;
showToast(message, "error");
},
});
2021-07-30 23:05:38 +00:00
const handleResizeEvent = () => {
const elementWidth = parseFloat(getComputedStyle(document.body).width);
const elementHeight = parseFloat(getComputedStyle(document.body).height);
setContentSize({
width: elementWidth,
height: elementHeight,
});
};
const throttledHandleResizeEvent = throttle(handleResizeEvent, 100);
useEffect(() => {
handleResizeEvent();
window.addEventListener("resize", throttledHandleResizeEvent);
return () => {
window.removeEventListener("resize", throttledHandleResizeEvent);
};
}, []);
useEffect(() => {
if (contentSize.width < 500) {
setDatePickerOrientation("vertical");
} else {
setDatePickerOrientation("horizontal");
}
}, [contentSize]);
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
const [users, setUsers] = useState([]);
2021-07-30 23:05:38 +00:00
const [enteredAvailability, setEnteredAvailability] = useState();
const [showLocationModal, setShowLocationModal] = useState(false);
const [showAddCustomModal, setShowAddCustomModal] = useState(false);
const [selectedTimeZone, setSelectedTimeZone] = useState("");
const [selectedLocation, setSelectedLocation] = useState<OptionTypeBase | undefined>(undefined);
const [selectedInputOption, setSelectedInputOption] = useState<OptionTypeBase>(inputOptions[0]);
2021-07-30 23:05:38 +00:00
const [locations, setLocations] = useState(eventType.locations || []);
const [selectedCustomInput, setSelectedCustomInput] = useState<EventTypeCustomInput | undefined>(undefined);
const [customInputs, setCustomInputs] = useState<EventTypeCustomInput[]>(
eventType.customInputs.sort((a, b) => a.id - b.id) || []
);
const [periodStartDate, setPeriodStartDate] = useState(() => {
if (eventType.periodType === "range" && eventType?.periodStartDate) {
return toMomentObject(new Date(eventType.periodStartDate));
}
return null;
});
const [periodEndDate, setPeriodEndDate] = useState(() => {
if (eventType.periodType === "range" && eventType.periodEndDate) {
return toMomentObject(new Date(eventType?.periodEndDate));
}
return null;
});
const [focusedInput, setFocusedInput] = useState(null);
const [periodType, setPeriodType] = useState(() => {
return (
PERIOD_TYPES.find((s) => s.type === eventType.periodType) ||
PERIOD_TYPES.find((s) => s.type === "unlimited")
);
});
const [requirePayment, setRequirePayment] = useState(eventType.price > 0);
2021-07-30 23:05:38 +00:00
const [hidden, setHidden] = useState<boolean>(eventType.hidden);
const titleRef = useRef<HTMLInputElement>(null);
const slugRef = useRef<HTMLInputElement>(null);
const requiresConfirmationRef = useRef<HTMLInputElement>(null);
const eventNameRef = useRef<HTMLInputElement>(null);
const periodDaysRef = useRef<HTMLInputElement>(null);
const periodDaysTypeRef = useRef<HTMLSelectElement>(null);
const priceRef = useRef<HTMLInputElement>(null);
2021-07-30 23:05:38 +00:00
useEffect(() => {
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
setSelectedTimeZone(eventType.timeZone);
2021-07-30 23:05:38 +00:00
}, []);
async function updateEventTypeHandler(event) {
event.preventDefault();
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
const formData = Object.fromEntries(new FormData(event.target).entries());
2021-07-30 23:05:38 +00:00
const enteredTitle: string = titleRef.current.value;
const enteredSlug: string = slugRef.current.value;
const enteredPrice = requirePayment ? Math.round(parseFloat(priceRef.current.value) * 100) : 0;
const advancedOptionsPayload: AdvancedOptions = {};
if (requiresConfirmationRef.current) {
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;
}
2021-07-30 23:05:38 +00:00
const payload: EventTypeInput = {
id: eventType.id,
title: enteredTitle,
slug: enteredSlug,
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
description: formData.description as string,
// note(zomars) Why does this field doesnt need to be parsed...
length: formData.length as unknown as number,
// note(zomars) ...But this does? (Is being sent as string, despite it's a number field)
minimumBookingNotice: parseInt(formData.minimumBookingNotice as unknown as string),
requiresConfirmation: formData.requiresConfirmation === "on",
disableGuests: formData.disableGuests === "on",
hidden,
2021-07-30 23:05:38 +00:00
locations,
customInputs,
timeZone: selectedTimeZone,
availability: enteredAvailability || null,
...advancedOptionsPayload,
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
...(team
? {
schedulingType: formData.schedulingType as string,
users,
}
: {}),
price: enteredPrice,
currency: currency,
2021-07-30 23:05:38 +00:00
};
updateMutation.mutate(payload);
2021-07-30 23:05:38 +00:00
}
async function deleteEventTypeHandler(event) {
event.preventDefault();
const payload = { id: eventType.id };
deleteMutation.mutate(payload);
2021-07-30 23:05:38 +00:00
}
const openLocationModal = (type: LocationType) => {
setSelectedLocation(locationOptions.find((option) => option.value === type));
setShowLocationModal(true);
};
const closeLocationModal = () => {
setSelectedLocation(undefined);
setShowLocationModal(false);
};
const closeAddCustomModal = () => {
setSelectedInputOption(inputOptions[0]);
setShowAddCustomModal(false);
setSelectedCustomInput(undefined);
};
const closeSuccessModal = () => {
setSuccessModalOpen(false);
};
2021-07-30 23:05:38 +00:00
const updateLocations = (e) => {
e.preventDefault();
let details = {};
if (e.target.location.value === LocationType.InPerson) {
details = { address: e.target.address.value };
}
const existingIdx = locations.findIndex((loc) => e.target.location.value === loc.type);
if (existingIdx !== -1) {
const copy = locations;
copy[existingIdx] = { ...locations[existingIdx], ...details };
setLocations(copy);
} else {
setLocations(locations.concat({ type: e.target.location.value, ...details }));
}
setShowLocationModal(false);
};
const removeLocation = (selectedLocation) => {
setLocations(locations.filter((location) => location.type !== selectedLocation.type));
};
const openEditCustomModel = (customInput: EventTypeCustomInput) => {
setSelectedCustomInput(customInput);
setSelectedInputOption(inputOptions.find((e) => e.value === customInput.type));
setShowAddCustomModal(true);
};
const LocationOptions = () => {
if (!selectedLocation) {
return null;
}
switch (selectedLocation.value) {
case LocationType.InPerson:
return (
<div>
<label htmlFor="address" className="block text-sm font-medium text-gray-700">
Set an address or place
</label>
<div className="mt-1">
<input
type="text"
name="address"
id="address"
required
className="block w-full border-gray-300 rounded-sm shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
2021-07-30 23:05:38 +00:00
defaultValue={locations.find((location) => location.type === LocationType.InPerson)?.address}
/>
</div>
</div>
);
case LocationType.Phone:
return (
<p className="text-sm">Cal will ask your invitee to enter a phone number before scheduling.</p>
2021-07-30 23:05:38 +00:00
);
case LocationType.GoogleMeet:
return <p className="text-sm">Cal will provide a Google Meet location.</p>;
2021-07-30 23:05:38 +00:00
case LocationType.Zoom:
return <p className="text-sm">Cal will provide a Zoom meeting URL.</p>;
2021-07-30 23:05:38 +00:00
}
return null;
};
const updateCustom = (e) => {
e.preventDefault();
const customInput: EventTypeCustomInput = {
label: e.target.label.value,
placeholder: e.target.placeholder?.value,
2021-07-30 23:05:38 +00:00
required: e.target.required.checked,
type: e.target.type.value,
};
if (selectedCustomInput) {
selectedCustomInput.label = customInput.label;
selectedCustomInput.placeholder = customInput.placeholder;
selectedCustomInput.required = customInput.required;
selectedCustomInput.type = customInput.type;
2021-07-30 23:05:38 +00:00
} else {
setCustomInputs(customInputs.concat(customInput));
}
closeAddCustomModal();
};
const removeCustom = (index: number) => {
customInputs.splice(index, 1);
setCustomInputs([...customInputs]);
2021-07-30 23:05:38 +00:00
};
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
const schedulingTypeOptions: { value: string; label: string }[] = [
{
value: SchedulingType.COLLECTIVE,
label: "Collective",
description: "Schedule meetings when all selected team members are available.",
},
{
value: SchedulingType.ROUND_ROBIN,
label: "Round Robin",
description: "Cycle meetings between multiple team members.",
},
];
2021-07-30 23:05:38 +00:00
return (
<div>
<Shell
title={`${eventType.title} | Event Type`}
heading={
<input
ref={titleRef}
type="text"
name="title"
id="title"
required
className="pl-0 text-xl font-bold text-gray-900 bg-transparent border-none cursor-pointer focus:ring-0 focus:outline-none"
placeholder="Quick Chat"
defaultValue={eventType.title}
/>
}
subtitle={eventType.description}>
2021-08-03 08:07:39 +00:00
<div className="block sm:flex">
<div className="w-full mr-2 sm:w-10/12">
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
<div className="p-4 py-6 -mx-4 bg-white border rounded-sm border-neutral-200 sm:mx-0 sm:px-8">
<form onSubmit={updateEventTypeHandler} className="space-y-6">
<div className="space-y-3">
<div className="items-center block sm:flex">
<div className="mb-4 min-w-44 sm:mb-0">
<label htmlFor="slug" className="flex mt-0 text-sm font-medium text-neutral-700">
<LinkIcon className="w-4 h-4 mr-2 mt-0.5 text-neutral-500" />
URL
</label>
2021-07-30 23:05:38 +00:00
</div>
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
<div className="w-full">
<div className="flex rounded-sm shadow-sm">
<span className="inline-flex items-center px-3 text-gray-500 border border-r-0 border-gray-300 rounded-l-sm bg-gray-50 sm:text-sm">
{typeof location !== "undefined" ? location.hostname : ""}/
{team ? "team/" + team.slug : eventType.users[0].username}/
</span>
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
<input
ref={slugRef}
type="text"
name="slug"
id="slug"
required
className="flex-1 block w-full min-w-0 border-gray-300 rounded-none rounded-r-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
defaultValue={eventType.slug}
/>
</div>
</div>
</div>
<MinutesField
label={
<>
<ClockIcon className="w-4 h-4 mr-2 mt-0.5 text-neutral-500" /> Duration
</>
}
name="length"
id="length"
required
placeholder="15"
defaultValue={eventType.length}
/>
</div>
<hr />
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
<div className="space-y-3">
<div className="items-center block sm:flex">
<div className="min-w-44 sm:mb-0">
<label htmlFor="location" className="flex mt-0 text-sm font-medium text-neutral-700">
<LocationMarkerIcon className="w-4 h-4 mr-2 mt-0.5 text-neutral-500" />
Location
</label>
</div>
<div className="w-full">
{locations.length === 0 && (
2021-08-02 15:24:01 +00:00
<div className="flex">
2021-07-30 23:05:38 +00:00
<Select
name="location"
id="location"
options={locationOptions}
isSearchable="false"
2021-08-02 15:24:01 +00:00
classNamePrefix="react-select"
className="flex-1 block w-full min-w-0 border border-gray-300 rounded-sm react-select-container focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
2021-07-30 23:05:38 +00:00
onChange={(e) => openLocationModal(e.value)}
/>
</div>
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
)}
{locations.length > 0 && (
<ul>
{locations.map((location) => (
<li
key={location.type}
className="p-2 mb-2 border rounded-sm shadow-sm border-neutral-300">
<div className="flex justify-between">
{location.type === LocationType.InPerson && (
<div className="flex items-center flex-grow">
<LocationMarkerIcon className="w-6 h-6" />
<span className="ml-2 text-sm">{location.address}</span>
</div>
)}
{location.type === LocationType.Phone && (
<div className="flex items-center flex-grow">
<PhoneIcon className="w-6 h-6" />
<span className="ml-2 text-sm">Phone call</span>
</div>
)}
{location.type === LocationType.GoogleMeet && (
<div className="flex items-center flex-grow">
<svg
className="w-6 h-6"
viewBox="0 0 64 54"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M16 0V16H0" fill="#EA4335" />
<path
d="M16 0V16H37.3333V27.0222L53.3333 14.0444V5.33332C53.3333 1.77777 51.5555 0 47.9999 0"
fill="#FFBA00"
/>
<path
d="M15.6438 53.3341V37.3341H37.3326V26.6675L53.3326 39.2897V48.0008C53.3326 51.5563 51.5548 53.3341 47.9993 53.3341"
fill="#00AC47"
/>
<path d="M37.3335 26.6662L53.3335 13.6885V39.644" fill="#00832D" />
<path
d="M53.3335 13.6892L60.8001 7.64481C62.4001 6.40037 64.0001 6.40037 64.0001 8.88925V44.4447C64.0001 46.9336 62.4001 46.9336 60.8001 45.6892L53.3335 39.6447"
fill="#00AC47"
/>
<path
d="M0 36.9785V48.0007C0 51.5563 1.77777 53.334 5.33332 53.334H16V36.9785"
fill="#0066DA"
/>
<path d="M0 16H16V37.3333H0" fill="#2684FC" />
</svg>
<span className="ml-2 text-sm">Google Meet</span>
</div>
)}
{location.type === LocationType.Zoom && (
<div className="flex items-center flex-grow">
<svg
className="w-6 h-6"
viewBox="0 0 64 64"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M32 0C49.6733 0 64 14.3267 64 32C64 49.6733 49.6733 64 32 64C14.3267 64 0 49.6733 0 32C0 14.3267 14.3267 0 32 0Z"
fill="#E5E5E4"
/>
<path
d="M32.0002 0.623047C49.3292 0.623047 63.3771 14.6709 63.3771 31.9999C63.3771 49.329 49.3292 63.3768 32.0002 63.3768C14.6711 63.3768 0.623291 49.329 0.623291 31.9999C0.623291 14.6709 14.6716 0.623047 32.0002 0.623047Z"
fill="white"
/>
<path
d="M31.9998 3.14014C47.9386 3.14014 60.8597 16.0612 60.8597 32C60.8597 47.9389 47.9386 60.8599 31.9998 60.8599C16.0609 60.8599 3.13989 47.9389 3.13989 32C3.13989 16.0612 16.0609 3.14014 31.9998 3.14014Z"
fill="#4A8CFF"
/>
<path
d="M13.1711 22.9581V36.5206C13.1832 39.5875 15.6881 42.0558 18.743 42.0433H38.5125C39.0744 42.0433 39.5266 41.5911 39.5266 41.0412V27.4788C39.5145 24.4119 37.0096 21.9435 33.9552 21.956H14.1857C13.6238 21.956 13.1716 22.4082 13.1716 22.9581H13.1711ZM40.7848 28.2487L48.9469 22.2864C49.6557 21.6998 50.2051 21.8462 50.2051 22.9095V41.0903C50.2051 42.2999 49.5329 42.1536 48.9469 41.7134L40.7848 35.7631V28.2487Z"
fill="white"
/>
</svg>
<span className="ml-2 text-sm">Zoom Video</span>
</div>
)}
<div className="flex">
<button
type="button"
onClick={() => openLocationModal(location.type)}
className="mr-2 text-sm text-primary-600">
Edit
</button>
<button onClick={() => removeLocation(location)}>
<XIcon className="w-6 h-6 pl-1 border-l-2 hover:text-red-500 " />
</button>
2021-07-30 23:05:38 +00:00
</div>
</div>
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
</li>
))}
{locations.length > 0 && locations.length !== locationOptions.length && (
<li>
<button
type="button"
className="flex px-3 py-2 rounded-sm bg-neutral-100"
onClick={() => setShowLocationModal(true)}>
<PlusIcon className="h-4 w-4 mt-0.5 text-neutral-900" />
<span className="ml-1 text-sm font-medium text-neutral-700">
Add another location
</span>
</button>
</li>
)}
</ul>
)}
</div>
2021-07-30 23:05:38 +00:00
</div>
</div>
<hr className="border-neutral-200" />
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
<div className="space-y-3">
<div className="items-center block sm:flex">
<div className="mb-4 min-w-44 sm:mb-0">
<label htmlFor="description" className="flex mt-0 text-sm font-medium text-neutral-700">
<DocumentIcon className="w-4 h-4 mr-2 mt-0.5 text-neutral-500" />
Description
</label>
</div>
<div className="w-full">
<textarea
name="description"
id="description"
className="block w-full border-gray-300 rounded-sm shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
placeholder="A quick video meeting."
defaultValue={eventType.description}></textarea>
</div>
2021-07-30 23:05:38 +00:00
</div>
</div>
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
{team && <hr className="border-neutral-200" />}
{team && (
<div className="space-y-3">
<div className="block sm:flex">
<div className="mb-4 min-w-44 sm:mb-0">
<label
htmlFor="schedulingType"
className="flex mt-2 text-sm font-medium text-neutral-700">
<UsersIcon className="text-neutral-500 h-5 w-5 mr-2" /> Scheduling Type
</label>
</div>
<RadioArea.Select
name="schedulingType"
value={eventType.schedulingType}
options={schedulingTypeOptions}
/>
</div>
<div className="block sm:flex">
<div className="mb-4 min-w-44 sm:mb-0">
<label htmlFor="users" className="flex mt-2 text-sm font-medium text-neutral-700">
<UserAddIcon className="text-neutral-500 h-5 w-5 mr-2" /> Attendees
</label>
</div>
<div className="w-full space-y-2">
<CheckedSelect
onChange={(options: unknown) => setUsers(options.map((option) => option.value))}
defaultValue={eventType.users.map((user: User) => ({
value: user.id,
label: user.name,
avatar: user.avatar,
}))}
options={teamMembers.map((user: User) => ({
value: user.id,
label: user.name,
avatar: user.avatar,
}))}
id="users"
placeholder="Add attendees"
/>
</div>
</div>
</div>
)}
2021-07-30 23:05:38 +00:00
<Disclosure>
{({ open }) => (
<>
<Disclosure.Button className="flex w-full">
2021-07-30 23:05:38 +00:00
<ChevronRightIcon
className={`${open ? "transform rotate-90" : ""} w-5 h-5 text-neutral-500 ml-auto`}
/>
<span className="text-sm font-medium text-neutral-700">Show advanced settings</span>
2021-07-30 23:05:38 +00:00
</Disclosure.Button>
<Disclosure.Panel className="space-y-4">
<div className="items-center block sm:flex">
<div className="mb-4 min-w-44 sm:mb-0">
<label
htmlFor="eventName"
className="flex mt-2 text-sm font-medium text-neutral-700">
2021-07-30 23:05:38 +00:00
Event name
</label>
</div>
2021-08-03 08:07:39 +00:00
<div className="w-full">
<div className="relative mt-1 rounded-sm shadow-sm">
2021-07-30 23:05:38 +00:00
<input
ref={eventNameRef}
type="text"
name="title"
id="title"
className="block w-full border-gray-300 rounded-sm shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
2021-07-30 23:05:38 +00:00
placeholder="Meeting with {USER}"
defaultValue={eventType.eventName}
/>
</div>
</div>
</div>
<div className="items-center block sm:flex">
<div className="mb-4 min-w-44 sm:mb-0">
2021-07-30 23:05:38 +00:00
<label
htmlFor="additionalFields"
className="flex mt-2 text-sm font-medium text-neutral-700">
2021-07-30 23:05:38 +00:00
Additional inputs
</label>
</div>
2021-08-03 08:07:39 +00:00
<div className="w-full">
<ul className="mt-1 w-max">
{customInputs.map((customInput: EventTypeCustomInput, idx: number) => (
<li key={idx} className="p-2 mb-2 border bg-secondary-50">
2021-07-30 23:05:38 +00:00
<div className="flex justify-between">
<div>
<div>
<span className="ml-2 text-sm">Label: {customInput.label}</span>
</div>
{customInput.placeholder && (
<div>
<span className="ml-2 text-sm">
Placeholder: {customInput.placeholder}
</span>
</div>
)}
2021-07-30 23:05:38 +00:00
<div>
<span className="ml-2 text-sm">Type: {customInput.type}</span>
</div>
<div>
<span className="ml-2 text-sm">
{customInput.required ? "Required" : "Optional"}
</span>
</div>
</div>
<div className="flex">
<button
type="button"
onClick={() => openEditCustomModel(customInput)}
2021-08-02 15:24:01 +00:00
className="mr-2 text-sm text-primary-600">
2021-07-30 23:05:38 +00:00
Edit
</button>
<button type="button" onClick={() => removeCustom(idx)}>
<XIcon className="w-6 h-6 pl-1 border-l-2 hover:text-red-500 " />
2021-07-30 23:05:38 +00:00
</button>
</div>
</div>
</li>
))}
<li>
<button
type="button"
className="flex px-3 py-2 rounded-sm bg-neutral-100"
2021-07-30 23:05:38 +00:00
onClick={() => setShowAddCustomModal(true)}>
<PlusIcon className="h-4 w-4 mt-0.5 text-neutral-900" />
<span className="ml-1 text-sm font-medium text-neutral-700">
2021-07-30 23:05:38 +00:00
Add an input
</span>
</button>
</li>
</ul>
</div>
</div>
<CheckboxField
ref={requiresConfirmationRef}
id="requiresConfirmation"
name="requiresConfirmation"
label="Opt-in booking"
description="The booking needs to be manually confirmed before it is pushed to the integrations and a confirmation mail is sent."
defaultChecked={eventType.requiresConfirmation}
/>
<CheckboxField
id="disableGuests"
name="disableGuests"
label="Disable guests"
description="Disable adding aditional guests while booking."
defaultChecked={eventType.disableGuests}
/>
<hr className="border-neutral-200" />
<MinutesField
label="Minimum booking notice"
name="minimumBookingNotice"
id="minimumBookingNotice"
required
placeholder="120"
defaultValue={eventType.minimumBookingNotice}
/>
<div className="block sm:flex">
<div className="mb-4 min-w-44 sm:mb-0">
2021-07-30 23:05:38 +00:00
<label
htmlFor="inviteesCanSchedule"
className="flex mt-2 text-sm font-medium text-neutral-700">
2021-07-30 23:05:38 +00:00
Invitees can schedule
</label>
</div>
2021-08-03 08:07:39 +00:00
<div className="w-full">
2021-07-30 23:05:38 +00:00
<RadioGroup value={periodType} onChange={setPeriodType}>
<RadioGroup.Label className="sr-only">Date Range</RadioGroup.Label>
<div>
{PERIOD_TYPES.map((period) => (
<RadioGroup.Option
key={period.type}
value={period}
className={({ checked }) =>
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
classNames(
2021-07-30 23:05:38 +00:00
checked ? "border-secondary-200 z-10" : "border-gray-200",
"relative min-h-14 flex items-center cursor-pointer focus:outline-none"
2021-07-30 23:05:38 +00:00
)
}>
{({ active, checked }) => (
<>
<div
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
className={classNames(
2021-07-30 23:05:38 +00:00
checked
2021-08-02 15:24:01 +00:00
? "bg-primary-600 border-transparent"
2021-07-30 23:05:38 +00:00
: "bg-white border-gray-300",
2021-08-02 15:24:01 +00:00
active ? "ring-2 ring-offset-2 ring-primary-500" : "",
"h-4 w-4 mt-0.5 mr-2 cursor-pointer rounded-full border items-center justify-center"
2021-07-30 23:05:38 +00:00
)}
aria-hidden="true">
<span className="rounded-full bg-white w-1.5 h-1.5" />
</div>
<div className="flex flex-col lg:ml-3">
2021-07-30 23:05:38 +00:00
<RadioGroup.Label
as="span"
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
className={classNames(
2021-07-30 23:05:38 +00:00
checked ? "text-secondary-900" : "text-gray-900",
"block text-sm space-y-2 lg:space-y-0 lg:space-x-2"
)}>
<span>{period.prefix}</span>
{period.type === "rolling" && (
<div className="inline-flex">
<input
ref={periodDaysRef}
type="text"
name="periodDays"
id=""
className="block w-12 mr-2 border-gray-300 rounded-sm shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
2021-07-30 23:05:38 +00:00
placeholder="30"
defaultValue={eventType.periodDays || 30}
/>
<select
ref={periodDaysTypeRef}
id=""
name="periodDaysType"
className="block w-full py-2 pl-3 pr-10 text-base border-gray-300 rounded-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
2021-07-30 23:05:38 +00:00
defaultValue={
eventType.periodCountCalendarDays ? "1" : "0"
}>
<option value="1">calendar days</option>
<option value="0">business days</option>
</select>
</div>
)}
{checked && period.type === "range" && (
<div className="inline-flex space-x-2">
<DateRangePicker
orientation={DATE_PICKER_ORIENTATION}
startDate={periodStartDate}
startDateId="your_unique_start_date_id"
endDate={periodEndDate}
endDateId="your_unique_end_date_id"
onDatesChange={({ startDate, endDate }) => {
setPeriodStartDate(startDate);
setPeriodEndDate(endDate);
}}
focusedInput={focusedInput}
onFocusChange={(focusedInput) => {
setFocusedInput(focusedInput);
}}
/>
</div>
)}
<span>{period.suffix}</span>
</RadioGroup.Label>
</div>
</>
)}
</RadioGroup.Option>
))}
</div>
</RadioGroup>
</div>
</div>
<hr className="border-neutral-200" />
<div className="block sm:flex">
<div className="mb-4 min-w-44 sm:mb-0">
<label
htmlFor="availability"
className="flex mt-2 text-sm font-medium text-neutral-700">
2021-07-30 23:05:38 +00:00
Availability
</label>
</div>
2021-08-03 08:07:39 +00:00
<div className="w-full">
2021-07-30 23:05:38 +00:00
<Scheduler
setAvailability={setEnteredAvailability}
setTimeZone={setSelectedTimeZone}
timeZone={selectedTimeZone}
availability={availability}
/>
</div>
</div>
{hasPaymentIntegration && (
<>
<hr className="border-neutral-200" />
<div className="block sm:flex">
<div className="min-w-44 mb-4 sm:mb-0">
<label
htmlFor="payment"
className="text-sm flex font-medium text-neutral-700 mt-2">
Payment
</label>
</div>
<div className="flex flex-col">
<div className="w-full">
<div className="block sm:flex items-center">
<div className="w-full">
<div className="relative flex items-start">
<div className="flex items-center h-5">
<input
onChange={(event) => setRequirePayment(event.target.checked)}
id="requirePayment"
name="requirePayment"
type="checkbox"
className="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"
defaultChecked={requirePayment}
/>
</div>
<div className="ml-3 text-sm">
<p className="text-neutral-900">
Require Payment (0.5% +{" "}
<IntlProvider locale="en">
<FormattedNumber
value={0.1}
style="currency"
currency={currency}
/>
</IntlProvider>{" "}
commission per transaction)
</p>
</div>
</div>
</div>
</div>
</div>
{requirePayment && (
<div className="w-full">
<div className="block sm:flex items-center">
<div className="w-full">
<div className="mt-1 relative rounded-sm shadow-sm">
<input
ref={priceRef}
type="number"
name="price"
id="price"
step="0.01"
required
className="focus:ring-primary-500 focus:border-primary-500 block w-full pl-2 pr-12 sm:text-sm border-gray-300 rounded-sm"
placeholder="Price"
defaultValue={
eventType.price > 0 ? eventType.price / 100.0 : undefined
}
/>
<div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
<span className="text-gray-500 sm:text-sm" id="duration">
{new Intl.NumberFormat("en", {
style: "currency",
currency: currency,
maximumSignificantDigits: 1,
maximumFractionDigits: 0,
})
.format(0)
.replace("0", "")}
</span>
</div>
</div>
</div>
</div>
</div>
)}
</div>
</div>
</>
)}
2021-07-30 23:05:38 +00:00
</Disclosure.Panel>
</>
)}
</Disclosure>
<div className="flex justify-end mt-4 space-x-2">
<Button href="/event-types" color="secondary" tabIndex={-1}>
Cancel
</Button>
<Button type="submit">Update</Button>
2021-07-30 23:05:38 +00:00
</div>
</form>
<Modal
heading="Event Type updated successfully"
description="Your event type has been updated successfully."
open={successModalOpen}
handleClose={closeSuccessModal}
/>
2021-07-30 23:05:38 +00:00
</div>
</div>
<div className="w-full px-4 mt-8 ml-2 sm:w-2/12 sm:mt-0 min-w-32">
2021-07-30 23:05:38 +00:00
<div className="space-y-4">
<Switch
name="isHidden"
defaultChecked={hidden}
onCheckedChange={setHidden}
label="Hide event type"
/>
2021-07-30 23:05:38 +00:00
<a
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
href={"/" + (team ? "team/" + team.slug : eventType.users[0].username) + "/" + eventType.slug}
2021-07-30 23:05:38 +00:00
target="_blank"
rel="noreferrer"
className="flex font-medium text-md text-neutral-700">
2021-07-30 23:05:38 +00:00
<ExternalLinkIcon className="w-4 h-4 mt-1 mr-2 text-neutral-500" aria-hidden="true" />
Preview
</a>
<button
onClick={() => {
navigator.clipboard.writeText(
"https://cal.com/" +
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
(team ? "team/" + team.slug : eventType.users[0].username) +
"/" +
eventType.slug
2021-07-30 23:05:38 +00:00
);
showToast("Link copied!", "success");
2021-07-30 23:05:38 +00:00
}}
type="button"
className="flex font-medium text-md text-neutral-700">
2021-07-30 23:05:38 +00:00
<LinkIcon className="w-4 h-4 mt-1 mr-2 text-neutral-500" />
2021-08-03 08:07:39 +00:00
Copy link
2021-07-30 23:05:38 +00:00
</button>
<Dialog>
<DialogTrigger className="flex font-medium text-md text-neutral-700">
<TrashIcon className="w-4 h-4 mt-1 mr-2 text-neutral-500" />
Delete
</DialogTrigger>
<ConfirmationDialogContent
variety="danger"
title="Delete Event Type"
confirmBtnText="Yes, delete event type"
onConfirm={deleteEventTypeHandler}>
Are you sure you want to delete this event type? Anyone who you&apos;ve shared this link
with will no longer be able to book using it.
</ConfirmationDialogContent>
</Dialog>
2021-07-30 23:05:38 +00:00
</div>
</div>
</div>
{showLocationModal && (
<div
className="fixed inset-0 z-50 overflow-y-auto"
2021-07-30 23:05:38 +00:00
aria-labelledby="modal-title"
role="dialog"
aria-modal="true">
<div className="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
2021-07-30 23:05:38 +00:00
<div
className="fixed inset-0 z-0 transition-opacity bg-gray-500 bg-opacity-75"
2021-07-30 23:05:38 +00:00
aria-hidden="true"></div>
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
&#8203;
</span>
<div className="inline-block px-4 pt-5 pb-4 text-left align-bottom transition-all transform bg-white rounded-sm shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
<div className="mb-4 sm:flex sm:items-start">
<div className="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto rounded-full bg-secondary-100 sm:mx-0 sm:h-10 sm:w-10">
<LocationMarkerIcon className="w-6 h-6 text-primary-600" />
2021-07-30 23:05:38 +00:00
</div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
2021-07-30 23:05:38 +00:00
Edit location
</h3>
</div>
</div>
<form onSubmit={updateLocations}>
<Select
name="location"
defaultValue={selectedLocation}
options={locationOptions}
isSearchable="false"
2021-08-02 15:24:01 +00:00
classNamePrefix="react-select"
className="flex-1 block w-full min-w-0 my-4 border border-gray-300 rounded-sm react-select-container focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
2021-07-30 23:05:38 +00:00
onChange={setSelectedLocation}
/>
<LocationOptions />
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
<button type="submit" className="btn btn-primary">
Update
</button>
<button onClick={closeLocationModal} type="button" className="mr-2 btn btn-white">
2021-07-30 23:05:38 +00:00
Cancel
</button>
</div>
</form>
</div>
</div>
</div>
)}
{showAddCustomModal && (
<div
className="fixed inset-0 z-50 overflow-y-auto"
2021-07-30 23:05:38 +00:00
aria-labelledby="modal-title"
role="dialog"
aria-modal="true">
<div className="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
2021-07-30 23:05:38 +00:00
<div
className="fixed inset-0 z-0 transition-opacity bg-gray-500 bg-opacity-75"
2021-07-30 23:05:38 +00:00
aria-hidden="true"
/>
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
&#8203;
</span>
<div className="inline-block px-4 pt-5 pb-4 text-left align-bottom transition-all transform bg-white rounded-sm shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
<div className="mb-4 sm:flex sm:items-start">
<div className="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto rounded-full bg-secondary-100 sm:mx-0 sm:h-10 sm:w-10">
<PlusIcon className="w-6 h-6 text-primary-600" />
2021-07-30 23:05:38 +00:00
</div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
2021-07-30 23:05:38 +00:00
Add new custom input field
</h3>
<div>
<p className="text-sm text-gray-400">
This input will be shown when booking this event
</p>
</div>
</div>
</div>
<form onSubmit={updateCustom}>
<div className="mb-2">
<label htmlFor="type" className="block text-sm font-medium text-gray-700">
Input type
</label>
<Select
name="type"
defaultValue={selectedInputOption}
options={inputOptions}
isSearchable="false"
required
className="flex-1 block w-full min-w-0 mt-1 mb-2 border-gray-300 rounded-none focus:ring-primary-500 focus:border-primary-500 rounded-r-md sm:text-sm"
2021-07-30 23:05:38 +00:00
onChange={setSelectedInputOption}
/>
</div>
<div className="mb-2">
<label htmlFor="label" className="block text-sm font-medium text-gray-700">
Label
</label>
<div className="mt-1">
<input
type="text"
name="label"
id="label"
required
className="block w-full border-gray-300 rounded-sm shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
2021-07-30 23:05:38 +00:00
defaultValue={selectedCustomInput?.label}
/>
</div>
</div>
{(selectedInputOption.value === EventTypeCustomInputType.TEXT ||
selectedInputOption.value === EventTypeCustomInputType.TEXTLONG) && (
<div className="mb-2">
<label htmlFor="placeholder" className="block text-sm font-medium text-gray-700">
Placeholder
</label>
<div className="mt-1">
<input
type="text"
name="placeholder"
id="placeholder"
className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-sm"
defaultValue={selectedCustomInput?.placeholder}
/>
</div>
</div>
)}
2021-07-30 23:05:38 +00:00
<div className="flex items-center h-5">
<input
id="required"
name="required"
type="checkbox"
className="w-4 h-4 mr-2 border-gray-300 rounded focus:ring-primary-500 text-primary-600"
2021-07-30 23:05:38 +00:00
defaultChecked={selectedCustomInput?.required ?? true}
/>
<label htmlFor="required" className="block text-sm font-medium text-gray-700">
Is required
</label>
</div>
<input type="hidden" name="id" id="id" value={selectedCustomInput?.id} />
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
<button type="submit" className="btn btn-primary">
Save
</button>
<button onClick={closeAddCustomModal} type="button" className="mr-2 btn btn-white">
2021-07-30 23:05:38 +00:00
Cancel
</button>
</div>
</form>
</div>
</div>
</div>
)}
</Shell>
</div>
);
};
2021-07-30 23:05:38 +00:00
export const getServerSideProps = async (context: GetServerSidePropsContext) => {
const { req, query } = context;
2021-07-30 23:05:38 +00:00
const session = await getSession({ req });
const locale = await extractLocaleInfo(context.req);
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
const typeParam = parseInt(asStringOrThrow(query.type));
if (!session?.user?.id) {
2021-07-30 23:05:38 +00:00
return {
redirect: {
permanent: false,
destination: "/auth/login",
},
};
}
const eventType = await prisma.eventType.findFirst({
2021-07-30 23:05:38 +00:00
where: {
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
AND: [
{
OR: [
{
users: {
some: {
id: session.user.id,
},
},
},
{
userId: session.user.id,
},
],
},
{
id: typeParam,
},
],
2021-07-30 23:05:38 +00:00
},
select: {
id: true,
title: true,
slug: true,
description: true,
length: true,
hidden: true,
locations: true,
eventName: true,
availability: true,
customInputs: true,
timeZone: true,
periodType: true,
periodDays: true,
periodStartDate: true,
periodEndDate: true,
periodCountCalendarDays: true,
requiresConfirmation: true,
disableGuests: true,
minimumBookingNotice: true,
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
team: {
select: {
slug: true,
members: {
where: {
accepted: true,
},
select: {
user: {
select: {
name: true,
id: true,
avatar: true,
email: true,
},
},
},
},
},
},
users: {
select: {
name: true,
id: true,
avatar: true,
username: true,
},
},
schedulingType: true,
userId: true,
price: true,
currency: true,
2021-07-30 23:05:38 +00:00
},
});
if (!eventType) {
return {
notFound: true,
};
2021-07-30 23:05:38 +00:00
}
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
// backwards compat
if (eventType.users.length === 0) {
eventType.users.push(
await prisma.user.findUnique({
where: {
id: session.user.id,
},
select: {
username: true,
},
})
);
}
2021-07-30 23:05:38 +00:00
const credentials = await prisma.credential.findMany({
where: {
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
userId: session.user.id,
2021-07-30 23:05:38 +00:00
},
select: {
id: true,
type: true,
key: true,
},
});
const integrations = getIntegrations(credentials);
2021-07-30 23:05:38 +00:00
const locationOptions: OptionTypeBase[] = [
{ value: LocationType.InPerson, label: "Link or In-person meeting" },
2021-07-30 23:05:38 +00:00
{ value: LocationType.Phone, label: "Phone call" },
{ value: LocationType.Zoom, label: "Zoom Video", disabled: true },
2021-07-30 23:05:38 +00:00
];
const hasPaymentIntegration = hasIntegration(integrations, "stripe_payment");
if (hasIntegration(integrations, "google_calendar")) {
2021-07-30 23:05:38 +00:00
locationOptions.push({ value: LocationType.GoogleMeet, label: "Google Meet" });
}
const currency =
(credentials.find((integration) => integration.type === "stripe_payment")?.key as Stripe.OAuthToken)
?.default_currency || "usd";
2021-07-30 23:05:38 +00:00
if (hasIntegration(integrations, "office365_calendar")) {
2021-07-30 23:05:38 +00:00
// TODO: Add default meeting option of the office integration.
// Assuming it's Microsoft Teams.
}
type Availability = typeof eventType["availability"];
const getAvailability = (availability: Availability) => (availability?.length ? availability : null);
2021-07-30 23:05:38 +00:00
const availability = getAvailability(eventType.availability) || [];
2021-07-30 23:05:38 +00:00
availability.sort((a, b) => a.startTime - b.startTime);
const eventTypeObject = Object.assign({}, eventType, {
periodStartDate: eventType.periodStartDate?.toString() ?? null,
periodEndDate: eventType.periodEndDate?.toString() ?? null,
});
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
const teamMembers = eventTypeObject.team
? eventTypeObject.team.members.map((member) => {
const user = member.user;
user.avatar = user.avatar || defaultAvatarSrc({ email: user.email });
return user;
})
: [];
2021-07-30 23:05:38 +00:00
return {
props: {
localeProp: locale,
2021-07-30 23:05:38 +00:00
eventType: eventTypeObject,
locationOptions,
availability,
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
team: eventTypeObject.team || null,
teamMembers,
hasPaymentIntegration,
currency,
...(await serverSideTranslations(locale, ["common"])),
2021-07-30 23:05:38 +00:00
},
};
};
export default EventTypePage;