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

Co-authored-by: Peer Richelsen <peer@cal.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>

apps/web/components/booking/BookingListItem.tsx

@@ -88,6 +88,10 @@ function BookingListItem(booking: BookingItemProps) {
   const isRecurring = booking.recurringEventId !== null;
   const isTabRecurring = booking.listingStatus === "recurring";
   const isTabUnconfirmed = booking.listingStatus === "unconfirmed";
+  const eventLocationType = getEventLocationType(booking.location);
+  const meetingLink = booking.references[0]?.meetingUrl
+    ? booking.references[0]?.meetingUrl
+    : booking.location;
 
   const paymentAppData = getPaymentAppData(booking.eventType);
 
@@ -353,6 +357,27 @@ function BookingListItem(booking: BookingItemProps) {
                   attendees={booking.attendees}
                 />
               </div>
+              {!isPending && (eventLocationType || booking.location?.startsWith("https://")) && (
+                <Link
+                  href={meetingLink ? meetingLink.toString() : ""}
+                  className="text-sm leading-6 text-blue-400 hover:underline">
+                  <div className="flex items-center gap-2">
+                    {eventLocationType ? (
+                      <>
+                        <img
+                          src={eventLocationType.iconUrl}
+                          className="h-4 w-4 rounded-sm"
+                          alt={`${eventLocationType.label} logo`}
+                        />
+                        {t("join_event_location", { eventLocationType: eventLocationType.label })}
+                      </>
+                    ) : (
+                      t("join_meeting")
+                    )}
+                  </div>
+                </Link>
+              )}
+
               {isPending && (
                 <Badge className="ltr:mr-2 rtl:ml-2" variant="orange">
                   {t("unconfirmed")}

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

@@ -2095,5 +2095,7 @@
   "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",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }