@flamingo-stack/openframe-frontend-core 0.0.676 → 0.0.677

package/src/__tests__/meeting-scheduler-details-first.test.tsx

@@ -6,7 +6,7 @@ import {
   type SchedulerStage,
 } from '../components/meeting-scheduler';
 import type { MeetingAvailability } from '../schemas/meeting-booking-schema';
-import { availabilityWith, fillIdentity } from './fixtures/meeting-booking';
+import { availabilityWith, fillIdentity, typeInto } from './fixtures/meeting-booking';
 
 /** A slot two hours from now, on the hour — inside the month the calendar opens on. */
 const SLOT_MS = Math.ceil((Date.now() + 2 * 3_600_000) / 3_600_000) * 3_600_000;
@@ -164,4 +164,45 @@ describe('HubSpotMeetingScheduler — which links fall back to HubSpot', () => {
     expect(screen.queryByText(BOOKED_ON_HUBSPOT)).not.toBeInTheDocument();
     expect(screen.queryByLabelText(/^Upload/)).not.toBeInTheDocument();
   });
+  it('fieldCopy replaces a field label and placeholder, and derives the one it is not given', async () => {
+    availability.formFields = [];
+    render(
+      scheduler({
+        detailsFormProps: {
+          fieldCopy: {
+            email: { label: 'Business Email', placeholder: 'username@company.com' },
+            firstName: { label: 'Given Name' },
+          },
+        },
+      }),
+    );
+    const email = await screen.findByLabelText(/^Business Email/);
+    expect(email).toHaveAttribute('placeholder', 'username@company.com');
+    // A label alone still moves the placeholder the TYPE derives from it.
+    expect(screen.getByLabelText(/^Given Name/)).toHaveAttribute('placeholder', 'Enter Given Name');
+    // The overridden field keeps everything else: its own label is gone, and the
+    // untouched one is drawn exactly as the widget declares it.
+    expect(screen.queryByLabelText(/^Email/)).not.toBeInTheDocument();
+    expect(screen.getByLabelText(/^Last Name/)).toHaveAttribute('placeholder', 'Enter Last Name');
+  });
+  it('a denied email domain keeps the visitor on the form and says why', async () => {
+    availability.formFields = [];
+    const message = 'Looks like a personal email. Drop your work email instead.';
+    render(scheduler({ detailsFormProps: { deniedEmailDomains: { domains: ['gmail.com'], message } } }));
+    await screen.findByLabelText(/^Email/);
+    fillIdentity();
+    typeInto(screen.getByLabelText(/^Email/), 'ada@gmail.com');
+    fireEvent.click(screen.getByRole('button', { name: 'Continue' }));
+    // The message lands under the email control, and the form does not advance
+    // (Back exists on the calendar step only).
+    expect(await screen.findByText(message)).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Back' })).not.toBeInTheDocument();
+    // …and once at the button, where a visitor whose address LOOKS answered is
+    // looking when nothing happens.
+    expect(toast).toHaveBeenCalledWith(expect.objectContaining({ description: message, variant: 'error' }));
+    // A work address passes the same form.
+    typeInto(screen.getByLabelText(/^Email/), 'ada@acmecorp.com');
+    fireEvent.click(screen.getByRole('button', { name: 'Continue' }));
+    expect(await screen.findByRole('button', { name: 'Back' })).toBeInTheDocument();
+  });
 });

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

@@ -6,12 +6,16 @@ import type { FormEvent, ReactNode, Ref } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import type { Control, Path, UseFormRegister } from 'react-hook-form';
 import { useRescuedForm } from '../../hooks/use-rescued-form';
+import { useToast } from '../../hooks/use-toast';
 import {
   BUILT_IN_BOOKING_FIELDS,
   type BuiltInBookingFieldName,
   DECIMAL_LITERAL_RE,
   fieldTypeSpec,
   makeDeferredBookingSchema,
+  withDeniedEmailDomains,
+  emailDomainDenied,
+  type DeniedEmailDomains,
   MULTI_VALUE_SEPARATOR,
   normalizeFormFields,
   splitMultiValue,
@@ -60,6 +64,21 @@ export type BookingFieldSpan = keyof typeof SPAN_CLASS;
 
 export type BookingFieldRow = BookingFieldSlot[];
 
+/**
+ * Display copy a HOST overrides for ONE field, keyed by its name — a built-in
+ * (`email`) or a HubSpot-declared question. It replaces what is DRAWN and
+ * nothing else: the name the answer rides under, the validation and the
+ * schema's own messages are untouched, so a campaign page can ask for a
+ * "Business Email" without owning a second email rule.
+ *
+ * An overridden `label` also feeds the type's derived placeholder
+ * (`Enter <label>`), so overriding the label alone keeps the pair consistent.
+ */
+export interface BookingFieldCopy {
+  label?: string;
+  placeholder?: string;
+}
+
 /**
  * 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
@@ -182,7 +201,9 @@ const canonicalNumber = (v: unknown): string => {
  * validator and the renderer can never disagree about what is supported.
  * Every control states `aria-invalid` from the field's message and carries
  * `required`/`aria-required` from the field, so the accent asterisk is never
- * the only signal.
+ * the only signal. The ones that can PAINT the state take `invalid` too
+ * (`Input`, `Textarea`, `SelectTrigger` — the lib's error border), so a refused
+ * field reads as refused at the control, not only in the line beneath it.
  */
 const FIELD_CONTROLS: Record<SupportedFormFieldType, (args: ControlArgs) => ReactNode> = {
   text: ({ field, id, registerName, error, register }) => (
@@ -191,6 +212,7 @@ const FIELD_CONTROLS: Record<SupportedFormFieldType, (args: ControlArgs) => Reac
       type={field.inputType ?? 'text'}
       required={field.required}
       aria-invalid={Boolean(error)}
+      invalid={Boolean(error)}
       autoComplete={field.autoComplete}
       placeholder={placeholderFor(field)}
       {...register(registerName as never)}
@@ -201,6 +223,7 @@ const FIELD_CONTROLS: Record<SupportedFormFieldType, (args: ControlArgs) => Reac
       id={id}
       required={field.required}
       aria-invalid={Boolean(error)}
+      invalid={Boolean(error)}
       placeholder={placeholderFor(field)}
       {...register(registerName as never)}
     />
@@ -213,6 +236,7 @@ const FIELD_CONTROLS: Record<SupportedFormFieldType, (args: ControlArgs) => Reac
       step="any"
       required={field.required}
       aria-invalid={Boolean(error)}
+      invalid={Boolean(error)}
       {...register(registerName as never, { setValueAs: canonicalNumber })}
     />
   ),
@@ -224,6 +248,7 @@ const FIELD_CONTROLS: Record<SupportedFormFieldType, (args: ControlArgs) => Reac
       autoComplete="tel"
       required={field.required}
       aria-invalid={Boolean(error)}
+      invalid={Boolean(error)}
       placeholder={placeholderFor(field)}
       {...register(registerName as never, { setValueAs: trimmed })}
     />
@@ -235,6 +260,7 @@ const FIELD_CONTROLS: Record<SupportedFormFieldType, (args: ControlArgs) => Reac
       type="date"
       required={field.required}
       aria-invalid={Boolean(error)}
+      invalid={Boolean(error)}
       {...register(registerName as never)}
     />
   ),
@@ -244,7 +270,12 @@ const FIELD_CONTROLS: Record<SupportedFormFieldType, (args: ControlArgs) => Reac
       name={registerName as never}
       render={({ field: rhf }) => (
         <Select value={rhf.value ?? ''} onValueChange={rhf.onChange}>
-          <SelectTrigger id={id} aria-required={field.required || undefined} aria-invalid={Boolean(error)}>
+          <SelectTrigger
+            id={id}
+            aria-required={field.required || undefined}
+            aria-invalid={Boolean(error)}
+            invalid={Boolean(error)}
+          >
             <SelectValue placeholder="Select…" />
           </SelectTrigger>
           <SelectContent>
@@ -365,6 +396,11 @@ export interface BookingFormProps {
    * appended full width. Both are deliberate — see `slotNode`/`unplacedFields`.
    */
   fieldRows?: BookingFieldRow[];
+  /** Per-field display overrides, keyed by field name — see `BookingFieldCopy`. */
+  fieldCopy?: Record<string, BookingFieldCopy>;
+  /** Email domains this form refuses, with the message it shows — see `DeniedEmailDomains`.
+   *  MEMOIZE it: a new object every render rebuilds the resolver's schema. */
+  deniedEmailDomains?: DeniedEmailDomains;
   /** Host-supplied consent row, rendered after the fields — see `BookingFormConsent`. */
   consent?: BookingFormConsent;
   isSubmitting: boolean;
@@ -404,6 +440,8 @@ export function BookingForm({
   submitLabel,
   footerNote,
   fieldRows,
+  fieldCopy,
+  deniedEmailDomains,
   consent,
   isSubmitting,
   onSubmit,
@@ -420,8 +458,8 @@ export function BookingForm({
   // resolver is not assignable to `Resolver<BookingFormValues>`. The strict
   // schema is the server's contract — see `makeBookingSchema`'s docblock.
   const schema = useMemo(
-    () => makeDeferredBookingSchema(supportedFields, legalConsent),
-    [supportedFields, legalConsent],
+    () => withDeniedEmailDomains(makeDeferredBookingSchema(supportedFields, legalConsent), deniedEmailDomains),
+    [supportedFields, legalConsent, deniedEmailDomains],
   );
 
   const consentDefaults = useMemo(
@@ -506,6 +544,28 @@ export function BookingForm({
     },
   );
 
+  const { toast } = useToast();
+
+  /**
+   * A refused submit already reports itself under each field, and the button
+   * stays live — pressing it is how a visitor asks what is wrong.
+   *
+   * The denied-domain rule is the one they cannot see coming: the address is
+   * well formed and the control looks answered, so the inline line under a
+   * filled-in field is easy to miss. That one is ALSO said at the button.
+   * Nothing else toasts — a toast per empty field would bury the messages the
+   * fields already carry.
+   */
+  const onInvalid = () => {
+    if (deniedEmailDomains && emailDomainDenied(getValues('email'), deniedEmailDomains)) {
+      toast({
+        variant: 'error',
+        title: 'Check your email address',
+        description: deniedEmailDomains.message,
+      });
+    }
+  };
+
   const submitValid = handleSubmit(async data => {
     if (consentMissing) return; // the error is already on screen — see `submit`
     if (deferSlot) {
@@ -526,7 +586,7 @@ export function BookingForm({
       ...getSignals(),
       ...formRescue.submitFields(),
     });
-  });
+  }, onInvalid);
 
   // 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
@@ -546,18 +606,32 @@ export function BookingForm({
   const renderField = (
     field: ControlArgs['field'],
     where: { id: string; registerName: string; error?: string },
-  ): ReactNode => (
-    <FieldWrapper key={field.name} label={field.label} htmlFor={where.id} required={field.required} error={where.error}>
-      {FIELD_CONTROLS[field.type]({
-        field,
-        id: where.id,
-        registerName: where.registerName,
-        error: where.error,
-        register,
-        control,
-      })}
-    </FieldWrapper>
-  );
+  ): ReactNode => {
+    // DISPLAY only: the host's copy replaces what this control draws, never the
+    // name the answer registers under, the validation, or the schema's messages.
+    const copy = fieldCopy?.[field.name];
+    const shown = copy
+      ? { ...field, label: copy.label ?? field.label, placeholder: copy.placeholder ?? field.placeholder }
+      : field;
+    return (
+      <FieldWrapper
+        key={shown.name}
+        label={shown.label}
+        htmlFor={where.id}
+        required={shown.required}
+        error={where.error}
+      >
+        {FIELD_CONTROLS[shown.type]({
+          field: shown,
+          id: where.id,
+          registerName: where.registerName,
+          error: where.error,
+          register,
+          control,
+        })}
+      </FieldWrapper>
+    );
+  };
 
   const builtInFields: Record<string, ReactNode> = Object.fromEntries(
     BUILT_IN_BOOKING_FIELDS.map(field => [

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

@@ -147,11 +147,12 @@ export interface HubSpotMeetingSchedulerProps {
    */
   detailsForm?: ComponentType<BookingFormProps>;
   /**
-   * The DATA form of the same override: `fieldRows` and a host consent row,
-   * spread onto whichever form renders. Serialisable, so a Server Component
-   * can pass it across the RSC boundary where a component cannot.
+   * The DATA form of the same override: `fieldRows`, a host consent row and
+   * per-field display copy, spread onto whichever form renders. Serialisable,
+   * so a Server Component can pass it across the RSC boundary where a component
+   * cannot.
    */
-  detailsFormProps?: Pick<BookingFormProps, 'fieldRows' | 'consent'>;
+  detailsFormProps?: Pick<BookingFormProps, 'fieldRows' | 'consent' | 'fieldCopy' | 'deniedEmailDomains'>;
   /** Form rescue for the details form (`RESCUE_FORMS.meetingBooking`). OPT-IN:
    *  omitted or `null` saves nothing. */
   rescue?: FormRescueDefinition | null;
@@ -986,6 +987,7 @@ export {
   type BookingFormProps,
   type BookingFieldRow,
   type BookingFieldSlot,
+  type BookingFieldCopy,
   type BookingFormConsent,
 } from './booking-form';
 
@@ -995,4 +997,4 @@ export {
   type MeetingSchedulerDirectoryProps,
 } from './directory';
 export type { MeetingAvailability, BookingConfirmation, MeetingBookingErrorCode, MeetingHost };
-export type { SchedulingLink, SchedulingLinksPayload } from '../../schemas/meeting-booking-schema';
+export type { SchedulingLink, SchedulingLinksPayload, DeniedEmailDomains } from '../../schemas/meeting-booking-schema';

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

@@ -699,6 +699,40 @@ export function makeDeferredBookingSchema(formFields: MeetingFormField[], legalC
   });
 }
 
+/**
+ * Email domains a host's form does not accept, with the message it shows when
+ * one is typed. The HOST owns the list (its own personal/free-provider rule)
+ * and re-checks on its own server — this is the answer at the point of typing,
+ * never the gate.
+ */
+export interface DeniedEmailDomains {
+  domains: readonly string[];
+  message: string;
+}
+
+/** The address's domain, lower-cased, matched WHOLE against the list — a
+ *  subdomain is a different domain, which is how a host's own list reads it. */
+export function emailDomainDenied(email: unknown, rule: DeniedEmailDomains): boolean {
+  if (typeof email !== 'string') return false;
+  const domain = email.split('@')[1]?.trim().toLowerCase();
+  if (domain === undefined || domain === '') return false;
+  return rule.domains.includes(domain);
+}
+
+/** `schema` refined to reject those domains ON the email field, so the message
+ *  lands under the control the visitor typed in rather than as a form error. */
+export function withDeniedEmailDomains(
+  schema: ReturnType<typeof makeDeferredBookingSchema>,
+  rule: DeniedEmailDomains | undefined,
+) {
+  if (!rule) return schema;
+  return schema.superRefine((values, ctx) => {
+    if (emailDomainDenied(values.email, rule)) {
+      ctx.addIssue({ code: 'custom', path: ['email'], message: rule.message });
+    }
+  });
+}
+
 /** The wire payload. Pinned to the STRICT builder — see above. */
 export type MeetingBookingPayload = z.infer<ReturnType<typeof makeBookingSchema>>;