Contracts, Mappings & Bindings

// optimizely.config.mjs
//
// Properties shared by ArticlePage and CaseStudyPage, defined once.
// contract() is exported by @optimizely/cms-sdk since 2.1.0.

import { contract } from "@optimizely/cms-sdk";

export const EditorialContentContract = contract({
  key: "EditorialContent",
  displayName: "Editorial Content",
  properties: {
    title:     { type: "string",           displayName: "Title",     indexingType: "searchable", isLocalized: true },
    summary:   { type: "string",           displayName: "Summary",   indexingType: "searchable", isLocalized: true },
    heroImage: { type: "contentReference", displayName: "Hero Image", allowedTypes: ["_image"] },
    tags:      { type: "array",            displayName: "Tags",      indexingType: "queryable",  items: { type: "string" } },
  },
});

// optimizely.config.mjs
//
// Both types declare  extends: [SEOContract, EditorialContentContract].
// No duplicated field definitions - contentType() merges the contract
// properties into the type at definition time.

export const ArticlePageType = contentType({
  key: "ArticlePage",
  baseType: "_page",
  extends: [SEOContract, EditorialContentContract],
  properties: {
    body:        { type: "richText",         displayName: "Body",         indexingType: "searchable", isLocalized: true },
    author:      { type: "contentReference", displayName: "Author",       allowedTypes: ["AuthorBlock"] },
    publishDate: { type: "dateTime",         displayName: "Publish Date", indexingType: "queryable" },
    category:    { type: "string",           displayName: "Category",     indexingType: "queryable", enum: CATEGORY_ENUM },
    relatedArticles: { type: "array", items: { type: "contentReference", allowedTypes: ["ArticlePage"] } },
  },
});

export const CaseStudyPageType = contentType({
  key: "CaseStudyPage",
  baseType: "_page",
  extends: [SEOContract, EditorialContentContract],
  properties: {
    clientName: { type: "string",   displayName: "Client Name", indexingType: "queryable", isLocalized: true },
    industry:   { type: "string",   displayName: "Industry",    indexingType: "queryable", enum: CATEGORY_ENUM },
    challenge:  { type: "richText", displayName: "Challenge",   indexingType: "searchable", isLocalized: true },
    solution:   { type: "richText", displayName: "Solution",    indexingType: "searchable", isLocalized: true },
    // ...outcomes, testimonial, relatedCaseStudies
  },
});

// src/lib/optimizely/componentRegistry.ts
//
// Contracts do NOT need to be registered. contentType() merges the
// contract's properties into the type object at definition time, so the
// registry (and the SDK's generated Graph fragments) see the full
// property set on each type.

initContentTypeRegistry([
  ArticlePageType,            // ← extends [SEOContract, EditorialContentContract]
  CaseStudyPageType,          // ← extends [SEOContract, EditorialContentContract]
  // ...other types
]);

const token = await getManagementToken(); // OAuth2 client_credentials

await fetch("https://api.cms.optimizely.com/v1/contenttypebindings", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${token}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    key: "ArticleTeaserBinding",   // unique identifier for this binding definition
    from: "ArticlePage",           // source content type
    to: "ArticleTeaser",           // target content type

    // propertyMappings: keys are target property names, values reference source
    // properties. Use dot notation to reach into nested component properties.
    propertyMappings: {
      teaserTitle:   { from: "title" },
      teaserSummary: { from: "summary" },
      teaserImage:   { from: "heroImage" },        // top-level property
      teaserAuthor:  { from: "metadata.author" },  // nested via dot notation
    },
  }),
});

// List all bindings:
GET  https://api.cms.optimizely.com/v1/contenttypebindings

// Get one binding:
GET  https://api.cms.optimizely.com/v1/contenttypebindings/ArticleTeaserBinding

// Partial update (only send changed mappings):
PATCH https://api.cms.optimizely.com/v1/contenttypebindings/ArticleTeaserBinding
{
  "propertyMappings": {
    "teaserImage": { "from": "hero.image" }
  }
}

// Delete:
DELETE https://api.cms.optimizely.com/v1/contenttypebindings/ArticleTeaserBinding

// These are CMS-internal type names (not SDK "type:" values).
// Most pairs must match exactly; ShortString has some flexibility:
//
// ShortString → ShortString, LongString, XHTMLString, LinkItem, URL  ✓
// LongString  → LongString, XHTMLString                               ✓
// Integer     → Integer only                                           ✓
// DateTime    → DateTime only                                          ✓
// ContentRef  → ContentRef (same allowedTypes)                         ✓
//
// SDK type mapping:
//   string    ≈ ShortString
//   richText  ≈ XHTMLString / LongString
//   url       ≈ URL / LinkItem
//   integer   ≈ Integer
//   dateTime  ≈ DateTime
//   contentReference ≈ ContentRef

const token = await getManagementToken();

// Create a new ArticleTeaser bound to an existing ArticlePage:
await fetch("https://api.cms.optimizely.com/v1/content", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${token}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    contentType: "ArticleTeaser",
    initialVersion: {
      locale: "en",
      displayName: "Article Teaser (Bound)",
      binding: {
        contentTypeBinding: "ArticleTeaserBinding",
        source: "cms://content/256c585881ad452dbd6df90eafadb137?loc=en",
      },
    },
  }),
});

// The teaser's teaserTitle / teaserSummary / teaserImage are now populated
// from the linked ArticlePage and stay in sync on every publish.

// To bind a single component property rather than the whole item,
// nest the binding inside the property value:

await fetch("https://api.cms.optimizely.com/v1/content", {
  method: "POST",
  headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json" },
  body: JSON.stringify({
    contentType: "LandingPage",
    initialVersion: {
      locale: "en",
      displayName: "Landing Page",
      properties: {
        featuredTeaser: {
          value: {
            binding: {
              contentTypeBinding: "ArticleTeaserBinding",
              source: "cms://content/256c585881ad452dbd6df90eafadb137?loc=en",
            },
          },
        },
      },
    },
  }),
});