fix: booking page: location icon is not showing up (CALCOM-9951) (#9993)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>

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 (
+    <img
+      src={eventLocationType.iconUrl}
+      className={classNames(
+        "me-[10px]  h-4 w-4 opacity-70 dark:opacity-100",
+        !eventLocationType.iconUrl?.startsWith("/app-store") ? "dark:invert-[.65]" : "",
+        !eventLocationType.iconUrl?.startsWith("/app-store") && isTooltip && "invert"
+      )}
+      alt={`${eventLocationType.label} icon`}
+    />
+  );
+}
+
+function RenderLocationTooltip({ locations }: { locations: LocationObject[] }) {
+  const { t } = useLocale();
+
+  return (
+    <div className="my-2 me-2 flex w-full flex-col space-y-3 break-words">
+      <p>{t("select_on_next_step")}</p>
+      {locations.map(
+        (
+          location: Pick<Partial<LocationObject>, "link" | "address"> &
+            Omit<LocationObject, "link" | "address">,
+          index: number
+        ) => {
+          const eventLocationType = getEventLocationType(location.type);
+          if (!eventLocationType) {
+            return null;
+          }
+          const translatedLocation = getTranslatedLocation(location, eventLocationType, t);
+          return (
+            <div key={`${location.type}-${index}`} className="font-sm flex flex-row items-center">
+              <RenderIcon eventLocationType={eventLocationType} isTooltip />
+              <p className="line-clamp-1">{translatedLocation}</p>
+            </div>
+          );
+        }
+      )}
+    </div>
+  );
+}
+
+export function AvailableEventLocations({ locations }: { locations: LocationObject[] }) {
+  const { t } = useLocale();
+
+  const renderLocations = locations.map(
+    (
+      location: Pick<Partial<LocationObject>, "link" | "address"> & Omit<LocationObject, "link" | "address">,
+      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 (
+        <div key={`${location.type}-${index}`} className="flex flex-row items-center text-sm font-medium">
+          {eventLocationType.iconUrl === "/link.svg" ? (
+            <Link className="text-default ml-[2px] h-4 w-4  ltr:mr-[10px] rtl:ml-[10px] " />
+          ) : (
+            <RenderIcon eventLocationType={eventLocationType} isTooltip={false} />
+          )}
+          <Tooltip content={translatedLocation}>
+            <p className="line-clamp-1">{translatedLocation}</p>
+          </Tooltip>
+        </div>
+      );
+    }
+  );
+
+  const filteredLocations = renderLocations.filter(excludeNullValues) as JSX.Element[];
+
+  return filteredLocations.length > 1 ? (
+    <div className="flex flex-row items-center text-sm font-medium">
+      <img
+        src="/map-pin.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", {
+            locationCount: filteredLocations.length,
+          })}
+        </p>
+      </Tooltip>
+    </div>
+  ) : filteredLocations.length === 1 ? (
+    <div className="text-default mr-6 flex w-full flex-col space-y-4 break-words text-sm">
+      {filteredLocations}
+    </div>
+  ) : null;
+}

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",

packages/app-store/locations.ts

@@ -42,7 +42,10 @@ export type DefaultEventLocationType = {
     }
 );
 
-type EventLocationTypeFromApp = Ensure<EventLocationTypeFromAppMeta, "defaultValueVariable" | "variable">;
+export type EventLocationTypeFromApp = Ensure<
+  EventLocationTypeFromAppMeta,
+  "defaultValueVariable" | "variable"
+>;
 
 export type EventLocationType = DefaultEventLocationType | EventLocationTypeFromApp;
 

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 && <Icon className="relative z-20 mr-2 mt-[2px] h-4 w-4 flex-shrink-0" />}</>
       )}
@@ -128,7 +129,7 @@ export const EventDetails = ({ event, blocks = defaultEventDetailsBlocks }: Even
             if (!event?.locations?.length) return null;
             return (
               <React.Fragment key={block}>
-                <EventLocations event={event} />
+                <AvailableEventLocations locations={event.locations} />
               </React.Fragment>
             );