create-nymbal-app 0.0.0 → 0.3.0

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,82 @@
+import { client } from '../lib/client.js'
+import { submitOnce } from '../lib/submit-once.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
+submitOnce(loginForm, async () => {
+  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.textContent = 'Signing in...'
+
+  try {
+    await client.auth.login(email, password)
+    window.location.href = getRedirectUrl()
+    return 'leaving'
+  } catch (err: any) {
+    showFormError('login', err.message ?? 'Invalid email or password.')
+    if (submitBtn) submitBtn.textContent = 'Sign In'
+  }
+})
+
+// Register form handler
+const registerForm = document.getElementById('register-form') as HTMLFormElement | null
+submitOnce(registerForm, async () => {
+  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.textContent = 'Creating account...'
+
+  try {
+    await client.auth.register({ email, password, firstName, lastName, phone })
+    window.location.href = getRedirectUrl()
+    return 'leaving'
+  } catch (err: any) {
+    showFormError('register', err.message ?? 'Registration failed. Please try again.')
+    if (submitBtn) 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()

package/scaffold/templates/astro/src/scripts/checkout.ts

@@ -0,0 +1,272 @@
+import { client } from '../lib/client.js'
+import { formatPrice } from '../lib/format.js'
+import { submitOnce } from '../lib/submit-once.js'
+
+const steps = ['contact', 'shipping', 'payment'] as const
+type Step = (typeof steps)[number]
+
+let currentStep: Step = 'contact'
+
+const stepsEl = document.getElementById('checkout-steps-container')
+const contactSection = document.getElementById('checkout-contact')
+const shippingSection = document.getElementById('checkout-shipping')
+const paymentSection = document.getElementById('checkout-payment')
+const summaryEl = document.getElementById('checkout-summary')
+const errorEl = document.getElementById('checkout-error')
+
+function showStep(step: Step) {
+  currentStep = step
+  const sections: Record<Step, HTMLElement | null> = {
+    contact: contactSection,
+    shipping: shippingSection,
+    payment: paymentSection,
+  }
+  steps.forEach((s) => {
+    const el = sections[s]
+    if (el) el.style.display = s === step ? '' : 'none'
+  })
+  updateStepIndicator()
+}
+
+function updateStepIndicator() {
+  if (!stepsEl) return
+  const currentIndex = steps.indexOf(currentStep)
+  steps.forEach((step, index) => {
+    const stepEl = stepsEl.querySelector(`[data-testid="checkout-step-${step}"]`)
+    const dividerBefore = stepEl?.previousElementSibling
+    if (!stepEl) return
+    stepEl.className = 'checkout-step'
+    if (index < currentIndex) stepEl.classList.add('completed')
+    else if (index === currentIndex) stepEl.classList.add('active')
+    if (dividerBefore?.classList.contains('checkout-step-divider')) {
+      dividerBefore.className = 'checkout-step-divider'
+      if (index <= currentIndex) dividerBefore.classList.add('completed')
+    }
+  })
+}
+
+function showError(message: string) {
+  if (errorEl) {
+    errorEl.textContent = message
+    errorEl.style.display = 'block'
+  }
+}
+
+function hideError() {
+  if (errorEl) {
+    errorEl.style.display = 'none'
+    errorEl.textContent = ''
+  }
+}
+
+function getFormValues(form: HTMLFormElement): Record<string, string> {
+  const data = new FormData(form)
+  const result: Record<string, string> = {}
+  data.forEach((value, key) => {
+    result[key] = String(value)
+  })
+  return result
+}
+
+function renderSummary() {
+  if (!summaryEl) return
+  const cartState = client.cart.getState()
+  const items = cartState.items ?? []
+  const currency = cartState.currency ?? 'GBP'
+
+  summaryEl.innerHTML = `
+    <h2 class="checkout-summary-title">Order Summary</h2>
+    <div class="checkout-summary-items">
+      ${items
+        .map(
+          (item) => `
+        <div class="checkout-summary-item">
+          <span class="checkout-summary-item-name">${item.productName}</span>
+          <span class="checkout-summary-item-qty">x${item.qty}</span>
+          <span class="checkout-summary-item-price">${formatPrice(item.priceMinor * item.qty, currency)}</span>
+        </div>
+      `,
+        )
+        .join('')}
+    </div>
+    <dl>
+      <div class="checkout-summary-row">
+        <dt>Subtotal</dt>
+        <dd>${formatPrice(cartState.subtotalMinor, currency)}</dd>
+      </div>
+      <div class="checkout-summary-row">
+        <dt>Shipping</dt>
+        <dd>Calculated next</dd>
+      </div>
+    </dl>
+    <div class="checkout-summary-total">
+      <span>Total</span>
+      <span>${formatPrice(cartState.subtotalMinor, currency)}</span>
+    </div>
+  `
+}
+
+// Contact form
+const contactForm = document.getElementById('contact-form') as HTMLFormElement | null
+contactForm?.addEventListener('submit', (e) => {
+  e.preventDefault()
+  hideError()
+  const values = getFormValues(contactForm)
+  if (!values.email) {
+    showError('Please enter your email address.')
+    return
+  }
+  client.checkout.setEmail(values.email)
+  showStep('shipping')
+})
+
+// Shipping form
+const shippingForm = document.getElementById('shipping-form') as HTMLFormElement | null
+shippingForm?.addEventListener('submit', (e) => {
+  e.preventDefault()
+  hideError()
+  const values = getFormValues(shippingForm)
+
+  if (!values.addressLine1 || !values.city || !values.postalCode || !values.country) {
+    showError('Please complete your shipping address.')
+    return
+  }
+
+  client.checkout.setShippingAddress({
+    firstName: values.firstName ?? '',
+    lastName: values.lastName ?? '',
+    addressLine1: values.addressLine1,
+    addressLine2: values.addressLine2 || undefined,
+    city: values.city,
+    region: values.region ?? '',
+    postalCode: values.postalCode,
+    country: values.country,
+  })
+  client.checkout.setShippingMethod({
+    carrier: 'Standard',
+    service: 'Standard Shipping',
+    amountMinor: 0,
+    currency: client.cart.getState().currency ?? 'GBP',
+    estimatedDays: 5,
+  })
+  showStep('payment')
+})
+
+// Stripe setup. The env says only whether a Stripe client exists; the payment flow follows the server's answer.
+let stripe: any = null
+let cardElement: any = null
+
+const stripeKey = import.meta.env.PUBLIC_STRIPE_PUBLISHABLE_KEY
+const isStubPayments =
+  import.meta.env.PUBLIC_NYMBAL_PAYMENTS_PROVIDER === 'native-stub' || !stripeKey
+
+async function mountStripe() {
+  if (isStubPayments) {
+    const cardContainer = document.getElementById('stripe-card-element')
+    if (cardContainer) {
+      cardContainer.innerHTML =
+        '<p style="color: var(--nymbal-color-text-muted, #71717a); font-size: 0.875rem; margin: 0;">Test mode — payment skipped</p>'
+    }
+    return
+  }
+  try {
+    const { loadStripe } = await import('@stripe/stripe-js')
+    stripe = await loadStripe(stripeKey)
+    if (!stripe) return
+
+    const elements = stripe.elements()
+    cardElement = elements.create('card', {
+      style: {
+        base: {
+          fontSize: '14px',
+          color: '#18181b',
+          '::placeholder': { color: '#71717a' },
+        },
+      },
+    })
+
+    const cardContainer = document.getElementById('stripe-card-element')
+    if (cardContainer) cardElement.mount(cardContainer)
+  } catch {
+    // Stripe unavailable
+  }
+}
+
+mountStripe()
+
+// Payment form
+const paymentForm = document.getElementById('payment-form') as HTMLFormElement | null
+submitOnce(paymentForm, async () => {
+  hideError()
+
+  const submitBtn = paymentForm?.querySelector(
+    '[data-testid="place-order"]',
+  ) as HTMLButtonElement | null
+  if (submitBtn) submitBtn.textContent = 'Processing...'
+  const stay = (message: string) => {
+    showError(message)
+    if (submitBtn) submitBtn.textContent = 'Place Order'
+  }
+  const leaveFor = (orderNumber: string) => {
+    client.checkout.reset()
+    window.location.href = `/order/${encodeURIComponent(orderNumber)}`
+    return 'leaving' as const
+  }
+
+  try {
+    const sameAsShipping = (document.getElementById('billing-same') as HTMLInputElement)?.checked
+    if (sameAsShipping) {
+      const shippingAddr = client.checkout.getState().shippingAddress
+      if (shippingAddr) client.checkout.setBillingAddress(shippingAddr)
+    } else {
+      const billingForm = document.getElementById('billing-form') as HTMLFormElement
+      const values = getFormValues(billingForm)
+      client.checkout.setBillingAddress({
+        firstName: values.firstName ?? '',
+        lastName: values.lastName ?? '',
+        addressLine1: values.addressLine1,
+        addressLine2: values.addressLine2 || undefined,
+        city: values.city,
+        region: values.region ?? '',
+        postalCode: values.postalCode,
+        country: values.country,
+      })
+    }
+
+    const result = await client.checkout.submitPayment()
+    if (result === null) {
+      // A resubmit of a cart that already became an order (Back, then Place Order) goes to that order.
+      const { placedOrderNumber, error } = client.checkout.getState()
+      if (placedOrderNumber) return leaveFor(placedOrderNumber)
+      return stay(error ?? 'Payment failed. Please try again.')
+    }
+    if (result.payment.status === 'failed') {
+      return stay(client.checkout.getState().error ?? 'Payment failed. Please try again.')
+    }
+    // Without a Stripe client (a +stub-pending order) the order page shows it awaiting payment.
+    if (result.payment.status === 'requires_action' && stripe && cardElement) {
+      const { error } = await stripe.confirmCardPayment(result.paymentIntent.clientSecret, {
+        payment_method: { card: cardElement },
+      })
+      if (error) return stay(error.message ?? 'Payment failed.')
+      client.checkout.markConfirmed()
+    }
+    return leaveFor(result.orderNumber)
+  } catch (err: any) {
+    stay(err.message ?? 'Payment failed. Please try again.')
+  }
+})
+
+// Billing same-as-shipping toggle
+const billingSameCheckbox = document.getElementById('billing-same') as HTMLInputElement | null
+const billingFields = document.getElementById('billing-fields')
+billingSameCheckbox?.addEventListener('change', () => {
+  if (billingFields) {
+    billingFields.style.display = billingSameCheckbox.checked ? 'none' : ''
+  }
+})
+
+// Init
+showStep('contact')
+renderSummary()
+client.cart.subscribe(renderSummary)

package/scaffold/templates/astro/src/scripts/image-gallery.ts

@@ -0,0 +1,22 @@
+const thumbnails = document.getElementById('gallery-thumbnails')
+const mainImage = document.getElementById('gallery-main-image') as HTMLImageElement | null
+
+if (thumbnails && mainImage) {
+  thumbnails.addEventListener('click', (e) => {
+    const target = e.target as HTMLElement
+    if (!target.classList.contains('pdp-thumbnail')) return
+
+    const url = target.dataset.url
+    const alt = target.dataset.alt
+
+    if (url) {
+      mainImage.src = url
+      mainImage.alt = alt ?? ''
+    }
+
+    thumbnails
+      .querySelectorAll('.pdp-thumbnail')
+      .forEach((t) => t.classList.remove('active'))
+    target.classList.add('active')
+  })
+}

package/scaffold/templates/astro/src/scripts/init-client.ts

@@ -0,0 +1,16 @@
+import '../lib/client.js'
+
+// Navigate to checkout when the cart drawer checkout button is clicked
+document.addEventListener('nymbal:cart:checkout-clicked', () => {
+  window.location.href = '/checkout'
+})
+
+// Choosing a header search suggestion (click or Enter) opens that product
+document.addEventListener('nymbal:search:selected', ((
+  e: CustomEvent<{ product?: { slug?: string } }>,
+) => {
+  const slug = e.detail?.product?.slug
+  if (slug) {
+    window.location.href = `/product/${encodeURIComponent(slug)}`
+  }
+}) as EventListener)

package/scaffold/templates/astro/src/scripts/order-status.ts

@@ -0,0 +1,27 @@
+import { client } from '../lib/client.js'
+
+// 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
+
+const root = document.querySelector<HTMLElement>('[data-order-number][data-order-status]')
+const orderNumber = root?.dataset.orderNumber
+const shown = root?.dataset.orderStatus
+
+if (orderNumber && shown === 'pending') {
+  const until = Date.now() + POLL_FOR_MS
+  const poll = async (): Promise<void> => {
+    try {
+      const order = await client.customer.orders.get(orderNumber)
+      if (order.status !== shown) {
+        window.location.reload()
+        return
+      }
+    } catch {
+      // A failed read is asked again on the next tick, within the window.
+    }
+    if (Date.now() < until) setTimeout(poll, POLL_EVERY_MS)
+  }
+  setTimeout(poll, POLL_EVERY_MS)
+}

package/scaffold/templates/astro/src/scripts/pdp.ts

@@ -0,0 +1,67 @@
+import { client } from '../lib/client.js'
+import { formatPrice } from '../lib/format.js'
+
+const slug = document.querySelector<HTMLElement>('[data-product-slug]')?.dataset.productSlug
+
+if (slug) {
+  client.product.loadBySlug(slug)
+
+  client.product.subscribe(() => {
+    const state = client.product.getState()
+    if (!state.product) return
+
+    const product = state.product
+    const selectedVariant = state.selectedVariant ?? product.variants?.[0]
+
+    // Update price display
+    const priceEl = document.querySelector('[data-testid="product-price"]')
+    if (priceEl && selectedVariant) {
+      const price = formatPrice(
+        selectedVariant.priceMinor ?? product.priceMinor,
+        product.currency ?? 'GBP',
+      )
+      priceEl.innerHTML = `<span>${price}</span>`
+    }
+
+    // Update stock badge
+    const stockEl = document.querySelector('[data-testid="stock-badge"]')
+    if (stockEl && selectedVariant) {
+      const stock = selectedVariant.stock ?? 0
+      let statusClass: string
+      let label: string
+
+      if (stock <= 0) {
+        statusClass = 'out-of-stock'
+        label = 'Out of Stock'
+      } else if (stock < 5) {
+        statusClass = 'low-stock'
+        label = 'Low Stock'
+      } else {
+        statusClass = 'in-stock'
+        label = 'In Stock'
+      }
+
+      stockEl.className = `pdp-stock ${statusClass}`
+      stockEl.innerHTML = `<span class="pdp-stock-dot" aria-hidden="true"></span>${label}`
+    }
+
+    // Update add-to-cart variant-id
+    const addToCart = document.querySelector('nymbal-add-to-cart')
+    if (addToCart && selectedVariant) {
+      addToCart.setAttribute('variant-id', selectedVariant.id)
+      if (selectedVariant.stock <= 0) {
+        addToCart.setAttribute('disabled', '')
+      } else {
+        addToCart.removeAttribute('disabled')
+      }
+    }
+  })
+
+  // Listen for variant selection from the web component
+  document.addEventListener('nymbal:variant:selected', ((e: CustomEvent) => {
+    const variantId = e.detail?.variantId
+    if (variantId) {
+      client.product.selectVariant(variantId)
+    }
+  }) as EventListener)
+}