Fix event-type preview links on Vercel Previews (#2919)

* Fix website url

* Fix avatar paths everywhere

* Fix linting errors

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

apps/web/components/Shell.tsx

@@ -478,7 +478,7 @@ function UserDropdown({ small }: { small?: boolean }) {
               // eslint-disable-next-line @next/next/no-img-element
               <img
                 className="rounded-full"
-                src={process.env.NEXT_PUBLIC_WEBSITE_URL + "/" + user?.username + "/avatar.png"}
+                src={WEBAPP_URL + "/" + user?.username + "/avatar.png"}
                 alt={user?.username || "Nameless User"}
               />
             }

apps/web/components/booking/pages/AvailabilityPage.tsx

@@ -32,7 +32,7 @@ import {
   useEmbedNonStylesConfig,
 } from "@calcom/embed-core/embed-iframe";
 import classNames from "@calcom/lib/classNames";
-import { WEBAPP_URL } from "@calcom/lib/constants";
+import { CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { localStorage } from "@calcom/lib/webstorage";
 
@@ -236,7 +236,7 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                           .filter((user) => user.name !== profile.name)
                           .map((user) => ({
                             title: user.name,
-                            image: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/${user.username}/avatar.png`,
+                            image: `${CAL_URL}/${user.username}/avatar.png`,
                             alt: user.name || undefined,
                           })),
                       ].filter((item) => !!item.image) as { image: string; alt?: string; title?: string }[]
@@ -330,7 +330,7 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                           .map((user) => ({
                             title: user.name,
                             alt: user.name,
-                            image: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/${user.username}/avatar.png`,
+                            image: `${CAL_URL}/${user.username}/avatar.png`,
                           })),
                       ].filter((item) => !!item.image) as { image: string; alt?: string; title?: string }[]
                     }

apps/web/components/team/MemberListItem.tsx

@@ -4,7 +4,7 @@ import { MembershipRole } from "@prisma/client";
 import Link from "next/link";
 import { useState } from "react";
 
-import { WEBSITE_URL } from "@calcom/lib/constants";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import Button from "@calcom/ui/Button";
@@ -74,7 +74,7 @@ export default function MemberListItem(props: Props) {
         <div className="flex w-full flex-col justify-between sm:flex-row">
           <div className="flex">
             <Avatar
-              imageSrc={WEBSITE_URL + "/" + props.member.username + "/avatar.png"}
+              imageSrc={WEBAPP_URL + "/" + props.member.username + "/avatar.png"}
               alt={name || ""}
               className="h-9 w-9 rounded-full"
             />

apps/web/components/team/screens/Team.tsx

@@ -5,7 +5,7 @@ import Link from "next/link";
 import { TeamPageProps } from "pages/team/[slug]";
 import React from "react";
 
-import { WEBSITE_URL } from "@calcom/lib/constants";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import Button from "@calcom/ui/Button";
 
 import { useLocale } from "@lib/hooks/useLocale";
@@ -52,7 +52,7 @@ const Team = ({ team }: TeamPageProps) => {
           <div>
             <Avatar
               alt={member.name || ""}
-              imageSrc={WEBSITE_URL + "/" + member.username + "/avatar.png"}
+              imageSrc={WEBAPP_URL + "/" + member.username + "/avatar.png"}
               className="-mt-4 h-12 w-12"
             />
             <section className="line-clamp-4 mt-2 w-full space-y-1">

apps/web/ee/components/team/availability/TeamAvailabilityModal.tsx

@@ -2,7 +2,7 @@ import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import React, { useState, useEffect } from "react";
 
-import { WEBSITE_URL } from "@calcom/lib/constants";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import LicenseRequired from "@ee/components/LicenseRequired";
 
 import { inferQueryOutput, trpc } from "@lib/trpc";
@@ -39,7 +39,7 @@ export default function TeamAvailabilityModal(props: Props) {
         <div className="min-w-64 w-64 space-y-5 p-5 pr-0">
           <div className="flex">
             <Avatar
-              imageSrc={WEBSITE_URL + "/" + props.member?.username + "/avatar.png"}
+              imageSrc={WEBAPP_URL + "/" + props.member?.username + "/avatar.png"}
               alt={props.member?.name || ""}
               className="h-14 w-14 rounded-full"
             />

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={
             <div className="mb-6 flex items-center">
               <Avatar
-                imageSrc={WEBSITE_URL + "/" + member.username + "/avatar.png"}
+                imageSrc={CAL_URL + "/" + member.username + "/avatar.png"}
                 alt={member?.name || ""}
                 className="min-w-10 min-h-10 mt-1 h-10 w-10 rounded-full"
               />

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<typeof getServerSideProps>) => {
   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<typeof getServerSideProps>) => {
     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<typeof getServerSideProps>) => {
   }) => ({
     value: `${id || ""}`,
     label: `${name || ""}`,
-    avatar: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/${username}/avatar.png`,
+    avatar: `${WEBAPP_URL}/${username}/avatar.png`,
   });
 
   const formMethods = useForm<FormValues>({
@@ -954,7 +954,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                       <div className="w-full">
                         <div className="flex rounded-sm">
                           <span className="inline-flex items-center rounded-l-sm border border-r-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500">
-                            {process.env.NEXT_PUBLIC_WEBSITE_URL?.replace(/^(https?:|)\/\//, "")}/
+                            {CAL_URL?.replace(/^(https?:|)\/\//, "")}/
                             {team ? "team/" + team.slug : eventType.users[0].username}/
                           </span>
                           <input
@@ -1753,14 +1753,15 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                                                       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;
       })
     : [];

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
                       )}>
                       <Tooltip content={t("preview") as string}>
                         <a
-                          href={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/${group.profile.slug}/${type.slug}`}
+                          href={`${CAL_URL}/${group.profile.slug}/${type.slug}`}
                           target="_blank"
                           rel="noreferrer"
                           className={classNames("btn-icon appearance-none", type.$disabled && " opacity-30")}>
@@ -271,9 +271,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                         <button
                           onClick={() => {
                             showToast(t("link_copied"), "success");
-                            navigator.clipboard.writeText(
-                              `${process.env.NEXT_PUBLIC_WEBSITE_URL}/${group.profile.slug}/${type.slug}`
-                            );
+                            navigator.clipboard.writeText(`${CAL_URL}/${group.profile.slug}/${type.slug}`);
                           }}
                           className={classNames("btn-icon", type.$disabled && " opacity-30")}>
                           <LinkIcon
@@ -354,8 +352,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                   </DropdownMenuTrigger>
                   <DropdownMenuContent portalled>
                     <DropdownMenuItem>
-                      <Link
-                        href={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/${group.profile.slug}/${type.slug}`}>
+                      <Link href={`${CAL_URL}/${group.profile.slug}/${type.slug}`}>
                         <a target="_blank">
                           <Button
                             color="minimal"
@@ -376,9 +373,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                         data-testid={"event-type-duplicate-" + type.id}
                         StartIcon={ClipboardCopyIcon}
                         onClick={() => {
-                          navigator.clipboard.writeText(
-                            `${process.env.NEXT_PUBLIC_WEBSITE_URL}/${group.profile.slug}/${type.slug}`
-                          );
+                          navigator.clipboard.writeText(`${CAL_URL}/${group.profile.slug}/${type.slug}`);
                           showToast(t("link_copied"), "success");
                         }}>
                         {t("copy_link") as string}
@@ -398,7 +393,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                               .share({
                                 title: t("share"),
                                 text: t("share_event"),
-                                url: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/${group.profile.slug}/${type.slug}`,
+                                url: `${CAL_URL}/${group.profile.slug}/${type.slug}`,
                               })
                               .then(() => showToast(t("link_shared"), "success"))
                               .catch(() => showToast(t("failed"), "error"));
@@ -500,11 +495,10 @@ const EventTypeListHeading = ({ profile, membershipCount }: EventTypeListHeading
           </span>
         )}
         {profile?.slug && (
-          <Link href={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/${profile.slug}`}>
-            <a className="block text-xs text-neutral-500">{`${process.env.NEXT_PUBLIC_WEBSITE_URL?.replace(
-              "https://",
-              ""
-            )}/${profile.slug}`}</a>
+          <Link href={`${CAL_URL}/${profile.slug}`}>
+            <a className="block text-xs text-neutral-500">{`${CAL_URL?.replace("https://", "")}/${
+              profile.slug
+            }`}</a>
           </Link>
         )}
       </div>

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" || "",
                   }))}
                 />
               </div>
@@ -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",
     })),
   }));
 

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"}`;