Add the new Team->useHostDefault option (#7811)

* Add the new Team->useHostDefault option

* Added user.metadata to defaultEvents

* Type fixes

* Another type fix

* Implement feedback @jaibles

* Default -> Conferencing rename

---------

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>

apps/web/components/booking/AvailableEventLocations.tsx

@@ -8,17 +8,20 @@ import { FiLink } from "@calcom/ui/components/icon";
 
 import type { Props } from "./pages/AvailabilityPage";
 
+const excludeNullValues = (value: unknown) => !!value;
+
 export function AvailableEventLocations({ locations }: { locations: Props["eventType"]["locations"] }) {
   const { t } = useLocale();
 
-  return locations.length ? (
-    <div className="dark:text-darkgray-600 mr-6 flex w-full flex-col space-y-4 break-words text-sm text-gray-600">
-      {locations.map((location, index) => {
+  const renderLocations = locations.map((location, index) => {
     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 translateAbleKeys = [
       "attendee_in_person",
@@ -29,7 +32,6 @@ export function AvailableEventLocations({ locations }: { locations: Props["event
     ];
 
     const locationKey = z.string().default("").parse(locationKeyToString(location));
-
     const translatedLocation = location.type.startsWith("integrations:")
       ? eventLocationType.label
       : translateAbleKeys.includes(locationKey)
@@ -55,7 +57,12 @@ export function AvailableEventLocations({ locations }: { locations: Props["event
         </Tooltip>
       </div>
     );
-      })}
+  });
+
+  const filteredLocations = renderLocations.filter(excludeNullValues) as JSX.Element[];
+  return filteredLocations.length ? (
+    <div className="dark:text-darkgray-600 mr-6 flex w-full flex-col space-y-4 break-words text-sm text-gray-600">
+      {filteredLocations}
     </div>
   ) : null;
 }

apps/web/components/dialog/EditLocationDialog.tsx

@@ -33,6 +33,7 @@ interface ISetLocationDialog {
   saveLocation: (newLocationType: EventLocationType["type"], details: { [key: string]: string }) => void;
   selection?: LocationOption;
   booking?: BookingItem;
+  isTeamEvent?: boolean;
   defaultValues?: LocationObject[];
   setShowLocationModal: React.Dispatch<React.SetStateAction<boolean>>;
   isOpenDialog: boolean;
@@ -74,6 +75,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
     saveLocation,
     selection,
     booking,
+    isTeamEvent,
     setShowLocationModal,
     isOpenDialog,
     defaultValues,
@@ -290,7 +292,9 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                 query={locationsQuery}
                 success={({ data }) => {
                   if (!data.length) return null;
-                  const locationOptions = [...data];
+                  const locationOptions = [...data].filter((option) => {
+                    return !isTeamEvent ? option.label !== "Conferencing" : true;
+                  });
                   if (booking) {
                     locationOptions.map((location) =>
                       location.options.filter((l) => !["phone", "attendeeInPerson"].includes(l.value))

apps/web/components/eventtype/EventSetupTab.tsx

@@ -35,16 +35,6 @@ const getLocationFromType = (
   }
 };
 
-const getDefaultLocationValue = (options: EventTypeSetupProps["locationOptions"], type: string) => {
-  for (const locationType of options) {
-    for (const location of locationType.options) {
-      if (location.value === type && location.disabled === false) {
-        return location;
-      }
-    }
-  }
-};
-
 export const EventSetupTab = (
   props: Pick<
     EventTypeSetupProps,
@@ -53,12 +43,16 @@ export const EventSetupTab = (
 ) => {
   const { t } = useLocale();
   const formMethods = useFormContext<FormValues>();
-  const { eventType, locationOptions, team, destinationCalendar } = props;
+  const { eventType, team, destinationCalendar } = props;
   const [showLocationModal, setShowLocationModal] = useState(false);
   const [editingLocationType, setEditingLocationType] = useState<string>("");
   const [selectedLocation, setSelectedLocation] = useState<LocationOption | undefined>(undefined);
   const [multipleDuration, setMultipleDuration] = useState(eventType.metadata.multipleDuration);
 
+  const locationOptions = props.locationOptions.filter((option) => {
+    return !team ? option.label !== "Conferencing" : true;
+  });
+
   const multipleDurationOptions = [5, 10, 15, 20, 25, 30, 45, 50, 60, 75, 80, 90, 120, 180].map((mins) => ({
     value: mins,
     label: t("multiple_duration_mins", { count: mins }),
@@ -409,6 +403,7 @@ export const EventSetupTab = (
 
       {/* We portal this modal so we can submit the form inside. Otherwise we get issues submitting two forms at once  */}
       <EditLocationDialog
+        isTeamEvent={!!team}
         isOpenDialog={showLocationModal}
         setShowLocationModal={setShowLocationModal}
         saveLocation={saveLocation}

apps/web/pages/event-types/[type]/index.tsx

@@ -65,6 +65,7 @@ export type FormValues = {
     hostPhoneNumber?: string;
     displayLocationPublicly?: boolean;
     phone?: string;
+    hostDefault?: string;
   }[];
   customInputs: CustomInputParsed[];
   schedule: number | null;

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

@@ -1608,6 +1608,7 @@
   "default_app_link_title": "Set a default app link",
   "default_app_link_description": "Setting a default app link allows all newly created event types to use the app link you set.",
   "change_default_conferencing_app": "Set as default",
+  "organizer_default_conferencing_app": "Organizer's default app",
   "under_maintenance": "Down for maintenance",
   "under_maintenance_description": "The {{appName}} team are performing scheduled maintenance. If you have any questions, please contact support.",
   "event_type_seats": "{{numberOfSeats}} seats",

packages/app-store/locations.ts

@@ -12,13 +12,20 @@ export type DefaultEventLocationType = {
   type: DefaultEventLocationTypeEnum;
   label: string;
   messageForOrganizer: string;
-  category: "in person" | "other" | "phone";
+  category: "in person" | "conferencing" | "other" | "phone";
 
   iconUrl: string;
   urlRegExp?: string;
   // HACK: `variable` and `defaultValueVariable` are required due to legacy reason where different locations were stored in different places.
-  variable: "locationType" | "locationAddress" | "address" | "locationLink" | "locationPhoneNumber" | "phone";
-  defaultValueVariable: "address" | "attendeeAddress" | "link" | "hostPhoneNumber" | "phone";
+  variable:
+    | "locationType"
+    | "locationAddress"
+    | "address"
+    | "locationLink"
+    | "locationPhoneNumber"
+    | "phone"
+    | "hostDefault";
+  defaultValueVariable: "address" | "attendeeAddress" | "link" | "hostPhoneNumber" | "hostDefault" | "phone";
 } & (
   | {
       organizerInputType: "phone" | "text" | null;
@@ -60,6 +67,7 @@ export enum DefaultEventLocationTypeEnum {
    */
   UserPhone = "userPhone",
   Link = "link",
+  Conferencing = "conferencing",
 }
 
 export const defaultLocations: DefaultEventLocationType[] = [
@@ -88,6 +96,17 @@ export const defaultLocations: DefaultEventLocationType[] = [
     iconUrl: "/map-pin.svg",
     category: "in person",
   },
+  {
+    default: true,
+    type: DefaultEventLocationTypeEnum.Conferencing,
+    iconUrl: "/link.svg",
+    organizerInputType: null,
+    label: "organizer_default_conferencing_app",
+    variable: "hostDefault",
+    defaultValueVariable: "hostDefault",
+    category: "conferencing",
+    messageForOrganizer: "",
+  },
   {
     default: true,
     type: DefaultEventLocationTypeEnum.Link,
@@ -130,7 +149,9 @@ export const defaultLocations: DefaultEventLocationType[] = [
 export type LocationObject = {
   type: string;
   displayLocationPublicly?: boolean;
-} & Partial<Record<"address" | "attendeeAddress" | "link" | "hostPhoneNumber" | "phone", string>>;
+} & Partial<
+  Record<"address" | "attendeeAddress" | "link" | "hostPhoneNumber" | "hostDefault" | "phone", string>
+>;
 
 // integrations:jitsi | 919999999999 | Delhi | https://manual.meeting.link | Around Video
 export type BookingLocationValue = string;

packages/features/bookings/lib/handleNewBooking.ts

@@ -622,6 +622,7 @@ async function handler(
 
   let locationBodyString = location;
   let defaultLocationUrl = undefined;
+
   if (dynamicUserList.length > 1) {
     users = users.sort((a, b) => {
       const aIndex = (a.username && dynamicUserList.indexOf(a.username)) || 0;
@@ -701,6 +702,18 @@ async function handler(
 
   const [organizerUser] = users;
   const tOrganizer = await getTranslation(organizerUser?.locale ?? "en", "common");
+  // use host default
+  if (isTeamEventType && locationBodyString === "conferencing") {
+    const metadataParseResult = userMetadataSchema.safeParse(organizerUser.metadata);
+    const organizerMetadata = metadataParseResult.success ? metadataParseResult.data : undefined;
+    if (organizerMetadata) {
+      const app = getAppFromSlug(organizerMetadata?.defaultConferencingApp?.appSlug);
+      locationBodyString = app?.appData?.location?.type || locationBodyString;
+      defaultLocationUrl = organizerMetadata?.defaultConferencingApp?.appLink;
+    } else {
+      locationBodyString = "";
+    }
+  }
 
   const invitee = [
     {

packages/lib/defaultEvents.ts

@@ -26,6 +26,7 @@ type UsernameSlugLinkProps = {
 };
 
 const user: User = {
+  metadata: null,
   theme: null,
   credentials: [],
   username: "john.doe",

packages/prisma/selects/user.ts

@@ -45,6 +45,7 @@ export const userSelect = Prisma.validator<Prisma.UserArgs>()({
     theme: true,
     brandColor: true,
     darkBrandColor: true,
+    metadata: true,
     ...availabilityUserSelect,
   },
 });