@flamingo-stack/openframe-frontend-core 0.0.596-2034.5685.1 → 0.0.596-2034.5686.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.596-2034.5685.1",
+  "version": "0.0.596-2034.5686.1",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/__tests__/booking-form-field-rows.test.tsx

@@ -1,12 +1,7 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
-import {
-  BookingForm,
-  type BookingFieldRow,
-  type BookingFormConsent,
-  evenSpan,
-} from '../components/meeting-scheduler/booking-form';
-import { availabilityWith, bookingFormBaseProps, fillIdentity, typeInto } from './fixtures/meeting-booking';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { type BookingFormConsent, evenSpan } from '../components/meeting-scheduler/booking-form';
+import { availabilityWith, fillIdentity, mountBookingForm, typeInto } from './fixtures/meeting-booking';
 
 // The consent row's checkbox measures itself; jsdom has no ResizeObserver.
 class ResizeObserverStub {
@@ -24,28 +19,16 @@ const availability = availabilityWith([
 const CONSENT_ERROR = 'Please agree to the Privacy Policy to continue.';
 const consent: BookingFormConsent = { label: 'I agree to the Privacy Policy', errorMessage: CONSENT_ERROR };
 
-type Submit = (payload: Record<string, unknown>) => Promise<void>;
-
-function mount(props: {
-  fieldRows?: BookingFieldRow[];
-  consent?: BookingFormConsent;
-  initialValues?: Record<string, unknown>;
-}) {
-  const onSubmit = vi.fn<Submit>(() => Promise.resolve());
-  render(<BookingForm {...bookingFormBaseProps()} availability={availability} onSubmit={onSubmit} {...props} />);
-  return onSubmit;
-}
-
 describe('BookingForm — host fieldRows', () => {
   it('appends built-ins and declared questions no row names, so nothing required goes invisible', () => {
-    mount({ fieldRows: [[{ name: 'firstName' }], [{ name: 'company' }]] });
+    mountBookingForm(availability, { fieldRows: [[{ name: 'firstName' }], [{ name: 'company' }]] });
     expect(screen.getByLabelText(/^Last Name/)).toBeInTheDocument();
     expect(screen.getByLabelText(/^Email/)).toBeInTheDocument();
     expect(screen.getByLabelText(/^Job Title/)).toBeInTheDocument();
   });
 
   it('renders a name placed twice once and drops a row that resolves to nothing', () => {
-    mount({
+    mountBookingForm(availability, {
       fieldRows: [
         [{ name: 'email' }, { name: 'email' }],
         [{ name: 'not_declared_yet' }],
@@ -66,7 +49,7 @@ describe('BookingForm — host fieldRows', () => {
 
 describe('BookingForm — host consent row', () => {
   it('refuses to submit unticked, names why, and carries the tick as hostConsent once ticked', async () => {
-    const onSubmit = mount({ consent });
+    const onSubmit = mountBookingForm(availability, { consent });
     fillIdentity();
     typeInto(screen.getByLabelText(/^Company Name/), 'Acme');
     fireEvent.click(screen.getByRole('button', { name: 'Confirm Booking' }));
@@ -80,7 +63,7 @@ describe('BookingForm — host consent row', () => {
   });
 
   it('restores the tick from initialValues (the details-first stash) on a remount', () => {
-    mount({ consent, initialValues: { hostConsent: true } });
+    mountBookingForm(availability, { consent, initialValues: { hostConsent: true } });
     expect(screen.getByRole('checkbox', { name: /I agree to the Privacy Policy/ })).toHaveAttribute(
       'aria-checked',
       'true',

package/src/__tests__/booking-form-number-field.test.tsx

@@ -1,25 +1,13 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
-import { BookingForm } from '../components/meeting-scheduler/booking-form';
-import { availabilityWith, bookingFormBaseProps, fillIdentity, typeInto } from './fixtures/meeting-booking';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { availabilityWith, fillIdentity, mountBookingForm, typeInto } from './fixtures/meeting-booking';
 
 const availability = availabilityWith([
   { name: 'number_of_endpoints', label: 'Number of endpoints', type: 'number', required: true },
 ]);
 
-type Submit = (payload: Record<string, unknown>) => Promise<void>;
-
-function mount(onSubmit = vi.fn<Submit>(() => Promise.resolve())) {
-  render(
-    <BookingForm
-      {...bookingFormBaseProps()}
-      timezone="America/New_York"
-      availability={availability}
-      onSubmit={onSubmit}
-    />,
-  );
-  return onSubmit;
-}
+/** The form in a zone that is not UTC, so the summary line's formatting is exercised. */
+const mount = () => mountBookingForm(availability, { timezone: 'America/New_York' });
 
 describe('BookingForm — a HubSpot Number question', () => {
   it('renders as a numeric input under the property label', () => {

package/src/__tests__/fixtures/{meeting-booking.ts → meeting-booking.tsx}

@@ -1,5 +1,7 @@
-import { fireEvent, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { createRef } from 'react';
+import { vi } from 'vitest';
+import { BookingForm, type BookingFormProps } from '../../components/meeting-scheduler/booking-form';
 import type { MeetingAvailability, MeetingFormField } from '../../schemas/meeting-booking-schema';
 
 /** One well-formed slot-first payload minus the questions — the base every
@@ -48,3 +50,12 @@ export const fillIdentity = () => {
   typeInto(screen.getByLabelText(/^First Name/), 'Ada');
   typeInto(screen.getByLabelText(/^Last Name/), 'Lovelace');
 };
+
+export type BookingFormSubmit = (payload: Record<string, unknown>) => Promise<void>;
+
+/** Mount a `BookingForm` over `availability` with the base props; returns the submit spy. */
+export function mountBookingForm(availability: MeetingAvailability, props: Partial<BookingFormProps> = {}) {
+  const onSubmit = vi.fn<BookingFormSubmit>(() => Promise.resolve());
+  render(<BookingForm {...bookingFormBaseProps()} availability={availability} onSubmit={onSubmit} {...props} />);
+  return onSubmit;
+}

package/src/components/meeting-scheduler/booking-form.tsx

@@ -100,6 +100,19 @@ const SPAN_CLASS = {
 /** One field's skeleton: label + control footprint. */
 const FIELD_SKELETON_CLASS = 'h-[4.75rem] w-full';
 
+/** The submit copy every standalone `BookingForm` gets; the slot-first preset reads the same constant. */
+export const DEFAULT_SUBMIT_LABEL = 'Confirm Booking';
+
+/** The footer with a note (details-first): note beside the button, wrapping on a phone. */
+const FOOTER_ROW_CLASS = 'flex flex-wrap items-center justify-between gap-[var(--spacing-system-m)]';
+/** The bare footer: the button stays LEFT, where the form's reading order ends. */
+const FOOTER_BARE_CLASS = 'flex';
+/** The submit's width when a note sits beside it. */
+const SUBMIT_WIDE_CLASS = 'md:w-60';
+
+/** The built-in layout when a host passes no rows — what the skeleton draws for it. */
+const DEFAULT_FIELD_ROWS: BookingFieldRow[] = [[{ name: 'email' }], [{ name: 'firstName' }, { name: 'lastName' }]];
+
 /** The even split of four columns over `count` slots; a remainder goes to the
  *  leading slots (three slots → 2/1/1), so a row never leaves a trailing gap. */
 export const evenSpan = (count: number, index: number): BookingFieldSpan => {
@@ -482,25 +495,9 @@ export function BookingForm({
    *  HubSpot nor a built-in the layout forgot can go invisible: the schema still
    *  requires the identity trio, and a required field with no control is a
    *  submit that dies silently. */
-  const placedNames = new Set((fieldRows ?? []).flat().map(slot => slot.name));
-  const unplacedBuiltIns = fieldRows ? BUILT_IN_BOOKING_FIELDS.filter(f => !placedNames.has(f.name)) : [];
+  const { rows: placedRows, unplacedBuiltIns, named: placedNames } = normalizeFieldRows(fieldRows ?? [], slotResolves);
   const unplacedFields = fieldRows ? supportedFields.filter(f => !placedNames.has(f.name)) : [];
 
-  /** Rows whose every slot names a question the link has not declared are
-   *  DROPPED, not rendered empty: an empty grid still eats one form gap, so a
-   *  layout written ahead of the HubSpot config would print blank bands. A name
-   *  placed twice renders once (its first slot) — one registered control per
-   *  field. */
-  const seen = new Set<string>();
-  const placedRows = (fieldRows ?? [])
-    .map(row => {
-      const kept = row.filter(slot => slotResolves(slot.name) && !seen.has(slot.name) && Boolean(seen.add(slot.name)));
-      // Explicit spans were written for the FULL row; once a slot drops out they
-      // would leave a trailing gap, so a shortened row falls back to the even split.
-      return kept.length === row.length ? kept : kept.map((slot): BookingFieldSlot => ({ name: slot.name }));
-    })
-    .filter(row => row.length > 0);
-
   const submitButton = (
     <Button
       type="submit"
@@ -509,9 +506,9 @@ export function BookingForm({
       // The details-first footer draws a 240px action beside its note
       // (`4904:117335`); the bare slot-first row keeps the button at its natural
       // width, as it always has.
-      className={footerNote ? 'md:w-60' : undefined}
+      className={footerNote ? SUBMIT_WIDE_CLASS : undefined}
     >
-      {submitLabel ?? 'Confirm Booking'}
+      {submitLabel ?? DEFAULT_SUBMIT_LABEL}
     </Button>
   );
 
@@ -638,12 +635,12 @@ export function BookingForm({
           the bare `flex` row it has always been, or the submit slides from the
           left edge to the right on every existing slot-first booking. */}
       {footerNote ? (
-        <div className="flex flex-wrap items-center justify-between gap-[var(--spacing-system-m)]">
+        <div className={FOOTER_ROW_CLASS}>
           <p className="text-ods-text-secondary text-h6">{footerNote}</p>
           {submitButton}
         </div>
       ) : (
-        <div className="flex">{submitButton}</div>
+        <div className={FOOTER_BARE_CLASS}>{submitButton}</div>
       )}
     </form>
   );
@@ -661,38 +658,25 @@ export function BookingForm({
 export function BookingFormSkeleton({ fieldRows, footerNote }: { fieldRows?: BookingFieldRow[]; footerNote?: string }) {
   return (
     <div className={cn('flex-1', FORM_STACK)}>
-      {fieldRows ? (
-        // The host's rows through the SAME grid + column rule as the loaded form,
-        // normalised the way the form normalises what it can know without the
-        // link: a name placed twice once, and the built-ins no row names appended.
-        // (Undeclared questions cannot be dropped here — declaring them is what
-        // the availability the skeleton stands in for will tell us.)
-        skeletonRows(fieldRows).map(row => (
-          <div key={row.map(s => s.name).join('|')} className={ROW_GRID}>
-            {row.map((slot, slotIndex) => (
-              <Skeleton key={slot.name} className={cn(FIELD_SKELETON_CLASS, slotColumnClass(row, slot, slotIndex))} />
-            ))}
-          </div>
-        ))
-      ) : (
-        <>
-          <div className="grid grid-cols-1 gap-[var(--spacing-system-m)] md:grid-cols-2">
-            <Skeleton className={FIELD_SKELETON_CLASS} />
-            <Skeleton className={FIELD_SKELETON_CLASS} />
-          </div>
-          <Skeleton className={FIELD_SKELETON_CLASS} />
-          <Skeleton className="h-[7.75rem] w-full" />
-        </>
-      )}
+      {/* The host's rows (or the built-in layout) through the SAME grid, column
+          rule and normalisation as the loaded form — see `normalizeFieldRows`. */}
+      {skeletonRows(fieldRows ?? DEFAULT_FIELD_ROWS).map(row => (
+        <div key={row.map(s => s.name).join('|')} className={ROW_GRID}>
+          {row.map((slot, slotIndex) => (
+            <Skeleton key={slot.name} className={cn(FIELD_SKELETON_CLASS, slotColumnClass(row, slot, slotIndex))} />
+          ))}
+        </div>
+      ))}
+      {/* Without rows there is no telling how many questions the link declares: one long answer stands for them. */}
+      {!fieldRows && <Skeleton className="h-[7.75rem] w-full" />}
       <Skeleton className="h-[4.25rem] w-full" />
       {footerNote ? (
-        // The details-first footer: note beside a 240px button, wrapping on a phone.
-        <div className="flex flex-wrap items-center justify-between gap-[var(--spacing-system-m)]">
+        <div className={FOOTER_ROW_CLASS}>
           <Skeleton className="h-5 min-w-40 flex-1" />
-          <Skeleton className="h-12 w-full md:w-60" />
+          <Skeleton className={cn('h-12 w-full', SUBMIT_WIDE_CLASS)} />
         </div>
       ) : (
-        <div className="flex justify-end">
+        <div className={FOOTER_BARE_CLASS}>
           <Skeleton className="h-12 w-40" />
         </div>
       )}
@@ -700,12 +684,35 @@ export function BookingFormSkeleton({ fieldRows, footerNote }: { fieldRows?: Boo
   );
 }
 
-/** The skeleton's half of the form's row normalisation — see `BookingFormSkeleton`. */
-function skeletonRows(fieldRows: BookingFieldRow[]): BookingFieldRow[] {
+/**
+ * The ONE normalisation of host rows, read by the form and its skeleton.
+ *  - A slot whose name `resolves` to nothing is dropped, and a row left empty is
+ *    dropped with it: an empty grid still eats one form gap, so a layout written
+ *    ahead of the HubSpot config would print blank bands.
+ *  - A name placed twice renders once (its first slot) — one control per field.
+ *  - Explicit spans were written for the FULL row; once a slot drops out they
+ *    would leave a trailing gap, so a shortened row falls back to the even split.
+ *  - Built-ins no row names come back as `unplacedBuiltIns`: the schema still
+ *    requires the identity trio, and a required field with no control is a
+ *    submit that dies silently.
+ * The skeleton has no availability yet, so it passes no `resolves` and keeps
+ * every declared-looking name; that is the one swap it cannot rule out.
+ */
+function normalizeFieldRows(fieldRows: BookingFieldRow[], resolves: (name: string) => boolean = () => true) {
   const seen = new Set<string>();
   const rows = fieldRows
-    .map(row => row.filter(slot => !seen.has(slot.name) && Boolean(seen.add(slot.name))))
+    .map(row => {
+      const kept = row.filter(slot => resolves(slot.name) && !seen.has(slot.name) && Boolean(seen.add(slot.name)));
+      return kept.length === row.length ? kept : kept.map((slot): BookingFieldSlot => ({ name: slot.name }));
+    })
     .filter(row => row.length > 0);
-  const unplacedBuiltIns = BUILT_IN_BOOKING_FIELDS.filter(f => !seen.has(f.name)).map(f => [{ name: f.name }]);
-  return [...rows, ...unplacedBuiltIns];
+  const named = new Set(fieldRows.flat().map(slot => slot.name));
+  const unplacedBuiltIns = BUILT_IN_BOOKING_FIELDS.filter(f => !named.has(f.name));
+  return { rows, unplacedBuiltIns, named };
+}
+
+/** The skeleton's rows: the normalised host rows, then the built-ins none of them named. */
+function skeletonRows(fieldRows: BookingFieldRow[]): BookingFieldRow[] {
+  const { rows, unplacedBuiltIns } = normalizeFieldRows(fieldRows);
+  return [...rows, ...unplacedBuiltIns.map(f => [{ name: f.name }])];
 }

package/src/components/meeting-scheduler/index.tsx

@@ -55,7 +55,7 @@ import {
 import { cn } from '../../utils/cn';
 import { formatDurationCompact } from '../../utils/format';
 import { Alert, AlertDescription, Button } from '../ui';
-import { BookingForm, BookingFormSkeleton, type BookingFormProps } from './booking-form';
+import { BookingForm, BookingFormSkeleton, DEFAULT_SUBMIT_LABEL, type BookingFormProps } from './booking-form';
 import { Confirmation } from './confirmation';
 import { SchedulerContextPanel, ContextPanelSkeleton } from './context-panel';
 import { SlotPicker, SlotPickerSkeleton, dayKeyInZone } from './slot-picker';
@@ -271,7 +271,7 @@ export const SCHEDULER_FLOW_PRESETS: Record<
   SchedulerFlow,
   { initialStep: Exclude<Step, 'confirmed'>; height: string; submitLabel: string; footerNote?: string }
 > = {
-  'slot-first': { initialStep: 'slot', height: MEETING_SCHEDULER_H, submitLabel: 'Confirm Booking' },
+  'slot-first': { initialStep: 'slot', height: MEETING_SCHEDULER_H, submitLabel: DEFAULT_SUBMIT_LABEL },
   'details-first': {
     initialStep: 'details',
     height: MEETING_SCHEDULER_DETAILS_FIRST_H,