Fix PR comments

Feature: CMS-47083

Author: GiangNT95

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

@@ -1,54 +1,36 @@
 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, template.settings);
+    const result = parseDisplaySettings(input);
     expect(result).toEqual({
       layout: 'grid',
-      theme: 'dark'
+      theme: 'dark',
     });
   });
 
-  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.settings);
+  it('should handle missing properties gracefully', () => {
+    const input = [{ key: 'layout', value: 'grid' }];
+    const result = parseDisplaySettings(input);
     expect(result).toEqual({
-      showImage: 'true'
+      layout: 'grid',
     });
   });
 
-  it('should return undefined for null input', () => {
-    const template = { settings: {} } as any;
+  it('should return an empty object for null input', () => {
     const input = null;
-    const result = parseDisplaySettings(input, template.settings);
-    expect(result).toEqual({});
+    const result = parseDisplaySettings(input ?? undefined);
+    expect(result).toEqual(undefined);
   });
 
-  it('should return undefined for undefined input', () => {
-    const template = { settings: {} } as any;
+  it('should return an empty object for undefined input', () => {
     const input = undefined;
-    const result = parseDisplaySettings(input, template.settings);
-    expect(result).toEqual({});
+    const result = parseDisplaySettings(input);
+    expect(result).toEqual(undefined);
   });
-});
-
+});

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

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

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

@@ -14,7 +14,7 @@ import {
   Infer,
 } from '../infer.js';
 import { isComponentNode } from '../util/baseTypeUtil.js';
-import { DisplayTemplate, parseDisplaySettings } from '../model/displayTemplates.js';
+import { parseDisplaySettings } from '../model/displayTemplates.js';
 import { getDisplayTemplate, getDisplayTemplateTag } from '../model/displayTemplateRegistry.js';
 import { isDev } from '../util/environment.js';
 import { appendToken } from '../util/preview.js';
@@ -73,7 +73,7 @@ export function initReactComponentRegistry(options: InitOptions) {
 }
 
 /** Props for the {@linkcode OptimizelyComponent} component */
-type OptimizelyComponentProps<T extends DisplayTemplate = DisplayTemplate> = {
+type OptimizelyComponentProps = {
   /** Data read from the CMS */
   opti: {
     /** Content type name */
@@ -90,7 +90,7 @@ type OptimizelyComponentProps<T extends DisplayTemplate = DisplayTemplate> = {
     __composition?: ExperienceCompositionNode;
   };
 
-  displaySettings?: Partial<Infer<T>>;
+  displaySettings?: Record<string, string | boolean>;
 };
 
 export async function OptimizelyComponent({
@@ -108,11 +108,6 @@ export async function OptimizelyComponent({
   });
 
   if (!Component) {
-    console.log(
-      `[optimizely-cms-sdk] No component found for content type ${opti.__typename
-      } ${opti.__tag ? `with tag "${opti.__tag}"` : ''}`
-    );
-
     return (
       <FallbackComponent>
         No component found for content type <b>{opti.__typename}</b>
@@ -129,16 +124,16 @@ export async function OptimizelyComponent({
   );
 }
 
-export type StructureContainerProps<T extends DisplayTemplate = DisplayTemplate> = {
+export type StructureContainerProps = {
   node: ExperienceStructureNode;
   children: React.ReactNode;
   index?: number;
-  displaySettings?: Partial<Infer<T>>;
+  displaySettings?: Record<string, string | boolean>;
 };
-export type ComponentContainerProps<T extends DisplayTemplate = DisplayTemplate> = {
+export type ComponentContainerProps = {
   node: ExperienceComponentNode;
   children: React.ReactNode;
-  displaySettings?: Partial<Infer<T>>;
+  displaySettings?: Record<string, string | boolean>;
 };
 export type StructureContainer = (
   props: StructureContainerProps
@@ -161,9 +156,8 @@ export function OptimizelyExperience({
       : null;
 
     const parsedDisplaySettings = template
-      ? parseDisplaySettings(node.displaySettings, template.settings)
-      : {};
-      console.error(parsedDisplaySettings);
+      ? parseDisplaySettings(node.displaySettings)
+      : undefined;  
 
     if (isComponentNode(node)) {
       const Wrapper = ComponentWrapper ?? React.Fragment;
@@ -269,8 +263,8 @@ export function OptimizelyGridSection({
       : null;
 
     const parsedDisplaySettings = template
-      ? parseDisplaySettings(node.displaySettings, template.settings)
-      : {};
+      ? parseDisplaySettings(node.displaySettings)
+      : undefined;
 
     if (isComponentNode(node)) {
       return (