Changes done for the new version of JSS

headapps/Sugcon2024/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

headapps/Sugcon2024/package.json

@@ -1,7 +1,7 @@
 {
   "name": "EU",
   "description": "Application utilizing Sitecore JavaScript Services and Next.js",
-  "version": "21.5.3",
+  "version": "22.9.0",
   "private": true,
   "config": {
     "appName": "EU",
@@ -30,38 +30,40 @@
     "url": "https://github.com/sitecore/jss/issues"
   },
   "license": "Apache-2.0",
-  "dependencies": {
-    "@chakra-ui/icons": "^2.1.1",
-    "@chakra-ui/react": "^2.8.2",
-    "@emotion/react": "^11.11.3",
-    "@emotion/styled": "^11.11.0",
-    "@fortawesome/fontawesome-svg-core": "^6.5.1",
-    "@fortawesome/free-brands-svg-icons": "^6.5.1",
-    "@fortawesome/free-regular-svg-icons": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@next/third-parties": "^15.4.1",
-    "@sitecore-feaas/clientside": "^0.5.5",
-    "@sitecore-jss/sitecore-jss-nextjs": "~21.5.3",
-    "@sitecore/engage": "^1.4.1",
-    "@types/react-slick": "^0.23.13",
-    "bootstrap": "^5.1.3",
-    "cheerio": "^1.0.0-rc.12",
-    "clsx": "^2.1.0",
-    "dangerously-set-html-content": "^1.1.0",
-    "font-awesome": "^4.7.0",
-    "framer-motion": "^10.18.0",
-    "graphql": "~15.8.0",
-    "graphql-tag": "^2.12.6",
-    "next": "^13.4.16",
-    "next-localization": "^0.12.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-slick": "^0.30.2",
-    "sass": "^1.52.3",
-    "sass-alias": "^1.0.5",
-    "swr": "^2.2.5"
-  },
+"dependencies": {
+  "@chakra-ui/icons": "^2.1.1",
+  "@chakra-ui/react": "^2.8.2",
+  "@emotion/react": "^11.11.3",
+  "@emotion/styled": "^11.11.0",
+  "@fortawesome/fontawesome-svg-core": "^6.5.1",
+  "@fortawesome/free-brands-svg-icons": "^6.5.1",
+  "@fortawesome/free-regular-svg-icons": "^6.5.1",
+  "@fortawesome/free-solid-svg-icons": "^6.5.1",
+  "@fortawesome/react-fontawesome": "^0.2.0",
+  "@next/third-parties": "^15.4.1",
+  "@sitecore-cloudsdk/events": "^0.5.4",
+  "@sitecore-cloudsdk/personalize": "^0.5.4",
+  "@sitecore-feaas/clientside": "^0.5.5",
+  "@sitecore-jss/sitecore-jss-nextjs": "~22.9.0",
+  "@sitecore/engage": "^1.4.1",
+  "@types/react-slick": "^0.23.13",
+  "bootstrap": "^5.1.3",
+  "cheerio": "^1.0.0-rc.12",
+  "clsx": "^2.1.0",
+  "dangerously-set-html-content": "^1.1.0",
+  "font-awesome": "^4.7.0",
+  "framer-motion": "^11.0.0",
+  "graphql": "~15.8.0",
+  "graphql-tag": "^2.12.6",
+  "next": "^15.5.2",
+  "next-localization": "^0.12.0",
+  "react": "^19.1.0",
+  "react-dom": "^19.1.0",
+  "react-slick": "^0.30.2",
+  "sass": "^1.52.3",
+  "sass-alias": "^1.0.5",
+  "swr": "^2.2.5"
+},
   "devDependencies": {
     "@graphql-codegen/cli": "^1.21.8",
     "@graphql-codegen/import-types-preset": "^2.2.6",
@@ -71,19 +73,19 @@
     "@graphql-codegen/typescript-operations": "^2.5.12",
     "@graphql-codegen/typescript-resolvers": "^2.7.12",
     "@graphql-typed-document-node/core": "^3.1.1",
-    "@sitecore-jss/sitecore-jss-cli": "~21.5.3",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~21.5.3",
-    "@storybook/addon-essentials": "^7.6.10",
-    "@storybook/addon-interactions": "^7.6.10",
-    "@storybook/addon-links": "^7.6.10",
-    "@storybook/addon-onboarding": "^1.0.10",
-    "@storybook/blocks": "^7.6.10",
-    "@storybook/nextjs": "^7.6.10",
-    "@storybook/react": "^7.6.10",
-    "@storybook/test": "^7.6.10",
+    "@sitecore-jss/sitecore-jss-cli": "~22.9.0",
+    "@sitecore-jss/sitecore-jss-dev-tools": "~22.9.0",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-onboarding": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/nextjs": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/test": "^8.2.9",
     "@types/node": "^18.11.18",
-    "@types/react": "^18.0.12",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "^18.3.24",
+    "@types/react-dom": "^18.3.7",
     "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^5.49.0",
     "@typescript-eslint/parser": "^5.49.0",
@@ -103,11 +105,17 @@
     "graphql-let": "^0.18.6",
     "npm-run-all": "~4.1.5",
     "prettier": "^2.8.3",
-    "storybook": "^7.6.10",
+    "storybook": "^8.2.9",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.1.2",
     "typescript": "~4.9.4",
     "yaml-loader": "^0.8.0"
+  },
+   "overrides": {
+    "dangerously-set-html-content": {
+      "react": "^19.1.0",
+      "react-dom": "^19.1.0"
+    }
   },
   "scripts": {
     "bootstrap": "ts-node --project tsconfig.scripts.json scripts/bootstrap.ts",

headapps/Sugcon2024/scripts/config/plugins/multisite.ts

@@ -1,7 +1,7 @@
 import chalk from 'chalk';
 import { ConfigPlugin, JssConfig } from '..';
 import { GraphQLSiteInfoService, SiteInfo } from '@sitecore-jss/sitecore-jss-nextjs';
-
+import { createGraphQLClientFactory } from 'lib/graphql-client-factory/create';
 /**
  * This plugin will set the "sites" config prop.
  * By default this will attempt to fetch site information directly from Sitecore (using the GraphQLSiteInfoService).
@@ -24,10 +24,11 @@ class MultisitePlugin implements ConfigPlugin {
       console.log(`Fetching site information from ${endpoint}`);
       try {
         const siteInfoService = new GraphQLSiteInfoService({
-          endpoint,
-          apiKey,
+          clientFactory: createGraphQLClientFactory(config),
         });
         sites = await siteInfoService.fetchSiteInfo();
+        // Filter out non-headless sites
+        sites = sites.filter((site) => !['not-headless', 'headful', 'mvc'].includes(site.name));
       } catch (error) {
         console.error(chalk.red('Error fetching site information'));
         console.error(error);

headapps/Sugcon2024/src/Layout.tsx

@@ -78,8 +78,6 @@ const Layout = ({ layoutData, headLinks }: LayoutProps): JSX.Element => {
         ))}
       </Head>
 
-
-
       {process.env.NEXT_PUBLIC_GTAG && <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GTAG} />}
 
       <ChakraProvider theme={theme}>

headapps/Sugcon2024/src/components/CdpPageView.tsx

@@ -3,7 +3,6 @@ import {
   LayoutServicePageState,
   SiteInfo,
   useSitecoreContext,
-  PosResolver,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import { useEffect } from 'react';
 import config from 'temp/config';
@@ -21,6 +20,10 @@ const CdpPageView = (): JSX.Element => {
     sitecoreContext: { pageState, route, variantId, site },
   } = useSitecoreContext();
 
+const resolvePointOfSale = (site: SiteInfo, language: string): string => {
+  return `${site.name}_${language}`;
+};
+
   /**
    * Creates a page view event using the Sitecore Engage SDK.
    */
@@ -30,7 +33,7 @@ const CdpPageView = (): JSX.Element => {
     site: SiteInfo,
     pageVariantId: string
   ) => {
-    const pointOfSale = PosResolver.resolve(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 || '',

headapps/Sugcon2024/src/lib/config.ts

@@ -0,0 +1,13 @@
+/*
+ * Represents the type of config object available within the generated temp/config.js
+ */
+export interface JssConfig extends Record<string, string | undefined> {
+  sitecoreApiKey?: string;
+  sitecoreApiHost?: string;
+  sitecoreSiteName?: string;
+  graphQLEndpointPath?: string;
+  defaultLanguage?: string;
+  graphQLEndpoint?: string;
+  layoutServiceConfigurationName?: string;
+  publicUrl?: string;
+}

headapps/Sugcon2024/src/lib/dictionary-service-factory.ts

@@ -5,7 +5,7 @@ import {
   constants,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import config from 'temp/config';
-
+import clientFactory from 'lib/graphql-client-factory';
 /**
  * Factory responsible for creating a DictionaryService instance
  */
@@ -17,8 +17,7 @@ export class DictionaryServiceFactory {
   create(siteName: string): DictionaryService {
     return process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL
       ? new GraphQLDictionaryService({
-          endpoint: config.graphQLEndpoint,
-          apiKey: config.sitecoreApiKey,
+          clientFactory,
           siteName,
           /*
             The Dictionary Service needs a root item ID in order to fetch dictionary phrases for the current app. 

headapps/Sugcon2024/src/lib/graphql-client-factory/create.ts

@@ -0,0 +1,25 @@
+import {
+  GraphQLRequestClientFactoryConfig,
+  GraphQLRequestClient,
+} from '@sitecore-jss/sitecore-jss-nextjs/graphql';
+import { JssConfig } from 'lib/config';
+
+/**
+ * Creates a new GraphQLRequestClientFactory instance
+ * @param config jss config
+ * @returns GraphQLRequestClientFactory instance
+ */
+export const createGraphQLClientFactory = (config: JssConfig) => {
+  let clientConfig: GraphQLRequestClientFactoryConfig;
+
+  if (config.graphQLEndpoint && config.sitecoreApiKey) {
+    clientConfig = {
+      endpoint: config.graphQLEndpoint,
+      apiKey: config.sitecoreApiKey,
+    };
+  } else {
+    throw new Error('Please configure your graphQLEndpoint and sitecoreApiKey.');
+  }
+
+  return GraphQLRequestClient.createClientFactory(clientConfig);
+};

headapps/Sugcon2024/src/lib/graphql-client-factory/index.ts

@@ -0,0 +1,7 @@
+import config from 'temp/config';
+import { createGraphQLClientFactory } from './create';
+
+// The GraphQLRequestClientFactory serves as the central hub for executing GraphQL requests within the application
+
+// Create a new instance on each import call
+export default createGraphQLClientFactory(config);

headapps/Sugcon2024/src/lib/layout-service-factory.ts

@@ -5,6 +5,7 @@ import {
   constants,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import config from 'temp/config';
+import clientFactory from 'lib/graphql-client-factory';
 
 /**
  * Factory responsible for creating a LayoutService instance
@@ -17,8 +18,7 @@ export class LayoutServiceFactory {
   create(siteName: string): LayoutService {
     return process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL
       ? new GraphQLLayoutService({
-          endpoint: config.graphQLEndpoint,
-          apiKey: config.sitecoreApiKey,
+          clientFactory,
           siteName,
           /*
             GraphQL endpoint may reach its rate limit with the amount of Layout and Dictionary requests it receives and throw a rate limit error.

headapps/Sugcon2024/src/lib/middleware/plugins/personalize.ts

@@ -3,7 +3,7 @@ import { PersonalizeMiddleware } from '@sitecore-jss/sitecore-jss-nextjs/middlew
 import { MiddlewarePlugin } from '..';
 import config from 'temp/config';
 import { siteResolver } from 'lib/site-resolver';
-
+import { createGraphQLClientFactory } from 'lib/graphql-client-factory/create';
 /**
  * This is the personalize middleware plugin for Next.js.
  * It is used to enable Sitecore personalization of pages in Next.js.
@@ -23,18 +23,20 @@ class PersonalizePlugin implements MiddlewarePlugin {
     this.personalizeMiddleware = new PersonalizeMiddleware({
       // Configuration for your Sitecore Experience Edge endpoint
       edgeConfig: {
-        endpoint: config.graphQLEndpoint,
-        apiKey: config.sitecoreApiKey,
+        clientFactory: createGraphQLClientFactory(config),
+        scope: process.env.NEXT_PUBLIC_PERSONALIZE_SCOPE,
         timeout:
           (process.env.PERSONALIZE_MIDDLEWARE_EDGE_TIMEOUT &&
             parseInt(process.env.PERSONALIZE_MIDDLEWARE_EDGE_TIMEOUT)) ||
           400,
-        scope: process.env.NEXT_PUBLIC_PERSONALIZE_SCOPE,
       },
       // Configuration for your Sitecore CDP endpoint
       cdpConfig: {
-        endpoint: process.env.NEXT_PUBLIC_CDP_TARGET_URL || '',
-        clientKey: process.env.NEXT_PUBLIC_CDP_CLIENT_KEY || '',
+        sitecoreEdgeContextId: process.env.NEXT_PUBLIC_CDP_CONTEXT_ID || '',
+        sitecoreEdgeUrl:
+          process.env.NEXT_PUBLIC_CDP_EDGE_URL || 'https://edge-platform.sitecorecloud.io',
+        channel: process.env.NEXT_PUBLIC_CDP_CHANNEL || 'WEB',
+        currency: process.env.NEXT_PUBLIC_CDP_CURRENCY || 'USD',
         timeout:
           (process.env.PERSONALIZE_MIDDLEWARE_CDP_TIMEOUT &&
             parseInt(process.env.PERSONALIZE_MIDDLEWARE_CDP_TIMEOUT)) ||

headapps/Sugcon2024/src/lib/middleware/plugins/redirects.ts

@@ -3,15 +3,15 @@ import { RedirectsMiddleware } from '@sitecore-jss/sitecore-jss-nextjs/middlewar
 import config from 'temp/config';
 import { MiddlewarePlugin } from '..';
 import { siteResolver } from 'lib/site-resolver';
+import clientFactory from 'lib/graphql-client-factory';
 
 class RedirectsPlugin implements MiddlewarePlugin {
   private redirectsMiddleware: RedirectsMiddleware;
   order = 0;
 
   constructor() {
     this.redirectsMiddleware = new RedirectsMiddleware({
-      endpoint: config.graphQLEndpoint,
-      apiKey: config.sitecoreApiKey,
+      clientFactory,
       // These are all the locales you support in your application.
       // These should match those in your next.config.js (i18n.locales).
       locales: ['en'],

headapps/Sugcon2024/src/lib/page-props-factory/plugins/feaas-themes.ts

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

headapps/Sugcon2024/src/lib/sitemap-fetcher/plugins/graphql-sitemap-service.ts

@@ -8,14 +8,14 @@ import config from 'temp/config';
 import { SitemapFetcherPlugin } from '..';
 import { GetStaticPathsContext } from 'next';
 import { siteResolver } from 'lib/site-resolver';
+import clientFactory from 'lib/graphql-client-factory';
 
 class GraphqlSitemapServicePlugin implements SitemapFetcherPlugin {
   _graphqlSitemapService: MultisiteGraphQLSitemapService;
 
   constructor() {
     this._graphqlSitemapService = new MultisiteGraphQLSitemapService({
-      endpoint: config.graphQLEndpoint,
-      apiKey: config.sitecoreApiKey,
+      clientFactory,
       sites: [...new Set(siteResolver.sites.map((site: SiteInfo) => site.name))],
     });
   }

headapps/Sugcon2024/src/pages/404.tsx

@@ -10,6 +10,7 @@ import { componentBuilder } from 'temp/componentBuilder';
 import Layout from 'src/Layout';
 import { GetStaticProps } from 'next';
 import { siteResolver } from 'lib/site-resolver';
+import clientFactory from 'lib/graphql-client-factory';
 
 const Custom404 = (props: SitecorePageProps): JSX.Element => {
   if (!(props && props.layoutData)) {
@@ -29,8 +30,7 @@ const Custom404 = (props: SitecorePageProps): JSX.Element => {
 export const getStaticProps: GetStaticProps = async (context) => {
   const site = siteResolver.getByName(config.jssAppName);
   const errorPagesService = new GraphQLErrorPagesService({
-    endpoint: config.graphQLEndpoint,
-    apiKey: config.sitecoreApiKey,
+    clientFactory,
     siteName: site.name,
     language: context.locale || config.defaultLanguage,
     retries: