fix: platform booker icons and address property for type inPerson (#1…

…5207) * fix: platform booker icons * fix label not being shown for address * fix type check * PR feedback --------- Co-authored-by: Morgan Vernay <[email protected]>
calcom · May 27, 2024 · bddc235 · bddc235
1 parent 360b729
commit bddc235
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git 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
@@ -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 || ""),
       };