From f71759f70b0a7aa82bd8fba003e68771d831dec4 Mon Sep 17 00:00:00 2001
From: Kartik Saini <41051387+kart1ka@users.noreply.github.com>
Date: Mon, 18 Dec 2023 06:58:49 +0530
Subject: [PATCH] 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>
---
 .../components/booking/BookingListItem.tsx    | 46 ++++++++++++++++++-
 apps/web/public/static/locales/en/common.json |  2 +
 packages/prisma/selects/booking.ts            |  1 +
 3 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index 4af0888a29..1b35959898 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/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 { getEventLocationType } from "@calcom/app-store/locations";
+import type { EventLocationType, getEventLocationValue } 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")}
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index d6fc498ae3..ac54ff3ee2 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/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",
diff --git a/packages/prisma/selects/booking.ts b/packages/prisma/selects/booking.ts
index d71d9562d8..7054f7dbf0 100644
--- a/packages/prisma/selects/booking.ts
+++ b/packages/prisma/selects/booking.ts
@@ -8,4 +8,5 @@ export const bookingMinimalSelect = Prisma.validator<Prisma.BookingSelect>()({
   startTime: true,
   endTime: true,
   attendees: true,
+  metadata: true,
 });