From 828940b4d68086ce7dc1bd493bf8705fe2aac4e6 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Sat, 25 Jan 2025 18:23:41 +0000
Subject: [PATCH] chore: app router - /payment pages (#18152)

* remove Head from payment page comp

* remove route from pages router

* move out of future folder

* add to config.matcher

* remove unneeded code

* update middleware

* fix

* fix
---
 apps/web/app/future/payment/[uid]/page.tsx    | 17 -------------
 apps/web/app/payment/[uid]/page.tsx           | 24 +++++++++++++++++++
 apps/web/middleware.ts                        |  1 +
 apps/web/pages/payment/[uid].tsx              | 11 ---------
 .../ee/payments/components/PaymentPage.tsx    |  7 ------
 5 files changed, 25 insertions(+), 35 deletions(-)
 delete mode 100644 apps/web/app/future/payment/[uid]/page.tsx
 create mode 100644 apps/web/app/payment/[uid]/page.tsx
 delete mode 100644 apps/web/pages/payment/[uid].tsx

diff --git a/apps/web/app/future/payment/[uid]/page.tsx b/apps/web/app/future/payment/[uid]/page.tsx
deleted file mode 100644
index 38883bcd3d..0000000000
--- a/apps/web/app/future/payment/[uid]/page.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { withAppDirSsr } from "app/WithAppDirSsr";
-import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
-
-import PaymentPage from "@calcom/features/ee/payments/components/PaymentPage";
-import { getServerSideProps, type PaymentPageProps } from "@calcom/features/ee/payments/pages/payment";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    // the title does not contain the eventName as in the legacy page
-    (t) => `${t("payment")}`,
-    () => ""
-  );
-
-const getData = withAppDirSsr<PaymentPageProps>(getServerSideProps);
-
-export default WithLayout({ getLayout: null, getData, Page: PaymentPage });
diff --git a/apps/web/app/payment/[uid]/page.tsx b/apps/web/app/payment/[uid]/page.tsx
new file mode 100644
index 0000000000..17a4f29266
--- /dev/null
+++ b/apps/web/app/payment/[uid]/page.tsx
@@ -0,0 +1,24 @@
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import type { PageProps } from "app/_types";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import { cookies, headers } from "next/headers";
+
+import PaymentPage from "@calcom/features/ee/payments/components/PaymentPage";
+import { getServerSideProps, type PaymentPageProps } from "@calcom/features/ee/payments/pages/payment";
+import { APP_NAME } from "@calcom/lib/constants";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+
+export const generateMetadata = async ({ params, searchParams }: PageProps) => {
+  const props = await getData(buildLegacyCtx(headers(), cookies(), params, searchParams));
+  const eventName = props.booking.title;
+  return await _generateMetadata(
+    (t) => `${t("payment")} | ${eventName} | ${APP_NAME}`,
+    () => ""
+  );
+};
+
+const getData = withAppDirSsr<PaymentPageProps>(getServerSideProps);
+
+export default WithLayout({ getLayout: null, getData, Page: PaymentPage });
diff --git a/apps/web/middleware.ts b/apps/web/middleware.ts
index a68b06492b..9d1f39ecfd 100644
--- a/apps/web/middleware.ts
+++ b/apps/web/middleware.ts
@@ -189,6 +189,7 @@ export const config = {
     "/reschedule/:path*",
     "/availability/:path*",
     "/booking/:path*",
+    "/payment/:path*",
     "/routing-forms/:path*",
     "/team/:path*",
     "/org/:path*",
diff --git a/apps/web/pages/payment/[uid].tsx b/apps/web/pages/payment/[uid].tsx
deleted file mode 100644
index 3e512d5b3d..0000000000
--- a/apps/web/pages/payment/[uid].tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import PaymentPage from "@calcom/features/ee/payments/components/PaymentPage";
-import { getServerSideProps } from "@calcom/features/ee/payments/pages/payment";
-import type { inferSSRProps } from "@calcom/types/inferSSRProps";
-
-import PageWrapper from "@components/PageWrapper";
-
-export default function Payment(props: inferSSRProps<typeof getServerSideProps>) {
-  return <PaymentPage {...props} />;
-}
-Payment.PageWrapper = PageWrapper;
-export { getServerSideProps };
diff --git a/packages/features/ee/payments/components/PaymentPage.tsx b/packages/features/ee/payments/components/PaymentPage.tsx
index ade48dd055..dfb9a143b0 100644
--- a/packages/features/ee/payments/components/PaymentPage.tsx
+++ b/packages/features/ee/payments/components/PaymentPage.tsx
@@ -2,7 +2,6 @@
 
 import classNames from "classnames";
 import dynamic from "next/dynamic";
-import Head from "next/head";
 import type { FC } from "react";
 import { useEffect, useState } from "react";
 
@@ -88,12 +87,6 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
 
   return (
     <div className="h-screen">
-      <Head>
-        <title>
-          {t("payment")} | {eventName} | {APP_NAME}
-        </title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
       <main className="mx-auto max-w-3xl py-24">
         <div className="fixed inset-0 z-50 overflow-y-auto scroll-auto">
           <div className="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">