[templates/nextjs-xmcloud][sitecore-jss] Update render process in normal mode for component level personalization (#1844)

* update normal rendering process for component level personalization

* update getPersonalizedRewriteData

* unit tests for personalize utils; small update to normalizePersonalizedRewrite function

* layout personalizer unit tests component level personalization

* introduce getGroomedVariantIds function

* unit test getGroomedVariantIds

* update changelog

* remove unnecesary line

* adjust layout personalizer, utils tests

* add upgrade guide entry

* Revert "add upgrade guide entry"

This reverts commit c18c529.

* update upgrade entry

* minor formatting

* changelog update

---------

Co-authored-by: Artem Alexeyenko <[email protected]>

Author: yavorsk

CHANGELOG.md

@@ -26,9 +26,11 @@ Our versioning strategy is as follows:
 * `[sitecore-jss]` _GraphQLRequestClient_ now can accept custom 'headers' in the constructor or via _createClientFactory_ ([#1806](https://github.com/Sitecore/jss/pull/1806))
 * `[templates/nextjs]` Removed cors header for API endpoints from _lib/next-config/plugins/cors-header_ plugin since cors is handled by API handlers / middlewares ([#1806](https://github.com/Sitecore/jss/pull/1806))
 * `[sitecore-jss-nextjs]` Updates to Next.js editing integration to further support secure hosting scenarios (on XM Cloud & Vercel) ([#1832](https://github.com/Sitecore/jss/pull/1832))
+* `[templates/nextjs-xmcloud]` `[sitecore-jss]` AB testing and componente level personalization support. ([#1844](https://github.com/Sitecore/jss/pull/1844))
 * `[sitecore-jss]` `[nextjs-xmcloud]` DictionaryService can now use a `site` GraphQL query instead of `search` one to improve performance. This is currently only available for XMCloud deployments and is enabled with `nextjs-xmcloud` add-on by default ([#1804](https://github.com/Sitecore/jss/pull/1804))([#1846](https://github.com/Sitecore/jss/pull/1846))([commit](https://github.com/Sitecore/jss/commit/5813a2df8ad6a9ee63dd74d5f206ed4b4f758753))([commit](https://github.com/Sitecore/jss/commit/d0ea3ac02c78343b5dd60277dbf7403410794a49))([commit](https://github.com/Sitecore/jss/commit/307b905ed60d7fff44b2dc799fd78c0842af6fbd))([commit](https://github.com/Sitecore/jss/commit/66164a42263aac8b55f0c5e47eda4bd4d7a72e87))
 * `[templates/nextjs-sxa]` nextjs-sxa components now use the NextImage component instead of the react Image component from JSS lib for image optimization ([#1843](https://github.com/Sitecore/jss/pull/1843))
 
+
 ### 🛠 Breaking Change
 
 * Editing Integration Support: ([#1776](https://github.com/Sitecore/jss/pull/1776))([#1792](https://github.com/Sitecore/jss/pull/1792))([#1773](https://github.com/Sitecore/jss/pull/1773))([#1797](https://github.com/Sitecore/jss/pull/1797))([#1800](https://github.com/Sitecore/jss/pull/1800))([#1803](https://github.com/Sitecore/jss/pull/1803))([#1806](https://github.com/Sitecore/jss/pull/1806))([#1809](https://github.com/Sitecore/jss/pull/1809))([#1814](https://github.com/Sitecore/jss/pull/1814))([#1816](https://github.com/Sitecore/jss/pull/1816))([#1819](https://github.com/Sitecore/jss/pull/1819))([#1828](https://github.com/Sitecore/jss/pull/1828))([#1835](https://github.com/Sitecore/jss/pull/1835))

docs/upgrades/unreleased.md

@@ -177,3 +177,18 @@
         }
         ...
     ```
+
+* To enable AB testing and component level personalization support in JSS, ensure _componentVariantIds_ are passed to _personalizeLayout_ function call:
+
+  ```ts
+  // Get variant(s) for personalization (from path)
+  const personalizeData = getPersonalizedRewriteData(path);
+
+  // Modify layoutData to use specific variant(s) instead of default
+  // This will also set the variantId on the Sitecore context so that it is accessible here
+  personalizeLayout(
+    props.layoutData,
+    personalizeData.variantId,
+    personalizeData.componentVariantIds
+  );
+  ```

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

@@ -16,12 +16,16 @@ class PersonalizePlugin implements Plugin {
         ? context.params.path.join('/')
         : context.params.path ?? '/';
 
-    // Get variant for personalization (from path)
+    // Get variant(s) for personalization (from path)
     const personalizeData = getPersonalizedRewriteData(path);
 
-    // Modify layoutData to use specific variant instead of default
+    // Modify layoutData to use specific variant(s) instead of default
     // This will also set the variantId on the Sitecore context so that it is accessible here
-    personalizeLayout(props.layoutData, personalizeData.variantId);
+    personalizeLayout(
+      props.layoutData,
+      personalizeData.variantId,
+      personalizeData.componentVariantIds
+    );
 
     return props;
   }