diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index d9196af764..d9b9200a9a 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/apps/web/public/static/locales/en/common.json @@ -465,7 +465,7 @@ "friday": "Friday", "saturday": "Saturday", "sunday": "Sunday", - "all_booked_today": "All booked today.", + "all_booked_today": "All booked.", "slots_load_fail": "Could not load the available time slots.", "additional_guests": "Add guests", "your_name": "Your name", diff --git a/packages/app-store/metapixel/config.json b/packages/app-store/metapixel/config.json index 28256d7301..7edc9dacb1 100644 --- a/packages/app-store/metapixel/config.json +++ b/packages/app-store/metapixel/config.json @@ -5,9 +5,7 @@ "logo": "icon.svg", "url": "https://developers.facebook.com/docs/metapixel/", "variant": "analytics", - "categories": [ - "analytics" - ], + "categories": ["analytics"], "publisher": "regexyl", "email": "info@regexyl.com", "description": "Add Meta Pixel to your bookings page to measure, optimize and build audiences for your ad campaigns.", @@ -24,4 +22,4 @@ ] } } -} \ No newline at end of file +} diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx index c64792097c..d9089e03c8 100644 --- a/packages/features/bookings/Booker/Booker.tsx +++ b/packages/features/bookings/Booker/Booker.tsx @@ -1,4 +1,3 @@ -import type { MotionStyle } from "framer-motion"; import { LazyMotion, domAnimation, m, AnimatePresence } from "framer-motion"; import { useCallback, useEffect, useRef } from "react"; import StickyBox from "react-sticky-box"; @@ -20,13 +19,11 @@ import { EventMeta } from "./components/EventMeta"; import { LargeCalendar } from "./components/LargeCalendar"; import { LargeViewHeader } from "./components/LargeViewHeader"; import { BookerSection } from "./components/Section"; -import { fadeInUp, fadeInLeft, resizeAnimationConfig } from "./config"; +import { fadeInLeft, resizeAnimationConfig } from "./config"; import { useBookerStore, useInitializeBookerStore } from "./store"; import type { BookerLayout, BookerProps } from "./types"; import { useEvent } from "./utils/event"; -const LargeLayouts = ["large_calendar", "large_timeslots"]; - const useBrandColors = ({ brandColor, darkBrandColor }: { brandColor?: string; darkBrandColor?: string }) => { const brandTheme = useGetBrandingColours({ lightVal: brandColor, @@ -46,10 +43,7 @@ const BookerComponent = ({ username, eventSlug, month, rescheduleBooking }: Book const event = useEvent(); const [layout, setLayout] = useBookerStore((state) => [state.layout, state.setLayout], shallow); const [bookerState, setBookerState] = useBookerStore((state) => [state.state, state.setState], shallow); - const [selectedDate, setSelectedDate] = useBookerStore( - (state) => [state.selectedDate, state.setSelectedDate], - shallow - ); + const selectedDate = useBookerStore((state) => state.selectedDate); const [selectedTimeslot, setSelectedTimeslot] = useBookerStore( (state) => [state.selectedTimeslot, state.setSelectedTimeslot], shallow @@ -124,27 +118,23 @@ const BookerComponent = ({ username, eventSlug, month, rescheduleBooking }: Book )}
- {layout !== "small_calendar" && !(layout === "mobile" && bookerState === "booking") && ( -
+
)} @@ -154,8 +144,8 @@ const BookerComponent = ({ username, eventSlug, month, rescheduleBooking }: Book setSelectedTimeslot(null)} /> @@ -164,9 +154,9 @@ const BookerComponent = ({ username, eventSlug, month, rescheduleBooking }: Book key="datepicker" area="main" visible={bookerState !== "booking" && layout === "small_calendar"} - {...fadeInUp} + {...fadeInLeft} initial="visible" - className="md:border-subtle ml-[-1px] h-full flex-shrink p-6 md:border-l lg:w-[var(--booker-main-width)]"> + className="md:border-subtle ml-[-1px] h-full flex-shrink p-5 md:border-l lg:w-[var(--booker-main-width)]"> @@ -178,7 +168,7 @@ const BookerComponent = ({ username, eventSlug, month, rescheduleBooking }: Book (bookerState === "selecting_date" || bookerState === "selecting_time") } className="border-muted sticky top-0 ml-[-1px] h-full md:border-l" - {...fadeInUp}> + {...fadeInLeft}> @@ -190,8 +180,9 @@ const BookerComponent = ({ username, eventSlug, month, rescheduleBooking }: Book layout === "large_timeslots" } className={classNames( - "border-subtle flex h-full w-full flex-col p-6 pb-0 md:border-l", - layout === "small_calendar" && "h-full overflow-auto md:w-[var(--booker-timeslots-width)]", + "border-subtle flex h-full w-full flex-col p-5 pb-0 md:border-l", + layout === "small_calendar" && + "scroll-bar h-full overflow-auto md:w-[var(--booker-timeslots-width)]", layout !== "small_calendar" && "sticky top-0" )} ref={timeslotsRef} @@ -204,7 +195,7 @@ const BookerComponent = ({ username, eventSlug, month, rescheduleBooking }: Book /> - +
{schedule.isLoading ? // Shows exact amount of days as skeleton. diff --git a/packages/features/bookings/Booker/components/DatePicker.tsx b/packages/features/bookings/Booker/components/DatePicker.tsx index e0679b73f6..a61c15142e 100644 --- a/packages/features/bookings/Booker/components/DatePicker.tsx +++ b/packages/features/bookings/Booker/components/DatePicker.tsx @@ -33,22 +33,20 @@ export const DatePicker = () => { if (!isLoadedClientSide) return null; return ( -
- { - setSelectedDate(date.format("YYYY-MM-DD")); - }} - onMonthChange={(date: Dayjs) => { - setMonth(date.format("YYYY-MM")); - setSelectedDate(date.format("YYYY-MM-DD")); - }} - includedDates={nonEmptyScheduleDays} - locale={i18n.language} - browsingDate={month ? dayjs(month) : undefined} - selected={dayjs(selectedDate)} - weekStart={weekdayToWeekIndex(event?.data?.users?.[0]?.weekStart)} - /> -
+ { + setSelectedDate(date.format("YYYY-MM-DD")); + }} + onMonthChange={(date: Dayjs) => { + setMonth(date.format("YYYY-MM")); + setSelectedDate(date.format("YYYY-MM-DD")); + }} + includedDates={nonEmptyScheduleDays} + locale={i18n.language} + browsingDate={month ? dayjs(month) : undefined} + selected={dayjs(selectedDate)} + weekStart={weekdayToWeekIndex(event?.data?.users?.[0]?.weekStart)} + /> ); }; diff --git a/packages/features/bookings/Booker/components/EventMeta.tsx b/packages/features/bookings/Booker/components/EventMeta.tsx index b2b05f5856..59b9dd35e3 100644 --- a/packages/features/bookings/Booker/components/EventMeta.tsx +++ b/packages/features/bookings/Booker/components/EventMeta.tsx @@ -36,7 +36,7 @@ export const EventMeta = () => { {event?.title} -
+
{rescheduleBooking && ( {t("former_time")} @@ -65,13 +65,13 @@ export const EventMeta = () => { )} {bookerState === "booking" ? ( <>{timezone} ) : ( - + -
+
{nameOfDay(i18n.language, Number(date.format("d")), "short")} @@ -78,7 +78,7 @@ export const AvailableTimes = ({ data-testid="time" data-time={slot.time} onClick={() => onTimeSelect(slot.time)} - className="mb-3 flex h-auto min-h-[44px] w-full flex-col justify-center py-2" + className="mb-2 flex h-auto min-h-9 w-full flex-col justify-center py-2" color="secondary"> {dayjs.utc(slot.time).tz(timezone).format(timeFormat)} {bookingFull &&

{t("booking_full")}

} diff --git a/packages/features/bookings/components/event-meta/Details.tsx b/packages/features/bookings/components/event-meta/Details.tsx index f1e68b0d1c..00ace28243 100644 --- a/packages/features/bookings/components/event-meta/Details.tsx +++ b/packages/features/bookings/components/event-meta/Details.tsx @@ -3,7 +3,7 @@ import React from "react"; import classNames from "@calcom/lib/classNames"; import { useLocale } from "@calcom/lib/hooks/useLocale"; -import { Info, Clock, CheckSquare, RefreshCcw, CreditCard } from "@calcom/ui/components/icon"; +import { Clock, CheckSquare, RefreshCcw, CreditCard } from "@calcom/ui/components/icon"; import type { PublicEvent } from "../../types"; import { EventDetailBlocks } from "../../types"; @@ -31,7 +31,7 @@ type EventDetailCustomBlock = { type EventDetailsProps = EventDetailsPropsBase & (EventDetailDefaultBlock | EventDetailCustomBlock); interface EventMetaProps { - icon: React.FC<{ className: string }> | string; + icon?: React.FC<{ className: string }> | string; children: React.ReactNode; // Emphasises the text in the block. For now only // applying in dark mode. @@ -80,7 +80,7 @@ export const EventMetaBlock = ({ className="mr-2 mt-[2px] h-4 w-4 flex-shrink-0 [filter:invert(0.5)_brightness(0.5)] dark:[filter:invert(1)_brightness(0.9)]" /> ) : ( - + <>{!!Icon && } )}
{children}
@@ -115,7 +115,9 @@ export const EventDetails = ({ event, blocks = defaultEventDetailsBlocks }: Even case EventDetailBlocks.DESCRIPTION: if (!event.description) return null; return ( - +
); diff --git a/packages/features/bookings/components/event-meta/Members.tsx b/packages/features/bookings/components/event-meta/Members.tsx index e416843322..62e6db7477 100644 --- a/packages/features/bookings/components/event-meta/Members.tsx +++ b/packages/features/bookings/components/event-meta/Members.tsx @@ -31,7 +31,7 @@ export const EventMembers = ({ schedulingType, users, profile }: EventMembersPro return ( <> -

+

{users .map((user) => user.name) .filter((name) => name) diff --git a/packages/features/calendars/DatePicker.tsx b/packages/features/calendars/DatePicker.tsx index 7e2e5dcb26..5ef4b0d7d5 100644 --- a/packages/features/calendars/DatePicker.tsx +++ b/packages/features/calendars/DatePicker.tsx @@ -144,7 +144,7 @@ const Days = ({

) : props.isLoading ? (