create-nymbal-app 0.4.0 → 0.5.0

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

@@ -1,118 +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">
-          <nymbal-quantity-selector
-            value="${item.qty}"
-            min="1"
-            max="99"
-            data-variant-id="${item.variantId}"
-          ></nymbal-quantity-selector>
-        </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<HTMLElement>('nymbal-quantity-selector').forEach((selector) => {
-    selector.addEventListener('nymbal:quantity:changed', ((e: CustomEvent<{ value: number }>) => {
-      const variantId = selector.dataset.variantId
-      if (variantId) client.cart.updateQuantity(variantId, e.detail.value)
-    }) as EventListener)
-  })
-}
-
-client.cart.subscribe(renderCart)
-renderCart()

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

@@ -1,271 +0,0 @@
-import type { PaymentConfirmContext, PaymentConfirmation } from '@nymbalhq/sdk'
-import type { NymbalPaymentElement } from '@nymbalhq/web-components'
-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')
-})
-
-// The payment step is the store's: the element renders the payments adapter's client half through its driver.
-const paymentForm = document.getElementById('payment-form') as HTMLFormElement | null
-const paymentEl = paymentForm?.querySelector<NymbalPaymentElement>('nymbal-payment-element') ?? null
-const placeOrderBtn = paymentForm?.querySelector<HTMLButtonElement>('[data-testid="place-order"]')
-const paymentBlocked = () => paymentEl?.status === 'error'
-
-// While the element cannot take a payment (an unknown driver, a form that failed to load), no order is placed.
-let heldByPayment = false
-function syncPlaceOrder() {
-  if (!placeOrderBtn) return
-  const blocked = paymentBlocked()
-  if (blocked) placeOrderBtn.disabled = true
-  else if (heldByPayment) placeOrderBtn.disabled = false
-  heldByPayment = blocked
-}
-paymentEl?.addEventListener('nymbal:payment:status', syncPlaceOrder)
-syncPlaceOrder()
-paymentForm?.addEventListener(
-  'submit',
-  (e) => {
-    if (!paymentBlocked()) return
-    e.preventDefault()
-    e.stopImmediatePropagation()
-  },
-  true,
-)
-
-// Place Order renders where Continue was, so the second click of a double-click on Continue lands on it. A click that
-// continues a multi-click is not a decision to pay: the first click of one on Place Order has already submitted.
-placeOrderBtn?.addEventListener('click', (e) => {
-  if (e.detail > 1) e.preventDefault()
-})
-
-/** No element (a page without a payment step) has nothing to confirm, as a null client does. */
-function confirmPayment(
-  clientSecret: string,
-  context: PaymentConfirmContext,
-): Promise<PaymentConfirmation> {
-  return paymentEl?.confirm(clientSecret, context) ?? Promise.resolve({ ok: true, confirmed: false })
-}
-
-// Payment form
-submitOnce(paymentForm, async () => {
-  hideError()
-
-  if (placeOrderBtn) placeOrderBtn.textContent = 'Processing...'
-  const stay = (message: string) => {
-    showError(message)
-    if (placeOrderBtn) placeOrderBtn.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.')
-    }
-    // Confirmed only when the driver says the payment went through; otherwise the order page shows it awaiting payment.
-    if (result.payment.status === 'requires_action') {
-      const { email, billingAddress } = client.checkout.getState()
-      const confirmation = await confirmPayment(result.paymentIntent.clientSecret, {
-        email: email || undefined,
-        billing: billingAddress ?? undefined,
-      })
-      if (!confirmation.ok) return stay(confirmation.error)
-      if (confirmation.confirmed) 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)'
-  }
-})