From a9b18496e070dfb793f6870fe116c500bc45961d Mon Sep 17 00:00:00 2001 From: Nafees Nazik <84864519+G3root@users.noreply.github.com> Date: Wed, 12 Oct 2022 14:09:14 +0530 Subject: [PATCH] refactor: left booking information box component (#4251) Co-authored-by: Peer Richelsen Co-authored-by: Jeroen Reumkens --- .../components/booking/BookingDescription.tsx | 106 ++++++++++++++++++ .../booking/pages/AvailabilityPage.tsx | 39 +------ .../components/booking/pages/BookingPage.tsx | 38 +------ yarn.lock | 45 ++++++++ 4 files changed, 157 insertions(+), 71 deletions(-) create mode 100644 apps/web/components/booking/BookingDescription.tsx diff --git a/apps/web/components/booking/BookingDescription.tsx b/apps/web/components/booking/BookingDescription.tsx new file mode 100644 index 0000000000..50f875ac8c --- /dev/null +++ b/apps/web/components/booking/BookingDescription.tsx @@ -0,0 +1,106 @@ +import { SchedulingType } from "@prisma/client"; +import { FC, ReactNode } from "react"; + +import { classNames } from "@calcom/lib"; +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import { Icon } from "@calcom/ui/Icon"; + +import { UserAvatars } from "@components/booking/UserAvatars"; +import EventTypeDescriptionSafeHTML from "@components/eventtype/EventTypeDescriptionSafeHTML"; + +import type { AvailabilityPageProps } from "../../pages/[user]/[type]"; +import type { BookPageProps } from "../../pages/[user]/book"; +import type { DynamicAvailabilityPageProps } from "../../pages/d/[link]/[slug]"; +import type { HashLinkPageProps } from "../../pages/d/[link]/book"; +import type { AvailabilityTeamPageProps } from "../../pages/team/[slug]/[type]"; +import type { TeamBookingPageProps } from "../../pages/team/[slug]/book"; +import { AvailableEventLocations } from "./AvailableEventLocations"; + +interface Props { + profile: + | AvailabilityPageProps["profile"] + | HashLinkPageProps["profile"] + | TeamBookingPageProps["profile"] + | BookPageProps["profile"] + | AvailabilityTeamPageProps["profile"] + | DynamicAvailabilityPageProps["profile"]; + eventType: + | AvailabilityPageProps["eventType"] + | HashLinkPageProps["eventType"] + | TeamBookingPageProps["eventType"] + | BookPageProps["eventType"] + | AvailabilityTeamPageProps["eventType"] + | DynamicAvailabilityPageProps["eventType"]; + isBookingPage?: boolean; + children: ReactNode; + isMobile?: boolean; +} + +const BookingDescription: FC = (props) => { + const { profile, eventType, isBookingPage = false, children } = props; + const { t } = useLocale(); + return ( + <> + +

+ {profile.name} +

+

+ {eventType.title} +

+
+ {eventType?.description && ( +
+
+ +
+ +
+ )} + {eventType?.requiresConfirmation && ( +
+
+ +
+ {t("requires_confirmation")} +
+ )} + {!isBookingPage ? ( + + ) : null} +

+ + {eventType.length} {t("minutes")} +

+ {children} +
+ + ); +}; + +export default BookingDescription; diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx index c1a4219d14..3ab973a2f7 100644 --- a/apps/web/components/booking/pages/AvailabilityPage.tsx +++ b/apps/web/components/booking/pages/AvailabilityPage.tsx @@ -37,6 +37,7 @@ import { isBrandingHidden } from "@lib/isBrandingHidden"; import Gates, { Gate, GateState } from "@components/Gates"; import AvailableTimes from "@components/booking/AvailableTimes"; +import BookingDescription from "@components/booking/BookingDescription"; import TimeOptions from "@components/booking/TimeOptions"; import { UserAvatars } from "@components/booking/UserAvatars"; import EventTypeDescriptionSafeHTML from "@components/eventtype/EventTypeDescriptionSafeHTML"; @@ -415,41 +416,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => { "min-w-full md:w-[280px] md:min-w-[280px]", recurringEventCount && "xl:w-[380px] xl:min-w-[380px]" )}> - -

- {profile.name} -

-

- {eventType.title} -

-
- {eventType?.description && ( -
-
- -
- -
- )} - {eventType?.requiresConfirmation && ( -
-
- -
- {t("requires_confirmation")} -
- )} - -

- - {eventType.length} {t("minutes")} -

+ {!rescheduleUid && eventType.recurringEvent && (
@@ -488,7 +455,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {

)} {timezoneDropdown} -
+ {!isEmbed && (
diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx index d0ef0705f1..6f920aefac 100644 --- a/apps/web/components/booking/pages/BookingPage.tsx +++ b/apps/web/components/booking/pages/BookingPage.tsx @@ -49,6 +49,7 @@ import { parseDate, parseRecurringDates } from "@lib/parseDate"; import slugify from "@lib/slugify"; import Gates, { Gate, GateState } from "@components/Gates"; +import BookingDescription from "@components/booking/BookingDescription"; import { UserAvatars } from "@components/booking/UserAvatars"; import EventTypeDescriptionSafeHTML from "@components/eventtype/EventTypeDescriptionSafeHTML"; @@ -450,40 +451,7 @@ const BookingPage = ({ )}>
- -

- {profile.name} -

-

- {eventType.title} -

-
- {eventType?.description && ( -
-
- -
- -
- )} - {eventType?.requiresConfirmation && ( -
-
- -
- {t("requires_confirmation")} -
- )} -

- - {eventType.length} {t("minutes")} -

+ {eventType.price > 0 && (

@@ -559,7 +527,7 @@ const BookingPage = ({

)} -
+
diff --git a/yarn.lock b/yarn.lock index c0e3ba493a..44ce6848c7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4549,6 +4549,24 @@ aria-hidden "^1.1.1" react-remove-scroll "^2.4.0" +"@radix-ui/react-slider@^0.1.1": + version "0.1.4" + resolved "https://registry.yarnpkg.com/@radix-ui/react-slider/-/react-slider-0.1.4.tgz#a7b7a480ee00158195794b08cd3f1583cf102518" + integrity sha512-0z3bCcdrAi+FIcoLXS6r0ESVWuuyMnUJoCsFm7tC7Rtv95x34YtaI8YfSyQmzuMVS4rTsNtCCTZ/s727uRaVkQ== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/number" "0.1.0" + "@radix-ui/primitive" "0.1.0" + "@radix-ui/react-collection" "0.1.4" + "@radix-ui/react-compose-refs" "0.1.0" + "@radix-ui/react-context" "0.1.1" + "@radix-ui/react-primitive" "0.1.4" + "@radix-ui/react-use-controllable-state" "0.1.0" + "@radix-ui/react-use-direction" "0.1.0" + "@radix-ui/react-use-layout-effect" "0.1.0" + "@radix-ui/react-use-previous" "0.1.1" + "@radix-ui/react-use-size" "0.1.1" + "@radix-ui/react-slider@^1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@radix-ui/react-slider/-/react-slider-1.0.0.tgz#4cabadd243aa088eb45ac710cd7cdc518fafb07e" @@ -4694,6 +4712,13 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-use-callback-ref" "1.0.0" +"@radix-ui/react-use-direction@0.1.0": + version "0.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-direction/-/react-use-direction-0.1.0.tgz#97ac1d52e497c974389e7988f809238ed72e7df7" + integrity sha512-NajpY/An9TCPSfOVkgWIdXJV+VuWl67PxB6kOKYmtNAFHvObzIoh8o0n9sAuwSAyFCZVq211FEf9gvVDRhOyiA== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-use-escape-keydown@0.1.0": version "0.1.0" resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-0.1.0.tgz#dc80cb3753e9d1bd992adbad9a149fb6ea941874" @@ -4746,6 +4771,13 @@ "@babel/runtime" "^7.13.10" "@radix-ui/rect" "1.0.0" +"@radix-ui/react-use-size@0.1.1": + version "0.1.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-0.1.1.tgz#f6b75272a5d41c3089ca78c8a2e48e5f204ef90f" + integrity sha512-pTgWM5qKBu6C7kfKxrKPoBI2zZYZmp2cSXzpUiGM3qEBQlMLtYhaY2JXdXUCxz+XmD1YEjc8oRwvyfsD4AG4WA== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-use-size@1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-1.0.0.tgz#a0b455ac826749419f6354dc733e2ca465054771" @@ -6257,6 +6289,11 @@ lodash.isplainobject "^4.0.6" lodash.merge "^4.6.2" +"@tanstack/query-core@4.10.3": + version "4.10.3" + resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.10.3.tgz#a6477bab9ed1ae4561ca0a59ae06f8c615c692b7" + integrity sha512-+ME02sUmBfx3Pjd+0XtEthK8/4rVMD2jcxvnW9DSgFONpKtpjzfRzjY4ykzpDw1QEo2eoPvl7NS8J5mNI199aA== + "@tanstack/query-core@4.2.3": version "4.2.3" resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.2.3.tgz#52d75430c9662cc85c160761c1421de483c7791f" @@ -6286,6 +6323,14 @@ "@types/use-sync-external-store" "^0.0.3" use-sync-external-store "^1.2.0" +"@tanstack/react-query@^4.2.3": + version "4.10.3" + resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.10.3.tgz#294deefa0fb6ada88bc4631d346ef5d5551c5443" + integrity sha512-4OEJjkcsCTmG3ui7RjsVzsXerWQvInTe95CBKFyOV/GchMUlNztoFnnYmlMhX7hLUqJMhbG9l7M507V7+xU8Hw== + dependencies: + "@tanstack/query-core" "4.10.3" + use-sync-external-store "^1.2.0" + "@tanstack/react-query@^4.3.9": version "4.3.9" resolved "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.3.9.tgz#13332a1d4dd404baec24c2853883bcb3cc61ea92"