[Nextjs][Personalize] Productize layout response transform

packages/create-sitecore-jss/src/templates/nextjs-personalize/src/lib/page-props-factory/plugins/personalize.ts

@@ -1,6 +1,6 @@
 import { GetServerSidePropsContext, GetStaticPropsContext } from 'next';
 import { Plugin } from '..';
-import { personalizeLayout } from 'lib/layout-personalizer';
+import { personalizeLayout } from '@sitecore-jss/sitecore-jss-nextjs';
 import { SitecorePageProps } from 'lib/page-props';
 
 class PersonalizePlugin implements Plugin {

packages/create-sitecore-jss/src/templates/nextjs/src/pages/_middleware.ts

@@ -1,7 +1,7 @@
-import type { NextRequest } from 'next/server';
+import type { NextRequest, NextFetchEvent } from 'next/server';
 import middleware from 'lib/middleware';
 
 // eslint-disable-next-line
-export default async function (req: NextRequest) {
-  return middleware(req);
+export default async function (req: NextRequest, ev: NextFetchEvent) {
+  return middleware(req, ev);
 }

packages/sitecore-jss-nextjs/src/index.ts

@@ -51,6 +51,7 @@ export {
   RestDictionaryService,
   RestDictionaryServiceConfig,
 } from '@sitecore-jss/sitecore-jss/i18n';
+export { personalizeLayout } from '@sitecore-jss/sitecore-jss/personalize';
 export {
   RobotsQueryResult,
   GraphQLRobotsService,

packages/sitecore-jss/personalize.d.ts

@@ -0,0 +1 @@
+export * from './types/personalize/index';

packages/sitecore-jss/personalize.js

@@ -0,0 +1 @@
+module.exports = require('./dist/cjs/personalize/index');

packages/sitecore-jss/src/personalize/index.ts

@@ -0,0 +1 @@
+export { personalizeLayout } from './layout-personalizer';

packages/sitecore-jss/src/personalize/layout-personalizer.test.ts

@@ -0,0 +1,68 @@
+import { expect } from 'chai';
+import * as personalize from './layout-personalizer';
+import { ComponentRenderingWithExperiences } from './layout-personalizer';
+import {
+  layoutData,
+  componentsArray,
+  component,
+  componentsWithExperiencesArray,
+  componentWithExperiences,
+  layoutDataWithoutPlaceholder,
+  withoutComponentName,
+  segmentIsNull,
+} from '../test-data/personalizeData';
+
+const { personalizeLayout, personalizePlaceholder, personalizeComponent } = personalize;
+
+describe('layout-personalizer', () => {
+  describe('personalizeLayout', () => {
+    it('should not return anything', () => {
+      const segment = 'test';
+      const personalizedLayoutResult = personalizeLayout(layoutData, segment);
+      expect(personalizedLayoutResult).to.equal(undefined);
+    });
+
+    it('should return undefined if no placeholders', () => {
+      const segment = 'test';
+      const personalizedLayoutResult = personalizeLayout(layoutDataWithoutPlaceholder, segment);
+      expect(personalizedLayoutResult).to.equal(undefined);
+    });
+  });
+
+  describe('personalizePlaceholder', () => {
+    it('should return array of personalized components', () => {
+      const segment = 'mountain_bike_audirnce';
+      const personalizedPlaceholderResult = personalizePlaceholder(componentsArray, segment);
+      expect(personalizedPlaceholderResult).to.deep.equal(componentsWithExperiencesArray);
+    });
+  });
+
+  describe('personalizeComponent', () => {
+    it('should return personalized component', () => {
+      const segment = 'mountain_bike_audirnce';
+      const personalizedComponentResult = personalizeComponent(
+        (component as unknown) as ComponentRenderingWithExperiences,
+        segment
+      );
+      expect(personalizedComponentResult).to.deep.equal(componentWithExperiences);
+    });
+
+    it('should return null when segmentVariant is null', () => {
+      const segment = 'mountain_bike_audirnce';
+      const personalizedComponentResult = personalizeComponent(
+        (segmentIsNull as unknown) as ComponentRenderingWithExperiences,
+        segment
+      );
+      expect(personalizedComponentResult).to.equal(null);
+    });
+
+    it('should return null when segmentVariant and componentName is undefined', () => {
+      const segment = 'test';
+      const personalizedComponentResult = personalizeComponent(
+        (withoutComponentName as unknown) as ComponentRenderingWithExperiences,
+        segment
+      );
+      expect(personalizedComponentResult).to.equal(null);
+    });
+  });
+});

packages/sitecore-jss/src/personalize/layout-personalizer.ts

@@ -0,0 +1,73 @@
+import { LayoutServiceData, ComponentRendering, HtmlElementRendering } from './../layout/models';
+
+// NULL means Hidden by this experience
+export type ComponentRenderingWithExperiences = ComponentRendering & {
+  experiences: { [name: string]: ComponentRenderingWithExperiences | null };
+};
+
+// recursive go through all placeholders/components and check experiences node, replace default with object from specific experience
+/**
+ * @param {LayoutServiceData} layout Layout data
+ * @param {string} segment segmentId
+ */
+export function personalizeLayout(layout: LayoutServiceData, segment: string): void {
+  const placeholders = layout.sitecore.route?.placeholders;
+  if (Object.keys(placeholders ?? {}).length === 0) {
+    return;
+  }
+  if (placeholders) {
+    Object.keys(placeholders).forEach((placeholder) => {
+      placeholders[placeholder] = personalizePlaceholder(placeholders[placeholder], segment);
+    });
+  }
+}
+
+/**
+ * @param {Array} components components within placeholder
+ * @param {string} segment segmentId
+ */
+export function personalizePlaceholder(
+  components: Array<ComponentRendering | HtmlElementRendering>,
+  segment: string
+): Array<ComponentRendering | HtmlElementRendering> {
+  return components.map((_, i) =>
+    (<ComponentRenderingWithExperiences>components[i]).experiences !== undefined
+      ? (personalizeComponent(<ComponentRenderingWithExperiences>components[i], segment) as
+          | ComponentRendering
+          | HtmlElementRendering)
+      : components[i]
+  );
+}
+
+/**
+ * @param {ComponentRenderingWithExperiences} component component with experiences
+ * @param {string} segment segmentId
+ */
+export function personalizeComponent(
+  component: ComponentRenderingWithExperiences,
+  segment: string
+): ComponentRendering | null {
+  const segmentVariant = component.experiences[segment];
+  if (segmentVariant === undefined && component.componentName === undefined) {
+    // DEFAULT IS HIDDEN
+    return null;
+  } else if (Object.keys(segmentVariant ?? {}).length === 0) {
+    // HIDDEN
+    return null;
+  } else if (segmentVariant) {
+    component = segmentVariant;
+  }
+
+  if (!component.placeholders) return component;
+
+  Object.keys(component?.placeholders).forEach((placeholder) => {
+    if (component.placeholders) {
+      component.placeholders[placeholder] = personalizePlaceholder(
+        component.placeholders[placeholder],
+        segment
+      );
+    }
+  });
+
+  return component;
+}