fix: location details on new booker (#9710)

* fix: location details on new booker

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* chore

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

---------

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

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 (
       <div key={`${location.type}-${index}`} className="flex flex-row items-center text-sm font-medium">

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<typeof getEventLocationType>,
+  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;
+};

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 (
     <EventMetaBlock icon={MapPin}>
       {locations.length === 1 && (
-        <div key={locations[0].type}>{t(getEventLocationType(locations[0].type)?.label ?? "")}</div>
+        <Tooltip content={getLocationToDisplay(locations[0])}>
+          <div className="" key={locations[0].type}>
+            {getLocationToDisplay(locations[0])}
+          </div>
+        </Tooltip>
       )}
       {locations.length > 1 && (
         <div
@@ -27,7 +39,7 @@ export const EventLocations = ({ event }: { event: PublicEvent }) => {
                 <ul className="list-disc pl-3">
                   {locations.map((location) => (
                     <li key={location.type}>
-                      <span>{t(getEventLocationType(location.type)?.label ?? "")}</span>
+                      <span>{getLocationToDisplay(location)}</span>
                     </li>
                   ))}
                 </ul>