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

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';
@@ -186,6 +186,8 @@ const ACTION_PANEL_CLASS = 'flex-1 min-w-0 flex flex-col md:min-h-0 lg:p-[var(--
  * being cut off at the card's edge.
  */
 const PANEL_STEP_CLASS = 'p-[var(--spacing-system-l)] md:min-h-0 md:overflow-y-auto lg:p-0';
+/** A step's panel: the inset above on a column that fills the action side. */
+const STEP_PANEL_CLASS = cn('flex flex-1 flex-col', PANEL_STEP_CLASS);
 
 /**
  * The widget's height on desktop: a FIXED 380px, and the ONLY size the whole
@@ -255,6 +257,9 @@ export const MEETING_SCHEDULER_DETAILS_FIRST_H = 'md:h-[39.875rem]';
 
 export type SchedulerFlow = 'slot-first' | 'details-first';
 
+/** The flow every existing embed gets — the ONE spelling of the default. */
+export const DEFAULT_SCHEDULER_FLOW: SchedulerFlow = 'slot-first';
+
 /**
  * What differs between the two flows as DATA — first step, the box a host
  * reserves, the form's submit copy. Exported so a host that swaps the card in
@@ -266,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,
@@ -334,7 +339,7 @@ const CARD_DEGRADED_CLASS = cn(
  * from {@link SCHEDULER_FLOW_PRESETS}, so the pairing is never re-derived.
  */
 export function SchedulerDegradedCard({
-  flow = 'slot-first',
+  flow = DEFAULT_SCHEDULER_FLOW,
   className,
   message,
   action,
@@ -385,7 +390,7 @@ export function HubSpotMeetingScheduler({
   onBack,
   onBooked,
   className,
-  flow = 'slot-first',
+  flow = DEFAULT_SCHEDULER_FLOW,
   detailsForm: DetailsForm = BookingForm,
   detailsFormProps,
 }: HubSpotMeetingSchedulerProps) {
@@ -665,6 +670,11 @@ 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.
    */
+  /** The card's ONE back edge, per flow and step — the skeleton and the loaded
+   *  panel wire the same one, so a month load can never swap it for the host's
+   *  exit under a details-first visitor. */
+  const backEdge = detailsFirst ? (step === 'slot' ? backToDetails : onBack) : step === 'details' ? backToSlot : onBack;
+
   const cardClass = cn(CARD_CLASS, preset.height, formOnly && 'bg-ods-bg', className);
 
   /** One card SHAPE for every degraded return below. */
@@ -681,7 +691,7 @@ export function HubSpotMeetingScheduler({
     return (
       <div className={cardClass}>
         <div className={CARD_INNER_CLASS}>
-          {!formOnly && <ContextPanelSkeleton onBack={onBack} className={CONTEXT_PANEL_CLASS} />}
+          {!formOnly && <ContextPanelSkeleton onBack={backEdge} className={CONTEXT_PANEL_CLASS} />}
           <div className={ACTION_PANEL_CLASS}>
             {/* Both terms matter. Without `flow` this stays a calendar where
                 the form belongs; without the step term, paging a month AFTER
@@ -690,8 +700,8 @@ export function HubSpotMeetingScheduler({
             {detailsFirst && step === 'details' ? (
               // 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 className={STEP_PANEL_CLASS}>
+                <BookingFormSkeleton fieldRows={detailsFormProps?.fieldRows} footerNote={preset.footerNote} />
               </div>
             ) : (
               <SlotPickerSkeleton monthOffset={monthOffset} />
@@ -742,9 +752,7 @@ export function HubSpotMeetingScheduler({
             // 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
-            }
+            onBack={backEdge}
             // `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
@@ -765,17 +773,19 @@ export function HubSpotMeetingScheduler({
             default `min-height:auto` refuses to shrink below its content. */}
         <div className={ACTION_PANEL_CLASS}>
           {step === 'confirmed' && confirmation && timezone ? (
-            <div className={cn('flex flex-1 flex-col', PANEL_STEP_CLASS)}>
+            <div className={STEP_PANEL_CLASS}>
               <Confirmation confirmation={confirmation} timezone={timezone} />
             </div>
           ) : step === 'details' &&
             (detailsFirst
               ? // The form is step ONE here: no slot yet, and `timezone` is null
                 // on the server render, so neither may gate the PANEL. A link
-                // publishing no durations has no form worth showing.
-                durations.length > 0
+                // publishing no durations has no form worth showing — but while a
+                // refetch is in flight the form stays (a calendar skeleton is
+                // the wrong shape here).
+                durations.length > 0 || isFetchingAvailability
               : durationMs != null && selectedSlot != null && timezone) ? (
-            <div className={cn('flex flex-1 flex-col gap-[var(--spacing-system-m)]', PANEL_STEP_CLASS)}>
+            <div className={cn(STEP_PANEL_CLASS, 'gap-[var(--spacing-system-m)]')}>
               {/* Top-aligned, and no back edge of its own: the ONE back edge
                   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

package/src/components/ui/benefit-card.tsx

@@ -61,6 +61,50 @@ interface BenefitCardGridProps {
   columns?: 2 | 3 | 4; // Support 2, 3, or 4 columns
 }
 
+/**
+ * Which dividers card `index` of `totalItems` draws in a `columns` grid. Pure:
+ * the per-breakpoint row math (a 3-column grid lays out 1-up / 2-up / 3-up, so a
+ * card's row differs per breakpoint) is what needs testing, and the grid itself
+ * is a `cloneElement` over children.
+ */
+export function benefitCardBorderClass(index: number, totalItems: number, columns: number): string {
+  const isLastItem = index === totalItems - 1;
+  if (columns === 4) {
+    // 4-column grid borders
+    const isLastInRow = (index + 1) % 4 === 0;
+    const isInLastRow = index >= totalItems - 4;
+    return cn(
+      !isLastInRow && 'border-ods-border md:border-r',
+      !isInLastRow && 'border-b md:border-b lg:border-b-0',
+      index < 2 && 'lg:border-b-0',
+    );
+  } else if (columns === 3) {
+    // 3 columns lay out 1-up / 2-up / 3-up, so the row a card sits in
+    // differs per breakpoint and a single rule cannot describe it. The
+    // old shared 2-3 branch assumed one row and, at `md` (grid-cols-2),
+    // gave card 1 a trailing `md:border-r` while suppressing the divider
+    // between the two rows.
+    const isLastInMdRow = (index + 1) % 2 === 0;
+    const isInLastMdRow = index >= totalItems - (totalItems % 2 === 0 ? 2 : 1);
+    const isLastInLgRow = (index + 1) % 3 === 0;
+    const isInLastLgRow = index >= totalItems - (totalItems % 3 === 0 ? 3 : totalItems % 3);
+    return cn(
+      'border-ods-border',
+      !isLastItem && 'border-b',
+      isInLastMdRow && 'md:border-b-0',
+      !isLastInMdRow && !isLastItem && 'md:border-r',
+      isLastInMdRow && 'md:border-r-0',
+      isInLastLgRow && 'lg:border-b-0',
+      !isInLastMdRow && !isInLastLgRow && 'lg:border-b',
+      !isLastInLgRow && !isLastItem && 'lg:border-r',
+      isLastInLgRow && 'lg:border-r-0',
+    );
+  } else {
+    // 2 columns: a flex row, so one rule genuinely does describe it.
+    return isLastItem ? 'border-b-0' : 'border-b md:border-b-0 md:border-r border-ods-border';
+  }
+}
+
 export const BenefitCardGrid: React.FC<BenefitCardGridProps> = ({ children, className = '', columns = 2 }) => {
   const childrenArray = React.Children.toArray(children);
 
@@ -80,45 +124,7 @@ export const BenefitCardGrid: React.FC<BenefitCardGridProps> = ({ children, clas
       )}
     >
       {childrenArray.map((child, index) => {
-        const totalItems = childrenArray.length;
-        const isLastItem = index === totalItems - 1;
-
-        // Dynamic border logic based on columns
-        let borderClass = '';
-        if (columns === 4) {
-          // 4-column grid borders
-          const isLastInRow = (index + 1) % 4 === 0;
-          const isInLastRow = index >= totalItems - 4;
-          borderClass = cn(
-            !isLastInRow && 'border-ods-border md:border-r',
-            !isInLastRow && 'border-b md:border-b lg:border-b-0',
-            index < 2 && 'lg:border-b-0',
-          );
-        } else if (columns === 3) {
-          // 3 columns lay out 1-up / 2-up / 3-up, so the row a card sits in
-          // differs per breakpoint and a single rule cannot describe it. The
-          // old shared 2-3 branch assumed one row and, at `md` (grid-cols-2),
-          // gave card 1 a trailing `md:border-r` while suppressing the divider
-          // between the two rows.
-          const isLastInMdRow = (index + 1) % 2 === 0;
-          const isInLastMdRow = index >= totalItems - (totalItems % 2 === 0 ? 2 : 1);
-          const isLastInLgRow = (index + 1) % 3 === 0;
-          const isInLastLgRow = index >= totalItems - (totalItems % 3 === 0 ? 3 : totalItems % 3);
-          borderClass = cn(
-            'border-ods-border',
-            !isLastItem && 'border-b',
-            isInLastMdRow && 'md:border-b-0',
-            !isLastInMdRow && !isLastItem && 'md:border-r',
-            isLastInMdRow && 'md:border-r-0',
-            isInLastLgRow && 'lg:border-b-0',
-            !isInLastMdRow && !isInLastLgRow && 'lg:border-b',
-            !isLastInLgRow && !isLastItem && 'lg:border-r',
-            isLastInLgRow && 'lg:border-r-0',
-          );
-        } else {
-          // 2 columns: a flex row, so one rule genuinely does describe it.
-          borderClass = isLastItem ? 'border-b-0' : 'border-b md:border-b-0 md:border-r border-ods-border';
-        }
+        const borderClass = benefitCardBorderClass(index, childrenArray.length, columns);
 
         return React.cloneElement(child as React.ReactElement<{ className?: string }>, {
           key: index,

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

@@ -36,10 +36,10 @@ export interface FieldWrapperProps {
    */
   labelVariant?: 'default' | 'large';
   /**
-   * 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`.
+   * 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`.
    */
   required?: boolean;
   /** Additional className for the outer wrapper */

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

@@ -1,4 +1,5 @@
 import { z } from 'zod';
+
 /**
  * Meeting-booking wire contracts + validation factory.
  *

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

@@ -32,12 +32,12 @@ export const SCHEDULING_SLUG_SHAPE = /^[a-z0-9-]+(\/[a-z0-9-]+)*$/;
 /** Upper bound for availability month paging (widget nav, route 400, DAL clamp). */
 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();
 }
 
+/** Full-slug shape validity (path-resolution safety only — never semantics). */
 export function isValidSchedulingSlug(slug: string): boolean {
   return SCHEDULING_SLUG_SHAPE.test(normalizeSchedulingSlug(slug));
 }