create-nymbal-app 0.0.0 → 0.2.0

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

@@ -0,0 +1,277 @@
+import { client } from '../lib/client.js'
+import { formatPrice } from '../lib/format.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
+paymentForm?.addEventListener('submit', async (e) => {
+  e.preventDefault()
+  hideError()
+
+  const submitBtn = paymentForm.querySelector(
+    '[data-testid="place-order"]',
+  ) as HTMLButtonElement | null
+  if (submitBtn) {
+    submitBtn.disabled = true
+    submitBtn.textContent = 'Processing...'
+  }
+  const stay = (message: string) => {
+    showError(message)
+    if (submitBtn) {
+      submitBtn.disabled = false
+      submitBtn.textContent = 'Place Order'
+    }
+  }
+  const leaveFor = (orderNumber: string) => {
+    client.checkout.reset()
+    window.location.href = `/order/${encodeURIComponent(orderNumber)}`
+  }
+
+  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()
+    }
+    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)
+}

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

@@ -0,0 +1,109 @@
+import type { ProductSortKey } from '@nymbalhq/types'
+import { client } from '../lib/client.js'
+import { escapeHtml, formatPrice } from '../lib/format.js'
+
+const gridContainer = document.getElementById('product-grid')
+const sortSelect = document.getElementById('sort-select') as HTMLSelectElement | null
+const loadMoreBtn = document.getElementById('load-more-btn')
+const countEl = document.getElementById('product-count')
+
+// A category page carries its category in the path, which the server render puts on the grid; /products may carry
+// one in the query. The server render also selected the URL's sort in the dropdown.
+const urlParams = new URLSearchParams(window.location.search)
+const initialCategory = gridContainer?.dataset.category ?? urlParams.get('category') ?? undefined
+const initialSort = (sortSelect?.value ?? 'newest') as ProductSortKey
+
+function renderProductCard(product: any): string {
+  const imageUrl =
+    product.imageUrl ??
+    (Array.isArray(product.media) && product.media[0]?.url) ??
+    `https://picsum.photos/seed/${product.slug}/600/600`
+  // The "from" price, which the price sorts order by.
+  const fromMinor = product.priceRange?.minMinor ?? product.priceMinor
+  const price = fromMinor != null ? formatPrice(fromMinor, product.currency ?? 'GBP') : ''
+
+  const slug = escapeHtml(product.slug)
+  const name = escapeHtml(product.name)
+
+  return `
+    <a href="/product/${slug}" class="product-card" data-testid="product-card-${slug}">
+      <img
+        src="${escapeHtml(imageUrl)}"
+        alt="${name}"
+        class="product-card-image"
+        loading="lazy"
+        width="600"
+        height="600"
+      />
+      <div class="product-card-body">
+        <span class="product-card-name">${name}</span>
+        ${price ? `<span class="product-card-price">${escapeHtml(price)}</span>` : ''}
+      </div>
+    </a>
+  `
+}
+
+function renderGrid() {
+  const state = client.productList.getState()
+  const products = state.products ?? []
+
+  if (!gridContainer) return
+
+  // Don't overwrite the grid with an empty state while a load is in flight.
+  // This prevents the SSR content from being replaced by "No products found"
+  // during the brief window between applyFilter setting filters and the API
+  // responding with the filtered set.
+  if (products.length === 0 && state.loading) return
+
+  if (products.length === 0) {
+    gridContainer.innerHTML = `
+      <div class="plp-empty">
+        <h2 class="plp-empty-title">No products found</h2>
+        <p class="plp-empty-text">Try adjusting your filters or search terms.</p>
+      </div>
+    `
+  } else {
+    gridContainer.innerHTML = products.map(renderProductCard).join('')
+  }
+
+  // Update count
+  if (countEl) {
+    countEl.textContent = `${products.length} product${products.length === 1 ? '' : 's'}`
+  }
+
+  // Toggle load more
+  if (loadMoreBtn) {
+    loadMoreBtn.style.display = state.pagination.hasMore ? '' : 'none'
+  }
+}
+
+// The first load's own answer is the server-rendered grid, so it is not re-rendered: subscribing after it keeps the
+// subscription to re-renders (sort, filter, load-more). A sort or filter chosen while it was in flight reached the
+// store with nothing subscribed, so that state is rendered here.
+async function init() {
+  await client.productList.load({ limit: 24, category: initialCategory, sort: initialSort })
+  client.productList.subscribe(renderGrid)
+  const state = client.productList.getState()
+  const filters = Object.entries(state.filters)
+  const changed =
+    state.sort !== initialSort ||
+    filters.length !== (initialCategory === undefined ? 0 : 1) ||
+    filters.some(([name, value]) => name !== 'category' || value !== initialCategory)
+  if (state.loading || changed) renderGrid()
+}
+
+void init()
+
+// The URL carries the sort, so a reload or a shared link renders the same order server-side.
+sortSelect?.addEventListener('change', () => {
+  const sort = sortSelect.value as ProductSortKey
+  const url = new URL(window.location.href)
+  url.searchParams.set('sort', sort)
+  window.history.replaceState(window.history.state, '', url)
+  void client.productList.setSort(sort)
+})
+
+// Load more handler
+loadMoreBtn?.addEventListener('click', () => {
+  client.productList.loadMore()
+})

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

@@ -0,0 +1,145 @@
+import { client } from '../lib/client.js'
+import { formatPrice } from '../lib/format.js'
+
+const resultsContainer = document.getElementById('search-results')
+const queryLabel = document.getElementById('search-query-label')
+const searchInput = document.getElementById('search-input') as HTMLInputElement | null
+
+/** Builds an element; dynamic values go in through setAttribute and text nodes, never through markup. */
+function el(
+  tag: string,
+  attrs: Record<string, string> = {},
+  ...children: (Node | string)[]
+): HTMLElement {
+  const node = document.createElement(tag)
+  for (const [name, value] of Object.entries(attrs)) node.setAttribute(name, value)
+  node.append(...children)
+  return node
+}
+
+function renderProductCard(product: any): HTMLElement {
+  const slug = String(product.slug ?? '')
+  const name = String(product.name ?? '')
+  const imageUrl =
+    product.imageUrl ??
+    (Array.isArray(product.media) && product.media[0]?.url) ??
+    `https://picsum.photos/seed/${encodeURIComponent(slug)}/600/600`
+  const price =
+    product.priceMinor != null ? formatPrice(product.priceMinor, product.currency ?? 'GBP') : ''
+
+  const body = el(
+    'div',
+    { class: 'product-card-body' },
+    el('span', { class: 'product-card-name' }, name),
+  )
+  if (price) body.append(el('span', { class: 'product-card-price' }, price))
+
+  return el(
+    'a',
+    {
+      href: `/product/${encodeURIComponent(slug)}`,
+      class: 'product-card',
+      'data-testid': `product-card-${slug}`,
+    },
+    el('img', {
+      src: String(imageUrl),
+      alt: name,
+      class: 'product-card-image',
+      loading: 'lazy',
+      width: '600',
+      height: '600',
+    }),
+    body,
+  )
+}
+
+function renderResults() {
+  const state = client.search.getState()
+  const results = state.results ?? []
+  const query = state.query ?? ''
+  const isLoading = state.loading ?? false
+
+  if (!resultsContainer) return
+
+  // Update query label
+  if (queryLabel) {
+    if (query) {
+      queryLabel.replaceChildren('Results for ', el('strong', {}, `"${query}"`))
+      queryLabel.style.display = ''
+    } else {
+      queryLabel.style.display = 'none'
+    }
+  }
+
+  if (isLoading) {
+    resultsContainer.innerHTML = `
+      <div class="search-loading">Searching...</div>
+    `
+    return
+  }
+
+  if (!query) {
+    resultsContainer.innerHTML = `
+      <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>
+    `
+    return
+  }
+
+  if (results.length === 0) {
+    resultsContainer.innerHTML = `
+      <div class="search-empty">
+        <div class="search-empty-icon" aria-hidden="true">&#128269;</div>
+        <h2 class="search-empty-title">No results found</h2>
+        <p class="search-empty-text">Try a different search term or browse our categories.</p>
+      </div>
+    `
+    return
+  }
+
+  resultsContainer.replaceChildren(
+    el(
+      'div',
+      { class: 'search-results-header' },
+      el(
+        'span',
+        { class: 'search-result-count' },
+        `${results.length} result${results.length === 1 ? '' : 's'}`,
+      ),
+    ),
+    el('div', { class: 'product-grid' }, ...results.map(renderProductCard)),
+  )
+}
+
+client.search.subscribe(renderResults)
+
+// Read initial query from URL
+const urlParams = new URLSearchParams(window.location.search)
+const initialQuery = urlParams.get('q')
+
+if (initialQuery) {
+  if (searchInput) searchInput.value = initialQuery
+  client.search.search(initialQuery)
+} else {
+  renderResults()
+}
+
+// Listen for search input changes
+searchInput?.addEventListener('input', () => {
+  const value = searchInput.value.trim()
+  if (value.length >= 2) {
+    client.search.search(value)
+    // Update URL without reload
+    const url = new URL(window.location.href)
+    url.searchParams.set('q', value)
+    window.history.replaceState({}, '', url.toString())
+  } else if (value.length === 0) {
+    client.search.clearSearch()
+    const url = new URL(window.location.href)
+    url.searchParams.delete('q')
+    window.history.replaceState({}, '', url.toString())
+  }
+})