diff --git a/apps/web/components/booking/AvailableEventLocations.tsx b/apps/web/components/booking/AvailableEventLocations.tsx index ce7abf7ba3..5b4cd6a796 100644 --- a/apps/web/components/booking/AvailableEventLocations.tsx +++ b/apps/web/components/booking/AvailableEventLocations.tsx @@ -1,6 +1,4 @@ -import { z } from "zod"; - -import { getEventLocationType, locationKeyToString } 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"; @@ -23,20 +21,7 @@ export function AvailableEventLocations({ locations }: { locations: Props["event return null; } - const translateAbleKeys = [ - "in_person_attendee_address", - "in_person", - "attendee_phone_number", - "link_meeting", - "organizer_phone_number", - ]; - - const locationKey = z.string().default("").parse(locationKeyToString(location)); - const translatedLocation = location.type.startsWith("integrations:") - ? eventLocationType.label - : translateAbleKeys.includes(locationKey) - ? t(locationKey) - : locationKey; + const translatedLocation = getTranslatedLocation(location, eventLocationType, t); return (
diff --git a/packages/app-store/locations.ts b/packages/app-store/locations.ts index 31ae8af722..eee45daf3f 100644 --- a/packages/app-store/locations.ts +++ b/packages/app-store/locations.ts @@ -1,4 +1,5 @@ import type { TFunction } from "next-i18next"; +import { z } from "zod"; import { appStoreMetadata } from "@calcom/app-store/appStoreMetaData"; import logger from "@calcom/lib/logger"; @@ -146,6 +147,14 @@ export const defaultLocations: DefaultEventLocationType[] = [ }, ]; +const translateAbleKeys = [ + "in_person_attendee_address", + "in_person", + "attendee_phone_number", + "link_meeting", + "organizer_phone_number", +]; + export type LocationObject = { type: string; address?: string; @@ -388,3 +397,19 @@ export function getSuccessPageLocationMessage( } return locationToDisplay; } + +export const getTranslatedLocation = ( + location: PrivacyFilteredLocationObject, + eventLocationType: ReturnType, + t: TFunction +) => { + if (!eventLocationType) return null; + const locationKey = z.string().default("").parse(locationKeyToString(location)); + const translatedLocation = location.type.startsWith("integrations:") + ? eventLocationType.label + : translateAbleKeys.includes(locationKey) + ? t(locationKey) + : locationKey; + + return translatedLocation; +}; diff --git a/packages/features/bookings/components/event-meta/Locations.tsx b/packages/features/bookings/components/event-meta/Locations.tsx index 2e6259c899..61b67aa987 100644 --- a/packages/features/bookings/components/event-meta/Locations.tsx +++ b/packages/features/bookings/components/event-meta/Locations.tsx @@ -1,4 +1,4 @@ -import { getEventLocationType } from "@calcom/app-store/locations"; +import { getEventLocationType, getTranslatedLocation } from "@calcom/app-store/locations"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Tooltip } from "@calcom/ui"; import { MapPin } from "@calcom/ui/components/icon"; @@ -9,12 +9,24 @@ import { EventMetaBlock } from "./Details"; export const EventLocations = ({ event }: { event: PublicEvent }) => { const { t } = useLocale(); const locations = event.locations; + if (!locations?.length) return null; + const getLocationToDisplay = (location: PublicEvent["locations"][number]) => { + const eventLocationType = getEventLocationType(location.type); + const translatedLocation = getTranslatedLocation(location, eventLocationType, t); + + return translatedLocation; + }; + return ( {locations.length === 1 && ( -
{t(getEventLocationType(locations[0].type)?.label ?? "")}
+ +
+ {getLocationToDisplay(locations[0])} +
+
)} {locations.length > 1 && (
{
    {locations.map((location) => (
  • - {t(getEventLocationType(location.type)?.label ?? "")} + {getLocationToDisplay(location)}
  • ))}