[nextjs] Add support for fallback point of sale (#1367)

* add support for fallback point of sale

* lint package

* configurable pos resolver for personalize middleware

* convert point of sale resolver into a class

* cleanup nextjs utils export

* fix build issues, add more comments + changelog

Author: art-alexeyenko

CHANGELOG.md

@@ -19,6 +19,8 @@ Our versioning strategy is as follows:
   * `import { editingDataService } from '@sitecore-jss/sitecore-jss-nextjs/editing';`
   * `import { EditingRenderMiddleware } from '@sitecore-jss/sitecore-jss-nextjs/editing';`
 
+* `[sitecore-jss-nextjs] [templates/nextjs-personalize]` getPointOfSale function passed into personalize middleware now accepts two parameters: site and language. Personalize middleware will use a built-in resolver if no function is passed. 
+
 * `[sitecore-jss-angular][templates/angular]` jss-angular package and sample has been updated to version 14. This means several changes:
   * JSS Angular sample is now using Ivy
   * IE11 no longer supported by JSS Angular

packages/create-sitecore-jss/src/templates/nextjs-personalize/src/components/CdpPageView.tsx

@@ -3,6 +3,7 @@ import {
   LayoutServicePageState,
   SiteInfo,
   useSitecoreContext,
+  PosResolver
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import { useEffect } from 'react';
 import config from 'temp/config';
@@ -29,9 +30,7 @@ const CdpPageView = (): JSX.Element => {
     site: SiteInfo,
     pageVariantId: string
   ) => {
-    const pointOfSale = site.pointOfSale
-      ? site.pointOfSale[language] || site.pointOfSale[site.language]
-      : '';
+    const pointOfSale = PosResolver.resolve(site, language);
     const engage = await init({
       clientKey: process.env.NEXT_PUBLIC_CDP_CLIENT_KEY || '',
       targetURL: process.env.NEXT_PUBLIC_CDP_TARGET_URL || '',

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

@@ -50,6 +50,9 @@ class PersonalizePlugin implements MiddlewarePlugin {
       excludeRoute: () => false,
       // Site resolver implementation
       siteResolver,
+      // Personalize middleware will use PosResolver.resolve(site, language) (same as CdpPageView) by default to get point of sale.
+      // You can also pass a custom point of sale resolver into middleware to override it like so: 
+      // getPointOfSale: (site, language) => { ... }
     });
   }
 

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

@@ -65,6 +65,7 @@ export {
   getPersonalizedRewriteData,
   normalizePersonalizedRewrite,
   CdpHelper,
+  PosResolver,
 } from '@sitecore-jss/sitecore-jss/personalize';
 export { GraphQLRequestClient } from '@sitecore-jss/sitecore-jss';
 

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

@@ -7,8 +7,9 @@ import {
   ExperienceParams,
   getPersonalizedRewrite,
 } from '@sitecore-jss/sitecore-jss/personalize';
-import { SiteResolver } from '@sitecore-jss/sitecore-jss/site';
+import { SiteInfo, SiteResolver } from '@sitecore-jss/sitecore-jss/site';
 import { debug, NativeDataFetcher } from '@sitecore-jss/sitecore-jss';
+import { PosResolver } from '@sitecore-jss/sitecore-jss/personalize';
 
 export type PersonalizeMiddlewareConfig = {
   /**
@@ -43,6 +44,13 @@ export type PersonalizeMiddlewareConfig = {
    * @default localhost
    */
   defaultHostname?: string;
+  /**
+   * function to resolve point of sale for a site
+   * @param {Siteinfo} site to get info from
+   * @param {string} language to get info for
+   * @returns point of sale value for site/language combination
+   */
+  getPointOfSale?: (site: SiteInfo, language: string) => string;
 };
 
 /**
@@ -235,9 +243,9 @@ export class PersonalizeMiddleware {
     // Execute targeted experience in CDP
     const { ua } = userAgent(req);
     const params = this.getExperienceParams(req);
-    const pointOfSale = site.pointOfSale
-      ? site.pointOfSale[language] || site.pointOfSale[site.language]
-      : '';
+    const pointOfSale = this.config.getPointOfSale
+      ? this.config.getPointOfSale(site, language)
+      : PosResolver.resolve(site, language);
     const variantId = await this.cdpService.executeExperience(
       personalizeInfo.contentId,
       browserId,

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

@@ -1,4 +1,5 @@
 export { personalizeLayout } from './layout-personalizer';
+export { PosResolver } from './pos-resolver';
 export {
   GraphQLPersonalizeService,
   GraphQLPersonalizeServiceConfig,

packages/sitecore-jss/src/personalize/pos-resolver.test.ts

@@ -0,0 +1,77 @@
+import { expect } from 'chai';
+import { SiteInfo } from '../site';
+import { PosResolver } from './pos-resolver';
+
+describe('resolvePointOfSale', () => {
+  it('should return empty when no point of sale present', () => {
+    const site: SiteInfo = {
+      name: 'no-pos',
+      hostName: 'www.nopos.com',
+      language: 'en',
+    };
+    const language = 'en';
+    const result = PosResolver.resolve(site, language);
+    expect(result).to.equal('');
+  });
+
+  it('should return pos for provided language', () => {
+    const myPoint = 'apos.com';
+    const site: SiteInfo = {
+      name: 'apos',
+      hostName: 'www.apos.com',
+      pointOfSale: {
+        en: myPoint,
+      },
+      language: 'de-DE',
+    };
+
+    const result = PosResolver.resolve(site, 'en');
+    expect(result).to.equal(myPoint);
+  });
+
+  it('should return pos for site language as first backup', () => {
+    const site: SiteInfo = {
+      name: 'apos',
+      hostName: 'www.apos.com',
+      pointOfSale: {
+        'de-DE': 'depos.com',
+        'es-ES': 'espos.com',
+      },
+      language: 'de-DE',
+    };
+
+    const result = PosResolver.resolve(site, 'en');
+    expect(result).to.equal('depos.com');
+  });
+
+  it('should return pos for site language when provided language is empty', () => {
+    const site: SiteInfo = {
+      name: 'apos',
+      hostName: 'www.apos.com',
+      pointOfSale: {
+        'de-DE': 'depos.com',
+        'es-ES': 'espos.com',
+      },
+      language: 'de-DE',
+    };
+
+    const result = PosResolver.resolve(site, '');
+    expect(result).to.equal('depos.com');
+  });
+
+  it('should use fallback value when other values missing', () => {
+    const site: SiteInfo = {
+      name: 'apos',
+      hostName: 'www.apos.com',
+      pointOfSale: {
+        'de-DE': 'depos.com',
+        'es-ES': 'espos.com',
+        '*': 'fallpos.com',
+      },
+      language: 'en-CA',
+    };
+
+    const result = PosResolver.resolve(site, 'en');
+    expect(result).to.equal('fallpos.com');
+  });
+});

packages/sitecore-jss/src/personalize/pos-resolver.ts

@@ -0,0 +1,9 @@
+import { SiteInfo } from '../site';
+
+export class PosResolver {
+  static resolve = (site: SiteInfo, language: string) => {
+    return site.pointOfSale
+      ? site.pointOfSale[language] || site.pointOfSale[site.language] || site.pointOfSale['*']
+      : '';
+  };
+}