[sitecore-jss-nextjs] Add page state into shared context

CHANGELOG.md

@@ -15,6 +15,7 @@ Our versioning strategy is as follows:
 
 * `[nextjs/template]` `[sitecore-jss-nextjs]` On-demand ISR [#1674](https://github.com/Sitecore/jss/pull/1672))
 * `[sitecore-jss]` `[templates/nextjs-xmcloud]` Load the content styles for the RichText component ([#1670](https://github.com/Sitecore/jss/pull/1670))([#1683](https://github.com/Sitecore/jss/pull/1683)) ([#1684](https://github.com/Sitecore/jss/pull/1684)) ([#1693](https://github.com/Sitecore/jss/pull/1693))
+* `[sitecore-jss-nextjs]` `[templates/nextjs-xmcloud]` Page state (preview, edit, normal) is available through shared context. This allows access to the state for integrations such as CloudSDK and FEAAS. ([#1703](https://github.com/Sitecore/jss/pull/1703))
 
 ### 🧹 Chores
 

packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/Bootstrap.tsx

@@ -12,7 +12,10 @@ const Bootstrap = (props: SitecorePageProps): JSX.Element | null => {
    * This function is the entry point for setting up the application's context and any SDKs that are required for its proper functioning.
    * It prepares the resources needed to interact with various services and features within the application.
    */
-  context.init({ siteName: props.site?.name || config.sitecoreSiteName });
+  context.init({
+    siteName: props.site?.name || config.sitecoreSiteName,
+    pageState: props.layoutData?.sitecore?.context?.pageState,
+  });
 
   return null;
 };

packages/sitecore-jss-nextjs/src/context/context.test.ts

@@ -3,6 +3,7 @@
 import sinon from 'sinon';
 import { expect } from 'chai';
 import { Context } from './';
+import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss-react';
 
 describe('Context', () => {
   const sdks = {
@@ -97,6 +98,15 @@ describe('Context', () => {
       });
     });
 
+    it('should use normal pageMode when context is initialized with empty props', () => {
+      const context = new Context<typeof sdks>(props);
+
+      context.init();
+
+      expect(context.isInitialized).to.be.true;
+      expect(context.pageState).to.equal(LayoutServicePageState.Normal);
+    });
+
     it('should initialize the context with a different site name', (done) => {
       const context = new Context<typeof sdks>(props);
 
@@ -129,6 +139,15 @@ describe('Context', () => {
       });
     });
 
+    it('should initialize the context with a different page mode', () => {
+      const context = new Context<typeof sdks>(props);
+
+      context.init({ pageState: LayoutServicePageState.Edit });
+
+      expect(context.isInitialized).to.be.true;
+      expect(context.pageState).to.equal(LayoutServicePageState.Edit);
+    });
+
     it('should not initialize the context if it is already initialized', () => {
       const context = new Context<typeof sdks>(props);
 

packages/sitecore-jss-nextjs/src/context/context.ts

@@ -1,3 +1,5 @@
+import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss-react';
+
 /**
  * Software Development Kit (SDK) instance
  */
@@ -25,6 +27,10 @@ export interface ContextInitProps {
    * Your Sitecore site name
    */
   siteName?: string;
+  /**
+   * Sitecore page state (normal, preview, edit)
+   */
+  pageState?: LayoutServicePageState;
 }
 
 /**
@@ -74,6 +80,10 @@ export class Context<SDKModules extends SDKModulesType> {
    * The Sitecore site name
    */
   public siteName: string;
+  /**
+   * Sitecore page state (normal, preview, edit)
+   */
+  public pageState: LayoutServicePageState;
   /**
    * Software Development Kits (SDKs) to be initialized
    */
@@ -87,6 +97,7 @@ export class Context<SDKModules extends SDKModulesType> {
     this.sitecoreEdgeUrl = props.sitecoreEdgeUrl;
     this.sitecoreEdgeContextId = props.sitecoreEdgeContextId;
     this.siteName = props.siteName;
+    this.pageState = LayoutServicePageState.Normal;
   }
 
   public init(props: ContextInitProps = {}) {
@@ -99,6 +110,10 @@ export class Context<SDKModules extends SDKModulesType> {
       this.siteName = props.siteName;
     }
 
+    if (props.pageState) {
+      this.pageState = props.pageState;
+    }
+
     // iterate over the SDKs and initialize them
     for (const sdkName of Object.keys(this.props.sdks) as (keyof SDKModules)[]) {
       this.initSDK(sdkName);