fix: usage of CAL_URL (#13326)

Co-authored-by: zomars <zomars@me.com>

apps/api/pages/api/event-types/_utils/getCalLink.ts

@@ -1,4 +1,4 @@
-import { CAL_URL } from "@calcom/lib/constants";
+import { WEBSITE_URL } from "@calcom/lib/constants";
 
 export default function getCalLink(eventType: {
   team?: { slug: string | null } | null;
@@ -6,7 +6,7 @@ export default function getCalLink(eventType: {
   users?: { username: string | null }[];
   slug: string;
 }) {
-  return `${CAL_URL}/${
+  return `${WEBSITE_URL}/${
     eventType?.team
       ? `team/${eventType?.team?.slug}`
       : eventType?.owner

apps/web/components/apps/InstallAppButtonChild.tsx

@@ -2,7 +2,7 @@ import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
 import { doesAppSupportTeamInstall } from "@calcom/app-store/utils";
 import { Spinner } from "@calcom/features/calendars/weeklyview/components/spinner/Spinner";
 import type { UserAdminTeams } from "@calcom/features/ee/teams/lib/getUserAdminTeams";
-import { CAL_URL } from "@calcom/lib/constants";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import type { AppFrontendPayload } from "@calcom/types/App";
@@ -125,7 +125,7 @@ export const InstallAppButtonChild = ({
                 StartIcon={(props) => (
                   <Avatar
                     alt={team.logo || ""}
-                    imageSrc={team.logo || `${CAL_URL}/${team.logo}/avatar.png`} // if no image, use default avatar
+                    imageSrc={team.logo || `${WEBAPP_URL}/${team.logo}/avatar.png`} // if no image, use default avatar
                     size="sm"
                     {...props}
                   />

apps/web/components/eventtype/EventAdvancedTab.tsx

@@ -18,8 +18,7 @@ import { FormBuilder } from "@calcom/features/form-builder/FormBuilder";
 import type { EditableSchema } from "@calcom/features/form-builder/schema";
 import { BookerLayoutSelector } from "@calcom/features/settings/BookerLayoutSelector";
 import { classNames } from "@calcom/lib";
-import { APP_NAME, CAL_URL } from "@calcom/lib/constants";
-import { IS_VISUAL_REGRESSION_TESTING } from "@calcom/lib/constants";
+import { APP_NAME, IS_VISUAL_REGRESSION_TESTING, WEBSITE_URL } from "@calcom/lib/constants";
 import { generateHashedLink } from "@calcom/lib/generateHashedLink";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { Prisma } from "@calcom/prisma/client";
@@ -74,7 +73,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
   const [requiresConfirmation, setRequiresConfirmation] = useState(
     formMethods.getValues("requiresConfirmation")
   );
-  const placeholderHashedLink = `${CAL_URL}/d/${hashedUrl}/${formMethods.getValues("slug")}`;
+  const placeholderHashedLink = `${WEBSITE_URL}/d/${hashedUrl}/${formMethods.getValues("slug")}`;
   const seatsEnabled = formMethods.watch("seatsPerTimeSlotEnabled");
   const noShowFeeEnabled =
     formMethods.getValues("metadata")?.apps?.stripe?.enabled === true &&

apps/web/components/eventtype/EventSetupTab.tsx

@@ -11,7 +11,7 @@ import type { EventLocationType } from "@calcom/app-store/locations";
 import { getEventLocationType, MeetLocationType } from "@calcom/app-store/locations";
 import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
 import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
-import { CAL_URL } from "@calcom/lib/constants";
+import { WEBAPP_URL, WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { md } from "@calcom/lib/markdownIt";
 import { slugify } from "@calcom/lib/slugify";
@@ -401,7 +401,7 @@ export const EventSetupTab = (
                   The “Add to calendar” for this event type needs to be a Google Calendar for Meet to work.
                   Change it{" "}
                   <Link
-                    href={`${CAL_URL}/event-types/${formMethods.getValues("id")}?tabName=advanced`}
+                    href={`${WEBAPP_URL}/event-types/${formMethods.getValues("id")}?tabName=advanced`}
                     className="underline">
                     here.
                   </Link>{" "}
@@ -412,7 +412,7 @@ export const EventSetupTab = (
           {isChildrenManagedEventType && !locationAvailable && locationDetails && (
             <p className="pl-1 text-sm leading-none text-red-600">
               {t("app_not_connected", { appName: locationDetails.name })}{" "}
-              <a className="underline" href={`${CAL_URL}/apps/${locationDetails.slug}`}>
+              <a className="underline" href={`${WEBAPP_URL}/apps/${locationDetails.slug}`}>
                 {t("connect_now")}
               </a>
             </p>
@@ -444,9 +444,10 @@ export const EventSetupTab = (
 
   const lengthLockedProps = shouldLockDisableProps("length");
   const descriptionLockedProps = shouldLockDisableProps("description");
+
   const urlPrefix = orgBranding
     ? orgBranding?.fullDomain.replace(/^(https?:|)\/\//, "")
-    : `${CAL_URL?.replace(/^(https?:|)\/\//, "")}`;
+    : `${WEBSITE_URL?.replace(/^(https?:|)\/\//, "")}`;
 
   return (
     <div>

apps/web/components/ui/UsernameAvailability/index.tsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
-import { CAL_URL, IS_SELF_HOSTED } from "@calcom/lib/constants";
+import { WEBSITE_URL, IS_SELF_HOSTED } from "@calcom/lib/constants";
 import type { TRPCClientErrorLike } from "@calcom/trpc/client";
 import { trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
@@ -45,7 +45,7 @@ export const UsernameAvailabilityField = ({
 
   const usernamePrefix = orgBranding
     ? orgBranding?.fullDomain.replace(/^(https?:|)\/\//, "")
-    : `${CAL_URL?.replace(/^(https?:|)\/\//, "")}`;
+    : `${WEBSITE_URL?.replace(/^(https?:|)\/\//, "")}`;
 
   return (
     <Controller

apps/web/modules/event-types/views/event-types-listing-view.tsx

@@ -18,7 +18,7 @@ import { TeamsFilter } from "@calcom/features/filters/components/TeamsFilter";
 import { getTeamsFiltersFromQuery } from "@calcom/features/filters/lib/getTeamsFiltersFromQuery";
 import Shell from "@calcom/features/shell/Shell";
 import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants";
-import { CAL_URL } from "@calcom/lib/constants";
+import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
@@ -407,7 +407,7 @@ export const EventTypeList = ({
           const embedLink = `${group.profile.slug}/${type.slug}`;
           const calLink = `${bookerUrl}/${embedLink}`;
           const isPrivateURLEnabled = type.hashedLink?.link;
-          const placeholderHashedLink = `${CAL_URL}/d/${type.hashedLink?.link}/${type.slug}`;
+          const placeholderHashedLink = `${WEBSITE_URL}/d/${type.hashedLink?.link}/${type.slug}`;
           const isManagedEventType = type.schedulingType === SchedulingType.MANAGED;
           const isChildrenManagedEventType =
             type.metadata?.managedEventConfig !== undefined && type.schedulingType !== SchedulingType.MANAGED;

apps/web/modules/event-types/views/event-types-single-view.tsx

@@ -15,7 +15,7 @@ import { validateCustomEventName } from "@calcom/core/event";
 import type { EventLocationType } from "@calcom/core/location";
 import type { ChildrenEventType } from "@calcom/features/eventtypes/components/ChildrenEventTypeSelect";
 import { validateIntervalLimitOrder } from "@calcom/lib";
-import { CAL_URL } from "@calcom/lib/constants";
+import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
 import { HttpError } from "@calcom/lib/http-error";
@@ -423,7 +423,7 @@ const EventTypePage = (props: EventTypeSetupProps) => {
     ).length;
   }
 
-  const permalink = `${CAL_URL}/${team ? `team/${team.slug}` : eventType.users[0].username}/${
+  const permalink = `${WEBSITE_URL}/${team ? `team/${team.slug}` : eventType.users[0].username}/${
     eventType.slug
   }`;
   const tabMap = {

apps/web/test/utils/bookingScenario/expects.ts

@@ -8,7 +8,7 @@ import { expect, vi } from "vitest";
 import "vitest-fetch-mock";
 
 import dayjs from "@calcom/dayjs";
-import { CAL_URL } from "@calcom/lib/constants";
+import { WEBSITE_URL } from "@calcom/lib/constants";
 import logger from "@calcom/lib/logger";
 import { safeStringify } from "@calcom/lib/safeStringify";
 import { BookingStatus } from "@calcom/prisma/enums";
@@ -382,7 +382,7 @@ export function expectSuccessfulBookingCreationEmails({
   bookingTimeRange?: { start: Date; end: Date };
   booking: { uid: string; urlOrigin?: string };
 }) {
-  const bookingUrlOrigin = booking.urlOrigin || CAL_URL;
+  const bookingUrlOrigin = booking.urlOrigin || WEBSITE_URL;
   expect(emails).toHaveEmail(
     {
       titleTag: "confirmed_event_type_subject",
@@ -742,7 +742,7 @@ export function expectBookingRequestRescheduledEmails({
   booking: { uid: string; urlOrigin?: string };
   bookNewTimePath: string;
 }) {
-  const bookingUrlOrigin = booking.urlOrigin || CAL_URL;
+  const bookingUrlOrigin = booking.urlOrigin || WEBSITE_URL;
 
   expect(emails).toHaveEmail(
     {

packages/app-store/components.tsx

@@ -5,7 +5,6 @@ import { useEffect, useRef } from "react";
 import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
 import classNames from "@calcom/lib/classNames";
 import { WEBAPP_URL } from "@calcom/lib/constants";
-import { CAL_URL } from "@calcom/lib/constants";
 import { deriveAppDictKeyFromType } from "@calcom/lib/deriveAppDictKeyFromType";
 import { useHasTeamPlan } from "@calcom/lib/hooks/useHasPaidPlan";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -156,7 +155,7 @@ export const AppDependencyComponent = ({
                     <div>
                       <>
                         <Link
-                          href={`${CAL_URL}/apps/${dependency.slug}`}
+                          href={`${WEBAPP_URL}/apps/${dependency.slug}`}
                           className="text-info flex items-center underline">
                           <span className="mr-1">
                             {t("connect_app", { dependencyName: dependency.name })}

packages/app-store/googlecalendar/components/ExistingGoogleCal.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 
-import { CAL_URL } from "@calcom/lib/constants";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { AlertCircle, ArrowRight, Check } from "@calcom/ui/components/icon";
 
@@ -38,7 +38,7 @@ const ExistingGoogleCal = ({ gCalInstalled, appName }: { gCalInstalled?: boolean
               <div>
                 <>
                   <Link
-                    href={`${CAL_URL}/apps/google-calendar`}
+                    href={`${WEBAPP_URL}/apps/google-calendar`}
                     className="text-info flex items-center underline">
                     <span className="mr-1">{t("connect_google_calendar")}</span>
                     <ArrowRight />

packages/app-store/intercom/api/callback.ts

@@ -1,6 +1,6 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 
-import { CAL_URL } from "@calcom/lib/constants";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import { getSafeRedirectUrl } from "@calcom/lib/getSafeRedirectUrl";
 import logger from "@calcom/lib/logger";
 import prisma from "@calcom/prisma";
@@ -86,7 +86,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   );
 
   res.redirect(
-    getSafeRedirectUrl(`${CAL_URL}/apps/installed/automation?hl=intercom`) ??
+    getSafeRedirectUrl(`${WEBAPP_URL}/apps/installed/automation?hl=intercom`) ??
       getInstalledAppPath({ variant: "automation", slug: "intercom" })
   );
 }

packages/app-store/intercom/api/configure.ts

@@ -1,6 +1,6 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 
-import { CAL_URL } from "@calcom/lib/constants";
+import { WEBSITE_URL } from "@calcom/lib/constants";
 import prisma from "@calcom/prisma";
 
 import type {
@@ -94,7 +94,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     }
 
     return {
-      id: `${CAL_URL}/${slug}/${eventType.slug}`,
+      id: `${WEBSITE_URL}/${slug}/${eventType.slug}`,
       type: "item",
       title: eventType.title,
       subtitle: `${slug}/${eventType.slug}`,

packages/app-store/intercom/lib/isValidCalURL.ts

@@ -1,4 +1,4 @@
-import { CAL_URL } from "@calcom/lib/constants";
+import { WEBSITE_URL } from "@calcom/lib/constants";
 import prisma from "@calcom/prisma";
 
 import type { TextComponent } from "../lib";
@@ -9,11 +9,11 @@ import type { TextComponent } from "../lib";
  * @returns boolean
  */
 export async function isValidCalURL(url: string) {
-  const regex = new RegExp(`^${CAL_URL}/`, `i`);
+  const regex = new RegExp(`^${WEBSITE_URL}/`, `i`);
 
   const error: TextComponent = {
     type: "text",
-    text: `This is not a valid ${CAL_URL.replace("https://", "")} link`,
+    text: `This is not a valid ${WEBSITE_URL.replace("https://", "")} link`,
     style: "error",
     align: "left",
   };

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

@@ -8,7 +8,7 @@ import { z } from "zod";
 import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
 import { RoutingFormEmbedButton, RoutingFormEmbedDialog } from "@calcom/features/embed/RoutingFormEmbed";
 import { classNames } from "@calcom/lib";
-import { CAL_URL } from "@calcom/lib/constants";
+import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
@@ -405,8 +405,8 @@ export const FormAction = forwardRef(function FormAction<T extends typeof Button
   const embedLink = `forms/${routingForm?.id}`;
   const orgBranding = useOrgBranding();
 
-  const formLink = `${orgBranding?.fullDomain ?? CAL_URL}/${embedLink}`;
-  let redirectUrl = `${orgBranding?.fullDomain ?? CAL_URL}/router?form=${routingForm?.id}`;
+  const formLink = `${orgBranding?.fullDomain ?? WEBSITE_URL}/${embedLink}`;
+  let redirectUrl = `${orgBranding?.fullDomain ?? WEBSITE_URL}/router?form=${routingForm?.id}`;
 
   routingForm?.fields?.forEach((field) => {
     redirectUrl += `&${getFieldIdentifier(field)}={Recalled_Response_For_This_Field}`;

packages/app-store/typeform/playwright/tests/basic.e2e.ts

@@ -5,7 +5,7 @@ import {
   addForm as addRoutingForm,
   addOneFieldAndDescriptionAndSaveForm,
 } from "@calcom/app-store/routing-forms/playwright/tests/testUtils";
-import { CAL_URL } from "@calcom/lib/constants";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import type { Fixtures } from "@calcom/web/playwright/lib/fixtures";
 import { test } from "@calcom/web/playwright/lib/fixtures";
 
@@ -46,7 +46,7 @@ test.describe("Typeform App", () => {
       const text = await page.evaluate(async () => {
         return navigator.clipboard.readText();
       });
-      expect(text).toBe(`${CAL_URL}/router?form=${formId}&test={Recalled_Response_For_This_Field}`);
+      expect(text).toBe(`${WEBAPP_URL}/router?form=${formId}&test={Recalled_Response_For_This_Field}`);
     });
 
     test("should copy link in RoutingForms list", async ({ page, context, users }) => {
@@ -66,7 +66,7 @@ test.describe("Typeform App", () => {
       const text = await page.evaluate(async () => {
         return navigator.clipboard.readText();
       });
-      expect(text).toBe(`${CAL_URL}/router?form=${formId}&test={Recalled_Response_For_This_Field}`);
+      expect(text).toBe(`${WEBAPP_URL}/router?form=${formId}&test={Recalled_Response_For_This_Field}`);
     });
   });
 });

packages/emails/src/templates/DisabledAppEmail.tsx

@@ -1,6 +1,6 @@
-import { TFunction } from "next-i18next";
+import type { TFunction } from "next-i18next";
 
-import { CAL_URL } from "@calcom/lib/constants";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 
 import { BaseEmailHtml, CallToAction } from "../components";
 
@@ -30,7 +30,7 @@ export const DisabledAppEmail = (
 
           <CallToAction
             label={t("edit_event_type")}
-            href={`${CAL_URL}/event-types/${eventTypeId}?tabName=apps`}
+            href={`${WEBAPP_URL}/event-types/${eventTypeId}?tabName=apps`}
           />
         </>
       ) : title && eventTypeId ? (
@@ -43,7 +43,7 @@ export const DisabledAppEmail = (
 
           <CallToAction
             label={t("edit_event_type")}
-            href={`${CAL_URL}/event-types/${eventTypeId}?tabName=apps`}
+            href={`${WEBAPP_URL}/event-types/${eventTypeId}?tabName=apps`}
           />
         </>
       ) : appType.some((type) => type === "video") ? (
@@ -54,7 +54,7 @@ export const DisabledAppEmail = (
 
           <hr style={{ marginBottom: "24px" }} />
 
-          <CallToAction label={t("navigate_installed_apps")} href={`${CAL_URL}/apps/installed`} />
+          <CallToAction label={t("navigate_installed_apps")} href={`${WEBAPP_URL}/apps/installed`} />
         </>
       ) : appType.some((type) => type === "calendar") ? (
         <>
@@ -67,7 +67,7 @@ export const DisabledAppEmail = (
 
           <hr style={{ marginBottom: "24px" }} />
 
-          <CallToAction label={t("navigate_installed_apps")} href={`${CAL_URL}/apps/installed`} />
+          <CallToAction label={t("navigate_installed_apps")} href={`${WEBAPP_URL}/apps/installed`} />
         </>
       ) : (
         <>
@@ -77,7 +77,7 @@ export const DisabledAppEmail = (
 
           <hr style={{ marginBottom: "24px" }} />
 
-          <CallToAction label={t("navigate_installed_apps")} href={`${CAL_URL}/apps/installed`} />
+          <CallToAction label={t("navigate_installed_apps")} href={`${WEBAPP_URL}/apps/installed`} />
         </>
       )}
     </BaseEmailHtml>

packages/emails/src/templates/SlugReplacementEmail.tsx

@@ -3,7 +3,7 @@
 import type { TFunction } from "next-i18next";
 import { Trans } from "next-i18next";
 
-import { CAL_URL } from "@calcom/lib/constants";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 
 import { BaseEmailHtml, CallToAction } from "../components";
 
@@ -49,7 +49,7 @@ export const SlugReplacementEmail = (
               <td align="center">
                 <CallToAction
                   label={t("review_event_type")}
-                  href={`${CAL_URL}/event-types`}
+                  href={`${WEBAPP_URL}/event-types`}
                   endIconName="white-arrow-right"
                 />
               </td>

packages/features/auth/lib/getServerSession.ts

@@ -4,7 +4,7 @@ import type { AuthOptions, Session } from "next-auth";
 import { getToken } from "next-auth/jwt";
 
 import checkLicense from "@calcom/features/ee/common/server/checkLicense";
-import { CAL_URL } from "@calcom/lib/constants";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import logger from "@calcom/lib/logger";
 import { safeStringify } from "@calcom/lib/safeStringify";
 import { UserRepository } from "@calcom/lib/server/repository/user";
@@ -94,7 +94,7 @@ export async function getServerSession(options: {
       emailVerified: user.emailVerified,
       email_verified: user.emailVerified !== null,
       role: user.role,
-      image: `${CAL_URL}/${user.username}/avatar.png`,
+      image: `${WEBAPP_URL}/${user.username}/avatar.png`,
       belongsToActiveTeam: token.belongsToActiveTeam,
       org: token.org,
       locale: user.locale ?? undefined,

packages/features/bookings/lib/handleNewBooking/test/fresh-booking.test.ts

@@ -12,7 +12,7 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { describe, expect } from "vitest";
 
 import { appStoreMetadata } from "@calcom/app-store/appStoreMetaData";
-import { CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
+import { WEBSITE_URL, WEBAPP_URL } from "@calcom/lib/constants";
 import { ErrorCode } from "@calcom/lib/errorCodes";
 import { resetTestEmails } from "@calcom/lib/testEmails";
 import { BookingStatus } from "@calcom/prisma/enums";
@@ -219,7 +219,7 @@ describe("handleNewBooking", () => {
         expectSuccessfulBookingCreationEmails({
           booking: {
             uid: createdBooking.uid!,
-            urlOrigin: org ? org.urlOrigin : CAL_URL,
+            urlOrigin: org ? org.urlOrigin : WEBSITE_URL,
           },
           booker,
           organizer,

packages/features/bookings/lib/handleNewBooking/test/recurring-event.test.ts

@@ -1,29 +1,28 @@
 import { v4 as uuidv4 } from "uuid";
 import { describe, expect } from "vitest";
 
-import { WEBAPP_URL, CAL_URL } from "@calcom/lib/constants";
+import { WEBAPP_URL, WEBSITE_URL } from "@calcom/lib/constants";
 import { ErrorCode } from "@calcom/lib/errorCodes";
 import logger from "@calcom/lib/logger";
 import { BookingStatus, SchedulingType } from "@calcom/prisma/enums";
 import { test } from "@calcom/web/test/fixtures/fixtures";
 import {
   createBookingScenario,
-  getGoogleCalendarCredential,
-  TestData,
-  getOrganizer,
   getBooker,
-  getScenarioData,
-  mockSuccessfulVideoMeetingCreation,
-  mockCalendarToHaveNoBusySlots,
   getDate,
+  getGoogleCalendarCredential,
+  getOrganizer,
+  getScenarioData,
+  mockCalendarToHaveNoBusySlots,
+  mockSuccessfulVideoMeetingCreation,
+  TestData,
   Timezones,
 } from "@calcom/web/test/utils/bookingScenario/bookingScenario";
 import { createMockNextJsRequest } from "@calcom/web/test/utils/bookingScenario/createMockNextJsRequest";
 import {
-  // expectWorkflowToBeTriggered,
-  expectSuccessfulBookingCreationEmails,
-  expectBookingToBeInDatabase,
   expectBookingCreatedWebhookToHaveBeenFired,
+  expectBookingToBeInDatabase, // expectWorkflowToBeTriggered,
+  expectSuccessfulBookingCreationEmails,
   expectSuccessfulCalendarEventCreationInCalendar,
 } from "@calcom/web/test/utils/bookingScenario/expects";
 import { getMockRequestDataForBooking } from "@calcom/web/test/utils/bookingScenario/getMockRequestDataForBooking";
@@ -211,7 +210,7 @@ describe("handleNewBooking", () => {
             booking: {
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
               uid: createdBookings[0].uid!,
-              urlOrigin: CAL_URL,
+              urlOrigin: WEBSITE_URL,
             },
             organizer,
             emails,
@@ -559,7 +558,7 @@ describe("handleNewBooking", () => {
             booking: {
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
               uid: createdBookings[0].uid!,
-              urlOrigin: CAL_URL,
+              urlOrigin: WEBSITE_URL,
             },
             organizer,
             emails,
@@ -773,7 +772,7 @@ describe("handleNewBooking", () => {
             booking: {
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
               uid: createdBookings[0].uid!,
-              urlOrigin: CAL_URL,
+              urlOrigin: WEBSITE_URL,
             },
             booker,
             organizer,

packages/features/bookings/lib/handleNewBooking/test/team-bookings/collective-scheduling.test.ts

@@ -4,7 +4,7 @@ import { describe, expect } from "vitest";
 
 import { appStoreMetadata } from "@calcom/app-store/appStoreMetaData";
 import { OrganizerDefaultConferencingAppType } from "@calcom/app-store/locations";
-import { CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
+import { WEBAPP_URL, WEBSITE_URL } from "@calcom/lib/constants";
 import { ErrorCode } from "@calcom/lib/errorCodes";
 import { SchedulingType } from "@calcom/prisma/enums";
 import { BookingStatus } from "@calcom/prisma/enums";
@@ -1486,7 +1486,7 @@ describe("handleNewBooking", () => {
               booking: {
                 uid: createdBooking.uid!,
                 // All booking links are of WEBAPP_URL and not of the org because the team isn't part of the org
-                urlOrigin: CAL_URL,
+                urlOrigin: WEBSITE_URL,
               },
               booker,
               organizer,

packages/features/ee/payments/components/Payment.tsx

@@ -8,7 +8,7 @@ import { useEffect, useState } from "react";
 
 import getStripe from "@calcom/app-store/stripepayment/lib/client";
 import { getBookingRedirectExtraParams, useBookingSuccessRedirect } from "@calcom/lib/bookingSuccessRedirect";
-import { CAL_URL } from "@calcom/lib/constants";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, CheckboxField } from "@calcom/ui";
@@ -48,7 +48,7 @@ type States =
 
 const getReturnUrl = (props: Props) => {
   if (!props.eventType.successRedirectUrl) {
-    return `${CAL_URL}/booking/${props.booking.uid}`;
+    return `${WEBAPP_URL}/booking/${props.booking.uid}`;
   }
 
   const returnUrl = new URL(props.eventType.successRedirectUrl);

packages/features/ee/support/lib/intercom/useIntercom.ts

@@ -4,7 +4,7 @@ import { useIntercom as useIntercomLib } from "react-use-intercom";
 import { z } from "zod";
 
 import dayjs from "@calcom/dayjs";
-import { CAL_URL } from "@calcom/lib/constants";
+import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useHasTeamPlan, useHasPaidPlan } from "@calcom/lib/hooks/useHasPaidPlan";
 import { trpc } from "@calcom/trpc/react";
 
@@ -44,7 +44,7 @@ export const useIntercom = () => {
       customAttributes: {
         //keys should be snake cased
         user_name: data?.username,
-        link: `${CAL_URL}/${data?.username}`,
+        link: `${WEBSITE_URL}/${data?.username}`,
         identity_provider: data?.identityProvider,
         timezone: data?.timeZone,
         locale: data?.locale,

packages/features/ee/workflows/components/WorkflowListPage.tsx

@@ -5,7 +5,6 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 
 import classNames from "@calcom/lib/classNames";
-import { CAL_URL } from "@calcom/lib/constants";
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -24,8 +23,6 @@ import {
 } from "@calcom/ui";
 import { Edit2, Link as LinkIcon, MoreHorizontal, Trash2 } from "@calcom/ui/components/icon";
 
-import { useOrgBranding } from "../../organizations/context/provider";
-import { subdomainSuffix } from "../../organizations/lib/orgDomains";
 import { getActionIcon } from "../lib/getActionIcon";
 import { DeleteDialog } from "./DeleteDialog";
 
@@ -61,9 +58,6 @@ export default function WorkflowListPage({ workflows }: Props) {
   const [parent] = useAutoAnimate<HTMLUListElement>();
   const router = useRouter();
 
-  const orgBranding = useOrgBranding();
-  const urlPrefix = orgBranding ? `${orgBranding.slug}.${subdomainSuffix()}` : CAL_URL;
-
   const mutation = trpc.viewer.workflowOrder.useMutation({
     onError: async (err) => {
       console.error(err.message);

packages/features/embed/Embed.tsx

@@ -18,7 +18,7 @@ import { useTimePreferences } from "@calcom/features/bookings/lib/timePreference
 import DatePicker from "@calcom/features/calendars/DatePicker";
 import { useNonEmptyScheduleDays } from "@calcom/features/schedules";
 import { useSlotsForDate } from "@calcom/features/schedules/lib/use-schedule/useSlotsForDate";
-import { APP_NAME, CAL_URL } from "@calcom/lib/constants";
+import { APP_NAME, WEBSITE_URL } from "@calcom/lib/constants";
 import { weekdayToWeekIndex } from "@calcom/lib/date-fns";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -400,7 +400,7 @@ const EmailEmbedPreview = ({
                                   <tr style={{ height: "25px" }}>
                                     {selectedDateAndTime[key]?.length > 0 &&
                                       selectedDateAndTime[key].map((time) => {
-                                        const bookingURL = `${CAL_URL}/${username}/${eventType.slug}?duration=${eventType.length}&date=${key}&month=${month}&slot=${time}`;
+                                        const bookingURL = `${WEBSITE_URL}/${username}/${eventType.slug}?duration=${eventType.length}&date=${key}&month=${month}&slot=${time}`;
                                         return (
                                           <td
                                             key={time}
@@ -463,7 +463,7 @@ const EmailEmbedPreview = ({
               <div style={{ marginTop: "13px" }}>
                 <a
                   className="more"
-                  href={`${CAL_URL}/${username}/${eventType.slug}`}
+                  href={`${WEBSITE_URL}/${username}/${eventType.slug}`}
                   style={{
                     textDecoration: "none",
                     cursor: "pointer",

packages/features/embed/lib/EmbedCodes.tsx

@@ -1,4 +1,4 @@
-import { CAL_URL, IS_SELF_HOSTED, WEBAPP_URL } from "@calcom/lib/constants";
+import { WEBSITE_URL, IS_SELF_HOSTED, WEBAPP_URL } from "@calcom/lib/constants";
 
 import type { PreviewState } from "../types";
 import { embedLibUrl } from "./constants";
@@ -7,8 +7,8 @@ import { getDimension } from "./getDimension";
 
 export const doWeNeedCalOriginProp = (embedCalOrigin: string) => {
   // If we are self hosted, calOrigin won't be app.cal.com so we need to pass it
-  // If we are not self hosted but it's still different from WEBAPP_URL and CAL_URL, we need to pass it -> It happens for organization booking URL at the moment
-  return IS_SELF_HOSTED || (embedCalOrigin !== WEBAPP_URL && embedCalOrigin !== CAL_URL);
+  // If we are not self hosted but it's still different from WEBAPP_URL and WEBSITE_URL, we need to pass it -> It happens for organization booking URL at the moment
+  return IS_SELF_HOSTED || (embedCalOrigin !== WEBAPP_URL && embedCalOrigin !== WEBSITE_URL);
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -121,7 +121,7 @@ export const Codes = {
 	calLink: "${calLink}",
 	layout: "${previewState.layout}"
   });
-  
+
   ${uiInstructionCode}`;
     },
 
@@ -155,7 +155,7 @@ export const Codes = {
   // \`data-cal-config='${JSON.stringify({
     layout: previewState.layout,
   })}'\`
-  
+
   ${uiInstructionCode}`;
     },
   },

packages/features/eventtypes/components/ChildrenEventTypeSelect.tsx

@@ -2,7 +2,7 @@ import { useAutoAnimate } from "@formkit/auto-animate/react";
 import type { Props } from "react-select";
 
 import { classNames } from "@calcom/lib";
-import { CAL_URL } from "@calcom/lib/constants";
+import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { MembershipRole } from "@calcom/prisma/enums";
 import { Avatar, Badge, Button, ButtonGroup, Select, Switch, Tooltip } from "@calcom/ui";
@@ -106,7 +106,7 @@ export const ChildrenEventTypeSelect = ({
                           color="secondary"
                           target="_blank"
                           variant="icon"
-                          href={`${CAL_URL}/${children.owner?.username}/${children.slug}`}
+                          href={`${WEBSITE_URL}/${children.owner?.username}/${children.slug}`}
                           StartIcon={ExternalLink}
                         />
                       </Tooltip>

packages/features/eventtypes/components/CreateEventTypeDialog.tsx

@@ -1,8 +1,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { isValidPhoneNumber } from "libphonenumber-js";
 import { useRouter } from "next/navigation";
-import { useEffect } from "react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -14,7 +13,7 @@ import { HttpError } from "@calcom/lib/http-error";
 import { md } from "@calcom/lib/markdownIt";
 import slugify from "@calcom/lib/slugify";
 import turndown from "@calcom/lib/turndownService";
-import { SchedulingType, MembershipRole } from "@calcom/prisma/enums";
+import { MembershipRole, SchedulingType } from "@calcom/prisma/enums";
 import { unlockedManagedEventTypeProps } from "@calcom/prisma/zod-utils";
 import { createEventTypeInput } from "@calcom/prisma/zod/custom/eventtype";
 import { trpc } from "@calcom/trpc/react";
@@ -24,12 +23,12 @@ import {
   Dialog,
   DialogClose,
   DialogContent,
+  DialogFooter,
+  Editor,
   Form,
   RadioGroup as RadioArea,
   showToast,
   TextField,
-  Editor,
-  DialogFooter,
 } from "@calcom/ui";
 
 // this describes the uniform data needed to create a new event type on Profile or Team

packages/lib/OgImages.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { CAL_URL, LOGO } from "./constants";
+import { LOGO, WEBAPP_URL } from "./constants";
 
 // Ensures tw prop is typed.
 declare module "react" {
@@ -62,7 +62,7 @@ export const constructMeetingImage = (
     `?type=meeting`,
     `&title=${encodeURIComponent(title)}`,
     `&meetingProfileName=${encodeURIComponent(profile.name)}`,
-    profile.image && `&meetingImage=${encodeURIComponent(CAL_URL + profile.image)}`,
+    profile.image && `&meetingImage=${encodeURIComponent(WEBAPP_URL + profile.image)}`,
     `${users.map((user) => `&names=${encodeURIComponent(user.name)}`).join("")}`,
     `${users.map((user) => `&usernames=${encodeURIComponent(user.username)}`).join("")}`,
     // Joining a multiline string for readability.
@@ -103,7 +103,7 @@ const Wrapper = ({ children, variant = "light", rotateBackground }: WrapperProps
     <img
       tw="flex absolute left-0 top-0 w-full h-[110%]"
       style={rotateBackground ? { transform: "rotate(180deg)" } : undefined}
-      src={`${CAL_URL}/social-bg-${variant}-lines.jpg`}
+      src={`${WEBAPP_URL}/social-bg-${variant}-lines.jpg`}
       alt="background"
       width="1200"
       height="600"
@@ -125,7 +125,7 @@ export const Meeting = ({ title, users = [], profile }: MeetingImageProps) => {
   const avatars = attendees
     .map((user) => {
       if ("image" in user && user?.image) return user.image;
-      if ("username" in user && user?.username) return `${CAL_URL}/${user.username}/avatar.png`;
+      if ("username" in user && user?.username) return `${WEBAPP_URL}/${user.username}/avatar.png`;
       return null;
     })
     .filter(Boolean) as string[];
@@ -138,7 +138,7 @@ export const Meeting = ({ title, users = [], profile }: MeetingImageProps) => {
     <Wrapper variant="dark">
       <div tw="h-full flex flex-col justify-start">
         <div tw="flex items-center justify-center" style={{ fontFamily: "cal", fontWeight: 300 }}>
-          <img src={`${CAL_URL}/${LOGO}`} width="350" alt="Logo" />
+          <img src={`${WEBAPP_URL}/${LOGO}`} width="350" alt="Logo" />
           {avatars.length > 0 && (
             <div style={{ color: "#111827" }} tw="font-bold text-[92px] mx-8 bottom-2">
               /
@@ -191,7 +191,7 @@ const VisualBlur = ({ visualSlug }: { visualSlug: string }) => {
         style={{
           filter: "blur(98px)",
           backgroundColor: "rgba(255, 255, 255, 0.7)",
-          backgroundImage: `url(${CAL_URL}${visualSlug})`,
+          backgroundImage: `url(${WEBAPP_URL}${visualSlug})`,
           backgroundSize: "400px 400px",
         }}
       />
@@ -202,7 +202,7 @@ const VisualBlur = ({ visualSlug }: { visualSlug: string }) => {
         style={{
           filter: "blur(150px)",
           backgroundColor: "rgba(255, 255, 255, 0.7)",
-          backgroundImage: `url(${CAL_URL}${visualSlug})`,
+          backgroundImage: `url(${WEBAPP_URL}${visualSlug})`,
           backgroundSize: "630px 630px",
         }}
       />
@@ -212,13 +212,13 @@ const VisualBlur = ({ visualSlug }: { visualSlug: string }) => {
 
 export const App = ({ name, description, slug }: AppImageProps) => (
   <Wrapper>
-    <img src={`${CAL_URL}/${LOGO}`} width="150" alt="Logo" tw="absolute right-[48px] top-[48px]" />
+    <img src={`${WEBAPP_URL}/${LOGO}`} width="150" alt="Logo" tw="absolute right-[48px] top-[48px]" />
 
     <VisualBlur visualSlug={slug} />
 
     <div tw="flex items-center w-full">
       <div tw="flex">
-        <img src={`${CAL_URL}${slug}`} alt="App icon" width="172" />
+        <img src={`${WEBAPP_URL}${slug}`} alt="App icon" width="172" />
       </div>
     </div>
     <div style={{ color: "#111827" }} tw="flex mt-auto w-full flex-col">
@@ -236,7 +236,7 @@ export const Generic = ({ title, description }: GenericImageProps) => (
   <Wrapper>
     <div tw="h-full flex flex-col justify-start">
       <div tw="flex items-center justify-center" style={{ fontFamily: "cal", fontWeight: 300 }}>
-        <img src={`${CAL_URL}/cal-logo-word-black.svg`} width="350" alt="Logo" />
+        <img src={`${WEBAPP_URL}/cal-logo-word-black.svg`} width="350" alt="Logo" />
       </div>
 
       <div style={{ color: "#111827" }} tw="relative flex text-[54px] w-full flex-col mt-auto">

packages/lib/constants.ts

@@ -78,7 +78,7 @@ export const SEO_IMG_DEFAULT = `${WEBSITE_URL}/og-image.png`;
 // This results in a 80% smaller image 🤯. It is however important that for the query
 // parameters you pass to the /api/social/og/image endpoint, you wrap them in encodeURIComponent
 // as well, otherwise the URL won't be valid.
-export const SEO_IMG_OGIMG = `${CAL_URL}/_next/image?w=1200&q=100&url=${encodeURIComponent(
+export const SEO_IMG_OGIMG = `${WEBAPP_URL}/_next/image?w=1200&q=100&url=${encodeURIComponent(
   "/api/social/og/image"
 )}`;
 export const SEO_IMG_OGIMG_VIDEO = `${WEBSITE_URL}/video-og-image.png`;

packages/lib/getBookerUrl/server.ts

@@ -1,12 +1,12 @@
-import { CAL_URL } from "../constants";
+import { WEBSITE_URL } from "../constants";
 import { getBrand } from "../server/getBrand";
 
 export const getBookerBaseUrl = async (organizationId: number | null) => {
   const orgBrand = await getBrand(organizationId);
-  return orgBrand?.fullDomain ?? CAL_URL;
+  return orgBrand?.fullDomain ?? WEBSITE_URL;
 };
 
 export const getTeamBookerUrl = async (team: { organizationId: number | null }) => {
   const orgBrand = await getBrand(team.organizationId);
-  return orgBrand?.fullDomain ?? CAL_URL;
+  return orgBrand?.fullDomain ?? WEBSITE_URL;
 };

packages/lib/getEventTypeById.ts

@@ -14,7 +14,7 @@ import { customInputSchema, EventTypeMetaDataSchema } from "@calcom/prisma/zod-u
 
 import { TRPCError } from "@trpc/server";
 
-import { CAL_URL } from "./constants";
+import { WEBSITE_URL } from "./constants";
 import { getBookerBaseUrl } from "./getBookerUrl/server";
 
 interface getEventTypeByIdProps {
@@ -304,7 +304,7 @@ export default async function getEventTypeById({
       ? await getBookerBaseUrl(restEventType.team.parentId)
       : restEventType.owner
       ? await getBookerBaseUrl(currentOrganizationId)
-      : CAL_URL,
+      : WEBSITE_URL,
     children: childrenWithUserProfile.flatMap((ch) =>
       ch.owner !== null
         ? {

packages/lib/hooks/useBookerUrl.ts

@@ -1,7 +1,7 @@
 import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
-import { CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
+import { WEBAPP_URL, WEBSITE_URL } from "@calcom/lib/constants";
 
 export const useBookerUrl = () => {
   const orgBranding = useOrgBranding();
-  return orgBranding?.fullDomain ?? CAL_URL ?? WEBAPP_URL;
+  return orgBranding?.fullDomain ?? WEBSITE_URL ?? WEBAPP_URL;
 };

packages/ui/components/apps/AppCard.tsx

@@ -8,7 +8,7 @@ import { doesAppSupportTeamInstall } from "@calcom/app-store/utils";
 import { Spinner } from "@calcom/features/calendars/weeklyview/components/spinner/Spinner";
 import type { UserAdminTeams } from "@calcom/features/ee/teams/lib/getUserAdminTeams";
 import classNames from "@calcom/lib/classNames";
-import { CAL_URL } from "@calcom/lib/constants";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { AppFrontendPayload as App } from "@calcom/types/App";
 import type { CredentialFrontendPayload as Credential } from "@calcom/types/Credential";
@@ -276,7 +276,7 @@ const InstallAppButtonChild = ({
                 StartIcon={(props) => (
                   <Avatar
                     alt={team.logo || ""}
-                    imageSrc={team.logo || `${CAL_URL}/${team.logo}/avatar.png`} // if no image, use default avatar
+                    imageSrc={team.logo || `${WEBAPP_URL}/${team.logo}/avatar.png`} // if no image, use default avatar
                     size="sm"
                     {...props}
                   />