create-nymbal-app 0.3.0 → 0.5.0

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

@@ -1,143 +0,0 @@
-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

@@ -1,272 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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/profile-form.ts

@@ -1,57 +0,0 @@
-import { client } from '../lib/client.js'
-import { submitOnce } from '../lib/submit-once.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()
-
-submitOnce(form, async () => {
-  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 | null
-  if (submitBtn) 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.textContent = 'Save Changes'
-  }
-})

package/scaffold/templates/astro/src/scripts/review-form.ts

@@ -1,27 +0,0 @@
-import { client } from '../lib/client.js'
-import { submitOnce } from '../lib/submit-once.js'
-
-const form = document.getElementById('review-form') as HTMLFormElement | null
-const messageEl = document.getElementById('review-form-message')
-
-submitOnce(form, async () => {
-  if (!form || !messageEl) return
-
-  const productId = form.dataset.productId ?? ''
-  const formData = new FormData(form)
-  const rating = Number(formData.get('rating'))
-  const title = String(formData.get('title'))
-  const body = String(formData.get('body'))
-
-  try {
-    await client.adapter.reviews.submit({ productId, rating, title, body })
-    messageEl.textContent = 'Thank you for your review!'
-    messageEl.style.display = 'block'
-    messageEl.style.color = 'var(--nymbal-color-success, #16a34a)'
-    form.reset()
-  } catch {
-    messageEl.textContent = 'Something went wrong. Please try again.'
-    messageEl.style.display = 'block'
-    messageEl.style.color = 'var(--nymbal-color-error, #dc2626)'
-  }
-})