From bddc235c3c7771a83fcb75ec2b1d66a3a6341bf7 Mon Sep 17 00:00:00 2001
From: Rajiv Sahal <sahalrajiv-extc@atharvacoe.ac.in>
Date: Mon, 27 May 2024 16:32:58 +0530
Subject: [PATCH] fix: platform booker icons and address property for type
 inPerson  (#15207)

* fix: platform booker icons

* fix label not being shown for address

* fix type check

* PR feedback

---------

Co-authored-by: Morgan Vernay <morgan@cal.com>
---
 .../event-meta/AvailableEventLocations.tsx    | 23 ++++++++++++++-----
 .../lib/getLocationOptionsForSelect.ts        |  5 ++--
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx b/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx
index 66370b6d51..16b0d9652f 100644
--- a/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx
+++ b/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx
@@ -22,7 +22,13 @@ function RenderIcon({
   const isPlatform = useIsPlatform();
 
   if (isPlatform) {
-    return <Icon name="video" className="me-[10px] h-4 w-4" />;
+    if (eventLocationType.type === "conferencing") return <Icon name="video" className="me-[10px] h-4 w-4" />;
+    if (eventLocationType.type === "attendeeInPerson" || eventLocationType.type === "inPerson")
+      return <Icon name="map-pin" className="me-[10px] h-4 w-4" />;
+    if (eventLocationType.type === "phone" || eventLocationType.type === "userPhone")
+      return <Icon name="phone" className="me-[10px] h-4 w-4" />;
+    if (eventLocationType.type === "link") return <Icon name="link" className="me-[10px] h-4 w-4" />;
+    return <Icon name="book-user" className="me-[10px] h-4 w-4" />;
   }
 
   return (
@@ -65,6 +71,7 @@ function RenderLocationTooltip({ locations }: { locations: LocationObject[] }) {
 
 export function AvailableEventLocations({ locations }: { locations: LocationObject[] }) {
   const { t } = useLocale();
+  const isPlatform = useIsPlatform();
 
   const renderLocations = locations.map(
     (
@@ -101,11 +108,15 @@ export function AvailableEventLocations({ locations }: { locations: LocationObje
 
   return filteredLocations.length > 1 ? (
     <div className="flex flex-row items-center text-sm font-medium">
-      <img
-        src="/map-pin-dark.svg"
-        className={classNames("me-[10px] h-4 w-4 opacity-70 dark:invert")}
-        alt="map-pin"
-      />
+      {isPlatform ? (
+        <Icon name="map-pin" className={classNames("me-[10px] h-4 w-4 opacity-70 dark:invert")} />
+      ) : (
+        <img
+          src="/map-pin-dark.svg"
+          className={classNames("me-[10px] h-4 w-4 opacity-70 dark:invert")}
+          alt="map-pin"
+        />
+      )}
       <Tooltip content={<RenderLocationTooltip locations={locations} />}>
         <p className="line-clamp-1">
           {t("location_options", {
diff --git a/packages/features/bookings/lib/getLocationOptionsForSelect.ts b/packages/features/bookings/lib/getLocationOptionsForSelect.ts
index 7e14f67dfc..8a8963a0d4 100644
--- a/packages/features/bookings/lib/getLocationOptionsForSelect.ts
+++ b/packages/features/bookings/lib/getLocationOptionsForSelect.ts
@@ -1,6 +1,7 @@
 import type { LocationObject } from "@calcom/app-store/locations";
 import { locationKeyToString } from "@calcom/app-store/locations";
 import { getEventLocationType } from "@calcom/app-store/locations";
+import { getTranslatedLocation } from "@calcom/app-store/locations";
 import type { useLocale } from "@calcom/lib/hooks/useLocale";
 import notEmpty from "@calcom/lib/notEmpty";
 
@@ -18,11 +19,11 @@ export default function getLocationsOptionsForSelect(
         return null;
       }
       const type = eventLocation.type;
+      const translatedLocation = getTranslatedLocation(location, eventLocation, t);
 
       return {
         // XYZ: is considered a namespace in i18next https://www.i18next.com/principles/namespaces and thus it get's cleaned up.
-        // Beacause there can be a URL in here, simply don't translate it if it starts with http: or https:. This would allow us to keep supporting namespaces if we plan to use them
-        label: locationString.search(/^https?:/) !== -1 ? locationString : t(locationString),
+        label: translatedLocation || locationString,
         value: type,
         inputPlaceholder: t(eventLocation?.attendeeInputPlaceholder || ""),
       };