Fix PR comments

Feature: CMS-47083

Author: GiangNT95

packages/optimizely-cms-sdk/src/infer.ts

@@ -190,8 +190,12 @@ type InferFromDisplayTemplate<T extends DisplayTemplate> =
   T extends { settings: infer S }
     ? {
         [K in keyof S]:
-          S[K] extends { choices: Record<string, any> }
-            ? keyof S[K]['choices']
+          S[K] extends { choices: Record<string, any>; editor: infer E }
+            ? E extends 'select'
+              ? keyof S[K]['choices']
+              : E extends 'checkbox'
+                ? 'true' | 'false'
+                : never
             : never;
       }
     : {};

packages/optimizely-cms-sdk/src/model/__test__/parseDisplaySettings.test.ts

@@ -1,36 +1,54 @@
 import { describe, it, expect } from 'vitest';
 import { parseDisplaySettings } from '../displayTemplates.js';
 
+
 describe('parseDisplaySettings', () => {
   it('should parse valid display settings correctly', () => {
+    const template = {
+      settings: {
+        layout: { editor: 'select', choices: { grid: {}, list: {} } },
+        theme: { editor: 'select', choices: { dark: {}, light: {} } }
+      }
+    } as any;
+
     const input = [
       { key: 'layout', value: 'grid' },
-      { key: 'theme', value: 'dark' },
+      { key: 'theme', value: 'dark' }
     ];
-    const result = parseDisplaySettings(input);
+
+    const result = parseDisplaySettings(input, template);
     expect(result).toEqual({
       layout: 'grid',
-      theme: 'dark',
+      theme: 'dark'
     });
   });
 
-  it('should handle missing properties gracefully', () => {
-    const input = [{ key: 'layout', value: 'grid' }];
-    const result = parseDisplaySettings(input);
+  it('should handle checkbox correctly', () => {
+    const template = {
+      settings: {
+        showImage: { editor: 'checkbox', choices: {} }
+      }
+    } as any;
+
+    const input = [{ key: 'showImage', value: 'true' }];
+    const result = parseDisplaySettings(input, template);
     expect(result).toEqual({
-      layout: 'grid',
+      showImage: 'true'
     });
   });
 
-  it('should return an empty object for null input', () => {
+  it('should return undefined for null input', () => {
+    const template = { settings: {} } as any;
     const input = null;
-    const result = parseDisplaySettings(input ?? undefined);
+    const result = parseDisplaySettings(input, template);
     expect(result).toEqual({});
   });
 
-  it('should return an empty object for undefined input', () => {
+  it('should return undefined for undefined input', () => {
+    const template = { settings: {} } as any;
     const input = undefined;
-    const result = parseDisplaySettings(input);
+    const result = parseDisplaySettings(input, template);
     expect(result).toEqual({});
   });
 });
+

packages/optimizely-cms-sdk/src/model/displayTemplates.ts

@@ -62,30 +62,26 @@ export type DisplayTemplate<T = DisplayTemplateVariant> = T & {
   __type: 'displayTemplate';
 };
 
-// export function parseDisplaySettings(
-//   displaySettings?: DisplaySettingsType[] | null
-// ): Record<string, string> | undefined {
-//   if (!displaySettings) {
-//     return undefined; // Return undefined if displaySettings is not provided
-//   }
-
-//   const result: Record<string, string> = {}; // Initialize an empty object
-
-//   // Iterate over the input array
-//   for (const item of displaySettings) {
-//     // Assign the value to the key in the result object
-//     result[item.key] = item.value;
-//   }
-
-//   return result;
-// }
-
-export const parseDisplaySettings = <T extends DisplayTemplate>(
-  settings: DisplaySettingsType[] | null | undefined
-): Infer<DisplayTemplate> => {
-  const result = {} as Infer<T>;
-  settings?.forEach(s => {
-    result[s.key as keyof Infer<T>] = s.value as Infer<T>[keyof Infer<T>];
+
+export function parseDisplaySettings(
+  settings: DisplaySettingsType[] | null | undefined,
+  templateSettings: Record<string, { editor: string; choices: Record<string, any> }>
+): Record<string, string> {
+  if (!settings || settings.length === 0) return {};
+
+  const result: Record<string, string> = {};
+
+  settings.forEach(s => {
+    const settingDef = templateSettings[s.key];
+    if (!settingDef) return;
+
+    if (settingDef.editor === 'select') {
+      result[s.key] = s.value;
+    } else if (settingDef.editor === 'checkbox') {
+      result[s.key] = s.value === 'true' ? 'true' : 'false';
+    }
   });
+
   return result;
-};
+}
+

packages/optimizely-cms-sdk/src/react/server.tsx

@@ -10,10 +10,11 @@ import {
   ExperienceComponentNode,
   DisplaySettingsType,
   ExperienceCompositionNode,
+  Infer,
 } from '../infer.js';
 import { isComponentNode } from '../util/baseTypeUtil.js';
-import { parseDisplaySettings } from '../model/displayTemplates.js';
-import { getDisplayTemplateTag } from '../model/displayTemplateRegistry.js';
+import { DisplayTemplate, parseDisplaySettings } from '../model/displayTemplates.js';
+import { getDisplayTemplate, getDisplayTemplateTag } from '../model/displayTemplateRegistry.js';
 import { isDev } from '../util/environment.js';
 
 type ComponentType = React.ComponentType<any>;
@@ -70,7 +71,7 @@ export function initReactComponentRegistry(options: InitOptions) {
 }
 
 /** Props for the {@linkcode OptimizelyComponent} component */
-type OptimizelyComponentProps = {
+type OptimizelyComponentProps<T extends DisplayTemplate = DisplayTemplate> = {
   /** Data read from the CMS */
   opti: {
     /** Content type name */
@@ -87,7 +88,7 @@ type OptimizelyComponentProps = {
     __composition?: ExperienceCompositionNode;
   };
 
-  displaySettings?: Record<string, string>;
+  displaySettings?: Partial<Infer<T>>;
 };
 
 export async function OptimizelyComponent({
@@ -106,8 +107,7 @@ export async function OptimizelyComponent({
 
   if (!Component) {
     console.log(
-      `[optimizely-cms-sdk] No component found for content type ${
-        opti.__typename
+      `[optimizely-cms-sdk] No component found for content type ${opti.__typename
       } ${opti.__tag ? `with tag "${opti.__tag}"` : ''}`
     );
 
@@ -127,16 +127,16 @@ export async function OptimizelyComponent({
   );
 }
 
-export type StructureContainerProps = {
+export type StructureContainerProps<T extends DisplayTemplate = DisplayTemplate> = {
   node: ExperienceStructureNode;
   children: React.ReactNode;
   index?: number;
-  displaySettings?: Record<string, string>;
+  displaySettings?: Partial<Infer<T>>;
 };
-export type ComponentContainerProps = {
+export type ComponentContainerProps<T extends DisplayTemplate = DisplayTemplate> = {
   node: ExperienceComponentNode;
   children: React.ReactNode;
-  displaySettings?: Record<string, string>;
+  displaySettings?: Partial<Infer<T>>;
 };
 export type StructureContainer = (
   props: StructureContainerProps
@@ -154,7 +154,14 @@ export function OptimizelyExperience({
 }) {
   return nodes.map((node) => {
     const tag = getDisplayTemplateTag(node.displayTemplateKey);
-    const parsedDisplaySettings = parseDisplaySettings(node.displaySettings);
+    const template = node.displayTemplateKey
+      ? getDisplayTemplate(node.displayTemplateKey)
+      : null;
+
+    const parsedDisplaySettings = template
+      ? parseDisplaySettings(node.displaySettings, template.settings)
+      : {};
+      console.error(parsedDisplaySettings);
 
     if (isComponentNode(node)) {
       const Wrapper = ComponentWrapper ?? React.Fragment;
@@ -255,7 +262,13 @@ export function OptimizelyGridSection({
 
   return nodes.map((node, i) => {
     const tag = getDisplayTemplateTag(node.displayTemplateKey);
-    const parsedDisplaySettings = parseDisplaySettings(node.displaySettings);
+    const template = node.displayTemplateKey
+      ? getDisplayTemplate(node.displayTemplateKey)
+      : null;
+
+    const parsedDisplaySettings = template
+      ? parseDisplaySettings(node.displaySettings, template.settings)
+      : {};
 
     if (isComponentNode(node)) {
       return (