public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
pull/2022/head
Juan Esteban Nieto Cifuentes 2022-02-21 11:53:16 -05:00 committed by zomars
parent 66cdc01d0b
commit c45da4e3fd
1 changed files with 82 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
apps/web/pages/event-types/[type].tsx
View File

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