From 3bb42f276e99d54bf8c0c78f441f00368cca676a Mon Sep 17 00:00:00 2001
From: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>
Date: Wed, 1 Nov 2023 09:34:05 -0400
Subject: [PATCH] fix: Attach `credentialId` to location option (#12086)

Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Co-authored-by: Udit Takkar <udit222001@gmail.com>
---
 .../components/dialog/EditLocationDialog.tsx  |  6 ++---
 .../components/eventtype/EventSetupTab.tsx    | 24 ++++++++++++++++---
 .../web/components/ui/form/LocationSelect.tsx |  4 ++--
 packages/app-store/server.ts                  |  8 ++++++-
 4 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/apps/web/components/dialog/EditLocationDialog.tsx b/apps/web/components/dialog/EditLocationDialog.tsx
index b891235c65..252d5fcf92 100644
--- a/apps/web/components/dialog/EditLocationDialog.tsx
+++ b/apps/web/components/dialog/EditLocationDialog.tsx
@@ -356,9 +356,9 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                             onChange={(val) => {
                               if (val) {
                                 locationFormMethods.setValue("locationType", val.value);
-                                if (val.credential) {
-                                  locationFormMethods.setValue("credentialId", val.credential.id);
-                                  locationFormMethods.setValue("teamName", val.credential.team?.name);
+                                if (!!val.credentialId) {
+                                  locationFormMethods.setValue("credentialId", val.credentialId);
+                                  locationFormMethods.setValue("teamName", val.teamName);
                                 }
 
                                 locationFormMethods.unregister([
diff --git a/apps/web/components/eventtype/EventSetupTab.tsx b/apps/web/components/eventtype/EventSetupTab.tsx
index 754f060868..559762f9cf 100644
--- a/apps/web/components/eventtype/EventSetupTab.tsx
+++ b/apps/web/components/eventtype/EventSetupTab.tsx
@@ -298,9 +298,21 @@ export const EventSetupTab = (
                           !validLocations.find((location) => location.type === newLocationType);
 
                         if (canAddLocation) {
-                          updateLocationField(index, { type: newLocationType });
+                          updateLocationField(index, {
+                            type: newLocationType,
+                            ...(e.credentialId && {
+                              credentialId: e.credentialId,
+                              teamName: e.teamName,
+                            }),
+                          });
                         } else {
-                          updateLocationField(index, { type: field.type });
+                          updateLocationField(index, {
+                            type: field.type,
+                            ...(field.credentialId && {
+                              credentialId: field.credentialId,
+                              teamName: field.teamName,
+                            }),
+                          });
                           showToast(t("location_already_exists"), "warning");
                         }
                       }
@@ -382,7 +394,13 @@ export const EventSetupTab = (
                       !validLocations.find((location) => location.type === newLocationType);
 
                     if (canAppendLocation) {
-                      append({ type: newLocationType });
+                      append({
+                        type: newLocationType,
+                        ...(e.credentialId && {
+                          credentialId: e.credentialId,
+                          teamName: e.teamName,
+                        }),
+                      });
                       setSelectedNewOption(e);
                     } else {
                       showToast(t("location_already_exists"), "warning");
diff --git a/apps/web/components/ui/form/LocationSelect.tsx b/apps/web/components/ui/form/LocationSelect.tsx
index 5eed7c3b8e..1e3ede2341 100644
--- a/apps/web/components/ui/form/LocationSelect.tsx
+++ b/apps/web/components/ui/form/LocationSelect.tsx
@@ -2,7 +2,6 @@ import type { GroupBase, Props, SingleValue } from "react-select";
 import { components } from "react-select";
 
 import type { EventLocationType } from "@calcom/app-store/locations";
-import type { CredentialDataWithTeamName } from "@calcom/app-store/utils";
 import { classNames } from "@calcom/lib";
 import invertLogoOnDark from "@calcom/lib/invertLogoOnDark";
 import { Select } from "@calcom/ui";
@@ -13,7 +12,8 @@ export type LocationOption = {
   icon?: string;
   disabled?: boolean;
   address?: string;
-  credential?: CredentialDataWithTeamName;
+  credentialId?: number;
+  teamName?: string;
 };
 
 export type SingleValueLocationOption = SingleValue<LocationOption>;
diff --git a/packages/app-store/server.ts b/packages/app-store/server.ts
index f88ec7597f..9bea796991 100644
--- a/packages/app-store/server.ts
+++ b/packages/app-store/server.ts
@@ -88,7 +88,13 @@ export async function getLocationGroupedOptions(
         teamName: credential.team?.name,
       }))) {
         const label = `${app.locationOption.label} ${teamName ? `(${teamName})` : ""}`;
-        const option = { ...app.locationOption, label, icon: app.logo, slug: app.slug };
+        const option = {
+          ...app.locationOption,
+          label,
+          icon: app.logo,
+          slug: app.slug,
+          ...(app.credential ? { credentialId: app.credential.id, teamName: app.credential.team?.name } : {}),
+        };
         if (apps[groupByCategory]) {
           apps[groupByCategory] = [...apps[groupByCategory], option];
         } else {