feat: initial scaffolding for ecommerce manage page

Author: bassgeta

.env.example

@@ -18,3 +18,4 @@ REDIS_URL=redis://localhost:7379
 # NEXT_PUBLIC_GTM_ID=""
 # NEXT_PUBLIC_CRYPTO_TO_FIAT_TRUSTED_ORIGINS=""
 INVOICE_PROCESSING_TTL=""
+NEXT_PUBLIC_DEFAULT_ECOMMERCE_DOMAIN=http://localhost:3001

src/app/ecommerce/layout.tsx

@@ -0,0 +1,41 @@
+import { BackgroundWrapper } from "@/components/background-wrapper";
+import { EcommerceNavigation } from "@/components/ecommerce/ecommerce-navigation";
+import { Footer } from "@/components/footer";
+import { Header } from "@/components/header";
+import { getCurrentSession } from "@/server/auth";
+import { PlusCircle } from "lucide-react";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+
+export default async function EcommerceLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { user } = await getCurrentSession();
+  if (!user) redirect("/");
+
+  return (
+    <BackgroundWrapper
+      topGradient={{ from: "orange-100", to: "orange-200" }}
+      bottomGradient={{ from: "zinc-100", to: "zinc-200" }}
+    >
+      <Header user={user} />
+      <main className="flex-grow flex flex-col w-full max-w-sm sm:max-w-2xl md:max-w-4xl lg:max-w-6xl xl:max-w-[72rem] mx-auto px-4 sm:px-6 lg:px-8 py-8 z-10">
+        <div className="flex justify-between items-center mb-8">
+          <h1 className="mb-2 text-4xl font-bold tracking-tight">Dashboard</h1>
+          <Link
+            href="/invoices/create"
+            className="bg-black hover:bg-zinc-800 text-white transition-colors px-4 py-2 rounded-md flex items-center"
+          >
+            <PlusCircle className="mr-2 h-4 w-4" />
+            Create Invoice
+          </Link>
+        </div>
+        <EcommerceNavigation />
+        {children}
+      </main>
+      <Footer />
+    </BackgroundWrapper>
+  );
+}

src/app/ecommerce/manage/page.tsx

@@ -0,0 +1,16 @@
+import { EcommerceManage } from "@/components/ecommerce/manage";
+import { getCurrentSession } from "@/server/auth";
+import { api } from "@/trpc/server";
+import { redirect } from "next/navigation";
+
+export default async function ManagePage() {
+  const { user } = await getCurrentSession();
+
+  if (!user) {
+    redirect("/");
+  }
+
+  const clientIds = await api.clientId.getAll.query();
+
+  return <EcommerceManage initialClientIds={clientIds} />;
+}

src/app/ecommerce/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function EcommercePage() {
+  redirect("/ecommerce/manage");
+}

src/app/ecommerce/sales/page.tsx

@@ -0,0 +1,15 @@
+import { getCurrentSession } from "@/server/auth";
+//import { api } from "@/trpc/server";
+import { redirect } from "next/navigation";
+
+export default async function SalesPage() {
+  const { user } = await getCurrentSession();
+
+  if (!user) {
+    redirect("/");
+  }
+
+  // TODO fetch sales data
+
+  return <div>Sales Page - to be implemented</div>;
+}

src/components/ecommerce/ecommerce-navigation.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+
+export function EcommerceNavigation() {
+  const pathname = usePathname();
+  const [activeTab, setActiveTab] = useState("manage");
+
+  useEffect(() => {
+    if (pathname.includes("/sales")) {
+      setActiveTab("sales");
+    } else {
+      setActiveTab("manage");
+    }
+  }, [pathname]);
+
+  return (
+    <Tabs value={activeTab} className="w-full mb-8">
+      <TabsList className="grid w-full grid-cols-3">
+        <TabsTrigger value="manage" asChild>
+          <Link href="/ecommerce/manage">Manage</Link>
+        </TabsTrigger>
+        <TabsTrigger value="sales" asChild>
+          <Link href="/ecommerce/sales">Sales</Link>
+        </TabsTrigger>
+      </TabsList>
+    </Tabs>
+  );
+}

src/components/ecommerce/manage/index.tsx

@@ -0,0 +1,15 @@
+import type { ClientId } from "@/server/db/schema";
+
+interface EcommerceManageProps {
+  initialClientIds: ClientId[];
+}
+
+export function EcommerceManage({
+  initialClientIds: _initialClientIds,
+}: EcommerceManageProps) {
+  return (
+    <div>
+      <h1>Ecommerce Manage</h1>
+    </div>
+  );
+}

src/lib/constants/ecommerce.ts

@@ -0,0 +1,3 @@
+export const DEFAULT_CLIENT_ID_DOMAIN =
+  process.env.NEXT_PUBLIC_DEFAULT_ECOMMERCE_DOMAIN ||
+  "https://checkout.request.network";

src/lib/schemas/client-id.ts

@@ -0,0 +1,17 @@
+import { isEthereumAddress } from "validator";
+import { z } from "zod";
+
+export const clientIdApiSchema = z.object({
+  label: z.string().min(1, "Label is required"),
+  domain: z.string().url(),
+  feeAddress: z
+    .string()
+    .min(1, "Fee address is required")
+    .refine(isEthereumAddress, "Invalid Ethereum address format")
+    .optional(),
+  feePercentage: z.coerce
+    .number()
+    .min(0, "Fee percentage must be at least 0")
+    .max(100, "Fee percentage cannot exceed 100")
+    .optional(),
+});

src/server/db/schema.ts

@@ -299,6 +299,21 @@ export const subscriptionPlanTable = createTable("subscription_plans", {
   createdAt: timestamp("created_at").defaultNow(),
 });
 
+export const clientIdTable = createTable("client_id", {
+  id: text().primaryKey().notNull(),
+  clientId: text().notNull(),
+  userId: text()
+    .notNull()
+    .references(() => userTable.id, {
+      onDelete: "cascade",
+    }),
+  label: text().notNull(),
+  domain: text().notNull(),
+  feeAddress: text(),
+  feePercentage: text(),
+  createdAt: timestamp("created_at").defaultNow(),
+});
+
 // Relationships
 
 export const userRelations = relations(userTable, ({ many }) => ({
@@ -358,6 +373,13 @@ export const subscriptionPlanRelations = relations(
   }),
 );
 
+export const clientIdRelations = relations(clientIdTable, ({ one }) => ({
+  user: one(userTable, {
+    fields: [clientIdTable.userId],
+    references: [userTable.id],
+  }),
+}));
+
 export const paymentDetailsRelations = relations(
   paymentDetailsTable,
   ({ one, many }) => ({
@@ -393,3 +415,4 @@ export type PaymentDetailsPayers = InferSelectModel<
   typeof paymentDetailsPayersTable
 >;
 export type RecurringPayment = InferSelectModel<typeof recurringPaymentTable>;
+export type ClientId = InferSelectModel<typeof clientIdTable>;