Initial release

.env

@@ -0,0 +1,10 @@
+# DATABASE_URL="mysql://app:app@db:3306/onestopshop"
+DATABASE_URL="mysql://avnadmin:AVNS_Xh3_qhmmzjH035K034U@mysql-2387c7fc-jacksongcsdev-5b75.g.aivencloud.com:23824/defaultdb"
+
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_cmVuZXdpbmctZmx5LTYwLmNsZXJrLmFjY291bnRzLmRldiQ
+CLERK_SECRET_KEY=sk_test_MGPXL0QrkTNMDWQNLVfv5xCBDhAySngBb5gzjAMAQR
+
+NEXT_PUBLIC_APP_URL=http://localhost:3000/
+
+UPLOADTHING_SECRET=""
+UPLOADTHING_APP_ID=""

.gitattributes

@@ -0,0 +1,35 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,64 @@
+# ---------- Base image ----------
+FROM node:20-alpine AS base
+
+# Needed for some native deps
+RUN apk add --no-cache libc6-compat python3 make g++
+
+WORKDIR /app
+
+# ---------- Dependencies (prod) ----------
+FROM base AS deps
+
+WORKDIR /app
+
+# Copy only package manifests
+COPY package.json package-lock.json ./
+
+# Install prod deps (no dev) – use npm install, not npm ci
+RUN npm install --omit=dev --legacy-peer-deps --no-audit --no-fund
+
+# ---------- Build (dev + tooling) ----------
+FROM base AS builder
+
+WORKDIR /app
+
+# Copy manifests and install full deps (including dev)
+COPY package.json package-lock.json ./
+RUN npm install --legacy-peer-deps --no-audit --no-fund
+
+# Copy the rest of the source
+COPY . .
+
+# Ensure migrations-folder exists so COPY in the next stage never fails
+# Try to generate Drizzle migrations; if it fails, don't break the build
+RUN mkdir -p migrations-folder && \
+    npx drizzle-kit generate || echo "Skipping drizzle-kit generate step"
+
+# Build the Next.js app
+RUN npm run build
+
+# ---------- Runtime ----------
+FROM base AS runner
+
+WORKDIR /app
+ENV NODE_ENV=production
+
+# Copy runtime deps from deps stage
+COPY --from=deps /app/node_modules ./node_modules
+
+# Copy built app + configs
+COPY --from=builder /app/package.json ./package.json
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/styles ./styles
+COPY --from=builder /app/next.config.js ./next.config.js
+COPY --from=builder /app/tailwind.config.js ./tailwind.config.js
+COPY --from=builder /app/postcss.config.js ./postcss.config.js
+COPY --from=builder /app/drizzle.config.json ./drizzle.config.json
+COPY --from=builder /app/migrations-folder ./migrations-folder
+
+# ⭐ REQUIRED ⭐
+COPY --from=builder /app/db ./db
+
+EXPOSE 3000
+CMD ["npm", "start"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 @jackblatch
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,9 @@
+---
+title: WebArena-Amazon
+emoji: 🛒
+colorFrom: blue
+colorTo: purple
+sdk: docker
+app_port: 3000
+pinned: false
+---

README_info.md

@@ -0,0 +1,28 @@
+## OneStopShop Setup Guide
+
+### 1) Clone the repo
+```
+git clone https://github.com/JackSong88/webarena-jbb-magento.git
+cd webarena-jbb-magento
+``` 
+
+### 2) Create .env file
+- Create a [Clerk](https://clerk.com) application for authentication and copy keys into `.env`
+```
+DATABASE_URL="mysql://app:app@db:3306/onestopshop"
+
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxxxx
+CLERK_SECRET_KEY=sk_test_xxxxx
+
+NEXT_PUBLIC_APP_URL=http://localhost:3000/
+
+UPLOADTHING_SECRET=""
+UPLOADTHING_APP_ID=""
+```
+
+### 3) Run the environment
+- Start the environment through docker:
+```
+docker compose up
+```
+- It will automatically seed the database with stores and products and when ready, can be accessed through `http://localhost:3000/` or the user specific `NEXT_PUBLIC_APP_URL`.

app/(storefront)/(main)/cart/components/checkout-button.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { toast } from "@/components/ui/use-toast";
+import { routes } from "@/lib/routes";
+import { getStoreSlug } from "@/server-actions/store-details";
+import { Loader2, Lock } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export const CheckoutButton = (props: { storeId: number }) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const router = useRouter();
+
+  return (
+    <Button
+      size="sm"
+      className="ml-auto flex items-center gap-2 justify-center"
+      onClick={() => {
+        setIsLoading(true);
+        getStoreSlug(props.storeId)
+          .then((slug) => {
+            router.push(`${routes.checkout}/${slug}`);
+          })
+          .catch(() => {
+            toast({
+              title: "Sorry, an error occurred.",
+              description: "Something went wrong. Please try again later.",
+            });
+          })
+          .finally(() => setIsLoading(false));
+      }}
+      disabled={isLoading}
+    >
+      {isLoading ? (
+        <Loader2 size={16} className="animate-spin" />
+      ) : (
+        <Lock size={16} />
+      )}
+      <p>Checkout</p>
+    </Button>
+  );
+};

app/(storefront)/(main)/cart/layout.tsx

@@ -0,0 +1,6 @@
+import { ContentWrapper } from "@/components/content-wrapper";
+import { PropsWithChildren } from "react";
+
+export default function Layout(props: PropsWithChildren) {
+  return <ContentWrapper>{props.children}</ContentWrapper>;
+}

app/(storefront)/(main)/cart/loading.tsx

@@ -0,0 +1,27 @@
+import { LoadingSkeleton } from "@/components/ui/loading-skeleton";
+import { cookies } from "next/headers";
+
+export default function Loading() {
+  return (
+    <>
+      {/* {!!cookies().has("cartItems") && ( */}
+      <div>
+        <div className="mb-4 flex items-end justify-between">
+          <LoadingSkeleton className="w-48 h-12" />
+          <LoadingSkeleton className="w-36 h-8" />
+        </div>
+        <div className="grid grid-cols-9 gap-24">
+          <div className="col-span-6 flex flex-col gap-4">
+            {Array.from(Array(6)).map((_, i) => (
+              <LoadingSkeleton className="w-full h-12" key={i} />
+            ))}
+          </div>
+          <div className="col-span-3">
+            <LoadingSkeleton className="w-full h-96" />
+          </div>
+        </div>
+      </div>
+      {/* )} */}
+    </>
+  );
+}

app/(storefront)/(main)/cart/page.tsx

@@ -0,0 +1,99 @@
+import { CartLineItems } from "@/components/storefront/cart-line-items";
+import { Button } from "@/components/ui/button";
+import { Heading } from "@/components/ui/heading";
+import { currencyFormatter } from "@/lib/currency";
+import { routes } from "@/lib/routes";
+import { getCart } from "@/server-actions/get-cart-details";
+import { ChevronRight } from "lucide-react";
+import { cookies } from "next/headers";
+import Link from "next/link";
+import { CheckoutButton } from "./components/checkout-button";
+
+export default async function Cart() {
+  const cartId = cookies().get("cartId")?.value;
+  const { cartItems, uniqueStoreIds, cartItemDetails } = await getCart(
+    Number(cartId)
+  );
+
+  if (isNaN(Number(cartId)) || !cartItems.length) {
+    return (
+      <div className="mt-4 gap-4 rounded-md border-2 border-dashed border-gray-200 p-6 text-center h-[200px] flex items-center justify-center flex-col">
+        <Heading size="h3">Your cart is empty</Heading>
+        <Link href={routes.products}>
+          <Button>Start shopping</Button>
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex items-center justify-between">
+        <Heading size="h2">Cart</Heading>
+        <Link href={routes.products}>
+          <Button
+            variant="link"
+            className="flex items-end justify-center m-0 p-0 text-muted-foreground"
+          >
+            <p>Continue shopping</p>
+            <ChevronRight size={16} />
+          </Button>
+        </Link>
+      </div>
+      <div className="lg:grid lg:grid-cols-9 lg:gap-6 flex flex-col-reverse gap-6">
+        <div className="col-span-6 flex flex-col gap-8">
+          {uniqueStoreIds.map((storeId, i) => (
+            <div
+              key={i}
+              className="bg-secondary border border-border p-6 rounded-md"
+            >
+              <Heading size="h4">
+                {
+                  cartItemDetails?.find((item) => item.storeId === storeId)
+                    ?.storeName
+                }
+              </Heading>
+              <CartLineItems
+                variant="cart"
+                cartItems={cartItems}
+                products={
+                  cartItemDetails?.filter((item) => item.storeId === storeId) ??
+                  []
+                }
+              />
+            </div>
+          ))}
+        </div>
+        <div className="bg-secondary col-span-3 rounded-md border border-border p-6 h-fit flex flex-col gap-4">
+          <Heading size="h3">Cart Summary</Heading>
+          {uniqueStoreIds.map((storeId, i) => (
+            <div
+              key={i}
+              className="flex items-center border-b border-border pb-2 gap-4 flex-nowrap overflow-auto"
+            >
+              <p className="font-semibold">
+                {
+                  cartItemDetails?.find((item) => item.storeId === storeId)
+                    ?.storeName
+                }
+              </p>
+              <p>
+                {currencyFormatter(
+                  cartItemDetails
+                    .filter((item) => item.storeId === storeId)
+                    .reduce((accum, curr) => {
+                      const quantityInCart = cartItems.find(
+                        (item) => item.id === curr.id
+                      )?.qty;
+                      return accum + Number(curr.price) * (quantityInCart ?? 0);
+                    }, 0)
+                )}
+              </p>
+              <CheckoutButton storeId={storeId} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

app/(storefront)/(main)/layout.tsx

@@ -0,0 +1,25 @@
+import { NavBar } from "@/components/navbar";
+import "../../../styles/globals.css";
+import { Footer } from "@/components/footer";
+import React from "react";
+import { FloatingStar } from "@/components/floating-star";
+
+export const metadata = {
+  title: "ShopSmart - Multi-store shopping",
+  description: "Shop smart, live better with ShopSmart.",
+};
+
+export default async function StorefrontLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="min-h-screen w-full flex flex-col">
+      <FloatingStar />
+      <NavBar showSecondAnnouncementBar={true} />
+      <div className="h-full flex-1 mb-8">{children}</div>
+      <Footer />
+    </div>
+  );
+}

app/(storefront)/(main)/loading.tsx

@@ -0,0 +1,28 @@
+import { ContentWrapper } from "@/components/content-wrapper";
+import { LoadingSkeleton } from "@/components/ui/loading-skeleton";
+
+export default function Loading() {
+  return (
+    <div>
+      <LoadingSkeleton className="w-full h-[500px]" />
+      <div className="flex gap-2 items-center justify-center mt-2 mb-6">
+        {Array.from(Array(3)).map((_, i) => (
+          <LoadingSkeleton className="w-3 h-3 rounded-full" key={i} />
+        ))}
+      </div>
+      <div className="flex items-center justify-center gap-2 mt-12">
+        <LoadingSkeleton className="w-24 h-8" />
+        <LoadingSkeleton className="w-24 h-8" />
+      </div>
+      <div className="flex flex-col gap-2 items-center justify-center mt-12">
+        <LoadingSkeleton className="w-1/2 md:w-1/3 h-12" />
+        <LoadingSkeleton className="w-1/3 md:w-1/4 h-10" />
+      </div>
+      <ContentWrapper className="sm:grid sm:grid-cols-2 md:grid-cols-4 gap-6 mt-8 flex flex-col">
+        {Array.from(Array(4)).map((_, i) => (
+          <LoadingSkeleton className="w-full h-48" key={i} />
+        ))}
+      </ContentWrapper>
+    </div>
+  );
+}

app/(storefront)/(main)/page.tsx

@@ -0,0 +1,166 @@
+import { ContentWrapper } from "@/components/content-wrapper";
+import { SlideShow } from "@/components/slideshow";
+import { Heading } from "@/components/ui/heading";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { db } from "@/db/db";
+import { products, stores } from "@/db/schema";
+import { eq } from "drizzle-orm";
+import { PropsWithChildren } from "react";
+import { ProductAndStore } from "./products/page";
+import { ProductCard } from "@/components/storefront/product-card";
+import { Button } from "@/components/ui/button";
+import { routes } from "@/lib/routes";
+import Link from "next/link";
+import { FeatureBanner } from "../components/feature-banner";
+import {
+  AlarmClock,
+  DollarSign,
+  FastForward,
+  Phone,
+  Truck,
+  User,
+  Wind,
+} from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { TextInputWithLabel } from "@/components/text-input-with-label";
+
+export default async function Home() {
+  const storeAndProduct = (await db
+    .select({
+      product: products,
+      store: {
+        id: stores.id,
+        name: stores.name,
+        slug: stores.slug,
+      },
+    })
+    .from(products)
+    .leftJoin(stores, eq(products.storeId, stores.id))
+    .limit(8)) as ProductAndStore[];
+
+  return (
+    <div>
+      <SlideShow />
+      <ContentWrapper>
+        <Tabs defaultValue="for-buyers">
+          <div className="flex items-center justify-center mt-2 mb-8">
+            <TabsList>
+              <TabsTrigger value="for-buyers">For Buyers</TabsTrigger>
+              <TabsTrigger value="for-sellers">For Sellers</TabsTrigger>
+            </TabsList>
+          </div>
+          <TabsContent value="for-sellers">
+            <HomePageLayout
+              heading={<Heading size="h1">Sell online with ease.</Heading>}
+              subheading={
+                <Heading size="h2">
+                  Access our global marketplace and sell your <br /> products to
+                  over 1 million visitors.
+                </Heading>
+              }
+            >
+              <div className="md:grid md:grid-cols-3 gap-4 flex flex-col mt-12">
+                <FeatureBanner
+                  heading="No monthly fees"
+                  subheading="Fugit voluptates nihil ex et voluptas dignissimos blanditiis. Consectetur velit pariatur nihil quis nihil similique voluptatum in. Et nostrum ipsam quo magni. Velit et odit dolores."
+                  icon={<DollarSign size={32} />}
+                />
+                <FeatureBanner
+                  heading="Access to millions of buyers"
+                  subheading="Fugit voluptates nihil ex et voluptas dignissimos blanditiis. Consectetur velit pariatur nihil quis nihil similique voluptatum in. Et nostrum ipsam quo magni. Velit et odit dolores."
+                  icon={<User size={32} />}
+                />
+                <FeatureBanner
+                  heading="Quick and easy setup"
+                  subheading="Fugit voluptates nihil ex et voluptas dignissimos blanditiis. Consectetur velit pariatur nihil quis nihil similique voluptatum in. Et nostrum ipsam quo magni. Velit et odit dolores."
+                  icon={<AlarmClock size={32} />}
+                />
+              </div>
+              <div className="flex items-center justify-center mt-12">
+                <Link href={routes.signUp}>
+                  <Button size="lg">Create account</Button>
+                </Link>
+              </div>
+            </HomePageLayout>
+          </TabsContent>
+          <TabsContent value="for-buyers">
+            <HomePageLayout
+              heading={<Heading size="h1">Online shopping made easy.</Heading>}
+              subheading={
+                <Heading size="h2">
+                  Shop hundreds of products from sellers worldwide.
+                </Heading>
+              }
+            >
+              <Heading size="h3">Top Picks</Heading>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 overflow-auto mt-4">
+                {storeAndProduct.map((item) => (
+                  <ProductCard
+                    key={item.product.id}
+                    storeAndProduct={item}
+                    hideButtonActions={true}
+                  />
+                ))}
+              </div>
+              <div className="mt-12 grid place-content-center">
+                <Link href={routes.products}>
+                  <Button variant="default">View All Products</Button>
+                </Link>
+              </div>
+              <div className="bg-blue-900 text-white w-full p-12 rounded-md mt-12 flex items-center flex-col gap-2 justify-center text-center">
+                <p className="uppercase tracking-wide text-sm font-medium">
+                  Featured seller
+                </p>
+                <p className="text-3xl font-bold">Tim&apos;s Terrific Toys</p>
+                <p>
+                  Top seller of the month! Tim&apos;s Toys has been selling toys
+                  for 10 years and is a top rated seller on the platform.
+                </p>
+                <Link
+                  href={routes.products + "?seller=tims-toys"}
+                  className="mt-6"
+                >
+                  <Button variant="secondary">Explore seller</Button>
+                </Link>
+              </div>
+              <div className="md:grid md:grid-cols-3 gap-4 flex flex-col mt-12">
+                <FeatureBanner
+                  heading="Free Shipping"
+                  subheading="Free shipping on all orders over $50"
+                  icon={<Truck size={32} />}
+                />
+                <FeatureBanner
+                  heading="24/7 Customer Support"
+                  subheading="Have a question? Get in touch."
+                  icon={<Phone size={32} />}
+                />
+                <FeatureBanner
+                  heading="Best prices"
+                  subheading="We offer the best prices on the market."
+                  icon={<DollarSign size={32} />}
+                />
+              </div>
+            </HomePageLayout>
+          </TabsContent>
+        </Tabs>
+      </ContentWrapper>
+    </div>
+  );
+}
+
+const HomePageLayout = (
+  props: PropsWithChildren<{
+    heading: React.ReactNode;
+    subheading: React.ReactNode;
+  }>
+) => {
+  return (
+    <>
+      <div className="flex flex-col items-center justify-center gap-2 text-center mb-12 pt-2">
+        {props.heading}
+        <div className="text-slate-600">{props.subheading}</div>
+      </div>
+      {props.children}
+    </>
+  );
+};

app/(storefront)/(main)/product/[productId]/layout.tsx

@@ -0,0 +1,10 @@
+import { ContentWrapper } from "@/components/content-wrapper";
+import { type PropsWithChildren } from "react";
+
+export default function Layout(props: PropsWithChildren) {
+  return (
+    <ContentWrapper className="max-w-7xl m-x-auto mt-8">
+      {props.children}
+    </ContentWrapper>
+  );
+}

app/(storefront)/(main)/product/[productId]/loading.tsx

@@ -0,0 +1,20 @@
+import { LoadingSkeleton } from "@/components/ui/loading-skeleton";
+
+export default function Loading() {
+  return (
+    <div className="md:grid md:grid-cols-9 gap-8 w-full flex flex-col">
+      <LoadingSkeleton className="w-full col-span-4 h-80" />
+      <div className="flex flex-col gap-4 col-span-5">
+        <LoadingSkeleton className="w-56 h-8" />
+        <LoadingSkeleton className="w-36 h-4" />
+        <LoadingSkeleton className="w-24 h-8" />
+        <div className="flex gap-2">
+          {Array.from(Array(2)).map((_, i) => (
+            <LoadingSkeleton.Button key={i} />
+          ))}
+        </div>
+        <LoadingSkeleton className="w-96 h-16" />
+      </div>
+    </div>
+  );
+}

app/(storefront)/(main)/product/[productId]/page.tsx

@@ -0,0 +1,114 @@
+import { ParagraphFormatter } from "@/components/paragraph-formatter";
+import { ProductForm } from "@/components/storefront/product-form";
+import { FeatureIcons } from "@/components/storefront/feature-icons";
+import { Heading } from "@/components/ui/heading";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Text } from "@/components/ui/text";
+import { db } from "@/db/db";
+import { Product, products, stores } from "@/db/schema";
+import { currencyFormatter } from "@/lib/currency";
+import { eq } from "drizzle-orm";
+import Image from "next/image";
+import Link from "next/link";
+import { productsQueryParams, routes } from "@/lib/routes";
+import { ProductImage } from "@/components/product-image";
+import { addToCart } from "@/server-actions/add-to-cart";
+
+export default async function StorefrontProductDetails(props: {
+  params: { productId: string };
+}) {
+  const product = (await db
+    .select()
+    .from(products)
+    .where(eq(products.id, Number(props.params.productId)))
+    .then((res) => {
+      if (res.length === 0) throw new Error("Product not found");
+      return res[0];
+    })
+    .catch(() => {
+      throw new Error("Product not found");
+    })) as Omit<Product, "images"> & {
+    images: { id: string; url: string; alt: string }[];
+  };
+
+  const store = await db
+    .select({
+      name: stores.name,
+      description: stores.description,
+      slug: stores.slug,
+    })
+    .from(stores)
+    .where(eq(stores.id, Number(product.storeId)))
+    .then((res) => res[0])
+    .catch(() => {
+      throw new Error("Store not found");
+    });
+
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="flex flex-col items-center md:items-start justify-start md:grid md:grid-cols-9 gap-8">
+        <div className="col-span-4 w-full">
+          <ProductImage
+            src={product.images[0]?.url}
+            alt={product.images[0]?.alt}
+            height="h-96"
+            width="w-full"
+          />
+          {product.images.length > 1 && (
+            <>
+              <div className="flex items-center justify-start gap-2 mt-2 overflow-auto flex-nowrap">
+                {product.images.slice(1).map((image) => (
+                  <div key={image.id} className="relative h-24 w-24">
+                    <Image
+                      src={image.url}
+                      alt={image.alt}
+                      fill
+                      className="object-cover h-24 w-24"
+                    />
+                  </div>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+        <div className="md:col-span-5 w-full">
+          <Heading size="h2">{product.name}</Heading>
+          <Text className="text-sm mt-2">
+            Sold by{" "}
+            <Link
+              href={`${routes.products}?${productsQueryParams.seller}${store.slug}`}
+            >
+              <span className="text-muted-foreground hover:underline">
+                {store.name}
+              </span>
+            </Link>
+          </Text>
+          <Text className="text-xl my-4">
+            {currencyFormatter(Number(product.price))}
+          </Text>
+          <ProductForm
+            addToCartAction={addToCart}
+            productName={product.name}
+            availableInventory={product.inventory}
+            productId={product.id}
+          />
+          <FeatureIcons className="mt-8" />
+        </div>
+      </div>
+      <Tabs defaultValue="product">
+        <div className="overflow-auto">
+          <TabsList>
+            <TabsTrigger value="product">Product Description</TabsTrigger>
+            <TabsTrigger value="seller">About the Seller</TabsTrigger>
+          </TabsList>
+        </div>
+        <TabsContent value="product" className="pt-2">
+          <ParagraphFormatter paragraphs={product.description} />
+        </TabsContent>
+        <TabsContent value="seller" className="pt-2">
+          {store.description}
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

app/(storefront)/(main)/products/@modal/(..)quickview/product/[productId]/layout.tsx

@@ -0,0 +1,12 @@
+import { type PropsWithChildren } from "react";
+import { AlertDialog, AlertDialogContent } from "@/components/ui/alert-dialog";
+
+export default function Layout(props: PropsWithChildren) {
+  return (
+    <AlertDialog defaultOpen>
+      <AlertDialogContent className="max-w-2xl min-w-xl max-h-[500px] overflow-x-auto">
+        {props.children}
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

app/(storefront)/(main)/products/@modal/(..)quickview/product/[productId]/loading.tsx

@@ -0,0 +1,19 @@
+import { LoadingSkeleton } from "@/components/ui/loading-skeleton";
+
+export default function Loading() {
+  return (
+    <div className="grid grid-cols-2 gap-6 w-full">
+      <LoadingSkeleton className="w-full h-48" />
+      <div className="flex flex-col gap-4 col-span-1">
+        <LoadingSkeleton className="w-56 h-8" />
+        <LoadingSkeleton className="w-24 h-8" />
+        <LoadingSkeleton.Button />
+        <div className="flex flex-col gap-2 w-full">
+          <LoadingSkeleton className="w-full h-5" />
+          <LoadingSkeleton className="w-[90%] h-5" />
+          <LoadingSkeleton className="w-[70%] h-5" />
+        </div>
+      </div>
+    </div>
+  );
+}

app/(storefront)/(main)/products/@modal/(..)quickview/product/[productId]/page.tsx

@@ -0,0 +1,91 @@
+import { AlertDialog, AlertDialogContent } from "@/components/ui/alert-dialog";
+import { ParagraphFormatter } from "@/components/paragraph-formatter";
+import { Heading } from "@/components/ui/heading";
+import { Text } from "@/components/ui/text";
+import { db } from "@/db/db";
+import { Product, products } from "@/db/schema";
+import { currencyFormatter } from "@/lib/currency";
+import { eq } from "drizzle-orm";
+import { ImageOff } from "lucide-react";
+import Image from "next/image";
+import { Button } from "@/components/ui/button";
+import { QuickViewModalWrapper } from "@/components/storefront/quickview-modal-wrapper";
+import Link from "next/link";
+import { routes } from "@/lib/routes";
+
+export default async function StorefrontProductQuickView(props: {
+  params: { productId: string };
+}) {
+  const product = (await db
+    .select()
+    .from(products)
+    .where(eq(products.id, Number(props.params.productId)))
+    .then((res) => {
+      if (res.length === 0) throw new Error("Product not found");
+      return res[0];
+    })
+    .catch(() => {
+      throw new Error("Product not found");
+    })) as Omit<Product, "images"> & {
+    images: { id: string; url: string; alt: string }[];
+  };
+
+  return (
+    <QuickViewModalWrapper>
+      <div className="flex flex-col gap-8">
+        <div className="flex flex-col items-center md:items-start justify-start md:grid md:grid-cols-9 gap-8">
+          <div className="col-span-4 w-full">
+            {product.images.length > 0 ? (
+              <>
+                <div className="relative h-48 w-full">
+                  <Image
+                    src={product.images[0].url}
+                    alt={product.images[0].alt}
+                    fill
+                    className="object-cover h-48 w-full"
+                  />
+                </div>
+                <div className="flex items-center justify-start gap-2 mt-2 overflow-auto flex-nowrap">
+                  {product.images.slice(1).map((image) => (
+                    <div key={image.id} className="relative h-24 w-24">
+                      <Image
+                        src={image.url}
+                        alt={image.alt}
+                        fill
+                        className="object-cover h-24 w-24"
+                      />
+                    </div>
+                  ))}
+                </div>
+              </>
+            ) : (
+              <div className="h-96 w-full bg-secondary flex justify-center items-center">
+                <ImageOff />
+              </div>
+            )}
+          </div>
+          <div className="md:col-span-5 w-full flex flex-col gap-2">
+            <Heading size="h3">{product.name}</Heading>
+            <Text className="text-lg">
+              {currencyFormatter(Number(product.price))}
+            </Text>
+            <div className="my-2 flex items-start flex-col gap-2 justify-center">
+              <Link href={`${routes.product}/${props.params.productId}`}>
+                <Button variant="default" className="w-fit" size="sm">
+                  View Product
+                </Button>
+              </Link>
+              {!product.inventory && (
+                <Text appearance="secondary">Sold out</Text>
+              )}
+            </div>
+            <ParagraphFormatter
+              className="text-sm"
+              paragraphs={product.description}
+            />
+          </div>
+        </div>
+      </div>
+    </QuickViewModalWrapper>
+  );
+}

app/(storefront)/(main)/products/@modal/default.ts

@@ -0,0 +1,3 @@
+export default function Default() {
+  return null;
+}

app/(storefront)/(main)/products/layout.tsx

@@ -0,0 +1,13 @@
+import { ContentWrapper } from "@/components/content-wrapper";
+import { PropsWithChildren } from "react";
+
+export default function Layout(
+  props: PropsWithChildren<{ modal: React.ReactNode }>
+) {
+  return (
+    <ContentWrapper>
+      {props.children}
+      {props.modal}
+    </ContentWrapper>
+  );
+}

app/(storefront)/(main)/products/loading.tsx

@@ -0,0 +1,17 @@
+import { LoadingSkeleton } from "@/components/ui/loading-skeleton";
+
+export default function Loading() {
+  return (
+    <div>
+      <LoadingSkeleton.CollectionHeaderWrapper />
+      <div className="md:grid md:grid-cols-12 gap-12 mt-8">
+        <LoadingSkeleton className="hidden md:block w-full md:col-span-3 md:h-full" />
+        <div className="md:col-span-9 sm:grid md:grid-cols-3 gap-8 sm:grid-cols-2 flex flex-col">
+          {Array.from(Array(12)).map((_, i) => (
+            <LoadingSkeleton key={i} className="w-full h-48" />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

app/(storefront)/(main)/products/page.tsx

@@ -0,0 +1,82 @@
+import { CollectionBody } from "@/components/storefront/collection-body";
+import { CollectionHeaderWrapper } from "@/components/storefront/collection-header-wrapper";
+import { CollectionPagePagination } from "@/components/storefront/collection-page-pagination";
+import { db } from "@/db/db";
+import { Product, Store, stores } from "@/db/schema";
+import { products } from "@/db/schema";
+import { eq, inArray } from "drizzle-orm";
+
+export type ProductAndStore = {
+  product: Omit<Product, "images"> & {
+    images: { id: string; url: string; alt: string }[];
+  };
+  store: Omit<Store, "description" | "industry">;
+};
+
+const PRODUCTS_PER_PAGE = 6;
+
+export default async function StorefrontProductsPage(context: {
+  params: { slug: string };
+  searchParams: { page: string; seller: string };
+}) {
+  const storeAndProduct = (await db
+    .select({
+      product: products,
+      store: {
+        id: stores.id,
+        name: stores.name,
+        slug: stores.slug,
+      },
+    })
+    .from(products)
+    .where(() => {
+      if (
+        context.searchParams.seller === undefined ||
+        context.searchParams.seller === ""
+      )
+        return;
+      return inArray(stores.slug, context.searchParams.seller.split("_"));
+    })
+    .leftJoin(stores, eq(products.storeId, stores.id))
+    .limit(PRODUCTS_PER_PAGE)
+    .offset(
+      !isNaN(Number(context.searchParams.page))
+        ? (Number(context.searchParams.page) - 1) * PRODUCTS_PER_PAGE
+        : 0
+    )) as ProductAndStore[];
+
+  return (
+    <div>
+      <CollectionHeaderWrapper heading="Products">
+        <p>
+          Browse all products from our marketplace sellers – groceries, tech,
+          fashion and home essentials in one place.
+        </p>
+        <p>
+          Filter by Featured Sellers to see items from a specific store, or use
+          the categories to discover something new.
+        </p>
+        
+      </CollectionHeaderWrapper>
+      <CollectionBody
+        storeAndProduct={storeAndProduct}
+        activeSellers={await getActiveSellers()}
+      >
+        <CollectionPagePagination
+          productsPerPage={PRODUCTS_PER_PAGE}
+          sellerParams={context.searchParams.seller as string}
+        />
+      </CollectionBody>
+    </div>
+  );
+}
+
+const getActiveSellers = async () => {
+  return await db
+    .select({
+      id: stores.id,
+      name: stores.name,
+      slug: stores.slug,
+    })
+    .from(stores);
+};

app/(storefront)/(main)/quickview/product/[productId]/page.tsx

@@ -0,0 +1,8 @@
+import { routes } from "@/lib/routes";
+import { redirect } from "next/navigation";
+
+export default function QuickViewPage(context: {
+  params: { productId: string };
+}) {
+  redirect(`${routes.product}/${context.params.productId}`);
+}

app/(storefront)/checkout/[storeSlug]/error.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Heading } from "@/components/ui/heading";
+import { routes } from "@/lib/routes";
+import Link from "next/link";
+
+export default function CheckoutError(props: {
+  error: Error;
+  reset: () => void;
+}) {
+  return (
+    <div className="flex items-center justify-center flex-col mt-24">
+      <Heading size="h2">Sorry, an error occured loading this page.</Heading>
+      <p className="mt-2">
+        Please try again, or contact our customer support team if this issue
+        persists.
+      </p>
+      <div className="flex gap-2 items-center mt-4">
+        <Link href={routes.cart}>
+          <Button>Return to Cart</Button>
+        </Link>
+      </div>
+    </div>
+  );
+}

app/(storefront)/checkout/[storeSlug]/order-confirmation/components/verification.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { TextInputWithLabel } from "@/components/text-input-with-label";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export const Verification = () => {
+  const [formValues, setFormValues] = useState({
+    postcode: "",
+  });
+  const router = useRouter();
+
+  return (
+    <form
+      className="flex flex-col gap-2 md:w-1/2 bg-secondary border border-border rounded-md p-4"
+      onSubmit={(e) => {
+        e.preventDefault();
+        router.push(
+          window.location.href.split("&delivery_postal_code=")[0] +
+            "&delivery_postal_code=" +
+            formValues.postcode.split(" ").join("")
+        );
+      }}
+    >
+      <div className="md:grid flex flex-col grid-cols-12 gap-4">
+        <div className="md:col-span-8">
+          <TextInputWithLabel
+            label="Enter delivery postcode"
+            id="postcode"
+            type="text"
+            state={formValues}
+            setState={setFormValues}
+          />
+        </div>
+        <div className="flex w-full items-end md:col-span-4">
+          <Button className="w-full" type="submit">
+            Submit
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+};

app/(storefront)/checkout/[storeSlug]/order-confirmation/page.tsx

@@ -0,0 +1,144 @@
+import { Heading } from "@/components/ui/heading";
+import { getPaymentIntentDetails } from "@/server-actions/stripe/payment";
+import { Verification } from "./components/verification";
+import { db } from "@/db/db";
+import { stores } from "@/db/schema";
+import { eq } from "drizzle-orm";
+import { CheckoutItem, OrderItemDetails } from "@/lib/types";
+import { Check } from "lucide-react";
+import { OrderLineItems } from "@/components/order-line-items";
+import { getDetailsOfProductsOrdered } from "@/server-actions/orders";
+import { currencyFormatter } from "@/lib/currency";
+
+const getSellerName = async (storeSlug: string) => {
+  return await db
+    .select({
+      name: stores.name,
+    })
+    .from(stores)
+    .where(eq(stores.slug, storeSlug));
+};
+
+export default async function OrderConfirmation({
+  params,
+  searchParams,
+}: {
+  params: {
+    storeSlug: string;
+  };
+  searchParams: {
+    payment_intent: string;
+    payment_intent_client_secret: string;
+    redirect_status: "success";
+    delivery_postal_code: string;
+  };
+}) {
+  const { paymentDetails, isVerified } = await getPaymentIntentDetails({
+    paymentIntentId: searchParams.payment_intent,
+    storeSlug: params.storeSlug,
+    deliveryPostalCode: searchParams.delivery_postal_code,
+  });
+
+  const checkoutItems = JSON.parse(
+    paymentDetails?.metadata?.items ?? "[]"
+  ) as CheckoutItem[];
+
+  let products: OrderItemDetails[] = [];
+  let sellerDetails;
+  if (isVerified) {
+    sellerDetails = (await getSellerName(params.storeSlug))[0];
+    products = await getDetailsOfProductsOrdered(checkoutItems);
+  }
+
+  return (
+    <div className="mt-8">
+      {isVerified ? (
+        <div>
+          <Heading size="h2">
+            <div className="flex md:flex-row flex-col items-start md:items-center justify-start gap-4 md:gap-2">
+              <div className="border-2 border-green-600 text-green-600 bg-transparent rounded-full h-10 w-10 flex items-center justify-center">
+                <Check className="text-green-600" size={26} />
+              </div>
+              <span>
+                Thanks for your order,{" "}
+                <span className="capitalize">
+                  {paymentDetails?.shipping?.name?.split(" ")[0]}
+                </span>
+                !
+              </span>
+            </div>
+          </Heading>
+          <p className="text-muted-foreground mt-4">
+            Your payment confirmation ID is #
+            {searchParams.payment_intent.slice(3)}
+          </p>
+          <div className="flex flex-col gap-4 mt-8">
+            <div className="p-6 bg-secondary border border-border rounded-md">
+              <Heading size="h3">What&apos;s next?</Heading>
+              <p>
+                Our warehouse team is busy preparing your order. You&apos;ll
+                receive an email once your order ships.
+              </p>
+            </div>
+            <div className="lg:grid grid-cols-2 gap-4 flex flex-col">
+              <div className="p-6 bg-secondary border border-border rounded-md sm:grid grid-cols-3 flex flex-col gap-4">
+                <div className="sm:col-span-2">
+                  <div className="mb-2">
+                    <Heading size="h4">Shipping Address</Heading>
+                  </div>
+                  <p>{paymentDetails?.shipping?.name}</p>
+                  <p className="mb-3">{paymentDetails?.receipt_email}</p>
+                  <p>{paymentDetails?.shipping?.address?.line1}</p>
+                  <p>{paymentDetails?.shipping?.address?.line2}</p>
+                  <p>
+                    {paymentDetails?.shipping?.address?.city},{" "}
+                    {paymentDetails?.shipping?.address?.postal_code}
+                  </p>
+                  <p>
+                    {paymentDetails?.shipping?.address?.state},{" "}
+                    {paymentDetails?.shipping?.address?.country}
+                  </p>
+                </div>
+                <div>
+                  <div className="mb-2">
+                    <Heading size="h4">Seller Details</Heading>
+                  </div>
+                  <p>{sellerDetails?.name}</p>
+                </div>
+              </div>
+              <div className="p-6 border border-border bg-secondary rounded-md">
+                <div className="mb-2">
+                  <Heading size="h4">Order Details</Heading>
+                </div>
+                <OrderLineItems
+                  checkoutItems={checkoutItems}
+                  products={products}
+                />
+                <div className="border-y border-slate-200 py-2 px-2 mx-1 mt-2 flex items-center gap-2">
+                  <Heading size="h4">Order Total: </Heading>
+                  <p className="scroll-m-20 text-xl tracking-tight">
+                    {currencyFormatter(
+                      checkoutItems.reduce(
+                        (acc, curr) => acc + curr.price * curr.qty,
+                        0
+                      )
+                    )}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div>
+          <Heading size="h2">Thanks for your order!</Heading>
+          <p className="mb-4 mt-2">
+            Please enter your delivery postcode below to view your order
+            details.
+          </p>
+          <Verification />
+        </div>
+      )}
+    </div>
+  );
+}

app/(storefront)/checkout/[storeSlug]/page.tsx

@@ -0,0 +1,108 @@
+import { createPaymentIntent } from "@/server-actions/stripe/payment";
+import CheckoutWrapper from "../components/checkout-wrapper";
+import { cookies } from "next/headers";
+import { getCart } from "@/server-actions/get-cart-details";
+import { db } from "@/db/db";
+import { payments, products, stores } from "@/db/schema";
+import { eq } from "drizzle-orm";
+import { CheckoutItem } from "@/lib/types";
+import { CartLineItems } from "@/components/storefront/cart-line-items";
+import { InfoCard } from "@/components/admin/info-card";
+import { AlertCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { routes } from "@/lib/routes";
+import Link from "next/link";
+import { hasConnectedStripeAccount } from "@/server-actions/stripe/account";
+
+export default async function Page({
+  params,
+}: {
+  params: { storeSlug: string };
+}) {
+  const cartId = cookies().get("cartId")?.value;
+  const { cartItems, cartItemDetails } = await getCart(Number(cartId));
+
+  const store = await db
+    .select({
+      storeId: stores.id,
+      stripeAccountId: payments.stripeAccountId,
+    })
+    .from(stores)
+    .leftJoin(payments, eq(payments.storeId, stores.id))
+    .where(eq(stores.slug, params.storeSlug));
+
+  const storeId = Number(store[0].storeId);
+  const storeStripeAccountId = store[0].stripeAccountId;
+
+  const storeProducts = await db
+    .select({
+      id: products.id,
+      price: products.price,
+    })
+    .from(products)
+    .leftJoin(stores, eq(products.storeId, stores.id))
+    .where(eq(stores.id, storeId));
+
+  // @TODO: check if items from this store are in the cart
+
+  const detailsOfProductsInCart = cartItems
+    .map((item) => {
+      const product = storeProducts.find((p) => p.id === item.id);
+      const priceAsNumber = Number(product?.price);
+      if (!product || isNaN(priceAsNumber)) return undefined;
+      return {
+        id: item.id,
+        price: priceAsNumber,
+        qty: item.qty,
+      };
+    })
+    .filter(Boolean) as CheckoutItem[];
+
+  if (
+    !storeStripeAccountId ||
+    !(await hasConnectedStripeAccount(storeId, true))
+  ) {
+    return (
+      <InfoCard
+        heading="Online payments not setup"
+        subheading="This seller does not have online payments setup yet. Please contact the seller directly to submit your order."
+        icon={<AlertCircle size={24} />}
+        button={
+          <Link href={routes.cart}>
+            <Button>Return to cart</Button>
+          </Link>
+        }
+      />
+    );
+  }
+
+  if (
+    !storeProducts.length ||
+    isNaN(storeId) ||
+    !detailsOfProductsInCart.length
+  )
+    throw new Error("Store not found");
+
+  const paymentIntent = createPaymentIntent({
+    items: detailsOfProductsInCart,
+    storeId,
+  });
+
+  // providing the paymntIntent to the CheckoutWrapper to work around Nextjs bug with authentication not passed to server actions when called in client component
+  return (
+    <CheckoutWrapper
+      detailsOfProductsInCart={detailsOfProductsInCart}
+      paymentIntent={paymentIntent}
+      storeStripeAccountId={storeStripeAccountId}
+      cartLineItems={
+        <CartLineItems
+          variant="checkout"
+          cartItems={cartItems}
+          products={
+            cartItemDetails?.filter((item) => item.storeId === storeId) ?? []
+          }
+        />
+      }
+    />
+  );
+}

app/(storefront)/checkout/components/checkout-form.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Heading } from "@/components/ui/heading";
+import { routes } from "@/lib/routes";
+import { StripeCheckoutFormDetails } from "@/lib/types";
+// https://stripe.com/docs/payments/quickstart
+
+import {
+  PaymentElement,
+  LinkAuthenticationElement,
+  useStripe,
+  useElements,
+  AddressElement,
+} from "@stripe/react-stripe-js";
+import {
+  StripeAddressElementChangeEvent,
+  StripeLinkAuthenticationElementChangeEvent,
+  StripePaymentElementOptions,
+} from "@stripe/stripe-js";
+import { AlertCircle, Loader2 } from "lucide-react";
+import { useParams } from "next/navigation";
+import { FormEvent, useEffect, useState } from "react";
+
+export default function CheckoutForm() {
+  const { storeSlug } = useParams();
+  const stripe = useStripe();
+  const elements = useElements();
+
+  const [email, setEmail] = useState("");
+  const [message, setMessage] = useState<null | string>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (!stripe) {
+      return;
+    }
+
+    const clientSecret = new URLSearchParams(window.location.search).get(
+      "payment_intent_client_secret"
+    );
+
+    if (!clientSecret) {
+      return;
+    }
+
+    stripe.retrievePaymentIntent(clientSecret).then(({ paymentIntent }) => {
+      switch (paymentIntent?.status) {
+        case "succeeded":
+          setMessage("Payment succeeded!");
+          break;
+        case "processing":
+          setMessage("Your payment is processing.");
+          break;
+        case "requires_payment_method":
+          setMessage("Your payment was not successful, please try again.");
+          break;
+        default:
+          setMessage("Something went wrong.");
+          break;
+      }
+    });
+  }, [stripe]);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+
+    if (!stripe || !elements) {
+      // Stripe.js hasn't yet loaded.
+      // Make sure to disable form submission until Stripe.js has loaded.
+      return;
+    }
+
+    setIsLoading(true);
+
+    const { error } = await stripe.confirmPayment({
+      elements,
+      confirmParams: {
+        // Make sure to change this to your payment completion page
+        return_url: `${process.env.NEXT_PUBLIC_APP_URL}/${routes.checkout}/${storeSlug}/${routes.orderConfirmation}`,
+        receipt_email: email,
+      },
+    });
+
+    // This point will only be reached if there is an immediate error when
+    // confirming the payment. Otherwise, your customer will be redirected to
+    // your `return_url`. For some payment methods like iDEAL, your customer will
+    // be redirected to an intermediate site first to authorize the payment, then
+    // redirected to the `return_url`.
+    if (error.type === "card_error" || error.type === "validation_error") {
+      setMessage(error.message ?? "An unexpected error occurred.");
+    } else {
+      setMessage("An unexpected error occurred.");
+    }
+
+    setIsLoading(false);
+  };
+
+  const paymentElementOptions = {
+    layout: "tabs",
+  } as StripePaymentElementOptions;
+
+  return (
+    <form
+      id="payment-form"
+      onSubmit={handleSubmit}
+      className="flex flex-col gap-6"
+    >
+      {/* Show any error or success messages */}
+      {message && (
+        <div
+          id="payment-message"
+          className="bg-red-100 border border-red-600 text-red-800 rounded-md p-2 flex items-center justify-start gap-2"
+        >
+          <AlertCircle />
+          <p> {message}</p>
+        </div>
+      )}
+      <div className="flex flex-col gap-2 bg-secondary border-border border rounded-md md:p-6 p-4 md:pb-7 pb-5">
+        <Heading size="h4">Contact Info</Heading>
+        <LinkAuthenticationElement
+          id="link-authentication-element"
+          onChange={(e: StripeLinkAuthenticationElementChangeEvent) =>
+            setEmail(e.value.email)
+          }
+        />
+      </div>
+      <div className="flex flex-col gap-2 bg-secondary border-border border rounded-md md:p-6 p-4 md:pb-7 pb-5">
+        <Heading size="h4">Shipping</Heading>
+        <AddressElement options={{ mode: "shipping" }} />
+      </div>
+      <div className="flex flex-col gap-2 bg-secondary border-border border rounded-md md:p-6 p-4 md:pb-7 pb-5">
+        <Heading size="h4">Payment</Heading>
+        <PaymentElement id="payment-element" options={paymentElementOptions} />
+      </div>
+      <Button
+        disabled={isLoading || !stripe || !elements}
+        id="submit"
+        className="w-fit"
+      >
+        <div className="flex items-center justify-center gap-2">
+          {!!isLoading && <Loader2 size={18} className="animate-spin" />}
+          <p>Pay Now</p>
+        </div>
+      </Button>
+    </form>
+  );
+}

app/(storefront)/checkout/components/checkout-wrapper.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import { StripeElementsOptions, loadStripe } from "@stripe/stripe-js";
+import { Elements } from "@stripe/react-stripe-js";
+import { useEffect, useMemo, useState } from "react";
+import CheckoutForm from "./checkout-form";
+import { ChevronRight } from "lucide-react";
+import { StarSVG } from "@/components/icons/star";
+import { routes } from "@/lib/routes";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Heading } from "@/components/ui/heading";
+import { OrderSummaryAccordion } from "./order-summary-accordion";
+import { FeatureIcons } from "@/components/storefront/feature-icons";
+import { CheckoutItem } from "@/lib/types";
+import { currencyFormatter } from "@/lib/currency";
+
+export default function CheckoutWrapper(props: {
+  paymentIntent: Promise<{ clientSecret: string | null } | undefined>;
+  detailsOfProductsInCart: CheckoutItem[];
+  storeStripeAccountId: string;
+  cartLineItems: React.ReactNode;
+}) {
+  const [clientSecret, setClientSecret] = useState("");
+  const stripePromise = useMemo(
+    () =>
+      loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!, {
+        stripeAccount: props.storeStripeAccountId,
+      }),
+    [props.storeStripeAccountId]
+  );
+
+  useEffect(() => {
+    let error;
+    props.paymentIntent.then((data) => {
+      if (!data || !data.clientSecret) {
+        error = true;
+        return;
+      }
+      setClientSecret(data.clientSecret);
+    });
+    if (error) throw new Error("Payment intent not found");
+  }, [props.paymentIntent]);
+
+  const options = {
+    clientSecret,
+    appearance: {
+      theme: "stripe",
+    },
+  } as StripeElementsOptions;
+
+  const orderTotal = useMemo(() => {
+    return currencyFormatter(
+      props.detailsOfProductsInCart.reduce(
+        (acc, item) => acc + item.price * item.qty,
+        0
+      )
+    );
+  }, [props.detailsOfProductsInCart]);
+
+  return (
+    <div>
+      <Heading size="h2">Checkout</Heading>
+      <div className="text-muted-foreground flex items-center justify-start gap-1">
+        <Link href={routes.cart}>
+          <Button variant="link" className="p-0 text-muted-foreground">
+            Cart
+          </Button>
+        </Link>
+        <ChevronRight size={16} />
+        <Button
+          variant="link"
+          className="p-0 text-muted-foreground hover:no-underline hover:cursor-auto"
+        >
+          Checkout
+        </Button>
+      </div>
+      {clientSecret && (
+        <div>
+          <div className="lg:grid lg:grid-cols-12 lg:gap-8 mt-4 flex flex-col-reverse gap-6">
+            <div className="col-span-7">
+              <Elements options={options} stripe={stripePromise}>
+                <CheckoutForm />
+              </Elements>
+            </div>
+            <div className="col-span-5">
+              <div className="bg-secondary rounded-lg lg:p-6 h-fit border-border border p-1 px-4 lg:mb-8">
+                <div className="hidden lg:flex flex-col gap-2">
+                  <Heading size="h4">Order Summary</Heading>
+                  {props.cartLineItems}
+                  <OrderTotalRow total={orderTotal} />
+                </div>
+                <OrderSummaryAccordion
+                  title="Order Summary"
+                  className="lg:hidden"
+                >
+                  {props.cartLineItems}
+                  <OrderTotalRow total={orderTotal} />
+                </OrderSummaryAccordion>
+              </div>
+              <div className="lg:hidden bg-secondary border border-border p-5 pt-8 mt-8 rounded-md">
+                <TrustBadges />
+              </div>
+              <div className="hidden lg:block">
+                <TrustBadges />
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+const TrustBadges = () => {
+  return (
+    <div className="flex items-center justify-center flex-col gap-6">
+      <div className="flex flex-col gap-2 items-center justify-center">
+        <p className="text-lg font-semibold text-center">
+          Hundreds of happy customers worldwide
+        </p>
+        <div className="flex items-center justify-center gap-1">
+          {Array.from(Array(5)).map((_, i) => (
+            <div className="max-w-2" key={i}>
+              <StarSVG />
+            </div>
+          ))}
+        </div>
+      </div>
+      <FeatureIcons />
+    </div>
+  );
+};
+
+const OrderTotalRow = (props: { total: string }) => {
+  return (
+    <div className="flex items-center justify-between p-4 py-2 border-y border-slate-200">
+      <Heading size="h4">Total</Heading>
+      <p className="text-lg font-semibold">{props.total}</p>
+    </div>
+  );
+};

app/(storefront)/checkout/components/order-summary-accordion.tsx

@@ -0,0 +1,28 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { cn } from "@/lib/utils";
+import { PropsWithChildren } from "react";
+
+export function OrderSummaryAccordion(
+  props: PropsWithChildren<{
+    title: string;
+    className?: string;
+  }>
+) {
+  return (
+    <Accordion
+      type="single"
+      collapsible
+      className={cn("w-full", props.className)}
+    >
+      <AccordionItem value="item-1" className="border-none">
+        <AccordionTrigger>{props.title}</AccordionTrigger>
+        <AccordionContent>{props.children}</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}

app/(storefront)/checkout/layout.tsx

@@ -0,0 +1,16 @@
+import { ContentWrapper } from "@/components/content-wrapper";
+import { Logo } from "@/components/logo";
+import { PropsWithChildren } from "react";
+
+export default function Layout(props: PropsWithChildren) {
+  return (
+    <div>
+      <header className="bg-primary text-white">
+        <ContentWrapper className="flex items-center justify-center">
+          <Logo />
+        </ContentWrapper>
+      </header>
+      <ContentWrapper>{props.children}</ContentWrapper>
+    </div>
+  );
+}

app/(storefront)/components/feature-banner.tsx

@@ -0,0 +1,15 @@
+export const FeatureBanner = (props: {
+  heading: string;
+  subheading: string;
+  icon: React.ReactNode;
+}) => {
+  return (
+    <div className="p-6 bg-secondary border border-border rounded-md flex flex-col gap-3">
+      <div>{props.icon}</div>
+      <div>
+        <p className="font-semibold text-xl">{props.heading}</p>
+        <p>{props.subheading}</p>
+      </div>
+    </div>
+  );
+};

app/account/buying/purchases/components/columns.tsx

@@ -0,0 +1,77 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { StatusLabel } from "@/components/ui/status-label";
+import { currencyFormatter } from "@/lib/currency";
+import { BuyersOrderTable, CheckoutItem } from "@/lib/types";
+import { convertSecondsToDate, formatOrderNumber } from "@/lib/utils";
+import { ColumnDef } from "@tanstack/react-table";
+import { formatRelative } from "date-fns";
+import { ArrowUpDown } from "lucide-react";
+
+export const columns: ColumnDef<BuyersOrderTable>[] = [
+  {
+    accessorKey: "id",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Order Number
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
+    cell: ({ row }) => {
+      const id = row.getValue("id");
+      return <p className="px-4">{formatOrderNumber(Number(id))}</p>;
+    },
+  },
+  {
+    accessorKey: "sellerName",
+    header: "Seller",
+  },
+  {
+    accessorKey: "total",
+    header: "Total",
+    cell: ({ row }) => currencyFormatter(Number(row.getValue("total"))),
+  },
+  {
+    accessorKey: "items",
+    header: "Items",
+    cell: ({ row }) => {
+      const items = JSON.parse(row.getValue("items")) as CheckoutItem[];
+      const total = items.reduce((acc, item) => acc + Number(item.qty), 0);
+      return (
+        <p>
+          {total} {`${total > 1 ? "items" : "item"}`}
+        </p>
+      );
+    },
+  },
+  {
+    accessorKey: "stripePaymentIntentStatus",
+    header: "Payment Status",
+    cell: ({ row }) => {
+      const status = row.getValue("stripePaymentIntentStatus") as string;
+      return (
+        <StatusLabel status={status === "succeeded" ? "success" : "error"}>
+          {status}
+        </StatusLabel>
+      );
+    },
+  },
+  {
+    accessorKey: "createdAt",
+    header: "Date ordered",
+    cell: ({ row }) => {
+      const createdSeconds = parseFloat(row.getValue("createdAt"));
+      if (!createdSeconds) return;
+      const relativeDate = formatRelative(
+        convertSecondsToDate(createdSeconds),
+        new Date()
+      );
+      return relativeDate[0].toUpperCase() + relativeDate.slice(1);
+    },
+  },
+];

app/account/buying/purchases/components/data-table.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Settings2 } from "lucide-react";
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    getFilteredRowModel: getFilteredRowModel(),
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+    },
+  });
+
+  return (
+    <div>
+      <div className="flex items-center justify-start gap-2">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" className="ml-auto">
+              <Settings2 size={16} />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {table
+              .getAllColumns()
+              .filter((column) => column.getCanHide())
+              .map((column) => {
+                const headerValue = column.columnDef.header;
+                return (
+                  <DropdownMenuCheckboxItem
+                    key={column.id}
+                    className="capitalize"
+                    checked={column.getIsVisible()}
+                    onCheckedChange={(value) =>
+                      column.toggleVisibility(!!value)
+                    }
+                  >
+                    {typeof headerValue === "string"
+                      ? headerValue
+                      : column.id === "id"
+                      ? "Order Number"
+                      : column.id}
+                  </DropdownMenuCheckboxItem>
+                );
+              })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <div className="flex items-center py-4 w-full">
+          <Input
+            placeholder="Search by seller"
+            value={
+              (table.getColumn("sellerName")?.getFilterValue() as string) ?? ""
+            }
+            onChange={(event) =>
+              table.getColumn("sellerName")?.setFilterValue(event.target.value)
+            }
+            className="max-w-sm"
+          />
+        </div>
+      </div>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader className="bg-secondary">
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex items-center justify-end space-x-2 py-4">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          Previous
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          Next
+        </Button>
+      </div>
+    </div>
+  );
+}

app/account/buying/purchases/page.tsx

@@ -0,0 +1,55 @@
+import { BuyersOrderTable } from "@/lib/types";
+import { DataTable } from "./components/data-table";
+import { columns } from "./components/columns";
+import { db } from "@/db/db";
+import { orders, stores } from "@/db/schema";
+import { eq } from "drizzle-orm";
+import { InfoCard } from "@/components/admin/info-card";
+import { Box } from "lucide-react";
+import { HeadingAndSubheading } from "@/components/admin/heading-and-subheading";
+import { currentUser } from "@clerk/nextjs";
+
+async function getData(): Promise<BuyersOrderTable[]> {
+  const user = await currentUser();
+  const userEmailAddress = user?.emailAddresses[0].emailAddress;
+  if (!userEmailAddress) return [];
+  const storeOrders = await db
+    .select({
+      id: orders.prettyOrderId,
+      sellerName: stores.name,
+      items: orders.items,
+      total: orders.total,
+      stripePaymentIntentStatus: orders.stripePaymentIntentStatus,
+      createdAt: orders.createdAt,
+    })
+    .from(orders)
+    .leftJoin(stores, eq(orders.storeId, stores.id))
+    .where(eq(orders.email, userEmailAddress));
+  return (storeOrders as BuyersOrderTable[]).sort(
+    (a, b) => b.createdAt - a.createdAt
+  );
+}
+
+export default async function OrdersPage() {
+  const data = await getData();
+
+  return (
+    <div>
+      <div className="mb-6">
+        <HeadingAndSubheading
+          heading="Your purchases"
+          subheading="View and manage purchases you've made"
+        />
+      </div>
+      {data.length > 0 ? (
+        <DataTable columns={columns} data={data} />
+      ) : (
+        <InfoCard
+          heading="No orders"
+          subheading="You haven't placed any orders yet."
+          icon={<Box size={30} />}
+        />
+      )}
+    </div>
+  );
+}

app/account/layout.tsx

@@ -0,0 +1,81 @@
+// app/account/layout.tsx
+export const dynamic = "force-dynamic";
+export const revalidate = 0; // optional, but makes intent clear
+
+
+import { ContentWrapper } from "@/components/content-wrapper";
+import { Footer } from "@/components/footer";
+import { NavBar } from "@/components/navbar";
+import { Heading } from "@/components/ui/heading";
+import { PropsWithChildren } from "react";
+import { SignedIn, SignedOut, UserButton } from "@clerk/nextjs";
+import SignInWrapper from "@/components/sign-in";
+import { singleLevelNestedRoutes } from "@/lib/routes";
+import { MenuItems, SecondaryMenu } from "@/components/secondary-menu";
+import { Line } from "@/components/line";
+import { PaymentConnectionStatus } from "@/components/admin/payment-connection-status";
+
+export default async function AdminLayout({ children }: PropsWithChildren) {
+  return (
+    <div className="min-h-screen w-full flex flex-col">
+      <NavBar showSecondAnnouncementBar={false} />
+
+      <div>
+        <div className="bg-secondary py-2 md:px-6 border-b border-border">
+          <ContentWrapper className="flex items-center justify-between">
+            <Heading size="h2">Your Account</Heading>
+            <div className="p-[1px] bg-gray-400 rounded-full">
+              <UserButton afterSignOutUrl={process.env.NEXT_PUBLIC_APP_URL} />
+            </div>
+          </ContentWrapper>
+        </div>
+        <div>
+          <ContentWrapper className="w-full py-2 flex items-center justify-between">
+            <SecondaryMenu menuItems={menuItems} />
+            <PaymentConnectionStatus />
+          </ContentWrapper>
+        </div>
+        <Line />
+      </div>
+
+      <ContentWrapper className="w-full flex items-start flex-col flex-1 mb-8">
+        <SignedIn>
+          <div className="w-full">{children}</div>
+        </SignedIn>
+        <SignedOut>
+          <SignInWrapper />
+        </SignedOut>
+      </ContentWrapper>
+
+      <Footer />
+    </div>
+  );
+}
+
+const menuItems: MenuItems = [
+  {
+    name: "Profile",
+    href: singleLevelNestedRoutes.account.profile,
+    group: "selling",
+  },
+  {
+    name: "Products",
+    href: singleLevelNestedRoutes.account.products,
+    group: "selling",
+  },
+  {
+    name: "Orders",
+    href: singleLevelNestedRoutes.account.orders,
+    group: "selling",
+  },
+  {
+    name: "Payments",
+    href: singleLevelNestedRoutes.account.payments,
+    group: "selling",
+  },
+  {
+    name: "Your purchases",
+    href: singleLevelNestedRoutes.account["your-purchases"],
+    group: "buying",
+  },
+];

app/account/page.tsx

@@ -0,0 +1,12 @@
+import { HeadingAndSubheading } from "@/components/admin/heading-and-subheading";
+
+export default function Account() {
+  return (
+    <>
+      <HeadingAndSubheading
+        heading="Account"
+        subheading="Manage your account"
+      />
+    </>
+  );
+}

app/account/selling/(orders)/abandoned-carts/components/columns.tsx

@@ -0,0 +1,45 @@
+"use client";
+import { formatRelative } from "date-fns";
+import { currencyFormatter } from "@/lib/currency";
+import { convertSecondsToDate } from "@/lib/utils";
+import { ColumnDef } from "@tanstack/react-table";
+
+// This type is used to define the shape of our data.
+// You can use a Zod schema here if you want.
+export type Payment = {
+  id: string;
+  amount: number;
+  created: number;
+  cartId: number;
+};
+
+export const columns: ColumnDef<Payment>[] = [
+  {
+    accessorKey: "id",
+    header: "Checkout ID",
+  },
+  {
+    accessorKey: "amount",
+    header: "Amount",
+    cell: ({ row }) => {
+      const amount = parseFloat(row.getValue("amount"));
+      return currencyFormatter(amount);
+    },
+  },
+  {
+    accessorKey: "created",
+    header: "Created At",
+    cell: ({ row }) => {
+      const createdSeconds = parseFloat(row.getValue("created"));
+      const relativeDate = formatRelative(
+        convertSecondsToDate(createdSeconds),
+        new Date()
+      );
+      return relativeDate[0].toUpperCase() + relativeDate.slice(1);
+    },
+  },
+  {
+    accessorKey: "cartId",
+    header: "Cart ID",
+  },
+];

app/account/selling/(orders)/abandoned-carts/components/data-table.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import { Payment } from "./columns";
+import { Loader2 } from "lucide-react";
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  getPaymentIntents: ({
+    startingAfterPaymentId,
+    beforePaymentId,
+  }: {
+    startingAfterPaymentId?: string | undefined;
+    beforePaymentId?: string | undefined;
+  }) => Promise<{ paymentIntents: any; hasMore: any }>;
+  lastPaymentIntentInInitialFetchId: string;
+  initialFetchHasNextPage: boolean;
+}
+
+export function DataTable<TData, TValue>(props: DataTableProps<TData, TValue>) {
+  const [newData, setNewData] = useState<Payment[]>(props.data as Payment[]);
+  const [hasNextPage, setHasNextPage] = useState(props.initialFetchHasNextPage);
+  const [isLoadingNewPage, setIsLoadingNewPage] = useState({
+    previous: false,
+    next: false,
+  });
+  const [pageIndex, setPageIndex] = useState(1);
+
+  const table = useReactTable({
+    data: newData as TData[],
+    columns: props.columns,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+  });
+
+  return (
+    <div>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader className="bg-secondary">
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={props.columns.length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex items-center justify-between gap-2">
+        <p className="text-sm text-muted-foreground">
+          Page {pageIndex <= 0 ? 1 : pageIndex} of{" "}
+          {hasNextPage ? "many" : pageIndex}
+        </p>
+        <div className="flex items-center justify-end space-x-2 py-4">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={async () => {
+              setIsLoadingNewPage({ previous: true, next: false });
+              const currentNewestPaymentIntent = newData.at(0);
+              const { paymentIntents } = await props.getPaymentIntents({
+                beforePaymentId: currentNewestPaymentIntent?.id,
+              });
+              setNewData(paymentIntents);
+              setIsLoadingNewPage({ previous: false, next: false });
+              setPageIndex((prev) => prev - 1);
+            }}
+            disabled={
+              props.lastPaymentIntentInInitialFetchId === newData.at(-1)?.id ||
+              isLoadingNewPage.previous ||
+              isLoadingNewPage.next
+            }
+            className="flex items-center justify-center gap-1"
+          >
+            <p>Previous</p>
+            {isLoadingNewPage.previous && (
+              <Loader2 size={14} className="animate-spin" />
+            )}
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={async () => {
+              setIsLoadingNewPage({ previous: false, next: true });
+              const currentOldestPaymentIntent = newData.at(-1);
+              const { paymentIntents, hasMore } = await props.getPaymentIntents(
+                {
+                  startingAfterPaymentId: currentOldestPaymentIntent?.id,
+                }
+              );
+              setHasNextPage(hasMore);
+              setNewData(paymentIntents);
+              setIsLoadingNewPage({ previous: false, next: false });
+              setPageIndex((prev) => prev + 1);
+            }}
+            disabled={
+              !hasNextPage || isLoadingNewPage.previous || isLoadingNewPage.next
+            }
+            className="flex items-center justify-center gap-1"
+          >
+            <p>Next</p>
+            {isLoadingNewPage.next && (
+              <Loader2 size={14} className="animate-spin" />
+            )}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

app/account/selling/(orders)/abandoned-carts/page.tsx

@@ -0,0 +1,45 @@
+import { getPaymentIntents } from "@/server-actions/stripe/payment";
+import { Payment, columns } from "./components/columns";
+import { DataTable } from "./components/data-table";
+import { InfoCard } from "@/components/admin/info-card";
+import { ShoppingCart } from "lucide-react";
+import { Heading } from "@/components/ui/heading";
+
+async function getData(): Promise<{
+  paymentIntents: Payment[];
+  hasMore: boolean;
+}> {
+  return await getPaymentIntents({});
+}
+
+export default async function OrdersPage() {
+  const data = await getData();
+  const lastPaymentIntentInInitialFetch = data.paymentIntents.at(-1) as Payment;
+
+  return (
+    <div>
+      <div className="mb-4">
+        <Heading size="h4">Abondoned carts</Heading>
+      </div>
+      {!data.paymentIntents.length ? (
+        <InfoCard
+          heading="You don't have any abandoned carts yet"
+          subheading="Check back later once shoppers have started checking out"
+          icon={<ShoppingCart size={36} className="text-gray-600" />}
+        />
+      ) : (
+        <div className="w-full">
+          <DataTable
+            columns={columns}
+            data={data.paymentIntents}
+            initialFetchHasNextPage={data.hasMore}
+            lastPaymentIntentInInitialFetchId={
+              lastPaymentIntentInInitialFetch.id
+            }
+            getPaymentIntents={getPaymentIntents}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

app/account/selling/(orders)/layout.tsx

@@ -0,0 +1,29 @@
+import { HeadingAndSubheading } from "@/components/admin/heading-and-subheading";
+import { Button } from "@/components/ui/button";
+import { singleLevelNestedRoutes } from "@/lib/routes";
+import Link from "next/link";
+import { PropsWithChildren } from "react";
+
+export default function OrdersLayout(props: PropsWithChildren) {
+  return (
+    <>
+      <HeadingAndSubheading
+        heading="Orders"
+        subheading="View and manage your orders"
+      />
+      <div className="flex items-center justify-start gap-4 -mt-4">
+        <Link href={singleLevelNestedRoutes.account.orders}>
+          <Button variant="link" className="p-0">
+            All Orders
+          </Button>
+        </Link>
+        <Link href={singleLevelNestedRoutes.account["abandoned-carts"]}>
+          <Button variant="link" className="p-0">
+            Abandoned Carts
+          </Button>
+        </Link>
+      </div>
+      {props.children}
+    </>
+  );
+}

app/account/selling/(orders)/order/[orderId]/page.tsx

@@ -0,0 +1,120 @@
+import { HeadingAndSubheading } from "@/components/admin/heading-and-subheading";
+import { OrderLineItems } from "@/components/order-line-items";
+import { Heading } from "@/components/ui/heading";
+import { StatusLabel } from "@/components/ui/status-label";
+import { db } from "@/db/db";
+import { addresses, orders } from "@/db/schema";
+import { currencyFormatter } from "@/lib/currency";
+import { CheckoutItem } from "@/lib/types";
+import {
+  convertDateToRelativeTime,
+  convertSecondsToDate,
+  formatOrderNumber,
+  removeOrderNumberFormatting,
+} from "@/lib/utils";
+import { getDetailsOfProductsOrdered } from "@/server-actions/orders";
+import { getStoreId } from "@/server-actions/store-details";
+import { and, eq } from "drizzle-orm";
+
+export default async function OrderDetailPage(context: {
+  params: { orderId: string };
+}) {
+  const storeId = await getStoreId();
+  if (!storeId || isNaN(Number(context.params.orderId))) {
+    throw new Error("Store ID not found");
+  }
+  const orderDetails = await db
+    .select({
+      order: orders,
+      address: addresses,
+    })
+    .from(orders)
+    .leftJoin(addresses, eq(orders.addressId, addresses.id))
+    .where(
+      and(
+        eq(
+          orders.prettyOrderId,
+          removeOrderNumberFormatting(Number(context.params.orderId))
+        ),
+        eq(orders.storeId, Number(storeId))
+      )
+    );
+
+  const record = orderDetails[0];
+  const checkoutItems = JSON.parse(
+    (record.order.items as string) ?? "[]"
+  ) as CheckoutItem[];
+  const products = await getDetailsOfProductsOrdered(checkoutItems);
+  const totalItems = checkoutItems.reduce((acc, curr) => acc + curr.qty, 0);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="bg-secondary border border-border p-6 rounded-md">
+        <HeadingAndSubheading
+          heading={`Order ${formatOrderNumber(
+            record.order?.prettyOrderId ?? 0
+          )}`}
+          subheading={`${
+            !record.order?.createdAt
+              ? ""
+              : convertDateToRelativeTime(
+                  convertSecondsToDate(Number(record.order?.createdAt))
+                )
+          }`}
+        />
+      </div>
+      <div className="md:grid grid-cols-12 flex flex-col gap-4">
+        <div className="bg-secondary border border-border rounded-md p-4 py-6 md:col-span-8 h-fit">
+          <Heading size="h4">
+            <span className="px-2">Items ({totalItems})</span>
+          </Heading>
+          <OrderLineItems products={products} checkoutItems={checkoutItems} />
+          <div className="mt-4 flex items-center justify-start gap-2 px-2">
+            <Heading size="h4">
+              Total paid:{" "}
+              {isNaN(Number(record.order.total))
+                ? ""
+                : currencyFormatter(Number(record.order.total))}
+            </Heading>
+          </div>
+        </div>
+        <div className="md:col-span-4 flex flex-col gap-4">
+          <div className="bg-secondary border border-border rounded-md p-4">
+            <Heading size="h4">Customer</Heading>
+            <div className="mt-2">
+              <p>{record.order.name}</p>
+              <p>{record.order.email}</p>
+            </div>
+          </div>
+          <div className="bg-secondary border border-border rounded-md p-4">
+            <Heading size="h4">Shipping Details</Heading>
+            <div className="mt-2">
+              <p>{record.address?.line1}</p>
+              <p>{record.address?.line2}</p>
+              <p>
+                {record.address?.city}, {record.address?.postal_code}
+              </p>
+              <p>
+                {record.address?.state}, {record.address?.country}
+              </p>
+            </div>
+          </div>
+          <div className="bg-secondary border border-border rounded-md p-4">
+            <Heading size="h4">Payment</Heading>
+            <div className="mt-2">
+              <StatusLabel
+                status={
+                  record.order?.stripePaymentIntentStatus === "succeeded"
+                    ? "success"
+                    : "error"
+                }
+              >
+                {record.order?.stripePaymentIntentStatus}
+              </StatusLabel>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/account/selling/(orders)/order/error.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { InfoCard } from "@/components/admin/info-card";
+import { Button } from "@/components/ui/button";
+import { singleLevelNestedRoutes } from "@/lib/routes";
+import { Box } from "lucide-react";
+import Link from "next/link";
+
+export default function Error() {
+  return (
+    <InfoCard
+      heading="Sorry, an error occured loading this order."
+      subheading="This order either does not exist or cannot be retrieved at this time."
+      icon={<Box size={32} />}
+      button={
+        <Link href={singleLevelNestedRoutes.account.orders}>
+          <Button>View all orders</Button>
+        </Link>
+      }
+    />
+  );
+}

app/account/selling/(orders)/orders/components/columns.tsx

@@ -0,0 +1,91 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { StatusLabel } from "@/components/ui/status-label";
+import { currencyFormatter } from "@/lib/currency";
+import { secondLevelNestedRoutes } from "@/lib/routes";
+import { CheckoutItem } from "@/lib/types";
+
+import { OrdersTable } from "@/lib/types";
+import { convertSecondsToDate, formatOrderNumber } from "@/lib/utils";
+import { ColumnDef } from "@tanstack/react-table";
+import { formatRelative } from "date-fns";
+import { ArrowUpDown } from "lucide-react";
+import Link from "next/link";
+
+export const columns: ColumnDef<OrdersTable>[] = [
+  {
+    accessorKey: "id",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Order Number
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
+    cell: ({ row }) => {
+      const id = row.getValue("id");
+      return (
+        <Link
+          href={`${secondLevelNestedRoutes.order.base}/${formatOrderNumber(
+            Number(id) as number
+          ).slice(1)}`}
+        >
+          <Button variant="link" className="m-0 h-fit py-0 font-semibold">
+            {formatOrderNumber(Number(id))}
+          </Button>
+        </Link>
+      );
+    },
+  },
+  {
+    accessorKey: "name",
+    header: "Customer",
+  },
+  {
+    accessorKey: "total",
+    header: "Total",
+    cell: ({ row }) => currencyFormatter(Number(row.getValue("total"))),
+  },
+  {
+    accessorKey: "items",
+    header: "Items",
+    cell: ({ row }) => {
+      const items = JSON.parse(row.getValue("items")) as CheckoutItem[];
+      const total = items.reduce((acc, item) => acc + Number(item.qty), 0);
+      return (
+        <p>
+          {total} {`${total > 1 ? "items" : "item"}`}
+        </p>
+      );
+    },
+  },
+  {
+    accessorKey: "stripePaymentIntentStatus",
+    header: "Payment Status",
+    cell: ({ row }) => {
+      const status = row.getValue("stripePaymentIntentStatus") as string;
+      return (
+        <StatusLabel status={status === "succeeded" ? "success" : "error"}>
+          {status}
+        </StatusLabel>
+      );
+    },
+  },
+  {
+    accessorKey: "createdAt",
+    header: "Date ordered",
+    cell: ({ row }) => {
+      const createdSeconds = parseFloat(row.getValue("createdAt"));
+      if (!createdSeconds) return;
+      const relativeDate = formatRelative(
+        convertSecondsToDate(createdSeconds),
+        new Date()
+      );
+      return relativeDate[0].toUpperCase() + relativeDate.slice(1);
+    },
+  },
+];

app/account/selling/(orders)/orders/components/data-table.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Settings2 } from "lucide-react";
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    getFilteredRowModel: getFilteredRowModel(),
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+    },
+  });
+
+  return (
+    <div>
+      <div className="flex items-center justify-start gap-2">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" className="ml-auto">
+              <Settings2 size={16} />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {table
+              .getAllColumns()
+              .filter((column) => column.getCanHide())
+              .map((column) => {
+                const headerValue = column.columnDef.header;
+                return (
+                  <DropdownMenuCheckboxItem
+                    key={column.id}
+                    className="capitalize"
+                    checked={column.getIsVisible()}
+                    onCheckedChange={(value) =>
+                      column.toggleVisibility(!!value)
+                    }
+                  >
+                    {typeof headerValue === "string"
+                      ? headerValue
+                      : column.id === "id"
+                      ? "Order Number"
+                      : column.id}
+                  </DropdownMenuCheckboxItem>
+                );
+              })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <div className="flex items-center py-4 w-full">
+          <Input
+            placeholder="Filter customers"
+            value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
+            onChange={(event) =>
+              table.getColumn("name")?.setFilterValue(event.target.value)
+            }
+            className="max-w-sm"
+          />
+        </div>
+      </div>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader className="bg-secondary">
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex items-center justify-end space-x-2 py-4">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          Previous
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          Next
+        </Button>
+      </div>
+    </div>
+  );
+}

app/account/selling/(orders)/orders/page.tsx

@@ -0,0 +1,48 @@
+import { OrdersTable } from "@/lib/types";
+import { columns } from "./components/columns";
+import { DataTable } from "./components/data-table";
+import { db } from "@/db/db";
+import { orders } from "@/db/schema";
+import { eq } from "drizzle-orm";
+import { getStoreId } from "@/server-actions/store-details";
+import { InfoCard } from "@/components/admin/info-card";
+import { Box } from "lucide-react";
+import { Heading } from "@/components/ui/heading";
+
+async function getData(): Promise<OrdersTable[]> {
+  const storeId = await getStoreId();
+  if (isNaN(Number(storeId))) return [];
+  const storeOrders = await db
+    .select({
+      id: orders.prettyOrderId,
+      name: orders.name,
+      items: orders.items,
+      total: orders.total,
+      stripePaymentIntentStatus: orders.stripePaymentIntentStatus,
+      createdAt: orders.createdAt,
+    })
+    .from(orders)
+    .where(eq(orders.storeId, Number(storeId)));
+  return (storeOrders as OrdersTable[]).sort(
+    (a, b) => b.createdAt - a.createdAt
+  );
+}
+
+export default async function OrdersPage() {
+  const data = await getData();
+
+  return (
+    <div>
+      <Heading size="h4">All orders</Heading>
+      {data.length > 0 ? (
+        <DataTable columns={columns} data={data} />
+      ) : (
+        <InfoCard
+          heading="No orders"
+          subheading="You don't have any orders yet."
+          icon={<Box size={30} />}
+        />
+      )}
+    </div>
+  );
+}

app/account/selling/layout.tsx

@@ -0,0 +1,18 @@
+import { CreateNewStore } from "@/components/admin/create-new-store";
+import { createStore } from "@/server-actions/store";
+import { currentUser } from "@clerk/nextjs";
+import { PropsWithChildren } from "react";
+
+export default async function SellerLayout(props: PropsWithChildren) {
+  const user = await currentUser();
+
+  return (
+    <>
+      {user?.privateMetadata?.storeId ? (
+        <div className="flex flex-col gap-4">{props.children}</div>
+      ) : (
+        <CreateNewStore createStore={createStore} />
+      )}
+    </>
+  );
+}

app/account/selling/payments/components/create-connected-account.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { toast } from "@/components/ui/use-toast";
+import { Loader2, Lock } from "lucide-react";
+import { useState } from "react";
+
+export const CreateConnectedAccount = (props: {
+  createAccountLink: () => Promise<string | undefined>;
+}) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  return (
+    <form>
+      <Button
+        disabled={isLoading}
+        size="sm"
+        className="flex gap-2"
+        onClick={() => {
+          setIsLoading(true);
+          props
+            .createAccountLink()
+            .then((url) => {
+              if (url === undefined) {
+                throw new Error("No url returned from Stripe");
+              }
+              window.location.href = url;
+              setIsLoading(false);
+            })
+            .catch((err) => {
+              setIsLoading(false);
+              console.log("Error occured creating Stripe connect account", err);
+              toast({
+                title: "Sorry, an error occurred",
+                description:
+                  "An error occured creating your Stripe connect account. Please try again later.",
+              });
+            });
+        }}
+      >
+        {isLoading ? <Loader2 className="animate-spin" /> : <Lock size={16} />}
+        <span>Connect with Stripe</span>
+      </Button>
+    </form>
+  );
+};

app/account/selling/payments/loading.tsx

@@ -0,0 +1,11 @@
+import { LoadingSkeleton } from "@/components/ui/loading-skeleton";
+
+export default function Loading() {
+  return (
+    <div className="flex flex-col gap-2">
+      <LoadingSkeleton.HeadingAndSubheading />
+      <LoadingSkeleton className="w-full h-12 mt-2" />
+      <LoadingSkeleton className="w-full h-36" />
+    </div>
+  );
+}