From e6585dba1cd8ea55900059a7298de720e7968dc0 Mon Sep 17 00:00:00 2001
From: Illia Kovalenko <23364749+illiakovalenko@users.noreply.github.com>
Date: Fri, 30 Aug 2024 17:14:19 +0300
Subject: [PATCH] [Next.js] FEAAS / BYOC Components are not visible on the page
 with running A/B test (#1914)

---
 CHANGELOG.md                                                  | 4 ++++
 .../src/lib/page-props-factory/plugins/component-themes.ts    | 3 ++-
 .../src/lib/page-props-factory/plugins/component-props.ts     | 3 ++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index efb80a4fe9..f74f4d5a98 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -57,6 +57,10 @@ Our versioning strategy is as follows:
 
 ### 🐛 Bug Fixes
 
+* `[templates/nextjs]` `[XM Cloud]` FEAAS / BYOC Components are not visible on the page with running A/B test ([#1914](https://github.com/Sitecore/jss/pull/1914))
+  * Make sure to update the _PagePropsFactory_ plugins *order*, these plugins should be executed after the _page-props-factory\plugins\personalize.ts_ plugin to ensure that personalized layout data is used:
+    - _page-props-factory/plugins/component-themes.ts_
+    - _page-props-factory/plugins/component-props.ts_
 * `[sitecore-jss-nextjs]` Resolved an issue with redirects that was caused by the x-middleware-next header in Next.js. This header prevented the flow from being interrupted properly, resulting in redirects not functioning correctly in certain cases. ([#1899](https://github.com/Sitecore/jss/pull/1899))
 
 ## 22.1.1
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/page-props-factory/plugins/component-themes.ts b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/page-props-factory/plugins/component-themes.ts
index ecc5456ff7..3fd771a89e 100644
--- a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/page-props-factory/plugins/component-themes.ts
+++ b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/page-props-factory/plugins/component-themes.ts
@@ -4,7 +4,8 @@ import { Plugin } from '..';
 import config from 'temp/config';
 
 class ComponentThemesPlugin implements Plugin {
-  order = 2;
+  // Make sure to run this plugin after the personalization plugin, since it relies on the layout data
+  order = 10;
 
   async exec(props: SitecorePageProps) {
     // Collect FEAAS, BYOC, SXA component themes
diff --git a/packages/create-sitecore-jss/src/templates/nextjs/src/lib/page-props-factory/plugins/component-props.ts b/packages/create-sitecore-jss/src/templates/nextjs/src/lib/page-props-factory/plugins/component-props.ts
index 6c45ddf35f..32247a9ecf 100644
--- a/packages/create-sitecore-jss/src/templates/nextjs/src/lib/page-props-factory/plugins/component-props.ts
+++ b/packages/create-sitecore-jss/src/templates/nextjs/src/lib/page-props-factory/plugins/component-props.ts
@@ -7,7 +7,8 @@ import { Plugin, isServerSidePropsContext } from '..';
 class ComponentPropsPlugin implements Plugin {
   private componentPropsService: ComponentPropsService;
 
-  order = 2;
+  // Make sure to run this plugin last to ensure that the updated layout data is used
+  order = 10;
 
   constructor() {
     this.componentPropsService = new ComponentPropsService();