create-nymbal-app 0.0.0 → 0.2.0

package/scaffold/templates/nextjs/components/client/CheckoutForm.tsx

@@ -0,0 +1,523 @@
+'use client'
+
+import { useState, useCallback, type FormEvent } from 'react'
+import { useRouter } from 'next/navigation'
+import { useCheckout, useCart, useNymbalClient } from '@nymbalhq/react'
+import { Elements, CardElement, useStripe, useElements } from '@stripe/react-stripe-js'
+import { loadStripe } from '@stripe/stripe-js'
+import { formatPrice } from '@/lib/format'
+import styles from '@/styles/pages/checkout.module.css'
+
+// The env says only whether a Stripe client exists; the payment flow follows the server's answer.
+const stripeKey = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY ?? ''
+const isStub = process.env.NEXT_PUBLIC_NYMBAL_PAYMENTS_PROVIDER === 'native-stub' || !stripeKey
+const stripePromise = isStub ? null : loadStripe(stripeKey)
+
+import type { Address } from '@nymbalhq/types'
+type AddressFields = Pick<
+  Address,
+  'firstName' | 'lastName' | 'addressLine1' | 'city' | 'region' | 'postalCode' | 'country'
+> & { addressLine2: string }
+
+const emptyAddress: AddressFields = {
+  firstName: '',
+  lastName: '',
+  addressLine1: '',
+  addressLine2: '',
+  city: '',
+  region: '',
+  postalCode: '',
+  country: '',
+}
+
+const STEP_LABELS = ['Contact', 'Shipping', 'Payment'] as const
+
+function StepIndicator({ current }: { current: number }) {
+  return (
+    <div className={styles.steps} data-testid="checkout-steps">
+      {STEP_LABELS.map((label, i) => (
+        <div
+          key={label}
+          className={`${styles.step} ${i < current ? styles.stepCompleted : ''} ${i === current ? styles.stepActive : ''}`}
+        >
+          <span className={styles.stepNumber}>{i + 1}</span>
+          <span className={styles.stepLabel}>{label}</span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function AddressFormFields({
+  prefix,
+  values,
+  onChange,
+}: {
+  prefix: string
+  values: AddressFields
+  onChange: (field: keyof AddressFields, value: string) => void
+}) {
+  return (
+    <div className={styles.formGrid}>
+      <div>
+        <label htmlFor={`${prefix}-firstName`}>First Name</label>
+        <input
+          id={`${prefix}-firstName`}
+          data-testid={`${prefix}-firstName`}
+          type="text"
+          value={values.firstName}
+          onChange={(e) => onChange('firstName', e.target.value)}
+          required
+          autoComplete="given-name"
+        />
+      </div>
+      <div>
+        <label htmlFor={`${prefix}-lastName`}>Last Name</label>
+        <input
+          id={`${prefix}-lastName`}
+          data-testid={`${prefix}-lastName`}
+          type="text"
+          value={values.lastName}
+          onChange={(e) => onChange('lastName', e.target.value)}
+          required
+          autoComplete="family-name"
+        />
+      </div>
+      <div className={styles.formGridFull}>
+        <label htmlFor={`${prefix}-addressLine1`}>Address Line 1</label>
+        <input
+          id={`${prefix}-addressLine1`}
+          data-testid={`${prefix}-addressLine1`}
+          type="text"
+          value={values.addressLine1}
+          onChange={(e) => onChange('addressLine1', e.target.value)}
+          required
+          autoComplete="address-line1"
+        />
+      </div>
+      <div className={styles.formGridFull}>
+        <label htmlFor={`${prefix}-addressLine2`}>Address Line 2 (optional)</label>
+        <input
+          id={`${prefix}-addressLine2`}
+          data-testid={`${prefix}-addressLine2`}
+          type="text"
+          value={values.addressLine2}
+          onChange={(e) => onChange('addressLine2', e.target.value)}
+          autoComplete="address-line2"
+        />
+      </div>
+      <div>
+        <label htmlFor={`${prefix}-city`}>City</label>
+        <input
+          id={`${prefix}-city`}
+          data-testid={`${prefix}-city`}
+          type="text"
+          value={values.city}
+          onChange={(e) => onChange('city', e.target.value)}
+          required
+          autoComplete="address-level2"
+        />
+      </div>
+      <div>
+        <label htmlFor={`${prefix}-region`}>State / County</label>
+        <input
+          id={`${prefix}-region`}
+          data-testid={`${prefix}-region`}
+          type="text"
+          value={values.region}
+          onChange={(e) => onChange('region', e.target.value)}
+          required
+          autoComplete="address-level1"
+        />
+      </div>
+      <div>
+        <label htmlFor={`${prefix}-postalCode`}>Postcode</label>
+        <input
+          id={`${prefix}-postalCode`}
+          data-testid={`${prefix}-postalCode`}
+          type="text"
+          value={values.postalCode}
+          onChange={(e) => onChange('postalCode', e.target.value)}
+          required
+          autoComplete="postal-code"
+        />
+      </div>
+      <div>
+        <label htmlFor={`${prefix}-country`}>Country (2-letter code)</label>
+        <input
+          id={`${prefix}-country`}
+          data-testid={`${prefix}-country`}
+          type="text"
+          value={values.country}
+          onChange={(e) => onChange('country', e.target.value)}
+          required
+          autoComplete="country"
+          placeholder="GB"
+        />
+      </div>
+    </div>
+  )
+}
+
+function CheckoutFormInner() {
+  const router = useRouter()
+  const client = useNymbalClient()
+  const checkout = useCheckout()
+  const cart = useCart()
+  const stripe = useStripe()
+  const elements = useElements()
+
+  const [step, setStep] = useState(0)
+  const [email, setEmail] = useState('')
+  const [shippingAddress, setShippingAddress] = useState<AddressFields>(emptyAddress)
+  const [billingAddress, setBillingAddress] = useState<AddressFields>(emptyAddress)
+  const [sameAsShipping, setSameAsShipping] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [processing, setProcessing] = useState(false)
+
+  const cartCurrency = cart.currency ?? 'GBP'
+
+  const updateShipping = useCallback((field: keyof AddressFields, value: string) => {
+    setShippingAddress((prev) => ({ ...prev, [field]: value }))
+  }, [])
+
+  const updateBilling = useCallback((field: keyof AddressFields, value: string) => {
+    setBillingAddress((prev) => ({ ...prev, [field]: value }))
+  }, [])
+
+  const handleContact = useCallback(
+    (e: FormEvent) => {
+      e.preventDefault()
+      setError(null)
+      if (!email) {
+        setError('Please enter your email address.')
+        return
+      }
+      checkout.setEmail(email)
+      setStep(1)
+    },
+    [email, checkout],
+  )
+
+  const handleShipping = useCallback(
+    (e: FormEvent) => {
+      e.preventDefault()
+      setError(null)
+      if (
+        !shippingAddress.addressLine1 ||
+        !shippingAddress.city ||
+        !shippingAddress.postalCode ||
+        !shippingAddress.country
+      ) {
+        setError('Please complete your shipping address.')
+        return
+      }
+      checkout.setShippingAddress({
+        firstName: shippingAddress.firstName,
+        lastName: shippingAddress.lastName,
+        addressLine1: shippingAddress.addressLine1,
+        addressLine2: shippingAddress.addressLine2 || undefined,
+        city: shippingAddress.city,
+        region: shippingAddress.region,
+        postalCode: shippingAddress.postalCode,
+        country: shippingAddress.country,
+      })
+      checkout.setShippingMethod({
+        carrier: 'Standard',
+        service: 'Standard Shipping',
+        amountMinor: 0,
+        currency: cartCurrency,
+        estimatedDays: 5,
+      })
+      setStep(2)
+    },
+    [shippingAddress, checkout, cartCurrency],
+  )
+
+  const handlePlaceOrder = useCallback(
+    async (e: FormEvent) => {
+      e.preventDefault()
+      if (!isStub && (!stripe || !elements)) return
+
+      setProcessing(true)
+      setError(null)
+
+      const billing = sameAsShipping ? shippingAddress : billingAddress
+      checkout.setBillingAddress({
+        firstName: billing.firstName,
+        lastName: billing.lastName,
+        addressLine1: billing.addressLine1,
+        addressLine2: billing.addressLine2 || undefined,
+        city: billing.city,
+        region: billing.region,
+        postalCode: billing.postalCode,
+        country: billing.country,
+      })
+
+      const stay = (message: string) => {
+        setError(message)
+        setProcessing(false)
+      }
+      const leaveFor = (orderNumber: string) => {
+        router.push(`/order/${encodeURIComponent(orderNumber)}`)
+      }
+
+      try {
+        // The submit's own result, never the render-time snapshot, which still holds the state from before it.
+        const result = await 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: submitError } = client.checkout.getState()
+          if (placedOrderNumber) return leaveFor(placedOrderNumber)
+          return stay(submitError ?? 'Something went wrong.')
+        }
+        if (result.payment.status === 'failed') {
+          return stay(client.checkout.getState().error ?? 'Payment failed.')
+        }
+        // Without a Stripe client (a +stub-pending order) the order page shows it awaiting payment.
+        if (result.payment.status === 'requires_action' && !isStub && stripe && elements) {
+          const cardEl = elements.getElement(CardElement)
+          if (!cardEl) return stay('Card element not found.')
+
+          const { error: stripeError } = await stripe.confirmCardPayment(
+            result.paymentIntent.clientSecret,
+            {
+              payment_method: {
+                card: cardEl,
+                billing_details: {
+                  email,
+                  address: {
+                    line1: billing.addressLine1,
+                    line2: billing.addressLine2 || undefined,
+                    city: billing.city,
+                    state: billing.region,
+                    postal_code: billing.postalCode,
+                    country: billing.country,
+                  },
+                },
+              },
+            },
+          )
+
+          if (stripeError) return stay(stripeError.message ?? 'Payment failed.')
+          checkout.markConfirmed()
+        }
+        leaveFor(result.orderNumber)
+      } catch (err) {
+        stay(err instanceof Error ? err.message : 'Something went wrong.')
+      }
+    },
+    [
+      stripe,
+      elements,
+      email,
+      shippingAddress,
+      billingAddress,
+      sameAsShipping,
+      checkout,
+      client,
+      router,
+    ],
+  )
+
+  return (
+    <>
+      {processing && (
+        <div className={styles.processing}>
+          <div className="spinner spinner-lg" role="status" />
+          <p className={styles.processingText}>Processing your order...</p>
+        </div>
+      )}
+      {/* Hidden, not unmounted, while processing: Stripe confirms with the mounted card element. */}
+      <div
+        className={`container ${styles.page}`}
+        style={processing ? { display: 'none' } : undefined}
+      >
+        <h1 className={styles.pageTitle}>Checkout</h1>
+        <StepIndicator current={step} />
+
+        <div className={styles.layout}>
+          <div className={styles.formArea}>
+            {error && (
+              <div className={styles.paymentError} role="alert">
+                {error}
+              </div>
+            )}
+
+            {step === 0 && (
+              <form onSubmit={handleContact}>
+                <div className={styles.formSection}>
+                  <h2 className={styles.formSectionTitle}>Contact Information</h2>
+                  <div className="form-group">
+                    <label htmlFor="checkout-email">Email Address</label>
+                    <input
+                      id="contact-email"
+                      type="email"
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                      required
+                      data-testid="contact-email"
+                      placeholder="you@example.com"
+                      autoComplete="email"
+                    />
+                  </div>
+                </div>
+                <div className={styles.formActions}>
+                  <span />
+                  <button type="submit" className="btn btn-primary" data-testid="contact-continue">
+                    Continue to Shipping
+                  </button>
+                </div>
+              </form>
+            )}
+
+            {step === 1 && (
+              <form onSubmit={handleShipping}>
+                <div className={styles.formSection} data-testid="shipping-address">
+                  <h2 className={styles.formSectionTitle}>Shipping Address</h2>
+                  <AddressFormFields
+                    prefix="shipping"
+                    values={shippingAddress}
+                    onChange={updateShipping}
+                  />
+                </div>
+                <div className={styles.formActions}>
+                  <button type="button" className="btn btn-secondary" onClick={() => setStep(0)}>
+                    Back
+                  </button>
+                  <button type="submit" className="btn btn-primary" data-testid="shipping-continue">
+                    Continue to Payment
+                  </button>
+                </div>
+              </form>
+            )}
+
+            {step === 2 && (
+              <form onSubmit={handlePlaceOrder}>
+                <div className={styles.formSection}>
+                  <h2 className={styles.formSectionTitle}>Billing Address</h2>
+                  <label
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 'var(--nymbal-spacing-sm)',
+                      cursor: 'pointer',
+                    }}
+                  >
+                    <input
+                      type="checkbox"
+                      checked={sameAsShipping}
+                      onChange={(e) => setSameAsShipping(e.target.checked)}
+                      style={{ width: 'auto' }}
+                    />
+                    Same as shipping address
+                  </label>
+                  {!sameAsShipping && (
+                    <div
+                      data-testid="billing-address"
+                      style={{ marginTop: 'var(--nymbal-spacing-md)' }}
+                    >
+                      <AddressFormFields
+                        prefix="bill"
+                        values={billingAddress}
+                        onChange={updateBilling}
+                      />
+                    </div>
+                  )}
+                </div>
+
+                <div
+                  className={styles.formSection}
+                  style={{ marginTop: 'var(--nymbal-spacing-lg)' }}
+                >
+                  <h2 className={styles.formSectionTitle}>Payment</h2>
+                  {isStub ? (
+                    <div className={styles.paymentElement} data-testid="card-element">
+                      <p
+                        style={{
+                          color: 'var(--nymbal-color-text-muted, #9ca3af)',
+                          fontSize: '0.875rem',
+                          margin: 0,
+                        }}
+                      >
+                        Test mode — payment skipped
+                      </p>
+                    </div>
+                  ) : (
+                    <div className={styles.paymentElement} data-testid="card-element">
+                      <CardElement
+                        options={{
+                          style: {
+                            base: {
+                              fontSize: '16px',
+                              color: '#1a1a1a',
+                              '::placeholder': { color: '#9ca3af' },
+                            },
+                          },
+                        }}
+                      />
+                    </div>
+                  )}
+                </div>
+
+                <div className={styles.formActions}>
+                  <button type="button" className="btn btn-secondary" onClick={() => setStep(1)}>
+                    Back
+                  </button>
+                  <button
+                    type="submit"
+                    className="btn btn-primary"
+                    disabled={(!isStub && !stripe) || processing}
+                    data-testid="place-order"
+                  >
+                    Place Order
+                  </button>
+                </div>
+              </form>
+            )}
+          </div>
+
+          <aside className={styles.orderSummary}>
+            <h2 className={styles.orderSummaryTitle}>Order Summary</h2>
+            {cart.items?.map((item) => (
+              <div key={item.variantId} className={styles.orderItem}>
+                {item.imageUrl && (
+                  <div className={styles.orderItemImage}>
+                    <img src={item.imageUrl} alt={item.productName} />
+                  </div>
+                )}
+                <div className={styles.orderItemInfo}>
+                  <p className={styles.orderItemName}>{item.productName}</p>
+                  <p className={styles.orderItemQty}>Qty: {item.qty}</p>
+                </div>
+                <span className={styles.orderItemPrice}>
+                  {formatPrice(item.priceMinor * item.qty, cartCurrency)}
+                </span>
+              </div>
+            ))}
+            <hr className={styles.summaryDivider} />
+            <div className={styles.summaryRow}>
+              <span>Subtotal</span>
+              <span data-testid="cart-subtotal">
+                {formatPrice(cart.subtotalMinor ?? 0, cartCurrency)}
+              </span>
+            </div>
+            <hr className={styles.summaryDivider} />
+            <div className={`${styles.summaryRow} ${styles.summaryTotal}`}>
+              <span>Total</span>
+              <span>{formatPrice(cart.subtotalMinor ?? 0, cartCurrency)}</span>
+            </div>
+          </aside>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export function CheckoutForm() {
+  return (
+    <Elements stripe={stripePromise}>
+      <CheckoutFormInner />
+    </Elements>
+  )
+}

package/scaffold/templates/nextjs/components/client/ImageGallery.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import { useState } from 'react'
+import Image from 'next/image'
+import styles from '@/styles/pages/pdp.module.css'
+
+interface GalleryImage {
+  url: string
+  alt: string
+}
+
+interface ImageGalleryProps {
+  images: GalleryImage[]
+}
+
+export function ImageGallery({ images }: ImageGalleryProps) {
+  const [selectedIndex, setSelectedIndex] = useState(0)
+
+  if (images.length === 0) {
+    return (
+      <div className={styles.gallery} data-testid="product-gallery">
+        <div className={styles.mainImage}>
+          <span className="visually-hidden">No images available</span>
+        </div>
+      </div>
+    )
+  }
+
+  const currentImage = images[selectedIndex]
+
+  return (
+    <div className={styles.gallery} data-testid="product-gallery">
+      <div className={styles.mainImage}>
+        <Image
+          src={currentImage.url}
+          alt={currentImage.alt}
+          width={600}
+          height={600}
+          sizes="(max-width: 1023px) 100vw, 50vw"
+          priority
+        />
+      </div>
+      {images.length > 1 && (
+        <div className={styles.thumbnails} role="list">
+          {images.map((image, index) => (
+            <button
+              key={index}
+              type="button"
+              className={`${styles.thumbnail} ${
+                index === selectedIndex ? styles.thumbnailActive : ''
+              }`}
+              onClick={() => setSelectedIndex(index)}
+              aria-label={`View image ${index + 1}`}
+              aria-current={index === selectedIndex ? 'true' : undefined}
+            >
+              <Image
+                src={image.url}
+                alt={image.alt}
+                width={80}
+                height={80}
+              />
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/scaffold/templates/nextjs/components/client/LoginForm.tsx

@@ -0,0 +1,89 @@
+'use client'
+
+import { useState, useCallback, type FormEvent } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import Link from 'next/link'
+import { useAuth } from '@nymbalhq/react'
+import styles from '@/styles/pages/account.module.css'
+
+export function LoginForm() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const { login } = useAuth()
+
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = useCallback(
+    async (e: FormEvent) => {
+      e.preventDefault()
+      setError(null)
+      setLoading(true)
+
+      try {
+        await login(email, password)
+        const redirect = searchParams.get('redirect') ?? '/account'
+        router.push(redirect)
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Invalid email or password.')
+        setLoading(false)
+      }
+    },
+    [email, password, login, router, searchParams],
+  )
+
+  return (
+    <div className={styles.authPage}>
+      <div className={styles.authCard} data-testid="login-form">
+        <h1 className={styles.authTitle}>Sign In</h1>
+        <p className={styles.authSubtitle}>Welcome back. Enter your credentials to continue.</p>
+
+        {error && <div className={styles.alertError + ' ' + styles.alert}>{error}</div>}
+
+        <form onSubmit={handleSubmit} className={styles.authForm}>
+          <div className="form-group">
+            <label htmlFor="login-email">Email</label>
+            <input
+              id="login-email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              data-testid="login-email"
+              placeholder="you@example.com"
+              autoComplete="email"
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="login-password">Password</label>
+            <input
+              id="login-password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              data-testid="login-password"
+              placeholder="Enter your password"
+              autoComplete="current-password"
+            />
+          </div>
+          <button
+            type="submit"
+            className={styles.authSubmit}
+            disabled={loading}
+            data-testid="login-submit"
+          >
+            {loading ? 'Signing in...' : 'Sign In'}
+          </button>
+        </form>
+
+        <p className={styles.authFooter}>
+          Don&apos;t have an account?{' '}
+          <Link href="/account/register">Create one</Link>
+        </p>
+      </div>
+    </div>
+  )
+}

package/scaffold/templates/nextjs/components/client/MiniCartWrapper.tsx

@@ -0,0 +1,12 @@
+'use client'
+
+import { useCallback } from 'react'
+import { MiniCart } from '@nymbalhq/react'
+
+export function MiniCartWrapper() {
+  const handleClick = useCallback(() => {
+    window.dispatchEvent(new CustomEvent('nymbal:cart:open'))
+  }, [])
+
+  return <MiniCart onClick={handleClick} />
+}