@01.software/init 0.9.2 → 0.10.0

package/dist/create-app-templates/ecommerce/app/login/page.tsx

@@ -0,0 +1,11 @@
+import { PageShell } from "@/components/layout/page-shell";
+import { AuthForm } from "@/components/auth/auth-form";
+
+export default function LoginPage() {
+  return (
+    <PageShell>
+      <h1>Login</h1>
+      <AuthForm mode="login" />
+    </PageShell>
+  );
+}

package/dist/create-app-templates/ecommerce/app/page.tsx

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

package/dist/create-app-templates/ecommerce/app/products/[slug]/page.tsx

@@ -0,0 +1,46 @@
+import { notFound } from "next/navigation";
+import { PageShell } from "@/components/layout/page-shell";
+import { AddToCart } from "@/components/product/add-to-cart";
+import { ProductGallery } from "@/components/product/product-gallery";
+import { summarizeProductAvailability } from "@/lib/commerce/product-summary";
+import { getCommerceProvider } from "@/lib/commerce/provider.server";
+
+export default async function ProductDetailPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  const detail = await getCommerceProvider().getProductBySlug(slug);
+  if (!detail) notFound();
+
+  const summary = summarizeProductAvailability(detail);
+
+  return (
+    <PageShell>
+      <article>
+        <ProductGallery detail={detail} />
+        <header>
+          <p>Product detail</p>
+          <h1>{detail.product.title}</h1>
+          <p>{detail.product.description}</p>
+          <dl>
+            <Metric label="Price" value={summary.priceLabel} />
+            <Metric label="Variants" value={String(detail.variants.length)} />
+            <Metric label="Price check" value="Before payment" />
+          </dl>
+        </header>
+        <AddToCart detail={detail} />
+      </article>
+    </PageShell>
+  );
+}
+
+function Metric({ label, value }: { label: string; value: string }) {
+  return (
+    <>
+      <dt>{label}</dt>
+      <dd>{value}</dd>
+    </>
+  );
+}

package/dist/create-app-templates/ecommerce/app/products/page.tsx

@@ -0,0 +1,45 @@
+import { paymentProviderLabel } from "@/app-config";
+import { PageShell } from "@/components/layout/page-shell";
+import { ProductCard } from "@/components/product/product-card";
+import { getCommerceProvider } from "@/lib/commerce/provider.server";
+
+export default async function ProductsPage() {
+  const commerce = getCommerceProvider();
+  const result = await commerce.listProducts({ limit: 24 });
+
+  return (
+    <PageShell>
+      <section>
+        <p>Starter catalog</p>
+        <h1>Storefront flow for payment adapter checks.</h1>
+        <p>
+          Browse the catalog, review a cart, and complete a payment handoff
+          against a compact checkout flow built for adapter validation.
+        </p>
+        <dl>
+          <dt>Commerce</dt>
+          <dd>Mock / SDK</dd>
+          <dt>Payment</dt>
+          <dd>{paymentProviderLabel()} adapter</dd>
+          <dt>Price check</dt>
+          <dd>Before payment</dd>
+        </dl>
+      </section>
+
+      {result.products.length > 0 ? (
+        <ul aria-label="Products">
+          {result.products.map((detail, index) => (
+            <li key={detail.product.id}>
+              <ProductCard detail={detail} priority={index < 3} />
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <section>
+          <h2>No products published</h2>
+          <p>Add products or switch the commerce provider.</p>
+        </section>
+      )}
+    </PageShell>
+  );
+}

package/dist/create-app-templates/ecommerce/app/register/page.tsx

@@ -0,0 +1,11 @@
+import { PageShell } from "@/components/layout/page-shell";
+import { AuthForm } from "@/components/auth/auth-form";
+
+export default function RegisterPage() {
+  return (
+    <PageShell>
+      <h1>Create account</h1>
+      <AuthForm mode="register" />
+    </PageShell>
+  );
+}

package/dist/create-app-templates/ecommerce/app/webhook/payment/route.ts

@@ -0,0 +1,20 @@
+import { getCommerceProvider } from "@/lib/commerce/provider.server";
+import { getPaymentProvider } from "@/lib/payment/provider.server";
+import { syncOrderPayment } from "@/lib/payment/sync-order-payment.ts";
+
+export async function POST(request: Request) {
+  try {
+    const payment = getPaymentProvider();
+    const event = await payment.verifyWebhook(request);
+    const result = await syncOrderPayment({
+      paymentId: event.paymentId,
+      providerEventId: event.eventId,
+      commerceProvider: getCommerceProvider(),
+      paymentProvider: payment,
+    });
+
+    return Response.json(result);
+  } catch {
+    return Response.json({ code: "invalid_webhook" }, { status: 400 });
+  }
+}

package/dist/create-app-templates/ecommerce/app-config.ts

@@ -0,0 +1,54 @@
+/**
+ * Generated app configuration.
+ *
+ * `create-01-software-app` regenerates this file from `templates/registry.json`
+ * when it scaffolds a project, setting `brand`, `title`, `cartKey`, and the
+ * selected `paymentProvider`. Generic source files read their per-app values
+ * from here so they stay byte-identical across every scaffolded app — which
+ * structurally prevents the per-fork drift that previously let a fix land on
+ * only one payment template.
+ *
+ * The committed defaults below keep this in-repo source building and testing
+ * with every payment adapter present.
+ */
+export type PaymentProviderId = "portone" | "tosspayments";
+
+export interface AppConfig {
+  /** Brand name shown in the storefront chrome. */
+  brand: string;
+  /** Document title for the app. */
+  title: string;
+  /**
+   * Cookie name holding the HttpOnly guest-cart ownership token (`cartToken`).
+   * The cart itself is server-authoritative (`commerce.cart.*`); only this
+   * capability handle lives in the browser, and never in client-readable JS.
+   */
+  cartKey: string;
+  /**
+   * Cookie name holding the HttpOnly customer session JWT. The token is the
+   * customer credential for `client.customer.auth.*`; it is set/cleared only by
+   * the `app/api/auth/*` route handlers and is never readable by client JS.
+   */
+  customerKey: string;
+  /** Payment provider this app was scaffolded for. */
+  paymentProvider: PaymentProviderId;
+}
+
+export const appConfig: AppConfig = {
+  brand: "01 Commerce",
+  title: "01 Commerce Storefront",
+  cartKey: "ecommerce-cart",
+  customerKey: "ecommerce-customer",
+  paymentProvider: "portone",
+};
+
+export const PAYMENT_PROVIDER_LABELS: Record<PaymentProviderId, string> = {
+  portone: "PortOne",
+  tosspayments: "TossPayments",
+};
+
+export function paymentProviderLabel(
+  provider: PaymentProviderId = appConfig.paymentProvider,
+): string {
+  return PAYMENT_PROVIDER_LABELS[provider];
+}

package/dist/create-app-templates/ecommerce/components/auth/auth-form.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { useState } from "react";
+
+type Mode = "login" | "register";
+
+/**
+ * Minimal login / register form. Posts JSON to the CSRF-guarded auth routes
+ * (same-origin + `application/json`), then refreshes so the header re-renders
+ * with the new session.
+ */
+export function AuthForm({ mode }: { mode: Mode }) {
+  const router = useRouter();
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError(null);
+    setPending(true);
+    const form = new FormData(event.currentTarget);
+    const body: Record<string, string> = {
+      email: String(form.get("email") ?? ""),
+      password: String(form.get("password") ?? ""),
+    };
+    if (mode === "register") {
+      body.name = String(form.get("name") ?? "");
+      const phone = String(form.get("phone") ?? "").trim();
+      if (phone) body.phone = phone;
+    }
+
+    try {
+      const res = await fetch(`/api/auth/${mode}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+      if (!res.ok) {
+        const data = (await res.json().catch(() => null)) as {
+          message?: string;
+        } | null;
+        setError(data?.message ?? "Something went wrong");
+        return;
+      }
+      const data = (await res.json().catch(() => null)) as {
+        requiresLogin?: boolean;
+      } | null;
+      if (mode === "register" && data?.requiresLogin) {
+        router.push("/login");
+        return;
+      }
+      router.push("/products");
+      router.refresh();
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <form onSubmit={onSubmit}>
+      {mode === "register" && (
+        <label>
+          Name
+          <input name="name" type="text" autoComplete="name" required />
+        </label>
+      )}
+      <label>
+        Email
+        <input name="email" type="email" autoComplete="email" required />
+      </label>
+      <label>
+        Password
+        <input
+          name="password"
+          type="password"
+          autoComplete={mode === "login" ? "current-password" : "new-password"}
+          required
+        />
+      </label>
+      {mode === "register" && (
+        <label>
+          Phone (optional)
+          <input name="phone" type="tel" autoComplete="tel" />
+        </label>
+      )}
+      {error && <p role="alert">{error}</p>}
+      <button type="submit" disabled={pending}>
+        {pending
+          ? "Please wait…"
+          : mode === "login"
+            ? "Log in"
+            : "Create account"}
+      </button>
+      <p>
+        {mode === "login" ? (
+          <>
+            No account? <Link href="/register">Register</Link>
+          </>
+        ) : (
+          <>
+            Already have an account? <Link href="/login">Log in</Link>
+          </>
+        )}
+      </p>
+    </form>
+  );
+}

package/dist/create-app-templates/ecommerce/components/cart/cart-content.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { useCart } from "@/lib/cart/use-cart";
+import { formatMoney } from "@/lib/format";
+
+export function CartContent() {
+  const { cart, loading, updateItem, removeItem } = useCart();
+
+  if (loading && !cart) {
+    return (
+      <section>
+        <h1>Loading your cart…</h1>
+      </section>
+    );
+  }
+
+  const items = cart?.items ?? [];
+
+  if (items.length === 0) {
+    return (
+      <section>
+        <h1>Your cart is empty</h1>
+        <p>Add products before starting a payment check.</p>
+        <Link href="/products">Browse products</Link>
+      </section>
+    );
+  }
+
+  return (
+    <div>
+      <section aria-labelledby="cart-title">
+        <h1 id="cart-title">Items queued for checkout</h1>
+        <ul>
+          {items.map((item) => (
+            <li key={item.cartItemId}>
+              <article>
+                {item.image ? (
+                  <Image
+                    src={item.image.url}
+                    alt={item.image.alt ?? item.productTitle}
+                    width={112}
+                    height={112}
+                  />
+                ) : null}
+                <h2>{item.productTitle}</h2>
+                <dl>
+                  <dt>Variant</dt>
+                  <dd>{item.variantTitle ?? item.variantId}</dd>
+                  <dt>Line total</dt>
+                  <dd>{formatMoney(item.lineAmount)}</dd>
+                </dl>
+                <fieldset>
+                  <legend>Quantity</legend>
+                  <button
+                    type="button"
+                    aria-label={`Decrease quantity for ${item.productTitle}`}
+                    disabled={item.quantity <= 1}
+                    onClick={() =>
+                      void updateItem({
+                        cartItemId: item.cartItemId,
+                        quantity: item.quantity - 1,
+                      })
+                    }
+                  >
+                    -
+                  </button>
+                  <output aria-label={`Quantity for ${item.productTitle}`}>
+                    {item.quantity}
+                  </output>
+                  <button
+                    type="button"
+                    aria-label={`Increase quantity for ${item.productTitle}`}
+                    disabled={item.quantity >= 99}
+                    onClick={() =>
+                      void updateItem({
+                        cartItemId: item.cartItemId,
+                        quantity: item.quantity + 1,
+                      })
+                    }
+                  >
+                    +
+                  </button>
+                </fieldset>
+                <button
+                  type="button"
+                  onClick={() => void removeItem(item.cartItemId)}
+                >
+                  Remove {item.productTitle}
+                </button>
+              </article>
+            </li>
+          ))}
+        </ul>
+      </section>
+
+      <aside>
+        <h2>Checkout summary</h2>
+        <dl>
+          <dt>Items</dt>
+          <dd>{items.reduce((sum, item) => sum + item.quantity, 0)}</dd>
+          <dt>Subtotal</dt>
+          <dd>
+            <output>{formatMoney(cart?.subtotalAmount ?? 0)}</output>
+          </dd>
+          <dt>Shipping</dt>
+          <dd>{formatMoney(cart?.shippingAmount ?? 0)}</dd>
+          <dt>Total</dt>
+          <dd>
+            <output>{formatMoney(cart?.totalAmount ?? 0)}</output>
+          </dd>
+        </dl>
+        <p>Totals are computed by the server cart and confirmed again at checkout.</p>
+        <Link href="/checkout">Checkout</Link>
+      </aside>
+    </div>
+  );
+}