@kelpie/ui 0.7.0 → 0.9.0

package/src/pages/admin/WorkspaceSettingsPage.tsx

@@ -1,14 +1,21 @@
-import type { Workspace } from '@kelpie/schemas'
-import { useState } from 'react'
+import type { Company, Workspace } from '@kelpie/schemas'
+import { useMemo, useState } from 'react'
 import type { FormEvent, ReactNode } from 'react'
 import { useNavigate } from 'react-router'
 
+import {
+  useCompanies,
+  useCreateCompany,
+  useUpdateCompany,
+} from '../../api/resources/companies.ts'
 import { useSession } from '../../api/resources/session.ts'
 import {
   useDeleteWorkspace,
   useUpdateWorkspace,
   useWorkspace,
 } from '../../api/resources/workspace.ts'
+import { EntitySearch } from '../../components/EntitySearch.tsx'
+import type { SearchOption } from '../../components/EntitySearch.tsx'
 import { PageHeader } from '../../components/PageHeader.tsx'
 import { ErrorPanel, LoadingPanel } from '../../components/QueryState.tsx'
 
@@ -190,11 +197,136 @@ function WorkspaceSettingsForm({
         )}
       </form>
 
+      <OwnCompanySection canEdit={canEdit} />
+
       {session?.role === 'owner' && <DangerZone slug={workspace.slug} />}
     </div>
   )
 }
 
+/**
+ * Mark one or more Companies as "us" — the workspace's own organisation.
+ *
+ * Backed by `companies.is_own`. Zero or many rows may carry it (a parent and a
+ * subsidiary is the intended case), so the surface is a list plus an add
+ * picker rather than a single-select. Picking a name that does not exist
+ * creates the Company with `is_own: true` in one call.
+ */
+function OwnCompanySection({ canEdit }: { readonly canEdit: boolean }): React.JSX.Element {
+  const own = useCompanies({ isOwn: true })
+  const [search, setSearch] = useState('')
+  // The picker's options: workspace companies that are NOT already marked.
+  // Server-side search on the term the user types.
+  const searchable = useCompanies({
+    isOwn: false,
+    term: search.trim().length > 0 ? search.trim() : undefined,
+  })
+  const update = useUpdateCompany()
+  const create = useCreateCompany()
+
+  const options: SearchOption[] = useMemo(
+    () =>
+      searchable.records.map((company) => ({
+        id: company.id,
+        label: company.name,
+        meta: company.domain ?? undefined,
+      })),
+    [searchable.records],
+  )
+
+  function mark(companyId: string): void {
+    update.run({ id: companyId, changes: { isOwn: true } })
+  }
+
+  function unmark(companyId: string): void {
+    update.run({ id: companyId, changes: { isOwn: false } })
+  }
+
+  function createAndMark(name: string): void {
+    // The API defaults every other field; `is_own: true` lands the row in the
+    // list this section shows and nowhere else.
+    create.run({ name, isOwn: true })
+    setSearch('')
+  }
+
+  const busy = update.isPending || create.isPending
+
+  return (
+    <section className="space-y-3 rounded-lg border border-border bg-surface p-4">
+      <div>
+        <h2 className="text-[13px] font-semibold text-ink">This company</h2>
+        <p className="mt-1 max-w-xl text-[12px] text-ink-muted">
+          Mark the company (or companies) in the CRM that represent this workspace itself. Used
+          later to separate own records from prospects.
+        </p>
+      </div>
+
+      {own.isLoading ? (
+        <p className="text-[12px] text-ink-faint">Loading…</p>
+      ) : own.records.length === 0 ? (
+        <p className="text-[12px] text-ink-faint">Nothing marked yet.</p>
+      ) : (
+        <ul className="divide-y divide-border rounded-md border border-border">
+          {own.records.map((company: Company) => (
+            <li
+              key={company.id}
+              className="flex items-center justify-between gap-3 px-3 py-2.5"
+            >
+              <div className="min-w-0">
+                <div className="truncate text-[13px] font-medium text-ink">{company.name}</div>
+                {company.domain !== null && company.domain.length > 0 && (
+                  <div className="truncate text-[11px] text-ink-faint">{company.domain}</div>
+                )}
+              </div>
+              {canEdit && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    unmark(company.id)
+                  }}
+                  disabled={busy}
+                  className="shrink-0 rounded-md border border-border bg-surface-raised px-2.5 py-1 text-[11px] font-medium text-ink hover:border-danger hover:text-danger disabled:opacity-50"
+                >
+                  Unmark
+                </button>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {canEdit && (
+        <div className="max-w-md">
+          <label className="mb-1.5 block text-[12px] font-medium text-ink">
+            {own.records.length === 0 ? 'Pick or create' : 'Add another'}
+          </label>
+          <EntitySearch
+            options={options}
+            value=""
+            onChange={mark}
+            onQueryChange={setSearch}
+            onCreate={createAndMark}
+            createLabel={(query) => `Create “${query}” and mark it`}
+            placeholder="Search companies…"
+            emptyMessage="No matches — type a new name to create one"
+          />
+        </div>
+      )}
+
+      {update.error !== null && (
+        <div className="max-w-xl">
+          <ErrorPanel error={update.error} />
+        </div>
+      )}
+      {create.error !== null && (
+        <div className="max-w-xl">
+          <ErrorPanel error={create.error} />
+        </div>
+      )}
+    </section>
+  )
+}
+
 /**
  * Deleting the workspace, behind the workspace's own name.
  *

package/src/pages/dashboard/attention.ts

@@ -28,6 +28,7 @@ const ROUTES: Readonly<Record<RecordTargetType, string | undefined>> = {
   opportunity: '/opportunities',
   partnership: '/partnerships',
   raise: '/fundraising',
+  enquiry: '/enquiries',
   candidate: undefined,
 }
 
@@ -38,6 +39,7 @@ const TARGET_TYPE_LABELS: Readonly<Record<RecordTargetType, string>> = {
   opportunity: 'Opportunity',
   partnership: 'Partnership',
   raise: 'Fundraising',
+  enquiry: 'Enquiry',
   candidate: 'Candidate',
 }
 
@@ -147,6 +149,7 @@ function plural(count: number, singular: string, pluralForm = `${singular}s`): s
 const OPEN_PIPELINE_NOUNS: Readonly<
   Record<PipelineKind, { readonly one: string; readonly many: string }>
 > = {
+  enquiry: { one: 'enquiry', many: 'enquiries' },
   deal: { one: 'deal', many: 'deals' },
   opportunity: { one: 'opportunity', many: 'opportunities' },
   raise: { one: 'raise', many: 'raises' },

package/src/pages/forms/AddFieldMenu.tsx

@@ -0,0 +1,121 @@
+import { FORM_FIELD_MAP_TARGET_LABELS } from '@kelpie/schemas'
+import type { FormFieldInput } from '@kelpie/schemas'
+import { useEffect, useRef, useState } from 'react'
+
+import { unusedCrmPresets } from './fieldList.ts'
+import type { EditableField } from './fieldList.ts'
+import { SUBMISSION_FIELD_PRESETS } from './template.ts'
+
+/**
+ * The "Add field" button and its menu of ready-made fields.
+ *
+ * Two groups. CRM presets carry a mapping and appear only while that mapping is
+ * free, because a form may carry each CRM target once. Submission-only fields
+ * always appear and may repeat. The menu owns nothing but its own open state:
+ * the field list lives with the builder, which is what `onAdd` hands the chosen
+ * preset back to.
+ */
+export interface AddFieldMenuProps {
+  readonly fields: readonly EditableField[]
+  readonly onAdd: (field: FormFieldInput) => void
+}
+
+export function AddFieldMenu({ fields, onAdd }: AddFieldMenuProps): React.JSX.Element {
+  const [open, setOpen] = useState(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const crmPresets = unusedCrmPresets(fields)
+
+  useEffect(() => {
+    if (!open) {
+      return
+    }
+
+    function onPointerDown(event: MouseEvent): void {
+      if (containerRef.current?.contains(event.target as Node) !== true) {
+        setOpen(false)
+      }
+    }
+
+    function onKeyDown(event: KeyboardEvent): void {
+      if (event.key === 'Escape') {
+        setOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', onPointerDown)
+    document.addEventListener('keydown', onKeyDown)
+
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown)
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [open])
+
+  function add(field: FormFieldInput): void {
+    onAdd(field)
+    setOpen(false)
+  }
+
+  return (
+    <div className="relative" ref={containerRef}>
+      <button
+        type="button"
+        onClick={() => {
+          setOpen((current) => !current)
+        }}
+        aria-expanded={open}
+        aria-haspopup="menu"
+        className="rounded-md bg-accent px-3 py-1.5 text-[12px] font-semibold text-accent-fg transition hover:bg-accent-hover"
+      >
+        + Add field
+      </button>
+      {open && (
+        <div
+          role="menu"
+          aria-label="Field to add"
+          className="absolute right-0 z-20 mt-1.5 max-h-80 w-64 overflow-y-auto rounded-md border border-border bg-surface-raised py-1"
+        >
+          {crmPresets.length > 0 && (
+            <>
+              <p className="px-3 pb-1 pt-1.5 text-[10px] font-semibold uppercase tracking-wide text-ink-faint">
+                Writes to the CRM
+              </p>
+              {crmPresets.map((preset) => (
+                <button
+                  key={preset.mapTo}
+                  type="button"
+                  role="menuitem"
+                  onClick={() => {
+                    add(preset)
+                  }}
+                  className="flex w-full items-center justify-between gap-2 px-3 py-1.5 text-left text-[13px] text-ink transition hover:bg-surface-sunken"
+                >
+                  <span>{preset.label}</span>
+                  <span className="shrink-0 text-[11px] text-ink-faint">
+                    {FORM_FIELD_MAP_TARGET_LABELS[preset.mapTo]}
+                  </span>
+                </button>
+              ))}
+            </>
+          )}
+          <p className="px-3 pb-1 pt-1.5 text-[10px] font-semibold uppercase tracking-wide text-ink-faint">
+            Submission only
+          </p>
+          {SUBMISSION_FIELD_PRESETS.map((preset) => (
+            <button
+              key={preset.menuLabel}
+              type="button"
+              role="menuitem"
+              onClick={() => {
+                add(preset.field)
+              }}
+              className="w-full px-3 py-1.5 text-left text-[13px] text-ink transition hover:bg-surface-sunken"
+            >
+              {preset.menuLabel}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/pages/forms/EmbedPanel.tsx

@@ -1,4 +1,5 @@
 import type { Form } from '@kelpie/schemas'
+import { useEffect, useId, useState } from 'react'
 
 import { useFormEmbed } from '../../api/resources/forms.ts'
 import { CopyButton } from '../../components/CopyButton.tsx'
@@ -12,14 +13,21 @@ import { SectionHeader } from '../../components/SectionHeader.tsx'
  * embed page is served by the service, so its address depends on where the
  * service is reached, which the server knows from the request and the browser
  * only happens to share while the two are same-origin.
+ *
+ * Each iframe snippet has a Preview that opens the bare embed document in a
+ * modal — fields only, the same document the snippet iframes — fixed height for
+ * the plain iframe, auto-resize for the script variant.
  */
 
 export interface EmbedPanelProps {
   readonly form: Form
 }
 
+type PreviewMode = 'fixed' | 'resize'
+
 export function EmbedPanel({ form }: EmbedPanelProps): React.JSX.Element {
   const { snippets, isLoading, error } = useFormEmbed(form.id)
+  const [preview, setPreview] = useState<PreviewMode | null>(null)
 
   if (error !== null) {
     return <ErrorPanel error={error} />
@@ -33,7 +41,7 @@ export function EmbedPanel({ form }: EmbedPanelProps): React.JSX.Element {
     <div className="max-w-2xl space-y-5">
       <SectionHeader
         title="Embed"
-        description="The page below is served by Kelpie, so a site embedding it loads nothing else."
+        description="Hosted page is the standalone URL with Kelpie chrome. The iframe snippets load a bare form — fields only — so they sit inside your own site."
       />
 
       <div>
@@ -57,12 +65,31 @@ export function EmbedPanel({ form }: EmbedPanelProps): React.JSX.Element {
         label="iframe"
         hint="One tag, no JavaScript, fixed height."
         value={snippets.iframeSnippet}
+        onPreview={() => {
+          setPreview('fixed')
+        }}
       />
       <Snippet
         label="iframe with auto-resize"
         hint="Adds a listener that follows the page as fields appear and as the thank-you replaces the form."
         value={snippets.scriptSnippet}
+        onPreview={() => {
+          setPreview('resize')
+        }}
       />
+
+      {preview !== null && (
+        <EmbedPreviewModal
+          formId={form.id}
+          formName={form.name}
+          formTitle={form.title}
+          url={snippets.embedUrl}
+          mode={preview}
+          onClose={() => {
+            setPreview(null)
+          }}
+        />
+      )}
     </div>
   )
 }
@@ -71,16 +98,27 @@ function Snippet({
   label,
   hint,
   value,
+  onPreview,
 }: {
   readonly label: string
   readonly hint: string
   readonly value: string
+  readonly onPreview: () => void
 }): React.JSX.Element {
   return (
     <div>
       <div className="mb-1.5 flex items-center justify-between gap-2">
         <span className="text-[12px] font-medium text-ink">{label}</span>
-        <CopyButton value={value} label={`Copy the ${label} snippet`} />
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={onPreview}
+            className="rounded-md bg-accent px-3 py-1.5 text-[12px] font-semibold text-accent-fg transition hover:bg-accent-hover"
+          >
+            Preview
+          </button>
+          <CopyButton value={value} label={`Copy the ${label} snippet`} />
+        </div>
       </div>
       <textarea
         readOnly
@@ -93,3 +131,126 @@ function Snippet({
     </div>
   )
 }
+
+/**
+ * Frames the hosted embed the way each snippet would: fixed 720px for the plain
+ * iframe, or listening for the height postMessage when previewing auto-resize.
+ */
+function EmbedPreviewModal({
+  formId,
+  formName,
+  formTitle,
+  url,
+  mode,
+  onClose,
+}: {
+  readonly formId: string
+  readonly formName: string
+  readonly formTitle: string
+  readonly url: string
+  readonly mode: PreviewMode
+  readonly onClose: () => void
+}): React.JSX.Element {
+  const titleId = useId()
+  const heading = formTitle.trim().length > 0 ? formTitle : formName
+  const [height, setHeight] = useState(720)
+
+  useEffect(() => {
+    if (mode !== 'resize') {
+      return
+    }
+
+    function onMessage(event: MessageEvent): void {
+      const data = event.data as { kelpie?: string; formId?: string; height?: number } | null
+
+      if (
+        data === null ||
+        typeof data !== 'object' ||
+        data.kelpie !== 'height' ||
+        data.formId !== formId ||
+        typeof data.height !== 'number' ||
+        !Number.isFinite(data.height)
+      ) {
+        return
+      }
+
+      setHeight(Math.max(320, Math.ceil(data.height)))
+    }
+
+    window.addEventListener('message', onMessage)
+
+    return () => {
+      window.removeEventListener('message', onMessage)
+    }
+  }, [formId, mode])
+
+  useEffect(() => {
+    function onKeyDown(event: KeyboardEvent): void {
+      if (event.key === 'Escape') {
+        onClose()
+      }
+    }
+
+    window.addEventListener('keydown', onKeyDown)
+
+    return () => {
+      window.removeEventListener('keydown', onKeyDown)
+    }
+  }, [onClose])
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-end justify-center bg-ink/40 p-4 sm:items-center"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={titleId}
+      onClick={onClose}
+    >
+      <div
+        className="animate-slide-in flex max-h-[90vh] w-full max-w-lg flex-col overflow-hidden rounded-md border border-border bg-surface-raised shadow-lg"
+        onClick={(event) => {
+          event.stopPropagation()
+        }}
+      >
+        <div className="flex shrink-0 items-start justify-between gap-3 border-b border-border px-4 py-3">
+          <div className="min-w-0">
+            <h2 id={titleId} className="truncate text-[14px] font-semibold text-ink">
+              Preview · {heading}
+            </h2>
+            <p className="mt-0.5 text-[11px] text-ink-faint">
+              {mode === 'resize'
+                ? 'Bare iframe embed with auto-resize — fields only, height follows the form.'
+                : 'Bare iframe embed — fields only, fixed height.'}
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="shrink-0 rounded-md px-2 py-1 text-[12px] font-medium text-ink-muted transition hover:text-ink"
+          >
+            Close
+          </button>
+        </div>
+
+        <div className="min-h-0 flex-1 overflow-y-auto bg-[#f4f4f5] p-4">
+          <div className="overflow-hidden rounded-md border border-[#d4d4d8] bg-white shadow-sm">
+            <iframe
+              src={url}
+              title={`${heading} preview`}
+              style={{
+                width: '100%',
+                border: 0,
+                height: mode === 'fixed' ? '720px' : `${String(height)}px`,
+                colorScheme: 'normal',
+              }}
+              className="block bg-transparent"
+            />
+          </div>
+          <p className="mt-2 text-center text-[11px] text-ink-faint">
+            Simulated host page — the iframe uses its own neutral styles, not Kelpie&apos;s.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}