create-nymbal-app 0.0.0 → 0.2.0

package/scaffold/templates/astro/src/pages/account/profile.astro

@@ -0,0 +1,131 @@
+---
+import '../../styles/pages/account.css'
+import AccountLayout from '../../layouts/AccountLayout.astro'
+---
+
+<AccountLayout title="Profile">
+  <h1 class="account-page-title">Profile</h1>
+  <p class="account-page-subtitle">Update your personal information.</p>
+
+  <form id="profile-form" class="account-form" data-testid="profile-form">
+    <div class="account-form-row">
+      <div class="form-group">
+        <label for="profile-firstName">First Name</label>
+        <input
+          type="text"
+          id="profile-firstName"
+          name="firstName"
+          autocomplete="given-name"
+          data-testid="profile-firstName"
+        />
+      </div>
+
+      <div class="form-group">
+        <label for="profile-lastName">Last Name</label>
+        <input
+          type="text"
+          id="profile-lastName"
+          name="lastName"
+          autocomplete="family-name"
+          data-testid="profile-lastName"
+        />
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label for="profile-email">Email</label>
+      <input
+        type="email"
+        id="profile-email"
+        name="email"
+        disabled
+        autocomplete="email"
+        data-testid="profile-email"
+        style="opacity: 0.6; cursor: not-allowed;"
+      />
+    </div>
+
+    <div class="form-group">
+      <label for="profile-phone">Phone</label>
+      <input
+        type="tel"
+        id="profile-phone"
+        name="phone"
+        autocomplete="tel"
+        data-testid="profile-phone"
+      />
+    </div>
+
+    <div class="account-form-actions">
+      <button type="submit" class="btn btn-primary" data-testid="profile-save">Save Changes</button>
+    </div>
+
+    <p class="form-message" id="profile-message" style="display:none; margin-top: var(--nymbal-spacing-md, 1rem); font-size: var(--nymbal-font-size-sm, 0.875rem);"></p>
+  </form>
+</AccountLayout>
+
+<script>
+  import { client } from '../../lib/client.js'
+
+  const form = document.getElementById('profile-form') as HTMLFormElement | null
+  const messageEl = document.getElementById('profile-message')
+
+  function populateForm() {
+    const profile = client.auth.getState().customer
+    if (!profile) return
+
+    const firstNameEl = document.getElementById('profile-firstName') as HTMLInputElement
+    const lastNameEl = document.getElementById('profile-lastName') as HTMLInputElement
+    const emailEl = document.getElementById('profile-email') as HTMLInputElement
+    const phoneEl = document.getElementById('profile-phone') as HTMLInputElement
+
+    if (firstNameEl) firstNameEl.value = profile.firstName ?? ''
+    if (lastNameEl) lastNameEl.value = profile.lastName ?? ''
+    if (emailEl) emailEl.value = profile.email ?? ''
+    if (phoneEl) phoneEl.value = profile.phone ?? ''
+  }
+
+  // Load profile data
+  async function init() {
+    try {
+      await client.auth.loadProfile()
+    } catch {
+      // ignore
+    }
+    populateForm()
+  }
+
+  client.auth.subscribe(populateForm)
+  init()
+
+  form?.addEventListener('submit', async (e) => {
+    e.preventDefault()
+    if (!form || !messageEl) return
+
+    const firstName = (document.getElementById('profile-firstName') as HTMLInputElement)?.value
+    const lastName = (document.getElementById('profile-lastName') as HTMLInputElement)?.value
+    const phone = (document.getElementById('profile-phone') as HTMLInputElement)?.value
+
+    const submitBtn = form.querySelector('[data-testid="profile-save"]') as HTMLButtonElement
+    if (submitBtn) {
+      submitBtn.disabled = true
+      submitBtn.textContent = 'Saving...'
+    }
+
+    try {
+      await client.auth.updateProfile({ firstName, lastName, phone })
+      messageEl.textContent = 'Profile updated successfully.'
+      messageEl.style.color = 'var(--nymbal-color-success, #16a34a)'
+      messageEl.style.display = 'block'
+    } catch (err) {
+      messageEl.textContent = err instanceof Error ? err.message : 'Failed to update profile.'
+      messageEl.style.color = 'var(--nymbal-color-error, #dc2626)'
+      messageEl.style.display = 'block'
+    } finally {
+      if (submitBtn) {
+        submitBtn.disabled = false
+        submitBtn.textContent = 'Save Changes'
+      }
+    }
+  })
+</script>

package/scaffold/templates/astro/src/pages/account/register.astro

@@ -0,0 +1,94 @@
+---
+import '../../styles/pages/account.css'
+import BaseLayout from '../../layouts/BaseLayout.astro'
+---
+
+<BaseLayout title="Create Account | Nymbal" description="Create a new Nymbal account.">
+  <div class="auth-page">
+    <div class="auth-card">
+      <h1 class="auth-card-title">Create Account</h1>
+      <p class="auth-card-subtitle">Join us and start shopping.</p>
+
+      <div class="checkout-error" id="register-error" style="display:none; margin-bottom: var(--nymbal-spacing-md, 1rem);" role="alert"></div>
+
+      <form id="register-form" data-testid="register-form">
+        <div class="account-form-row">
+          <div class="form-group">
+            <label for="register-firstName">First Name</label>
+            <input
+              type="text"
+              id="register-firstName"
+              name="firstName"
+              autocomplete="given-name"
+              placeholder="First name"
+              data-testid="register-firstName"
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="register-lastName">Last Name</label>
+            <input
+              type="text"
+              id="register-lastName"
+              name="lastName"
+              autocomplete="family-name"
+              placeholder="Last name"
+              data-testid="register-lastName"
+            />
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="register-email">Email</label>
+          <input
+            type="email"
+            id="register-email"
+            name="email"
+            required
+            autocomplete="email"
+            placeholder="you@example.com"
+            data-testid="register-email"
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="register-password">Password</label>
+          <input
+            type="password"
+            id="register-password"
+            name="password"
+            required
+            autocomplete="new-password"
+            placeholder="Choose a password"
+            minlength="8"
+            data-testid="register-password"
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="register-phone">Phone (optional)</label>
+          <input
+            type="tel"
+            id="register-phone"
+            name="phone"
+            autocomplete="tel"
+            placeholder="+44 7700 900000"
+            data-testid="register-phone"
+          />
+        </div>
+
+        <button type="submit" class="btn btn-primary" data-testid="register-submit">
+          Create Account
+        </button>
+      </form>
+
+      <p class="auth-footer">
+        Already have an account? <a href="/account/login">Sign in</a>
+      </p>
+    </div>
+  </div>
+</BaseLayout>
+
+<script>
+  import '../../scripts/auth-forms.js'
+</script>

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

@@ -0,0 +1,16 @@
+---
+import '../styles/pages/cart.css'
+import BaseLayout from '../layouts/BaseLayout.astro'
+---
+
+<BaseLayout title="Your Cart | Nymbal" description="Review the items in your cart.">
+  <div class="container section" id="cart-content" data-testid="cart-page">
+    <div class="cart-empty">
+      <h1 class="cart-empty-title">Loading your cart...</h1>
+    </div>
+  </div>
+</BaseLayout>
+
+<script>
+  import '../scripts/cart-page.js'
+</script>

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

@@ -0,0 +1,73 @@
+---
+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 { slug } = Astro.params
+const sort = sortFromUrl(Astro.url)
+
+const [productResult, categories] = await Promise.all([
+  fetchProducts({ limit: 24, category: slug, sort }),
+  fetchCategories(),
+])
+
+const products = productResult.items
+const category = categories.find((c) => c.slug === slug)
+const categoryName = category?.name ?? slug ?? 'Category'
+const facets = productResult.facets ?? []
+---
+
+<BaseLayout
+  title={`${categoryName} | Nymbal`}
+  description={category?.description ?? `Browse ${categoryName} products.`}
+>
+  <div class="container section">
+    <Breadcrumb items={[{ label: 'Home', href: '/' }, { label: categoryName }]} />
+
+    <div class="plp-header">
+      <h1 class="plp-title">{categoryName}</h1>
+      {category?.description && (
+        <p style="font-size: var(--nymbal-font-size-sm, 0.875rem); color: var(--nymbal-color-text-muted, #71717a); margin-bottom: var(--nymbal-spacing-sm, 0.5rem);">
+          {category.description}
+        </p>
+      )}
+      <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" data-category={slug}>
+          {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">Check back soon for new arrivals.</p>
+          </div>
+        )}
+
+        <Pagination />
+      </div>
+    </div>
+  </div>
+</BaseLayout>
+
+<script>
+  import '../../scripts/plp.js'
+</script>

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

@@ -0,0 +1,100 @@
+---
+import '../styles/pages/checkout.css'
+import BaseLayout from '../layouts/BaseLayout.astro'
+import CheckoutSteps from '../components/CheckoutSteps.astro'
+import AddressForm from '../components/AddressForm.astro'
+---
+
+<BaseLayout title="Checkout | Nymbal" description="Complete your purchase.">
+  <div class="container section">
+    <h1 style="font-size: 1.75rem; font-weight: var(--nymbal-font-weight-bold, 700); margin-bottom: var(--nymbal-spacing-md, 1rem);">Checkout</h1>
+
+    <div id="checkout-steps-container">
+      <CheckoutSteps currentStep="contact" />
+    </div>
+
+    <div class="checkout-error" id="checkout-error" style="display:none;" data-testid="checkout-error" role="alert"></div>
+
+    <div class="checkout-layout">
+      <div class="checkout-form">
+        <!-- Contact Section -->
+        <section class="checkout-section" id="checkout-contact" data-testid="checkout-contact">
+          <h2 class="checkout-section-title">Contact Information</h2>
+          <form id="contact-form">
+            <div class="form-group">
+              <label for="contact-email">Email Address</label>
+              <input
+                type="email"
+                id="contact-email"
+                name="email"
+                required
+                autocomplete="email"
+                placeholder="you@example.com"
+                data-testid="contact-email"
+              />
+            </div>
+            <button type="submit" class="btn btn-primary" data-testid="contact-continue">
+              Continue to Shipping
+            </button>
+          </form>
+        </section>
+
+        <!-- Shipping Section -->
+        <section class="checkout-section" id="checkout-shipping" style="display:none;" data-testid="checkout-shipping">
+          <h2 class="checkout-section-title">Shipping Address</h2>
+          <form id="shipping-form">
+            <AddressForm id="shipping" />
+            <button type="submit" class="btn btn-primary" style="margin-top: var(--nymbal-spacing-md, 1rem);" data-testid="shipping-continue">
+              Continue to Payment
+            </button>
+          </form>
+        </section>
+
+        <!-- Payment Section -->
+        <section class="checkout-section" id="checkout-payment" style="display:none;" data-testid="checkout-payment">
+          <h2 class="checkout-section-title">Payment</h2>
+          <form id="payment-form" novalidate>
+            <div class="form-group">
+              <label>
+                <input type="checkbox" id="billing-same" checked />
+                Billing address same as shipping
+              </label>
+            </div>
+
+            <div id="billing-fields" style="display:none;">
+              <h3 class="checkout-section-title" style="font-size: 1rem; margin-top: var(--nymbal-spacing-md, 1rem);">Billing Address</h3>
+              <div id="billing-form">
+                <AddressForm id="billing" />
+              </div>
+            </div>
+
+            <div class="payment-section" style="margin-top: var(--nymbal-spacing-md, 1rem);">
+              <label style="margin-bottom: var(--nymbal-spacing-sm, 0.5rem);">Card Details</label>
+              <div id="stripe-card-element" style="padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem); border: 1px solid var(--nymbal-color-border, #e4e4e7); border-radius: var(--nymbal-radius-md, 0.5rem); background: var(--nymbal-color-surface, #fff); min-height: 40px;" data-testid="stripe-card-element">
+                <!-- Stripe CardElement mounts here -->
+              </div>
+            </div>
+
+            <div class="checkout-submit">
+              <button type="submit" class="btn btn-primary" data-testid="place-order">
+                Place Order
+              </button>
+              <p class="checkout-terms">
+                By placing your order, you agree to our terms and conditions.
+              </p>
+            </div>
+          </form>
+        </section>
+      </div>
+
+      <aside class="checkout-summary" id="checkout-summary" data-testid="checkout-summary">
+        <h2 class="checkout-summary-title">Order Summary</h2>
+        <p style="font-size: var(--nymbal-font-size-sm, 0.875rem); color: var(--nymbal-color-text-muted, #71717a);">Loading cart...</p>
+      </aside>
+    </div>
+  </div>
+</BaseLayout>
+
+<script>
+  import '../scripts/checkout.js'
+</script>

package/scaffold/templates/astro/src/pages/fragments/footer.astro

@@ -0,0 +1,5 @@
+---
+import Footer from '../../components/Footer.astro'
+Astro.response.headers.set('Cache-Control', 'public, s-maxage=86400, stale-while-revalidate=300')
+---
+<Footer />

package/scaffold/templates/astro/src/pages/fragments/header.astro

@@ -0,0 +1,5 @@
+---
+import Header from '../../components/Header.astro'
+Astro.response.headers.set('Cache-Control', 'public, s-maxage=3600, stale-while-revalidate=300')
+---
+<Header />

package/scaffold/templates/astro/src/pages/fragments/nav.astro

@@ -0,0 +1,9 @@
+---
+import CategoryNav from '../../components/CategoryNav.astro'
+import { fetchCategories } from '../../lib/api'
+
+Astro.response.headers.set('Cache-Control', 'public, s-maxage=21600, stale-while-revalidate=300')
+
+const categories = await fetchCategories()
+---
+<CategoryNav categories={categories} />

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

@@ -0,0 +1,14 @@
+---
+import ProductCard from '../../../components/ProductCard.astro'
+import { fetchProduct } from '../../../lib/api'
+
+Astro.response.headers.set('Cache-Control', 'public, s-maxage=300, stale-while-revalidate=60')
+
+const { slug } = Astro.params
+const product = await fetchProduct(slug!)
+
+if (!product) {
+  return new Response('Not found', { status: 404 })
+}
+---
+<ProductCard product={product} />

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

@@ -0,0 +1,49 @@
+---
+import '../styles/pages/home.css'
+import BaseLayout from '../layouts/BaseLayout.astro'
+import HeroSection from '../components/HeroSection.astro'
+import CategoryNav from '../components/CategoryNav.astro'
+import ProductCard from '../components/ProductCard.astro'
+import NewsletterSignup from '../components/NewsletterSignup.astro'
+import { fetchProducts, fetchCategories } from '../lib/api'
+import { organizationJsonLd } from '../lib/seo'
+
+const [productResult, categories] = await Promise.all([
+  fetchProducts({ limit: 8 }),
+  fetchCategories(),
+])
+
+const products = productResult.items
+const jsonLd = organizationJsonLd('Nymbal', Astro.url.origin)
+---
+
+<BaseLayout title="Nymbal — Modern Storefront" jsonLd={jsonLd}>
+  <HeroSection />
+
+  <section class="section container">
+    <h2 class="section-title">Shop by Category</h2>
+    <CategoryNav categories={categories} />
+  </section>
+
+  <section class="featured-section section">
+    <div class="container">
+      <div class="featured-header">
+        <h2 class="section-title" style="margin-bottom: 0;">Featured Products</h2>
+        <a href="/products" class="featured-link">View all</a>
+      </div>
+      {products.length > 0 ? (
+        <div class="product-grid">
+          {products.map((product) => (
+            <ProductCard product={product} />
+          ))}
+        </div>
+      ) : (
+        <p style="text-align: center; color: var(--nymbal-color-text-muted, #71717a);">
+          Products coming soon.
+        </p>
+      )}
+    </div>
+  </section>
+
+  <NewsletterSignup />
+</BaseLayout>

package/scaffold/templates/astro/src/pages/order/[orderNumber].astro

@@ -0,0 +1,127 @@
+---
+import '../../styles/pages/confirmation.css'
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import OrderSummary from '../../components/OrderSummary.astro'
+import { fetchOrder } from '../../lib/api'
+import { formatPrice } from '../../lib/format'
+import { isPaid, orderHeading } from '../../lib/order-status'
+
+const { orderNumber } = Astro.params
+const order = await fetchOrder(orderNumber!)
+
+if (!order) return Astro.redirect('/404')
+
+const lineItems = (order.lineItems ?? []).map((item) => ({
+  name: `${item.productName}${item.variantName ? ` - ${item.variantName}` : ''}`,
+  qty: item.qty,
+  priceMinor: item.unitPriceMinor,
+}))
+
+const shippingAddress = order.shippingAddress
+const heading = orderHeading(order.status)
+const paid = isPaid(order.status)
+---
+
+<BaseLayout title={`${heading} | Nymbal`} description="Your order with Nymbal.">
+  <div class="container section">
+    <div class="confirmation-page" data-order-number={order.orderNumber} data-order-status={order.status}>
+      {paid && (
+        <div class="confirmation-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <polyline points="20 6 9 17 4 12"></polyline>
+          </svg>
+        </div>
+      )}
+
+      <h1 class="confirmation-title" data-testid="order-heading">{heading}</h1>
+      {paid ? (
+        <p class="confirmation-subtitle">
+          Thank you. Your order <strong data-testid="order-number">{order.orderNumber}</strong> is paid.
+          We'll send a confirmation to <strong>{order.email}</strong>.
+        </p>
+      ) : order.status === 'pending' ? (
+        <p class="confirmation-subtitle">
+          Your order <strong data-testid="order-number">{order.orderNumber}</strong> is waiting for its payment.
+          We'll email <strong>{order.email}</strong> once it arrives.
+        </p>
+      ) : (
+        <p class="confirmation-subtitle">
+          Your order <strong data-testid="order-number">{order.orderNumber}</strong> is {order.status.replace(/_/g, ' ')}.
+        </p>
+      )}
+
+      <div class="confirmation-card">
+        <h2 class="confirmation-card-title">Order Details</h2>
+
+        <dl>
+          <div class="confirmation-detail-row">
+            <dt>Order Number</dt>
+            <dd>{order.orderNumber}</dd>
+          </div>
+          <div class="confirmation-detail-row">
+            <dt>Status</dt>
+            <dd style="text-transform: capitalize;" data-testid="order-status">{order.status}</dd>
+          </div>
+        </dl>
+
+        <div class="confirmation-items">
+          {lineItems.map((item) => (
+            <div class="confirmation-item">
+              <span>
+                <span class="confirmation-item-name">{item.name}</span>
+                <span class="confirmation-item-qty"> x{item.qty}</span>
+              </span>
+              <span class="confirmation-item-price">
+                {formatPrice(item.priceMinor * item.qty, order.currency)}
+              </span>
+            </div>
+          ))}
+        </div>
+
+        <div class="confirmation-totals">
+          <div class="confirmation-total-row">
+            <span>Subtotal</span>
+            <span>{formatPrice(order.subtotalMinor, order.currency)}</span>
+          </div>
+          {order.shippingTotalMinor != null && (
+            <div class="confirmation-total-row">
+              <span>Shipping</span>
+              <span>{order.shippingTotalMinor === 0 ? 'Free' : formatPrice(order.shippingTotalMinor, order.currency)}</span>
+            </div>
+          )}
+          {order.taxTotalMinor != null && (
+            <div class="confirmation-total-row">
+              <span>Tax</span>
+              <span>{formatPrice(order.taxTotalMinor, order.currency)}</span>
+            </div>
+          )}
+          <div class="confirmation-total-row grand-total">
+            <span>Total</span>
+            <span>{formatPrice(order.totalMinor, order.currency)}</span>
+          </div>
+        </div>
+      </div>
+
+      {shippingAddress && (
+        <div class="confirmation-card">
+          <h2 class="confirmation-card-title">Shipping Address</h2>
+          <p style="font-size: var(--nymbal-font-size-sm, 0.875rem); color: var(--nymbal-color-text-muted, #71717a); line-height: 1.6;">
+            {shippingAddress.addressLine1}<br />
+            {shippingAddress.addressLine2 && <>{shippingAddress.addressLine2}<br /></>}
+            {shippingAddress.city}, {shippingAddress.region} {shippingAddress.postalCode}<br />
+            {shippingAddress.country}
+          </p>
+        </div>
+      )}
+
+      <div class="confirmation-actions">
+        <a href="/account/register" class="btn btn-primary">Create an Account</a>
+        <a href="/products" class="btn btn-secondary">Continue Shopping</a>
+      </div>
+    </div>
+  </div>
+</BaseLayout>
+
+<script>
+  import '../../scripts/order-status.js'
+</script>