fix: Org booking pages link fixes for Routing Forms and Event type (#10052)

* Fix links

* Fix team event for org URL

* Fix avatar and user link

apps/web/components/eventtype/EventTypeSingleLayout.tsx

@@ -7,6 +7,7 @@ import { useMemo, useState, Suspense } from "react";
 import type { UseFormReturn } from "react-hook-form";
 
 import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
+import { useOrgBrandingValues } from "@calcom/features/ee/organizations/hooks";
 import Shell from "@calcom/features/shell/Shell";
 import { classNames } from "@calcom/lib";
 import { CAL_URL } from "@calcom/lib/constants";
@@ -233,9 +234,11 @@ function EventTypeSingleLayout({
     formMethods,
   ]);
 
-  const permalink = `${CAL_URL}/${team ? `team/${team.slug}` : eventType.users[0].username}/${
-    eventType.slug
-  }`;
+  const orgBranding = useOrgBrandingValues();
+  const isOrgEvent = orgBranding?.fullDomain;
+  const permalink = `${orgBranding?.fullDomain ?? CAL_URL}/${
+    team ? `${!isOrgEvent ? "team/" : ""}${team.slug}` : eventType.users[0].username
+  }/${eventType.slug}`;
 
   const embedLink = `${team ? `team/${team.slug}` : eventType.users[0].username}/${eventType.slug}`;
   const isManagedEvent = eventType.schedulingType === SchedulingType.MANAGED ? "_managed" : "";

packages/app-store/routing-forms/components/FormActions.tsx

@@ -7,8 +7,9 @@ import { Controller } from "react-hook-form";
 import { v4 as uuidv4 } from "uuid";
 import { z } from "zod";
 
+import { useOrgBrandingValues } from "@calcom/features/ee/organizations/hooks";
 import { classNames } from "@calcom/lib";
-import getOrgAwareUrlOnClient from "@calcom/lib/getOrgAwareUrl";
+import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import type { ButtonProps } from "@calcom/ui";
@@ -401,11 +402,13 @@ export const FormAction = forwardRef(function FormAction<T extends typeof Button
   const dropdownCtxValue = useContext(dropdownCtx);
   const dropdown = dropdownCtxValue?.dropdown;
   const embedLink = `forms/${routingForm?.id}`;
-  const formRelativeLink = `/${embedLink}`;
-  let relativeRedirectUrl = `/router?form=${routingForm?.id}`;
+  const orgBranding = useOrgBrandingValues();
+
+  const formLink = `${orgBranding?.fullDomain ?? CAL_URL}/${embedLink}`;
+  let redirectUrl = `${orgBranding?.fullDomain ?? CAL_URL}/router?form=${routingForm?.id}`;
 
   routingForm?.fields?.forEach((field) => {
-    relativeRedirectUrl += `&${getFieldIdentifier(field)}={Recalled_Response_For_This_Field}`;
+    redirectUrl += `&${getFieldIdentifier(field)}={Recalled_Response_For_This_Field}`;
   });
 
   const { t } = useLocale();
@@ -415,12 +418,12 @@ export const FormAction = forwardRef(function FormAction<T extends typeof Button
     ButtonProps & { as?: React.ElementType; render?: FormActionProps<unknown>["render"] }
   > = {
     preview: {
-      href: formRelativeLink,
+      href: formLink,
     },
     copyLink: {
       onClick: () => {
         showToast(t("link_copied"), "success");
-        navigator.clipboard.writeText(getOrgAwareUrlOnClient(formRelativeLink));
+        navigator.clipboard.writeText(formLink);
       },
     },
     duplicate: {
@@ -447,7 +450,7 @@ export const FormAction = forwardRef(function FormAction<T extends typeof Button
     },
     copyRedirectUrl: {
       onClick: () => {
-        navigator.clipboard.writeText(getOrgAwareUrlOnClient(relativeRedirectUrl));
+        navigator.clipboard.writeText(redirectUrl);
         showToast(t("typeform_redirect_url_copied"), "success");
       },
     },

packages/features/ee/teams/components/MemberListItem.tsx

@@ -2,6 +2,7 @@ import classNames from "classnames";
 import { signIn } from "next-auth/react";
 import { useState } from "react";
 
+import { useOrgBrandingValues } from "@calcom/features/ee/organizations/hooks";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { MembershipRole } from "@calcom/prisma/enums";
@@ -53,6 +54,7 @@ const checkIsOrg = (team: Props["team"]) => {
 
 export default function MemberListItem(props: Props) {
   const { t } = useLocale();
+  const orgBranding = useOrgBrandingValues();
 
   const utils = trpc.useContext();
   const [showChangeMemberRoleModal, setShowChangeMemberRoleModal] = useState(false);
@@ -116,7 +118,7 @@ export default function MemberListItem(props: Props) {
           <div className="flex">
             <Avatar
               size="sm"
-              imageSrc={WEBAPP_URL + "/" + props.member.username + "/avatar.png"}
+              imageSrc={(orgBranding?.fullDomain ?? WEBAPP_URL) + "/" + props.member.username + "/avatar.png"}
               alt={name || ""}
               className="h-10 w-10 rounded-full"
             />
@@ -137,7 +139,7 @@ export default function MemberListItem(props: Props) {
                     <span className="text-default mx-2 block">•</span>
                     <a
                       target="_blank"
-                      href={`${WEBAPP_URL}/${props.member.username}`}
+                      href={`${orgBranding?.fullDomain ?? WEBAPP_URL}/${props.member.username}`}
                       className="text-default block text-sm">
                       {bookingLink}
                     </a>

packages/lib/getOrgAwareUrl.ts

@@ -1,20 +0,0 @@
-import { CAL_URL, WEBAPP_URL } from "./constants";
-
-/**
- * It is a simpler(no HTTP request) alternative to get full URL of a path
- * Should be used on app.cal.com Pages and not Booking Pages(which can be accessed through website URL also)
- */
-export function getOrgAwareUrlOnClient(path: string) {
-  if (!path.startsWith("/")) {
-    throw new Error("path must start with /");
-  }
-  const documentURLObj = new URL(document.URL);
-  const webAppUrlObj = new URL(WEBAPP_URL);
-  const isNonOrgDomain = documentURLObj.host === webAppUrlObj.host;
-  if (isNonOrgDomain) {
-    return `${CAL_URL}${path}`;
-  }
-  return `${documentURLObj.href.replace(/\/$/, "")}${path}`;
-}
-
-export default getOrgAwareUrlOnClient;