mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

Set buffer time before/after event type (#2015)

Browse source 
* before and after buffer added to handleAvailableSlots function

* --WIP

* added migration

* pull buffer data from DB

* cleanup

* added buffer input in form

* removed unused functions in controller field

* improved the buffer time check

* fixed default value and added preceding event afterbuffer consideration

* fixed e2e test issue

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
This commit is contained in:
Syed Ali Shahbaz 2022-03-04 15:49:03 +05:30 committed by GitHub
parent b77923fc65
commit eeb0cd7e4d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 164 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
apps/web/components/booking/AvailableTimes.tsx
View file

@ -14,6 +14,8 @@ import Loader from "@components/Loader";
type AvailableTimesProps = {
timeFormat: string;
minimumBookingNotice: number;
beforeBufferTime: number;
afterBufferTime: number;
eventTypeId: number;
eventLength: number;
slotInterval: number | null;
@ -33,6 +35,8 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
timeFormat,
users,
schedulingType,
beforeBufferTime,
afterBufferTime,
}) => {
const { t, i18n } = useLocale();
const router = useRouter();
@ -45,6 +49,8 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
schedulingType,
users,
minimumBookingNotice,
beforeBufferTime,
afterBufferTime,
eventTypeId,
});

2
apps/web/components/booking/pages/AvailabilityPage.tsx
View file

@ -241,6 +241,8 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: Props) => {
date={selectedDate}
users={eventType.users}
schedulingType={eventType.schedulingType ?? null}
beforeBufferTime={eventType.beforeEventBuffer}
afterBufferTime={eventType.afterEventBuffer}
/>
)}
</div>

36
apps/web/lib/hooks/useSlots.ts
View file

@ -30,10 +30,21 @@ type UseSlotsProps = {
date: Dayjs;
users: { username: string | null }[];
schedulingType: SchedulingType | null;
beforeBufferTime?: number;
afterBufferTime?: number;
};
export const useSlots = (props: UseSlotsProps) => {
const { slotInterval, eventLength, minimumBookingNotice = 0, date, users, eventTypeId } = props;
const {
slotInterval,
eventLength,
minimumBookingNotice = 0,
beforeBufferTime = 0,
afterBufferTime = 0,
date,
users,
eventTypeId,
} = props;
const [slots, setSlots] = useState<Slot[]>([]);
const [loading, setLoading] = useState<boolean>(false);
const [error, setError] = useState<Error | null>(null);
@ -124,6 +135,29 @@ export const useSlots = (props: UseSlotsProps) => {
// Check if startTime is between slot
else if (startTime.isBetween(times[i], times[i].add(eventLength, "minutes"))) {
times.splice(i, 1);
}
// Check if time is between afterBufferTime and beforeBufferTime
else if (
times[i].isBetween(
startTime.subtract(beforeBufferTime, "minutes"),
endTime.add(afterBufferTime, "minutes")
)
) {
times.splice(i, 1);
}
// considering preceding event's after buffer time
else if (
i > 0 &&
times[i - 1]
.add(eventLength + afterBufferTime, "minutes")
.isBetween(
startTime.subtract(beforeBufferTime, "minutes"),
endTime.add(afterBufferTime, "minutes"),
null,
"[)"
)
) {
times.splice(i, 1);
} else {
return true;
}

2
apps/web/lib/types/event-type.ts
View file

@ -14,6 +14,8 @@ export type AdvancedOptions = {
requiresConfirmation?: boolean;
disableGuests?: boolean;
minimumBookingNotice?: number;
beforeBufferTime?: number;
afterBufferTime?: number;
slotInterval?: number | null;
price?: number;
currency?: string;

2
apps/web/pages/[user]/[type].tsx
View file

@ -44,6 +44,8 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
periodCountCalendarDays: true,
schedulingType: true,
minimumBookingNotice: true,
beforeEventBuffer: true,
afterEventBuffer: true,
timeZone: true,
metadata: true,
slotInterval: true,

107
apps/web/pages/event-types/[type].tsx
View file

@ -364,6 +364,8 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
periodCountCalendarDays: "1" | "0";
periodDates: { startDate: Date; endDate: Date };
minimumBookingNotice: number;
beforeBufferTime: number;
afterBufferTime: number;
slotInterval: number | null;
destinationCalendar: {
integration: string;
@ -683,7 +685,14 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
<Form
form={formMethods}
handleSubmit={async (values) => {
const { periodDates, periodCountCalendarDays, smartContractAddress, ...input } = values;
const {
periodDates,
periodCountCalendarDays,
smartContractAddress,
beforeBufferTime,
afterBufferTime,
...input
} = values;
updateMutation.mutate({
...input,
availability: availabilityState,
@ -691,6 +700,8 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
periodEndDate: periodDates.endDate,
periodCountCalendarDays: periodCountCalendarDays === "1",
id: eventType.id,
beforeEventBuffer: beforeBufferTime,
afterEventBuffer: afterBufferTime,
metadata: smartContractAddress
? {
smartContractAddress,
@ -1189,6 +1200,98 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
/>
</div>
</div>
<hr className="border-neutral-200" />
<div className="block sm:flex">
<div className="min-w-48 mb-4 sm:mb-0">
<label
htmlFor="bufferTime"
className="mt-2.5 flex text-sm font-medium text-neutral-700">
{t("buffer_time")}
</label>
</div>
<div className="w-full">
<div className="inline-flex w-full space-x-2">
<div className="w-full">
<label
htmlFor="beforeBufferTime"
className="mb-2 flex text-sm font-medium text-neutral-700">
{t("before_event")}
</label>
<Controller
name="beforeBufferTime"
control={formMethods.control}
defaultValue={eventType.beforeEventBuffer || 0}
render={({ field: { onChange, value } }) => {
const beforeBufferOptions = [
{
label: t("event_buffer_default"),
value: 0,
},
...[5, 10, 15, 20, 30, 45, 60].map((minutes) => ({
label: minutes + " " + t("minutes"),
value: minutes,
})),
];
return (
<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"
onChange={(val) => {
if (val) onChange(val.value);
}}
defaultValue={
beforeBufferOptions.find((option) => option.value === value) ||
beforeBufferOptions[0]
}
options={beforeBufferOptions}
/>
);
}}
/>
</div>
<div className="w-full">
<label
htmlFor="afterBufferTime"
className="mb-2 flex text-sm font-medium text-neutral-700">
{t("after_event")}
</label>
<Controller
name="afterBufferTime"
control={formMethods.control}
defaultValue={eventType.afterEventBuffer || 0}
render={({ field: { onChange, value } }) => {
const afterBufferOptions = [
{
label: t("event_buffer_default"),
value: 0,
},
...[5, 10, 15, 20, 30, 45, 60].map((minutes) => ({
label: minutes + " " + t("minutes"),
value: minutes,
})),
];
return (
<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"
onChange={(val) => {
if (val) onChange(val.value);
}}
defaultValue={
afterBufferOptions.find((option) => option.value === value) ||
afterBufferOptions[0]
}
options={afterBufferOptions}
/>
);
}}
/>
</div>
</div>
</div>
</div>
<hr className="border-neutral-200" />
<div className="block sm:flex">
@ -1618,6 +1721,8 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
requiresConfirmation: true,
disableGuests: true,
minimumBookingNotice: true,
beforeEventBuffer: true,
afterEventBuffer: true,
slotInterval: true,
team: {
select: {

2
apps/web/pages/team/[slug]/[type].tsx
View file

@ -61,6 +61,8 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
periodDays: true,
periodCountCalendarDays: true,
minimumBookingNotice: true,
beforeEventBuffer: true,
afterEventBuffer: true,
price: true,
currency: true,
timeZone: true,

4
apps/web/public/static/locales/en/common.json
View file

@ -284,6 +284,10 @@
"hover_over_bold_times_tip": "Tip: Hover over the bold times for a full timestamp",
"start_time": "Start time",
"end_time": "End time",
"buffer_time": "Buffer time",
"before_event": "Before event",
"after_event": "After event",
"event_buffer_default": "No buffer time",
"buffer": "Buffer",
"your_day_starts_at": "Your day starts at",
"your_day_ends_at": "Your day ends at",

3
packages/prisma/migrations/20220302035831_add_before_and_after_event_buffer/migration.sql Normal file
View file

@ -0,0 +1,3 @@
-- AlterTable
ALTER TABLE "EventType" ADD COLUMN "afterEventBuffer" INTEGER NOT NULL DEFAULT 0,
ADD COLUMN "beforeEventBuffer" INTEGER NOT NULL DEFAULT 0;

2
packages/prisma/schema.prisma
View file

@ -59,6 +59,8 @@ model EventType {
requiresConfirmation Boolean @default(false)
disableGuests Boolean @default(false)
minimumBookingNotice Int @default(120)
beforeEventBuffer Int @default(0)
afterEventBuffer Int @default(0)
schedulingType SchedulingType?
Schedule Schedule[]
price Int @default(0)