Updates per PR feedback

CHANGELOG.md

@@ -14,6 +14,7 @@ Our versioning strategy is as follows:
 ### 🐛 Bug Fixes
 
 * `[templates/nextjs]` `[templates/react]` `[templates/vue]` `[templates/angular]` Changed formatting in temp/config to prevent parse issues in Unix systems ([#1787](https://github.com/Sitecore/jss/pull/1787))([#1791](https://github.com/Sitecore/jss/pull/1791))
+* `[sitecore-jss]` `GraphQLRequestClientFactory` type is updated and `config` parameter is now optional. Since it should match `GraphQLRequestClient.createClientFactory` method return type ([#1806](https://github.com/Sitecore/jss/pull/1806))
 * `[templates/nextjs-sxa]` The banner variant of image component is fixed with supporting metadata mode. ([#1826](https://github.com/Sitecore/jss/pull/1826))
 * `[sitecore-jss]` `[sitecore-jss-react]` DateField empty value is not treated as empty ([#1836](https://github.com/Sitecore/jss/pull/1836))
 * `[templates/nextjs-sxa]` Fix styles of title component in metadata mode. ([#1839](https://github.com/Sitecore/jss/pull/1839))
@@ -52,11 +53,7 @@ Our versioning strategy is as follows:
   * Updated Angular and core dependencies to ~17.3.11
   * Updated Typescript to ~5.2.2
   * Updated import statements from zone.js/dist/zone-node to zone.js
-
-### 🐛 Bug Fixes
-
-* `[sitecore-jss]` `GraphQLRequestClientFactory` type is updated and `config` parameter is now optional. Since it should match `GraphQLRequestClient.createClientFactory` method return type ([#1806](https://github.com/Sitecore/jss/pull/1806))
-
+* `[sitecore-jss/personalize]` `[sitecore-jss-nextjs]` `CdpHelper.getPersonalizedRewrite` signature changed to accept `variantIds: string[]` as second parameter. `CdpHelper.getContentId` was renamed to `CdpHelper.getPageFriendlyId`. ([#1848](https://github.com/Sitecore/jss/pull/1848))
 
 ### 🧹 Chores
 

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

@@ -7,12 +7,12 @@ import { siteResolver } from 'lib/site-resolver';
 
 /**
  * This is the personalize middleware plugin for Next.js.
- * It is used to enable Sitecore personalization of pages in Next.js.
+ * It is used to enable Sitecore personalization and A/B testing of pages in Next.js.
  *
  * The `PersonalizeMiddleware` will
- *  1. Make a call to the Sitecore Experience Edge to get the personalization information about the page.
- *  2. Based on the response, make a call to the Sitecore CDP (with request/user context) to determine the page variant.
- *  3. Rewrite the response to the specific page variant.
+ *  1. Call Sitecore Experience Edge to get the personalization information about the page.
+ *  2. Based on the response, call Sitecore Personalize (with request/user context) to determine the page / component variant(s).
+ *  3. Rewrite the response to the specific page / component variant(s).
  */
 class PersonalizePlugin implements MiddlewarePlugin {
   private personalizeMiddleware: PersonalizeMiddleware;

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

@@ -5,6 +5,7 @@ import {
   getPersonalizedRewrite,
   PersonalizeInfo,
   CdpHelper,
+  DEFAULT_VARIANT,
 } from '@sitecore-jss/sitecore-jss/personalize';
 import { debug } from '@sitecore-jss/sitecore-jss';
 import { MiddlewareBase, MiddlewareBaseConfig } from './middleware';
@@ -212,7 +213,7 @@ export class PersonalizeMiddleware extends MiddlewareBase {
           execution.variantIds.push(variantId);
         } else {
           // The default/control variant (format "<ComponentID>_default") is also a valid value returned by the execution
-          const defaultVariant = `${componentId}_default`;
+          const defaultVariant = `${componentId}${DEFAULT_VARIANT}`;
           results.push({
             friendlyId,
             variantIds: [defaultVariant, variantId],
@@ -297,6 +298,7 @@ export class PersonalizeMiddleware extends MiddlewareBase {
       // Personalized, but this is a prefetch request.
       // In this case, don't execute a personalize request; otherwise, the metrics for component A/B experiments would be inaccurate.
       // Disable preflight caching to force revalidation on client-side navigation (personalization WILL be influenced).
+      // Note the reason we don't move this any earlier in the middleware is that we would then be sacrificing performance for non-personalized pages.
       response.headers.set('x-middleware-cache', 'no-cache');
       return response;
     }

packages/sitecore-jss/src/personalize/graphql-personalize-service.ts

@@ -10,7 +10,7 @@ export type GraphQLPersonalizeServiceConfig = CacheOptions & {
   timeout?: number;
   /**
    * Optional Sitecore Personalize scope identifier allowing you to isolate your personalization data between XM Cloud environments
-   * @deprecated Use 'scope' on 'PersonalizeMiddlewareConfig' instead. Will be removed in a future release.
+   * @deprecated Will be removed in a future release.
    */
   scope?: string;
   /**

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

@@ -110,7 +110,7 @@ export class CdpHelper {
    * @param {string} pageId the page id
    * @param {string} language the language
    * @param {string} [scope] the scope value
-   * @returns {string} the content id
+   * @returns {string} the friendly id
    */
   static getPageFriendlyId(pageId: string, language: string, scope?: string): string {
     const formattedPageId = pageId.replace(/[{}-]/g, '');