@faststore/core 2.1.33 → 2.1.35

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

@@ -10,47 +10,60 @@ import {
   ImageZoom as UIImageZoom,
   ImageGallery as UIImageGallery,
 } from '@faststore/ui'
-import ImageGallery from 'src/components/ui/ImageGallery'
-import ShippingSimulation from 'src/components/ui/ShippingSimulation/ShippingSimulation'
-import { Image } from 'src/components/ui/Image'
-
-import ProductDetailsCustomizations from 'src/customizations/components/overrides/ProductDetails'
-
-const productDetailsComponentsCustomization = {}
 
-const productDetailsPropsCustomization = {} as any
+import LocalImageGallery from 'src/components/ui/ImageGallery'
+import LocalShippingSimulation from 'src/components/ui/ShippingSimulation/ShippingSimulation'
+import { Image } from 'src/components/ui/Image'
 
-Object.entries(ProductDetailsCustomizations.components).forEach(
-  ([key, value]) => {
-    if (value.Component) {
-      productDetailsComponentsCustomization[key] = value.Component
-    }
-  }
-)
+import { getSectionOverrides } from 'src/utils/overrides'
+import { override } from 'src/customizations/components/overrides/ProductDetails'
+import type { ProductDetailsOverrideDefinition } from 'src/typings/overrides'
 
-Object.entries(ProductDetailsCustomizations.components).forEach(
-  ([key, value]) => {
-    if (value.props) {
-      productDetailsPropsCustomization[key] = value.props
-    }
-  }
+const {
+  ProductTitle,
+  DiscountBadge,
+  BuyButton,
+  Icon,
+  Price,
+  QuantitySelector,
+  SkuSelector,
+  ShippingSimulation,
+  ImageGallery,
+  ImageZoom,
+  __experimentalImageGalleryImage,
+  __experimentalImageGallery,
+  __experimentalShippingSimulation,
+} = getSectionOverrides(
+  {
+    ProductTitle: UIProductTitle,
+    DiscountBadge: UIDiscountBadge,
+    BuyButton: UIBuyButton,
+    Icon: UIIcon,
+    Price: UIPrice,
+    QuantitySelector: UIQuantitySelector,
+    SkuSelector: UISkuSelector,
+    ShippingSimulation: UIShippingSimulation,
+    ImageGallery: UIImageGallery,
+    ImageZoom: UIImageZoom,
+    __experimentalImageGalleryImage: Image,
+    __experimentalImageGallery: LocalImageGallery,
+    __experimentalShippingSimulation: LocalShippingSimulation,
+  },
+  override as ProductDetailsOverrideDefinition
 )
 
-const Components = {
-  ProductTitle: UIProductTitle,
-  DiscountBadge: UIDiscountBadge,
-  BuyButton: UIBuyButton,
-  Icon: UIIcon,
-  Price: UIPrice,
-  QuantitySelector: UIQuantitySelector,
-  SkuSelector: UISkuSelector,
-  ShippingSimulation: UIShippingSimulation,
-  ImageGallery: UIImageGallery,
-  ImageZoom: UIImageZoom,
-  __experimentalImageGalleryImage: Image,
-  __experimentalImageGallery: ImageGallery,
-  __experimentalShippingSimulation: ShippingSimulation,
-  ...productDetailsComponentsCustomization,
+export {
+  ProductTitle,
+  DiscountBadge,
+  BuyButton,
+  Icon,
+  Price,
+  QuantitySelector,
+  SkuSelector,
+  ShippingSimulation,
+  ImageGallery,
+  ImageZoom,
+  __experimentalImageGalleryImage,
+  __experimentalImageGallery,
+  __experimentalShippingSimulation,
 }
-
-export { Components, productDetailsPropsCustomization as Props }

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

@@ -18,16 +18,11 @@ import { ProductDetailsSettings } from 'src/components/ui/ProductDetails'
 import styles from './section.module.scss'
 
 import {
-  Components,
-  Props,
-} from 'src/components/sections/ProductDetails/Overrides'
-
-const {
   ProductTitle,
   DiscountBadge,
-  __experimentalImageGallery: ImageGallery,
-  __experimentalShippingSimulation: ShippingSimulation,
-} = Components
+  __experimentalImageGallery as ImageGallery,
+  __experimentalShippingSimulation as ShippingSimulation,
+} from 'src/components/sections/ProductDetails/Overrides'
 
 interface ProductDetailsContextProps {
   context: ProductDetailsFragment_ProductFragment
@@ -70,25 +65,22 @@ function ProductDetails({
     refNumber: showRefNumber,
     discountBadge: {
       showDiscountBadge,
-      size: discountBadgeSize = Props['DiscountBadge'].size,
+      size: discountBadgeSize = DiscountBadge.props.size,
     },
   },
   buyButton: { icon: buyButtonIcon, title: buyButtonTitle },
   shippingSimulator: {
-    title: shippingSimulatorTitle = Props['__experimentalShippingSimulation']
-      .title,
-    inputLabel: shippingSimulatorInputLabel = Props[
-      '__experimentalShippingSimulation'
-    ].inputLabel,
-    shippingOptionsTableTitle: shippingSimulatorOptionsTableTitle = Props[
-      '__experimentalShippingSimulation'
-    ].optionsLabel,
+    title: shippingSimulatorTitle = ShippingSimulation.props.title,
+    inputLabel: shippingSimulatorInputLabel = ShippingSimulation.props
+      .inputLabel,
+    shippingOptionsTableTitle:
+      shippingSimulatorOptionsTableTitle = ShippingSimulation.props
+        .optionsLabel,
     link: {
-      to: shippingSimulatorLinkUrl = Props['__experimentalShippingSimulation']
+      to: shippingSimulatorLinkUrl = ShippingSimulation.props
         .idkPostalCodeLinkProps?.href,
-      text: shippingSimulatorLinkText = Props[
-        '__experimentalShippingSimulation'
-      ].idkPostalCodeLinkProps?.children,
+      text: shippingSimulatorLinkText = ShippingSimulation.props
+        .idkPostalCodeLinkProps?.children,
     },
   },
   productDescription: {
@@ -165,16 +157,16 @@ function ProductDetails({
       <section data-fs-product-details>
         <section data-fs-product-details-body data-fs-content="product-details">
           <header data-fs-product-details-title data-fs-product-details-section>
-            <ProductTitle
+            <ProductTitle.Component
               // TODO: We should review this prop. There's now way to override the title and use the dynamic name value.
               // Maybe passing a ProductTitleHeader component as a prop would be better, as it would be overridable.
               // Maybe now it's worth to make title always a h1 and receive only the name, as it would be easier for users to override.
               title={<h1>{name}</h1>}
-              {...Props['ProductTitle']}
+              {...ProductTitle.props}
               label={
                 showDiscountBadge && (
-                  <DiscountBadge
-                    {...Props['DiscountBadge']}
+                  <DiscountBadge.Component
+                    {...DiscountBadge.props}
                     size={discountBadgeSize}
                     // Dynamic props shouldn't be overridable
                     // This decision can be reviewed later if needed
@@ -186,9 +178,9 @@ function ProductDetails({
               refNumber={showRefNumber && productId}
             />
           </header>
-          <ImageGallery
+          <ImageGallery.Component
             data-fs-product-details-gallery
-            {...Props['__experimentalImageGallery']}
+            {...ImageGallery.props}
             images={productImages}
           />
           <section data-fs-product-details-info>
@@ -211,13 +203,13 @@ function ProductDetails({
             </section>
 
             {availability && (
-              <ShippingSimulation
+              <ShippingSimulation.Component
                 data-fs-product-details-section
                 data-fs-product-details-shipping
                 formatter={useFormattedPrice}
-                {...Props['__experimentalShippingSimulation']}
+                {...ShippingSimulation.props}
                 idkPostalCodeLinkProps={{
-                  ...Props['idkPostalCodeLinkProps'],
+                  ...ShippingSimulation.props.idkPostalCodeLinkProps,
                   href: shippingSimulatorLinkUrl,
                   children: shippingSimulatorLinkText,
                 }}

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

@@ -5,6 +5,7 @@ import {
   Skeleton as UISkeleton,
   Icon as UIIcon,
 } from '@faststore/ui'
+
 import ProductCard from 'src/components/product/ProductCard'
 import FilterDesktop from 'src/components/search/Filter/FilterDesktop'
 
@@ -12,41 +13,49 @@ const FilterSlider = lazy(
   () => import('src/components/search/Filter/FilterSlider')
 )
 
-import ProductGalleryCustomizations from 'src/customizations/components/overrides/ProductGallery'
-
-const productGalleryComponentsCustomization = {}
-
-const productGalleryPropsCustomization = {} as any
-
-Object.entries(ProductGalleryCustomizations.components).forEach(
-  ([key, value]) => {
-    if (value.Component) {
-      productGalleryComponentsCustomization[key] = value.Component
-    }
-  }
+import { getSectionOverrides } from 'src/utils/overrides'
+import { override } from 'src/customizations/components/overrides/ProductGallery'
+import type { ProductGalleryOverrideDefinition } from 'src/typings/overrides'
+
+const {
+  MobileFilterButton,
+  FilterIcon,
+  PrevIcon,
+  ResultsCountSkeleton,
+  SortSkeleton,
+  FilterButtonSkeleton,
+  LinkButtonPrev,
+  LinkButtonNext,
+  __experimentalFilterDesktop,
+  __experimentalFilterSlider,
+  __experimentalProductCard,
+} = getSectionOverrides(
+  {
+    MobileFilterButton: UIButton,
+    FilterIcon: UIIcon,
+    PrevIcon: UIIcon,
+    ResultsCountSkeleton: UISkeleton,
+    SortSkeleton: UISkeleton,
+    FilterButtonSkeleton: UISkeleton,
+    LinkButtonPrev: UILinkButton,
+    LinkButtonNext: UILinkButton,
+    __experimentalFilterDesktop: FilterDesktop,
+    __experimentalFilterSlider: FilterSlider,
+    __experimentalProductCard: ProductCard,
+  },
+  override as ProductGalleryOverrideDefinition
 )
 
-Object.entries(ProductGalleryCustomizations.components).forEach(
-  ([key, value]) => {
-    if (value.props) {
-      productGalleryPropsCustomization[key] = value.props
-    }
-  }
-)
-
-const Components = {
-  Button: UIButton,
-  FilterIcon: UIIcon,
-  PrevIcon: UIIcon,
-  ResultsCountSkeleton: UISkeleton,
-  SortSkeleton: UISkeleton,
-  FilterButtonSkeleton: UISkeleton,
-  LinkButtonPrev: UILinkButton,
-  LinkButtonNext: UILinkButton,
-  __experimentalFilterDesktop: FilterDesktop,
-  __experimentalFilterSlider: FilterSlider,
-  __experimentalProductCard: ProductCard,
-  ...productGalleryComponentsCustomization,
+export {
+  MobileFilterButton,
+  FilterIcon,
+  PrevIcon,
+  ResultsCountSkeleton,
+  SortSkeleton,
+  FilterButtonSkeleton,
+  LinkButtonPrev,
+  LinkButtonNext,
+  __experimentalFilterDesktop,
+  __experimentalFilterSlider,
+  __experimentalProductCard,
 }
-
-export { Components, productGalleryPropsCustomization as Props }

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

@@ -1,34 +1,20 @@
 import { ProductShelf as UIProductShelf } from '@faststore/ui'
+
 import ProductCard from 'src/components/product/ProductCard'
 import Carousel from 'src/components/ui/Carousel'
 
-import ProductShelfCustomizations from 'src/customizations/components/overrides/ProductShelf'
-
-const productShelfComponentsCustomization = {}
-
-const productShelfPropsCustomization = {} as any
-
-Object.entries(ProductShelfCustomizations.components).forEach(
-  ([key, value]) => {
-    if (value.Component) {
-      productShelfComponentsCustomization[key] = value.Component
-    }
-  }
-)
-
-Object.entries(ProductShelfCustomizations.components).forEach(
-  ([key, value]) => {
-    if (value.props) {
-      productShelfPropsCustomization[key] = value.props
-    }
-  }
-)
+import { getSectionOverrides } from 'src/utils/overrides'
+import { override } from 'src/customizations/components/overrides/ProductShelf'
+import type { ProductShelfOverrideDefinition } from 'src/typings/overrides'
 
-const Components = {
-  ProductShelf: UIProductShelf,
-  __experimentalCarousel: Carousel,
-  __experimentalProductCard: ProductCard,
-  ...productShelfComponentsCustomization,
-}
+const { ProductShelf, __experimentalCarousel, __experimentalProductCard } =
+  getSectionOverrides(
+    {
+      ProductShelf: UIProductShelf,
+      __experimentalCarousel: Carousel,
+      __experimentalProductCard: ProductCard,
+    },
+    override as ProductShelfOverrideDefinition
+  )
 
-export { Components, productShelfPropsCustomization as Props }
+export { ProductShelf, __experimentalCarousel, __experimentalProductCard }

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

@@ -1,28 +1,16 @@
 import { RegionBar as UIRegionBar, Icon as UIIcon } from '@faststore/ui'
 
-import RegionBarCustomizations from 'src/customizations/components/overrides/RegionBar'
+import { getSectionOverrides } from 'src/utils/overrides'
+import { override } from 'src/customizations/components/overrides/RegionBar'
+import type { RegionBarOverrideDefinition } from 'src/typings/overrides'
 
-const regionBarComponentsCustomization = {}
+const { RegionBar, LocationIcon, ButtonIcon } = getSectionOverrides(
+  {
+    RegionBar: UIRegionBar,
+    LocationIcon: UIIcon,
+    ButtonIcon: UIIcon,
+  },
+  override as RegionBarOverrideDefinition
+)
 
-const regionBarPropsCustomization = {} as any
-
-Object.entries(RegionBarCustomizations.components).forEach(([key, value]) => {
-  if (value.Component) {
-    regionBarComponentsCustomization[key] = value.Component
-  }
-})
-
-Object.entries(RegionBarCustomizations.components).forEach(([key, value]) => {
-  if (value.props) {
-    regionBarPropsCustomization[key] = value.props
-  }
-})
-
-const Components = {
-  RegionBar: UIRegionBar,
-  LocationIcon: UIIcon,
-  ButtonIcon: UIIcon,
-  ...regionBarComponentsCustomization,
-}
-
-export { Components, regionBarPropsCustomization as Props }
+export { RegionBar, LocationIcon, ButtonIcon }

package/src/components/ui/Breadcrumb/Breadcrumb.tsx

@@ -3,8 +3,10 @@ import { memo } from 'react'
 
 import Link from 'src/components/ui/Link'
 
-import { Components, Props } from 'src/components/sections/Breadcrumb/Overrides'
-const { Breadcrumb: BreadcrumbWrapper, Icon } = Components
+import {
+  Breadcrumb as BreadcrumbWrapper,
+  Icon,
+} from 'src/components/sections/Breadcrumb/Overrides'
 
 export interface BreadcrumbProps extends UIBreadcrumbProps {
   icon: string
@@ -12,11 +14,11 @@ export interface BreadcrumbProps extends UIBreadcrumbProps {
 }
 
 const Breadcrumb = ({
-  icon = Props['Icon'].name ?? 'Home',
+  icon = Icon.props.name ?? 'Home',
   alt = 'Go to homepage',
   ...otherProps
 }: BreadcrumbProps) => (
-  <BreadcrumbWrapper
+  <BreadcrumbWrapper.Component
     homeLink={
       <Link
         data-fs-breadcrumb-link
@@ -25,11 +27,11 @@ const Breadcrumb = ({
         href="/"
         prefetch={false}
       >
-        <Icon
+        <Icon.Component
           width={18}
           height={18}
           weight="bold"
-          {...Props['Icon']}
+          {...Icon.props}
           name={icon}
         />
       </Link>
@@ -39,7 +41,7 @@ const Breadcrumb = ({
         {name}
       </Link>
     )}
-    {...Props['Breadcrumb']}
+    {...BreadcrumbWrapper.props}
     {...otherProps}
   />
 )

package/src/components/ui/ImageGallery/ImageGallery.tsx

@@ -4,14 +4,15 @@ import { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 
 import {
-  Components,
-  Props,
+  ImageGallery as ImageGalleryWrapper,
+  ImageZoom,
+  __experimentalImageGalleryImage as Image,
 } from 'src/components/sections/ProductDetails/Overrides'
 
 const ImageComponent = ({ url, alternateName }) => {
-  const { __experimentalImageGalleryImage: Image } = Components
-
-  return <Image src={url} alt={alternateName} width={68} height={68} />
+  return (
+    <Image.Component src={url} alt={alternateName} width={68} height={68} />
+  )
 }
 
 export interface ImageGalleryProps {
@@ -25,34 +26,27 @@ const ImageGallery = ({ images, ...otherProps }: ImageGalleryProps) => {
 
   useEffect(() => setSelectedImageIdx(0), [dynamicRoute])
 
-  // Deconstructing the object to avoid circular dependency errors
-  const {
-    ImageGallery: ImageGalleryWrapper,
-    ImageZoom,
-    __experimentalImageGalleryImage: Image,
-  } = Components
-
   return (
-    <ImageGalleryWrapper
-      {...Props['ImageGallery']}
+    <ImageGalleryWrapper.Component
+      {...ImageGalleryWrapper.props}
       images={images}
       ImageComponent={ImageComponent}
       selectedImageIdx={selectedImageIdx}
       setSelectedImageIdx={setSelectedImageIdx}
       {...otherProps}
     >
-      <ImageZoom {...Props['ImageZoom']}>
-        <Image
+      <ImageZoom.Component {...ImageZoom.props}>
+        <Image.Component
           sizes="(max-width: 360px) 50vw, (max-width: 768px) 90vw, 50vw"
           width={691}
           height={691 * (3 / 4)}
           loading="eager"
-          {...Props['__experimentalImageGalleryImage']}
+          {...Image.props}
           src={currentImage.url}
           alt={currentImage.alternateName}
         />
-      </ImageZoom>
-    </ImageGalleryWrapper>
+      </ImageZoom.Component>
+    </ImageGalleryWrapper.Component>
   )
 }
 

package/src/components/ui/Newsletter/Newsletter.tsx

@@ -3,18 +3,17 @@ import { forwardRef, useRef } from 'react'
 import { convertFromRaw } from 'draft-js'
 import { stateToHTML } from 'draft-js-export-html'
 import { useUI } from '@faststore/ui'
-import { useNewsletter } from 'src/sdk/newsletter/useNewsletter'
-
-import { Components, Props } from 'src/components/sections/Newsletter/Overrides'
+import type { InputFieldProps } from '@faststore/ui'
 
-const {
+import { useNewsletter } from 'src/sdk/newsletter/useNewsletter'
+import {
   ToastIconSuccess,
   ToastIconError,
   HeaderIcon,
-  InputFieldEmail,
   InputFieldName,
+  InputFieldEmail,
   Button,
-} = Components
+} from 'src/components/sections/Newsletter/Overrides'
 
 const cmsToHtml = (content) => {
   if (!content) {
@@ -146,11 +145,11 @@ const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
           ...toastSubscribe,
           status: 'INFO',
           icon: (
-            <ToastIconSuccess
+            <ToastIconSuccess.Component
               width={30}
               height={30}
-              {...Props['ToastIconSuccess']}
-              name={toastSubscribe.icon ?? Props['ToastIconSuccess'].name}
+              {...ToastIconSuccess.props}
+              name={toastSubscribe.icon ?? ToastIconSuccess.props.name}
             />
           ),
         })
@@ -159,11 +158,11 @@ const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
           ...toastSubscribeError,
           status: 'ERROR',
           icon: (
-            <ToastIconError
+            <ToastIconError.Component
               width={30}
               height={30}
-              {...Props['ToastIconError']}
-              name={toastSubscribe.icon ?? Props['ToastIconError'].name}
+              {...ToastIconError.props}
+              name={toastSubscribe.icon ?? ToastIconError.props.name}
             />
           ),
         })
@@ -184,11 +183,11 @@ const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
         >
           <header data-fs-newsletter-header>
             <h3>
-              <HeaderIcon
+              <HeaderIcon.Component
                 width={32}
                 height={32}
-                {...Props['HeaderIcon']}
-                name={icon?.icon ?? Props['HeaderIcon'].name}
+                {...HeaderIcon.props}
+                name={icon?.icon ?? HeaderIcon.props.name}
               />
               {title}
             </h3>
@@ -198,22 +197,22 @@ const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
           <div data-fs-newsletter-controls>
             <>
               {displayNameInput ? (
-                <InputFieldName
+                <InputFieldName.Component
                   id="newsletter-name"
                   required
-                  {...Props['InputFieldName']}
-                  label={nameInputLabel ?? Props['InputFieldName'].label}
+                  {...(InputFieldName.props as InputFieldProps)}
+                  label={nameInputLabel ?? InputFieldName.props.label}
                   // Dynamic props shouldn't be overridable
                   // This decision can be reviewed later if needed
                   inputRef={nameInputRef}
                 />
               ) : null}
-              <InputFieldEmail
+              <InputFieldEmail.Component
                 id="newsletter-email"
                 type="email"
                 required
-                {...Props['InputFieldEmail']}
-                label={emailInputLabel ?? Props['InputFieldEmail'].label}
+                {...(InputFieldEmail.props as InputFieldProps)}
+                label={emailInputLabel ?? InputFieldEmail.props.label}
                 // Dynamic props shouldn't be overridable
                 // This decision can be reviewed later if needed
                 inputRef={emailInputRef}
@@ -224,14 +223,14 @@ const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
                   __html: cmsToHtml(privacyPolicy),
                 }}
               ></span>
-              <Button
+              <Button.Component
                 variant="secondary"
                 inverse
                 type="submit"
-                {...Props['Button']}
+                {...Button.props}
               >
                 {loading ? subscribeButtonLoadingLabel : subscribeButtonLabel}
-              </Button>
+              </Button.Component>
             </>
           </div>
         </form>