feat: Shows link location and respective icon in /bookings (#12760)

* Add metadata to bookingMinimalSelect

* add: Show link location in /bookings

* Refactor: Update variable declaration and conditional rendering in booking metadata

- Remove explicit type declaration in locationVideoCallUrl assignment
- Use conditional rendering for provider icon based on iconUrl existence

Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>

* Display URL location exclusively, omitting addresses

---------

Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>

apps/web/components/booking/BookingListItem.tsx

@@ -1,8 +1,12 @@
 import Link from "next/link";
 import { useState } from "react";
 
-import type { EventLocationType } from "@calcom/app-store/locations";
+import type { EventLocationType, getEventLocationValue } from "@calcom/app-store/locations";
-import { getEventLocationType } from "@calcom/app-store/locations";
+import {
+  getEventLocationType,
+  getSuccessPageLocationMessage,
+  guessEventLocationType,
+} from "@calcom/app-store/locations";
 import dayjs from "@calcom/dayjs";
 // TODO: Use browser locale, implement Intl in Dayjs maybe?
 import "@calcom/dayjs/locales";
@@ -14,6 +18,7 @@ import { useBookerUrl } from "@calcom/lib/hooks/useBookerUrl";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { BookingStatus } from "@calcom/prisma/enums";
+import { bookingMetadataSchema } from "@calcom/prisma/zod-utils";
 import type { RouterInputs, RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import type { ActionType } from "@calcom/ui";
@@ -93,6 +98,16 @@ function BookingListItem(booking: BookingItemProps) {
 
   const paymentAppData = getPaymentAppData(booking.eventType);
 
+  const location = booking.location as ReturnType<typeof getEventLocationValue>;
+  const locationVideoCallUrl = bookingMetadataSchema.parse(booking?.metadata || {})?.videoCallUrl;
+
+  const locationToDisplay = getSuccessPageLocationMessage(
+    locationVideoCallUrl ? locationVideoCallUrl : location,
+    t,
+    booking.status
+  );
+  const provider = guessEventLocationType(location);
+
   const bookingConfirm = async (confirm: boolean) => {
     let body = {
       bookingId: booking.id,
@@ -359,6 +374,33 @@ function BookingListItem(booking: BookingItemProps) {
                   attendees={booking.attendees}
                 />
               </div>
+              {!isPending && (
+                <div>
+                  {(provider?.label || locationToDisplay?.startsWith("https://")) &&
+                    locationToDisplay.startsWith("http") && (
+                      <a
+                        href={locationToDisplay}
+                        onClick={(e) => e.stopPropagation()}
+                        target="_blank"
+                        title={locationToDisplay}
+                        rel="noreferrer"
+                        className="text-sm leading-6 text-blue-600 hover:underline">
+                        <div className="flex items-center gap-2">
+                          {provider?.iconUrl && (
+                            <img
+                              src={provider.iconUrl}
+                              className="h-4 w-4 rounded-sm"
+                              alt={`${provider?.label} logo`}
+                            />
+                          )}
+                          {provider?.label
+                            ? t("join_event_location", { eventLocationType: provider?.label })
+                            : t("join_meeting")}
+                        </div>
+                      </a>
+                    )}
+                </div>
+              )}
               {isPending && (
                 <Badge className="ltr:mr-2 rtl:ml-2" variant="orange">
                   {t("unconfirmed")}

apps/web/public/static/locales/en/common.json

@@ -2130,6 +2130,8 @@
   "overlay_my_calendar":"Overlay my calendar",
   "overlay_my_calendar_toc":"By connecting to your calendar, you accept our privacy policy and terms of use. You may revoke access at any time.",
   "view_overlay_calendar_events":"View your calendar events to prevent clashed booking.",
+  "join_event_location":"Join {{eventLocationType}}",
+  "join_meeting":"Join Meeting",
   "troubleshooting":"Troubleshooting",
   "calendars_were_checking_for_conflicts":"Calendars we’re checking for conflicts",
   "availabilty_schedules":"Availability schedules",

packages/prisma/selects/booking.ts

@@ -8,4 +8,5 @@ export const bookingMinimalSelect = Prisma.validator<Prisma.BookingSelect>()({
   startTime: true,
   endTime: true,
   attendees: true,
+  metadata: true,
 });