Merge branch 'main' into chore/event-type-app-router

calcom · Jan 2, 2025 · 4a44961 · 4a44961
2 parents ef08a5a + 85f96f4
commit 4a44961
Show file tree

Hide file tree

Showing 27 changed files with 237 additions and 187 deletions.
diff --git a/apps/web/pages/403.tsx → apps/web/app/403/page.tsx b/apps/web/pages/403.tsx → apps/web/app/403/page.tsx
@@ -1,20 +1,20 @@
-import Head from "next/head";
+import { _generateMetadata, getTranslate } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
 
 import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui";
 
-import PageWrapper from "@components/PageWrapper";
+export const generateMetadata = () =>
+  _generateMetadata(
+    (t) => `${t("access_denied")} | ${APP_NAME}`,
+    () => ""
+  );
 
-export default function AccessDenied() {
-  const { t } = useLocale();
+async function Error403() {
+  const t = await getTranslate();
 
   return (
     <div className="bg-subtle flex h-screen">
-      <Head>
-        <title>{`${t("access_denied")} | ${APP_NAME}`}</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
       <div className="rtl: bg-default m-auto rounded-md p-10 text-right ltr:text-left">
         <h1 className="font-cal text-emphasis text-6xl">403</h1>
         <h2 className="text-emphasis mt-6 text-2xl font-medium">{t("dont_have_access_this_page")}</h2>
@@ -27,4 +27,4 @@ export default function AccessDenied() {
   );
 }
 
-AccessDenied.PageWrapper = PageWrapper;
+export default WithLayout({ ServerPage: Error403 });
diff --git a/apps/web/app/500/copy-button.tsx b/apps/web/app/500/copy-button.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button, showToast } from "@calcom/ui";
+
+export default function CopyButton({ error }: { error: string }) {
+  const { t } = useLocale();
+
+  return (
+    <Button
+      color="secondary"
+      className="mt-2 border-0 font-sans font-normal hover:bg-gray-300"
+      StartIcon="copy"
+      onClick={() => {
+        navigator.clipboard.writeText(error);
+        showToast("Link copied!", "success");
+      }}>
+      {t("copy")}
+    </Button>
+  );
+}
diff --git a/apps/web/app/500/page.tsx b/apps/web/app/500/page.tsx
@@ -0,0 +1,47 @@
+import { _generateMetadata, getTranslate } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+
+import { APP_NAME } from "@calcom/lib/constants";
+import { Button } from "@calcom/ui";
+
+import CopyButton from "./copy-button";
+
+export const generateMetadata = () =>
+  _generateMetadata(
+    (t) => `${t("something_unexpected_occurred")} | ${APP_NAME}`,
+    () => ""
+  );
+
+async function Error500({ searchParams }: { searchParams: { error?: string } }) {
+  const t = await getTranslate();
+
+  return (
+    <div className="bg-subtle flex h-screen">
+      <div className="rtl: bg-default m-auto rounded-md p-10 text-right ltr:text-left">
+        <h1 className="font-cal text-emphasis text-6xl">500</h1>
+        <h2 className="text-emphasis mt-6 text-2xl font-medium">{t("500_error_message")}</h2>
+        <p className="text-default mb-6 mt-4 max-w-2xl text-sm">{t("something_went_wrong_on_our_end")}</p>
+        {searchParams?.error && (
+          <div className="mb-8 flex flex-col">
+            <p className="text-default mb-4 max-w-2xl text-sm">
+              {t("please_provide_following_text_to_suppport")}:
+            </p>
+            <pre className="bg-emphasis text-emphasis w-full max-w-2xl whitespace-normal break-words rounded-md p-4">
+              {searchParams.error}
+              <br />
+              <CopyButton error={searchParams.error} />
+            </pre>
+          </div>
+        )}
+        <Button href="mailto:[email protected]">{t("contact_support")}</Button>
+        <Button color="secondary" href="javascript:history.back()" className="ml-2">
+          {t("go_back")}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default WithLayout({
+  ServerPage: Error500,
+});
diff --git a/apps/web/app/WithEmbedSSR.test.ts b/apps/web/app/WithEmbedSSR.test.ts
@@ -13,6 +13,9 @@ export function createMockNextJsRequest(...args: Parameters<typeof createMocks>)
   return createMocks<CustomNextApiRequest, CustomNextApiResponse>(...args);
 }
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {};
+
 vi.mock("next/navigation", () => ({
   redirect: vi.fn(),
   notFound: vi.fn(),
@@ -86,7 +89,7 @@ describe("withEmbedSsrAppDir", () => {
               embed: "namespace1",
             },
           })
-        ).catch(() => {});
+        ).catch(noop);
 
         expect(redirect).toHaveBeenCalledWith("/reschedule/embed?layout=week_view&embed=namespace1");
       });
@@ -105,7 +108,7 @@ describe("withEmbedSsrAppDir", () => {
               embed: "namespace1",
             },
           })
-        ).catch(() => {});
+        ).catch(noop);
 
         expect(redirect).toHaveBeenCalledWith(
           "/reschedule/embed?redirectParam=1&layout=week_view&embed=namespace1"
@@ -126,7 +129,7 @@ describe("withEmbedSsrAppDir", () => {
               embed: "",
             },
           })
-        ).catch(() => {});
+        ).catch(noop);
 
         expect(redirect).toHaveBeenCalledWith("/reschedule/embed?redirectParam=1&layout=week_view&embed=");
       });
@@ -147,7 +150,7 @@ describe("withEmbedSsrAppDir", () => {
               embed: "namespace1",
             },
           })
-        ).catch(() => {});
+        ).catch(noop);
 
         expect(redirect).toHaveBeenCalledWith(
           "https://calcom.cal.local/owner/embed?layout=week_view&embed=namespace1"
@@ -168,7 +171,7 @@ describe("withEmbedSsrAppDir", () => {
               embed: "namespace1",
             },
           })
-        ).catch(() => {});
+        ).catch(noop);
 
         expect(redirect).toHaveBeenCalledWith(
           "http://calcom.cal.local/owner/embed?layout=week_view&embed=namespace1"
@@ -189,7 +192,7 @@ describe("withEmbedSsrAppDir", () => {
               embed: "namespace1",
             },
           })
-        ).catch(() => {});
+        ).catch(noop);
 
         expect(redirect).toHaveBeenCalledWith(
           "/calcom.cal.local/owner/embed?layout=week_view&embed=namespace1"
@@ -239,7 +242,7 @@ describe("withEmbedSsrAppDir", () => {
             embed: "",
           },
         })
-      ).catch(() => {});
+      ).catch(noop);
 
       expect(notFound).toHaveBeenCalled();
     });

diff --git a/apps/web/app/_utils.tsx b/apps/web/app/_utils.tsx
@@ -33,7 +33,7 @@ const createI18nInstance = async (locale: string, ns: string) => {
   return _i18n;
 };
 
-const getTranslationWithCache = async (locale: string, ns: string = "common") => {
+const getTranslationWithCache = async (locale: string, ns = "common") => {
   const localeWithFallback = locale ?? "en";
   const i18n = await createI18nInstance(localeWithFallback, ns);
   return i18n.getFixedT(localeWithFallback, ns);

diff --git a/apps/web/app/api/customer-card/route.ts b/apps/web/app/api/customer-card/route.ts
@@ -20,7 +20,7 @@ const inputSchema = z.object({
   cardKeys: z.array(z.string()),
 });
 
-export async function handler(request: Request) {
+async function handler(request: Request) {
   const headersList = headers();
   const requestBody = await request.json();
 

diff --git a/apps/web/app/bookings/[status]/page.tsx b/apps/web/app/bookings/[status]/page.tsx
@@ -1,4 +1,4 @@
-import { PageProps } from "app/_types";
+import type { PageProps } from "app/_types";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 import { redirect } from "next/navigation";

diff --git a/apps/web/app/future/org/[orgSlug]/embed/page.tsx b/apps/web/app/future/org/[orgSlug]/embed/page.tsx
@@ -1,6 +1,4 @@
 import withEmbedSsrAppDir from "app/WithEmbedSSR";
-import type { PageProps as _PageProps } from "app/_types";
-import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 
 import { getServerSideProps } from "@lib/team/[slug]/getServerSideProps";

diff --git a/apps/web/app/future/team/[slug]/[type]/embed/page.tsx b/apps/web/app/future/team/[slug]/[type]/embed/page.tsx
@@ -1,6 +1,4 @@
 import withEmbedSsrAppDir from "app/WithEmbedSSR";
-import type { PageProps as _PageProps } from "app/_types";
-import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 
 import { getServerSideProps } from "@lib/team/[slug]/[type]/getServerSideProps";

diff --git a/apps/web/app/future/team/[slug]/embed/page.tsx b/apps/web/app/future/team/[slug]/embed/page.tsx
@@ -1,7 +1,4 @@
-import { withAppDirSsr } from "app/WithAppDirSsr";
 import withEmbedSsrAppDir from "app/WithEmbedSSR";
-import type { PageProps as _PageProps } from "app/_types";
-import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 
 import { getServerSideProps } from "@lib/team/[slug]/getServerSideProps";

diff --git a/apps/web/app/icons/IconGrid.tsx b/apps/web/app/icons/IconGrid.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { Icon } from "@calcom/ui";
+import type { IconName } from "@calcom/ui";
+
+export const IconGrid = (props: {
+  title: string;
+  icons: IconName[];
+  rootClassName?: string;
+  iconClassName?: string;
+}) => (
+  <div className={props.rootClassName}>
+    <h2 className="font-cal mt-6 text-lg font-medium">{props.title}</h2>
+    <div className="grid grid-cols-2 lg:grid-cols-6">
+      {props.icons.map((icon) => {
+        return (
+          <div key={icon} className="flex items-center gap-1">
+            <Icon name={icon} className={props.iconClassName} />
+            <div>{icon}</div>
+          </div>
+        );
+      })}
+    </div>
+  </div>
+);
diff --git a/apps/web/app/icons/page.tsx b/apps/web/app/icons/page.tsx
@@ -0,0 +1,46 @@
+import { _generateMetadata, getTranslate } from "app/_utils";
+import { Inter } from "next/font/google";
+import localFont from "next/font/local";
+
+import { type IconName, IconSprites } from "@calcom/ui";
+
+import { lucideIconList } from "../../../../packages/ui/components/icon/icon-list.mjs";
+import { IconGrid } from "./IconGrid";
+
+const interFont = Inter({ subsets: ["latin"], variable: "--font-inter", preload: true, display: "swap" });
+const calFont = localFont({
+  src: "../../fonts/CalSans-SemiBold.woff2",
+  variable: "--font-cal",
+  preload: true,
+  display: "swap",
+  weight: "600",
+});
+export const generateMetadata = async () => {
+  return await _generateMetadata(
+    (t) => t("icon_showcase"),
+    () => ""
+  );
+};
+export default async function IconsPage() {
+  const icons = Array.from(lucideIconList).sort() as IconName[];
+  const t = await getTranslate();
+
+  return (
+    <div className={`${interFont.variable} ${calFont.variable}`}>
+      <div className="bg-subtle flex h-screen">
+        <IconSprites />
+        <div className="bg-default m-auto min-w-full rounded-md p-10 text-right ltr:text-left">
+          <h1 className="text-emphasis font-cal text-2xl font-medium">{t("icons_showcase")}</h1>
+          <IconGrid title="Regular Icons" icons={icons} />
+          <IconGrid
+            title="Filled Icons"
+            icons={icons}
+            rootClassName="bg-darkgray-100 text-gray-50"
+            iconClassName="fill-blue-500"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+export const dynamic = "force-static";
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -76,6 +76,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
         <script
           nonce={nonce}
           id="headScript"
+          // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML={{
             __html: `
               window.calNewLocale = "${locale}";

diff --git a/apps/web/lib/d/[link]/[slug]/getServerSideProps.tsx b/apps/web/lib/d/[link]/[slug]/getServerSideProps.tsx
@@ -1,3 +1,4 @@
+import type { EmbedProps } from "app/WithEmbedSSR";
 import type { GetServerSidePropsContext } from "next";
 import { z } from "zod";
 
@@ -12,7 +13,6 @@ import { RedirectType } from "@calcom/prisma/enums";
 
 import { getTemporaryOrgRedirect } from "@lib/getTemporaryOrgRedirect";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
-import type { EmbedProps } from "app/WithEmbedSSR";
 
 export type PageProps = inferSSRProps<typeof getServerSideProps> & EmbedProps;
 

diff --git a/apps/web/middleware.ts b/apps/web/middleware.ts
@@ -153,6 +153,8 @@ export const config = {
   // Next.js Doesn't support spread operator in config matcher, so, we must list all paths explicitly here.
   // https://github.com/vercel/next.js/discussions/42458
   matcher: [
+    "/403",
+    "/500",
     "/d/:path*",
     "/more/:path*",
     "/maintenance/:path*",

diff --git a/apps/web/modules/bookings/views/bookings-single-view.tsx b/apps/web/modules/bookings/views/bookings-single-view.tsx
@@ -827,7 +827,8 @@ export default function Success(props: PageProps) {
                                     )}`
                                   : ""
                               }`}
-                              className="text-default border-subtle h-10 w-10 rounded-sm border px-3 py-2 ltr:mr-2 rtl:ml-2">
+                              className="text-default border-subtle h-10 w-10 rounded-sm border px-3 py-2 ltr:mr-2 rtl:ml-2"
+                              target="_blank">
                               <svg
                                 className="-mt-1.5 inline-block h-4 w-4"
                                 fill="currentColor"

diff --git a/apps/web/next.config.js b/apps/web/next.config.js
@@ -395,6 +395,11 @@ const nextConfig = {
       value: "cross-origin",
     };
 
+    const ACCESS_CONTROL_ALLOW_ORIGIN_HEADER = {
+      key: "Access-Control-Allow-Origin",
+      value: "*",
+    };
+
     return [
       {
         source: "/auth/:path*",
@@ -464,7 +469,7 @@ const nextConfig = {
         },
         {
           source: "/icons/sprite.svg",
-          headers: [CORP_CROSS_ORIGIN_HEADER],
+          headers: [CORP_CROSS_ORIGIN_HEADER, ACCESS_CONTROL_ALLOW_ORIGIN_HEADER],
         },
       ],
       ...(isOrganizationsEnabled