Load environment-specific FEAAS stylesheet based on Sitecore Edge Pla…

…tform URL

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/lib/page-props-factory/plugins/feaas-themes.ts

@@ -1,13 +1,14 @@
 import { SitecorePageProps } from 'lib/page-props';
 import { getFEAASLibraryStylesheetLinks } from '@sitecore-jss/sitecore-jss-nextjs';
 import { Plugin } from '..';
+import config from 'temp/config';
 
 class FEeaSThemesPlugin implements Plugin {
   order = 2;
 
   async exec(props: SitecorePageProps) {
     // Collect FEAAS themes
-    props.headLinks.push(...getFEAASLibraryStylesheetLinks(props.layoutData));
+    props.headLinks.push(...getFEAASLibraryStylesheetLinks(props.layoutData, config.sitecoreEdgeUrl));
 
     return props;
   }

packages/sitecore-jss/src/feaas/themes.test.ts

@@ -1,8 +1,14 @@
 import { expect } from 'chai';
-import { FEAAS_SERVER_URL, getFEAASLibraryStylesheetLinks, getStylesheetUrl } from './themes';
+import {
+  FEAAS_SERVER_URL_STAGING,
+  FEAAS_SERVER_URL_BETA,
+  FEAAS_SERVER_URL_PROD,
+  getFEAASLibraryStylesheetLinks,
+  getStylesheetUrl,
+} from './themes';
 import { ComponentRendering, HtmlElementRendering, LayoutServicePageState } from '../layout';
 
-describe('utils', () => {
+describe.only('themes', () => {
   describe('getFEAASLibraryStylesheetLinks', () => {
     const setBasicLayoutData = (
       component: ComponentRendering | HtmlElementRendering,
@@ -153,7 +159,7 @@ describe('utils', () => {
         ).to.deep.equal([{ href: getStylesheetUrl('foo'), rel: 'style' }]);
       });
 
-      it('should return links using custom server url', () => {
+      it('should return links using non-prod server url', () => {
         expect(
           getFEAASLibraryStylesheetLinks(
             setBasicLayoutData({
@@ -164,11 +170,15 @@ describe('utils', () => {
                 },
               },
             }),
-            'https://foo.net'
+            'https://edge-platform-dev.sitecorecloud.io'
           )
         ).to.deep.equal([
           {
-            href: getStylesheetUrl('bar', LayoutServicePageState.Normal, 'https://foo.net'),
+            href: getStylesheetUrl(
+              'bar',
+              LayoutServicePageState.Normal,
+              'https://edge-platform-dev.sitecorecloud.io'
+            ),
             rel: 'style',
           },
         ]);
@@ -345,7 +355,7 @@ describe('utils', () => {
         ]);
       });
 
-      it('should return links using custom server url', () => {
+      it('should return links using non-prod server url', () => {
         expect(
           getFEAASLibraryStylesheetLinks(
             setBasicLayoutData(
@@ -358,12 +368,16 @@ describe('utils', () => {
               },
               LayoutServicePageState.Edit
             ),
-            'https://foo.net'
+            'https://edge-platform-dev.sitecorecloud.io'
           )
         ).to.deep.equal([
           {
             rel: 'style',
-            href: getStylesheetUrl('bar', LayoutServicePageState.Edit, 'https://foo.net'),
+            href: getStylesheetUrl(
+              'bar',
+              LayoutServicePageState.Edit,
+              'https://edge-platform-dev.sitecorecloud.io',
+            ),
           },
         ]);
       });
@@ -450,36 +464,62 @@ describe('utils', () => {
     });
 
     describe('getStylesheetUrl', () => {
-      it('should return stylesheet url using default server url', () => {
+      it('should use published css url in Normal mode', () => {
         const pageState = LayoutServicePageState.Normal;
 
         expect(getStylesheetUrl('foo', pageState)).to.equal(
-          `${FEAAS_SERVER_URL}/styles/foo/published.css`
+          `${FEAAS_SERVER_URL_PROD}/styles/foo/published.css`
         );
       });
 
-      it('should return stylesheet url using default server url in Edit mode', () => {
+      it('should use staged css url in Edit mode', () => {
         const pageState = LayoutServicePageState.Edit;
 
         expect(getStylesheetUrl('foo', pageState)).to.equal(
-          `${FEAAS_SERVER_URL}/styles/foo/staged.css`
+          `${FEAAS_SERVER_URL_PROD}/styles/foo/staged.css`
         );
       });
 
-      it('should return stylesheet url using default server url in Preview mode', () => {
+      it('should use staged css url in Preview mode', () => {
         const pageState = LayoutServicePageState.Preview;
 
         expect(getStylesheetUrl('foo', pageState)).to.equal(
-          `${FEAAS_SERVER_URL}/styles/foo/staged.css`
+          `${FEAAS_SERVER_URL_PROD}/styles/foo/staged.css`
         );
       });
 
-      it('should return stylesheet url using custom server url', () => {
+      ['dev', 'qa', 'staging'].map((env) => {
+        it(`should use staging server url for edge ${env} url`, () => {
+          const pageState = LayoutServicePageState.Normal;
+
+          expect(
+            getStylesheetUrl(
+              'foo',
+              pageState,
+              `https://edge-platform-${env}.sitecore-staging.cloud`
+            )
+          ).to.equal(`${FEAAS_SERVER_URL_STAGING}/styles/foo/published.css`);
+        });
+      });
+
+      it('should use beta server url for edge preprod url', () => {
         const pageState = LayoutServicePageState.Normal;
 
-        expect(getStylesheetUrl('foo', pageState, 'https://bar.net')).to.equal(
-          'https://bar.net/styles/foo/published.css'
-        );
+        expect(
+          getStylesheetUrl(
+            'foo',
+            pageState,
+            'https://edge-platform-pre-production.sitecorecloud.io'
+          )
+        ).to.equal(`${FEAAS_SERVER_URL_BETA}/styles/foo/published.css`);
+      });
+
+      it('should use prod server url for edge prod url', () => {
+        const pageState = LayoutServicePageState.Normal;
+
+        expect(
+          getStylesheetUrl('foo', pageState, 'https://edge-platform.sitecorecloud.io')
+        ).to.equal(`${FEAAS_SERVER_URL_PROD}/styles/foo/published.css`);
       });
     });
   });

packages/sitecore-jss/src/feaas/themes.ts

@@ -21,17 +21,19 @@ type RevisionType = 'staged' | 'published';
  */
 const FEAAS_LIBRARY_ID_REGEX = /-library--([^\s]+)/;
 
-export const FEAAS_SERVER_URL = 'https://feaas.blob.core.windows.net';
+export const FEAAS_SERVER_URL_STAGING = 'https://feaasstaging.blob.core.windows.net';
+export const FEAAS_SERVER_URL_BETA = 'https://feaasbeta.blob.core.windows.net';
+export const FEAAS_SERVER_URL_PROD = 'https://feaas.blob.core.windows.net';
 
 /**
  * Walks through rendering tree and returns list of links of all FEAAS Component Library Stylesheets that are used
  * @param {LayoutServiceData} layoutData Layout service data
- * @param {string} [serverUrl] server URL, default is @see {FEAAS_SERVER_URL} url
+ * @param {string} [sitecoreEdgeUrl] Sitecore Edge Platform URL. Default is https://edge-platform.sitecorecloud.io
  * @returns {HTMLLink[]} library stylesheet links
  */
 export function getFEAASLibraryStylesheetLinks(
   layoutData: LayoutServiceData,
-  serverUrl?: string
+  sitecoreEdgeUrl = 'https://edge-platform.sitecorecloud.io'
 ): HTMLLink[] {
   const ids = new Set<string>();
 
@@ -40,20 +42,30 @@ export function getFEAASLibraryStylesheetLinks(
   traverseComponent(layoutData.sitecore.route, ids);
 
   return [...ids].map((id) => ({
-    href: getStylesheetUrl(id, layoutData.sitecore.context.pageState, serverUrl),
+    href: getStylesheetUrl(id, layoutData.sitecore.context.pageState, sitecoreEdgeUrl),
     rel: 'style',
   }));
 }
 
 export const getStylesheetUrl = (
   id: string,
   pageState?: LayoutServicePageState,
-  serverUrl?: string
+  sitecoreEdgeUrl = 'https://edge-platform.sitecorecloud.io'
 ) => {
   const revision: RevisionType =
     pageState && pageState !== LayoutServicePageState.Normal ? 'staged' : 'published';
 
-  return `${serverUrl || FEAAS_SERVER_URL}/styles/${id}/${revision}.css`;
+  let serverUrl = FEAAS_SERVER_URL_PROD;
+  if (
+    sitecoreEdgeUrl.toLowerCase().includes('edge-platform-dev') ||
+    sitecoreEdgeUrl.toLowerCase().includes('edge-platform-qa') ||
+    sitecoreEdgeUrl.toLowerCase().includes('edge-platform-staging')
+  ) {
+    serverUrl = FEAAS_SERVER_URL_STAGING;
+  } else if (sitecoreEdgeUrl.toLowerCase().includes('edge-platform-pre-production')) {
+    serverUrl = FEAAS_SERVER_URL_BETA;
+  }
+  return `${serverUrl}/styles/${id}/${revision}.css`;
 };
 
 /**