[nextjs] Add support for fallback point of sale

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

@@ -3,6 +3,7 @@ import {
   LayoutServicePageState,
   SiteInfo,
   useSitecoreContext,
+  resolvePointOfSale,
 } 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 = resolvePointOfSale(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,8 @@ class PersonalizePlugin implements MiddlewarePlugin {
       excludeRoute: () => false,
       // Site resolver implementation
       siteResolver,
+      // you can also pass a custom point of sale resolver into middleware
+      // resolvePointOfSale: (site, language) => { ... }
     });
   }
 

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

@@ -117,7 +117,7 @@ export {
   useComponentProps,
 } from './components/ComponentPropsContext';
 
-export { handleEditorFastRefresh, getPublicUrl } from './utils';
+export { handleEditorFastRefresh, getPublicUrl, resolvePointOfSale } from './utils';
 
 export { Link, LinkProps } from './components/Link';
 export { RichText, RichTextProps } from './components/RichText';

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 { resolvePointOfSale } from '../utils';
 
 export type PersonalizeMiddlewareConfig = {
   /**
@@ -43,6 +44,13 @@ export type PersonalizeMiddlewareConfig = {
    * @default localhost
    */
   defaultHostname?: string;
+  /**
+   * function to resolve point of sale endpoint 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
+   */
+  resolvePointOfSale?: (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.resolvePointOfSale
+      ? this.config.resolvePointOfSale(site, language)
+      : resolvePointOfSale(site, language);
     const variantId = await this.cdpService.executeExperience(
       personalizeInfo.contentId,
       browserId,

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

@@ -1,6 +1,7 @@
 /* eslint-disable no-unused-expressions */
 import { expect } from 'chai';
-import { getPublicUrl, getJssEditingSecret } from './utils';
+import { SiteInfo } from './middleware';
+import { getPublicUrl, getJssEditingSecret, resolvePointOfSale } from './utils';
 
 describe('utils', () => {
   describe('getPublicUrl', () => {
@@ -55,4 +56,78 @@ describe('utils', () => {
       expect(result).to.equal(secret);
     });
   });
+
+  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 = resolvePointOfSale(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 = resolvePointOfSale(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 = resolvePointOfSale(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 = resolvePointOfSale(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 = resolvePointOfSale(site, 'en');
+      expect(result).to.equal('fallpos.com');
+    });
+  });
 });

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

@@ -1,5 +1,6 @@
 import chalk from 'chalk';
 import { isEditorActive, resetEditorChromes } from '@sitecore-jss/sitecore-jss/utils';
+import { SiteInfo } from './middleware';
 
 /**
  * Get the publicUrl.
@@ -75,3 +76,9 @@ export const getJssEditingSecret = (): string => {
   }
   return secret;
 };
+
+export const resolvePointOfSale = (site: SiteInfo, language: string): string => {
+  return site.pointOfSale
+    ? site.pointOfSale[language] || site.pointOfSale[site.language] || site.pointOfSale['*']
+    : '';
+};