@flamingo-stack/openframe-frontend-core 0.0.596-2034.5669.1 → 0.0.596-2034.5671.1

package/package.json

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

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

@@ -1,8 +1,8 @@
 'use client';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Fragment, useEffect, useMemo } from 'react';
-import type { ReactNode, Ref } from 'react';
+import { Fragment, useEffect, useMemo, useState } from 'react';
+import type { FormEvent, ReactNode, Ref } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import {
   makeDeferredBookingSchema,
@@ -43,6 +43,25 @@ export interface BookingFieldSlot {
 
 export type BookingFieldRow = BookingFieldSlot[];
 
+/**
+ * A HOST-supplied consent row — the block the waitlist form draws for its SMS
+ * consent, here for "I agree to the Privacy Policy and to be contacted". It is
+ * the host's copy and the host's link, so it is a prop, not HubSpot metadata;
+ * HubSpot's own `legalConsent` block (verbatim, declared on the link) renders
+ * alongside when the link carries one.
+ *
+ * A client-side gate, exactly like the waitlist's: Continue is refused until it
+ * is ticked, and the tick rides in the payload as `hostConsent` — which the
+ * host's book route strips as an undeclared key. It is not a HubSpot consent
+ * record; declare `legalConsent` on the link when one is required.
+ */
+export interface BookingFormConsent {
+  label: ReactNode;
+  description?: ReactNode;
+  /** Shown under the row when Continue is pressed unticked. */
+  errorMessage?: string;
+}
+
 /** Static so Tailwind's scanner sees every class — a template built from a
  *  runtime span would compile to nothing. */
 const SPAN_CLASS: Record<1 | 2 | 3 | 4, string> = {
@@ -101,6 +120,8 @@ export interface BookingFormProps {
    * appended full width. Both are deliberate — see `slotNode`/`unplacedFields`.
    */
   fieldRows?: BookingFieldRow[];
+  /** Host-supplied consent row, rendered after the fields — see `BookingFormConsent`. */
+  consent?: BookingFormConsent;
   isSubmitting: boolean;
   onSubmit: (payload: Record<string, unknown>) => Promise<void>;
   /** From useHumanitySignals — parent owns the instance so it can resetSignals(). */
@@ -119,6 +140,7 @@ export function BookingForm({
   submitLabel,
   footerNote,
   fieldRows,
+  consent,
   isSubmitting,
   onSubmit,
   honeypotInputProps,
@@ -170,6 +192,12 @@ export function BookingForm({
 
   const priorConsents = initialValues?.legalConsentResponses as typeof consentDefaults | undefined;
 
+  // The host consent lives OUTSIDE react-hook-form (it is not a wire field), so
+  // a remount restores it from the stash the same way the fields come back.
+  const [consented, setConsented] = useState(initialValues?.hostConsent === true);
+  const [consentError, setConsentError] = useState<string | null>(null);
+  const consentMissing = Boolean(consent) && !consented;
+
   // The seeded availability is refetched immediately on mount, so the link's
   // consent set can change WHILE this form is open. Reconcile rather than
   // remount: carry each `consented` across by id and default new ids to false.
@@ -186,17 +214,26 @@ export function BookingForm({
     );
   }, [consentDefaults, priorConsents, setValue]);
 
-  const submit = handleSubmit(async data => {
+  const submitValid = handleSubmit(async data => {
+    if (consentMissing) return; // the error is already on screen — see `submit`
     if (deferSlot) {
       // Collect-only. Signals are captured HERE, while this form and its
       // honeypot are still mounted — `getSignals()` reads a detached ref once
       // they unmount, which would silently disable the decoy.
-      await onSubmit({ ...data, meetingId });
+      await onSubmit({ ...data, meetingId, hostConsent: consented });
       return;
     }
-    await onSubmit({ ...data, meetingId, startTimeMs, durationMs, timezone, ...getSignals() });
+    await onSubmit({ ...data, meetingId, hostConsent: consented, startTimeMs, durationMs, timezone, ...getSignals() });
   });
 
+  // Consent is checked BEFORE the resolver runs, not inside the valid branch,
+  // so an unticked box and an empty field are reported together rather than
+  // one submit apart.
+  const submit = (event: FormEvent<HTMLFormElement>) => {
+    if (consentMissing) setConsentError(consent?.errorMessage ?? 'Please agree to continue.');
+    return submitValid(event);
+  };
+
   const fieldError = (name: string): string | undefined => {
     const err = (errors.formFields as Record<string, { message?: string }> | undefined)?.[name];
     return err?.message;
@@ -426,6 +463,21 @@ export function BookingForm({
         </>
       )}
 
+      {consent && (
+        <CheckboxBlock
+          id="ms-host-consent"
+          checked={consented}
+          onCheckedChange={v => {
+            setConsented(v);
+            if (v) setConsentError(null);
+          }}
+          disabled={isSubmitting}
+          error={consentError ?? undefined}
+          label={consent.label}
+          description={consent.description}
+        />
+      )}
+
       {legalConsent && (
         // Same out-of-flow message as the fields above, so a missed consent
         // box doesn't shove the submit button down the card. With no error the

package/src/components/meeting-scheduler/context-panel.tsx

@@ -47,14 +47,6 @@ export interface SchedulerContextPanelProps {
    *  states the length and a live selector beside a filled-in form invites a
    *  change that would throw the form away. Going Back restores them. */
   locked?: boolean;
-  /**
-   * The link's length is not the visitor's to choose here: the static duration
-   * line renders and the chips never do, at every step. `flow="details-first"`
-   * sets it — the mock draws "30 min call" beside the host on the calendar step
-   * and offers no selector — and unlike `locked` it has NO effect on the
-   * timezone picker, which on that step is the only control the visitor has.
-   */
-  fixedDuration?: boolean;
   /** Whether the timezone picker renders. Default true: the zone governs every
    *  time on screen, the form's summary line included, so it stays reachable
    *  right up to the confirmation — where there is nothing left to re-read. */
@@ -173,7 +165,6 @@ export function SchedulerContextPanel({
   onBack,
   backLabel = 'Back',
   locked = false,
-  fixedDuration = false,
   showTimezone = true,
   className,
 }: SchedulerContextPanelProps) {
@@ -232,9 +223,8 @@ export function SchedulerContextPanel({
               </div>
             )}
 
-            {locked || fixedDuration || durationsMs.length <= 1
-              ? // Post-selection, a fixed-length flow, or a link that offers one
-                // length: a static line,
+            {locked || durationsMs.length <= 1
+              ? // Post-selection, or a link that offers one length: a static line,
                 // which is what sits beside the host on the header-strip layouts.
                 selectedDurationMs != null && (
                   <p className="shrink-0 text-ods-text-secondary text-h6">
@@ -249,7 +239,7 @@ export function SchedulerContextPanel({
 
           {/* Several lengths on offer: chips, which need a full row of their
               own at every width — so they stay OUT of the identity row. */}
-          {!locked && !fixedDuration && durationsMs.length > 1 && (
+          {!locked && durationsMs.length > 1 && (
             <div className="flex flex-col gap-[var(--spacing-system-xxs)]">
               <p className={FIELD_LABEL_CLASS}>Duration</p>
               <div className="flex flex-wrap gap-[var(--spacing-system-xs)]">

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

@@ -62,6 +62,7 @@ export {
   type BookingFormProps,
   type BookingFieldRow,
   type BookingFieldSlot,
+  type BookingFormConsent,
 } from './booking-form';
 import { Confirmation } from './confirmation';
 import { SchedulerContextPanel, ContextPanelSkeleton } from './context-panel';
@@ -706,8 +707,6 @@ export function HubSpotMeetingScheduler({
             // summary line on the form — so the picker stays until there is
             // nothing left to re-read in it.
             showTimezone={step !== 'confirmed'}
-            // The mock's calendar step states the length, it does not offer it.
-            fixedDuration={detailsFirst}
             className={CONTEXT_PANEL_CLASS}
           />
         )}