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

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-payment/layout.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)/add-payment-methods/page.tsx → src/app/stripe-payment/payment-methods/create/page.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);

src/app/(stripe)/add-payment-methods/views/Form/index.tsx → src/app/stripe-payment/payment-methods/create/views/Form/index.tsx

@@ -10,8 +10,8 @@ import {
 } from "@stripe/react-stripe-js";
 import { useRouter } from "next/navigation";
 import { useMemo, useState, useTransition } from "react";
-import countries from "~/app/(stripe)/add-payment-methods/views/Form/countries";
-import newPaymentMethod from "~/app/(stripe)/add-payment-methods/views/Form/newPaymentMethod";
+import countries from "~/app/stripe-payment/payment-methods/create/views/Form/countries";
+import newPaymentMethod from "~/app/stripe-payment/payment-methods/create/views/Form/newPaymentMethod";
 import Form from "~/components/Form/Form";
 
 interface AddPaymentMethodFormProps {

src/app/(stripe)/add-payment-methods/views/Form/newPaymentMethod.ts → src/app/stripe-payment/payment-methods/create/views/Form/newPaymentMethod.ts

@@ -1,8 +1,8 @@
 import { Stripe, StripeCardNumberElement } from "@stripe/stripe-js";
 import StripeError from "stripe";
-import createPaymentMethod from "~/app/(stripe)/add-payment-methods/views/Form/createPaymentMethod";
 import attachPaymentMethod from "~/app/api/attachPaymentMethod";
 import createNewClient from "~/app/api/createNewClient";
+import createPaymentMethod from "~/app/stripe-payment/payment-methods/create/views/Form/createPaymentMethod";
 import FormError from "~/core/FormError";
 import StripeErr from "~/libraries/stripe/stripeError";
 

src/app/(stripe)/add-payment-methods/views/index.tsx → src/app/stripe-payment/payment-methods/create/views/index.tsx

@@ -1,6 +1,6 @@
 import { Link } from "@nextui-org/react";
-import AddPaymentMethodForm from "~/app/(stripe)/add-payment-methods/views/Form";
-import codeAddPaymentMethod from "~/app/(stripe)/add-payment-methods/views/code";
+import AddPaymentMethodForm from "~/app/stripe-payment/payment-methods/create/views/Form";
+import codeAddPaymentMethod from "~/app/stripe-payment/payment-methods/create/views/code";
 import Tabs from "~/components/Tabs/Tabs";
 
 export interface AddPaymentMethodsProps {

src/app/(stripe)/delete-payment-methods/page.tsx → src/app/stripe-payment/payment-methods/delete/page.tsx

@@ -1,17 +1,18 @@
 import { cookies } from "next/headers";
-import ListPaymentMethods from "~/app/(stripe)/delete-payment-methods/views";
 import getClient from "~/app/api/getClient";
 import getPaymentMethods from "~/app/api/getPaymentMethods";
+import ListPaymentMethods from "~/app/stripe-payment/payment-methods/delete/views";
+import PageContainer from "~/components/PageContainer/PageContainer";
 
 const DeletePaymentMethodPage = async () => {
   const clientId = await getClient(cookies().get("clientId")?.value);
   const paymentMethods = await getPaymentMethods(clientId.id);
 
   return (
-    <>
+    <PageContainer>
       <h1 className="font-bold text-3xl">Delete a payment method</h1>
       <ListPaymentMethods paymentMethods={paymentMethods} />
-    </>
+    </PageContainer>
   );
 };
 

src/app/(stripe)/delete-payment-methods/views/Table.tsx → src/app/stripe-payment/payment-methods/delete/views/Table.tsx

@@ -26,7 +26,7 @@ import {
 import NextImage from "next/image";
 import PaymentMethod from "~/types/stripe/PaymentMethod";
 import deletePaymentMethod from "~/app/api/deletePaymentMethod";
-import { DeleteIcon } from "~/app/(stripe)/delete-payment-methods/views/DeleteIcon";
+import { DeleteIcon } from "~/app/stripe-payment/payment-methods/delete/views/DeleteIcon";
 
 export interface TableProps {
   paymentMethods: PaymentMethod[] | null;

src/app/(stripe)/delete-payment-methods/views/index.tsx → src/app/stripe-payment/payment-methods/delete/views/index.tsx

@@ -1,7 +1,7 @@
 import PaymentMethod from "~/types/stripe/PaymentMethod";
-import Table from "~/app/(stripe)/delete-payment-methods/views/Table";
 import Tabs from "~/components/Tabs/Tabs";
-import codeDeletePaymentMethods from "~/app/(stripe)/delete-payment-methods/views/code";
+import Table from "~/app/stripe-payment/payment-methods/delete/views/Table";
+import codeDeletePaymentMethods from "~/app/stripe-payment/payment-methods/delete/views/code";
 
 export interface ListPaymentMethodsProps {
   paymentMethods: PaymentMethod[] | null;

src/app/(stripe)/get-payment-methods/page.tsx → src/app/stripe-payment/payment-methods/list/page.tsx

@@ -1,17 +1,18 @@
 import getPaymentMethods from "~/app/api/getPaymentMethods";
 import getClient from "~/app/api/getClient";
 import { cookies } from "next/headers";
-import GetPaymentMethods from "~/app/(stripe)/get-payment-methods/views";
+import GetPaymentMethods from "~/app/stripe-payment/payment-methods/list/views";
+import PageContainer from "~/components/PageContainer/PageContainer";
 
 const AddPaymentMethodPage = async () => {
   const clientId = await getClient(cookies().get("clientId")?.value);
   const paymentMethods = await getPaymentMethods(clientId.id);
 
   return (
-    <>
+    <PageContainer>
       <h1 className="font-bold text-3xl">My payment methods</h1>
       <GetPaymentMethods paymentMethods={paymentMethods} />
-    </>
+    </PageContainer>
   );
 };
 

src/app/(stripe)/get-payment-methods/views/PaymentMethods.tsx → src/app/stripe-payment/payment-methods/list/views/PaymentMethods.tsx

@@ -8,7 +8,6 @@ import Jcb from "/public/cards/brands/jcb.svg";
 import UnionPay from "/public/cards/brands/unionpay.svg";
 import NextImage from "next/image";
 import PaymentMethod from "~/types/stripe/PaymentMethod";
-import { memo } from "react";
 
 export interface PaymentMethodsProps {
   paymentMethods: PaymentMethod[] | null;

src/app/(stripe)/get-payment-methods/views/index.tsx → src/app/stripe-payment/payment-methods/list/views/index.tsx

@@ -1,7 +1,7 @@
-import PaymentMethods from "~/app/(stripe)/get-payment-methods/views/PaymentMethods";
 import PaymentMethod from "~/types/stripe/PaymentMethod";
-import codeGetPaymentMethods from "~/app/(stripe)/get-payment-methods/views/code";
 import Tabs from "~/components/Tabs/Tabs";
+import PaymentMethods from "~/app/stripe-payment/payment-methods/list/views/PaymentMethods";
+import codeGetPaymentMethods from "~/app/stripe-payment/payment-methods/list/views/code";
 
 export interface GetPaymentMethodsProps {
   paymentMethods: PaymentMethod[] | null;

src/app/views/Aside/index.tsx → src/app/stripe-payment/views/Aside/index.tsx

@@ -2,19 +2,31 @@
 
 import { Accordion, AccordionItem, Link, ScrollShadow } from "@nextui-org/react";
 import LinkNext from "next/link";
+import { usePathname } from "next/navigation";
 
 const Aside = () => {
+  const pathname = usePathname();
+
   return (
     <ScrollShadow
       orientation="vertical"
       className="flex h-[calc(100dvh-128px)] sticky top-[64px] w-[256px] pt-5"
     >
-      <Accordion showDivider={false} isCompact className="w-full" defaultExpandedKeys="1">
-        <AccordionItem key={0} aria-label="Accordion 0" title="Guides">
+      <Accordion
+        showDivider={false}
+        isCompact
+        className="w-full"
+        defaultExpandedKeys={pathname.includes("payment-methods") ? "2" : "1"}
+      >
+        {/* <AccordionItem key={0} aria-label="Accordion 0" title="Guides">
           <nav className="pl-8 pb-2">
             <ul className="flex flex-col list-disc gap-y-4">
               <li>
-                <Link as={LinkNext} href="/add-payment-methods" className="text-black opacity-80">
+                <Link
+                  as={LinkNext}
+                  href="/stripe-payment/payment-methods/create"
+                  className="text-black opacity-80"
+                >
                   Introduction
                 </Link>
               </li>
@@ -25,50 +37,52 @@ const Aside = () => {
               </li>
             </ul>
           </nav>
-        </AccordionItem>
+        </AccordionItem> */}
         <AccordionItem key={1} aria-label="Accordion 1" title="Customer">
           <nav className="pl-8 pb-2">
             <ul className="flex flex-col list-disc gap-y-4">
               <li>
-                <Link as={LinkNext} href="/add-payment-methods" className="text-black opacity-80">
+                <Link as={LinkNext} href="/stripe-payment/customer/create" className="text-black opacity-80">
                   Create Customer
                 </Link>
               </li>
-              <li>
-                <Link as={LinkNext} href="/get-payment-methods" className="text-black opacity-80">
-                  Retrieve Customer
-                </Link>
-              </li>
-              <li>
-                <Link as={LinkNext} href="/delete-payment-methods" className="text-black opacity-80">
-                  Delete Customer
-                </Link>
-              </li>
             </ul>
           </nav>
         </AccordionItem>
         <AccordionItem key={2} aria-label="Accordion 2" title="Payment Methods">
           <nav className="pl-8 pb-2">
             <ul className="flex flex-col list-disc gap-y-4">
               <li>
-                <Link as={LinkNext} href="/add-payment-methods" className="text-black opacity-80">
+                <Link
+                  as={LinkNext}
+                  href="/stripe-payment/payment-methods/create"
+                  className="text-black opacity-80"
+                >
                   Add Payment Methods
                 </Link>
               </li>
               <li>
-                <Link as={LinkNext} href="/get-payment-methods" className="text-black opacity-80">
+                <Link
+                  as={LinkNext}
+                  href="/stripe-payment/payment-methods/list"
+                  className="text-black opacity-80"
+                >
                   List Payment Methods
                 </Link>
               </li>
               <li>
-                <Link as={LinkNext} href="/delete-payment-methods" className="text-black opacity-80">
+                <Link
+                  as={LinkNext}
+                  href="/stripe-payment/payment-methods/delete"
+                  className="text-black opacity-80"
+                >
                   Delete Payment Methods
                 </Link>
               </li>
             </ul>
           </nav>
         </AccordionItem>
-        <AccordionItem key={3} aria-label="Accordion 3" title="Invoices">
+        {/* <AccordionItem key={3} aria-label="Accordion 3" title="Invoices">
           <nav className="pl-8 pb-2">
             <ul className="flex flex-col list-disc gap-y-4">
               <li>
@@ -83,7 +97,7 @@ const Aside = () => {
               </li>
             </ul>
           </nav>
-        </AccordionItem>
+        </AccordionItem> */}
       </Accordion>
     </ScrollShadow>
   );