@flamingo-stack/openframe-frontend-core 0.0.596-2034.5680.1 → 0.0.596-2034.5684.1

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

@@ -56,18 +56,6 @@ import { cn } from '../../utils/cn';
 import { formatDurationCompact } from '../../utils/format';
 import { Alert, AlertDescription, Button } from '../ui';
 import { BookingForm, BookingFormSkeleton, type BookingFormProps } from './booking-form';
-
-// The override surface: a host builds its `detailsForm` by re-rendering
-// `BookingForm` with `fieldRows`, so it needs both from this entry point (the
-// package exports `./components/meeting-scheduler`, not the file beneath it).
-export {
-  BookingForm,
-  BookingFormSkeleton,
-  type BookingFormProps,
-  type BookingFieldRow,
-  type BookingFieldSlot,
-  type BookingFormConsent,
-} from './booking-form';
 import { Confirmation } from './confirmation';
 import { SchedulerContextPanel, ContextPanelSkeleton } from './context-panel';
 import { SlotPicker, SlotPickerSkeleton, dayKeyInZone } from './slot-picker';
@@ -261,8 +249,7 @@ export const MEETING_SCHEDULER_H = 'md:h-[34.375rem] lg:h-[23.75rem]';
  * tablet and desktop, and the calendar stage fits the same box at both — the
  * times column scrolls inside it as it always has.
  *
- * A host reserving the box for a details-first card reserves THIS, not the
- * constant above.
+ * Hosts read it through `SCHEDULER_FLOW_PRESETS[flow].height`, never directly.
  */
 export const MEETING_SCHEDULER_DETAILS_FIRST_H = 'md:h-[39.875rem]';
 
@@ -277,9 +264,9 @@ export type SchedulerFlow = 'slot-first' | 'details-first';
  */
 export const SCHEDULER_FLOW_PRESETS: Record<
   SchedulerFlow,
-  { initialStep: 'slot' | 'details'; height: string; submitLabel?: string; footerNote?: string }
+  { initialStep: Exclude<Step, 'confirmed'>; height: string; submitLabel: string; footerNote?: string }
 > = {
-  'slot-first': { initialStep: 'slot', height: MEETING_SCHEDULER_H },
+  'slot-first': { initialStep: 'slot', height: MEETING_SCHEDULER_H, submitLabel: 'Confirm Booking' },
   'details-first': {
     initialStep: 'details',
     height: MEETING_SCHEDULER_DETAILS_FIRST_H,
@@ -292,7 +279,7 @@ export const SCHEDULER_FLOW_PRESETS: Record<
  * The two-panel card's box, shared verbatim by the loading skeleton and the
  * loaded card so neither can drift from the other.
  *
- * Both heights come from {@link MEETING_SCHEDULER_H}; what this adds is the
+ * The height is applied per flow (`SCHEDULER_FLOW_PRESETS[flow].height`); what this adds is the
  * flex column that makes them work. On TABLET the height is stated for the
  * same reason the desktop one is: a CEILING only pins the tall stages. The short ones — the empty
  * month ("No available times in September"), a five-week month, the cold-start
@@ -319,7 +306,7 @@ const CARD_CLASS = cn(
   'overflow-hidden rounded-md border border-ods-border bg-ods-card',
   'md:flex md:flex-col',
   // The height is NOT baked in any more: it is chosen per flow at each render
-  // site (`flowHeight`), because details-first needs a taller box and both
+  // site (`cardClass`), because details-first needs a taller box and both
   // constants are module scope.
 );
 
@@ -349,13 +336,25 @@ const CARD_DEGRADED_CLASS = cn(
 export function SchedulerDegradedCard({
   flow = 'slot-first',
   className,
+  message,
+  action,
   children,
 }: {
   flow?: SchedulerFlow;
   className?: string;
-  children: ReactNode;
+  /** The one line the stage says, in the card's own type — so a host's fallback never picks a different scale. */
+  message?: string;
+  /** The one way out (the escape hatch, or a host's own link). */
+  action?: ReactNode;
+  children?: ReactNode;
 }) {
-  return <div className={cn(CARD_DEGRADED_CLASS, SCHEDULER_FLOW_PRESETS[flow].height, className)}>{children}</div>;
+  return (
+    <div className={cn(CARD_DEGRADED_CLASS, SCHEDULER_FLOW_PRESETS[flow].height, className)}>
+      {message && <p className="text-ods-text-secondary text-h6">{message}</p>}
+      {action}
+      {children}
+    </div>
+  );
 }
 
 /**
@@ -434,6 +433,12 @@ export function HubSpotMeetingScheduler({
   const [stash, setStash] = useState<StashedDetails | null>(null);
   /** Synchronous in-flight lock for the details-first slot click — see `onSelectSlot`. */
   const inFlightRef = useRef(false);
+  /** details-first: a slot's POST is in flight. The ref covers the frame before
+   *  `isSubmitting` renders true, so every guard reads both. */
+  const postInFlight = useCallback(
+    () => detailsFirst && (isSubmitting || inFlightRef.current),
+    [detailsFirst, isSubmitting],
+  );
 
   /**
    * details-first step ONE is the form and nothing else — the mock
@@ -531,12 +536,14 @@ export function HubSpotMeetingScheduler({
       durationMs != null &&
       slots.length === 0 &&
       availability.hasMore &&
-      autoAdvanceCount.current < 3
+      autoAdvanceCount.current < 3 &&
+      // Not while a chip's POST is in flight — paging would unmount it.
+      !postInFlight()
     ) {
       autoAdvanceCount.current += 1;
       setMonthOffset(monthOffset + 1);
     }
-  }, [step, availability, isFetchingAvailability, durationMs, slots, monthOffset, setMonthOffset]);
+  }, [step, availability, isFetchingAvailability, durationMs, slots, monthOffset, setMonthOffset, postInFlight]);
 
   /** The back edge's destination from the form: the calendar, with any
    *  submit error cleared so the visitor doesn't carry it back. */
@@ -551,6 +558,10 @@ export function HubSpotMeetingScheduler({
     // Not while a slot's POST is in flight — the step must stay on the
     // calendar the spinner lives on until the result routes it.
     if (inFlightRef.current) return;
+    // No slot rides back to the form: in this flow the form never legitimately
+    // holds one (the slot IS the submit), and a chip the server rejected with a
+    // slot-step toast would otherwise print in the form's summary line.
+    setSelectedSlot(null);
     setStep('details');
     setBookingError(null);
   }, []);
@@ -654,17 +665,13 @@ export function HubSpotMeetingScheduler({
    * last-wins, so appending it after would make a host's own `h-*` unreachable,
    * which is the override the height-inside-CARD_CLASS arrangement allows today.
    */
-  const flowHeight = preset.height;
-
-  /** One card SHAPE for both degraded returns below. */
-  const degradedCard = (
-    <SchedulerDegradedCard flow={flow} className={className}>
-      <p className="text-ods-text-secondary text-h6">
-        We couldn&apos;t load available call times. Please try again shortly.
-      </p>
-      {escapeHatch}
-    </SchedulerDegradedCard>
+  const cardClass = cn(CARD_CLASS, preset.height, formOnly && 'bg-ods-bg', className);
+
+  /** One card SHAPE for every degraded return below. */
+  const degraded = (message: string) => (
+    <SchedulerDegradedCard flow={flow} className={className} message={message} action={escapeHatch} />
   );
+  const degradedCard = degraded("We couldn't load available call times. Please try again shortly.");
 
   if (isLoadingAvailability && !availability) {
     // COLD start only — a month already in the query cache renders straight
@@ -672,7 +679,7 @@ export function HubSpotMeetingScheduler({
     // (`ContextPanelSkeleton` beside the real slot-area layout), so nothing
     // shifts when it swaps.
     return (
-      <div className={cn(CARD_CLASS, flowHeight, formOnly && 'bg-ods-bg', className)}>
+      <div className={cardClass}>
         <div className={CARD_INNER_CLASS}>
           {!formOnly && <ContextPanelSkeleton onBack={onBack} className={CONTEXT_PANEL_CLASS} />}
           <div className={ACTION_PANEL_CLASS}>
@@ -681,7 +688,11 @@ export function HubSpotMeetingScheduler({
                 Continue (which happens at `step === 'slot'`) would swap the
                 calendar out for a form skeleton and back. */}
             {detailsFirst && step === 'details' ? (
-              <BookingFormSkeleton />
+              // The SAME wrapper the loaded form gets, so the skeleton never
+              // states its own inset.
+              <div className={cn('flex flex-1 flex-col', PANEL_STEP_CLASS)}>
+                <BookingFormSkeleton fieldRows={detailsFormProps?.fieldRows} />
+              </div>
             ) : (
               <SlotPickerSkeleton monthOffset={monthOffset} />
             )}
@@ -696,18 +707,13 @@ export function HubSpotMeetingScheduler({
   if (!isNativelyBookable(availability)) {
     // Fail closed — never render a half-working native form on a link with
     // questions or consent we can't faithfully reproduce.
-    return (
-      <SchedulerDegradedCard flow={flow} className={className}>
-        <p className="text-ods-text-secondary text-h6">This meeting type is booked directly on HubSpot.</p>
-        {escapeHatch}
-      </SchedulerDegradedCard>
-    );
+    return degraded('This meeting type is booked directly on HubSpot.');
   }
 
   // ---- the card ------------------------------------------------------------
 
   return (
-    <div className={cn(CARD_CLASS, flowHeight, formOnly && 'bg-ods-bg', className)}>
+    <div className={cardClass}>
       <div className={CARD_INNER_CLASS}>
         {!formOnly && (
           <SchedulerContextPanel
@@ -733,16 +739,19 @@ export function HubSpotMeetingScheduler({
             // host gave us an exit at all). Two Backs on screen reading the same
             // word with different destinations was the ambiguity the details
             // step used to carry.
-            // details-first inverts the mapping: the form is step ONE, so Back at
-            // `details` is the host's exit and Back at `slot` returns to the form.
+            // details-first inverts the mapping: Back at `slot` returns to the
+            // form. At `details` the form-only layout mounts no panel, so a host
+            // exit is not rendered there (the page around the card is the exit).
             onBack={
               detailsFirst ? (step === 'slot' ? backToDetails : onBack) : step === 'details' ? backToSlot : onBack
             }
-            // In details-first the duration/zone selectors stay live while the
-            // form is filled — but must freeze once a POST is in flight, or a
-            // mid-flight change clears the slot under the spinner while the body
-            // already built carries the old duration.
-            locked={detailsFirst ? step === 'confirmed' || isSubmitting : step !== 'slot'}
+            // `locked` HIDES the selectors (post-selection steps); `disabled`
+            // keeps them mounted but inert. details-first needs the second while
+            // a POST is in flight: a mid-flight change would clear the slot
+            // under the spinner while the body already built carries the old
+            // duration — and unmounting the row would shift the grid under it.
+            locked={detailsFirst ? step === 'confirmed' : step !== 'slot'}
+            disabled={detailsFirst && isSubmitting}
             // The zone still governs every time on screen — including the
             // summary line on the form — so the picker stays until there is
             // nothing left to re-read in it.
@@ -768,7 +777,7 @@ export function HubSpotMeetingScheduler({
               : durationMs != null && selectedSlot != null && timezone) ? (
             <div className={cn('flex flex-1 flex-col gap-[var(--spacing-system-m)]', PANEL_STEP_CLASS)}>
               {/* Top-aligned, and no back edge of its own: the ONE back edge
-                  lives in the context panel at every step (see `contextBack`),
+                  lives in the context panel at every step (the `onBack` wired on `SchedulerContextPanel`),
                   which is where the design puts it and the only spot that
                   stays put while this side swaps between calendar and form.
 
@@ -830,9 +839,7 @@ export function HubSpotMeetingScheduler({
                   onMonthOffsetChange={o => {
                     // details-first: a POST is in flight from this grid; paging
                     // would clear the spinning chip and swap the key under it.
-                    // Same lock as the chip handler: the ref covers the frame
-                    // before `isSubmitting` renders true.
-                    if (detailsFirst && (isSubmitting || inFlightRef.current)) return;
+                    if (postInFlight()) return;
                     setSelectedDay(null);
                     setSelectedSlot(null);
                     setMonthOffset(o);
@@ -851,7 +858,7 @@ export function HubSpotMeetingScheduler({
                     // `isSubmitting` is the render's snapshot; a second chip
                     // clicked in the same frame sees it false. The ref is the
                     // synchronous lock, so the second click changes nothing.
-                    if (isSubmitting || inFlightRef.current || !stash) return;
+                    if (postInFlight() || !stash) return;
                     inFlightRef.current = true;
                     setSelectedSlot(ms);
                     void handleSubmit({
@@ -871,7 +878,12 @@ export function HubSpotMeetingScheduler({
                     });
                   }}
                   selectedDay={selectedDay}
-                  onSelectDay={setSelectedDay}
+                  onSelectDay={day => {
+                    // Same lock: another day would swap the times column out
+                    // from under the spinning chip.
+                    if (postInFlight()) return;
+                    setSelectedDay(day);
+                  }}
                   isLoading={isLoadingAvailability}
                   // Distinct from `isLoading`, which swaps the whole times
                   // column for a skeleton: the grid must stay up with the
@@ -900,6 +912,18 @@ export function HubSpotMeetingScheduler({
   );
 }
 
+// The override surface: a host builds its `detailsForm` by re-rendering
+// `BookingForm` with `fieldRows`, so it needs both from this entry point (the
+// package exports `./components/meeting-scheduler`, not the file beneath it).
+export {
+  BookingForm,
+  BookingFormSkeleton,
+  type BookingFormProps,
+  type BookingFieldRow,
+  type BookingFieldSlot,
+  type BookingFormConsent,
+} from './booking-form';
+
 export {
   MeetingSchedulerDirectory,
   MeetingSchedulerDirectoryRowSkeleton,

package/src/components/ui/field-wrapper.tsx

@@ -36,8 +36,8 @@ export interface FieldWrapperProps {
    */
   labelVariant?: 'default' | 'large';
   /**
-   * Marks the label with the accent asterisk `ContactForm` draws on its
-   * required fields (`Label<span class="text-ods-accent">*</span>`), so a form
+   * Marks the label with the `RequiredMark` `ContactForm` draws on its
+   * required fields, so a form
    * mixing both never shows two conventions. Visual only — the CONTROL carries
    * `required`/`aria-required` for assistive tech; the star is `aria-hidden`.
    */

package/src/components/ui/policy-link.tsx

@@ -8,7 +8,7 @@ export function PolicyLink({ href, children }: { href: string; children: ReactNo
   return (
     <a
       href={href}
-      className="text-ods-accent underline"
+      className="text-ods-accent underline underline-offset-2 hover:text-ods-accent/80"
       target="_blank"
       rel="noopener noreferrer"
       onClick={e => e.stopPropagation()}

package/src/schemas/meeting-booking-schema.ts

@@ -1,5 +1,4 @@
 import { z } from 'zod';
-
 /**
  * Meeting-booking wire contracts + validation factory.
  *
@@ -446,6 +445,10 @@ function buildBookingSchema<TStart extends z.ZodTypeAny, TDuration extends z.Zod
   );
 }
 
+/** The slot's wire validators — ONE declaration for the strict and the deferred schema. */
+const SLOT_INSTANT = z.number().int().positive();
+const TIMEZONE = z.string().refine(isValidIanaTimezone, { message: 'Invalid timezone' });
+
 /**
  * The STRICT schema — the wire contract. The server rebuilds it from the link's
  * own fetched metadata and validates every booking against it; a slot and a
@@ -453,9 +456,9 @@ function buildBookingSchema<TStart extends z.ZodTypeAny, TDuration extends z.Zod
  */
 export function makeBookingSchema(formFields: MeetingFormField[], legalConsent: MeetingLegalConsent | null) {
   return buildBookingSchema(formFields, legalConsent, {
-    startTimeMs: z.number().int().positive(),
-    durationMs: z.number().int().positive(),
-    timezone: z.string().refine(isValidIanaTimezone, { message: 'Invalid timezone' }),
+    startTimeMs: SLOT_INSTANT,
+    durationMs: SLOT_INSTANT,
+    timezone: TIMEZONE,
   });
 }
 
@@ -478,9 +481,9 @@ export function makeDeferredBookingSchema(formFields: MeetingFormField[], legalC
   // Accepting only `undefined` would reject a field with no rendered control
   // and no FieldWrapper — the submit button silently dead, type-check clean.
   return buildBookingSchema(formFields, legalConsent, {
-    startTimeMs: z.number().int().positive().nullish(),
-    durationMs: z.number().int().positive().nullish(),
-    timezone: z.string().refine(isValidIanaTimezone, { message: 'Invalid timezone' }).nullish(),
+    startTimeMs: SLOT_INSTANT.nullish(),
+    durationMs: SLOT_INSTANT.nullish(),
+    timezone: TIMEZONE.nullish(),
   });
 }
 

package/src/utils/hubspot-meetings-convention.ts

@@ -33,8 +33,13 @@ export const SCHEDULING_SLUG_SHAPE = /^[a-z0-9-]+(\/[a-z0-9-]+)*$/;
 export const MAX_MONTH_OFFSET = 11;
 
 /** Full-slug shape validity (path-resolution safety only — never semantics). */
+/** The one spelling of slug normalisation — every map key and lookup goes through it. */
+export function normalizeSchedulingSlug(slug: string): string {
+  return slug.trim().toLowerCase();
+}
+
 export function isValidSchedulingSlug(slug: string): boolean {
-  return SCHEDULING_SLUG_SHAPE.test(slug.trim().toLowerCase());
+  return SCHEDULING_SLUG_SHAPE.test(normalizeSchedulingSlug(slug));
 }
 
 export interface ParsedSchedulingLinkName {