[nextjs] Update personalize-middleware for CloudSDK 0.4.0

CHANGELOG.md

@@ -98,6 +98,7 @@ Our versioning strategy is as follows:
 * `[templates/nextjs-xmcloud]` `@sitecore/components` dependency has been updated to 2.0.0 ([#1933](https://github.com/Sitecore/jss/pull/1933)) 
 * `[templates/nextjs-xmcloud]` `lib/context` import has been removed. Values from `temp/config` can be used instead. ([#1933](https://github.com/Sitecore/jss/pull/1933)) 
 * `[sitecore-jss-nextjs]` `Context` import and `@sitecore-jss/sitecore-jss-nextjs/context` submodule have been removed. ([#1933](https://github.com/Sitecore/jss/pull/1933)) 
+* `[sitecore-jss-nextjs]``[templates/nextjs-xmcloud]` add new property `enablePersonalizeCookie` to PersonalizeMiddlewareConfig and pass it to CloudSDK.addPersonalize() function; update personalize plugin to set it to true by default ([#1963](https://github.com/Sitecore/jss/pull/1963))
 
 
 ## 22.1.4

docs/upgrades/22.x/22.2.md

@@ -124,6 +124,27 @@
         export default BYOCInit;
     ```
 
+* Update `src/lib/middleware/plugins/personalize.ts` to pass the new `enablePersonalizeCookie` property to PersonalizeMiddleware:
+    * find the initialization of PersonalizeMiddleware and add to its configuration object the 'enablePersonalizeCookie' setting, so that A/B testing and personalization are enabled:
+    ```ts
+        ...
+        this.personalizeMiddleware = new PersonalizeMiddleware({
+            // Configuration for your Sitecore Experience Edge endpoint
+            edgeConfig: {
+                ...
+            },
+            // Configuration for your Sitecore CDP endpoint
+            cdpConfig: {
+                ...
+            },
+            ...
+            // sets the enablePersonalizeCookie setting of cloud sdk personalize;
+            // set to true to enable A/B testing and personalization
+            enablePersonalizeCookie: true,
+        });
+        ...
+    ```
+
 * If you have any other instances of using CloudSDK in your app, follow the CloudSDK 0.4.0 upgrade guide.
 
 * Remove any other `lib/context` import, if present. If you used `context.getSDK()` method, you can now use CloudSDK method calls directly. If `context` was used to retrieve other values, consider using `temp/config` instead.

packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/middleware/plugins/personalize.ts

@@ -21,7 +21,6 @@ class PersonalizePlugin implements MiddlewarePlugin {
   order = 1;
 
   constructor() {
-
     this.personalizeMiddleware = new PersonalizeMiddleware({
       // Configuration for your Sitecore Experience Edge endpoint
       edgeConfig: {
@@ -42,6 +41,9 @@ class PersonalizePlugin implements MiddlewarePlugin {
       },
       // Optional Sitecore Personalize scope identifier.
       scope: process.env.NEXT_PUBLIC_PERSONALIZE_SCOPE,
+      // sets the enablePersonalizeCookie setting of cloud sdk personalize;
+      // set to true to enable A/B testing and personalization
+      enablePersonalizeCookie: true,
       // This function determines if the middleware should be turned off.
       // IMPORTANT: You should implement based on your cookie consent management solution of choice.
       // You may wish to keep it disabled while in development mode.

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

@@ -45,6 +45,10 @@ export type PersonalizeMiddlewareConfig = MiddlewareBaseConfig & {
    * Configuration for your Sitecore CDP endpoint
    */
   cdpConfig: CdpServiceConfig;
+  /**
+   * Flag to set the enablePersonalizeCookie setting of cloud sdk personalize; if omitted, defaults to false
+   */
+  enablePersonalizeCookie?: boolean;
   /**
    * Optional Sitecore Personalize scope identifier allowing you to isolate your personalization data between XM Cloud environments
    */
@@ -127,7 +131,7 @@ export class PersonalizeMiddleware extends MiddlewareBase {
       cookieDomain: hostname,
       enableServerCookie: true,
     })
-      .addPersonalize()
+      .addPersonalize({ enablePersonalizeCookie: this.config.enablePersonalizeCookie ?? false })
       .initialize();
   }