create-nymbal-app 0.0.0 → 0.2.0

package/scaffold/templates/astro/src/pages/product/[slug].astro

@@ -0,0 +1,107 @@
+---
+import '../../styles/pages/pdp.css'
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import Breadcrumb from '../../components/Breadcrumb.astro'
+import ImageGallery from '../../components/ImageGallery.astro'
+import PriceDisplay from '../../components/PriceDisplay.astro'
+import StockBadge from '../../components/StockBadge.astro'
+import ReviewList from '../../components/ReviewList.astro'
+import ReviewForm from '../../components/ReviewForm.astro'
+import RelatedProducts from '../../components/RelatedProducts.astro'
+import { fetchProduct, fetchReviews, fetchProducts } from '../../lib/api'
+import { productJsonLd, breadcrumbJsonLd } from '../../lib/seo'
+
+const { slug } = Astro.params
+
+const product = await fetchProduct(slug!)
+if (!product) return Astro.redirect('/404')
+
+const [reviewsResult, relatedResult] = await Promise.all([
+  fetchReviews(product.id),
+  fetchProducts({
+    limit: 4,
+    category: product.categoryIds?.[0] ?? undefined,
+  }),
+])
+
+const reviews = reviewsResult.items ?? []
+const relatedProducts = (relatedResult.items ?? []).filter((p) => p.id !== product.id).slice(0, 4)
+
+const images = Array.isArray(product.media) && product.media.length > 0
+  ? product.media.map((m: any) => ({
+      url: typeof m === 'string' ? m : m.url,
+      alt: typeof m === 'string' ? product.name : (m.alt ?? product.name),
+    }))
+  : [{ url: `https://picsum.photos/seed/${product.slug}/600/600`, alt: product.name }]
+
+const defaultVariant = product.variants?.[0]
+const stock = defaultVariant?.stock ?? (product.inStock ? 10 : 0)
+
+const jsonLd = productJsonLd(product, Astro.url.origin)
+const breadcrumb = breadcrumbJsonLd([
+  { name: 'Home', url: Astro.url.origin },
+  { name: 'Products', url: `${Astro.url.origin}/products` },
+  { name: product.name, url: `${Astro.url.origin}/product/${product.slug}` },
+])
+
+// The selector derives its option groups from the product's variants.
+const hasVariantChoice = (product.variants?.length ?? 0) > 1
+---
+
+<BaseLayout title={`${product.name} | Nymbal`} description={product.shortDescription ?? product.description ?? ''} jsonLd={jsonLd}>
+  <div class="container section" data-product-slug={product.slug}>
+    <Breadcrumb
+      items={[
+        { label: 'Home', href: '/' },
+        { label: 'Products', href: '/products' },
+        { label: product.name },
+      ]}
+    />
+
+    <div class="pdp-layout">
+      <ImageGallery images={images} />
+
+      <div class="pdp-info">
+        <h1 class="pdp-title" data-testid="product-title">{product.name}</h1>
+
+        <PriceDisplay
+          priceMinor={defaultVariant?.priceMinor ?? product.priceMinor}
+          currency={product.currency ?? 'GBP'}
+        />
+
+        <StockBadge stock={stock} />
+
+        <div class="pdp-actions">
+          {hasVariantChoice && (
+            <nymbal-variant-selector></nymbal-variant-selector>
+          )}
+
+          <div class="pdp-add-row">
+            <nymbal-quantity-selector value="1" min="1" max="99"></nymbal-quantity-selector>
+            <nymbal-add-to-cart
+              variant-id={defaultVariant?.id ?? product.id}
+            ></nymbal-add-to-cart>
+          </div>
+        </div>
+
+        {product.description && (
+          <div class="pdp-description" data-testid="product-description">
+            <Fragment set:html={product.description} />
+          </div>
+        )}
+      </div>
+    </div>
+
+    <section class="pdp-reviews">
+      <h2 class="pdp-reviews-title">Customer Reviews</h2>
+      <ReviewList reviews={reviews} />
+      <ReviewForm productId={product.id} />
+    </section>
+
+    <RelatedProducts products={relatedProducts} />
+  </div>
+</BaseLayout>
+
+<script>
+  import '../../scripts/pdp.js'
+</script>

package/scaffold/templates/astro/src/pages/products/index.astro

@@ -0,0 +1,62 @@
+---
+import '../../styles/pages/plp.css'
+import '../../styles/pages/home.css'
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import Breadcrumb from '../../components/Breadcrumb.astro'
+import ProductCard from '../../components/ProductCard.astro'
+import SortDropdown from '../../components/SortDropdown.astro'
+import Pagination from '../../components/Pagination.astro'
+import { fetchProducts, fetchCategories, sortFromUrl } from '../../lib/api'
+
+const sort = sortFromUrl(Astro.url)
+
+const [productResult, categories] = await Promise.all([
+  fetchProducts({ limit: 24, sort }),
+  fetchCategories(),
+])
+
+const products = productResult.items
+const facets = productResult.facets ?? []
+---
+
+<BaseLayout title="All Products | Nymbal" description="Browse our full product collection.">
+  <div class="container section">
+    <Breadcrumb items={[{ label: 'Home', href: '/' }, { label: 'Products' }]} />
+
+    <div class="plp-header">
+      <h1 class="plp-title">All Products</h1>
+      <p class="plp-count" id="product-count">{products.length} products</p>
+    </div>
+
+    <div class="plp-layout">
+      <aside class="plp-sidebar">
+        <nymbal-product-filter
+          facets={JSON.stringify(facets)}
+        ></nymbal-product-filter>
+      </aside>
+
+      <div class="plp-grid-area">
+        <SortDropdown sort={sort} />
+
+        <div class="product-grid" id="product-grid">
+          {products.map((product) => (
+            <ProductCard product={product} />
+          ))}
+        </div>
+
+        {products.length === 0 && (
+          <div class="plp-empty">
+            <h2 class="plp-empty-title">No products found</h2>
+            <p class="plp-empty-text">Try adjusting your filters.</p>
+          </div>
+        )}
+
+        <Pagination />
+      </div>
+    </div>
+  </div>
+</BaseLayout>
+
+<script>
+  import '../../scripts/plp.js'
+</script>

package/scaffold/templates/astro/src/pages/search.astro

@@ -0,0 +1,37 @@
+---
+import '../styles/pages/search.css'
+import '../styles/pages/home.css'
+import BaseLayout from '../layouts/BaseLayout.astro'
+---
+
+<BaseLayout title="Search | Nymbal" description="Search our product catalogue.">
+  <div class="search-hero">
+    <h1 class="search-hero-title">Search</h1>
+    <div class="search-bar-wrapper">
+      <input
+        type="search"
+        id="search-input"
+        class="search-input-large"
+        placeholder="Search for products..."
+        aria-label="Search products"
+        data-testid="search-page-input"
+        autocomplete="off"
+      />
+    </div>
+  </div>
+
+  <div class="container section">
+    <p class="search-query-label" id="search-query-label" style="display:none; margin-bottom: var(--nymbal-spacing-md, 1rem);"></p>
+    <div id="search-results" data-testid="search-results">
+      <div class="search-empty">
+        <div class="search-empty-icon" aria-hidden="true">&#128269;</div>
+        <h2 class="search-empty-title">Search our store</h2>
+        <p class="search-empty-text">Type a keyword to find products.</p>
+      </div>
+    </div>
+  </div>
+</BaseLayout>
+
+<script>
+  import '../scripts/search.js'
+</script>

package/scaffold/templates/astro/src/scripts/account-guard.ts

@@ -0,0 +1,22 @@
+import { client } from '../lib/client.js'
+
+export async function guardAuth(): Promise<boolean> {
+  let state = client.auth.getState()
+
+  if (!state.isAuthenticated) {
+    try {
+      await client.auth.loadProfile()
+      state = client.auth.getState()
+    } catch {
+      // will redirect below
+    }
+  }
+
+  if (!state.isAuthenticated) {
+    const redirect = encodeURIComponent(window.location.pathname + window.location.search)
+    window.location.href = `/account/login?redirect=${redirect}`
+    return false
+  }
+
+  return true
+}

package/scaffold/templates/astro/src/scripts/auth-forms.ts

@@ -0,0 +1,89 @@
+import { client } from '../lib/client.js'
+
+function getRedirectUrl(): string {
+  const params = new URLSearchParams(window.location.search)
+  return params.get('redirect') ?? '/account'
+}
+
+function showFormError(formId: string, message: string) {
+  const errorEl = document.getElementById(`${formId}-error`)
+  if (errorEl) {
+    errorEl.textContent = message
+    errorEl.style.display = 'block'
+  }
+}
+
+function hideFormError(formId: string) {
+  const errorEl = document.getElementById(`${formId}-error`)
+  if (errorEl) {
+    errorEl.style.display = 'none'
+    errorEl.textContent = ''
+  }
+}
+
+// Login form handler
+const loginForm = document.getElementById('login-form') as HTMLFormElement | null
+loginForm?.addEventListener('submit', async (e) => {
+  e.preventDefault()
+  hideFormError('login')
+
+  const email = (document.getElementById('login-email') as HTMLInputElement)?.value
+  const password = (document.getElementById('login-password') as HTMLInputElement)?.value
+
+  if (!email || !password) {
+    showFormError('login', 'Please enter your email and password.')
+    return
+  }
+
+  const submitBtn = loginForm.querySelector('[data-testid="login-submit"]') as HTMLButtonElement | null
+  if (submitBtn) {
+    submitBtn.disabled = true
+    submitBtn.textContent = 'Signing in...'
+  }
+
+  try {
+    await client.auth.login(email, password)
+    window.location.href = getRedirectUrl()
+  } catch (err: any) {
+    showFormError('login', err.message ?? 'Invalid email or password.')
+    if (submitBtn) {
+      submitBtn.disabled = false
+      submitBtn.textContent = 'Sign In'
+    }
+  }
+})
+
+// Register form handler
+const registerForm = document.getElementById('register-form') as HTMLFormElement | null
+registerForm?.addEventListener('submit', async (e) => {
+  e.preventDefault()
+  hideFormError('register')
+
+  const email = (document.getElementById('register-email') as HTMLInputElement)?.value
+  const password = (document.getElementById('register-password') as HTMLInputElement)?.value
+  const firstName = (document.getElementById('register-firstName') as HTMLInputElement)?.value
+  const lastName = (document.getElementById('register-lastName') as HTMLInputElement)?.value
+  const phone = (document.getElementById('register-phone') as HTMLInputElement)?.value
+
+  if (!email || !password) {
+    showFormError('register', 'Please enter your email and password.')
+    return
+  }
+
+  const submitBtn = registerForm.querySelector('[data-testid="register-submit"]') as HTMLButtonElement | null
+  if (submitBtn) {
+    submitBtn.disabled = true
+    submitBtn.textContent = 'Creating account...'
+  }
+
+  try {
+    await client.auth.register({ email, password, firstName, lastName, phone })
+    window.location.href = getRedirectUrl()
+  } catch (err: any) {
+    showFormError('register', err.message ?? 'Registration failed. Please try again.')
+    if (submitBtn) {
+      submitBtn.disabled = false
+      submitBtn.textContent = 'Create Account'
+    }
+  }
+})

package/scaffold/templates/astro/src/scripts/cart-page.ts

@@ -0,0 +1,143 @@
+import { client } from '../lib/client.js'
+import { formatPrice } from '../lib/format.js'
+
+const container = document.getElementById('cart-content')
+if (!container) throw new Error('Missing #cart-content')
+
+function renderCart() {
+  const state = client.cart.getState()
+  const items = state.items ?? []
+  const currency = state.currency || 'GBP'
+
+  if (items.length === 0) {
+    container!.innerHTML = `
+      <div class="cart-empty">
+        <h1 class="cart-empty-title">Your cart is empty</h1>
+        <p class="cart-empty-text">Looks like you haven't added anything yet.</p>
+        <a href="/products" class="btn btn-primary" data-testid="continue-shopping">Continue Shopping</a>
+      </div>
+    `
+    return
+  }
+
+  const subtotal = items.reduce((sum: number, item: any) => sum + item.priceMinor * item.qty, 0)
+
+  const itemsHtml = items
+    .map(
+      (item: any) => `
+      <div class="cart-line-item" data-testid="cart-item-${item.variantId}">
+        <img
+          src="${item.imageUrl || `https://picsum.photos/seed/${item.productId}/200/200`}"
+          alt="${item.productName}"
+          class="cart-line-image"
+          width="100"
+          height="100"
+          loading="lazy"
+        />
+        <div class="cart-line-info">
+          <a href="/product/${item.productId}" class="cart-line-name">${item.productName}</a>
+          ${item.variantName ? `<span class="cart-line-variant">${item.variantName}</span>` : ''}
+          <span class="cart-line-price-each">${formatPrice(item.priceMinor, currency)} each</span>
+          <button
+            type="button"
+            class="cart-line-remove"
+            data-variant-id="${item.variantId}"
+            data-testid="cart-remove-${item.variantId}"
+          >
+            Remove
+          </button>
+        </div>
+        <div class="cart-line-quantity">
+          <button
+            type="button"
+            class="cart-line-quantity-btn"
+            data-action="decrement"
+            data-variant-id="${item.variantId}"
+            aria-label="Decrease quantity"
+          >-</button>
+          <span class="cart-line-quantity-value">${item.qty}</span>
+          <button
+            type="button"
+            class="cart-line-quantity-btn"
+            data-action="increment"
+            data-variant-id="${item.variantId}"
+            aria-label="Increase quantity"
+          >+</button>
+        </div>
+        <span class="cart-line-total">${formatPrice(item.priceMinor * item.qty, currency)}</span>
+      </div>
+    `,
+    )
+    .join('')
+
+  container!.innerHTML = `
+    <div class="cart-layout">
+      <div>
+        <div class="cart-header">
+          <h1 class="cart-title">Your Cart <span class="cart-item-count">(${items.length} ${items.length === 1 ? 'item' : 'items'})</span></h1>
+        </div>
+        <div class="cart-items" data-testid="cart-items">
+          ${itemsHtml}
+        </div>
+      </div>
+      <div class="cart-summary" data-testid="cart-summary">
+        <h2 class="cart-summary-title">Order Summary</h2>
+        <dl>
+          <div class="cart-summary-row">
+            <dt>Subtotal</dt>
+            <dd>${formatPrice(subtotal, currency)}</dd>
+          </div>
+          <div class="cart-summary-row">
+            <dt>Shipping</dt>
+            <dd>Calculated at checkout</dd>
+          </div>
+        </dl>
+        <div class="cart-summary-total">
+          <span>Estimated Total</span>
+          <span>${formatPrice(subtotal, currency)}</span>
+        </div>
+        <div class="cart-summary-actions">
+          <a href="/checkout" class="btn btn-primary" data-testid="checkout-btn">Proceed to Checkout</a>
+          <a href="/products" class="btn btn-secondary">Continue Shopping</a>
+        </div>
+      </div>
+    </div>
+  `
+
+  bindCartActions()
+}
+
+function bindCartActions() {
+  container!.querySelectorAll('.cart-line-remove').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const variantId = (btn as HTMLElement).dataset.variantId
+      if (variantId) client.cart.removeItem(variantId)
+    })
+  })
+
+  container!.querySelectorAll('.cart-line-quantity-btn').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const el = btn as HTMLElement
+      const variantId = el.dataset.variantId
+      const action = el.dataset.action
+      if (!variantId) return
+
+      const state = client.cart.getState()
+      const item = (state.items ?? []).find((i: any) => i.variantId === variantId)
+      if (!item) return
+
+      if (action === 'increment') {
+        client.cart.updateQuantity(variantId, item.qty + 1)
+      } else if (action === 'decrement') {
+        if (item.qty <= 1) {
+          client.cart.removeItem(variantId)
+        } else {
+          client.cart.updateQuantity(variantId, item.qty - 1)
+        }
+      }
+    })
+  })
+}
+
+client.cart.subscribe(renderCart)
+renderCart()