[sitecore-jss-proxy] Ensure page variants can be switched in Pages

CHANGELOG.md

@@ -39,7 +39,7 @@ Our versioning strategy is as follows:
   * `proxyAppDestination` arg can be passed into `create-sitecore-jss` command to define path for proxy to be installed in
 * `[templates/angular]` `[templates/angular-xmcloud]` `[template/node-xmcloud-proxy]` `[sitecore-jss-proxy]` Introduced /api/editing/config endpoint ([#1903](https://github.com/Sitecore/jss/pull/1903))
 * `[templates/angular]` `[templates/angular-xmcloud]` `[template/node-xmcloud-proxy]` `[sitecore-jss-proxy]` Introduced /api/editing/render endpoint ([#1908](https://github.com/Sitecore/jss/pull/1908))
-* `[templates/angular-xmcloud]` `[template/node-xmcloud-proxy]` Personalization support ([#1964](https://github.com/Sitecore/jss/pull/1964))
+* `[templates/angular-xmcloud]` `[template/node-xmcloud-proxy]` Personalization support ([#1964](https://github.com/Sitecore/jss/pull/1964)[#1971](https://github.com/Sitecore/jss/pull/1971))
 * `[create-sitecore-jss]``[sitecore-jss-angular]``[template/angular-xmcloud]` Angular SXA components
   * Angular placeholder now supports SXA components ([#1870](https://github.com/Sitecore/jss/pull/1870))
   * Component styles ([#1917](https://github.com/Sitecore/jss/pull/1917))

packages/create-sitecore-jss/src/templates/angular-xmcloud/.env

@@ -12,10 +12,3 @@ PROXY_HOST=http://localhost:3000
 
 # Your XM Cloud Proxy server path is needed to build the app. The build output will be copied to the proxy server path.
 PROXY_BUILD_PATH=<%- locals.relativeProxyAppDestination.replace(/\\/g, '\\\\') %>dist
-
-# ==============================================
-
-# An optional Sitecore Personalize scope identifier.
-# This can be used to isolate personalization data when multiple XM Cloud Environments share a Personalize tenant.
-# This should match the PAGES_PERSONALIZE_SCOPE environment variable for your connected XM Cloud Environment.
-PERSONALIZE_SCOPE=

packages/sitecore-jss-proxy/src/middleware/editing/render.test.ts

@@ -4,6 +4,7 @@ import sinon from 'sinon';
 import express from 'express';
 import request from 'supertest';
 import { editingRouter, EditingRouterConfig } from './index';
+import { getPersonalizeLayoutData } from '../../personalize/test-data/personalizeData';
 import { debug, GraphQLRequestClient } from '@sitecore-jss/sitecore-jss';
 import {
   GraphQLEditingService,
@@ -328,6 +329,49 @@ describe('editingRouter - /editing/render', () => {
       .end(done);
   });
 
+  it('should response 200 status code when layout is personalized and renderView returns result', (done) => {
+    const layoutData = getPersonalizeLayoutData('default');
+    const dictionary = {};
+    const personalizeQs = {
+      ...validQS,
+      sc_variant: 'mountain-bike-audience',
+    };
+    fetchEditingDataStub.resolves({
+      layoutData,
+      dictionary,
+    });
+
+    renderView.callsFake((callback) => callback(null, { html: '<div>Hello World</div>' }));
+
+    app.use(
+      '/api/editing',
+      editingRouter({
+        ...defaultOptions,
+        render: {
+          ...defaultOptions.render,
+          renderView,
+        },
+      })
+    );
+
+    const personalizedLayoutData = getPersonalizeLayoutData('mountain-bike-audience');
+
+    request(app)
+      .get('/api/editing/render')
+      .query(personalizeQs)
+      .expect(200, '<div>Hello World</div>')
+      .expect('Content-Security-Policy', `${getSCPHeader()}`)
+      .expect(() => {
+        expect(fetchEditingDataStub.calledOnceWith(fetchEditingDataArgs)).to.be.true;
+        expect(
+          renderView.calledOnceWith(sinon.match.func, '/', personalizedLayoutData, {
+            dictionary,
+          })
+        ).to.be.true;
+      })
+      .end(done);
+  });
+
   it('should response 200 status code when renderView return result and custom endpoint path is used', (done) => {
     const layoutData = {
       sitecore: {

packages/sitecore-jss-proxy/src/middleware/editing/render.ts

@@ -7,6 +7,12 @@ import {
   EDITING_ALLOWED_ORIGINS,
   RenderMetadataQueryParams,
 } from '@sitecore-jss/sitecore-jss/editing';
+import { PersonalizeHelper } from '../../personalize';
+import {
+  DEFAULT_VARIANT,
+  getGroomedVariantIds,
+  personalizeLayout,
+} from '@sitecore-jss/sitecore-jss/personalize';
 
 /**
  * Configuration for the editing render endpoint
@@ -26,6 +32,10 @@ export type EditingRenderEndpointOptions = {
    * The appRenderer will produce the requested route's html
    */
   renderView: AppRenderer;
+  /**
+   * Personalize helper instance passed from proxy app
+   */
+  personalizeHelper?: PersonalizeHelper;
 };
 
 type MetadataRequest = Request & { query: RenderMetadataQueryParams };
@@ -80,6 +90,14 @@ export const editingRenderMiddleware = (config: EditingRenderEndpointOptions) =>
       throw new Error(`Unable to fetch editing data for ${JSON.stringify(query)}`);
     }
 
+    const variantIds = query.sc_variant?.split(',') || [DEFAULT_VARIANT];
+    const personalizeData = getGroomedVariantIds(variantIds);
+    personalizeLayout(
+      data.layoutData,
+      personalizeData.variantId,
+      personalizeData.componentVariantIds
+    );
+
     const viewBag = { dictionary: data.dictionary };
 
     config.renderView(