keystone-design-bootstrap 1.0.63 → 1.0.65

package/README.md

@@ -95,6 +95,37 @@ import type { Service, Testimonial } from '@keystone-pzjr/design-bootstrap/types
 import { themes } from '@keystone-pzjr/design-bootstrap/themes'
 ```
 
+## Meta Pixel Tracking
+
+Meta Pixel is initialised automatically in `KeystoneRootLayout` when the account has a connected Meta integration with a pixel configured. Most events fire without any extra work. The one place you need to add tracking manually is **custom form submissions**.
+
+### What fires automatically
+
+| Event | Trigger |
+|---|---|
+| `PageView` | Every page load |
+| `ViewContent` | Route changes to `/services`, `/services/:slug`, `/locations`, `/locations/:slug`, `/portal`, `/service-menu`, `/faq`, `/contact` |
+| `InitiateCheckout` | Click on any link to the account's external booking URL |
+| Portal tab events | Opening Services, Packages, Specials, or Booking tabs in the member portal |
+
+### Adding tracking to a custom form
+
+On successful submission, add two calls:
+
+```tsx
+import { firePixelEvent, setPixelUserData } from 'keystone-design-bootstrap/tracking';
+
+// inside your success handler, after a confirmed API response:
+await setPixelUserData({ email: data.email, phone: data.phone });
+firePixelEvent('Lead');
+```
+
+Also submit with `formType: 'lead'` in the POST body — this triggers the server-side CAPI `Lead` event automatically with no extra backend work.
+
+Both calls are silent no-ops when no Meta Pixel is configured for the site.
+
+See `components/sections/VipReferralForm.tsx` in any customer site for a complete working example.
+
 ## Architecture
 
 - **Server-first**: Data fetching happens server-side, components render as Server Components where possible

package/dist/design_system/components/DynamicFormFields.d.ts

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import { F as FormDefinition } from '../../form-C94A_PX_.js';
+
+interface DynamicFormFieldsProps {
+    /** Form definition from API (fields array + optional settings). */
+    form: FormDefinition;
+    /** For job_application forms: add hidden jobSlug input. */
+    jobSlug?: string;
+    /** Optional URLs for ToS/Privacy links in consent checkbox label. */
+    privacyPolicyUrl?: string;
+    termsOfServiceUrl?: string;
+}
+declare function DynamicFormFields({ form, jobSlug, privacyPolicyUrl, termsOfServiceUrl }: DynamicFormFieldsProps): React__default.JSX.Element;
+
+export { DynamicFormFields, type DynamicFormFieldsProps };