There is lot of hardcoding links in application (#3130)

* There is lot of hardcoding links in application

* Apply suggestions from code review

Co-authored-by: Joe Au-Yeung <[email protected]>

Co-authored-by: gitstart <[email protected]>
Co-authored-by: Omar López <[email protected]>
Co-authored-by: Joe Au-Yeung <[email protected]>

apps/docs/theme.config.js

@@ -1,3 +1,5 @@
+import { SEO_IMG_DEFAULT, DOCS_URL } from "@calcom/lib/constants";
+
 const themeConfig = {
   github: "https://github.com/calcom/cal.com",
   docsRepositoryBase: "https://github.com/calcom/cal.com/blob/main/apps/docs/pages",
@@ -18,11 +20,11 @@ const themeConfig = {
         content="Explore advice and explanations for all of our features, and discover new tips and tricks to get the most out of your subscription."
       />
       <meta name="twitter:card" content="summary_large_image" />
-      <meta name="twitter:image" content="https://cal.com/og-image.png" />
+      <meta name="twitter:image" content={SEO_IMG_DEFAULT} />
       <meta name="twitter:site:domain" content="docs.cal.com" />
-      <meta name="twitter:url" content="https://docs.cal.com" />
+      <meta name="twitter:url" content={DOCS_URL} />
       <meta name="og:title" content="Cal.com Documentation" />
-      <meta name="og:image" content="https://cal.com/og-image.png" />
+      <meta name="og:image" content={SEO_IMG_DEFAULT} />
       <meta name="apple-mobile-web-app-title" content="Cal.com Docs" />
 
       <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

apps/web/components/Logo.tsx

@@ -1,18 +1,15 @@
+import { LOGO_ICON, LOGO } from "@calcom/lib/constants";
+
 export default function Logo({ small, icon }: { small?: boolean; icon?: boolean }) {
   return (
     <h1 className="inline">
       <strong>
         {icon ? (
           // eslint-disable-next-line @next/next/no-img-element
-          <img className="mx-auto w-9" alt="Cal" title="Cal" src="/cal-com-icon-white.svg" />
+          <img className="mx-auto w-9" alt="Cal" title="Cal" src={LOGO_ICON} />
         ) : (
           // eslint-disable-next-line @next/next/no-img-element
-          <img
-            className={small ? "h-4 w-auto" : "h-5 w-auto"}
-            alt="Cal"
-            title="Cal"
-            src="/calendso-logo-white-word.svg"
-          />
+          <img className={small ? "h-4 w-auto" : "h-5 w-auto"} alt="Cal" title="Cal" src={LOGO} />
         )}
       </strong>
     </h1>

apps/web/components/Shell.tsx

@@ -20,6 +20,7 @@ import React, { Fragment, ReactNode, useEffect, useState } from "react";
 import { Toaster } from "react-hot-toast";
 
 import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
+import { WEBAPP_URL, JOIN_SLACK, ROADMAP } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
 import Dropdown, {
@@ -34,7 +35,6 @@ import HelpMenuItem from "@ee/components/support/HelpMenuItem";
 
 import ErrorBoundary from "@lib/ErrorBoundary";
 import classNames from "@lib/classNames";
-import { WEBAPP_URL } from "@lib/config/constants";
 import { shouldShowOnboarding } from "@lib/getting-started";
 import useMeQuery from "@lib/hooks/useMeQuery";
 import useTheme from "@lib/hooks/useTheme";
@@ -555,7 +555,7 @@ function UserDropdown({ small }: { small?: boolean }) {
             <DropdownMenuSeparator className="h-px bg-gray-200" />
             <DropdownMenuItem>
               <a
-                href="https://cal.com/slack"
+                href={JOIN_SLACK}
                 target="_blank"
                 rel="noreferrer"
                 className="flex px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">
@@ -588,7 +588,7 @@ function UserDropdown({ small }: { small?: boolean }) {
               <a
                 target="_blank"
                 rel="noopener noreferrer"
-                href="https://cal.com/roadmap"
+                href={ROADMAP}
                 className="flex items-center px-4 py-2 text-sm text-gray-700">
                 <MapIcon className="h-5 w-5 text-gray-500 ltr:mr-3 rtl:ml-3" /> {t("visit_roadmap")}
               </a>

apps/web/components/ui/AuthContainer.tsx

@@ -1,6 +1,8 @@
 import classNames from "classnames";
 import React from "react";
 
+import { LOGO } from "@calcom/lib/constants";
+
 import Loader from "@components/Loader";
 import { HeadSeo } from "@components/seo/head-seo";
 
@@ -20,7 +22,7 @@ export default function AuthContainer(props: React.PropsWithChildren<Props>) {
       <div className={classNames(props.showLogo ? "text-center" : "", "sm:mx-auto sm:w-full sm:max-w-md")}>
         {props.showLogo && (
           // eslint-disable-next-line @next/next/no-img-element
-          <img className="mx-auto h-6" src="/calendso-logo-white-word.svg" alt="Cal.com Logo" />
+          <img className="mx-auto h-6" src={LOGO} alt="Cal.com Logo" />
         )}
         {props.heading && (
           <h2 className="font-cal mt-6 text-center text-3xl text-neutral-900">{props.heading}</h2>

apps/web/components/ui/PoweredByCal.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 
 import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
+import { POWERED_BY_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 const PoweredByCal = () => {
@@ -8,7 +9,7 @@ const PoweredByCal = () => {
   const isEmbed = useIsEmbed();
   return (
     <div className={"p-1 text-center text-xs sm:text-right" + (isEmbed ? " max-w-3xl" : "")}>
-      <Link href={`https://cal.com?utm_source=embed&utm_medium=powered-by-button`}>
+      <Link href={POWERED_BY_URL}>
         <a target="_blank" className="text-bookinglight opacity-50 hover:opacity-100 dark:text-white">
           {t("powered_by")}{" "}
           {

apps/web/ee/components/stripe/PaymentPage.tsx

@@ -7,6 +7,7 @@ import { FormattedNumber, IntlProvider } from "react-intl";
 
 import dayjs from "@calcom/dayjs";
 import { sdkActionManager, useIsEmbed } from "@calcom/embed-core/embed-iframe";
+import { WEBSITE_URL } from "@calcom/lib/constants";
 import getStripe from "@calcom/stripe/client";
 import PaymentComponent from "@ee/components/stripe/Payment";
 import { PaymentPageProps } from "@ee/pages/payment/[uid]";
@@ -141,7 +142,7 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
                 </div>
                 {!props.profile.hideBranding && (
                   <div className="mt-4 border-t pt-4 text-center text-xs text-gray-400 dark:border-gray-900 dark:text-white">
-                    <a href="https://cal.com/signup">{t("create_booking_link_with_calcom")}</a>
+                    <a href={`${WEBSITE_URL}/signup`}>{t("create_booking_link_with_calcom")}</a>
                   </div>
                 )}
               </div>

apps/web/lib/config/next-seo.config.ts

@@ -1,10 +1,12 @@
 import { DefaultSeoProps } from "next-seo";
 
+import { SEO_IMG_DEFAULT, SEO_IMG_OGIMG } from "@calcom/lib/constants";
+
 import { HeadSeoProps } from "@components/seo/head-seo";
 
 const seoImages = {
-  default: "https://cal.com/og-image.png",
-  ogImage: "https://og-image-one-pi.vercel.app/",
+  default: SEO_IMG_DEFAULT,
+  ogImage: SEO_IMG_OGIMG,
 };
 
 export const getSeoImage = (key: keyof typeof seoImages): string => {

apps/web/pages/404.tsx

@@ -5,6 +5,8 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 
+import { DOCS_URL, JOIN_SLACK, WEBSITE_URL } from "@calcom/lib/constants";
+
 import { useLocale } from "@lib/hooks/useLocale";
 
 import { HeadSeo } from "@components/seo/head-seo";
@@ -22,19 +24,19 @@ export default function Custom404() {
       title: t("documentation"),
       description: t("documentation_description"),
       icon: DocumentTextIcon,
-      href: "https://docs.cal.com",
+      href: DOCS_URL,
     },
     {
       title: t("blog"),
       description: t("blog_description"),
       icon: BookOpenIcon,
-      href: "https://cal.com/blog",
+      href: `${WEBSITE_URL}/blog`,
     },
   ];
 
-  const [url, setUrl] = useState("https://cal.com/signup?username=");
+  const [url, setUrl] = useState(`${WEBSITE_URL}/signup?username=`);
   useEffect(() => {
-    setUrl(`https://cal.com/signup?username=${username.replace("/", "")}`);
+    setUrl(`${WEBSITE_URL}/signup?username=${username.replace("/", "")}`);
   }, [username]);
 
   const isSuccessPage = router.asPath.startsWith("/success");
@@ -72,7 +74,7 @@ export default function Custom404() {
                 <ul role="list" className="mt-4">
                   <li className="border-2 border-green-500 px-4 py-2">
                     <a
-                      href="https://cal.com/pricing?infra"
+                      href={`${WEBSITE_URL}/pricing?infra`}
                       className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                       <div className="flex-shrink-0">
                         <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
@@ -99,7 +101,7 @@ export default function Custom404() {
 
                 <ul role="list" className="divide-y divide-gray-200 border-gray-200">
                   <li className="px-4 py-2">
-                    <Link href="https://docs.cal.com/self-hosting/installation">
+                    <Link href={`${DOCS_URL}/self-hosting/installation`}>
                       <a className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                         <div className="flex-shrink-0">
                           <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
@@ -123,7 +125,7 @@ export default function Custom404() {
                   </li>
                   <li className="px-4 py-2">
                     <a
-                      href="https://cal.com/slack"
+                      href={JOIN_SLACK}
                       className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                       <div className="flex-shrink-0">
                         <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
@@ -164,7 +166,7 @@ export default function Custom404() {
                   </li>
                 </ul>
                 <div className="mt-8">
-                  <Link href="https://cal.com/enterprise">
+                  <Link href={`${WEBSITE_URL}/enterprise`}>
                     <a className="text-base font-medium text-black hover:text-gray-500">
                       {t("contact_sales")}
                       <span aria-hidden="true"> &rarr;</span>
@@ -263,7 +265,7 @@ export default function Custom404() {
                   ))}
                   <li className="px-4 py-2">
                     <a
-                      href="https://cal.com/slack"
+                      href={JOIN_SLACK}
                       className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                       <div className="flex-shrink-0">
                         <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">

apps/web/pages/500.tsx

@@ -1,5 +1,6 @@
 import Head from "next/head";
 
+import { WEBSITE_URL } from "@calcom/lib/constants";
 import Button from "@calcom/ui/Button";
 
 export default function Error500() {
@@ -23,7 +24,7 @@ export default function Error500() {
           Something went wrong on our end. Get in touch with our support team, and we’ll get it fixed right
           away for you.
         </p>
-        <Button href="https://cal.com/support">Contact support</Button>
+        <Button href={`${WEBSITE_URL}/support`}>Contact support</Button>
         <Button color="secondary" href="javascript:history.back()" className="ml-2">
           Go back
         </Button>

apps/web/pages/apps/installed.tsx

@@ -3,6 +3,7 @@ import Image from "next/image";
 import React from "react";
 
 import { InstallAppButton } from "@calcom/app-store/components";
+import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import type { App } from "@calcom/types/App";
@@ -161,7 +162,7 @@ function Web3Container() {
                       <a
                         className="text-blue-500"
                         target="_blank"
-                        href="https://cal.com/web3"
+                        href={`${WEBSITE_URL}/web3`}
                         rel="noreferrer">
                         Read more
                       </a>

apps/web/pages/auth/logout.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
+import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
 
@@ -22,7 +23,7 @@ export default function Logout(props: Props) {
   const router = useRouter();
   useEffect(() => {
     if (props.query?.survey === "true") {
-      router.push("https://cal.com/cancellation");
+      router.push(`${WEBSITE_URL}/cancellation`);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.query?.survey]);

apps/web/pages/getting-started.tsx

@@ -16,6 +16,7 @@ import getApps from "@calcom/app-store/utils";
 import { getCalendarCredentials, getConnectedCalendars } from "@calcom/core/CalendarManager";
 import dayjs from "@calcom/dayjs";
 import { ResponseUsernameApi } from "@calcom/ee/lib/core/checkPremiumUsername";
+import { DOCS_URL } from "@calcom/lib/constants";
 import { Alert } from "@calcom/ui/Alert";
 import Button from "@calcom/ui/Button";
 import { Form } from "@calcom/ui/form/fields";
@@ -292,7 +293,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
               </h2>
               <p className="mb-2 text-sm text-gray-500">
                 {t("you_will_need_to_generate")}. Find out how to do this{" "}
-                <a href="https://docs.cal.com/import">here</a>.
+                <a href={`${DOCS_URL}/import`}>here</a>.
               </p>
               <form
                 className="flex"

apps/web/pages/success.tsx

@@ -19,6 +19,7 @@ import {
   useIsEmbed,
 } from "@calcom/embed-core/embed-iframe";
 import { parseRecurringEvent } from "@calcom/lib";
+import { WEBSITE_URL } from "@calcom/lib/constants";
 import { getDefaultEvent } from "@calcom/lib/defaultEvents";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";

apps/web/pages/video/[uid].tsx

@@ -6,6 +6,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
+import { WEBSITE_URL, SEO_IMG_OGIMG_VIDEO } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import prisma, { bookingMinimalSelect } from "@calcom/prisma";
 import { inferSSRProps } from "@calcom/types/inferSSRProps";
@@ -110,14 +111,14 @@ export default function JoinCall(props: JoinCallPageProps) {
         <title>Cal.com Video</title>
         <meta name="title" content="Cal.com Video" />
         <meta name="description" content={t("quick_video_meeting")} />
-        <meta property="og:image" content="https://cal.com/video-og-image.png" />
+        <meta property="og:image" content={SEO_IMG_OGIMG_VIDEO} />
         <meta property="og:type" content="website" />
-        <meta property="og:url" content="https://cal.com/video" />
+        <meta property="og:url" content={`${WEBSITE_URL}/video`} />
         <meta property="og:title" content="Cal.com Video" />
         <meta property="og:description" content={t("quick_video_meeting")} />
-        <meta property="twitter:image" content="https://cal.com/video-og-image.png" />
+        <meta property="twitter:image" content={SEO_IMG_OGIMG_VIDEO} />
         <meta property="twitter:card" content="summary_large_image" />
-        <meta property="twitter:url" content="https://cal.com/video" />
+        <meta property="twitter:url" content={`${WEBSITE_URL}/video`} />
         <meta property="twitter:title" content="Cal.com Video" />
         <meta property="twitter:description" content={t("quick_video_meeting")} />
       </Head>
@@ -128,7 +129,7 @@ export default function JoinCall(props: JoinCallPageProps) {
               // eslint-disable-next-line @next/next/no-img-element
               <img
                 className="h-5·w-auto fixed z-10 hidden sm:inline-block"
-                src="https://cal.com/logo-white.svg"
+                src={`${WEBSITE_URL}/logo-white.svg`}
                 alt="Cal.com Logo"
                 style={{
                   top: 46,

packages/ee/lib/core/checkPremiumUsername.ts

@@ -1,4 +1,5 @@
 import slugify from "@calcom/lib/slugify";
+import { WEBSITE_URL } from "@calcom/lib/constants";
 
 export type ResponseUsernameApi = {
   available: boolean;
@@ -9,7 +10,7 @@ export type ResponseUsernameApi = {
 
 export async function checkPremiumUsername(_username: string): Promise<ResponseUsernameApi> {
   const username = slugify(_username);
-  const response = await fetch("https://cal.com/api/username", {
+  const response = await fetch(`${ WEBSITE_URL }/api/username`, {
     credentials: "include",
     headers: {
       "Content-Type": "application/json",

packages/lib/constants.ts

@@ -18,3 +18,12 @@ export const TRIAL_LIMIT_DAYS = 14;
 export const HOSTED_CAL_FEATURES = process.env.HOSTED_CAL_FEATURES || BASE_URL === "https://app.cal.com";
 /** @deprecated use `WEBAPP_URL` */
 export const NEXT_PUBLIC_BASE_URL = process.env.NEXT_PUBLIC_WEBAPP_URL || `https://${process.env.VERCEL_URL}`;
+export const LOGO = "/calendso-logo-white-word.svg";
+export const LOGO_ICON = "/cal-com-icon-white.svg";
+export const ROADMAP = "https://cal.com/roadmap";
+export const JOIN_SLACK = "https://cal.com/slack";
+export const POWERED_BY_URL = `${WEBSITE_URL}?utm_source=embed&utm_medium=powered-by-button`;
+export const DOCS_URL = "https://docs.cal.com";
+export const SEO_IMG_DEFAULT = `${WEBSITE_URL}/og-image.png`;
+export const SEO_IMG_OGIMG = "https://og-image-one-pi.vercel.app/";
+export const SEO_IMG_OGIMG_VIDEO = `${WEBSITE_URL}/video-og-image.png`;