refactor!:stripe connect and stripe payment routing (#7)

Author: Clement-Muth

package.json

@@ -25,6 +25,8 @@
     "@types/react-dom": "^18",
     "@types/react-syntax-highlighter": "^15.5.11",
     "autoprefixer": "^10.0.1",
+    "eslint": "8.57.0",
+    "eslint-config-next": "14.1.0",
     "postcss": "^8",
     "rome": "^12.1.3",
     "tailwindcss": "^3.3.0",

src/app/layout.tsx

@@ -3,7 +3,6 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import ApplicationKernel from "~/core/ApplicationKernel";
 import Header from "~/app/views/Header/Header";
-import Aside from "~/app/views/Aside";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -23,10 +22,7 @@ export default function RootLayout({
         <ApplicationKernel>
           <Header />
           <div className="flex justify-center w-full">
-            <div className="grid grid-cols-[256px_1fr_256px] max-w-[1280px] px-6 w-full">
-              <Aside />
-              {children}
-            </div>
+            <div className="max-w-[1280px] px-6 w-full">{children}</div>
           </div>
         </ApplicationKernel>
       </body>

src/app/page.tsx

@@ -2,7 +2,7 @@ import Image from "next/image";
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+    <main className="flex h-[calc(100dvh-64px)] flex-col items-center justify-between p-24">
       <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
         <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
           Get started by editing&nbsp;
@@ -46,13 +46,13 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
+          <h2 className={"mb-3 text-2xl font-semibold"}>
             Docs{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
           </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+          <p className={"m-0 max-w-[30ch] text-sm opacity-50"}>
             Find in-depth information about Next.js features and API.
           </p>
         </a>
@@ -63,13 +63,13 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
+          <h2 className={"mb-3 text-2xl font-semibold"}>
             Learn{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
           </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+          <p className={"m-0 max-w-[30ch] text-sm opacity-50"}>
             Learn about Next.js in an interactive course with&nbsp;quizzes!
           </p>
         </a>
@@ -80,15 +80,13 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
+          <h2 className={"mb-3 text-2xl font-semibold"}>
             Templates{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
           </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Explore starter templates for Next.js.
-          </p>
+          <p className={"m-0 max-w-[30ch] text-sm opacity-50"}>Explore starter templates for Next.js.</p>
         </a>
 
         <a
@@ -97,13 +95,13 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
+          <h2 className={"mb-3 text-2xl font-semibold"}>
             Deploy{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
           </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50 text-balance`}>
+          <p className={"m-0 max-w-[30ch] text-sm opacity-50 text-balance"}>
             Instantly deploy your Next.js site to a shareable URL with Vercel.
           </p>
         </a>

src/app/stripe-connect/page.tsx

@@ -0,0 +1,11 @@
+import PageContainer from "~/components/PageContainer/PageContainer";
+
+const StripeConnectPage = () => {
+  return (
+    <PageContainer>
+      <h1>Stripe Connect doc page</h1>
+    </PageContainer>
+  );
+};
+
+export default StripeConnectPage;

src/app/stripe-payment/customer/create/page.tsx

@@ -0,0 +1,11 @@
+import PageContainer from "~/components/PageContainer/PageContainer";
+
+const StripePaymentCustomerCreatePage = () => {
+  return (
+    <PageContainer>
+      <h1 className="font-bold text-4xl">Create customer</h1>
+    </PageContainer>
+  );
+};
+
+export default StripePaymentCustomerCreatePage;

src/app/(stripe)/error.tsx renamed to src/app/stripe-payment/error.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+import Aside from "~/app/stripe-payment/views/Aside";
+
+export interface LayoutProps {
+  children: ReactNode;
+}
+
+const Layout = ({ children }: LayoutProps) => {
+  return (
+    <div className="grid grid-cols-[256px_1fr_256px]">
+      <Aside />
+      {children}
+    </div>
+  );
+};
+
+export default Layout;

src/app/stripe-payment/layout.tsx

@@ -1,12 +1,12 @@
 import { Button, Divider, Link } from "@nextui-org/react";
 import { cookies } from "next/headers";
-import AddPaymentMethods from "~/app/(stripe)/add-payment-methods/views";
 import getClient from "~/app/api/getClient";
-import Chapter from "~/app/views/Chapter/Chapter";
 import PageContainer from "~/components/PageContainer/PageContainer";
 import ElementsProvider from "~/libraries/stripe/ElementsProvider";
 import onDark from "react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus";
 import { Prism } from "react-syntax-highlighter";
+import AddPaymentMethods from "~/app/stripe-payment/payment-methods/create/views";
+import Chapter from "~/app/stripe-payment/views/Chapter/Chapter";
 
 const AddPaymentMethodPage = async () => {
   const clientId = await getClient(cookies().get("clientId")?.value);