create-nymbal-app 0.0.0 → 0.3.0

package/scaffold/templates/astro/src/lib/format.ts

@@ -0,0 +1,17 @@
+export function formatPrice(minor: number, currency: string): string {
+  return new Intl.NumberFormat('en-GB', { style: 'currency', currency }).format(minor / 100)
+}
+
+export function formatDate(iso: string): string {
+  return new Intl.DateTimeFormat('en-GB', { dateStyle: 'medium' }).format(new Date(iso))
+}
+
+/** Escapes text for interpolation into an HTML string; account pages render API data with innerHTML. */
+export function escapeHtml(value: unknown): string {
+  return String(value ?? '')
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}

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

@@ -0,0 +1,14 @@
+import type { OrderStatus } from '@nymbalhq/types'
+
+const PAID: ReadonlySet<OrderStatus> = new Set(['confirmed', 'processing', 'shipped', 'delivered'])
+
+/** The order page's heading, from the order's real state: never "confirmed" before the payment is. */
+export function orderHeading(status: OrderStatus): string {
+  if (PAID.has(status)) return 'Order confirmed'
+  if (status === 'pending') return 'Awaiting payment'
+  return `Order ${status.replace(/_/g, ' ')}`
+}
+
+export function isPaid(status: OrderStatus): boolean {
+  return PAID.has(status)
+}

package/scaffold/templates/astro/src/lib/seo.ts

@@ -0,0 +1,62 @@
+import type { DenormalisedProduct } from '@nymbalhq/sdk'
+
+export function productJsonLd(product: DenormalisedProduct, baseUrl: string) {
+  // The SDK types `media` as unknown: the projection stores either URLs or `{ url }` objects.
+  const media: unknown[] = Array.isArray(product.media) ? product.media : []
+  const images = media
+    .map((m) =>
+      typeof m === 'string'
+        ? m
+        : m && typeof m === 'object' && 'url' in m && typeof m.url === 'string'
+          ? m.url
+          : null,
+    )
+    .filter((url): url is string => url !== null)
+
+  const sku = product.variants?.[0]?.sku ?? product.id
+
+  const lowPrice = (product.priceRange?.minMinor ?? product.priceMinor ?? 0) / 100
+  const highPrice = (product.priceRange?.maxMinor ?? product.priceMinor ?? 0) / 100
+
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'Product',
+    name: product.name,
+    description: product.description,
+    image: images,
+    sku,
+    url: `${baseUrl}/product/${product.slug}`,
+    offers: {
+      '@type': 'AggregateOffer',
+      lowPrice: lowPrice.toFixed(2),
+      highPrice: highPrice.toFixed(2),
+      priceCurrency: product.currency,
+      availability: product.inStock
+        ? 'https://schema.org/InStock'
+        : 'https://schema.org/OutOfStock',
+      offerCount: product.variants?.length ?? 1,
+    },
+  }
+}
+
+export function breadcrumbJsonLd(items: Array<{ name: string; url: string }>) {
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'BreadcrumbList',
+    itemListElement: items.map((item, index) => ({
+      '@type': 'ListItem',
+      position: index + 1,
+      name: item.name,
+      item: item.url,
+    })),
+  }
+}
+
+export function organizationJsonLd(storeName: string, url: string) {
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'Organization',
+    name: storeName,
+    url,
+  }
+}

package/scaffold/templates/astro/src/lib/submit-once.ts

@@ -0,0 +1,44 @@
+/** What a handler resolves when it has sent the browser elsewhere (`location.href = …`): the form stays locked. */
+export type SubmitOutcome = void | 'leaving'
+
+export type SubmitHandler = (event: SubmitEvent) => Promise<SubmitOutcome> | SubmitOutcome
+
+function submitButtonOf(event: SubmitEvent, form: HTMLFormElement): HTMLButtonElement | null {
+  if (event.submitter instanceof HTMLButtonElement) return event.submitter
+  return form.querySelector<HTMLButtonElement>('button[type="submit"], button:not([type])')
+}
+
+/**
+ * Runs `handler` for a submit of `form`, ignoring every further submit until it settles. The flag, not the button, is
+ * the guard: `requestSubmit()` and Enter in a field still fire `submit` while the button is disabled.
+ */
+export function submitOnce(form: HTMLFormElement | null, handler: SubmitHandler): void {
+  if (form === null) return
+  let inFlight = false
+
+  form.addEventListener('submit', (event) => {
+    event.preventDefault()
+    if (inFlight) return
+    inFlight = true
+    const button = submitButtonOf(event as SubmitEvent, form)
+    if (button) button.disabled = true
+
+    const release = () => {
+      inFlight = false
+      if (button) button.disabled = false
+    }
+
+    // Inside `then`, a synchronous throw from the handler becomes a rejection and releases the form like one.
+    Promise.resolve()
+      .then(() => handler(event as SubmitEvent))
+      .then(
+        (outcome) => {
+          if (outcome !== 'leaving') release()
+        },
+        (reason: unknown) => {
+          release()
+          console.error('A form submit handler failed', reason)
+        },
+      )
+  })
+}

package/scaffold/templates/astro/src/pages/404.astro

@@ -0,0 +1,18 @@
+---
+import '../styles/pages/error.css'
+import BaseLayout from '../layouts/BaseLayout.astro'
+---
+
+<BaseLayout title="Page Not Found | Nymbal" description="The page you're looking for doesn't exist.">
+  <div class="error-page">
+    <span class="error-code">404</span>
+    <h1 class="error-title">Page not found</h1>
+    <p class="error-message">
+      The page you're looking for doesn't exist or may have been moved.
+    </p>
+    <div class="error-actions">
+      <a href="/" class="btn btn-primary">Go to Homepage</a>
+      <a href="/products" class="btn btn-secondary">Browse Products</a>
+    </div>
+  </div>
+</BaseLayout>

package/scaffold/templates/astro/src/pages/500.astro

@@ -0,0 +1,17 @@
+---
+import '../styles/pages/error.css'
+import BaseLayout from '../layouts/BaseLayout.astro'
+---
+
+<BaseLayout title="Server Error | Nymbal" description="Something went wrong on our end.">
+  <div class="error-page server-error">
+    <span class="error-code">500</span>
+    <h1 class="error-title">Something went wrong</h1>
+    <p class="error-message">
+      We're having trouble loading this page. Please try again in a moment.
+    </p>
+    <div class="error-actions">
+      <a href="/" class="btn btn-primary">Go to Homepage</a>
+    </div>
+  </div>
+</BaseLayout>

package/scaffold/templates/astro/src/pages/account/addresses.astro

@@ -0,0 +1,110 @@
+---
+import '../../styles/pages/account.css'
+import '../../styles/pages/checkout.css'
+import AccountLayout from '../../layouts/AccountLayout.astro'
+import AddressForm from '../../components/AddressForm.astro'
+---
+
+<AccountLayout title="Addresses">
+  <h1 class="account-page-title">Addresses</h1>
+
+  <div id="addresses-container" data-testid="addresses-list">
+    <p style="color: var(--nymbal-color-text-muted, #71717a); font-size: var(--nymbal-font-size-sm, 0.875rem);">
+      Loading addresses...
+    </p>
+  </div>
+
+  <div style="margin-top: var(--nymbal-spacing-xl, 2rem);">
+    <h2 class="section-title">Add New Address</h2>
+    <form id="add-address-form" class="account-form" data-testid="add-address-form">
+      <AddressForm id="new-address" />
+      <div class="account-form-actions">
+        <button type="submit" class="btn btn-primary" data-testid="save-address">Save Address</button>
+      </div>
+    </form>
+    <p class="form-message" id="address-form-message" style="display:none; margin-top: var(--nymbal-spacing-md, 1rem); font-size: var(--nymbal-font-size-sm, 0.875rem);"></p>
+  </div>
+</AccountLayout>
+
+<script>
+  import type { Address, CustomerAddress } from '@nymbalhq/types'
+  import { client } from '../../lib/client.js'
+  import { escapeHtml } from '../../lib/format.js'
+  import { submitOnce } from '../../lib/submit-once.js'
+
+  const container = document.getElementById('addresses-container')
+  const form = document.getElementById('add-address-form') as HTMLFormElement | null
+  const messageEl = document.getElementById('address-form-message')
+
+  function renderAddress(addr: CustomerAddress): string {
+    const isDefault = addr.isDefaultShipping || addr.isDefaultBilling
+    return `
+      <div class="address-card ${isDefault ? 'default' : ''}" data-testid="address-${escapeHtml(addr.id)}">
+        ${isDefault ? '<span class="address-card-badge">Default</span>' : ''}
+        <div class="address-card-line">${escapeHtml(`${addr.firstName} ${addr.lastName}`)}</div>
+        <div class="address-card-line">${escapeHtml(addr.addressLine1)}</div>
+        ${addr.addressLine2 ? `<div class="address-card-line">${escapeHtml(addr.addressLine2)}</div>` : ''}
+        <div class="address-card-line">${escapeHtml(`${addr.city}, ${addr.region} ${addr.postalCode}`)}</div>
+        <div class="address-card-line">${escapeHtml(addr.country)}</div>
+      </div>
+    `
+  }
+
+  async function loadAddresses() {
+    if (!container) return
+
+    try {
+      const addresses = await client.customer.addresses.list()
+
+      if (addresses.length === 0) {
+        container.innerHTML = `
+          <div class="account-empty">
+            <h2 class="account-empty-title">No saved addresses</h2>
+            <p class="account-empty-text">Add an address below to get started.</p>
+          </div>
+        `
+        return
+      }
+
+      container.innerHTML = `<div class="address-list">${addresses.map(renderAddress).join('')}</div>`
+    } catch {
+      container.innerHTML = `
+        <div class="account-empty">
+          <p class="account-empty-text">Unable to load addresses.</p>
+        </div>
+      `
+    }
+  }
+
+  submitOnce(form, async () => {
+    if (!form || !messageEl) return
+
+    const formData = new FormData(form)
+    const field = (name: string) => String(formData.get(name) ?? '').trim()
+    const address: Address = {
+      firstName: field('firstName'),
+      lastName: field('lastName'),
+      addressLine1: field('addressLine1'),
+      city: field('city'),
+      region: field('region'),
+      postalCode: field('postalCode'),
+      country: field('country'),
+      ...(field('addressLine2') && { addressLine2: field('addressLine2') }),
+    }
+
+    try {
+      await client.customer.addresses.create(address)
+      messageEl.textContent = 'Address saved successfully.'
+      messageEl.style.color = 'var(--nymbal-color-success, #16a34a)'
+      messageEl.style.display = 'block'
+      form.reset()
+      await loadAddresses()
+    } catch {
+      messageEl.textContent = 'Failed to save address. Please try again.'
+      messageEl.style.color = 'var(--nymbal-color-error, #dc2626)'
+      messageEl.style.display = 'block'
+    }
+  })
+
+  loadAddresses()
+</script>

package/scaffold/templates/astro/src/pages/account/index.astro

@@ -0,0 +1,67 @@
+---
+import '../../styles/pages/account.css'
+import AccountLayout from '../../layouts/AccountLayout.astro'
+---
+
+<AccountLayout title="My Account">
+  <h1 class="account-page-title">Dashboard</h1>
+
+  <div id="account-dashboard" data-testid="account-dashboard">
+    <div class="account-stats">
+      <div class="account-stat-card">
+        <div class="account-stat-label">Welcome back</div>
+        <div class="account-stat-value" id="dashboard-name">--</div>
+      </div>
+      <div class="account-stat-card">
+        <div class="account-stat-label">Email</div>
+        <div class="account-stat-value" id="dashboard-email" style="font-size: var(--nymbal-font-size-sm, 0.875rem);">--</div>
+      </div>
+      <div class="account-stat-card">
+        <div class="account-stat-label">Member since</div>
+        <div class="account-stat-value" id="dashboard-since" style="font-size: var(--nymbal-font-size-sm, 0.875rem);">--</div>
+      </div>
+    </div>
+
+    <h2 class="section-title">Quick Links</h2>
+    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--nymbal-spacing-md, 1rem);">
+      <a href="/account/orders" class="category-card" style="min-height: auto; padding: var(--nymbal-spacing-md, 1rem);">
+        <span class="category-card-name">Order History</span>
+      </a>
+      <a href="/account/addresses" class="category-card" style="min-height: auto; padding: var(--nymbal-spacing-md, 1rem);">
+        <span class="category-card-name">Addresses</span>
+      </a>
+      <a href="/account/profile" class="category-card" style="min-height: auto; padding: var(--nymbal-spacing-md, 1rem);">
+        <span class="category-card-name">Profile Settings</span>
+      </a>
+      <a href="/products" class="category-card" style="min-height: auto; padding: var(--nymbal-spacing-md, 1rem);">
+        <span class="category-card-name">Continue Shopping</span>
+      </a>
+    </div>
+  </div>
+</AccountLayout>
+
+<script>
+  import { client } from '../../lib/client.js'
+  import { formatDate } from '../../lib/format.js'
+
+  function renderDashboard() {
+    const profile = client.auth.getState().customer
+
+    const nameEl = document.getElementById('dashboard-name')
+    const emailEl = document.getElementById('dashboard-email')
+    const sinceEl = document.getElementById('dashboard-since')
+
+    if (nameEl && profile) {
+      nameEl.textContent = [profile.firstName, profile.lastName].filter(Boolean).join(' ') || 'User'
+    }
+    if (emailEl && profile) {
+      emailEl.textContent = profile.email || '--'
+    }
+    if (sinceEl && profile?.createdAt) {
+      sinceEl.textContent = formatDate(profile.createdAt)
+    }
+  }
+
+  client.auth.subscribe(renderDashboard)
+  renderDashboard()
+</script>

package/scaffold/templates/astro/src/pages/account/login.astro

@@ -0,0 +1,55 @@
+---
+import '../../styles/pages/account.css'
+import BaseLayout from '../../layouts/BaseLayout.astro'
+---
+
+<BaseLayout title="Sign In | Nymbal" description="Sign in to your Nymbal account.">
+  <div class="auth-page">
+    <div class="auth-card">
+      <h1 class="auth-card-title">Sign In</h1>
+      <p class="auth-card-subtitle">Welcome back. Enter your credentials to continue.</p>
+
+      <div class="checkout-error" id="login-error" style="display:none; margin-bottom: var(--nymbal-spacing-md, 1rem);" role="alert"></div>
+
+      <form id="login-form" data-testid="login-form">
+        <div class="form-group">
+          <label for="login-email">Email</label>
+          <input
+            type="email"
+            id="login-email"
+            name="email"
+            required
+            autocomplete="email"
+            placeholder="you@example.com"
+            data-testid="login-email"
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="login-password">Password</label>
+          <input
+            type="password"
+            id="login-password"
+            name="password"
+            required
+            autocomplete="current-password"
+            placeholder="Your password"
+            data-testid="login-password"
+          />
+        </div>
+
+        <button type="submit" class="btn btn-primary" data-testid="login-submit">
+          Sign In
+        </button>
+      </form>
+
+      <p class="auth-footer">
+        Don't have an account? <a href="/account/register">Create one</a>
+      </p>
+    </div>
+  </div>
+</BaseLayout>
+
+<script>
+  import '../../scripts/auth-forms.js'
+</script>

package/scaffold/templates/astro/src/pages/account/orders/[orderNumber].astro

@@ -0,0 +1,108 @@
+---
+import '../../../styles/pages/account.css'
+import '../../../styles/pages/confirmation.css'
+import AccountLayout from '../../../layouts/AccountLayout.astro'
+---
+
+<AccountLayout title="Order Detail">
+  <div id="order-detail-container" data-testid="order-detail" data-order-number={Astro.params.orderNumber}>
+    <p style="color: var(--nymbal-color-text-muted, #71717a); font-size: var(--nymbal-font-size-sm, 0.875rem);">
+      Loading order details...
+    </p>
+  </div>
+</AccountLayout>
+
+<script>
+  import { client } from '../../../lib/client.js'
+  import { escapeHtml, formatPrice, formatDate } from '../../../lib/format.js'
+
+  const container = document.getElementById('order-detail-container')
+  const orderNumber = container?.dataset.orderNumber
+
+  async function loadOrderDetail() {
+    if (!container || !orderNumber) return
+
+    try {
+      const order = await client.customer.orders.get(orderNumber)
+      const ship = order.shippingAddress
+
+      container.innerHTML = `
+        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--nymbal-spacing-lg, 1.5rem); flex-wrap: wrap; gap: var(--nymbal-spacing-sm, 0.5rem);">
+          <div>
+            <h1 class="account-page-title" style="margin-bottom: 0;">Order #${escapeHtml(order.orderNumber)}</h1>
+            ${order.createdAt ? `<p class="account-page-subtitle" style="margin-top: var(--nymbal-spacing-xs, 0.25rem);">${formatDate(order.createdAt)}</p>` : ''}
+          </div>
+          <span class="order-status status-${escapeHtml(order.status)}">${escapeHtml(order.status)}</span>
+        </div>
+
+        <div class="confirmation-card">
+          <h2 class="confirmation-card-title">Items</h2>
+          <div class="confirmation-items" style="margin-top: 0; padding-top: 0; border-top: none;">
+            ${(order.lineItems ?? [])
+              .map(
+                (item) => `
+              <div class="confirmation-item">
+                <span>
+                  <span class="confirmation-item-name">${escapeHtml(item.productName)}</span>
+                  ${item.variantName ? ` - ${escapeHtml(item.variantName)}` : ''}
+                  <span class="confirmation-item-qty"> x${item.qty}</span>
+                </span>
+                <span class="confirmation-item-price">${formatPrice(item.lineTotalMinor, order.currency)}</span>
+              </div>
+            `,
+              )
+              .join('')}
+          </div>
+
+          <div class="confirmation-totals">
+            <div class="confirmation-total-row">
+              <span>Subtotal</span>
+              <span>${formatPrice(order.subtotalMinor, order.currency)}</span>
+            </div>
+            ${order.shippingTotalMinor != null ? `
+              <div class="confirmation-total-row">
+                <span>Shipping</span>
+                <span>${order.shippingTotalMinor === 0 ? 'Free' : formatPrice(order.shippingTotalMinor, order.currency)}</span>
+              </div>
+            ` : ''}
+            ${order.taxTotalMinor != null ? `
+              <div class="confirmation-total-row">
+                <span>Tax</span>
+                <span>${formatPrice(order.taxTotalMinor, order.currency)}</span>
+              </div>
+            ` : ''}
+            <div class="confirmation-total-row grand-total">
+              <span>Total</span>
+              <span>${formatPrice(order.totalMinor, order.currency)}</span>
+            </div>
+          </div>
+        </div>
+
+        ${ship ? `
+          <div class="confirmation-card">
+            <h2 class="confirmation-card-title">Shipping Address</h2>
+            <p style="font-size: var(--nymbal-font-size-sm, 0.875rem); color: var(--nymbal-color-text-muted, #71717a); line-height: 1.6;">
+              ${escapeHtml(`${ship.firstName} ${ship.lastName}`)}<br/>
+              ${escapeHtml(ship.addressLine1)}<br/>
+              ${ship.addressLine2 ? escapeHtml(ship.addressLine2) + '<br/>' : ''}
+              ${escapeHtml(`${ship.city}, ${ship.region} ${ship.postalCode}`)}<br/>
+              ${escapeHtml(ship.country)}
+            </p>
+          </div>
+        ` : ''}
+
+        <a href="/account/orders" class="btn btn-secondary" style="margin-top: var(--nymbal-spacing-md, 1rem);">Back to Orders</a>
+      `
+    } catch {
+      container.innerHTML = `
+        <div class="account-empty">
+          <h2 class="account-empty-title">Unable to load order</h2>
+          <p class="account-empty-text">Please try again later.</p>
+          <a href="/account/orders" class="btn btn-secondary">Back to Orders</a>
+        </div>
+      `
+    }
+  }
+
+  loadOrderDetail()
+</script>

package/scaffold/templates/astro/src/pages/account/orders.astro

@@ -0,0 +1,81 @@
+---
+import '../../styles/pages/account.css'
+import AccountLayout from '../../layouts/AccountLayout.astro'
+---
+
+<AccountLayout title="Order History">
+  <h1 class="account-page-title">Order History</h1>
+
+  <div id="orders-container" data-testid="orders-list">
+    <p style="color: var(--nymbal-color-text-muted, #71717a); font-size: var(--nymbal-font-size-sm, 0.875rem);">
+      Loading orders...
+    </p>
+  </div>
+</AccountLayout>
+
+<script>
+  import type { Order } from '@nymbalhq/types'
+  import { client } from '../../lib/client.js'
+  import { escapeHtml, formatPrice, formatDate } from '../../lib/format.js'
+
+  const container = document.getElementById('orders-container')
+
+  function renderOrder(order: Order): string {
+    const number = escapeHtml(order.orderNumber)
+    const items = order.lineItems ?? []
+    return `
+      <a class="order-card" href="/account/orders/${encodeURIComponent(order.orderNumber)}" data-testid="order-${number}">
+        <div class="order-card-header">
+          <div>
+            <span class="order-card-number">#${number}</span>
+            ${order.createdAt ? `<span class="order-card-date" style="margin-left: var(--nymbal-spacing-sm, 0.5rem);">${formatDate(order.createdAt)}</span>` : ''}
+          </div>
+          <span class="order-status status-${escapeHtml(order.status)}">${escapeHtml(order.status)}</span>
+        </div>
+        <div class="order-card-body">
+          <div class="order-card-items">
+            ${items
+              .slice(0, 3)
+              .map((item) => `<span>${escapeHtml(item.productName)} x${item.qty}</span>`)
+              .join('')}
+            ${items.length > 3 ? `<span>+${items.length - 3} more items</span>` : ''}
+          </div>
+        </div>
+        <div class="order-card-footer">
+          <span class="order-card-total">${formatPrice(order.totalMinor, order.currency)}</span>
+          <span class="order-card-link">View Details</span>
+        </div>
+      </a>
+    `
+  }
+
+  async function loadOrders() {
+    if (!container) return
+
+    try {
+      const { items: orders } = await client.customer.orders.list()
+
+      if (orders.length === 0) {
+        container.innerHTML = `
+          <div class="account-empty">
+            <h2 class="account-empty-title">No orders yet</h2>
+            <p class="account-empty-text">Once you place an order, it will appear here.</p>
+            <a href="/products" class="btn btn-primary">Start Shopping</a>
+          </div>
+        `
+        return
+      }
+
+      container.innerHTML = `<div class="order-list">${orders.map(renderOrder).join('')}</div>`
+    } catch {
+      container.innerHTML = `
+        <div class="account-empty">
+          <h2 class="account-empty-title">Unable to load orders</h2>
+          <p class="account-empty-text">Please try again later.</p>
+        </div>
+      `
+    }
+  }
+
+  loadOrders()
+</script>

package/scaffold/templates/astro/src/pages/account/profile.astro

@@ -0,0 +1,69 @@
+---
+import '../../styles/pages/account.css'
+import AccountLayout from '../../layouts/AccountLayout.astro'
+---
+
+<AccountLayout title="Profile">
+  <h1 class="account-page-title">Profile</h1>
+  <p class="account-page-subtitle">Update your personal information.</p>
+
+  <form id="profile-form" class="account-form" data-testid="profile-form">
+    <div class="account-form-row">
+      <div class="form-group">
+        <label for="profile-firstName">First Name</label>
+        <input
+          type="text"
+          id="profile-firstName"
+          name="firstName"
+          autocomplete="given-name"
+          data-testid="profile-firstName"
+        />
+      </div>
+
+      <div class="form-group">
+        <label for="profile-lastName">Last Name</label>
+        <input
+          type="text"
+          id="profile-lastName"
+          name="lastName"
+          autocomplete="family-name"
+          data-testid="profile-lastName"
+        />
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label for="profile-email">Email</label>
+      <input
+        type="email"
+        id="profile-email"
+        name="email"
+        disabled
+        autocomplete="email"
+        data-testid="profile-email"
+        style="opacity: 0.6; cursor: not-allowed;"
+      />
+    </div>
+
+    <div class="form-group">
+      <label for="profile-phone">Phone</label>
+      <input
+        type="tel"
+        id="profile-phone"
+        name="phone"
+        autocomplete="tel"
+        data-testid="profile-phone"
+      />
+    </div>
+
+    <div class="account-form-actions">
+      <button type="submit" class="btn btn-primary" data-testid="profile-save">Save Changes</button>
+    </div>
+
+    <p class="form-message" id="profile-message" style="display:none; margin-top: var(--nymbal-spacing-md, 1rem); font-size: var(--nymbal-font-size-sm, 0.875rem);"></p>
+  </form>
+</AccountLayout>
+
+<script>
+  import '../../scripts/profile-form.js'
+</script>