create-nymbal-app 0.0.0 → 0.2.0

package/scaffold/templates/nextjs/app/account/orders/[orderNumber]/page.tsx

@@ -0,0 +1,192 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+import { useNymbalClient } from '@nymbalhq/react'
+import type { Order } from '@nymbalhq/types'
+import { formatPrice, formatDate } from '@/lib/format'
+import styles from '@/styles/pages/account.module.css'
+import confirmStyles from '@/styles/pages/confirmation.module.css'
+
+export default function OrderDetailPage() {
+  const params = useParams<{ orderNumber: string }>()
+  const orderNumber = decodeURIComponent(params.orderNumber ?? '')
+  const client = useNymbalClient()
+  const [order, setOrder] = useState<Order | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    if (!orderNumber) return
+    let active = true
+    client.customer.orders
+      .get(orderNumber)
+      .then((found) => {
+        if (active) setOrder(found)
+      })
+      .catch(() => {
+        if (active) setOrder(null)
+      })
+      .finally(() => {
+        if (active) setLoading(false)
+      })
+    return () => {
+      active = false
+    }
+  }, [client, orderNumber])
+
+  if (loading) {
+    return (
+      <div>
+        <h2 className={styles.pageTitle}>Order Details</h2>
+        <div className="loading-center">
+          <div className="spinner spinner-lg" role="status">
+            <span className="visually-hidden">Loading order...</span>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (!order) {
+    return (
+      <div>
+        <h2 className={styles.pageTitle}>Order Not Found</h2>
+        <p className="text-muted">This order could not be found.</p>
+        <Link
+          href="/account/orders"
+          className="btn btn-outline"
+          style={{ marginTop: 'var(--nymbal-spacing-md)', display: 'inline-flex' }}
+        >
+          Back to Orders
+        </Link>
+      </div>
+    )
+  }
+
+  return (
+    <div data-testid="order-detail">
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          flexWrap: 'wrap',
+          gap: 'var(--nymbal-spacing-sm)',
+          marginBottom: 'var(--nymbal-spacing-lg)',
+        }}
+      >
+        <h2 className={styles.pageTitle} style={{ marginBottom: 0 }}>
+          Order #{order.orderNumber}
+        </h2>
+        <span
+          className={`${styles.orderStatus} ${styles.statusPending}`}
+          style={{ textTransform: 'capitalize' }}
+        >
+          {order.status}
+        </span>
+      </div>
+
+      {order.createdAt && (
+        <p className="text-sm text-muted mb-md">Placed on {formatDate(order.createdAt)}</p>
+      )}
+
+      <div className={styles.formCard} style={{ marginBottom: 'var(--nymbal-spacing-lg)' }}>
+        <h3 className={styles.formCardTitle}>Items</h3>
+        <div className={confirmStyles.lineItems}>
+          {order.lineItems.map((item) => (
+            <div key={item.variantId} className={confirmStyles.lineItem}>
+              {item.imageUrl && (
+                <div className={confirmStyles.lineItemImage}>
+                  <img src={item.imageUrl} alt={item.productName} />
+                </div>
+              )}
+              <div className={confirmStyles.lineItemInfo}>
+                <p className={confirmStyles.lineItemName}>{item.productName}</p>
+                {item.variantName && (
+                  <p className={confirmStyles.lineItemVariant}>{item.variantName}</p>
+                )}
+                <p className={confirmStyles.lineItemQty}>Qty: {item.qty}</p>
+              </div>
+              <span className={confirmStyles.lineItemPrice}>
+                {formatPrice(item.lineTotalMinor, order.currency)}
+              </span>
+            </div>
+          ))}
+        </div>
+
+        <div className={confirmStyles.totals}>
+          <div className={confirmStyles.totalRow}>
+            <span className={confirmStyles.totalLabel}>Subtotal</span>
+            <span>{formatPrice(order.subtotalMinor, order.currency)}</span>
+          </div>
+          <div className={confirmStyles.totalRow}>
+            <span className={confirmStyles.totalLabel}>Shipping</span>
+            <span>
+              {order.shippingTotalMinor === 0
+                ? 'Free'
+                : formatPrice(order.shippingTotalMinor, order.currency)}
+            </span>
+          </div>
+          <div className={confirmStyles.totalRow}>
+            <span className={confirmStyles.totalLabel}>Tax</span>
+            <span>{formatPrice(order.taxTotalMinor, order.currency)}</span>
+          </div>
+          <div className={`${confirmStyles.totalRow} ${confirmStyles.totalGrand}`}>
+            <span>Total</span>
+            <span>{formatPrice(order.totalMinor, order.currency)}</span>
+          </div>
+        </div>
+      </div>
+
+      <div className={styles.formCard}>
+        <h3 className={styles.formCardTitle}>Delivery Details</h3>
+        <div
+          className={confirmStyles.addressGrid}
+          style={{ marginTop: 'var(--nymbal-spacing-md)' }}
+        >
+          {order.shippingAddress && (
+            <div className={confirmStyles.addressCard}>
+              <h4 className={confirmStyles.addressTitle}>Shipping Address</h4>
+              <p className={confirmStyles.addressText}>
+                {order.shippingAddress.firstName} {order.shippingAddress.lastName}
+                <br />
+                {order.shippingAddress.addressLine1}
+                {order.shippingAddress.addressLine2 && <>, {order.shippingAddress.addressLine2}</>}
+                <br />
+                {order.shippingAddress.city}, {order.shippingAddress.region}{' '}
+                {order.shippingAddress.postalCode}
+                <br />
+                {order.shippingAddress.country}
+              </p>
+            </div>
+          )}
+          {order.billingAddress && (
+            <div className={confirmStyles.addressCard}>
+              <h4 className={confirmStyles.addressTitle}>Billing Address</h4>
+              <p className={confirmStyles.addressText}>
+                {order.billingAddress.firstName} {order.billingAddress.lastName}
+                <br />
+                {order.billingAddress.addressLine1}
+                {order.billingAddress.addressLine2 && <>, {order.billingAddress.addressLine2}</>}
+                <br />
+                {order.billingAddress.city}, {order.billingAddress.region}{' '}
+                {order.billingAddress.postalCode}
+                <br />
+                {order.billingAddress.country}
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <Link
+        href="/account/orders"
+        className="btn btn-outline"
+        style={{ marginTop: 'var(--nymbal-spacing-lg)', display: 'inline-flex' }}
+      >
+        Back to Orders
+      </Link>
+    </div>
+  )
+}

package/scaffold/templates/nextjs/app/account/orders/page.tsx

@@ -0,0 +1,123 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import Link from 'next/link'
+import { useNymbalClient } from '@nymbalhq/react'
+import type { Order } from '@nymbalhq/types'
+import { formatPrice, formatDate } from '@/lib/format'
+import styles from '@/styles/pages/account.module.css'
+
+function getStatusClass(status: string): string {
+  const map: Record<string, string> = {
+    pending: styles.statusPending,
+    confirmed: styles.statusConfirmed,
+    processing: styles.statusProcessing,
+    shipped: styles.statusShipped,
+    delivered: styles.statusDelivered,
+    cancelled: styles.statusCancelled,
+    refunded: styles.statusRefunded,
+  }
+  return map[status.toLowerCase()] ?? styles.statusPending
+}
+
+export default function OrdersPage() {
+  const client = useNymbalClient()
+  const [orders, setOrders] = useState<Order[]>([])
+  const [loading, setLoading] = useState(true)
+  const [failed, setFailed] = useState(false)
+
+  useEffect(() => {
+    let active = true
+    client.customer.orders
+      .list()
+      .then((page) => {
+        if (active) setOrders(page.items)
+      })
+      .catch(() => {
+        if (active) setFailed(true)
+      })
+      .finally(() => {
+        if (active) setLoading(false)
+      })
+    return () => {
+      active = false
+    }
+  }, [client])
+
+  if (loading) {
+    return (
+      <div>
+        <h2 className={styles.pageTitle}>Order History</h2>
+        <div className="loading-center">
+          <div className="spinner spinner-lg" role="status">
+            <span className="visually-hidden">Loading orders...</span>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (failed) {
+    return (
+      <div>
+        <h2 className={styles.pageTitle}>Order History</h2>
+        <p className="text-muted">Unable to load orders. Please try again later.</p>
+      </div>
+    )
+  }
+
+  if (orders.length === 0) {
+    return (
+      <div>
+        <h2 className={styles.pageTitle}>Order History</h2>
+        <div className={styles.emptyOrders}>
+          <h3 className={styles.emptyOrdersTitle}>No orders yet</h3>
+          <p className={styles.emptyOrdersText}>When you place an order, it will appear here.</p>
+          <Link
+            href="/products"
+            className="btn btn-primary"
+            style={{ marginTop: 'var(--nymbal-spacing-md)', display: 'inline-flex' }}
+          >
+            Start Shopping
+          </Link>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <h2 className={styles.pageTitle}>Order History</h2>
+      <div className={styles.orderList} data-testid="orders-list">
+        {orders.map((order) => (
+          <div key={order.id} className={styles.orderCard}>
+            <div className={styles.orderHeader}>
+              <Link
+                href={`/account/orders/${encodeURIComponent(order.orderNumber)}`}
+                className={styles.orderNumber}
+                data-testid={`order-${order.orderNumber}`}
+              >
+                #{order.orderNumber}
+              </Link>
+              <span className={`${styles.orderStatus} ${getStatusClass(order.status)}`}>
+                {order.status}
+              </span>
+            </div>
+            <div className={styles.orderMeta}>
+              {order.createdAt && (
+                <span>
+                  <span className={styles.orderMetaLabel}>Date: </span>
+                  {formatDate(order.createdAt)}
+                </span>
+              )}
+              <span>
+                <span className={styles.orderMetaLabel}>Total: </span>
+                {formatPrice(order.totalMinor, order.currency)}
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/scaffold/templates/nextjs/app/account/page.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import Link from 'next/link'
+import { useAuth } from '@nymbalhq/react'
+import styles from '@/styles/pages/account.module.css'
+
+export default function AccountDashboard() {
+  const { customer } = useAuth()
+
+  const greeting = customer?.firstName ? `Welcome back, ${customer.firstName}` : 'Welcome back'
+
+  return (
+    <div data-testid="account-dashboard">
+      <h2 className={styles.pageTitle}>{greeting}</h2>
+      {customer?.email && <p className="text-sm text-muted mb-md">{customer.email}</p>}
+
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(14rem, 1fr))',
+          gap: 'var(--nymbal-spacing-md)',
+        }}
+      >
+        <Link
+          href="/account/orders"
+          className={styles.formCard}
+          style={{ textDecoration: 'none', color: 'inherit' }}
+        >
+          <h3 className={styles.formCardTitle}>Orders</h3>
+          <p className="text-sm text-muted">View your order history and track shipments.</p>
+        </Link>
+        <Link
+          href="/account/addresses"
+          className={styles.formCard}
+          style={{ textDecoration: 'none', color: 'inherit' }}
+        >
+          <h3 className={styles.formCardTitle}>Addresses</h3>
+          <p className="text-sm text-muted">Manage your shipping and billing addresses.</p>
+        </Link>
+        <Link
+          href="/account/profile"
+          className={styles.formCard}
+          style={{ textDecoration: 'none', color: 'inherit' }}
+        >
+          <h3 className={styles.formCardTitle}>Profile</h3>
+          <p className="text-sm text-muted">Update your personal information.</p>
+        </Link>
+        <Link
+          href="/products"
+          className={styles.formCard}
+          style={{ textDecoration: 'none', color: 'inherit' }}
+        >
+          <h3 className={styles.formCardTitle}>Shop</h3>
+          <p className="text-sm text-muted">Browse our latest products and collections.</p>
+        </Link>
+      </div>
+    </div>
+  )
+}

package/scaffold/templates/nextjs/app/account/profile/page.tsx

@@ -0,0 +1,10 @@
+import type { Metadata } from 'next'
+import { ProfileForm } from '@/components/client/ProfileForm'
+
+export const metadata: Metadata = {
+  title: 'Profile',
+}
+
+export default function ProfilePage() {
+  return <ProfileForm />
+}

package/scaffold/templates/nextjs/app/account/register/page.tsx

@@ -0,0 +1,10 @@
+import type { Metadata } from 'next'
+import { RegisterForm } from '@/components/client/RegisterForm'
+
+export const metadata: Metadata = {
+  title: 'Create Account',
+}
+
+export default function RegisterPage() {
+  return <RegisterForm />
+}

package/scaffold/templates/nextjs/app/cart/page.tsx

@@ -0,0 +1,10 @@
+import type { Metadata } from 'next'
+import { CartPage } from '@/components/client/CartPage'
+
+export const metadata: Metadata = {
+  title: 'Shopping Cart',
+}
+
+export default function CartRoute() {
+  return <CartPage />
+}

package/scaffold/templates/nextjs/app/category/[slug]/page.tsx

@@ -0,0 +1,58 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import { fetchProducts, fetchCategories, sortFromSearchParams } from '@/lib/api'
+import { Breadcrumb } from '@/components/server/Breadcrumb'
+import { ProductGrid } from '@/components/client/ProductGrid'
+import styles from '@/styles/pages/plp.module.css'
+
+interface CategoryPageProps {
+  params: Promise<{ slug: string }>
+  searchParams: Promise<{ sort?: string | string[] }>
+}
+
+export async function generateMetadata({
+  params,
+}: CategoryPageProps): Promise<Metadata> {
+  const { slug } = await params
+  const categories = await fetchCategories()
+  const category = categories.find((c) => c.slug === slug)
+
+  return {
+    title: category?.name ?? slug,
+    description: category?.description ?? `Browse products in ${slug}.`,
+  }
+}
+
+export default async function CategoryPage({ params, searchParams }: CategoryPageProps) {
+  const { slug } = await params
+  const sort = sortFromSearchParams(await searchParams)
+  const [{ items, nextCursor }, categories] = await Promise.all([
+    fetchProducts({ limit: 24, category: slug, sort }),
+    fetchCategories(),
+  ])
+
+  const category = categories.find((c) => c.slug === slug)
+  if (!category) notFound()
+
+  return (
+    <div className={`container ${styles.page}`}>
+      <Breadcrumb
+        items={[
+          { label: 'Home', href: '/' },
+          { label: category.name },
+        ]}
+      />
+      <h1 className={styles.pageTitle}>{category.name}</h1>
+      {category.description && (
+        <p className="text-muted mb-lg">{category.description}</p>
+      )}
+      <ProductGrid
+        initialProducts={items}
+        initialCursor={nextCursor}
+        initialSort={sort}
+        categorySlug={slug}
+        categories={categories}
+      />
+    </div>
+  )
+}

package/scaffold/templates/nextjs/app/checkout/page.tsx

@@ -0,0 +1,10 @@
+import type { Metadata } from 'next'
+import { CheckoutForm } from '@/components/client/CheckoutForm'
+
+export const metadata: Metadata = {
+  title: 'Checkout',
+}
+
+export default function CheckoutRoute() {
+  return <CheckoutForm />
+}

package/scaffold/templates/nextjs/app/error.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import Link from 'next/link'
+import styles from '@/styles/pages/error.module.css'
+
+interface ErrorProps {
+  error: Error & { digest?: string }
+  reset: () => void
+}
+
+export default function ErrorPage({ error: _error, reset }: ErrorProps) {
+  return (
+    <div className={styles.page}>
+      <div className={styles.wrapper}>
+        <div className={styles.icon}>
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <line x1="12" y1="8" x2="12" y2="12" />
+            <line x1="12" y1="16" x2="12.01" y2="16" />
+          </svg>
+        </div>
+        <h1 className={styles.title}>Something went wrong</h1>
+        <p className={styles.message}>
+          An unexpected error occurred. Please try again or return to the home page.
+        </p>
+        <div className={styles.actions}>
+          <Link href="/" className={styles.homeLink}>
+            Go Home
+          </Link>
+          <button
+            type="button"
+            className={styles.retryButton}
+            onClick={reset}
+          >
+            Try Again
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}