Changes for Release 2401.0.0

.github/workflows/ci.yml

@@ -14,17 +14,17 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4
 
     - name: Use pnpm
       uses: pnpm/action-setup@v2
       with:
         version: 8
 
     - name: Use Node.js
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
-        node-version: 18
+        node-version: 20
         cache: 'pnpm'
 
     - name: Install dependencies

CHANGELOG.md

@@ -1,8 +1,32 @@
 # Changelog
 
+## v2401.0.0
+
+*Released 07.02.2024*
+
+### Breaking Changes:
+
+- Updated `schema.json` to CoreMedia Content Cloud v12 - 2401.1 and to the latest CoreMedia Campaign Service changes
+- Updated `node.js` to 20 LTS
+
+### Features:
+
+- Small Design Refresh
+  with new logo, white header, and animated image map hotzone icons.
+  Enhanced shoppable video, and product detail page and other small adjustments.
+- Added localization and translations (i18n)
+- Added shopping cart and checkout functionality
+
+### Bugfixes and Changes:
+
+- Updated minor versions of dependencies
+- Fix standalone-fragment render error
+
+---
+
 ## v2310.0.0
 
-*Released 24.10.2023*
+*Released 20.10.2023*
 
 ### Breaking Changes:
 

Dockerfile

@@ -1,2 +1,2 @@
-FROM node:18
+FROM node:20
 RUN npm install -g pnpm@8

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=2310&label=CoreMedia%20Content%20Cloud&style=for-the-badge&labelColor=666666&color=672779 
+![CoreMedia Content Cloud Version](https://img.shields.io/static/v1?message=2401&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."
 )
@@ -50,7 +50,7 @@ Please refer to the [changelog](CHANGELOG.md) for more details.
 
 ## Quickstart
 
-You need at least Node.js 18 (LTS), pnpm 7 and a running instance of the CoreMedia Content Cloud.
+You need at least Node.js 20 (LTS), pnpm 8 and a running instance of the CoreMedia Content Cloud.
 Define your environment variables in `.env` file for the stitching server:
 
 [servers/stitching/.env](servers/stitching/.env.example)

apps/spark/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="apple-touch-icon" href="/favicon-apple-touch-icon.png" />
     <link rel="manifest" href="/manifest.json" />
     <title>CoreMedia Spark</title>
   </head>

apps/spark/package.json

@@ -17,62 +17,68 @@
     "build-storybook": "storybook build -o dist/storybook"
   },
   "dependencies": {
-    "@apollo/client": "^3.8.6",
+    "@apollo/client": "^3.9.3",
     "@coremedia-labs/graphql-layer": "workspace:^",
     "@coremedia-labs/preview-integration": "workspace:^",
     "@coremedia-labs/view-dispatcher": "workspace:^",
     "@js-joda/core": "^5.6.1",
     "@js-joda/timezone": "^2.18.2",
+    "country-flag-icons": "^1.5.9",
     "crypto-hash": "^2.0.1",
     "graphql": "^16.8.1",
-    "loglevel": "^1.8.1",
+    "i18next": "^23.8.2",
+    "i18next-browser-languagedetector": "^7.2.0",
+    "i18next-http-backend": "^2.4.3",
+    "loglevel": "^1.9.1",
     "query-string": "^7.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet-async": "^1.3.0",
+    "react-i18next": "^11.18.6",
     "react-is": "^18.2.0",
-    "react-player": "^2.13.0",
+    "react-player": "^2.14.1",
+    "react-responsive": "^9.0.2",
     "react-router-dom": "^5.3.4",
-    "react-slick": "^0.29.0",
+    "react-slick": "^0.30.1",
     "require-from-string": "^2.0.2",
     "slick-carousel": "^1.8.1",
     "styled-components": "^5.3.11"
   },
   "devDependencies": {
-    "@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",
+    "@storybook/addon-actions": "^7.6.13",
+    "@storybook/addon-backgrounds": "^7.6.13",
+    "@storybook/addon-docs": "^7.6.13",
+    "@storybook/addon-essentials": "^7.6.13",
+    "@storybook/addon-links": "^7.6.13",
+    "@storybook/addon-measure": "^7.6.13",
+    "@storybook/addon-outline": "^7.6.13",
+    "@storybook/client-api": "^7.6.13",
+    "@storybook/client-logger": "^7.6.13",
+    "@storybook/node-logger": "^7.6.13",
+    "@storybook/react": "^7.6.13",
+    "@storybook/react-vite": "^7.6.13",
+    "@types/node": "^20.11.16",
+    "@types/react": "^17.0.75",
+    "@types/react-dom": "^17.0.25",
     "@types/react-router-dom": "^5.3.3",
-    "@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.51.0",
-    "eslint-config-prettier": "^9.0.0",
+    "@types/react-slick": "^0.23.13",
+    "@types/styled-components": "^5.1.34",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@vitejs/plugin-react-swc": "^3.6.0",
+    "dotenv": "^16.4.1",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-storybook": "^0.6.15",
-    "prettier": "^3.0.3",
-    "storybook": "^7.5.0",
-    "typedoc": "^0.25.2",
+    "prettier": "^3.2.5",
+    "storybook": "^7.6.13",
+    "typedoc": "^0.25.7",
     "typescript": "~5.2.2",
-    "vite": "^4.5.0",
+    "vite": "^4.5.2",
     "vitest": "^0.34.6"
   },
   "browserslist": {

apps/spark/public/locales/de/translation.json

@@ -0,0 +1,137 @@
+{
+  "Button": {
+    "defaultText": "Weitere Infos",
+    "addToCart" : "Jetzt kaufen",
+    "addMoreCart" : "Weitere kaufen",
+    "downloadText": "Herunterladen"
+  },
+  "CartList": {
+    "emptyText": "Dein Warnkorb ist leer.",
+    "product": "Produkt:",
+    "quantity": "Anzahl:",
+    "price": "Preis:",
+    "description": "Beschreibung:"
+  },
+  "DetailedCart": {
+    "headline": "Warenkorb",
+    "emptyText": "Dein Warenkorb ist leer.",
+    "description": "Beschreibung",
+    "price": "Preis",
+    "quantity": "Anzahl",
+    "total": "Summe",
+    "checkoutButtonText": "Zur Kasse",
+    "continueShopping": "Weiter einkaufen",
+    "cartTotals": "Warenkorb Summe",
+    "subtotalInclTax": "Zwischensumme (inkl. MwSt.)",
+    "tax": "MwSt."
+  },
+  "HeaderCart": {
+    "title": "Warenkorb"
+  },
+  "HeaderSearchForm": {
+    "close": "Suche schließen",
+    "label": "Suchen",
+    "placeholder": "Suchen ...",
+    "submit": "Suchen"
+  },
+  "Loading": {
+    "loading": "laden ..."
+  },
+  "SideCart": {
+    "title": "Warenkorb",
+    "close": "Schließen",
+    "openCartButtonText": "Warenkorb anzeigen"
+  },
+  "Ticker": {
+    "title": "Eilmeldung"
+  },
+  "FacetFilters": {
+    "title": "Filter"
+  },
+  "ProductAssets": {
+    "downloads": "Downloads"
+  },
+  "Search": {
+    "Header": {
+      "title": "Suchergebnisse",
+      "message": "Ihre Suche nach <span>{{query}}</span> ergab <b>{{totalCount}} Treffer</b>."
+    }
+  },
+  "SearchFilter": {
+    "closeSearch": "Suche schließen",
+    "filters": "Filter",
+    "type_CMArticle": "Stories",
+    "type_CMCategory": "Kategorien",
+    "type_CMChannel": "Seiten",
+    "type_CMEvent": "Events",
+    "type_CMExternalChannel": "External Channels",
+    "type_CMExternalPage": "Externe Seiten",
+    "type_CMExternalProduct": "Produkte",
+    "type_CMImageMap": "Image Maps",
+    "type_CMLook": "Looks",
+    "type_CMPerson": "Editors",
+    "type_CMPicture": "Bilder",
+    "type_CMProduct": "Produkte",
+    "type_CMProductTeaser": "Produkt Teaser",
+    "type_CMRecipe": "Rezepte",
+    "type_CMVideo": "Videos",
+    "allTypes": "Alle Typen,",
+    "subject": "Schlagwort",
+    "type": "Typ",
+    "price": "Preis",
+    "brand": "Marke"
+  },
+  "SortFilter": {
+    "sortBy": "Sortieren nach",
+    "Relevance": "Relevanz",
+    "Display Date Asc": "Anzeige Datum (aufsteigend)",
+    "Display Date Desc": "Anzeige Datum (absteigend)",
+    "Creation Date Asc": "Erstellungsdatum (aufsteigend)",
+    "Creation Date Desc": "Erstellungsdatum (absteigend)",
+    "Modification Date Asc": "Änderungsdatum (aufsteigend)",
+    "Modification Date Desc": "Änderungsdatum (absteigend)"
+  },
+  "DetailPage": {
+    "relatedProducts": "Produkte",
+    "related": "Ähnliche Inhalte"
+  },
+  "CheckoutPage": {
+    "successTitle": "Checkout abgeschlossen",
+    "successMessage": "<p>Danke für Ihre Bestellung.</p><p>Unser Team ist gerade dabei, Ihre Bestellung zu verpacken und zu versenden.</p><p>Wir werden Sie informieren, sobald die Ware auf dem Weg zu Ihnen ist.</p>",
+    "continueShopping": "Weiter einkaufen"
+  },
+  "CMArticle": "Story",
+  "CMCategory": "Category",
+  "CMChannel": "Page",
+  "CMEvent": "Event",
+  "CMExternalChannel": "External Channel",
+  "CMExternalPage": "External Page",
+  "CMExternalProduct": "Product",
+  "CMImageMap": "Image Map",
+  "CMLook": "Look",
+  "CMPerson": "Editor",
+  "CMPicture": "Picture",
+  "CMProduct": "Product",
+  "CMProductTeaser": "Product Teaser",
+  "CMRecipe": "Recipe",
+  "CMVideo": "Video",
+  "commonSize": "Size",
+  "color": "Color",
+  "style": "Style",
+  "gender": "Gender",
+  "season": "Season",
+  "landscape_ratio16x9": "Ausschnitt 16:9",
+  "portrait_ratio2x3": "Ausschnitt 2:3",
+  "landscape_ratio4x3": "Ausschnitt 4:3",
+  "landscape_ratio8x3": "Ausschnitt 8:3",
+  "portrait_ratio1x1": "Ausschnitt 1:1",
+  "OfferPrice_USD": "Preis",
+  "({* TO 100])": "Unter 100€",
+  "({100 TO 200])": "Zwischen 100€ und 200€",
+  "({200 TO 300])": "Zwischen 200€ und 300€",
+  "({300 TO 400])": "Zwischen 300€ und 400€",
+  "({400 TO 500])": "Zwischen 400€ und 500€",
+  "({500 TO *})": "Über 500€",
+  "mobile-portrait": "(orientation: portrait) and (max-width: 767px)",
+  "tablet-portrait": "(orientation: portrait) and (min-width: 768px)"
+}