@faststore/core 3.69.1 → 3.70.1

package/.turbo/turbo-build.log

@@ -1,23 +1,23 @@
 
-> @faststore/core@3.69.0 prebuild /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.70.0 prebuild /home/runner/work/faststore/faststore/packages/core
 > na run partytown && na run generate
 
 
-> @faststore/core@3.69.0 partytown /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.70.0 partytown /home/runner/work/faststore/faststore/packages/core
 > partytown copylib ./public/~partytown
 
 Partytown lib copied to: /home/runner/work/faststore/faststore/packages/core/public/~partytown
 
-> @faststore/core@3.69.0 generate /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.70.0 generate /home/runner/work/faststore/faststore/packages/core
 > na run generate:schema && na run generate:codegen && na run format:generated
 
 
-> @faststore/core@3.69.0 generate:schema /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.70.0 generate:schema /home/runner/work/faststore/faststore/packages/core
 > tsx src/server/generator/generateGraphQLSchemaFile.ts
 
 Schema GraphQL file generated successfully
 
-> @faststore/core@3.69.0 generate:codegen /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.70.0 generate:codegen /home/runner/work/faststore/faststore/packages/core
 > graphql-codegen
 
 [STARTED] Parse Configuration
@@ -37,11 +37,11 @@ Running lifecycle hook "afterStart" scripts...
 [CLI] Loading Documents
 [CLI] Generating output
 
-> @faststore/core@3.69.0 format:generated /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.70.0 format:generated /home/runner/work/faststore/faststore/packages/core
 > prettier --write "@generated/**/*.{ts,js,tsx,jsx,json}" --loglevel error
 
 
-> @faststore/core@3.69.0 build /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.70.0 build /home/runner/work/faststore/faststore/packages/core
 > next build
 
 ⚠ No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
@@ -73,23 +73,23 @@ Warning: Dynamic Content not found for the page: home. Refer to the Dynamic Cont
    Collecting build traces ...
 
 Route (pages)                              Size     First Load JS
-┌ ● /                                      3.58 kB         139 kB
+┌ ● /                                      3.66 kB         139 kB
 ├   └ css/b1806cbafd0c1f81.css             3.06 kB
 ├   /_app                                  0 B             105 kB
-├ ● /[...slug]                             2.4 kB          147 kB
-├ ● /[slug]/p                              32.3 kB         168 kB
+├ ● /[...slug]                             2.45 kB         147 kB
+├ ● /[slug]/p                              32.6 kB         168 kB
 ├   ├ css/a3ca6a9b63f657be.css             5.75 kB
 ├   ├ css/62a5153ac7061286.css             6.11 kB
 ├   └ css/6831395ff5fd317a.css             16.1 kB
-├ ○ /404                                   1.51 kB         137 kB
-├ ● /500                                   1.52 kB         137 kB
+├ ○ /404                                   1.55 kB         137 kB
+├ ● /500                                   1.55 kB         137 kB
 ├ λ /account                               240 B           105 kB
 ├ ● /account/[...unknown]                  281 B           105 kB
-├ λ /account/403                           2.42 kB         138 kB
+├ λ /account/403                           2.44 kB         138 kB
 ├   └ css/b7bba8fce075688b.css             4.2 kB
-├ λ /account/404                           2.11 kB         138 kB
+├ λ /account/404                           2.13 kB         138 kB
 ├   └ css/5347dbc8b71de47d.css             4.25 kB
-├ λ /account/orders                        8.94 kB         144 kB
+├ λ /account/orders                        8.94 kB         145 kB
 ├   └ css/3d41485722b4e3f5.css             12.1 kB
 ├ λ /account/orders/[id]                   12.1 kB         148 kB
 ├   └ css/ba1d8927d8745656.css             12.6 kB
@@ -104,13 +104,13 @@ Route (pages)                              Size     First Load JS
 ├ λ /api/health/ready                      0 B             105 kB
 ├ λ /api/preview                           0 B             105 kB
 ├ ● /checkout                              737 B           136 kB
-├ ● /login                                 1.64 kB         137 kB
-└ ● /s                                     3.2 kB          148 kB
+├ ● /login                                 1.68 kB         137 kB
+└ ● /s                                     3.28 kB         148 kB
 + First Load JS shared by all              108 kB
   ├ chunks/framework-807b0f81cbc129f0.js   45.4 kB
   ├ chunks/main-f658704b53a96ab1.js        33.1 kB
   ├ chunks/pages/_app-728289774860e9d9.js  22.8 kB
-  ├ chunks/webpack-42d75fbe3cafd732.js     3.8 kB
+  ├ chunks/webpack-b39da7001e937875.js     3.81 kB
   └ css/0a57ee6c7a57788c.css               3.49 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/.turbo/turbo-test.log

@@ -1,14 +1,14 @@
 
-> @faststore/core@3.69.0 test /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.70.0 test /home/runner/work/faststore/faststore/packages/core
 > jest
 
-PASS test/utils/multipleTemplates.test.ts (27.108 s)
-PASS test/server/cms/global.test.ts (27.451 s)
+PASS test/server/cms/global.test.ts (25.901 s)
+PASS test/utils/multipleTemplates.test.ts (26.067 s)
 PASS test/server/cms/index.test.ts
-PASS test/server/index.test.ts (30.583 s)
+PASS test/server/index.test.ts (29.729 s)
 
 Test Suites: 4 passed, 4 total
 Tests:       22 passed, 22 total
 Snapshots:   0 total
-Time:        31.868 s
+Time:        30.888 s
 Ran all test suites.

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.70.1](https://github.com/vtex/faststore/compare/v3.70.0...v3.70.1) (2025-08-04)
+
+### Bug Fixes
+
+- Using SEO product name and description input if available ([#2969](https://github.com/vtex/faststore/issues/2969)) ([590000d](https://github.com/vtex/faststore/commit/590000d63539e0ce476018027a7ed2fdd2589c45)), closes [#2701](https://github.com/vtex/faststore/issues/2701)
+
+# [3.70.0](https://github.com/vtex/faststore/compare/v3.69.1...v3.70.0) (2025-08-01)
+
+### Features
+
+- [CP-407] Add support for rendering components based on their $componentKey ([#2915](https://github.com/vtex/faststore/issues/2915)) ([7e679c4](https://github.com/vtex/faststore/commit/7e679c43976ab7f874b73b53e59bfaf0a4e99483))
+
 ## [3.69.1](https://github.com/vtex/faststore/compare/v3.69.0...v3.69.1) (2025-08-01)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.69.1",
+  "version": "3.70.1",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -107,5 +107,5 @@
     "ts-jest": "29.1.1",
     "typescript": "5.3.2"
   },
-  "gitHead": "a9e52da1845bb5f3aff66fcef75efdb2970f6ed6"
+  "gitHead": "367347f3ba4d9da0c62d99e6a32faf385b6d54da"
 }

package/src/components/cms/RenderSections.tsx

@@ -19,7 +19,7 @@ import ViewportObserver from './ViewportObserver'
 interface Props {
   components?: Record<string, ComponentType<any>>
   globalSections?: Array<{ name: string; data: any }>
-  sections?: Array<{ name: string; data: any }>
+  sections?: Array<{ name: string; data: any; $componentKey?: string }>
   isInteractive?: boolean
 }
 
@@ -106,13 +106,14 @@ export const RenderSectionsBase = ({
 }: Props) => {
   return (
     <>
-      {sections.map(({ name, data = {} }, index) => {
-        const Component = components[name]
+      {sections.map(({ name, data = {}, $componentKey }, index) => {
+        const key = $componentKey ?? name
+        const Component = components[key]
 
         if (!Component) {
           // TODO: add a documentation link to help to do this
           console.warn(
-            `${name} not found. Add a new component for this section or remove it from the CMS`
+            `${key} not found. Add a new component for this section or remove it from the CMS`
           )
 
           return null

package/src/components/cms/global/Components.ts

@@ -8,6 +8,7 @@ import { OverriddenDefaultRegionBar as RegionBar } from 'src/components/sections
 
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import PLUGINS_COMPONENTS from 'src/plugins'
+import { getComponentKey } from 'src/utils/cms'
 
 const CartSidebar = dynamic(
   () =>
@@ -37,14 +38,14 @@ const RegionSlider = dynamic(
 )
 
 const COMPONENTS: Record<string, ComponentType<any>> = {
-  Alert,
-  Navbar,
-  RegionBar,
-  RegionPopover,
-  CartSidebar, // out of viewport
-  RegionModal, // out of viewport
-  RegionSlider, // out of viewport
-  Footer, // out of viewport
+  [getComponentKey(Alert, 'Alert')]: Alert,
+  [getComponentKey(Navbar, 'Navbar')]: Navbar,
+  [getComponentKey(RegionBar, 'RegionBar')]: RegionBar,
+  [getComponentKey(RegionPopover, 'RegionPopover')]: RegionPopover,
+  [getComponentKey(CartSidebar, 'CartSidebar')]: CartSidebar, // out of viewport
+  [getComponentKey(RegionModal, 'RegionModal')]: RegionModal, // out of viewport
+  [getComponentKey(RegionSlider, 'RegionSlider')]: RegionSlider, // out of viewport
+  [getComponentKey(Footer, 'Footer')]: Footer, // out of viewport
   ...PLUGINS_COMPONENTS,
   ...CUSTOM_COMPONENTS,
 }

package/src/components/cms/home/Components.ts

@@ -4,6 +4,7 @@ import type { ComponentType } from 'react'
 import { OverriddenDefaultHero as Hero } from 'src/components/sections/Hero/OverriddenDefaultHero'
 import Incentives from 'src/components/sections/Incentives'
 import { default as GLOBAL_COMPONENTS } from '../global/Components'
+import { getComponentKey } from 'src/utils/cms'
 
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import PLUGINS_COMPONENTS from 'src/plugins'
@@ -43,12 +44,12 @@ const ProductTiles = dynamic(
  */
 const COMPONENTS: Record<string, ComponentType<any>> = {
   ...GLOBAL_COMPONENTS,
-  Hero,
-  Incentives,
-  BannerText,
-  Newsletter,
-  ProductShelf,
-  ProductTiles,
+  [getComponentKey(Hero, 'Hero')]: Hero,
+  [getComponentKey(Incentives, 'Incentives')]: Incentives,
+  [getComponentKey(BannerText, 'BannerText')]: BannerText,
+  [getComponentKey(Newsletter, 'Newsletter')]: Newsletter,
+  [getComponentKey(ProductShelf, 'ProductShelf')]: ProductShelf,
+  [getComponentKey(ProductTiles, 'ProductTiles')]: ProductTiles,
   ...PLUGINS_COMPONENTS,
   ...CUSTOM_COMPONENTS,
 }

package/src/components/cms/plp/Components.ts

@@ -7,6 +7,7 @@ import { OverriddenDefaultProductGallery as ProductGallery } from 'src/component
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import PLUGINS_COMPONENTS from 'src/plugins'
 import { default as GLOBAL_COMPONENTS } from '../global/Components'
+import { getComponentKey } from 'src/utils/cms'
 
 const BannerText = dynamic(
   () =>
@@ -47,13 +48,13 @@ const ProductTiles = dynamic(
  */
 const COMPONENTS: Record<string, ComponentType<any>> = {
   ...GLOBAL_COMPONENTS,
-  Breadcrumb,
-  Hero,
-  ProductGallery,
-  BannerText,
-  Newsletter,
-  ProductShelf,
-  ProductTiles,
+  [getComponentKey(Hero, 'Hero')]: Hero,
+  [getComponentKey(Breadcrumb, 'Breadcrumb')]: Breadcrumb,
+  [getComponentKey(ProductGallery, 'ProductGallery')]: ProductGallery,
+  [getComponentKey(BannerText, 'BannerText')]: BannerText,
+  [getComponentKey(Newsletter, 'Newsletter')]: Newsletter,
+  [getComponentKey(ProductShelf, 'ProductShelf')]: ProductShelf,
+  [getComponentKey(ProductTiles, 'ProductTiles')]: ProductTiles,
   ...PLUGINS_COMPONENTS,
   ...CUSTOM_COMPONENTS,
 }

package/src/components/cms/search/Components.ts

@@ -7,6 +7,7 @@ import { OverriddenDefaultProductGallery as ProductGallery } from 'src/component
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import PLUGINS_COMPONENTS from 'src/plugins'
 import { default as GLOBAL_COMPONENTS } from '../global/Components'
+import { getComponentKey } from 'src/utils/cms'
 
 const BannerText = dynamic(
   () =>
@@ -55,14 +56,14 @@ const ProductTiles = dynamic(
  */
 const COMPONENTS: Record<string, ComponentType<any>> = {
   ...GLOBAL_COMPONENTS,
-  Breadcrumb,
-  Hero,
-  ProductGallery,
-  BannerText,
-  BannerNewsletter,
-  Newsletter,
-  ProductShelf,
-  ProductTiles,
+  [getComponentKey(Hero, 'Hero')]: Hero,
+  [getComponentKey(Breadcrumb, 'Breadcrumb')]: Breadcrumb,
+  [getComponentKey(ProductGallery, 'ProductGallery')]: ProductGallery,
+  [getComponentKey(BannerText, 'BannerText')]: BannerText,
+  [getComponentKey(BannerNewsletter, 'BannerNewsletter')]: BannerNewsletter,
+  [getComponentKey(Newsletter, 'Newsletter')]: Newsletter,
+  [getComponentKey(ProductShelf, 'ProductShelf')]: ProductShelf,
+  [getComponentKey(ProductTiles, 'ProductTiles')]: ProductTiles,
   ...PLUGINS_COMPONENTS,
   ...CUSTOM_COMPONENTS,
 }

package/src/components/region/RegionModal/RegionModal.tsx

@@ -143,4 +143,6 @@ function RegionModal(regionModalProps: RegionModalProps) {
   )
 }
 
+RegionModal.$componentKey = 'RegionModal'
+
 export default RegionModal

package/src/components/region/RegionPopover/RegionPopover.tsx

@@ -186,4 +186,6 @@ function RegionPopover(regionPopoverProps: RegionPopoverProps) {
   )
 }
 
+RegionPopover.$componentKey = 'RegionPopover'
+
 export default RegionPopover

package/src/components/region/RegionSlider/RegionSlider.tsx

@@ -404,4 +404,6 @@ function RegionSlider() {
   )
 }
 
+RegionSlider.$componentKey = 'RegionSlider'
+
 export default RegionSlider

package/src/components/sections/Alert/Alert.tsx

@@ -37,6 +37,8 @@ function Alert({ icon, content, link: { text, to }, dismissible }: AlertProps) {
   )
 }
 
+Alert.$componentKey = 'Alert'
+
 const OverridableAlert = getOverridableSection<typeof Alert>(
   'Alert',
   Alert,

package/src/components/sections/BannerNewsletter/BannerNewsletter.tsx

@@ -44,4 +44,6 @@ function BannerNewsletter({
   )
 }
 
+BannerNewsletter.$componentKey = 'BannerNewsletter'
+
 export default BannerNewsletter

package/src/components/sections/BannerText/BannerText.tsx

@@ -57,6 +57,8 @@ function BannerText({
   )
 }
 
+BannerText.$componentKey = 'BannerText'
+
 const OverridableBannerText = getOverridableSection<typeof BannerText>(
   'BannerText',
   BannerText,

package/src/components/sections/Breadcrumb/Breadcrumb.tsx

@@ -41,6 +41,8 @@ function BreadcrumbSection({ ...otherProps }: BreadcrumbSectionProps) {
   )
 }
 
+BreadcrumbSection.$componentKey = 'Breadcrumb'
+
 const OverridableBreadcrumbSection = getOverridableSection<
   typeof BreadcrumbSection
 >('Breadcrumb', BreadcrumbSection, BreadcrumbDefaultComponents)

package/src/components/sections/CrossSellingShelf/CrossSellingShelf.tsx

@@ -51,6 +51,8 @@ const CrossSellingShelf = ({
   )
 }
 
+CrossSellingShelf.$componentKey = 'CrossSellingShelf'
+
 const OverridableCrossSellingShelf = getOverridableSection<
   typeof CrossSellingShelf
 >('CrossSellingShelf', CrossSellingShelf, CrossSellingShelfDefaultComponents)

package/src/components/sections/EmptyState/EmptyState.tsx

@@ -107,6 +107,8 @@ function EmptyState({
   )
 }
 
+EmptyState.$componentKey = 'EmptyState'
+
 const OverridableEmptyState = getOverridableSection<typeof EmptyState>(
   'EmptyState',
   EmptyState,

package/src/components/sections/Footer/Footer.tsx

@@ -90,4 +90,6 @@ const Footer = ({
   )
 }
 
+Footer.$componentKey = 'Footer'
+
 export default Footer

package/src/components/sections/Hero/Hero.tsx

@@ -77,6 +77,8 @@ const Hero = ({
   )
 }
 
+Hero.$componentKey = 'Hero'
+
 const OverridableHero = getOverridableSection<typeof Hero>(
   'Hero',
   Hero,

package/src/components/sections/Incentives/Incentives.tsx

@@ -18,4 +18,6 @@ function Incentives({ incentives, label }: Props) {
   )
 }
 
+Incentives.$componentKey = 'Incentives'
+
 export default Incentives

package/src/components/sections/Navbar/Navbar.tsx

@@ -110,6 +110,8 @@ function NavbarSection({
   )
 }
 
+NavbarSection.$componentKey = 'Navbar'
+
 const OverridableNavbar = getOverridableSection<typeof NavbarSection>(
   'Navbar',
   NavbarSection,

package/src/components/sections/Newsletter/Newsletter.tsx

@@ -113,6 +113,8 @@ function Newsletter({
   )
 }
 
+Newsletter.$componentKey = 'Newsletter'
+
 const OverridableNewsletter = getOverridableSection<typeof Newsletter>(
   'Newsletter',
   Newsletter,

package/src/components/sections/ProductDetails/ProductDetails.tsx

@@ -336,6 +336,8 @@ function ProductDetails({
   )
 }
 
+ProductDetails.$componentKey = 'ProductDetails'
+
 export const fragment = gql(`
   fragment ProductDetailsFragment_product on StoreProduct {
     id: productID

package/src/components/sections/ProductGallery/ProductGallery.tsx

@@ -68,6 +68,8 @@ function ProductGallerySection({
   )
 }
 
+ProductGallerySection.$componentKey = 'ProductGallery'
+
 const OverridableProductGallery = getOverridableSection<
   typeof ProductGallerySection
 >('ProductGallery', ProductGallerySection, ProductGalleryDefaultComponents)

package/src/components/sections/ProductShelf/ProductShelf.tsx

@@ -23,6 +23,8 @@ function ProductShelfSection({
   )
 }
 
+ProductShelfSection.$componentKey = 'ProductShelf'
+
 const OverridableProductShelf = getOverridableSection<typeof ProductShelf>(
   'ProductShelf',
   ProductShelfSection,

package/src/components/sections/ProductTiles/ProductTiles.tsx

@@ -115,4 +115,6 @@ const ProductTiles = ({
   )
 }
 
+ProductTiles.$componentKey = 'ProductTiles'
+
 export default ProductTiles

package/src/components/sections/RegionBar/RegionBar.tsx

@@ -43,6 +43,8 @@ function RegionBarSection({ ...otherProps }: RegionBarSectionProps) {
   )
 }
 
+RegionBarSection.$componentKey = 'RegionBar'
+
 const OverridableRegionBar = getOverridableSection<typeof RegionBarSection>(
   'RegionBar',
   RegionBarSection,

package/src/components/templates/LandingPage/LandingPage.tsx

@@ -3,6 +3,7 @@ import type { ComponentType } from 'react'
 
 import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
 import RenderSections from 'src/components/cms/RenderSections'
+import { getComponentKey } from 'src/utils/cms'
 import BannerNewsletter from 'src/components/sections/BannerNewsletter/BannerNewsletter'
 import { OverriddenDefaultBannerText as BannerText } from 'src/components/sections/BannerText/OverriddenDefaultBannerText'
 import { OverriddenDefaultCrossSellingShelf as CrossSellingShelf } from 'src/components/sections/CrossSellingShelf/OverriddenDefaultCrossSellingShelf'
@@ -24,14 +25,14 @@ import type { PreviewData } from 'src/server/content/types'
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
   ...GLOBAL_COMPONENTS,
-  Hero,
-  BannerText,
-  BannerNewsletter,
-  CrossSellingShelf,
-  Incentives,
-  Newsletter,
-  ProductShelf,
-  ProductTiles,
+  [getComponentKey(Hero, 'Hero')]: Hero,
+  [getComponentKey(BannerText, 'BannerText')]: BannerText,
+  [getComponentKey(BannerNewsletter, 'BannerNewsletter')]: BannerNewsletter,
+  [getComponentKey(Incentives, 'Incentives')]: Incentives,
+  [getComponentKey(CrossSellingShelf, 'CrossSellingShelf')]: CrossSellingShelf,
+  [getComponentKey(Newsletter, 'Newsletter')]: Newsletter,
+  [getComponentKey(ProductShelf, 'ProductShelf')]: ProductShelf,
+  [getComponentKey(ProductTiles, 'ProductTiles')]: ProductTiles,
   ...PLUGINS_COMPONENTS,
   ...CUSTOM_COMPONENTS,
 }

package/src/pages/404.tsx

@@ -8,6 +8,7 @@ import {
 
 import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
 import RenderSections from 'src/components/cms/RenderSections'
+import { getComponentKey } from 'src/utils/cms'
 import { OverriddenDefaultEmptyState as EmptyState } from 'src/components/sections/EmptyState/OverriddenDefaultEmptyState'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import PLUGINS_COMPONENTS from 'src/plugins'
@@ -20,7 +21,7 @@ import type { PreviewData } from 'src/server/content/types'
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
   ...GLOBAL_COMPONENTS,
-  EmptyState,
+  [getComponentKey(EmptyState, 'EmptyState')]: EmptyState,
   ...PLUGINS_COMPONENTS,
   ...CUSTOM_COMPONENTS,
 }

package/src/pages/500.tsx

@@ -8,6 +8,7 @@ import {
 
 import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
 import RenderSections from 'src/components/cms/RenderSections'
+import { getComponentKey } from 'src/utils/cms'
 import { OverriddenDefaultEmptyState as EmptyState } from 'src/components/sections/EmptyState/OverriddenDefaultEmptyState'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import PLUGINS_COMPONENTS from 'src/plugins'
@@ -20,7 +21,7 @@ import type { PreviewData } from 'src/server/content/types'
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
   ...GLOBAL_COMPONENTS,
-  EmptyState,
+  [getComponentKey(EmptyState, 'EmptyState')]: EmptyState,
   ...PLUGINS_COMPONENTS,
   ...CUSTOM_COMPONENTS,
 }

package/src/pages/[slug]/p.tsx

@@ -12,6 +12,7 @@ import type {
 } from '@generated/graphql'
 import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
 import RenderSections from 'src/components/cms/RenderSections'
+import { getComponentKey } from 'src/utils/cms'
 import BannerNewsletter from 'src/components/sections/BannerNewsletter/BannerNewsletter'
 import { OverriddenDefaultBannerText as BannerText } from 'src/components/sections/BannerText/OverriddenDefaultBannerText'
 import { OverriddenDefaultBreadcrumb as Breadcrumb } from 'src/components/sections/Breadcrumb/OverriddenDefaultBreadcrumb'
@@ -53,15 +54,15 @@ type StoreConfig = typeof storeConfig & {
  */
 const COMPONENTS: Record<string, ComponentType<any>> = {
   ...GLOBAL_COMPONENTS,
-  Breadcrumb,
-  BannerNewsletter,
-  Newsletter,
-  BannerText,
-  Hero,
-  ProductDetails,
-  ProductShelf,
-  ProductTiles,
-  CrossSellingShelf,
+  [getComponentKey(Breadcrumb, 'Breadcrumb')]: Breadcrumb,
+  [getComponentKey(BannerNewsletter, 'BannerNewsletter')]: BannerNewsletter,
+  [getComponentKey(Newsletter, 'Newsletter')]: Newsletter,
+  [getComponentKey(BannerText, 'BannerText')]: BannerText,
+  [getComponentKey(Hero, 'Hero')]: Hero,
+  [getComponentKey(ProductDetails, 'ProductDetails')]: ProductDetails,
+  [getComponentKey(ProductShelf, 'ProductShelf')]: ProductShelf,
+  [getComponentKey(ProductTiles, 'ProductTiles')]: ProductTiles,
+  [getComponentKey(CrossSellingShelf, 'CrossSellingShelf')]: CrossSellingShelf,
   ...PLUGINS_COMPONENTS,
   ...CUSTOM_COMPONENTS,
 }
@@ -191,8 +192,8 @@ function Page({
         mainEntityOfPage={`${meta.canonical}${
           settings?.seo?.mainEntityOfPage ?? ''
         }`}
-        productName={product.name}
-        description={product.description}
+        productName={title}
+        description={description}
         brand={product.brand.name}
         sku={product.sku}
         gtin={product.gtin}

package/src/pages/login.tsx

@@ -9,6 +9,7 @@ import {
   getGlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
 import RenderSections from 'src/components/cms/RenderSections'
+import { getComponentKey } from 'src/utils/cms'
 import { OverriddenDefaultEmptyState as EmptyState } from 'src/components/sections/EmptyState/OverriddenDefaultEmptyState'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import PLUGINS_COMPONENTS from 'src/plugins'
@@ -22,7 +23,7 @@ import storeConfig from '../../discovery.config'
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
   ...GLOBAL_COMPONENTS,
-  EmptyState,
+  [getComponentKey(EmptyState, 'EmptyState')]: EmptyState,
   ...PLUGINS_COMPONENTS,
   ...CUSTOM_COMPONENTS,
 }

package/src/utils/cms.ts

@@ -0,0 +1,10 @@
+import type { ComponentType } from 'react'
+
+export type ComponentTypeWithComponentKey<T> = ComponentType<T> & {
+  $componentKey?: string
+}
+
+export const getComponentKey = (
+  Component: ComponentTypeWithComponentKey<any>,
+  name: string
+) => Component.$componentKey ?? name