@flamingo-stack/openframe-frontend-core 0.0.675 → 0.0.676-2437.7317.1

package/package.json

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

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

@@ -164,4 +164,25 @@ 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');
+  });
 });

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

@@ -60,6 +60,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
@@ -365,6 +380,8 @@ 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>;
   /** Host-supplied consent row, rendered after the fields — see `BookingFormConsent`. */
   consent?: BookingFormConsent;
   isSubmitting: boolean;
@@ -404,6 +421,7 @@ export function BookingForm({
   submitLabel,
   footerNote,
   fieldRows,
+  fieldCopy,
   consent,
   isSubmitting,
   onSubmit,
@@ -546,18 +564,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'>;
   /** 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';