Skip to content

Commit

Permalink
Feature/booking page refactor (calcom#3035)
Browse files Browse the repository at this point in the history 
* Extracted UI related logic on the DatePicker, stripped out all logic

* wip

* fixed small regression due to merge

* Fix alignment of the chevrons

* Added isToday dot, added onMonthChange so we can fetch this month slots

* Added includedDates to inverse excludedDates

* removed trpcState

* Improvements to the state

* All params are now dynamic

* This builds the flat map so not all paths block on every new build

* Added requiresConfirmation

* Correctly take into account getFilteredTimes to make the calendar function

* Rewritten team availability, seems to work

* Circumvent i18n flicker by showing the loader instead

* 'You can remove this code. Its not being used now' - Hariom

* Nailed a persistent little bug, new Date() caused the current day to flicker on and off

* TS fixes

* Fix some eventType details in AvailableTimes

* '5 / 6 Seats Available' instead of '6 / Seats Available'

* More type fixes

* Removed unrelated merge artifact

* Use WEBAPP_URL instead of hardcoded

* Next round of TS fixes

* I believe this was mistyped

* Temporarily disabled rescheduling 'this is when you originally scheduled', so removed dep

* Sorting some dead code

* This page has a lot of red, not all related to this PR

* A PR to your PR (calcom#3067)

* Cleanup

* Cleanup

* Uses zod to parse params

* Type fixes

* Fixes ISR

* E2E fixes

* Disabled dynamic bookings until post v1.7

* More test fixes

* Fixed border position (transparent border) to prevent dot from jumping - and possibly fix spacing

* Disabled style nitpicks

* Delete useSlots.ts

Removed early design artifact

* Unlock DatePicker locale

* Adds mini spinner to DatePicker

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: zomars <zomars@me.com>
  • Loading branch information
@emrysal @PeerRich
@kodiakhq @zomars
4 people committed Jun 15, 2022
1 parent 6959eb2 commit e9f3248
Show file tree
Hide file tree
Showing 21 changed files with 1,044 additions and 565 deletions.
60 changes: 11 additions & 49 deletions apps/web/components/booking/AvailableTimes.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,66 +1,44 @@
import { ExclamationIcon } from "@heroicons/react/solid";
import { SchedulingType } from "@prisma/client";
import dayjs, { Dayjs } from "dayjs";
import Link from "next/link";
import { useRouter } from "next/router";
import React, { FC, useEffect, useState } from "react";
import { FC, useEffect, useState } from "react";

import { useLocale } from "@calcom/lib/hooks/useLocale";
import { nameOfDay } from "@calcom/lib/weekday";

import classNames from "@lib/classNames";
import { timeZone } from "@lib/clock";
import { useLocale } from "@lib/hooks/useLocale";
import { useSlots } from "@lib/hooks/useSlots";

import Loader from "@components/Loader";
import type { Slot } from "@server/routers/viewer/slots";

type AvailableTimesProps = {
timeFormat: string;
minimumBookingNotice: number;
beforeBufferTime: number;
afterBufferTime: number;
eventTypeId: number;
eventLength: number;
recurringCount: number | undefined;
eventTypeSlug: string;
slotInterval: number | null;
date: Dayjs;
users: {
username: string | null;
}[];
schedulingType: SchedulingType | null;
seatsPerTimeSlot?: number | null;
slots?: Slot[];
};

const AvailableTimes: FC<AvailableTimesProps> = ({
slots = [],
date,
eventLength,
eventTypeId,
eventTypeSlug,
slotInterval,
minimumBookingNotice,
recurringCount,
timeFormat,
users,
schedulingType,
beforeBufferTime,
afterBufferTime,
seatsPerTimeSlot,
}) => {
const { t, i18n } = useLocale();
const router = useRouter();
const { rescheduleUid } = router.query;
const { slots, loading, error } = useSlots({
date,
slotInterval,
eventLength,
schedulingType,
users,
minimumBookingNotice,
beforeBufferTime,
afterBufferTime,
eventTypeId,
});

const [brand, setBrand] = useState("#292929");

Expand All @@ -80,8 +58,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
</span>
</div>
<div className="flex-grow overflow-y-auto md:h-[364px]">
{!loading &&
slots?.length > 0 &&
{slots?.length > 0 &&
slots.map((slot) => {
type BookingURL = {
pathname: string;
Expand All @@ -91,7 +68,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
pathname: "book",
query: {
...router.query,
date: slot.time.format(),
date: dayjs(slot.time).format(),
type: eventTypeId,
slug: eventTypeSlug,
/** Treat as recurring only when a count exist and it's not a rescheduling workflow */
Expand All @@ -113,15 +90,15 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
}

return (
<div key={slot.time.format()}>
<div key={dayjs(slot.time).format()}>
{/* Current there is no way to disable Next.js Links */}
{seatsPerTimeSlot && slot.attendees && slot.attendees >= seatsPerTimeSlot ? (
<div
className={classNames(
"text-primary-500 mb-2 block rounded-sm border bg-white py-4 font-medium opacity-25 dark:border-transparent dark:bg-gray-600 dark:text-neutral-200 ",
brand === "#fff" || brand === "#ffffff" ? "border-brandcontrast" : "border-brand"
)}>
{slot.time.format(timeFormat)}
{dayjs(slot.time).tz(timeZone()).format(timeFormat)}
{!!seatsPerTimeSlot && <p className={`text-sm`}>{t("booking_full")}</p>}
</div>
) : (
Expand All @@ -132,7 +109,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
brand === "#fff" || brand === "#ffffff" ? "border-brandcontrast" : "border-brand"
)}
data-testid="time">
{dayjs.tz(slot.time, timeZone()).format(timeFormat)}
{dayjs(slot.time).tz(timeZone()).format(timeFormat)}
{!!seatsPerTimeSlot && (
<p
className={`${
Expand All @@ -152,26 +129,11 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
</div>
);
})}
{!loading && !error && !slots.length && (
{!slots.length && (
<div className="-mt-4 flex h-full w-full flex-col content-center items-center justify-center">
<h1 className="my-6 text-xl text-black dark:text-white">{t("all_booked_today")}</h1>
</div>
)}

{loading && <Loader />}

{error && (
<div className="border-l-4 border-yellow-400 bg-yellow-50 p-4">
<div className="flex">
<div className="flex-shrink-0">
<ExclamationIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
</div>
<div className="ltr:ml-3 rtl:mr-3">
<p className="text-sm text-yellow-700">{t("slots_load_fail")}</p>
</div>
</div>
</div>
)}
</div>
</div>
);
Expand Down
10 changes: 2 additions & 8 deletions apps/web/components/booking/DatePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -249,15 +249,9 @@ function DatePicker({
day.disabled ? { ...disabledDateButtonEmbedStyles } : { ...enabledDateButtonEmbedStyles }
}
className={classNames(
"absolute top-0 left-0 right-0 bottom-0 mx-auto w-full rounded-sm text-center",
"hover:border-brand hover:border dark:hover:border-white",
day.disabled
? "text-bookinglighter cursor-default font-light hover:border-0"
: "font-medium",
"hover:border-brand disabled:text-bookinglighter absolute top-0 left-0 right-0 bottom-0 mx-auto w-full rounded-sm text-center font-medium hover:border disabled:cursor-default disabled:font-light disabled:hover:border-0 dark:hover:border-white",
date && date.isSame(browsingDate.date(day.date), "day")
? "bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast"
: !day.disabled
? " bg-gray-100 dark:bg-gray-600 dark:text-white"
? "bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast disabled:bg-gray-100 disabled:dark:bg-gray-600 disabled:dark:text-white"
: ""
)}
data-testid="day"
Expand Down

0 comments on commit e9f3248

Please sign in to comment.