@kelpie/ui 0.7.0 → 0.9.0

package/src/pages/forms/SubmissionDetail.tsx

@@ -0,0 +1,249 @@
+import type { Form, FormField, FormSubmission, FormSubmissionActionEntry } from '@kelpie/schemas'
+import { useMemo } from 'react'
+import { Link, useParams } from 'react-router'
+
+import { useTimezone } from '../../api/resources/account.ts'
+import { useCompanies } from '../../api/resources/companies.ts'
+import { useForm, useFormSubmission } from '../../api/resources/forms.ts'
+import { usePeople } from '../../api/resources/people.ts'
+import { ErrorPanel, LoadingPanel, NotFoundPanel } from '../../components/QueryState.tsx'
+import { SectionHeader } from '../../components/SectionHeader.tsx'
+import { formatDateTime } from '../../lib/dates.ts'
+
+/**
+ * One submission: every answer, the records it linked, and the action log.
+ *
+ * Nested under the form so the field labels (which live on the form, not the
+ * submission) are at hand, and so "back" returns to that form's Submissions tab
+ * rather than the forms list.
+ */
+
+/** `api.md`: `?limit=` maxes out at 200. */
+const MAX_PAGE = 200
+
+export function SubmissionDetail(): React.JSX.Element {
+  const { id: formId, submissionId } = useParams()
+  const form = useForm(formId)
+  const submission = useFormSubmission(formId, submissionId)
+  const people = usePeople({ limit: MAX_PAGE })
+  const companies = useCompanies({ limit: MAX_PAGE })
+  const timezone = useTimezone()
+
+  const nameById = useMemo(
+    () => new Map([...people.records, ...companies.records].map((record) => [record.id, record.name])),
+    [people.records, companies.records],
+  )
+
+  if (form.isNotFound || submission.isNotFound) {
+    return (
+      <NotFoundPanel
+        label="Submission"
+        backTo={formId === undefined ? '/forms' : `/forms/${formId}`}
+      />
+    )
+  }
+
+  if (form.error !== null) {
+    return <ErrorPanel error={form.error} />
+  }
+
+  if (submission.error !== null) {
+    return <ErrorPanel error={submission.error} />
+  }
+
+  if (
+    form.isLoading ||
+    submission.isLoading ||
+    form.record === undefined ||
+    submission.record === undefined
+  ) {
+    return <LoadingPanel label="Loading submission…" />
+  }
+
+  return (
+    <SubmissionDetailView
+      form={form.record}
+      submission={submission.record}
+      nameById={nameById}
+      timezone={timezone}
+    />
+  )
+}
+
+function SubmissionDetailView({
+  form,
+  submission,
+  nameById,
+  timezone,
+}: {
+  readonly form: Form
+  readonly submission: FormSubmission
+  readonly nameById: ReadonlyMap<string, string>
+  readonly timezone: string
+}): React.JSX.Element {
+  const answers = form.fields.map((field) => ({
+    field,
+    value: displayAnswer(field, submission.answers[field.id]),
+  }))
+
+  return (
+    <div className="animate-fade-in mx-auto max-w-2xl">
+      <Link
+        to={`/forms/${form.id}`}
+        className="mb-4 inline-flex text-[12px] font-medium text-ink-muted transition hover:text-accent"
+      >
+        ← {form.name}
+      </Link>
+
+      <SectionHeader
+        title="Submission"
+        description={`Received ${formatDateTime(submission.submittedAt, timezone)}.`}
+      />
+
+      <div className="mt-6 space-y-6">
+        <section>
+          <h3 className="mb-2 text-[11px] font-semibold uppercase tracking-wide text-ink-faint">
+            Answers
+          </h3>
+          <dl className="divide-y divide-border rounded-md border border-border">
+            {answers.map(({ field, value }) => (
+              <div
+                key={field.id}
+                className="grid gap-0.5 px-3 py-2.5 sm:grid-cols-[10rem_1fr] sm:gap-3"
+              >
+                <dt className="text-[12px] font-medium text-ink-muted">
+                  {field.label}
+                  {field.required && <span className="ml-0.5 text-danger">*</span>}
+                </dt>
+                <dd className="whitespace-pre-wrap text-[13px] text-ink">
+                  {value === null ? <span className="text-ink-faint">—</span> : value}
+                </dd>
+              </div>
+            ))}
+          </dl>
+        </section>
+
+        <section>
+          <h3 className="mb-2 text-[11px] font-semibold uppercase tracking-wide text-ink-faint">
+            Records
+          </h3>
+          <ul className="space-y-1.5 rounded-md border border-border px-3 py-2.5 text-[13px]">
+            <RecordRow
+              label="Person"
+              to={submission.personId === null ? null : `/people/${submission.personId}`}
+              text={
+                submission.personId === null
+                  ? null
+                  : (nameById.get(submission.personId) ?? 'Person')
+              }
+            />
+            <RecordRow
+              label="Company"
+              to={submission.companyId === null ? null : `/companies/${submission.companyId}`}
+              text={
+                submission.companyId === null
+                  ? null
+                  : (nameById.get(submission.companyId) ?? 'Company')
+              }
+            />
+            <RecordRow
+              label="Deal"
+              to={submission.dealId === null ? null : `/deals/${submission.dealId}`}
+              text={submission.dealId === null ? null : 'Open deal'}
+            />
+            <RecordRow
+              label="Opportunity"
+              to={
+                submission.opportunityId === null
+                  ? null
+                  : `/opportunities/${submission.opportunityId}`
+              }
+              text={submission.opportunityId === null ? null : 'Open opportunity'}
+            />
+            <RecordRow
+              label="Partnership"
+              to={
+                submission.partnershipId === null
+                  ? null
+                  : `/partnerships/${submission.partnershipId}`
+              }
+              text={submission.partnershipId === null ? null : 'Open partnership'}
+            />
+            <RecordRow
+              label="Enquiry"
+              to={submission.enquiryId === null ? null : `/enquiries/${submission.enquiryId}`}
+              text={submission.enquiryId === null ? null : 'Open enquiry'}
+            />
+          </ul>
+        </section>
+
+        {submission.actionLog.length > 0 && (
+          <section>
+            <h3 className="mb-2 text-[11px] font-semibold uppercase tracking-wide text-ink-faint">
+              Action log
+            </h3>
+            <ul className="divide-y divide-border rounded-md border border-border">
+              {submission.actionLog.map((entry, index) => (
+                <li key={`${entry.action}-${String(index)}`} className="px-3 py-2.5">
+                  <div className="flex items-baseline justify-between gap-2">
+                    <span className="font-mono text-[12px] text-ink">{entry.action}</span>
+                    <ActionStatus status={entry.status} />
+                  </div>
+                  {entry.detail.length > 0 && (
+                    <p className="mt-1 text-[12px] text-ink-muted">{entry.detail}</p>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </section>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function RecordRow({
+  label,
+  to,
+  text,
+}: {
+  readonly label: string
+  readonly to: string | null
+  readonly text: string | null
+}): React.JSX.Element {
+  return (
+    <li className="flex items-baseline gap-2 py-0.5">
+      <span className="w-28 shrink-0 text-[12px] font-medium text-ink-muted">{label}</span>
+      {to === null || text === null ? (
+        <span className="text-ink-faint">—</span>
+      ) : (
+        <Link to={to} className="text-accent hover:underline">
+          {text}
+        </Link>
+      )}
+    </li>
+  )
+}
+
+function ActionStatus({
+  status,
+}: {
+  readonly status: FormSubmissionActionEntry['status']
+}): React.JSX.Element {
+  const className =
+    status === 'ok' ? 'text-success' : status === 'error' ? 'text-danger' : 'text-ink-faint'
+
+  return <span className={`text-[11px] font-medium uppercase ${className}`}>{status}</span>
+}
+
+function displayAnswer(field: FormField, answer: string | undefined): string | null {
+  if (answer === undefined || answer.trim().length === 0) {
+    return null
+  }
+
+  if (field.type === 'select') {
+    return field.options.find((option) => option.key === answer)?.value ?? answer
+  }
+
+  return answer
+}

package/src/pages/forms/SubmissionsTable.tsx

@@ -1,6 +1,6 @@
-import type { Form, FormSubmission } from '@kelpie/schemas'
+import type { Form, FormSubmission, FormSubmissionActionEntry } from '@kelpie/schemas'
 import { useMemo } from 'react'
-import { Link } from 'react-router'
+import { Link, useNavigate } from 'react-router'
 
 import type { RecordListResult } from '../../api/resource.ts'
 import { useTimezone } from '../../api/resources/account.ts'
@@ -8,6 +8,7 @@ import { useCompanies } from '../../api/resources/companies.ts'
 import { usePeople } from '../../api/resources/people.ts'
 import { DataTable } from '../../components/DataTable.tsx'
 import type { Column } from '../../components/DataTable.tsx'
+import { Paginator } from '../../components/Paginator.tsx'
 import { ErrorPanel, LoadingPanel } from '../../components/QueryState.tsx'
 import { SectionHeader } from '../../components/SectionHeader.tsx'
 import { formatDateTime } from '../../lib/dates.ts'
@@ -19,6 +20,10 @@ import { formatDateTime } from '../../lib/dates.ts'
  * same way the Decisions page does it: `api.md` has no include-expansion, and
  * neither list takes a set of bare ids. A record past those pages is still
  * linked, by its type rather than its name, which beats a raw id.
+ *
+ * A row opens `/forms/:id/submissions/:submissionId`. Inline person/company
+ * links still navigate, and stop the row click so opening a person does not
+ * also open the submission.
  */
 
 /** `api.md`: `?limit=` maxes out at 200. */
@@ -30,6 +35,7 @@ export interface SubmissionsTableProps {
 }
 
 export function SubmissionsTable({ form, submissions }: SubmissionsTableProps): React.JSX.Element {
+  const navigate = useNavigate()
   const people = usePeople({ limit: MAX_PAGE })
   const companies = useCompanies({ limit: MAX_PAGE })
   const timezone = useTimezone()
@@ -65,17 +71,33 @@ export function SubmissionsTable({ form, submissions }: SubmissionsTableProps):
       ),
     },
     {
-      key: 'deal',
-      header: 'Deal',
-      className: 'w-24',
-      render: (submission) =>
-        submission.dealId === null ? (
-          <span className="text-ink-faint">—</span>
-        ) : (
-          <Link to={`/deals/${submission.dealId}`} className="text-accent hover:underline">
-            View
-          </Link>
-        ),
+      key: 'created',
+      header: 'Created',
+      className: 'w-40',
+      render: (submission) => (
+        <div className="flex flex-wrap gap-2 text-[12px]">
+          <CreatedLink to={`/deals/${submission.dealId ?? ''}`} id={submission.dealId} label="deal" />
+          <CreatedLink
+            to={`/opportunities/${submission.opportunityId ?? ''}`}
+            id={submission.opportunityId}
+            label="opp"
+          />
+          <CreatedLink
+            to={`/partnerships/${submission.partnershipId ?? ''}`}
+            id={submission.partnershipId}
+            label="prt"
+          />
+          {submission.dealId === null &&
+            submission.opportunityId === null &&
+            submission.partnershipId === null && <span className="text-ink-faint">—</span>}
+        </div>
+      ),
+    },
+    {
+      key: 'actions',
+      header: 'Actions',
+      className: 'w-32',
+      render: (submission) => <ActionLogChip entries={submission.actionLog} />,
     },
     {
       key: 'answers',
@@ -98,28 +120,74 @@ export function SubmissionsTable({ form, submissions }: SubmissionsTableProps):
     <div>
       <SectionHeader
         title="Submissions"
-        description="Inbound answers, and the records each one created or matched."
+        description="Inbound answers, and the records each one created or matched. Click a row to open it."
       />
+      <Paginator list={submissions} placement="top" />
       <DataTable
         columns={columns}
         rows={submissions.records}
         getRowId={(submission) => submission.id}
         emptyMessage="No submissions yet"
+        onRowClick={(submission) => {
+          void navigate(`/forms/${form.id}/submissions/${submission.id}`)
+        }}
       />
-      {submissions.hasMore && (
-        <button
-          type="button"
-          onClick={submissions.loadMore}
-          disabled={submissions.isLoadingMore}
-          className="mt-3 rounded-md border border-border px-3 py-1.5 text-[12px] font-medium text-ink transition hover:border-border-strong hover:bg-surface-sunken disabled:opacity-50"
-        >
-          {submissions.isLoadingMore ? 'Loading…' : 'Load more'}
-        </button>
-      )}
+      <Paginator list={submissions} />
     </div>
   )
 }
 
+function CreatedLink({
+  to,
+  id,
+  label,
+}: {
+  readonly to: string
+  readonly id: string | null
+  readonly label: string
+}): React.JSX.Element | null {
+  if (id === null) {
+    return null
+  }
+
+  return (
+    <Link
+      to={to}
+      className="text-accent hover:underline"
+      onClick={(event) => {
+        event.stopPropagation()
+      }}
+    >
+      {label}
+    </Link>
+  )
+}
+
+function ActionLogChip({
+  entries,
+}: {
+  readonly entries: readonly FormSubmissionActionEntry[]
+}): React.JSX.Element {
+  if (entries.length === 0) {
+    return <span className="text-ink-faint">—</span>
+  }
+
+  const errors = entries.filter((entry) => entry.status === 'error').length
+  const skipped = entries.filter((entry) => entry.status === 'skipped').length
+  const ok = entries.length - errors - skipped
+  const detail = entries
+    .map((entry) => `${entry.action}: ${entry.status}${entry.detail.length > 0 ? ` — ${entry.detail}` : ''}`)
+    .join('\n')
+
+  return (
+    <span title={detail} className="inline-flex gap-1 font-mono text-[11px] text-ink-muted">
+      {ok > 0 && <span className="text-success">✓{ok}</span>}
+      {skipped > 0 && <span className="text-ink-faint">−{skipped}</span>}
+      {errors > 0 && <span className="text-danger">!{errors}</span>}
+    </span>
+  )
+}
+
 function RecordLink({
   to,
   id,
@@ -136,12 +204,30 @@ function RecordLink({
   }
 
   return (
-    <Link to={`${to}/${id}`} className="text-accent hover:underline">
+    <Link
+      to={`${to}/${id}`}
+      className="text-accent hover:underline"
+      onClick={(event) => {
+        event.stopPropagation()
+      }}
+    >
       {name.get(id) ?? fallback}
     </Link>
   )
 }
 
+/**
+ * Every target whose answer the row already shows in its own column: the Person
+ * link. A form asks for a name as one box or as a first and last pair, and
+ * either way the answers are what the Person column is already displaying.
+ */
+const PERSON_COLUMN_TARGETS: ReadonlySet<string> = new Set([
+  'person.name',
+  'person.first_name',
+  'person.last_name',
+  'person.email',
+])
+
 /**
  * The first two answers that are not already a column.
  *
@@ -151,7 +237,7 @@ function RecordLink({
  */
 function summarise(form: Form, submission: FormSubmission): string {
   const parts = form.fields
-    .filter((field) => field.mapTo !== 'person.name' && field.mapTo !== 'person.email')
+    .filter((field) => !PERSON_COLUMN_TARGETS.has(field.mapTo))
     .map((field) => {
       const answer = submission.answers[field.id]
 

package/src/pages/forms/fieldList.ts

@@ -1,11 +1,12 @@
 import {
   FORM_FIELD_MAP_TARGETS,
   FORM_FIELD_TYPES,
+  PERSON_CONSENT_TARGET,
   PERSON_EMAIL_TARGET,
 } from '@kelpie/schemas'
 import type { Form, FormFieldInput, FormFieldMapTarget, FormFieldType } from '@kelpie/schemas'
 
-import { NEW_SELECT_OPTIONS } from './template.ts'
+import { CRM_FIELD_PRESETS, NEW_SELECT_OPTIONS } from './template.ts'
 
 /**
  * Editing a form's field list, as pure functions over an array.
@@ -42,6 +43,9 @@ export function toEditableFields(form: Form): EditableField[] {
     mapTo: field.mapTo,
     options: field.options.map((option) => ({ ...option })),
     placeholder: field.placeholder,
+    statement: field.statement,
+    consentPurposeIds: [...field.consentPurposeIds],
+    consentPurposeLabels: { ...field.consentPurposeLabels },
   }))
 }
 
@@ -84,9 +88,12 @@ export function editField(
   return fields.map((field) => {
     if (field.id !== id) {
       // Only one field may carry a CRM target, so taking one releases it
-      // wherever it was. `submission` is the target that may repeat.
+      // wherever it was. `submission` and `person.consent` are the targets
+      // that may repeat — consent's uniqueness is per purpose, not per
+      // target, and is enforced when the purpose is picked.
       return change.mapTo !== undefined &&
         change.mapTo !== 'submission' &&
+        change.mapTo !== PERSON_CONSENT_TARGET &&
         field.mapTo === change.mapTo
         ? { ...field, mapTo: 'submission' }
         : field
@@ -94,6 +101,19 @@ export function editField(
 
     const next: EditableField = { ...field, ...change }
 
+    // A consent or notice field must map to person.consent; anything else
+    // clears any lingering purpose list.
+    const isConsentLike = next.type === 'consent' || next.type === 'notice'
+    if (isConsentLike && next.mapTo !== PERSON_CONSENT_TARGET) {
+      return { ...withoutOptions(next), mapTo: PERSON_CONSENT_TARGET }
+    }
+    if (next.mapTo === PERSON_CONSENT_TARGET && !isConsentLike) {
+      return { ...withoutOptions(next), type: 'consent' }
+    }
+    if (!isConsentLike && (next.consentPurposeIds ?? []).length > 0) {
+      return withoutOptions({ ...next, consentPurposeIds: [] })
+    }
+
     if (next.type !== 'select') {
       return withoutOptions(next)
     }
@@ -166,6 +186,7 @@ export function findProblems(
   const list: string[] = []
   const byField = new Map<string, string>()
   const seen = new Set<FormFieldMapTarget>()
+  const usedConsentPurposes = new Set<string>()
 
   if (!fields.some((field) => field.mapTo === PERSON_EMAIL_TARGET)) {
     list.push(`One field must map to ${PERSON_EMAIL_TARGET}, or no submission can be processed.`)
@@ -176,7 +197,34 @@ export function findProblems(
   }
 
   for (const field of fields) {
-    if (field.mapTo !== 'submission') {
+    if (field.mapTo === PERSON_CONSENT_TARGET) {
+      const purposes = field.consentPurposeIds ?? []
+      if (field.type === 'notice' && (field.statement ?? '').trim().length === 0) {
+        byField.set(field.id, 'A notice field needs a statement.')
+      }
+      if (purposes.length === 0) {
+        byField.set(
+          field.id,
+          field.type === 'notice'
+            ? 'Pick at least one purpose this notice grants implicitly.'
+            : 'Pick at least one consent purpose this field offers.',
+        )
+      } else {
+        const localSeen = new Set<string>()
+        for (const purposeId of purposes) {
+          if (localSeen.has(purposeId)) {
+            byField.set(field.id, 'This field lists a purpose twice.')
+            break
+          }
+          localSeen.add(purposeId)
+          if (usedConsentPurposes.has(purposeId)) {
+            byField.set(field.id, 'Another consent field already offers this purpose.')
+          } else {
+            usedConsentPurposes.add(purposeId)
+          }
+        }
+      }
+    } else if (field.mapTo !== 'submission') {
       if (seen.has(field.mapTo)) {
         byField.set(field.id, `Another field already maps to ${field.mapTo}.`)
       }
@@ -203,7 +251,22 @@ export function isUsable(problems: FieldListProblems): boolean {
   return problems.list.length === 0 && problems.byField.size === 0
 }
 
-/** The types a mapping can sensibly render as. Choosing `person.email` implies an email input. */
+/** The types a mapping can sensibly render as. */
 export function typeForTarget(target: FormFieldMapTarget, current: FormFieldType): FormFieldType {
-  return target === PERSON_EMAIL_TARGET ? 'email' : current
+  if (target === PERSON_EMAIL_TARGET) return 'email'
+  if (target === PERSON_CONSENT_TARGET) {
+    return current === 'notice' ? 'notice' : 'consent'
+  }
+  return current === 'consent' || current === 'notice' ? 'text' : current
+}
+
+/**
+ * The CRM presets whose mapping no current field carries: what "Add field" may
+ * still offer. A CRM target may appear once, so a preset leaves the menu the
+ * moment a field takes its target and returns when that field releases it.
+ */
+export function unusedCrmPresets(fields: readonly EditableField[]): readonly FormFieldInput[] {
+  const used = new Set(fields.map((field) => field.mapTo))
+
+  return CRM_FIELD_PRESETS.filter((preset) => !used.has(preset.mapTo))
 }

package/src/pages/forms/template.ts

@@ -35,3 +35,106 @@ export const NEW_SELECT_OPTIONS = [
   { key: 'option_a', value: 'Option A', valueType: 'string' as const },
   { key: 'option_b', value: 'Option B', valueType: 'string' as const },
 ]
+
+/**
+ * One ready-made field per CRM mapping target, in the target enum's order.
+ *
+ * "Add field" offers these so adding the company field is one click, not
+ * add-then-configure. Only one field may carry a CRM target, so the menu shows
+ * each preset only while its target is free — `unusedCrmPresets` in
+ * `fieldList.ts` does that filtering.
+ */
+export const CRM_FIELD_PRESETS: readonly FormFieldInput[] = [
+  { label: 'Name', type: 'text', required: false, mapTo: 'person.name', placeholder: 'Your name' },
+  // The other way to ask for a name. A form takes one box or this pair; the
+  // menu hides whichever is already mapped, so both are offered and neither
+  // ends up used twice.
+  {
+    label: 'First name',
+    type: 'text',
+    required: false,
+    mapTo: 'person.first_name',
+    placeholder: 'First name',
+  },
+  {
+    label: 'Last name',
+    type: 'text',
+    required: false,
+    mapTo: 'person.last_name',
+    placeholder: 'Last name',
+  },
+  {
+    label: 'Email',
+    type: 'email',
+    required: true,
+    mapTo: 'person.email',
+    placeholder: 'you@company.com',
+  },
+  { label: 'Company', type: 'text', required: false, mapTo: 'company.name', placeholder: 'Company name' },
+  {
+    label: 'Company website',
+    type: 'text',
+    required: false,
+    mapTo: 'company.domain',
+    placeholder: 'company.com',
+  },
+  { label: 'Job title', type: 'text', required: false, mapTo: 'position.title', placeholder: 'Your role' },
+  { label: 'Enquiry name', type: 'text', required: false, mapTo: 'enquiry.name', placeholder: null },
+  { label: 'Deal name', type: 'text', required: false, mapTo: 'deal.name', placeholder: null },
+  { label: 'Opportunity name', type: 'text', required: false, mapTo: 'opportunity.name', placeholder: null },
+  { label: 'Partnership name', type: 'text', required: false, mapTo: 'partnership.name', placeholder: null },
+]
+
+/** A submission-only entry in the "Add field" menu: shown by control, not by mapping. */
+export interface SubmissionFieldPreset {
+  /** What the menu shows. The field itself starts with its own label. */
+  readonly menuLabel: string
+  readonly field: FormFieldInput
+}
+
+/** The submission-only fields "Add field" always offers; they may repeat freely. */
+export const SUBMISSION_FIELD_PRESETS: readonly SubmissionFieldPreset[] = [
+  { menuLabel: 'Text', field: NEW_FIELD },
+  {
+    menuLabel: 'Text area',
+    field: { label: 'Message', type: 'textarea', required: false, mapTo: 'submission', placeholder: null },
+  },
+  {
+    menuLabel: 'Select',
+    field: {
+      label: 'New select',
+      type: 'select',
+      required: false,
+      mapTo: 'submission',
+      placeholder: null,
+      options: NEW_SELECT_OPTIONS,
+    },
+  },
+  {
+    menuLabel: 'Consent',
+    field: {
+      label: 'Consent',
+      type: 'consent',
+      required: false,
+      mapTo: 'person.consent',
+      placeholder: null,
+      statement: 'Please tell us how we can contact you.',
+      consentPurposeIds: [],
+      consentPurposeLabels: {},
+    },
+  },
+  {
+    menuLabel: 'Notice',
+    field: {
+      label: 'Privacy notice',
+      type: 'notice',
+      required: false,
+      mapTo: 'person.consent',
+      placeholder: null,
+      statement:
+        'By submitting this form you agree to us storing your information and using it to contact you about your enquiry.',
+      consentPurposeIds: [],
+      consentPurposeLabels: {},
+    },
+  },
+]