Follow up - Engage upgrade (#1633)

* refactor middleware, upgrade engage to latest

* update changelog

* preserve cookie response

* Update packages/sitecore-jss-nextjs/src/middleware/personalize-middleware.ts

Co-authored-by: Adam Brauer <[email protected]>

* fix test related to cookies

---------

Co-authored-by: Adam Brauer <[email protected]>

Author: addy-pathania

CHANGELOG.md

@@ -23,6 +23,16 @@ Our versioning strategy is as follows:
 * `[templates/nextjs-sxa]` Fix shown horizontal scrollbar in EE mode. ([#1625](https://github.com/Sitecore/jss/pull/1625)), ([#1626](https://github.com/Sitecore/jss/pull/1626))
 * `[sitecore-jss-nextjs]` Fix issue when redirects works each every other times. ([#1629](https://github.com/Sitecore/jss/pull/1629))
 
+## 21.5.0
+
+### 🐛 Bug Fixes
+
+* `[templates/nextjs-personalize]` Fix cookie domain for localhost ([#1609](https://github.com/Sitecore/jss/pull/1609)) 
+
+### 🛠 Breaking Changes
+
+* `[templates/nextjs]` `[sitecore-jss-nextjs]` Upgrade of @sitecore/engage to 1.4.0, now this dependency has been added as a peer dependency to @sitecore-jss-nextjs package in order to replace the existing CDP service in the @sitecore-jss/sitecore-jss with the new functions/features introduced in the engage SDK. ([#1609](https://github.com/Sitecore/jss/pull/1609)) ([#1633](https://github.com/Sitecore/jss/pull/1633))
+
 ## 21.4.0
 
 ### 🎉 New Features & Improvements
@@ -68,14 +78,9 @@ Our versioning strategy is as follows:
 * `[templates/nextjs-sxa]` Don't let Image component wrap <img> with <a> tag when TargetUrl is not configured. ([#1593](https://github.com/Sitecore/jss/issues/1593))
 * `[templates/nextjs]` Next config header plugin for CORS. ([#1597](https://github.com/Sitecore/jss/pull/1597))
 * `[templates/nextjs]` Ensure dictionary data is only fetched when layout data is present for a route ([#1608](https://github.com/Sitecore/jss/pull/1608)) 
-* `[templates/nextjs-personalize]` Fix cookie domain for localhost ([#1609](https://github.com/Sitecore/jss/pull/1609)) 
 * `[sitecore-jss-react-forms]` Form should be blocked while submit is in progress to avoid submit spam ([#1611](https://github.com/Sitecore/jss/pull/1611))
 * `[templates/nextjs]` Fix linting errors, fix type error by upgrading @react/types to v18.2.22 ([#1613](https://github.com/Sitecore/jss/pull/1613))
 
-### 🛠 Breaking Changes
-
-* `[templates/nextjs]` `[sitecore-jss-nextjs]` Upgrade @sitecore/engage to 1.4.0 also, this dependency has been added to @sitecore-jss-nextjs package to make use of the latest features from the SDK.  ([#1609](https://github.com/Sitecore/jss/pull/1609))
-
 ## 21.3.1
 
 ### 🐛 Bug Fixes

packages/create-sitecore-jss/src/templates/nextjs-personalize/package.json

@@ -1,5 +1,5 @@
 {
   "dependencies": {
-    "@sitecore/engage": "^1.4.0"
+    "@sitecore/engage": "^1.4.1"
   }
 }

packages/sitecore-jss-nextjs/package.json

@@ -30,7 +30,7 @@
     "url": "https://github.com/sitecore/jss/issues"
   },
   "devDependencies": {
-    "@sitecore/engage": "^1.4.0",
+    "@sitecore/engage": "^1.4.1",
     "@types/chai": "^4.3.4",
     "@types/chai-as-promised": "^7.1.5",
     "@types/chai-string": "^1.4.2",
@@ -66,7 +66,7 @@
     "typescript": "~4.9.4"
   },
   "peerDependencies": {
-    "@sitecore/engage": "^1.4.0",
+    "@sitecore/engage": "^1.4.1",
     "next": "^13.4.16",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

packages/sitecore-jss-nextjs/src/middleware/personalize-middleware.test.ts

@@ -114,6 +114,9 @@ describe('PersonalizeMiddleware', () => {
         get(key) {
           return { value: res.cookies[key] };
         },
+        getAll() {
+          return Object.keys(res.cookies).map((key) => ({ name: key, value: res.cookies[key] }));
+        },
         ...props.cookieValues,
       },
       headers: {
@@ -799,7 +802,7 @@ describe('PersonalizeMiddleware', () => {
 
       const finalRes = await middleware.getHandler()(req, res);
 
-      expect(engageServer.called).to.be.true;
+      expect(engageServer.called).to.be.false;
 
       expect(getPersonalizeInfo.called).to.be.true;
       expect(errorSpy.getCall(0).calledWith('Personalize middleware failed:')).to.be.true;

packages/sitecore-jss-nextjs/src/middleware/personalize-middleware.ts

@@ -101,13 +101,18 @@ export class PersonalizeMiddleware extends MiddlewareBase {
     };
   }
 
-  protected initializeEngageServer(site: SiteInfo, language: string): EngageServer {
+  protected initializeEngageServer(
+    hostName: string,
+    site: SiteInfo,
+    language: string
+  ): EngageServer {
     const engageServer = initServer({
       clientKey: this.config.cdpConfig.clientKey,
       targetURL: this.config.cdpConfig.endpoint,
       pointOfSale: this.config.getPointOfSale
         ? this.config.getPointOfSale(site, language)
         : PosResolver.resolve(site, language),
+      cookieDomain: hostName,
       forceServerCookieMode: true,
     });
 
@@ -171,16 +176,6 @@ export class PersonalizeMiddleware extends MiddlewareBase {
     }
 
     const site = this.getSite(req, response);
-    const engageServer = this.initializeEngageServer(site, language);
-
-    // creates the browser ID cookie on the server side
-    // and includes the cookie in the response header
-    try {
-      await engageServer.handleCookie(req, response, timeout);
-    } catch (error) {
-      debug.personalize('skipped (browser id generation failed)');
-      throw error;
-    }
 
     // Get personalization info from Experience Edge
     const personalizeInfo = await this.personalizeService.getPersonalizeInfo(
@@ -199,6 +194,16 @@ export class PersonalizeMiddleware extends MiddlewareBase {
       return response;
     }
 
+    const engageServer = this.initializeEngageServer(hostname, site, language);
+
+    // creates the browser ID cookie on the server side
+    // and includes the cookie in the response header
+    try {
+      await engageServer.handleCookie(req, response, timeout);
+    } catch (error) {
+      debug.personalize('skipped (browser id generation failed)');
+      throw error;
+    }
     const params = this.getExperienceParams(req);
 
     debug.personalize('executing experience for %s %s %o', personalizeInfo.contentId, params);
@@ -240,18 +245,27 @@ export class PersonalizeMiddleware extends MiddlewareBase {
     const rewritePath = getPersonalizedRewrite(basePath, { variantId });
     // Note an absolute URL is required: https://nextjs.org/docs/messages/middleware-relative-urls
     const rewriteUrl = req.nextUrl.clone();
+
+    // Preserve cookies from previous response
+    const cookies = response.cookies.getAll();
+
     rewriteUrl.pathname = rewritePath;
-    response = NextResponse.rewrite(rewriteUrl);
+    response = NextResponse.rewrite(rewriteUrl, response);
 
     // Disable preflight caching to force revalidation on client-side navigation (personalization may be influenced)
     // See https://github.com/vercel/next.js/issues/32727
     response.headers.set('x-middleware-cache', 'no-cache');
-    // Share rewrite path with following executed middlewares
+    // Share rewrite path with following executed middleware
     response.headers.set('x-sc-rewrite', rewritePath);
-
     // Share site name with the following executed middlewares
     response.cookies.set(this.SITE_SYMBOL, site.name);
 
+    // Restore cookies from previous response since
+    // browserId cookie gets omitted after rewrite
+    cookies.forEach((cookie) => {
+      response.cookies.set(cookie);
+    });
+
     debug.personalize('personalize middleware end in %dms: %o', Date.now() - startTimestamp, {
       rewritePath,
       headers: this.extractDebugHeaders(response.headers),

yarn.lock

@@ -6623,7 +6623,7 @@ __metadata:
     "@sitecore-jss/sitecore-jss": 21.6.0-canary.6
     "@sitecore-jss/sitecore-jss-dev-tools": 21.6.0-canary.6
     "@sitecore-jss/sitecore-jss-react": 21.6.0-canary.6
-    "@sitecore/engage": ^1.4.0
+    "@sitecore/engage": ^1.4.1
     "@types/chai": ^4.3.4
     "@types/chai-as-promised": ^7.1.5
     "@types/chai-string": ^1.4.2
@@ -6663,7 +6663,7 @@ __metadata:
     ts-node: ^10.9.1
     typescript: ~4.9.4
   peerDependencies:
-    "@sitecore/engage": ^1.4.0
+    "@sitecore/engage": ^1.4.1
     next: ^13.4.16
     react: ^18.2.0
     react-dom: ^18.2.0
@@ -6914,10 +6914,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sitecore/engage@npm:^1.4.0":
-  version: 1.4.0
-  resolution: "@sitecore/engage@npm:1.4.0"
-  checksum: f656045dfcb65f63ff44af195c9ae92d375a237bdf91a4638e9d296df2d143837145f13ca033aeabd03323c900ee5c78249d2967c7665368fde82ef2e758ad43
+"@sitecore/engage@npm:^1.4.1":
+  version: 1.4.1
+  resolution: "@sitecore/engage@npm:1.4.1"
+  checksum: 582b7a55ba407765def12518114790fb1735c359e60fe4594102a5e643539b148a494b02bf71970bcafc807b92fe19a1ab8ff7c2af3db2c080ab36ec2eb16d57
   languageName: node
   linkType: hard