Changes for Release 2310.0.0

CHANGELOG.md

@@ -1,8 +1,29 @@
 # Changelog
 
+## v2310.0.0
+
+*Released 24.10.2023*
+
+### Breaking Changes:
+
+- Replaced all 3rd-party libs like cross-fetch, and node-fetch with node.js builtin fetch API
+- Removed babel from stitching server, using "tsc" for compiling typescript
+- Updated `schema.json` to CoreMedia Content Cloud v11 - 2310.1
+
+### Features:
+
+- Added CoreMedia Byside Tag Integration
+
+### Bugfixes and Changes:
+
+- Updated minor versions of dependencies
+- Updated eslint and prettier to latest major versions, but keeping the old prettier config "trailingComma": "es5" 
+
+---
+
 ## v2307.0.0
 
-*Released 02.08.2023*
+*Released 27.07.2023*
 
 ### Breaking Changes:
 

README.md

@@ -1,6 +1,6 @@
 ![CoreMedia Labs Logo](https://documentation.coremedia.com/badges/banner_coremedia_labs_wide.png)
 
-![CoreMedia Content Cloud Version](https://img.shields.io/static/v1?message=2307&label=CoreMedia%20Content%20Cloud&style=for-the-badge&labelColor=666666&color=672779 
+![CoreMedia Content Cloud Version](https://img.shields.io/static/v1?message=2310&label=CoreMedia%20Content%20Cloud&style=for-the-badge&labelColor=666666&color=672779 
 "This badge shows the CoreMedia version this project is compatible with. 
 Please read the versioning section of the project to see what other CoreMedia versions are supported and how to find them."
 )

apps/spark/.env.example

@@ -24,3 +24,7 @@ VITE_FQDN=https://<headless-stitching-server.example>
 
 # Set loglevel, default is "warn" for prod and "info" for dev.
 #VITE_LOGLEVEL=debug
+
+# Byside Integration, default URL: https://bywe2.byside.com/agent/bwc_we2.js
+#VITE_BYSIDE_WEBCARE_ID=<your-webcare-id>
+#VITE_BYSIDE_WEBCARE_SCRIPT_URL=<your-custom-tag-url>

apps/spark/.eslintrc.js

@@ -34,6 +34,7 @@ module.exports = {
     "import/order": ["error"],
     "import/newline-after-import": ["error"],
     "@typescript-eslint/no-explicit-any" : "off", //disable for CI
-    "@typescript-eslint/explicit-module-boundary-types": "off" //disable for CI
+    "@typescript-eslint/explicit-module-boundary-types": "off", //disable for CI
+    "prettier/prettier": ["error", {"trailingComma": "es5"}],
   },
 };

apps/spark/bin/download-crops.js

@@ -6,9 +6,8 @@
  * This script fetches the available image crops from the graphql server
  */
 
-const fetch = require("cross-fetch");
-const fs = require("fs");
-const path = require("path");
+const fs = require("node:fs");
+const path = require("node:path");
 const dotenv = require("dotenv");
 
 dotenv.config();
@@ -30,7 +29,7 @@ fetch(process.env.VITE_API_ENDPOINT+"/graphql", {
     query: `
       query imageCrops($siteId: String!) {
         content {
-          site(id: $siteId) {
+          site(siteId: $siteId) {
             crops {
               name
               aspectRatio {

apps/spark/bin/set-version.js

@@ -2,8 +2,8 @@
 
 "use strict";
 
-const fs = require("fs");
-const path = require("path");
+const fs = require("node:fs");
+const path = require("node:path");
 const version = require("../../../package.json").version;
 
 require('dotenv').config();

apps/spark/package.json

@@ -17,64 +17,63 @@
     "build-storybook": "storybook build -o dist/storybook"
   },
   "dependencies": {
-    "@apollo/client": "^3.7.17",
+    "@apollo/client": "^3.8.6",
     "@coremedia-labs/graphql-layer": "workspace:^",
     "@coremedia-labs/preview-integration": "workspace:^",
     "@coremedia-labs/view-dispatcher": "workspace:^",
-    "@js-joda/core": "^5.5.3",
-    "@js-joda/timezone": "^2.18.0",
+    "@js-joda/core": "^5.6.1",
+    "@js-joda/timezone": "^2.18.2",
     "crypto-hash": "^2.0.1",
-    "graphql": "^16.7.1",
+    "graphql": "^16.8.1",
     "loglevel": "^1.8.1",
     "query-string": "^7.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet-async": "^1.3.0",
     "react-is": "^18.2.0",
-    "react-player": "^2.12.0",
+    "react-player": "^2.13.0",
     "react-router-dom": "^5.3.4",
     "react-slick": "^0.29.0",
     "require-from-string": "^2.0.2",
     "slick-carousel": "^1.8.1",
     "styled-components": "^5.3.11"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^7.1.1",
-    "@storybook/addon-backgrounds": "^7.1.1",
-    "@storybook/addon-docs": "^7.1.1",
-    "@storybook/addon-essentials": "^7.1.1",
-    "@storybook/addon-links": "^7.1.1",
-    "@storybook/addon-measure": "^7.1.1",
-    "@storybook/addon-outline": "^7.1.1",
-    "@storybook/client-api": "^7.1.1",
-    "@storybook/client-logger": "^7.1.1",
-    "@storybook/node-logger": "^7.1.1",
-    "@storybook/react": "^7.1.1",
-    "@storybook/react-vite": "^7.1.1",
-    "@types/node": "^18.17.1",
-    "@types/react": "^17.0.62",
-    "@types/react-dom": "^17.0.20",
+    "@storybook/addon-actions": "^7.5.0",
+    "@storybook/addon-backgrounds": "^7.5.0",
+    "@storybook/addon-docs": "^7.5.0",
+    "@storybook/addon-essentials": "^7.5.0",
+    "@storybook/addon-links": "^7.5.0",
+    "@storybook/addon-measure": "^7.5.0",
+    "@storybook/addon-outline": "^7.5.0",
+    "@storybook/client-api": "^7.5.0",
+    "@storybook/client-logger": "^7.5.0",
+    "@storybook/node-logger": "^7.5.0",
+    "@storybook/react": "^7.5.0",
+    "@storybook/react-vite": "^7.5.0",
+    "@types/node": "^18.18.6",
+    "@types/react": "^17.0.69",
+    "@types/react-dom": "^17.0.22",
     "@types/react-router-dom": "^5.3.3",
-    "@types/react-slick": "^0.23.10",
-    "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
-    "@vitejs/plugin-react-swc": "^3.3.2",
-    "cross-fetch": "^3.1.8",
+    "@types/react-slick": "^0.23.11",
+    "@types/styled-components": "^5.1.29",
+    "@typescript-eslint/eslint-plugin": "^6.8.0",
+    "@typescript-eslint/parser": "^6.8.0",
+    "@vitejs/plugin-react-swc": "^3.4.0",
     "dotenv": "^16.3.1",
-    "eslint": "^8.45.0",
-    "eslint-config-prettier": "^8.9.0",
-    "eslint-import-resolver-typescript": "^3.5.5",
-    "eslint-plugin-import": "^2.28.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.33.0",
-    "eslint-plugin-storybook": "^0.6.13",
-    "prettier": "^2.8.8",
-    "storybook": "^7.1.1",
-    "typedoc": "^0.24.8",
-    "typescript": "~5.0.4",
-    "vite": "^4.4.7",
-    "vitest": "^0.33.0"
+    "eslint": "^8.51.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-storybook": "^0.6.15",
+    "prettier": "^3.0.3",
+    "storybook": "^7.5.0",
+    "typedoc": "^0.25.2",
+    "typescript": "~5.2.2",
+    "vite": "^4.5.0",
+    "vitest": "^0.34.6"
   },
   "browserslist": {
     "production": [

apps/spark/src/components/App/App.tsx

@@ -12,6 +12,7 @@ import { PreviewContextProvider } from "../../context/PreviewContextProvider";
 import SearchStateContextProvider from "../../context/SearchStateContext";
 import CommercePreviewPage from "../../pages/CommercePreviewPage";
 import AppRoutes from "./AppRoutes";
+import BysideTag from "./BysideTag";
 import PageContext from "./PageContext";
 import ScrollToTop from "./ScrollToTop";
 import { GlobalStyle } from "./GlobalStyle";
@@ -61,6 +62,7 @@ const App: FC = () => {
                     <AppRoutes />
                   </PageContext>
                 </Switch>
+                <BysideTag />
               </HelmetProvider>
             </SearchStateContextProvider>
           </SiteContextProvider>

apps/spark/src/components/App/BysideTag.tsx

@@ -0,0 +1,31 @@
+import { FC, useEffect } from "react";
+import log from "loglevel";
+import { useSiteContextState } from "../../context/SiteContextProvider";
+
+const BysideTag: FC = () => {
+  const webcareId = import.meta.env.VITE_BYSIDE_WEBCARE_ID;
+  const webcareUrl = import.meta.env.VITE_BYSIDE_WEBCARE_SCRIPT_URL ?? "https://bywe2.byside.com/agent/bwc_we2.js";
+  const { siteLocale } = useSiteContextState();
+  const bsi1 = document.getElementById("bysideIntegration1");
+  const bsi2 = document.getElementById("bysideIntegration2");
+
+  useEffect(() => {
+    if (!bsi1 && !bsi2 && webcareId) {
+      log.info("Loading Byside Tag", webcareId, webcareUrl);
+
+      const script1 = document.createElement("script");
+      script1.setAttribute("id", "bysideIntegration1");
+      script1.innerText = `var bysideWebcare_webcare_id="${webcareId}"; var bysideWebcare_lang = "${siteLocale}";`;
+      document.body.appendChild(script1);
+
+      const script2 = document.createElement("script");
+      script2.setAttribute("id", "bysideIntegration2");
+      script2.setAttribute("src", webcareUrl);
+      document.body.appendChild(script2);
+    }
+  }, []);
+
+  return null;
+};
+
+export default BysideTag;

apps/spark/src/components/Button/Button.tsx

@@ -32,7 +32,9 @@ export const StyledButton = styled(Link)`
   &:focus {
     outline: none;
     background-color: var(--color-green-highlight-active);
-    box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #000;
+    box-shadow:
+      inset 0 0 0 1px #fff,
+      inset 0 0 0 2px #000;
   }
 
   & + & {
@@ -55,7 +57,9 @@ export const CMButton = styled.div`
   &:active,
   &:focus {
     background-color: #fff;
-    box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, 0.75), inset 0 0 0 2px #000;
+    box-shadow:
+      inset 0 0 0 1px hsla(0, 0%, 100%, 0.75),
+      inset 0 0 0 2px #000;
   }
 `;
 

apps/spark/src/components/Category/DetailedCategory.tsx

@@ -48,12 +48,18 @@ interface Props {
 const DetailedCategory: React.FC<Props> = ({ name, placements, campaignDataSlots }) => {
   const { rootSegment } = useSiteContextState();
 
+  const campaignBannerHero = getFirstContentForCampaignSlot("hero", rootSegment, campaignDataSlots);
   const campaignBannerMain = getFirstContentForCampaignSlot("main", rootSegment, campaignDataSlots);
   const campaignBannerSidebar = getFirstContentForCampaignSlot("sidebar", rootSegment, campaignDataSlots);
 
   return (
     <StyledDetail>
       <CategoryHeader>{name}</CategoryHeader>
+      {campaignBannerHero && (
+        <CampaignSlot name={"Hero"} campaignDataSlots={campaignDataSlots}>
+          <HeroBanner banner={campaignBannerHero} />
+        </CampaignSlot>
+      )}
       <StyledRow>
         <Sidebar>
           <SubCategoryList />

apps/spark/src/components/Overlay/Overlay.tsx

@@ -14,7 +14,11 @@ const overlayStyleByName = (style: string) => {
   switch (style) {
     case "cm-richtext--dark-shadow": {
       return css`
-        text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
+        text-shadow:
+          -1px 0 #fff,
+          0 1px #fff,
+          1px 0 #fff,
+          0 -1px #fff;
       `;
     }
     case "cm-richtext--light-shadow": {

apps/spark/src/components/PageGrid/PageGrid.tsx

@@ -32,11 +32,7 @@ const PageGrid: FC<Grid> = ({ rows = [], campaignDataSlots }) => {
             ) {
               return null;
             } else {
-              return (
-                <>
-                  <Col key={placement.name} col={placement} campaignDataSlots={campaignDataSlots} />
-                </>
-              );
+              return <Col key={placement.name} col={placement} campaignDataSlots={campaignDataSlots} />;
             }
           })}
         </Row>

apps/spark/src/components/Product/ShopNowButton.tsx

@@ -35,7 +35,9 @@ const Button = styled(StyledButton)`
   &:active,
   &:focus {
     background-color: #fff;
-    box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, 0.75), inset 0 0 0 2px #000;
+    box-shadow:
+      inset 0 0 0 1px hsla(0, 0%, 100%, 0.75),
+      inset 0 0 0 2px #000;
   }
   position: absolute;
   bottom: 50%;

apps/spark/src/components/Search/SearchFilters.tsx

@@ -107,7 +107,9 @@ const SearchFilterButton = styled.button`
   &:focus {
     outline: none;
     background-color: var(--color-green-highlight-active);
-    box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #000;
+    box-shadow:
+      inset 0 0 0 1px #fff,
+      inset 0 0 0 2px #000;
   }
   span {
     display: none;

apps/spark/src/components/Search/SearchQuery.tsx

@@ -40,14 +40,18 @@ export const SearchInput = styled.input`
   border: 1px solid #000;
   border-radius: 2px;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition:
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
   font-size: var(--font-size-text-small);
   line-height: 1.428571429;
 
   &:focus {
     border-color: #000;
     outline: none;
-    box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #000;
+    box-shadow:
+      inset 0 0 0 1px #fff,
+      inset 0 0 0 2px #000;
   }
 
   @media screen and (min-width: 768px) {

apps/spark/src/components/Search/SearchResult.tsx

@@ -32,7 +32,9 @@ export const MoreButton = styled.button`
   &:focus {
     outline: none;
     background-color: var(--color-green-highlight-active);
-    box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #000;
+    box-shadow:
+      inset 0 0 0 1px #fff,
+      inset 0 0 0 2px #000;
   }
 `;
 

apps/spark/src/components/ShoppableVideo/TimelineEntry.tsx

@@ -8,7 +8,9 @@ const StyledTimelineEntry = styled.div<{ active?: boolean }>`
   height: 100%;
   display: block;
   opacity: 0.4;
-  transition: opacity 0.3s linear 0.3s, border 0.3s ease-out 0.3s;
+  transition:
+    opacity 0.3s linear 0.3s,
+    border 0.3s ease-out 0.3s;
 
   ${(props) =>
     props.active && props.active === true

apps/standalone-fragment/.eslintrc.js

@@ -24,5 +24,8 @@ module.exports = {
     "node_nodules/",
     "*.config.js",
     ".eslintrc.js"
-  ]
+  ],
+  rules: {
+    "prettier/prettier": ["error", {"trailingComma": "es5"}],
+  }
 };