diff --git a/apps/web/ee/components/team/availability/TeamAvailabilityScreen.tsx b/apps/web/ee/components/team/availability/TeamAvailabilityScreen.tsx
index fa5b6d61ee..e81319719a 100644
--- a/apps/web/ee/components/team/availability/TeamAvailabilityScreen.tsx
+++ b/apps/web/ee/components/team/availability/TeamAvailabilityScreen.tsx
@@ -3,7 +3,7 @@ import React, { useState, useEffect, CSSProperties } from "react";
import AutoSizer from "react-virtualized-auto-sizer";
import { FixedSizeList as List } from "react-window";
-import { WEBSITE_URL } from "@calcom/lib/constants";
+import { CAL_URL } from "@calcom/lib/constants";
import { inferQueryOutput, trpc } from "@lib/trpc";
@@ -46,7 +46,7 @@ export default function TeamAvailabilityScreen(props: Props) {
HeaderComponent={
diff --git a/apps/web/pages/event-types/[type].tsx b/apps/web/pages/event-types/[type].tsx
index 0bb44a9b5d..eb63fb1d27 100644
--- a/apps/web/pages/event-types/[type].tsx
+++ b/apps/web/pages/event-types/[type].tsx
@@ -34,6 +34,7 @@ import { z } from "zod";
import { SelectGifInput } from "@calcom/app-store/giphy/components";
import getApps, { getLocationOptions } from "@calcom/app-store/utils";
+import { CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import showToast from "@calcom/lib/notification";
import { StripeData } from "@calcom/stripe/server";
@@ -326,7 +327,6 @@ const EventTypePage = (props: inferSSRProps
) => {
const defaultSeats = 2;
const defaultSeatsInput = 6;
const [enableSeats, setEnableSeats] = useState(!!eventType.seatsPerTimeSlot);
- const [inputSeatNumber, setInputSeatNumber] = useState(eventType.seatsPerTimeSlot! >= defaultSeatsInput);
const periodType =
PERIOD_TYPES.find((s) => s.type === eventType.periodType) ||
@@ -453,11 +453,11 @@ const EventTypePage = (props: inferSSRProps) => {
endDate: new Date(eventType.periodEndDate || Date.now()),
});
- const permalink = `${process.env.NEXT_PUBLIC_WEBSITE_URL}/${
- team ? `team/${team.slug}` : eventType.users[0].username
- }/${eventType.slug}`;
+ const permalink = `${CAL_URL}/${team ? `team/${team.slug}` : eventType.users[0].username}/${
+ eventType.slug
+ }`;
- const placeholderHashedLink = `${process.env.NEXT_PUBLIC_WEBSITE_URL}/d/${hashedUrl}/${eventType.slug}`;
+ const placeholderHashedLink = `${CAL_URL}/d/${hashedUrl}/${eventType.slug}`;
const mapUserToValue = ({
id,
@@ -470,7 +470,7 @@ const EventTypePage = (props: inferSSRProps) => {
}) => ({
value: `${id || ""}`,
label: `${name || ""}`,
- avatar: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/${username}/avatar.png`,
+ avatar: `${WEBAPP_URL}/${username}/avatar.png`,
});
const formMethods = useForm({
@@ -954,7 +954,7 @@ const EventTypePage = (props: inferSSRProps) => {
- {process.env.NEXT_PUBLIC_WEBSITE_URL?.replace(/^(https?:|)\/\//, "")}/
+ {CAL_URL?.replace(/^(https?:|)\/\//, "")}/
{team ? "team/" + team.slug : eventType.users[0].username}/
) => {
classNamePrefix="react-select"
className="react-select-container focus:border-primary-500 focus:ring-primary-500 block w-full min-w-0 flex-auto rounded-sm border border-gray-300 sm:text-sm "
onChange={(val) => {
- if (val!.value === -1) {
+ if (!val) {
+ return;
+ }
+ if (val.value === -1) {
formMethods.setValue(
"seatsPerTimeSlot",
defaultSeatsInput
);
- setInputSeatNumber(true);
} else {
- setInputSeatNumber(false);
formMethods.setValue(
"seatsPerTimeSlot",
val!.value
@@ -2296,7 +2297,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
const teamMembers = eventTypeObject.team
? eventTypeObject.team.members.map((member) => {
const user = member.user;
- user.avatar = `${process.env.NEXT_PUBLIC_WEBSITE_URL}/${user.username}/avatar.png`;
+ user.avatar = `${CAL_URL}/${user.username}/avatar.png`;
return user;
})
: [];
diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx
index fc138c9db3..fff48aa0a8 100644
--- a/apps/web/pages/event-types/index.tsx
+++ b/apps/web/pages/event-types/index.tsx
@@ -19,7 +19,7 @@ import Link from "next/link";
import { useRouter } from "next/router";
import React, { Fragment, useEffect, useState } from "react";
-import { WEBAPP_URL } from "@calcom/lib/constants";
+import { CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import showToast from "@calcom/lib/notification";
import { Button } from "@calcom/ui";
@@ -246,7 +246,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
truncateAfter={4}
items={type.users.map((organizer) => ({
alt: organizer.name || "",
- image: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/${organizer.username}/avatar.png`,
+ image: `${WEBAPP_URL}/${organizer.username}/avatar.png`,
}))}
/>
)}
@@ -257,7 +257,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
)}>
@@ -271,9 +271,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
diff --git a/apps/web/pages/team/[slug].tsx b/apps/web/pages/team/[slug].tsx
index 0fd9462de3..aedf79df67 100644
--- a/apps/web/pages/team/[slug].tsx
+++ b/apps/web/pages/team/[slug].tsx
@@ -6,7 +6,7 @@ import Link from "next/link";
import React, { useEffect } from "react";
import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
-import { WEBSITE_URL } from "@calcom/lib/constants";
+import { CAL_URL } from "@calcom/lib/constants";
import Button from "@calcom/ui/Button";
import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
@@ -68,7 +68,7 @@ function TeamPage({ team }: TeamPageProps) {
size={10}
items={type.users.map((user) => ({
alt: user.name || "",
- image: WEBSITE_URL + "/" + user.username + "/avatar.png" || "",
+ image: CAL_URL + "/" + user.username + "/avatar.png" || "",
}))}
/>
@@ -147,7 +147,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
...type,
users: type.users.map((user) => ({
...user,
- avatar: WEBSITE_URL + "/" + user.username + "/avatar.png",
+ avatar: CAL_URL + "/" + user.username + "/avatar.png",
})),
}));
diff --git a/packages/lib/constants.ts b/packages/lib/constants.ts
index 4d0fa7ad95..2f876b4fb6 100644
--- a/packages/lib/constants.ts
+++ b/packages/lib/constants.ts
@@ -2,6 +2,12 @@ export const WEBAPP_URL = process.env.NEXT_PUBLIC_WEBAPP_URL || `https://${proce
/** @deprecated use `WEBAPP_URL` */
export const BASE_URL = WEBAPP_URL;
export const WEBSITE_URL = process.env.NEXT_PUBLIC_WEBSITE_URL || "https://cal.com";
+
+// This is the URL from which all Cal Links and their assets are served.
+// Use website URL to make links shorter(cal.com and not app.cal.com)
+// As website isn't setup for preview environments, use the webapp url instead
+export const CAL_URL = new URL(WEBAPP_URL).hostname.endsWith(".vercel.app") ? WEBAPP_URL : WEBSITE_URL;
+
export const CONSOLE_URL = WEBAPP_URL.startsWith("http://localhost")
? "http://localhost:3004"
: `https://console.cal.${process.env.VERCEL_ENV === "production" ? "com" : "dev"}`;