Fix URL by removing slash and backslash (#1733)

* Fix URl by removing slash and backslash

* Implement slugify

* Add data type

* Fixing folder structure

* Solve zod-utils conflict
This commit is contained in:
Juan Esteban Nieto Cifuentes 2022-02-21 11:53:16 -05:00 committed by zomars
parent 66cdc01d0b
commit c45da4e3fd

View File

@ -39,6 +39,7 @@ import prisma from "@lib/prisma";
import { slugify } from "@lib/slugify";
import { trpc } from "@lib/trpc";
import { inferSSRProps } from "@lib/types/inferSSRProps";
import { slugify } from "@lib/slugify";
import DestinationCalendarSelector from "@components/DestinationCalendarSelector";
import { Dialog, DialogContent, DialogTrigger } from "@components/Dialog";
@ -259,7 +260,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
{...locationFormMethods.register("locationAddress")}
id="address"
required
className="focus:border-primary-500 focus:ring-primary-500 block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
className="block w-full border-gray-300 rounded-sm shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
defaultValue={
formMethods
.getValues("locations")
@ -389,7 +390,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
options={locationOptions}
isSearchable={false}
classNamePrefix="react-select"
className="react-select-container focus:border-primary-500 focus:ring-primary-500 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 sm:text-sm"
className="flex-1 block w-full min-w-0 border border-gray-300 rounded-sm react-select-container focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
onChange={(e) => {
if (e?.value) {
locationFormMethods.setValue("locationType", e.value);
@ -407,25 +408,25 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
className="mb-2 rounded-sm border border-neutral-300 py-1.5 px-2 shadow-sm">
<div className="flex justify-between">
{location.type === LocationType.InPerson && (
<div className="flex flex-grow items-center">
<LocationMarkerIcon className="h-6 w-6" />
<div className="flex items-center flex-grow">
<LocationMarkerIcon className="w-6 h-6" />
<input
disabled
className="w-full border-0 bg-transparent text-sm ltr:ml-2 rtl:mr-2"
className="w-full text-sm bg-transparent border-0 ltr:ml-2 rtl:mr-2"
value={location.address}
/>
</div>
)}
{location.type === LocationType.Phone && (
<div className="flex flex-grow items-center">
<PhoneIcon className="h-6 w-6" />
<div className="flex items-center flex-grow">
<PhoneIcon className="w-6 h-6" />
<span className="text-sm ltr:ml-2 rtl:mr-2">{t("phone_call")}</span>
</div>
)}
{location.type === LocationType.GoogleMeet && (
<div className="flex flex-grow items-center">
<div className="flex items-center flex-grow">
<svg
className="h-6 w-6"
className="w-6 h-6"
viewBox="0 0 64 54"
fill="none"
xmlns="http://www.w3.org/2000/svg">
@ -454,7 +455,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
</div>
)}
{location.type === LocationType.Huddle01 && (
<div className="flex flex-grow items-center">
<div className="flex items-center flex-grow">
<svg
width="1.25em"
height="1.25em"
@ -527,9 +528,9 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
</div>
)}
{location.type === LocationType.Zoom && (
<div className="flex flex-grow items-center">
<div className="flex items-center flex-grow">
<svg
className="h-6 w-6"
className="w-6 h-6"
viewBox="0 0 64 64"
fill="none"
xmlns="http://www.w3.org/2000/svg">
@ -554,7 +555,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
</div>
)}
{location.type === LocationType.Tandem && (
<div className="flex flex-grow items-center">
<div className="flex items-center flex-grow">
<svg
width="1.25em"
height="1.25em"
@ -578,9 +579,9 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
</div>
)}
{location.type === LocationType.Jitsi && (
<div className="flex flex-grow items-center">
<div className="flex items-center flex-grow">
<svg
className="h-6 w-6"
className="w-6 h-6"
viewBox="0 0 64 64"
fill="none"
xmlns="http://www.w3.org/2000/svg">
@ -608,11 +609,11 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
<button
type="button"
onClick={() => openLocationModal(location.type)}
className="mr-1 p-1 text-gray-500 hover:text-gray-900">
<PencilIcon className="h-4 w-4" />
className="p-1 mr-1 text-gray-500 hover:text-gray-900">
<PencilIcon className="w-4 h-4" />
</button>
<button type="button" onClick={() => removeLocation(location)}>
<XIcon className="border-l-1 h-6 w-6 pl-1 text-gray-500 hover:text-gray-900 " />
<XIcon className="w-6 h-6 pl-1 text-gray-500 border-l-1 hover:text-gray-900 " />
</button>
</div>
</div>
@ -623,7 +624,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
<li>
<button
type="button"
className="flex rounded-sm px-3 py-2 hover:bg-gray-100"
className="flex px-3 py-2 rounded-sm hover:bg-gray-100"
onClick={() => setShowLocationModal(true)}>
<PlusIcon className="mt-0.5 h-4 w-4 text-neutral-900" />
<span className="ml-1 text-sm font-medium text-neutral-700">{t("add_location")}</span>
@ -642,7 +643,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
centered
title={t("event_type_title", { eventTypeTitle: eventType.title })}
heading={
<div className="group relative cursor-pointer" onClick={() => setEditIcon(false)}>
<div className="relative cursor-pointer group" onClick={() => setEditIcon(false)}>
{editIcon ? (
<>
<h1
@ -650,7 +651,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
className="inline pl-0 text-gray-900 focus:text-black group-hover:text-gray-500">
{eventType.title}
</h1>
<PencilIcon className="ml-1 -mt-1 inline h-4 w-4 text-gray-700 group-hover:text-gray-500" />
<PencilIcon className="inline w-4 h-4 ml-1 -mt-1 text-gray-700 group-hover:text-gray-500" />
</>
) : (
<div style={{ marginBottom: -11 }}>
@ -659,7 +660,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
autoFocus
style={{ top: -6, fontSize: 22 }}
required
className="relative h-10 w-full cursor-pointer border-none bg-transparent pl-0 text-gray-900 hover:text-gray-700 focus:text-black focus:outline-none focus:ring-0"
className="relative w-full h-10 pl-0 text-gray-900 bg-transparent border-none cursor-pointer hover:text-gray-700 focus:text-black focus:outline-none focus:ring-0"
placeholder={t("quick_chat")}
{...formMethods.register("title")}
defaultValue={eventType.title}
@ -669,9 +670,9 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
</div>
}
subtitle={eventType.description || ""}>
<div className="mx-auto block sm:flex md:max-w-5xl">
<div className="block mx-auto sm:flex md:max-w-5xl">
<div className="w-full ltr:mr-2 rtl:ml-2 sm:w-9/12">
<div className="-mx-4 rounded-sm border border-neutral-200 bg-white p-4 py-6 sm:mx-0 sm:px-8">
<div className="p-4 py-6 -mx-4 bg-white border rounded-sm border-neutral-200 sm:mx-0 sm:px-8">
<Form
form={formMethods}
handleSubmit={async (values) => {
@ -693,8 +694,8 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
}}
className="space-y-6">
<div className="space-y-3">
<div className="block items-center sm:flex">
<div className="min-w-48 mb-4 sm:mb-0">
<div className="items-center block sm:flex">
<div className="mb-4 min-w-48 sm:mb-0">
<label htmlFor="slug" className="flex text-sm font-medium text-neutral-700">
<LinkIcon className="mt-0.5 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
{t("url")}
@ -702,14 +703,14 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
</div>
<div className="w-full">
<div className="flex rounded-sm shadow-sm">
<span className="inline-flex items-center rounded-l-sm border border-r-0 border-gray-300 bg-gray-50 px-3 text-gray-500 sm:text-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">
{process.env.NEXT_PUBLIC_APP_URL?.replace(/^(https?:|)\/\//, "")}/
{team ? "team/" + team.slug : eventType.users[0].username}/
</span>
<input
type="text"
required
className="focus:border-primary-500 focus:ring-primary-500 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 sm:text-sm"
className="flex-1 block w-full min-w-0 border-gray-300 rounded-none rounded-r-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
defaultValue={eventType.slug}
{...formMethods.register("slug", {
setValueAs: (v) => slugify(v),
@ -763,7 +764,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
<div className="space-y-3">
<div className="block sm:flex">
<div className="min-w-48 mb-4 mt-2.5 sm:mb-0">
<label htmlFor="description" className="mt-0 flex text-sm font-medium text-neutral-700">
<label htmlFor="description" className="flex mt-0 text-sm font-medium text-neutral-700">
<DocumentIcon className="mt-0.5 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
{t("description")}
</label>
@ -771,7 +772,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
<div className="w-full">
<textarea
id="description"
className="focus:border-primary-500 focus:ring-primary-500 block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
className="block w-full border-gray-300 rounded-sm shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
placeholder={t("quick_video_meeting")}
{...formMethods.register("description")}
defaultValue={asStringOrUndefined(eventType.description)}></textarea>
@ -782,11 +783,11 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
{team && (
<div className="space-y-3">
<div className="block sm:flex">
<div className="min-w-48 mb-4 sm:mb-0">
<div className="mb-4 min-w-48 sm:mb-0">
<label
htmlFor="schedulingType"
className="mt-2 flex text-sm font-medium text-neutral-700">
<UsersIcon className="h-5 w-5 text-neutral-500 ltr:mr-2 rtl:ml-2" />{" "}
className="flex mt-2 text-sm font-medium text-neutral-700">
<UsersIcon className="w-5 h-5 text-neutral-500 ltr:mr-2 rtl:ml-2" />{" "}
{t("scheduling_type")}
</label>
</div>
@ -808,9 +809,9 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
</div>
<div className="block sm:flex">
<div className="min-w-48 mb-4 sm:mb-0">
<div className="mb-4 min-w-48 sm:mb-0">
<label htmlFor="users" className="flex text-sm font-medium text-neutral-700">
<UserAddIcon className="h-5 w-5 text-neutral-500 ltr:mr-2 rtl:ml-2" />{" "}
<UserAddIcon className="w-5 h-5 text-neutral-500 ltr:mr-2 rtl:ml-2" />{" "}
{t("attendees")}
</label>
</div>
@ -859,8 +860,8 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
* This will fallback to each user selected destination calendar.
*/}
{!!connectedCalendarsQuery.data?.connectedCalendars.length && !team && (
<div className="block items-center sm:flex">
<div className="min-w-48 mb-4 sm:mb-0">
<div className="items-center block sm:flex">
<div className="mb-4 min-w-48 sm:mb-0">
<label
htmlFor="createEventsOn"
className="flex text-sm font-medium text-neutral-700">
@ -885,8 +886,8 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
</div>
</div>
)}
<div className="block items-center sm:flex">
<div className="min-w-48 mb-4 sm:mb-0">
<div className="items-center block sm:flex">
<div className="mb-4 min-w-48 sm:mb-0">
<label htmlFor="eventName" className="flex text-sm font-medium text-neutral-700">
{t("event_name")} <InfoBadge content={t("event_name_tooltip")} />
</label>
@ -895,7 +896,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
<div className="relative mt-1 rounded-sm shadow-sm">
<input
type="text"
className="focus:border-primary-500 focus:ring-primary-500 block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
className="block w-full border-gray-300 rounded-sm shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
placeholder={t("meeting_with_user")}
defaultValue={eventType.eventName || ""}
{...formMethods.register("eventName")}
@ -904,8 +905,8 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
</div>
</div>
{eventType.isWeb3Active && (
<div className="block items-center sm:flex">
<div className="min-w-48 mb-4 sm:mb-0">
<div className="items-center block sm:flex">
<div className="mb-4 min-w-48 sm:mb-0">
<label
htmlFor="smartContractAddress"
className="flex text-sm font-medium text-neutral-700">
@ -917,7 +918,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
{
<input
type="text"
className="focus:border-primary-500 focus:ring-primary-500 block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
className="block w-full border-gray-300 rounded-sm shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
placeholder={t("Example: 0x71c7656ec7ab88b098defb751b7401b5f6d8976f")}
defaultValue={(eventType.metadata.smartContractAddress || "") as string}
{...formMethods.register("smartContractAddress")}
@ -927,20 +928,20 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
</div>
</div>
)}
<div className="block items-center sm:flex">
<div className="min-w-48 mb-4 sm:mb-0">
<div className="items-center block sm:flex">
<div className="mb-4 min-w-48 sm:mb-0">
<label
htmlFor="additionalFields"
className="flexflex mt-2 text-sm font-medium text-neutral-700">
className="mt-2 text-sm font-medium flexflex text-neutral-700">
{t("additional_inputs")}
</label>
</div>
<div className="w-full">
<ul className="mt-1">
{customInputs.map((customInput: EventTypeCustomInput, idx: number) => (
<li key={idx} className="bg-secondary-50 mb-2 border p-2">
<li key={idx} className="p-2 mb-2 border bg-secondary-50">
<div className="flex justify-between">
<div className="w-0 flex-1">
<div className="flex-1 w-0">
<div className="truncate">
<span
className="text-sm ltr:ml-2 rtl:mr-2"
@ -979,7 +980,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
{t("edit")}
</Button>
<button type="button" onClick={() => removeCustom(idx)}>
<XIcon className="h-6 w-6 border-l-2 pl-1 hover:text-red-500 " />
<XIcon className="w-6 h-6 pl-1 border-l-2 hover:text-red-500 " />
</button>
</div>
</div>
@ -1056,8 +1057,8 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
)}
/>
<div className="block items-center sm:flex">
<div className="min-w-48 mb-4 sm:mb-0">
<div className="items-center block sm:flex">
<div className="mb-4 min-w-48 sm:mb-0">
<label htmlFor="eventName" className="flex text-sm font-medium text-neutral-700">
{t("slot_interval")}
</label>
@ -1082,7 +1083,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
<Select
isSearchable={false}
classNamePrefix="react-select"
className="react-select-container focus:border-primary-500 focus:ring-primary-500 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 sm:text-sm"
className="flex-1 block w-full min-w-0 border border-gray-300 rounded-sm react-select-container focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
onChange={(val) => {
formMethods.setValue(
"slotInterval",
@ -1104,7 +1105,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
</div>
<div className="block sm:flex">
<div className="min-w-48 mb-4 sm:mb-0">
<div className="mb-4 min-w-48 sm:mb-0">
<label
htmlFor="inviteesCanSchedule"
className="mt-2.5 flex text-sm font-medium text-neutral-700">
@ -1123,12 +1124,12 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
formMethods.setValue("periodType", val as PeriodType)
}>
{PERIOD_TYPES.map((period) => (
<div className="mb-2 flex items-center text-sm" key={period.type}>
<div className="flex items-center mb-2 text-sm" key={period.type}>
<RadioGroup.Item
id={period.type}
value={period.type}
className="flex h-4 w-4 cursor-pointer items-center rounded-full border border-black bg-white focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
<RadioGroup.Indicator className="relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
className="flex items-center w-4 h-4 bg-white border border-black rounded-full cursor-pointer focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
<RadioGroup.Indicator className="relative flex items-center justify-center w-4 h-4 after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
</RadioGroup.Item>
{period.prefix ? <span>{period.prefix}&nbsp;</span> : null}
{period.type === "ROLLING" && (
@ -1142,7 +1143,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
/>
<select
id=""
className="focus:border-primary-500 focus:ring-primary-500 block w-full rounded-sm border-gray-300 py-2 pl-3 pr-10 text-base focus:outline-none sm:text-sm"
className="block w-full py-2 pl-3 pr-10 text-base border-gray-300 rounded-sm focus:border-primary-500 focus:ring-primary-500 focus:outline-none sm:text-sm"
{...formMethods.register("periodCountCalendarDays")}
defaultValue={eventType.periodCountCalendarDays ? "1" : "0"}>
<option value="1">{t("calendar_days")}</option>
@ -1182,7 +1183,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
<hr className="border-neutral-200" />
<div className="block sm:flex">
<div className="min-w-48 mb-4 sm:mb-0">
<div className="mb-4 min-w-48 sm:mb-0">
<label htmlFor="availability" className="flex text-sm font-medium text-neutral-700">
{t("availability")}
</label>
@ -1223,20 +1224,20 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
<>
<hr className="border-neutral-200" />
<div className="block sm:flex">
<div className="min-w-48 mb-4 sm:mb-0">
<div className="mb-4 min-w-48 sm:mb-0">
<label
htmlFor="payment"
className="mt-2 flex text-sm font-medium text-neutral-700">
className="flex mt-2 text-sm font-medium text-neutral-700">
{t("payment")}
</label>
</div>
<div className="flex flex-col">
<div className="w-full">
<div className="block items-center sm:flex">
<div className="items-center block sm:flex">
<div className="w-full">
<div className="relative flex items-start">
<div className="flex h-5 items-center">
<div className="flex items-center h-5">
<input
onChange={(event) => {
setRequirePayment(event.target.checked);
@ -1247,7 +1248,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
id="requirePayment"
name="requirePayment"
type="checkbox"
className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300"
className="w-4 h-4 border-gray-300 rounded text-primary-600 focus:ring-primary-500"
defaultChecked={requirePayment}
/>
</div>
@ -1270,7 +1271,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
</div>
{requirePayment && (
<div className="w-full">
<div className="block items-center sm:flex">
<div className="items-center block sm:flex">
<div className="w-full">
<div className="relative mt-1 rounded-sm shadow-sm">
<Controller
@ -1284,7 +1285,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
min="0.5"
type="number"
required
className="focus:border-primary-500 focus:ring-primary-500 block w-full rounded-sm border-gray-300 pl-2 pr-12 sm:text-sm"
className="block w-full pl-2 pr-12 border-gray-300 rounded-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
placeholder="Price"
onChange={(e) => {
field.onChange(e.target.valueAsNumber * 100);
@ -1293,7 +1294,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
/>
)}
/>
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
<span className="text-gray-500 sm:text-sm" id="duration">
{new Intl.NumberFormat("en", {
style: "currency",
@ -1318,7 +1319,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
</>
{/* )} */}
</Collapsible>
<div className="mt-4 flex justify-end space-x-2 rtl:space-x-reverse">
<div className="flex justify-end mt-4 space-x-2 rtl:space-x-reverse">
<Button href="/event-types" color="secondary" tabIndex={-1}>
{t("cancel")}
</Button>
@ -1351,8 +1352,8 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
href={permalink}
target="_blank"
rel="noreferrer"
className="text-md inline-flex items-center rounded-sm px-2 py-1 text-sm font-medium text-neutral-700 hover:bg-gray-200 hover:text-gray-900">
<ExternalLinkIcon className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" aria-hidden="true" />
className="inline-flex items-center px-2 py-1 text-sm font-medium rounded-sm text-md text-neutral-700 hover:bg-gray-200 hover:text-gray-900">
<ExternalLinkIcon className="w-4 h-4 text-neutral-500 ltr:mr-2 rtl:ml-2" aria-hidden="true" />
{t("preview")}
</a>
<button
@ -1361,13 +1362,13 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
showToast("Link copied!", "success");
}}
type="button"
className="text-md flex items-center rounded-sm px-2 py-1 text-sm font-medium text-gray-700 hover:bg-gray-200 hover:text-gray-900">
<LinkIcon className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
className="flex items-center px-2 py-1 text-sm font-medium text-gray-700 rounded-sm text-md hover:bg-gray-200 hover:text-gray-900">
<LinkIcon className="w-4 h-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
{t("copy_link")}
</button>
<Dialog>
<DialogTrigger className="text-md flex items-center rounded-sm px-2 py-1 text-sm font-medium text-neutral-700 hover:bg-gray-200 hover:text-gray-900">
<TrashIcon className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
<DialogTrigger className="flex items-center px-2 py-1 text-sm font-medium rounded-sm text-md text-neutral-700 hover:bg-gray-200 hover:text-gray-900">
<TrashIcon className="w-4 h-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
{t("delete")}
</DialogTrigger>
<ConfirmationDialogContent
@ -1383,10 +1384,10 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
</div>
<Dialog open={showLocationModal} onOpenChange={setShowLocationModal}>
<DialogContent asChild>
<div className="inline-block transform rounded-sm bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
<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:w-full sm:max-w-lg sm:p-6 sm:align-middle">
<div className="mb-4 sm:flex sm:items-start">
<div className="bg-secondary-100 mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
<LocationMarkerIcon className="text-primary-600 h-6 w-6" />
<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" />
</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">
@ -1437,7 +1438,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
options={locationOptions}
isSearchable={false}
classNamePrefix="react-select"
className="react-select-container focus:border-primary-500 focus:ring-primary-500 my-4 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 sm:text-sm"
className="flex-1 block w-full min-w-0 my-4 border border-gray-300 rounded-sm react-select-container focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
onChange={(val) => {
if (val) {
locationFormMethods.setValue("locationType", val.value);
@ -1448,7 +1449,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
)}
/>
<LocationOptions />
<div className="mt-4 flex justify-end space-x-2">
<div className="flex justify-end mt-4 space-x-2">
<Button onClick={() => setShowLocationModal(false)} type="button" color="secondary">
{t("cancel")}
</Button>
@ -1465,10 +1466,10 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
render={() => (
<Dialog open={selectedCustomInputModalOpen} onOpenChange={setSelectedCustomInputModalOpen}>
<DialogContent asChild>
<div className="inline-block transform rounded-sm bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
<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:w-full sm:max-w-lg sm:p-6 sm:align-middle">
<div className="mb-4 sm:flex sm:items-start">
<div className="bg-secondary-100 mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
<PlusIcon className="text-primary-600 h-6 w-6" />
<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" />
</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">