create-nymbal-app 0.0.0 → 0.2.0

package/scaffold/templates/nextjs/components/client/NewsletterSignup.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import { useState, useCallback, type FormEvent } from 'react'
+import styles from '@/styles/pages/home.module.css'
+
+export function NewsletterSignup() {
+  const [email, setEmail] = useState('')
+  const [submitted, setSubmitted] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleSubmit = useCallback(
+    async (e: FormEvent) => {
+      e.preventDefault()
+      setError(null)
+
+      try {
+        const apiUrl = process.env.NEXT_PUBLIC_NYMBAL_API_URL ?? 'http://localhost:3001'
+        const res = await fetch(`${apiUrl}/api/newsletter`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ email }),
+        })
+
+        if (!res.ok) throw new Error('Subscription failed.')
+
+        setSubmitted(true)
+        setEmail('')
+      } catch {
+        // Gracefully handle — still show success for UX
+        setSubmitted(true)
+        setEmail('')
+      }
+    },
+    [email],
+  )
+
+  return (
+    <section className={`container ${styles.newsletter}`}>
+      <div className={styles.newsletterInner}>
+        <h2 className={styles.newsletterTitle}>Stay in the loop</h2>
+        <p className={styles.newsletterText}>
+          Subscribe to our newsletter for new arrivals, exclusive offers, and style inspiration.
+        </p>
+
+        {submitted ? (
+          <p style={{ fontSize: 'var(--nymbal-font-size-sm)', color: 'var(--nymbal-color-success)', fontWeight: 'var(--nymbal-font-weight-medium)' }}>
+            Thanks for subscribing! Check your inbox for a confirmation.
+          </p>
+        ) : (
+          <form onSubmit={handleSubmit} className={styles.newsletterForm}>
+            <input
+              type="email"
+              className={styles.newsletterInput}
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              placeholder="Enter your email"
+              aria-label="Email address"
+            />
+            <button type="submit" className={styles.newsletterButton}>
+              Subscribe
+            </button>
+          </form>
+        )}
+
+        {error && (
+          <p className="form-error" style={{ marginTop: 'var(--nymbal-spacing-sm)' }}>
+            {error}
+          </p>
+        )}
+      </div>
+    </section>
+  )
+}

package/scaffold/templates/nextjs/components/client/NymbalSetup.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import { useEffect, useRef, type ReactNode } from 'react'
+import { NymbalProvider } from '@nymbalhq/react'
+import { registerClient, registerComponents } from '@nymbalhq/web-components'
+import '@nymbalhq/web-components/tokens.css'
+import { getNymbalClient, restoreSession } from '@/lib/client'
+
+export function NymbalSetup({ children }: { children: ReactNode }) {
+  const client = getNymbalClient()
+  const initialized = useRef(false)
+
+  useEffect(() => {
+    if (!initialized.current) {
+      registerClient(client)
+      registerComponents()
+      client.cart.load()
+      void restoreSession()
+      initialized.current = true
+    }
+  }, [client])
+
+  return <NymbalProvider client={client}>{children}</NymbalProvider>
+}

package/scaffold/templates/nextjs/components/client/OrderStatusRefresh.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+import type { OrderStatus } from '@nymbalhq/types'
+import { getNymbalClient } from '@/lib/client'
+
+// A pending order's page asks the API again for a while: once the payment lands (a Stripe webhook), the page is
+// rendered afresh with the order's new state.
+const POLL_EVERY_MS = 1_000
+const POLL_FOR_MS = 10_000
+
+export function OrderStatusRefresh({
+  orderNumber,
+  status,
+}: {
+  orderNumber: string
+  status: OrderStatus
+}) {
+  const router = useRouter()
+
+  useEffect(() => {
+    if (status !== 'pending') return
+    const until = Date.now() + POLL_FOR_MS
+    let timer: ReturnType<typeof setTimeout> | undefined
+    let stopped = false
+    const poll = async () => {
+      try {
+        const order = await getNymbalClient().customer.orders.get(orderNumber)
+        if (stopped) return
+        if (order.status !== status) {
+          router.refresh()
+          return
+        }
+      } catch {
+        // A failed read is asked again on the next tick, within the window.
+      }
+      if (!stopped && Date.now() < until) timer = setTimeout(poll, POLL_EVERY_MS)
+    }
+    timer = setTimeout(poll, POLL_EVERY_MS)
+    return () => {
+      stopped = true
+      clearTimeout(timer)
+    }
+  }, [orderNumber, status, router])
+
+  return null
+}

package/scaffold/templates/nextjs/components/client/ProductGrid.tsx

@@ -0,0 +1,148 @@
+'use client'
+
+import { useEffect, useState, useCallback } from 'react'
+import type { DenormalisedProduct } from '@nymbalhq/sdk'
+import type { Category, Facet, ProductSortKey } from '@nymbalhq/types'
+import { useProductList } from '@nymbalhq/react'
+import { ProductFilter } from '@nymbalhq/react'
+import { ProductCard } from '@/components/server/ProductCard'
+import { SortDropdown } from './SortDropdown'
+import styles from '@/styles/pages/plp.module.css'
+
+interface ProductGridProps {
+  initialProducts: DenormalisedProduct[]
+  initialCursor: string | null
+  initialSort: ProductSortKey
+  categorySlug?: string
+  categories: Category[]
+}
+
+export function ProductGrid({
+  initialProducts,
+  initialCursor,
+  initialSort,
+  categorySlug,
+  categories,
+}: ProductGridProps) {
+  const { products, facets, pagination, loading, sort, load, loadMore, setSort } = useProductList()
+  const [initialized, setInitialized] = useState(false)
+  const [showMobileFilters, setShowMobileFilters] = useState(false)
+  // Preserve the widest facet list seen so filter options never disappear during a
+  // filtered query (the API always returns full facets, but this guards against regressions).
+  const [stableFacets, setStableFacets] = useState<Facet[]>(
+    categories.length > 0
+      ? [
+          {
+            field: 'category',
+            label: 'Category',
+            values: categories.map((c) => ({ value: c.slug, label: c.name })),
+          },
+        ]
+      : [],
+  )
+
+  useEffect(() => {
+    load({ limit: 24, category: categorySlug, sort: initialSort })
+    setInitialized(true)
+  }, [categorySlug, initialSort, load])
+
+  // The URL carries the sort, so a reload or a shared link renders the same order server-side.
+  const handleSort = useCallback(
+    (key: ProductSortKey) => {
+      const url = new URL(window.location.href)
+      url.searchParams.set('sort', key)
+      window.history.replaceState(window.history.state, '', url)
+      void setSort(key)
+    },
+    [setSort],
+  )
+
+  // Keep stableFacets updated whenever the store returns a wider facet list.
+  useEffect(() => {
+    if (facets.length > 0) {
+      const incomingValues = facets.reduce((acc, f) => acc + f.values.length, 0)
+      const stableValues = stableFacets.reduce((acc, f) => acc + f.values.length, 0)
+      if (incomingValues >= stableValues) {
+        setStableFacets(facets)
+      }
+    }
+  }, [facets, stableFacets])
+
+  const displayProducts = initialized && products.length > 0 ? products : initialProducts
+  const hasMore = initialized ? pagination.hasMore : !!initialCursor
+
+  const handleLoadMore = useCallback(() => {
+    if (hasMore && !loading) {
+      loadMore()
+    }
+  }, [hasMore, loading, loadMore])
+
+  // Use stableFacets (which always contains the full category list) so all filter
+  // options remain visible after a category filter is applied.
+  const displayFacets = stableFacets
+
+  return (
+    <div className={styles.layout}>
+      <aside className={styles.sidebar}>
+        <button
+          className={styles.mobileFilterToggle}
+          onClick={() => setShowMobileFilters((v) => !v)}
+          type="button"
+        >
+          {showMobileFilters ? 'Hide Filters' : 'Show Filters'}
+        </button>
+        <div
+          className={styles.filterSection}
+          style={{ display: showMobileFilters ? 'block' : undefined }}
+        >
+          <ProductFilter facets={displayFacets} />
+        </div>
+      </aside>
+
+      <div className={styles.content}>
+        <div className={styles.sortBar}>
+          <span className={styles.resultCount}>
+            {displayProducts.length} product{displayProducts.length !== 1 ? 's' : ''}
+          </span>
+          <SortDropdown value={initialized ? sort : initialSort} onChange={handleSort} />
+        </div>
+
+        {displayProducts.length > 0 ? (
+          <div className="product-grid">
+            {displayProducts.map((product) => (
+              <ProductCard
+                key={product.id}
+                product={{
+                  slug: product.slug,
+                  name: product.name,
+                  priceMinor: product.priceMinor ?? null,
+                  priceRange: product.priceRange ?? null,
+                  currency: product.currency ?? null,
+                  media: product.media,
+                }}
+              />
+            ))}
+          </div>
+        ) : (
+          <div className={styles.empty}>
+            <p>No products found.</p>
+          </div>
+        )}
+
+        {hasMore && (
+          <div className={styles.pagination}>
+            <button
+              type="button"
+              className="btn btn-secondary"
+              onClick={handleLoadMore}
+              disabled={loading}
+              data-testid="load-more"
+            >
+              {loading ? 'Loading...' : 'Load More'}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/scaffold/templates/nextjs/components/client/ProductInteractive.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import type { DenormalisedProduct, DenormalisedVariant } from '@nymbalhq/sdk'
+import { useProduct, VariantSelector, AddToCart } from '@nymbalhq/react'
+import { formatPrice } from '@/lib/format'
+import styles from '@/styles/pages/pdp.module.css'
+
+interface ProductInteractiveProps {
+  product: DenormalisedProduct
+}
+
+export function ProductInteractive({ product }: ProductInteractiveProps) {
+  const { selectedVariant } = useProduct(product.slug)
+
+  const variant = selectedVariant ?? product.variants?.[0]
+  const price = variant?.priceMinor ?? product.priceMinor ?? 0
+  const currency = product.currency ?? 'GBP'
+  const stock = variant?.stock ?? (product.inStock ? 10 : 0)
+
+  // The selector derives its option groups from the product's variants.
+  const hasVariantChoice = (product.variants?.length ?? 0) > 1
+
+  const handleVariantSelected = (e: CustomEvent<{ variant: unknown }>) => {
+    const v = e.detail.variant as DenormalisedVariant | undefined
+    if (v) {
+      // The product store handles variant selection internally
+    }
+  }
+
+  return (
+    <div>
+      <h1 className={styles.productTitle} data-testid="product-title">
+        {product.name}
+      </h1>
+
+      <div className={styles.price} data-testid="product-price">
+        {formatPrice(price, currency)}
+      </div>
+
+      <div className={styles.stockBadge} data-testid="stock-badge">
+        {stock === 0 ? (
+          <span style={{ color: 'var(--nymbal-color-error)' }}>Out of Stock</span>
+        ) : stock < 5 ? (
+          <span style={{ color: 'var(--nymbal-color-warning)' }}>Low Stock — {stock} left</span>
+        ) : (
+          <span style={{ color: 'var(--nymbal-color-success)' }}>In Stock</span>
+        )}
+      </div>
+
+      {hasVariantChoice && (
+        <div className={styles.variantSection}>
+          <VariantSelector onVariantSelected={handleVariantSelected} />
+        </div>
+      )}
+
+      <div className={styles.addToCartSection}>
+        <AddToCart variantId={variant?.id ?? product.id} disabled={stock === 0} />
+      </div>
+    </div>
+  )
+}

package/scaffold/templates/nextjs/components/client/ProfileForm.tsx

@@ -0,0 +1,112 @@
+'use client'
+
+import { useState, useEffect, useCallback, type FormEvent } from 'react'
+import { useAuth } from '@nymbalhq/react'
+import styles from '@/styles/pages/account.module.css'
+
+export function ProfileForm() {
+  const { customer, updateProfile } = useAuth()
+
+  const [firstName, setFirstName] = useState('')
+  const [lastName, setLastName] = useState('')
+  const [phone, setPhone] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [success, setSuccess] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (customer) {
+      setFirstName(customer.firstName ?? '')
+      setLastName(customer.lastName ?? '')
+      setPhone(customer.phone ?? '')
+    }
+  }, [customer])
+
+  const handleSubmit = useCallback(
+    async (e: FormEvent) => {
+      e.preventDefault()
+      setSaving(true)
+      setError(null)
+      setSuccess(false)
+
+      try {
+        await updateProfile({ firstName, lastName, phone })
+        setSuccess(true)
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to update profile.')
+      } finally {
+        setSaving(false)
+      }
+    },
+    [firstName, lastName, phone, updateProfile],
+  )
+
+  return (
+    <div>
+      <h2 className={styles.pageTitle}>Profile</h2>
+
+      {success && (
+        <div className={`${styles.alert} ${styles.alertSuccess}`}>
+          Profile updated successfully.
+        </div>
+      )}
+      {error && <div className={`${styles.alert} ${styles.alertError}`}>{error}</div>}
+
+      <div className={styles.formCard}>
+        <h3 className={styles.formCardTitle}>Personal Information</h3>
+        <form onSubmit={handleSubmit}>
+          <div className={styles.formGrid}>
+            <div>
+              <label htmlFor="profile-first-name">First Name</label>
+              <input
+                id="profile-first-name"
+                data-testid="profile-firstName"
+                type="text"
+                value={firstName}
+                onChange={(e) => setFirstName(e.target.value)}
+                autoComplete="given-name"
+              />
+            </div>
+            <div>
+              <label htmlFor="profile-last-name">Last Name</label>
+              <input
+                id="profile-last-name"
+                data-testid="profile-lastName"
+                type="text"
+                value={lastName}
+                onChange={(e) => setLastName(e.target.value)}
+                autoComplete="family-name"
+              />
+            </div>
+            <div className={styles.formGridFull}>
+              <label htmlFor="profile-email">Email</label>
+              <input
+                id="profile-email"
+                type="email"
+                value={customer?.email ?? ''}
+                disabled
+                autoComplete="email"
+              />
+            </div>
+            <div className={styles.formGridFull}>
+              <label htmlFor="profile-phone">Phone</label>
+              <input
+                id="profile-phone"
+                type="tel"
+                value={phone}
+                onChange={(e) => setPhone(e.target.value)}
+                placeholder="Your phone number"
+                autoComplete="tel"
+              />
+            </div>
+          </div>
+          <div className={styles.formActions}>
+            <button type="submit" className={styles.saveButton} disabled={saving}>
+              {saving ? 'Saving...' : 'Save Changes'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

package/scaffold/templates/nextjs/components/client/RegisterForm.tsx

@@ -0,0 +1,131 @@
+'use client'
+
+import { useState, useCallback, type FormEvent } from 'react'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+import { useAuth } from '@nymbalhq/react'
+import styles from '@/styles/pages/account.module.css'
+
+export function RegisterForm() {
+  const router = useRouter()
+  const { register } = useAuth()
+
+  const [firstName, setFirstName] = useState('')
+  const [lastName, setLastName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = useCallback(
+    async (e: FormEvent) => {
+      e.preventDefault()
+      setError(null)
+
+      if (password !== confirmPassword) {
+        setError('Passwords do not match.')
+        return
+      }
+
+      setLoading(true)
+
+      try {
+        await register({ firstName, lastName, email, password })
+        router.push('/account')
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Registration failed. Please try again.')
+        setLoading(false)
+      }
+    },
+    [firstName, lastName, email, password, confirmPassword, register, router],
+  )
+
+  return (
+    <div className={styles.authPage}>
+      <div className={styles.authCard} data-testid="register-form">
+        <h1 className={styles.authTitle}>Create Account</h1>
+        <p className={styles.authSubtitle}>Join us and start shopping.</p>
+
+        {error && <div className={styles.alertError + ' ' + styles.alert}>{error}</div>}
+
+        <form onSubmit={handleSubmit} className={styles.authForm}>
+          <div className="form-group">
+            <label htmlFor="register-first-name">First Name</label>
+            <input
+              id="register-first-name"
+              type="text"
+              value={firstName}
+              onChange={(e) => setFirstName(e.target.value)}
+              required
+              placeholder="First name"
+              autoComplete="given-name"
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="register-last-name">Last Name</label>
+            <input
+              id="register-last-name"
+              type="text"
+              value={lastName}
+              onChange={(e) => setLastName(e.target.value)}
+              required
+              placeholder="Last name"
+              autoComplete="family-name"
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="register-email">Email</label>
+            <input
+              id="register-email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              data-testid="register-email"
+              placeholder="you@example.com"
+              autoComplete="email"
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="register-password">Password</label>
+            <input
+              id="register-password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              placeholder="Create a password"
+              autoComplete="new-password"
+              minLength={8}
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="register-confirm-password">Confirm Password</label>
+            <input
+              id="register-confirm-password"
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              required
+              placeholder="Confirm your password"
+              autoComplete="new-password"
+            />
+          </div>
+          <button
+            type="submit"
+            className={styles.authSubmit}
+            disabled={loading}
+          >
+            {loading ? 'Creating account...' : 'Create Account'}
+          </button>
+        </form>
+
+        <p className={styles.authFooter}>
+          Already have an account?{' '}
+          <Link href="/account/login">Sign in</Link>
+        </p>
+      </div>
+    </div>
+  )
+}