From 39508b3daa15d5724883ae9881237fc8e4a976ab Mon Sep 17 00:00:00 2001 From: "GitStart-Cal.com" <121884634+gitstart-calcom@users.noreply.github.com> Date: Tue, 18 Jul 2023 16:37:39 +0100 Subject: [PATCH] fix: booking page: location icon is not showing up (CALCOM-9951) (#9993) Co-authored-by: gitstart-calcom Co-authored-by: Peer Richelsen --- .../booking/AvailableEventLocations.tsx | 119 ++++++++++++++++++ apps/web/public/static/locales/en/common.json | 1 + packages/app-store/locations.ts | 5 +- .../components/event-meta/Details.tsx | 13 +- 4 files changed, 131 insertions(+), 7 deletions(-) create mode 100644 apps/web/components/booking/AvailableEventLocations.tsx diff --git a/apps/web/components/booking/AvailableEventLocations.tsx b/apps/web/components/booking/AvailableEventLocations.tsx new file mode 100644 index 0000000000..e0c8467275 --- /dev/null +++ b/apps/web/components/booking/AvailableEventLocations.tsx @@ -0,0 +1,119 @@ +import type { + DefaultEventLocationType, + EventLocationTypeFromApp, + LocationObject, +} from "@calcom/app-store/locations"; +import { getEventLocationType, getTranslatedLocation } from "@calcom/app-store/locations"; +import { classNames } from "@calcom/lib"; +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import { Tooltip } from "@calcom/ui"; +import { Link } from "@calcom/ui/components/icon"; + +const excludeNullValues = (value: unknown) => !!value; + +function RenderIcon({ + eventLocationType, + isTooltip, +}: { + eventLocationType: DefaultEventLocationType | EventLocationTypeFromApp; + isTooltip: boolean; +}) { + return ( + {`${eventLocationType.label} + ); +} + +function RenderLocationTooltip({ locations }: { locations: LocationObject[] }) { + const { t } = useLocale(); + + return ( +
+

{t("select_on_next_step")}

+ {locations.map( + ( + location: Pick, "link" | "address"> & + Omit, + index: number + ) => { + const eventLocationType = getEventLocationType(location.type); + if (!eventLocationType) { + return null; + } + const translatedLocation = getTranslatedLocation(location, eventLocationType, t); + return ( +
+ +

{translatedLocation}

+
+ ); + } + )} +
+ ); +} + +export function AvailableEventLocations({ locations }: { locations: LocationObject[] }) { + const { t } = useLocale(); + + const renderLocations = locations.map( + ( + location: Pick, "link" | "address"> & Omit, + index: number + ) => { + const eventLocationType = getEventLocationType(location.type); + if (!eventLocationType) { + // It's possible that the location app got uninstalled + return null; + } + if (eventLocationType.variable === "hostDefault") { + return null; + } + + const translatedLocation = getTranslatedLocation(location, eventLocationType, t); + + return ( +
+ {eventLocationType.iconUrl === "/link.svg" ? ( + + ) : ( + + )} + +

{translatedLocation}

+ +
+ ); + } + ); + + const filteredLocations = renderLocations.filter(excludeNullValues) as JSX.Element[]; + + return filteredLocations.length > 1 ? ( +
+ map-pin + }> +

+ {t("location_options", { + locationCount: filteredLocations.length, + })} +

+ +
+ ) : filteredLocations.length === 1 ? ( +
+ {filteredLocations} +
+ ) : null; +} diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index 73d1de5965..584d556264 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/apps/web/public/static/locales/en/common.json @@ -1941,6 +1941,7 @@ "insights_team_filter": "Team: {{teamName}}", "insights_user_filter": "User: {{userName}}", "insights_subtitle": "View booking insights across your events", + "location_options": "{{locationCount}} location options", "custom_plan": "Custom Plan", "org_team_names_example": "e.g. Marketing Team", "org_team_names_example_1": "e.g. Marketing Team", diff --git a/packages/app-store/locations.ts b/packages/app-store/locations.ts index b72de3fbb8..bb10026bc9 100644 --- a/packages/app-store/locations.ts +++ b/packages/app-store/locations.ts @@ -42,7 +42,10 @@ export type DefaultEventLocationType = { } ); -type EventLocationTypeFromApp = Ensure; +export type EventLocationTypeFromApp = Ensure< + EventLocationTypeFromAppMeta, + "defaultValueVariable" | "variable" +>; export type EventLocationType = DefaultEventLocationType | EventLocationTypeFromApp; diff --git a/packages/features/bookings/components/event-meta/Details.tsx b/packages/features/bookings/components/event-meta/Details.tsx index e84401fdf1..933c54be06 100644 --- a/packages/features/bookings/components/event-meta/Details.tsx +++ b/packages/features/bookings/components/event-meta/Details.tsx @@ -5,11 +5,11 @@ import classNames from "@calcom/lib/classNames"; import getPaymentAppData from "@calcom/lib/getPaymentAppData"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Clock, CheckSquare, RefreshCcw, CreditCard } from "@calcom/ui/components/icon"; +import { AvailableEventLocations } from "@calcom/web/components/booking/AvailableEventLocations"; import type { PublicEvent } from "../../types"; import { EventDetailBlocks } from "../../types"; import { EventDuration } from "./Duration"; -import { EventLocations } from "./Locations"; import { EventOccurences } from "./Occurences"; import { EventPrice } from "./Price"; @@ -63,7 +63,7 @@ export const EventMetaBlock = ({ highlight, contentClassName, className, - isDark + isDark, }: EventMetaProps) => { if (!React.Children.count(children)) return null; @@ -81,9 +81,10 @@ export const EventMetaBlock = ({ // @TODO: Use SVG's instead of images, so we can get rid of the filter. className={classNames( "mr-2 mt-[2px] h-4 w-4 flex-shrink-0", - isDark===undefined && "[filter:invert(0.5)_brightness(0.5)]", - (isDark===undefined || isDark) && "dark:[filter:invert(0.65)_brightness(0.9)]" - )}/> + isDark === undefined && "[filter:invert(0.5)_brightness(0.5)]", + (isDark === undefined || isDark) && "dark:[filter:invert(0.65)_brightness(0.9)]" + )} + /> ) : ( <>{!!Icon && } )} @@ -128,7 +129,7 @@ export const EventDetails = ({ event, blocks = defaultEventDetailsBlocks }: Even if (!event?.locations?.length) return null; return ( - + );