@faststore/core 2.2.69 → 2.2.71

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

@@ -4,18 +4,20 @@ import { gql } from '@faststore/graphql-utils'
 import type { CurrencyCode, ViewItemEvent } from '@faststore/sdk'
 import { sendAnalyticsEvent } from '@faststore/sdk'
 
-import type { AnalyticsItem } from 'src/sdk/analytics/types'
-import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
-import { useSession } from 'src/sdk/session'
+import type { AnalyticsItem } from '../../../sdk/analytics/types'
+import { useFormattedPrice } from '../../../sdk/product/useFormattedPrice'
+import { useSession } from '../../../sdk/session'
 
 import Section from '../Section'
-import ProductDescription from 'src/components/ui/ProductDescription'
-import { ProductDetailsSettings } from 'src/components/ui/ProductDetails'
+import ProductDescription from '../../../components/ui/ProductDescription'
+import { ProductDetailsSettings } from '../../../components/ui/ProductDetails'
 
 import styles from './section.module.scss'
 
-import { usePDP } from 'src/sdk/overrides/PageProvider'
-import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
+import { usePDP } from '../../../sdk/overrides/PageProvider'
+import { useOverrideComponents } from '../../../sdk/overrides/OverrideContext'
+import { ProductDetailsDefaultComponents } from './DefaultComponents'
+import { getOverridableSection } from '../../../sdk/overrides/getOverriddenSection'
 
 export interface ProductDetailsProps {
   productTitle: {
@@ -280,4 +282,10 @@ export const fragment = gql`
   }
 `
 
-export default ProductDetails
+const OverridableProductDetails = getOverridableSection<typeof ProductDetails>(
+  'ProductDetails',
+  ProductDetails,
+  ProductDetailsDefaultComponents
+)
+
+export default OverridableProductDetails

package/src/components/sections/ProductGallery/OverriddenDefaultProductGallery.ts

@@ -1,12 +1,14 @@
 import { override } from 'src/customizations/src/components/overrides/ProductGallery'
 import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
-import type { SectionOverrideDefinition } from 'src/typings/overridesDefinition'
+import type { SectionOverrideDefinitionV1 } from 'src/typings/overridesDefinition'
+import ProductGallery from '.'
 
 /**
  * This component exists to support overrides 1.0
  *
  * This allows users to override the default ProductGallery section present in the Headless CMS
  */
-export const OverriddenDefaultProductGallery = getOverriddenSection(
-  override as SectionOverrideDefinition<'ProductGallery'>
-)
+export const OverriddenDefaultProductGallery = getOverriddenSection({
+  ...(override as SectionOverrideDefinitionV1<'ProductGallery'>),
+  Section: ProductGallery,
+})

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

@@ -1,8 +1,8 @@
-import { mark } from 'src/sdk/tests/mark'
+import { mark } from '../../../sdk/tests/mark'
 
 import ProductGallery, {
   ProductGalleryProps,
-} from 'src/components/ui/ProductGallery/ProductGallery'
+} from '../../ui/ProductGallery/ProductGallery'
 import Section from '../Section'
 import type { EmptyGalleryProps } from './EmptyGallery'
 
@@ -13,8 +13,10 @@ import {
   isPLP,
   isSearchPage,
   usePage,
-} from 'src/sdk/overrides/PageProvider'
-import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
+} from '../../../sdk/overrides/PageProvider'
+import { useOverrideComponents } from '../../../sdk/overrides/OverrideContext'
+import { getOverridableSection } from '../../../sdk/overrides/getOverriddenSection'
+import { ProductGalleryDefaultComponents } from './DefaultComponents'
 
 export interface ProductGallerySectionProps {
   searchTermLabel?: ProductGalleryProps['searchTermLabel']
@@ -69,4 +71,10 @@ function ProductGallerySection({
 }
 
 ProductGallerySection.displayName = 'ProductGallery'
-export default mark(ProductGallerySection)
+const MarkedProductGallery = mark(ProductGallerySection)
+
+const OverridableProductGallery = getOverridableSection<
+  typeof MarkedProductGallery
+>('ProductGallery', MarkedProductGallery, ProductGalleryDefaultComponents)
+
+export default OverridableProductGallery

package/src/components/sections/ProductShelf/OverriddenDefaultProductShelf.ts

@@ -1,12 +1,15 @@
 import { override } from 'src/customizations/src/components/overrides/ProductShelf'
 import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
-import type { SectionOverrideDefinition } from 'src/typings/overridesDefinition'
+import ProductShelf from '.'
+
+import type { SectionOverrideDefinitionV1 } from 'src/typings/overridesDefinition'
 
 /**
  * This component exists to support overrides 1.0
  *
  * This allows users to override the default ProductShelf section present in the Headless CMS
  */
-export const OverriddenDefaultProductShelf = getOverriddenSection(
-  override as SectionOverrideDefinition<'ProductShelf'>
-)
+export const OverriddenDefaultProductShelf = getOverriddenSection({
+  ...(override as SectionOverrideDefinitionV1<'ProductShelf'>),
+  Section: ProductShelf,
+})

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

@@ -1,8 +1,12 @@
 import { useInView } from 'react-intersection-observer'
 import Section from '../Section'
 
-import ProductShelf, { ProductShelfProps } from 'src/components/ui/ProductShelf'
+import ProductShelf, {
+  ProductShelfProps,
+} from '../../../components/ui/ProductShelf'
 import styles from './section.module.scss'
+import { ProductShelfDefaultComponents } from './DefaultComponents'
+import { getOverridableSection } from '../../../sdk/overrides/getOverriddenSection'
 
 function ProductShelfSection({
   ...otherProps
@@ -19,4 +23,10 @@ function ProductShelfSection({
   )
 }
 
-export default ProductShelfSection
+const OverridableProductShelf = getOverridableSection<typeof ProductShelf>(
+  'ProductShelf',
+  ProductShelfSection,
+  ProductShelfDefaultComponents
+)
+
+export default OverridableProductShelf

package/src/components/sections/RegionBar/OverriddenDefaultRegionBar.ts

@@ -1,12 +1,14 @@
 import { override } from 'src/customizations/src/components/overrides/RegionBar'
 import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
-import type { SectionOverrideDefinition } from 'src/typings/overridesDefinition'
+import type { SectionOverrideDefinitionV1 } from 'src/typings/overridesDefinition'
+import RegionBar from '.'
 
 /**
  * This component exists to support overrides 1.0
  *
  * This allows users to override the default RegionBar section present in the Headless CMS
  */
-export const OverriddenDefaultRegionBar = getOverriddenSection(
-  override as SectionOverrideDefinition<'RegionBar'>
-)
+export const OverriddenDefaultRegionBar = getOverriddenSection({
+  ...(override as SectionOverrideDefinitionV1<'RegionBar'>),
+  Section: RegionBar,
+})

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

@@ -1,8 +1,8 @@
-import RegionBar, {
-  RegionBarProps,
-} from 'src/components/region/RegionBar/RegionBar'
-import Section from 'src/components/sections/Section/Section'
+import RegionBar, { RegionBarProps } from '../../region/RegionBar/RegionBar'
+import Section from '../Section/Section'
 import styles from './section.module.scss'
+import { RegionBarDefaultComponents } from './DefaultComponents'
+import { getOverridableSection } from '../../..//sdk/overrides/getOverriddenSection'
 
 type RegionBarSectionProps = {
   /**
@@ -38,4 +38,10 @@ function RegionBarSection({
   )
 }
 
-export default RegionBarSection
+const OverridableRegionBar = getOverridableSection<typeof RegionBarSection>(
+  'RegionBar',
+  RegionBarSection,
+  RegionBarDefaultComponents
+)
+
+export default OverridableRegionBar

package/src/sdk/overrides/getOverriddenSection.tsx

@@ -1,44 +1,52 @@
-import type { ComponentProps, ComponentType } from 'react'
+import { useMemo, type ComponentProps, type ComponentType } from 'react'
 
-import { OverrideProvider } from './OverrideContext'
-import { DefaultComponents, Sections } from './sections'
-import { getSectionOverrides } from './overrides'
 import type {
   DefaultSectionComponentsDefinitions,
-  OverriddenComponents,
   SectionOverrideDefinition,
+  SectionOverrideDefinitionV1,
 } from '../../typings/overridesDefinition'
-import type { SupportedSectionsOverridesV2 } from '../../typings/overrides'
-
-/**
- * This function adds OverrideContext to the tree. It is essential for the compatible sections
- * to consume the components it provides.
- */
-function createOverriddenSection<
-  SectionName extends keyof SupportedSectionsOverridesV2
->({
-  Section,
-  sectionOverrides,
-  className,
-}: {
-  Section: (typeof Sections)[SectionName]
-  sectionOverrides: OverriddenComponents<SectionName>
-  className?: string
-}) {
-  const overrideContextValue = { className, components: sectionOverrides }
+import type { SectionsOverrides } from '../../typings/overrides'
+import { getSectionOverrides } from './overrides'
+import { OverrideProvider } from './OverrideContext'
 
-  return function OverriddenSection(
-    props: React.ComponentProps<typeof Section>
+export function getOverridableSection<
+  Section extends ComponentType,
+  SectionName extends keyof SectionsOverrides = keyof SectionsOverrides
+>(
+  sectionName: SectionName,
+  Section: Section,
+  defaultComponents: DefaultSectionComponentsDefinitions<SectionName>
+) {
+  function OverridableSection(
+    propsWithOverrides: ComponentProps<typeof Section> & {
+      __overrides?: Omit<SectionOverrideDefinitionV1<SectionName>, 'Section'>
+    }
   ) {
+    const { __overrides: overrides, ...props } = propsWithOverrides
+
+    const overrideContextValue = useMemo(
+      () => ({
+        ...(overrides ?? {}),
+        components: getSectionOverrides<SectionName>(defaultComponents, {
+          ...(overrides ?? {}),
+          section: sectionName,
+        }),
+      }),
+      [overrides]
+    )
+
     /** This type wizardry is here because the props won't behave correctly if nothing is done */
-    const SectionComponent = Section as ComponentType<typeof props>
+    const SectionComponent = Section as ComponentType<ComponentProps<Section>>
 
     return (
       <OverrideProvider value={overrideContextValue}>
-        <SectionComponent {...props} />
+        <SectionComponent {...(props as ComponentProps<typeof Section>)} />
       </OverrideProvider>
     )
   }
+
+  // This type cast is here so the symbol prop doesn't show up in the type definition
+  return OverridableSection as Section
 }
 
 /**
@@ -50,23 +58,16 @@ function createOverriddenSection<
  * @see https://www.faststore.dev/docs/building-sections/overriding-components-and-props
  */
 export function getOverriddenSection<
-  SectionName extends keyof SupportedSectionsOverridesV2
->(override: SectionOverrideDefinition<SectionName>) {
-  const defaultComponents = DefaultComponents[
-    override.section
-  ] as DefaultSectionComponentsDefinitions<SectionName>
+  Section extends SectionsOverrides[keyof SectionsOverrides]['Section']
+>(override: SectionOverrideDefinition<Section>) {
+  const { Section, ...rest } = override
 
-  if (!defaultComponents) {
-    throw new Error(
-      `Section ${override.section} does not exist. Please provide a valid section name to override.`
-    )
-  }
+  /** This type wizardry is here because the props won't behave correctly if nothing is done */
+  const OverridableSection = Section as ComponentType<ComponentProps<Section>>
 
-  const sectionOverrides = getSectionOverrides(defaultComponents, override)
-
-  return createOverriddenSection({
-    Section: Sections[override.section],
-    sectionOverrides: sectionOverrides,
-    className: override.className,
-  })
+  return function OverriddenSection(
+    props: ComponentProps<typeof OverridableSection>
+  ) {
+    return <OverridableSection {...props} {...{ __overrides: rest }} />
+  }
 }

package/src/sdk/overrides/overrides.ts

@@ -1,8 +1,8 @@
 import type {
   DefaultSectionComponentsDefinitions,
   ComponentOverrideDefinition,
-  SectionOverrideDefinition,
   OverriddenComponents,
+  SectionOverrideDefinitionV1,
 } from '../../typings/overridesDefinition'
 
 import type { SectionsOverrides } from '../../typings/overrides'
@@ -11,7 +11,7 @@ export function getSectionOverrides<
   SectionName extends keyof SectionsOverrides
 >(
   defaultComponents: DefaultSectionComponentsDefinitions<SectionName>,
-  override: SectionOverrideDefinition<SectionName>
+  override: SectionOverrideDefinitionV1<SectionName>
 ): OverriddenComponents<SectionName> {
   const overriddenComponents = {} as OverriddenComponents<SectionName>