@duffcloudservices/site-forms 0.4.2 → 0.5.0

package/src/DcsForm.vue

@@ -6,6 +6,7 @@ import type {
   PortalFormDefinition,
   PortalFormField,
 } from './types'
+import { useUiSound } from '@dcs/ui/sound'
 import { useDcsForm } from './composables/useDcsForm'
 import { submitFormValues } from './composables/useFormSubmission'
 import { warnIfInvalid } from './schema/validate'
@@ -91,6 +92,17 @@ const safeDefinition = computed<PortalFormDefinition>(
 
 const form = useDcsForm({ definition: safeDefinition.value })
 
+// First-party form-success chime (dcs-product-sound). Synthesis lives entirely in
+// the shared engine — this component owns no AudioContext. Calling useUiSound() here
+// also binds the engine's gesture-unlock listeners, so the user's submit click
+// (pointerdown/keydown) resumes the AudioContext synchronously in the gesture;
+// the chime that fires after the async submit resolves then plays on a running
+// context (autoplay-safe by construction). It stays SILENT by default: customer
+// sites are silent-by-default (they never seed sound via configureSoundDefaults),
+// and the engine additionally hard-silences inside the portal editor iframe. The
+// chime activates only once a site opts into sound.
+const { play: playUiSound } = useUiSound()
+
 // If the resolved definition changes (e.g. preview iframe updates),
 // re-create derived state by resetting.
 watch(
@@ -98,13 +110,31 @@ watch(
   () => form.reset(),
 )
 
-const apiBase = computed(
-  () =>
+const apiBase = computed(() => {
+  const configured =
     props.apiBase ??
     (import.meta as unknown as { env?: { VITE_DCS_PUBLIC_API?: string } }).env
       ?.VITE_DCS_PUBLIC_API ??
-    '',
-)
+    ''
+  if (configured) return configured
+  return defaultPublicApiBase()
+})
+
+/**
+ * Fallback API base when neither the `api-base` prop nor VITE_DCS_PUBLIC_API
+ * is set. A customer apex does not route `/api/v1/sites/*` (an empty base
+ * produced a same-origin POST the static host rejects with a 405), so default
+ * to the shared public API host; localhost keeps the relative base for the
+ * dev proxy.
+ */
+function defaultPublicApiBase(): string {
+  if (typeof window === 'undefined') return ''
+  const host = window.location.hostname.toLowerCase()
+  if (host === 'localhost' || host === '127.0.0.1' || host === '::1') {
+    return '/api/v1'
+  }
+  return 'https://api.duffcloudservices.com/api/v1'
+}
 
 const resolvedSiteSlug = computed(
   () =>
@@ -182,6 +212,9 @@ async function onSubmit(e: Event): Promise<void> {
       payload,
     })
     form.submitted.value = true
+    // Success confirmed by the server (never on optimistic fire): play only after
+    // the submission resolves. Inert unless the site has enabled sound.
+    playUiSound('notification.success')
     emit('submit-success', result)
   } catch (err) {
     const e2 = err as DcsFormSubmitError

package/src/__tests__/missing-form-error-surfacing.test.ts

@@ -0,0 +1,119 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import DcsForm from '../DcsForm.vue'
+import type { PortalFormDefinition } from '../types'
+
+/**
+ * C-155 verification — the Lamphere W6 "silent submit failure".
+ *
+ * Original finding (.docs/archive/plans/lamphere-reunion-redesign/plan.md,
+ * Learnings): prod `Features` lacked `contactForm` and the `PortalSiteForms`
+ * row was never applied — "the form silently accepted-then-reset with no
+ * user-visible error".
+ *
+ * Today both of those misconfigurations make the server's public submission
+ * handler return 404 "Form not found" (server/internal/handlers/
+ * public_site_forms.go — ErrSiteNotFound / ErrFormNotFound /
+ * ErrFormFeatureDisabled all map to http.StatusNotFound). This suite proves
+ * the client surfaces that 404 loudly: the submit error renders in
+ * `.dcs-form__submit-error` with role="alert", the form does NOT flip to the
+ * success state, and the user's field values are NOT reset.
+ */
+
+const def: PortalFormDefinition = {
+  formId: 'contact',
+  submission: { kind: 'lead' },
+  fields: [
+    { id: 'name', type: 'text', label: 'Name', required: true },
+    { id: 'email', type: 'email', label: 'Email', required: true },
+  ],
+}
+
+const originalFetch = globalThis.fetch
+
+afterEach(() => {
+  ;(globalThis as unknown as { fetch: typeof fetch }).fetch = originalFetch
+})
+
+describe('missing/misconfigured server form (Lamphere W6 repro)', () => {
+  it('surfaces a visible role=alert error on 404 and does not reset or fake success', async () => {
+    // The Lamphere shape: the site repo HAS a valid local YAML definition
+    // (the form renders and validates fine), but the server side was never
+    // provisioned — POST returns 404 "Form not found".
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: false,
+      status: 404,
+      text: async () => '{"error":"Form not found"}',
+    })
+    ;(globalThis as unknown as { fetch: typeof fetch }).fetch =
+      fetchMock as unknown as typeof fetch
+
+    const wrapper = mount(DcsForm, {
+      props: {
+        formId: 'contact',
+        siteSlug: 'lamphere-class-2005',
+        definitionOverride: def,
+        apiBase: 'https://api.example.com',
+      },
+    })
+
+    await wrapper.find('[data-form-field-key="name"] input').setValue('Jane')
+    await wrapper
+      .find('[data-form-field-key="email"] input')
+      .setValue('jane@example.com')
+
+    await wrapper.find('form').trigger('submit')
+    await flushPromises()
+
+    // 4xx must not be retried — one POST only.
+    expect(fetchMock).toHaveBeenCalledTimes(1)
+
+    // The failure is loud: a rendered, role="alert" error block.
+    const alert = wrapper.find('.dcs-form__submit-error')
+    expect(alert.exists()).toBe(true)
+    expect(alert.attributes('role')).toBe('alert')
+    expect(alert.text()).toContain('Submission failed (404)')
+
+    // And machine-visible: submit-error emitted with the 404, no submit-success.
+    const errEvents = wrapper.emitted('submit-error')
+    expect(errEvents?.length).toBe(1)
+    expect((errEvents![0][0] as { status?: number }).status).toBe(404)
+    expect(wrapper.emitted('submit-success')).toBeUndefined()
+
+    // No fake success state ("accepted") ...
+    expect(wrapper.find('.dcs-form--success').exists()).toBe(false)
+
+    // ... and no reset: the user's values survive the failed submit.
+    expect(
+      (wrapper.find('[data-form-field-key="name"] input').element as HTMLInputElement)
+        .value,
+    ).toBe('Jane')
+    expect(
+      (wrapper.find('[data-form-field-key="email"] input').element as HTMLInputElement)
+        .value,
+    ).toBe('jane@example.com')
+
+    // The submit button is re-enabled for a retry, still on the form view.
+    expect(wrapper.find('form').exists()).toBe(true)
+    expect(
+      (wrapper.find('.dcs-form__btn--submit').element as HTMLButtonElement).disabled,
+    ).toBe(false)
+  })
+
+  it('renders a visible not-configured state when the local definition is missing', async () => {
+    // The other misconfiguration direction: no local YAML at all. The
+    // component renders an explicit missing state instead of an empty form.
+    const wrapper = mount(DcsForm, {
+      props: {
+        formId: 'ghost-form',
+        siteSlug: 'lamphere-class-2005',
+        formsModules: {},
+      },
+    })
+
+    const missing = wrapper.find('.dcs-form--missing')
+    expect(missing.exists()).toBe(true)
+    expect(missing.text()).toContain('is not configured')
+    expect(wrapper.find('form').exists()).toBe(false)
+  })
+})

package/src/__tests__/submission.test.ts

@@ -75,6 +75,30 @@ describe('submission happy path', () => {
     expect(wrapper.emitted('validation-error')?.length).toBe(1)
   })
 
+  it('posts to the slug-free origin-inferred route when no site slug is configured', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      status: 202,
+      json: async () => ({ status: 'ok' }),
+    })
+
+    await submitFormValues({
+      apiBase: 'https://api.example.com/api/v1/',
+      siteSlug: '',
+      fetchImpl: fetchMock as unknown as typeof fetch,
+      payload: {
+        formId: 'contact',
+        values: { name: 'Jane' },
+      },
+    })
+
+    expect(fetchMock).toHaveBeenCalledTimes(1)
+    const [url] = fetchMock.mock.calls[0]
+    // An empty slug must NEVER emit the broken /sites//forms/... shape
+    // (kimduffhomes.com 405, 2026-07-20).
+    expect(url).toBe('https://api.example.com/api/v1/forms/contact/submissions')
+  })
+
   it('uses multipart form data for file submissions on the managed-form route', async () => {
     const fetchMock = vi.fn().mockResolvedValue({
       ok: true,

package/src/composables/useFormSubmission.ts

@@ -16,7 +16,11 @@ export interface SubmitOptions {
 
 /**
  * POSTs a form submission to
- * `${apiBase}/sites/{siteSlug}/forms/{formId}/submissions`.
+ * `${apiBase}/sites/{siteSlug}/forms/{formId}/submissions`, or — when no site
+ * slug is configured — to the slug-free
+ * `${apiBase}/forms/{formId}/submissions`, where the server infers the site
+ * from the request origin/host. A missing slug used to produce the broken
+ * `/sites//forms/...` shape (kimduffhomes.com 405, 2026-07-20).
  *
  * Uses JSON for plain values and `multipart/form-data` when any
  * value is a `File` (file-upload fields).
@@ -27,9 +31,12 @@ export async function submitFormValues(
   const { apiBase, siteSlug, payload } = opts
   const retries = opts.retries ?? 1
   const fetchImpl = opts.fetchImpl ?? fetch
-  const url = `${apiBase.replace(/\/$/, '')}/sites/${encodeURIComponent(
-    siteSlug,
-  )}/forms/${encodeURIComponent(payload.formId)}/submissions`
+  const base = apiBase.replace(/\/$/, '')
+  const formPath = `forms/${encodeURIComponent(payload.formId)}/submissions`
+  const trimmedSlug = siteSlug.trim()
+  const url = trimmedSlug
+    ? `${base}/sites/${encodeURIComponent(trimmedSlug)}/${formPath}`
+    : `${base}/${formPath}`
 
   const hasFile = Object.values(payload.values).some(valueHasFile)