@opensite/ui 1.8.2 → 1.8.4

package/dist/contact-callback.d.cts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { P as PageSpeedFormConfig } from './forms-nGgHUTBw.cjs';
+import { F as FormFieldConfig } from './form-field-types-flMXhIjG.cjs';
+import { P as PageSpeedFormConfig } from './forms-CStlFhnh.cjs';
 import { f as SectionBackground, g as SectionSpacing, s as PatternName } from './community-initiatives-k1_FqqBQ.cjs';
 import { A as ActionConfig } from './blocks-rgCERYOC.cjs';
 import '@page-speed/forms/integration';
@@ -8,17 +9,6 @@ import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
-interface CallbackFormValues {
-    name: string;
-    company: string;
-    email: string;
-    phone: string;
-    date: string;
-    time: string;
-    timezone: string;
-    topic: string;
-    details: string;
-}
 interface ContactCallbackProps {
     /**
      * Main heading content
@@ -45,13 +35,35 @@ interface ContactCallbackProps {
      */
     actionsSlot?: React.ReactNode;
     /**
-     * Footer content (e.g., help text)
+     * Array of form field configurations
+     * If not provided, defaults to: name, company, email, phone, date, time, timezone, topic, details
+     */
+    formFields?: FormFieldConfig[];
+    /**
+     * Success message to display after form submission
+     * @default "Thank you! Your callback request has been received."
+     */
+    successMessage?: React.ReactNode;
+    /**
+     * Label for the information section heading
+     */
+    infoSectionLabel?: string;
+    /**
+     * Label for the schedule section heading
      */
-    footer?: React.ReactNode;
+    scheduleSectionLabel?: string;
     /**
-     * Custom slot for footer content (overrides footer prop)
+     * Label for the topic section heading
      */
-    footerSlot?: React.ReactNode;
+    topicSectionLabel?: string;
+    /**
+     * Label for the callback process info box heading
+     */
+    callbackProcessLabel?: string;
+    /**
+     * Description for the callback process info box
+     */
+    callbackProcessDescription?: string;
     /**
      * Additional CSS classes for the section
      */
@@ -89,15 +101,20 @@ interface ContactCallbackProps {
      */
     submitClassName?: string;
     /**
-     * Additional CSS classes for the footer
+     * Additional CSS classes for the success message
      */
-    footerClassName?: string;
+    successMessageClassName?: string;
+    /**
+     * Additional CSS classes for the error message
+     */
+    errorMessageClassName?: string;
     /**
      * Background style for the section
      */
     background?: SectionBackground;
     /**
      * Vertical spacing for the section
+     * @default "py-8 md:py-32"
      */
     spacing?: SectionSpacing;
     /**
@@ -110,56 +127,19 @@ interface ContactCallbackProps {
     patternOpacity?: number;
     /**
      * Optional form submission configuration.
-     *
-     * **Universal Usage**: Works with ANY REST API endpoint. Simply provide an `endpoint` URL
-     * and the form will submit to it in JSON format.
-     *
-     * @example
-     * // Works with any API
-     * formConfig={{ endpoint: "https://api.mysite.com/callback", format: "json" }}
-     *
-     * @example
-     * // With custom headers (e.g., authentication)
-     * formConfig={{
-     *   endpoint: "/api/callback",
-     *   headers: { "Authorization": "Bearer token123" }
-     * }}
-     *
-     * **Note**: The `apiKey`, `contactCategoryToken`, and other platform-specific fields
-     * are OPTIONAL and only needed when integrating with DashTrack's Rails backend.
-     * For generic REST APIs, just use `endpoint`, `method`, `format`, and `headers`.
-     *
-     * See `FORMS_INTEGRATION_GUIDE.md` for complete examples with Next.js, React, and more.
+     * See `FORMS_INTEGRATION_GUIDE.md` for complete examples.
      */
     formConfig?: PageSpeedFormConfig;
     /**
      * Optional custom submission handler for maximum flexibility.
-     *
-     * Use this when you need complete control over the submission logic,
-     * such as custom API calls, analytics tracking, or multi-step workflows.
-     *
-     * Can be used alone or in combination with `formConfig` for hybrid approaches.
-     *
-     * @example
-     * onSubmit={async (values) => {
-     *   await fetch("/api/callback", {
-     *     method: "POST",
-     *     body: JSON.stringify(values)
-     *   });
-     * }}
-     */
-    onSubmit?: (values: CallbackFormValues) => void | Promise<void>;
+     */
+    onSubmit?: (values: Record<string, unknown>) => void | Promise<void>;
     /**
      * Optional success callback invoked after successful submission.
-     *
-     * Called after `formConfig` submission and/or `onSubmit` completes successfully.
-     * Use for showing success messages, redirecting, analytics tracking, etc.
      */
     onSuccess?: (data: unknown) => void;
     /**
      * Optional error callback invoked if submission fails.
-     *
-     * Receives the error object for custom error handling, logging, or user notifications.
      */
     onError?: (error: Error) => void;
 }
@@ -178,6 +158,6 @@ interface ContactCallbackProps {
  * />
  * ```
  */
-declare function ContactCallback({ heading, description, buttonText, buttonIcon, actions, actionsSlot, footer, footerSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, footerClassName, background, spacing, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactCallbackProps): React.JSX.Element;
+declare function ContactCallback({ heading, description, buttonText, buttonIcon, actions, actionsSlot, formFields, successMessage, infoSectionLabel, scheduleSectionLabel, topicSectionLabel, callbackProcessLabel, callbackProcessDescription, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, successMessageClassName, errorMessageClassName, background, spacing, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactCallbackProps): React.JSX.Element;
 
 export { ContactCallback, type ContactCallbackProps };

package/dist/contact-callback.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { P as PageSpeedFormConfig } from './forms-nGgHUTBw.js';
+import { F as FormFieldConfig } from './form-field-types-flMXhIjG.js';
+import { P as PageSpeedFormConfig } from './forms-CStlFhnh.js';
 import { f as SectionBackground, g as SectionSpacing, s as PatternName } from './community-initiatives-AwBlQu1a.js';
 import { A as ActionConfig } from './blocks-ClXAGlHQ.js';
 import '@page-speed/forms/integration';
@@ -8,17 +9,6 @@ import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
-interface CallbackFormValues {
-    name: string;
-    company: string;
-    email: string;
-    phone: string;
-    date: string;
-    time: string;
-    timezone: string;
-    topic: string;
-    details: string;
-}
 interface ContactCallbackProps {
     /**
      * Main heading content
@@ -45,13 +35,35 @@ interface ContactCallbackProps {
      */
     actionsSlot?: React.ReactNode;
     /**
-     * Footer content (e.g., help text)
+     * Array of form field configurations
+     * If not provided, defaults to: name, company, email, phone, date, time, timezone, topic, details
+     */
+    formFields?: FormFieldConfig[];
+    /**
+     * Success message to display after form submission
+     * @default "Thank you! Your callback request has been received."
+     */
+    successMessage?: React.ReactNode;
+    /**
+     * Label for the information section heading
+     */
+    infoSectionLabel?: string;
+    /**
+     * Label for the schedule section heading
      */
-    footer?: React.ReactNode;
+    scheduleSectionLabel?: string;
     /**
-     * Custom slot for footer content (overrides footer prop)
+     * Label for the topic section heading
      */
-    footerSlot?: React.ReactNode;
+    topicSectionLabel?: string;
+    /**
+     * Label for the callback process info box heading
+     */
+    callbackProcessLabel?: string;
+    /**
+     * Description for the callback process info box
+     */
+    callbackProcessDescription?: string;
     /**
      * Additional CSS classes for the section
      */
@@ -89,15 +101,20 @@ interface ContactCallbackProps {
      */
     submitClassName?: string;
     /**
-     * Additional CSS classes for the footer
+     * Additional CSS classes for the success message
      */
-    footerClassName?: string;
+    successMessageClassName?: string;
+    /**
+     * Additional CSS classes for the error message
+     */
+    errorMessageClassName?: string;
     /**
      * Background style for the section
      */
     background?: SectionBackground;
     /**
      * Vertical spacing for the section
+     * @default "py-8 md:py-32"
      */
     spacing?: SectionSpacing;
     /**
@@ -110,56 +127,19 @@ interface ContactCallbackProps {
     patternOpacity?: number;
     /**
      * Optional form submission configuration.
-     *
-     * **Universal Usage**: Works with ANY REST API endpoint. Simply provide an `endpoint` URL
-     * and the form will submit to it in JSON format.
-     *
-     * @example
-     * // Works with any API
-     * formConfig={{ endpoint: "https://api.mysite.com/callback", format: "json" }}
-     *
-     * @example
-     * // With custom headers (e.g., authentication)
-     * formConfig={{
-     *   endpoint: "/api/callback",
-     *   headers: { "Authorization": "Bearer token123" }
-     * }}
-     *
-     * **Note**: The `apiKey`, `contactCategoryToken`, and other platform-specific fields
-     * are OPTIONAL and only needed when integrating with DashTrack's Rails backend.
-     * For generic REST APIs, just use `endpoint`, `method`, `format`, and `headers`.
-     *
-     * See `FORMS_INTEGRATION_GUIDE.md` for complete examples with Next.js, React, and more.
+     * See `FORMS_INTEGRATION_GUIDE.md` for complete examples.
      */
     formConfig?: PageSpeedFormConfig;
     /**
      * Optional custom submission handler for maximum flexibility.
-     *
-     * Use this when you need complete control over the submission logic,
-     * such as custom API calls, analytics tracking, or multi-step workflows.
-     *
-     * Can be used alone or in combination with `formConfig` for hybrid approaches.
-     *
-     * @example
-     * onSubmit={async (values) => {
-     *   await fetch("/api/callback", {
-     *     method: "POST",
-     *     body: JSON.stringify(values)
-     *   });
-     * }}
-     */
-    onSubmit?: (values: CallbackFormValues) => void | Promise<void>;
+     */
+    onSubmit?: (values: Record<string, unknown>) => void | Promise<void>;
     /**
      * Optional success callback invoked after successful submission.
-     *
-     * Called after `formConfig` submission and/or `onSubmit` completes successfully.
-     * Use for showing success messages, redirecting, analytics tracking, etc.
      */
     onSuccess?: (data: unknown) => void;
     /**
      * Optional error callback invoked if submission fails.
-     *
-     * Receives the error object for custom error handling, logging, or user notifications.
      */
     onError?: (error: Error) => void;
 }
@@ -178,6 +158,6 @@ interface ContactCallbackProps {
  * />
  * ```
  */
-declare function ContactCallback({ heading, description, buttonText, buttonIcon, actions, actionsSlot, footer, footerSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, footerClassName, background, spacing, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactCallbackProps): React.JSX.Element;
+declare function ContactCallback({ heading, description, buttonText, buttonIcon, actions, actionsSlot, formFields, successMessage, infoSectionLabel, scheduleSectionLabel, topicSectionLabel, callbackProcessLabel, callbackProcessDescription, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, successMessageClassName, errorMessageClassName, background, spacing, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactCallbackProps): React.JSX.Element;
 
 export { ContactCallback, type ContactCallbackProps };