Forms & Data Capture

// src/lib/optimizely/componentRegistry.ts
//
// Native form type schemas live here - NOT in src/components/**/*.tsx -
// so opti:push (which globs src/components/**/*.tsx) does not try to push
// them. They are already in the CMS after activation.

const OptiFormsContainerDataType = contentType({
  key: "OptiFormsContainerData",
  baseType: "_component",
  properties: {
    Title: { type: "string" }, Description: { type: "string" },
    SubmitUrl: { type: "url" }, SubmitConfirmationMessage: { type: "string" },
  },
});

// OptiFormsSelectionElement - field names differ from what you might guess:
//   Options (JSON scalar, not Items[])      AllowMultiSelect (not AllowMultipleChoices)
// Getting these wrong causes ALL pages to 404 - the SDK includes these fields in its
// auto-generated composition fragment, and Graph returns a schema error for unknown fields.
const OptiFormsSelectionElementType = contentType({
  key: "OptiFormsSelectionElement",
  baseType: "_component",
  properties: {
    Label: { type: "string" },
    AllowMultiSelect: { type: "boolean" },  // NOT AllowMultipleChoices
    Options: { type: "string" },            // JSON scalar in Graph, NOT an Items array
    Validators: { type: "string" },
  },
});

initContentTypeRegistry([
  ...otherTypes,
  OptiFormsContainerDataType,
  OptiFormsSelectionElementType,
  // OptiFormsTextboxElementType, OptiFormsTextareaElementType, OptiFormsSubmitElementType
]);

initReactComponentRegistry({ resolver: {
  OptiFormsContainerData: OptiFormsContainer,
  OptiFormsTextboxElement: OptiFormsTextbox,
  OptiFormsTextareaElement: OptiFormsTextarea,
  OptiFormsSelectionElement: OptiFormsSelection,
  OptiFormsSubmitElement: OptiFormsSubmit,
}});

// Native Optimizely Forms types - no contentType() needed, they are pre-registered
// in the CMS after activation. The SDK auto-generates GraphQL fragments from the
// schema hints in componentRegistry.ts so all properties are fetched automatically.

// src/components/blocks/OptiFormsContainer/index.tsx
export default function OptiFormsContainer(props) {
  const data = props.content ?? props;
  return (
    <section
      data-form-submit-url={data.SubmitUrl?.default ?? "/api/form-submit"}
      data-form-success-message={data.SubmitConfirmationMessage}
    >
      <h2>{data.Title}</h2>
      <p>{data.Description}</p>
    </section>
  );
}

// src/components/blocks/OptiFormsTextbox/index.tsx
export default function OptiFormsTextbox(props) {
  const data = props.content ?? props;
  const name = data.Label?.toLowerCase().replace(/\s+/g, "_") ?? "field";
  const required = isRequired(data.Validators);  // checks for RequiredValidator in JSON array
  return (
    <div>
      <label htmlFor={name}>{data.Label}{required && " *"}</label>
      <input id={name} name={name} type="text" placeholder={data.Placeholder} required={required} />
    </div>
  );
}

// src/components/blocks/OptiFormsSelection/index.tsx
// Options is a JSON scalar from Graph - parse it to get the choice array.
// AllowMultiSelect (boolean) controls single vs. multi-select.
export default function OptiFormsSelection(props) {
  const data = props.content ?? props;
  const items = data.Options ? JSON.parse(data.Options) : [];
  return (
    <select multiple={data.AllowMultiSelect ?? false}>
      {items.map((item, i) => (
        <option key={i} value={item.value ?? item.label}>{item.label}</option>
      ))}
    </select>
  );
}

// src/components/blocks/OptiFormsSubmit/index.tsx - "use client"
// Same DOM-scoped collection as before: scans closest("main") for all inputs,
// reads data-form-submit-url, validates required fields, POSTs JSON payload.

// src/app/api/form-submit/route.ts
export async function POST(request: NextRequest) {
  const body = await request.json();
  // body = { "Full Name": "Jane", "Email Address": "jane@...", "Message": "..." }
  // Keys are the Label values of each form element (slugified to snake_case).

  // Log the submission (swap for your CRM / ODP integration here)
  console.log("[Form Submission]", body);

  // To send to Optimizely Data Platform as a customer event:
  // await fetch("https://api.zaius.com/v3/events", {
  //   method: "POST",
  //   headers: { "x-api-key": process.env.ODP_API_KEY },
  //   body: JSON.stringify({ type: "form_submit", identifiers: { email: body.email }, data: body }),
  // });

  return NextResponse.json({ success: true });
}

// The submit to ODP to FX loop:

// 1. User submits the form (email captured in body.email)

// 2. /api/form-submit POSTs to ODP as a customer event
//    ODP builds a customer profile: { email, logged_in: true, ... }

// 3. Next request: FX evaluates "cms_personalization" flag for this user
//    Audience condition: logged_in = true to variation "returning_users"

// 4. [[...slug]]/page.tsx passes variation key to Graph
const [page] = await client.getContentByPath(url, {
  variation: {
    include: "SOME",
    value: ["returning_users"],
    includeOriginal: true,
  },
});

// 5. Graph returns the CMS variation an editor built in Visual Builder
//    specifically for logged-in / returning users
return <OptimizelyComponent content={page} />;