fix: use hasMounted to render calcom versionm (#6239)

* fix: use hasMounted to render calcom versionm

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* added Credits component but struggling with import

* only made it work with v2 folder. sorry jerone

* added link to releases

* added link to cal.com

* removing script calcomversion for now until we need it

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Peer Richelsen <peer@cal.com>
6237-cal-667-update-lang=-in-html-when-changing-language
Udit Takkar 2023-01-03 01:14:51 +05:30 committed by GitHub
parent 5a03b61d63
commit 8302990f84
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 43 additions and 26 deletions

View File

@ -1,11 +1,12 @@
import classNames from "classnames";
import React from "react";
import { APP_NAME, LOGO, COMPANY_NAME, CalComVersion } from "@calcom/lib/constants";
import { APP_NAME, LOGO } from "@calcom/lib/constants";
import Loader from "@components/Loader";
import { HeadSeo } from "@components/seo/head-seo";
import Credits from "../../../../packages/ui/v2/core/Credits";
interface Props {
title: string;
description: string;
@ -38,9 +39,7 @@ export default function AuthContainer(props: React.PropsWithChildren<Props>) {
</div>
<div className="mt-8 text-center text-sm text-neutral-600">
{props.footerText}
<small className="mx-3 mt-1 mb-2 hidden text-[0.5rem] opacity-50 lg:block">
&copy; {new Date().getFullYear()} {COMPANY_NAME} {CalComVersion}
</small>
<Credits />
</div>
</div>
</div>

View File

@ -5,7 +5,6 @@ import superjson from "superjson";
import "@calcom/embed-core/src/embed-iframe";
import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
import { CalComVersion } from "@calcom/lib/constants";
import { httpBatchLink } from "@calcom/trpc/client/links/httpBatchLink";
import { httpLink } from "@calcom/trpc/client/links/httpLink";
import { loggerLink } from "@calcom/trpc/client/links/loggerLink";
@ -43,10 +42,6 @@ function MyApp(props: AppProps) {
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</Head>
<Script
id="calcom-version"
dangerouslySetInnerHTML={{ __html: `window.CalComVersion = '${CalComVersion}'` }}
/>
{getLayout(
Component.requiresLicense ? (
<LicenseRequired>

View File

@ -56,7 +56,3 @@ export const IS_STRIPE_ENABLED = !!(
);
/** Self hosted shouldn't checkout when creating teams unless required */
export const IS_TEAM_BILLING_ENABLED = IS_STRIPE_ENABLED && (!IS_SELF_HOSTED || HOSTED_CAL_FEATURES);
export const CalComVersion = `v.${pkg.version}-${
process.env.NEXT_PUBLIC_WEBSITE_URL === "https://cal.com" ? "h" : "sh"
}-${process.env.CALCOM_LICENSE_KEY === "" ? "ee" : "ce"}`;

View File

@ -0,0 +1,35 @@
import Link from "next/link";
import { useEffect, useState } from "react";
import { COMPANY_NAME } from "@calcom/lib/constants";
import pkg from "@calcom/web/package.json";
export const CalComVersion = `v.${pkg.version}-${
process.env.NEXT_PUBLIC_WEBSITE_URL === "https://cal.com" ? "h" : "sh"
}-${process.env.CALCOM_LICENSE_KEY === "" ? "ee" : "ce"}`;
export default function Credits() {
const [hasMounted, setHasMounted] = useState(false);
useEffect(() => {
setHasMounted(true);
}, []);
return (
<small className="mx-3 mt-1 mb-2 hidden text-[0.5rem] opacity-50 lg:block">
&copy; {new Date().getFullYear()}{" "}
<Link href="https://go.cal.com/credits">
<a target="_blank" className="hover:underline">
{COMPANY_NAME}
</a>
</Link>{" "}
{hasMounted && (
<Link href="https://go.cal.com/releases">
<a target="_blank" className="hover:underline">
{CalComVersion}
</a>
</Link>
)}
</small>
);
}

View File

@ -16,15 +16,7 @@ import { Tips } from "@calcom/features/tips";
import AdminPasswordBanner from "@calcom/features/users/components/AdminPasswordBanner";
import CustomBranding from "@calcom/lib/CustomBranding";
import classNames from "@calcom/lib/classNames";
import {
APP_NAME,
DESKTOP_APP_LINK,
JOIN_SLACK,
ROADMAP,
WEBAPP_URL,
COMPANY_NAME,
CalComVersion,
} from "@calcom/lib/constants";
import { APP_NAME, DESKTOP_APP_LINK, JOIN_SLACK, ROADMAP, WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import useTheme from "@calcom/lib/hooks/useTheme";
import { trpc } from "@calcom/trpc/react";
@ -46,6 +38,7 @@ import {
import ErrorBoundary from "../../ErrorBoundary";
import { KBarContent, KBarRoot, KBarTrigger } from "../../Kbar";
import Logo from "../../Logo";
import Credits from "./Credits";
import HeadSeo from "./head-seo";
import { SkeletonText } from "./skeleton";
@ -719,6 +712,7 @@ const MobileNavigationMoreItem: React.FC<{
function SideBarContainer() {
const { status } = useSession();
const router = useRouter();
// Make sure that Sidebar is rendered optimistically so that a refresh of pages when logged in have SideBar from the beginning.
// This improves the experience of refresh on app store pages(when logged in) which are SSG.
// Though when logged out, app store pages would temporarily show SideBar until session status is confirmed.
@ -779,9 +773,7 @@ function SideBar() {
<UserDropdown small />
</span>
</div>
<small className="mx-3 mt-1 mb-2 hidden text-[0.5rem] opacity-50 lg:block">
&copy; {new Date().getFullYear()} {COMPANY_NAME} {CalComVersion}
</small>
<Credits />
</div>
</aside>
</div>