@faststore/core 3.77.3 → 3.78.0

package/src/components/ui/ProductGallery/ProductGallery.tsx

@@ -1,6 +1,6 @@
 import { NextSeo } from 'next-seo'
 import dynamic from 'next/dynamic'
-import { Suspense, lazy, type MouseEvent } from 'react'
+import { Suspense, lazy, useState, type MouseEvent } from 'react'
 
 import { useSearch } from '@faststore/sdk'
 import { useUI } from '@faststore/ui'
@@ -22,6 +22,9 @@ import { useDelayedPagination } from 'src/sdk/search/useDelayedPagination'
 import { useFilter } from 'src/sdk/search/useFilter'
 import useScreenResize from 'src/sdk/ui/useScreenResize'
 
+import styles from '../../sections/ProductGallery/section.module.scss'
+import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
+
 const ProductGalleryPage = lazy(() => import('./ProductGalleryPage'))
 const FilterSkeleton = dynamic(
   () =>
@@ -60,6 +63,29 @@ export interface ProductGalleryProps {
       alt: string
     }
   }
+  productComparison?: {
+    enabled?: boolean
+    labels?: {
+      compareButton: string
+      clearSelectionButton: string
+      selectionWarning: string
+      sidebarComponent?: {
+        title: string
+        sortLabel: string
+        filterLabel: string
+        productNameFilterLabel: string
+        preferencesLabel: string
+        toggleFieldLabel: string
+        cartButtonLabel: string
+        priceLabel: string
+        priceWithTaxLabel: string
+      }
+      technicalInformation?: {
+        title: string
+        description: string
+      }
+    }
+  }
   itemsPerPage?: number
   loadMorePageButton?: {
     label?: string
@@ -82,6 +108,7 @@ function ProductGallery({
   loadMorePageButton,
   sortBySelector,
   productCard,
+  productComparison,
 }: ProductGalleryProps) {
   const {
     FilterButtonSkeleton,
@@ -92,8 +119,12 @@ function ProductGallery({
     PrevIcon,
     ResultsCountSkeleton,
     SortSkeleton,
+    ToggleField,
+    ProductComparison,
+    ProductComparisonToolbar,
     __experimentalFilterDesktop: FilterDesktop,
     __experimentalFilterSlider: FilterSlider,
+    __experimentalProductComparisonSidebar: ProductComparisonSidebar,
   } = useOverrideComponents<'ProductGallery'>()
 
   const { openFilter, filter: displayFilter } = useUI()
@@ -102,11 +133,15 @@ function ProductGallery({
   const data = context?.data
   const facets = useDelayedFacets(data) ?? []
   const { next, prev } = useDelayedPagination(totalCount)
-  const { isDesktop } = useScreenResize()
+
+  const [showComparisonProducts, setShowComparisonProducts] =
+    useState<boolean>(false)
 
   useProductsPrefetch(prev ? prev.cursor : null)
   useProductsPrefetch(next ? next.cursor : null)
 
+  const { isDesktop } = useScreenResize()
+
   const hasFacetsLoaded = Boolean(data?.search?.facets)
   const hasProductsLoaded = Boolean(data?.search?.products)
   const initialSelectedFacets =
@@ -125,184 +160,227 @@ function ProductGallery({
           </h1>
         </header>
       )}
-      <div
-        data-fs-product-listing-content-grid
-        data-fs-content="product-gallery"
-      >
-        {isDesktop && (
-          <div data-fs-product-listing-filters>
-            <FilterSkeleton loading={!hasFacetsLoaded}>
+      <ProductComparison.Component>
+        <div
+          data-fs-product-listing-content-grid
+          data-fs-content="product-gallery"
+        >
+          {isDesktop && (
+            <div data-fs-product-listing-filters>
+              <FilterSkeleton loading={!hasFacetsLoaded}>
+                {hasFacetsLoaded && facets?.length > 0 && (
+                  <div className="hidden-mobile">
+                    <FilterDesktop.Component
+                      {...FilterDesktop.props}
+                      {...filter}
+                      title={filterCmsData?.title}
+                    />
+                  </div>
+                )}
+              </FilterSkeleton>
+            </div>
+          )}
+          {!isDesktop && displayFilter && (
+            <div data-fs-product-listing-filters>
+              <FilterSlider.Component
+                {...FilterSlider.props}
+                {...filter}
+                title={filterCmsData?.title}
+                clearButtonLabel={filterCmsData?.mobileOnly?.clearButtonLabel}
+                applyButtonLabel={filterCmsData?.mobileOnly?.applyButtonLabel}
+              />
+            </div>
+          )}
+          <div data-fs-product-listing-results-count data-count={totalCount}>
+            <ResultsCountSkeleton.Component
+              data-fs-product-listing-results-count-skeleton
+              size={{ width: '100%', height: '1.5rem' }}
+              {...ResultsCountSkeleton.props}
+              // Dynamic props shouldn't be overridable
+              // This decision can be reviewed later if needed
+              loading={!hasProductsLoaded}
+            >
+              <h2 data-testid="total-product-count">
+                {totalCount} {totalCountLabel}
+              </h2>
+            </ResultsCountSkeleton.Component>
+            {productComparison?.enabled && (
+              <ToggleField.Component
+                id="toggle-field-comparison"
+                label={productComparison?.labels?.compareButton}
+                checked={showComparisonProducts}
+                onChange={() =>
+                  setShowComparisonProducts(!showComparisonProducts)
+                }
+                {...ToggleField.props}
+              />
+            )}
+          </div>
+
+          <div data-fs-product-listing-sort>
+            <SortSkeleton.Component
+              data-fs-product-listing-sort-skeleton
+              size={{ width: 'auto', height: '1.5rem' }}
+              {...SortSkeleton.props}
+              // Dynamic props shouldn't be overridable
+              // This decision can be reviewed later if needed
+              loading={!hasProductsLoaded}
+            >
+              <Sort
+                label={sortBySelector?.label}
+                options={sortBySelector?.options}
+              />
+            </SortSkeleton.Component>
+            <FilterButtonSkeleton.Component
+              data-fs-product-listing-filter-button-skeleton
+              size={{ width: '6rem', height: '1.5rem' }}
+              {...FilterButtonSkeleton.props}
+              // Dynamic props shouldn't be overridable
+              // This decision can be reviewed later if needed
+              loading={!hasFacetsLoaded}
+            >
               {hasFacetsLoaded && facets?.length > 0 && (
-                <div className="hidden-mobile">
-                  <FilterDesktop.Component
-                    {...FilterDesktop.props}
-                    {...filter}
-                    title={filterCmsData?.title}
-                  />
-                </div>
+                <MobileFilterButton.Component
+                  variant="tertiary"
+                  data-testid="open-filter-button"
+                  icon={
+                    <FilterIcon.Component
+                      width={16}
+                      height={16}
+                      {...FilterIcon.props}
+                      name={
+                        filterCmsData?.mobileOnly?.filterButton?.icon?.icon ??
+                        FilterIcon.props.name
+                      }
+                      aria-label={
+                        filterCmsData?.mobileOnly?.filterButton?.icon?.alt ??
+                        FilterIcon.props['aria-label']
+                      }
+                    />
+                  }
+                  iconPosition="left"
+                  {...MobileFilterButton.props}
+                  // Dynamic props shouldn't be overridable
+                  // This decision can be reviewed later if needed
+                  onClick={openFilter}
+                >
+                  {filterCmsData?.mobileOnly?.filterButton?.label}
+                </MobileFilterButton.Component>
               )}
-            </FilterSkeleton>
+            </FilterButtonSkeleton.Component>
           </div>
-        )}
-        {!isDesktop && displayFilter && (
-          <div data-fs-product-listing-filters>
-            <FilterSlider.Component
-              {...FilterSlider.props}
-              {...filter}
-              title={filterCmsData?.title}
-              clearButtonLabel={filterCmsData?.mobileOnly?.clearButtonLabel}
-              applyButtonLabel={filterCmsData?.mobileOnly?.applyButtonLabel}
-            />
-          </div>
-        )}
-        <div data-fs-product-listing-results-count data-count={totalCount}>
-          <ResultsCountSkeleton.Component
-            data-fs-product-listing-results-count-skeleton
-            size={{ width: '100%', height: '1.5rem' }}
-            {...ResultsCountSkeleton.props}
-            // Dynamic props shouldn't be overridable
-            // This decision can be reviewed later if needed
-            loading={!hasProductsLoaded}
-          >
-            <h2 data-testid="total-product-count">
-              {totalCount} {totalCountLabel}
-            </h2>
-          </ResultsCountSkeleton.Component>
-        </div>
-        <div data-fs-product-listing-sort>
-          <SortSkeleton.Component
-            data-fs-product-listing-sort-skeleton
-            size={{ width: 'auto', height: '1.5rem' }}
-            {...SortSkeleton.props}
-            // Dynamic props shouldn't be overridable
-            // This decision can be reviewed later if needed
-            loading={!hasProductsLoaded}
-          >
-            <Sort
-              label={sortBySelector?.label}
-              options={sortBySelector?.options}
-            />
-          </SortSkeleton.Component>
-          <FilterButtonSkeleton.Component
-            data-fs-product-listing-filter-button-skeleton
-            size={{ width: '6rem', height: '1.5rem' }}
-            {...FilterButtonSkeleton.props}
-            // Dynamic props shouldn't be overridable
-            // This decision can be reviewed later if needed
-            loading={!hasFacetsLoaded}
-          >
-            {hasFacetsLoaded && facets?.length > 0 && (
-              <MobileFilterButton.Component
-                variant="tertiary"
-                data-testid="open-filter-button"
-                icon={
-                  <FilterIcon.Component
-                    width={16}
-                    height={16}
-                    {...FilterIcon.props}
-                    name={
-                      filterCmsData?.mobileOnly?.filterButton?.icon?.icon ??
-                      FilterIcon.props.name
-                    }
-                    aria-label={
-                      filterCmsData?.mobileOnly?.filterButton?.icon?.alt ??
-                      FilterIcon.props['aria-label']
-                    }
-                  />
-                }
-                iconPosition="left"
-                {...MobileFilterButton.props}
-                // Dynamic props shouldn't be overridable
-                // This decision can be reviewed later if needed
-                onClick={openFilter}
-              >
-                {filterCmsData?.mobileOnly?.filterButton?.label}
-              </MobileFilterButton.Component>
+          <div data-fs-product-listing-results>
+            {/* Add link to previous page. This helps on SEO */}
+            {!!prev && (
+              <div data-fs-product-listing-pagination="top">
+                <NextSeo
+                  additionalLinkTags={[{ rel: 'prev', href: prev.link }]}
+                />
+                <LinkButtonPrev.Component
+                  rel="prev"
+                  variant="secondary"
+                  iconPosition="left"
+                  icon={
+                    <PrevIcon.Component
+                      width={16}
+                      height={16}
+                      weight="bold"
+                      {...PrevIcon.props}
+                      name={
+                        previousPageButton?.icon?.icon ?? PrevIcon.props.name
+                      }
+                      aria-label={
+                        previousPageButton?.icon?.alt ??
+                        previousPageButton?.label ??
+                        PrevIcon.props['aria-label']
+                      }
+                    />
+                  }
+                  {...LinkButtonPrev.props}
+                  // Dynamic props shouldn't be overridable
+                  // This decision can be reviewed later if needed
+                  onClick={(e: MouseEvent<HTMLElement>) => {
+                    e.currentTarget.blur()
+                    e.preventDefault()
+                    addPrevPage()
+                  }}
+                  href={prev.link}
+                >
+                  {previousPageButton?.label}
+                </LinkButtonPrev.Component>
+              </div>
             )}
-          </FilterButtonSkeleton.Component>
-        </div>
-        <div data-fs-product-listing-results>
-          {/* Add link to previous page. This helps on SEO */}
-          {prev !== false && (
-            <div data-fs-product-listing-pagination="top">
-              <NextSeo
-                additionalLinkTags={[{ rel: 'prev', href: prev.link }]}
-              />
-              <LinkButtonPrev.Component
-                rel="prev"
-                variant="secondary"
-                iconPosition="left"
-                icon={
-                  <PrevIcon.Component
-                    width={16}
-                    height={16}
-                    weight="bold"
-                    {...PrevIcon.props}
-                    name={previousPageButton?.icon?.icon ?? PrevIcon.props.name}
-                    aria-label={
-                      previousPageButton?.icon?.alt ??
-                      previousPageButton?.label ??
-                      PrevIcon.props['aria-label']
-                    }
+            {/* Render ALL products */}
+            {hasProductsLoaded ? (
+              <Suspense fallback={GalleryPageSkeleton}>
+                {pages.map((page) => (
+                  <ProductGalleryPage
+                    key={`gallery-page-${page}`}
+                    page={page}
+                    title={title}
+                    productCard={productCard}
+                    itemsPerPage={itemsPerPage}
+                    firstPage={pages[0]}
+                    shouldShowComparison={showComparisonProducts}
+                    compareLabel={productComparison?.labels?.compareButton}
                   />
-                }
-                {...LinkButtonPrev.props}
-                // Dynamic props shouldn't be overridable
-                // This decision can be reviewed later if needed
-                onClick={(e: MouseEvent<HTMLElement>) => {
-                  e.currentTarget.blur()
-                  e.preventDefault()
-                  addPrevPage()
-                }}
-                href={prev.link}
-              >
-                {previousPageButton?.label}
-              </LinkButtonPrev.Component>
-            </div>
-          )}
-          {/* Render ALL products */}
-          {hasProductsLoaded ? (
-            <Suspense fallback={GalleryPageSkeleton}>
-              {pages.map((page) => (
-                <ProductGalleryPage
-                  key={`gallery-page-${page}`}
-                  page={page}
-                  title={title}
-                  productCard={productCard}
-                  itemsPerPage={itemsPerPage}
-                  firstPage={pages[0]}
+                ))}
+              </Suspense>
+            ) : (
+              GalleryPageSkeleton
+            )}
+            {/* Add link to next page. This helps on SEO */}
+            {next !== false && (
+              <div data-fs-product-listing-pagination="bottom">
+                <NextSeo
+                  additionalLinkTags={[{ rel: 'next', href: next.link }]}
                 />
-              ))}
-            </Suspense>
-          ) : (
-            GalleryPageSkeleton
-          )}
-          {/* Add link to next page. This helps on SEO */}
-          {next !== false && (
-            <div data-fs-product-listing-pagination="bottom">
-              <NextSeo
-                additionalLinkTags={[{ rel: 'next', href: next.link }]}
-              />
-              <LinkButtonNext.Component
-                testId="show-more"
-                rel="next"
-                variant="secondary"
-                {...LinkButtonNext.props}
-                // Dynamic props shouldn't be overridable
-                // This decision can be reviewed later if needed
-                onClick={(e: MouseEvent<HTMLElement>) => {
-                  e.currentTarget.blur()
-                  e.preventDefault()
-                  addNextPage()
-                }}
-                href={next.link}
-              >
-                {loadMorePageButton?.label}
-              </LinkButtonNext.Component>
-            </div>
-          )}
+                <LinkButtonNext.Component
+                  testId="show-more"
+                  rel="next"
+                  variant="secondary"
+                  {...LinkButtonNext.props}
+                  // Dynamic props shouldn't be overridable
+                  // This decision can be reviewed later if needed
+                  onClick={(e: MouseEvent<HTMLElement>) => {
+                    e.currentTarget.blur()
+                    e.preventDefault()
+                    addNextPage()
+                  }}
+                  href={next.link}
+                >
+                  {loadMorePageButton?.label}
+                </LinkButtonNext.Component>
+              </div>
+            )}
+          </div>
         </div>
-      </div>
+        {showComparisonProducts && (
+          <>
+            <ProductComparisonSidebar.Component
+              direction="rightSide"
+              size="partial"
+              priceFormatter={useFormattedPrice}
+              technicalInformation={{
+                title: productComparison?.labels?.technicalInformation?.title,
+                description:
+                  productComparison?.labels?.technicalInformation?.description,
+              }}
+              overlayProps={{ className: styles.section }}
+              {...productComparison.labels.sidebarComponent}
+            />
+            <ProductComparisonToolbar.Component
+              selectionWarningLabel={
+                productComparison?.labels?.selectionWarning
+              }
+              clearSelectionButtonLabel={
+                productComparison?.labels?.clearSelectionButton
+              }
+              compareButtonLabel={productComparison?.labels?.compareButton}
+            />
+          </>
+        )}
+      </ProductComparison.Component>
     </section>
   )
 }

package/src/components/ui/ProductGallery/ProductGalleryPage.tsx

@@ -14,6 +14,8 @@ interface Props {
   >
   itemsPerPage: number
   firstPage: number
+  shouldShowComparison?: boolean
+  compareLabel?: string
 }
 
 function ProductGalleryPage({
@@ -22,6 +24,8 @@ function ProductGalleryPage({
   productCard,
   itemsPerPage,
   firstPage,
+  shouldShowComparison,
+  compareLabel,
 }: Props) {
   const { data } = useGalleryPage(page)
 
@@ -35,6 +39,8 @@ function ProductGalleryPage({
       title={title}
     >
       <ProductGrid
+        shouldShowComparison={shouldShowComparison}
+        compareLabel={compareLabel}
         products={products}
         page={page}
         pageSize={itemsPerPage}

package/src/sdk/product/useProductsSelected.tsx

@@ -0,0 +1,45 @@
+import { gql } from '@generated'
+import { useQuery } from 'src/sdk/graphql/useQuery'
+import { useSession } from 'src/sdk/session'
+import { useMemo } from 'react'
+import type {
+  ClientManyProductsSelectedQueryQuery,
+  ClientManyProductsSelectedQueryQueryVariables,
+  ClientSearchSuggestionsQueryQuery,
+} from '@generated/graphql'
+
+const query = gql(`
+  query ClientManyProductsSelectedQuery(
+    $productIds: [String!]!
+  ) {
+    products(productIds: $productIds) {
+      ...ProductComparisonFragment_product
+    }
+  }
+`)
+
+export const useProductsSelected = (
+  productIds: string[],
+  enabled: boolean,
+  processResponse: (data: ClientManyProductsSelectedQueryQuery) => void
+) => {
+  const { channel, locale } = useSession()
+  const variables = useMemo(() => {
+    if (!channel) {
+      throw new Error(
+        `useProductsSelected: 'channel' from session is an empty string.`
+      )
+    }
+
+    return { productIds }
+  }, [channel, locale, productIds])
+
+  return useQuery<
+    ClientSearchSuggestionsQueryQuery,
+    ClientManyProductsSelectedQueryQueryVariables
+  >(query, variables, {
+    doNotRun: enabled,
+    onSuccess: (data: ClientManyProductsSelectedQueryQuery) =>
+      processResponse(data),
+  })
+}

package/src/typings/overrides.ts

@@ -29,6 +29,10 @@ import type {
   NewsletterFormProps,
   NewsletterHeaderProps,
   NewsletterProps,
+  ProductComparisonProps,
+  ProductComparisonSidebarProps,
+  ProductComparisonToolbarProps,
+  ProductComparisonTriggerProps,
   ProductPriceProps,
   ProductShelfProps,
   ProductTitleProps,
@@ -36,10 +40,11 @@ import type {
   RegionBarProps,
   ShippingSimulationProps,
   SkeletonProps,
+  SkuSelectorProps,
+  ToggleFieldProps,
   SKUMatrixProps,
   SKUMatrixSidebarProps,
   SKUMatrixTriggerProps,
-  SkuSelectorProps,
 } from '@faststore/ui'
 import type { PropsWithChildren } from 'react'
 
@@ -322,10 +327,34 @@ export type SectionsOverrides = {
         LinkButtonProps,
         Omit<LinkButtonProps, 'onClick' | 'href'>
       >
+      ProductComparison: ComponentOverrideDefinition<
+        ProductComparisonProps,
+        ProductComparisonProps
+      >
+      ProductComparisonSidebar: ComponentOverrideDefinition<
+        ProductComparisonSidebarProps,
+        ProductComparisonSidebarProps
+      >
+      ProductComparisonToolbar: ComponentOverrideDefinition<
+        ProductComparisonToolbarProps,
+        ProductComparisonToolbarProps
+      >
+      ProductComparisonTrigger: ComponentOverrideDefinition<
+        ProductComparisonTriggerProps,
+        ProductComparisonTriggerProps
+      >
+      ToggleField: ComponentOverrideDefinition<
+        ToggleFieldProps,
+        ToggleFieldProps
+      >
       __experimentalFilterDesktop: ComponentOverrideDefinition<any, any>
       __experimentalFilterSlider: ComponentOverrideDefinition<any, any>
       __experimentalProductCard: ComponentOverrideDefinition<any, any>
       __experimentalEmptyGallery: ComponentOverrideDefinition<any, any>
+      __experimentalProductComparisonSidebar: ComponentOverrideDefinition<
+        any,
+        any
+      >
     }
   }
   ProductShelf: {

package/test/server/index.test.ts

@@ -68,6 +68,7 @@ const QUERIES = [
   'collection',
   'search',
   'allProducts',
+  'products',
   'allCollections',
   'shipping',
   'redirect',

package/.next/server/chunks/1333.js

@@ -1 +0,0 @@
-"use strict";exports.id=1333,exports.ids=[1333],exports.modules={2430:(e,i,t)=>{t.d(i,{Z:()=>FilterDeliveryMethodFacet});var r=t(16652),l=t(83339),a=t(70031),c=t(4018),n=t(20997);function FilterDeliveryMethodFacet({item:e,deliveryMethods:i}){let{city:t,postalCode:u}=a.Qf.read(),{openRegionSlider:s}=(0,r.l8)(),o=t?`${(0,c._W)(t)}, ${u}`:u,p={delivery:i?.delivery??"Shipping to","pickup-in-point":i?.pickupInPoint??"Pickup at","pickup-nearby":i?.pickupNearby??"Pickup Nearby","pickup-all":i?.pickupAll?.label??"Pickup Anywhere"};return"delivery"===e.value?(0,n.jsxs)(n.Fragment,{children:[p[e.value],n.jsx(l.Z,{"data-fs-filter-list-item-button":!0,size:"small",onClick:()=>{s(r.gK.changeLocation)},children:o})]}):"pickup-in-point"===e.value?(0,n.jsxs)(n.Fragment,{children:[p[e.value],n.jsx(l.Z,{"data-fs-filter-list-item-button":!0,size:"small",onClick:()=>{s(r.gK.changePickupPoint)},children:e.label})]}):n.jsx(n.Fragment,{children:p[e.value]??e.label})}},70643:(e,i,t)=>{t.d(i,{P:()=>useFormattedPrice});var r=t(16689),l=t(70031);let usePriceFormatter=({decimals:e}={})=>{let{currency:i,locale:t}=(0,l.kP)();return(0,r.useCallback)(r=>Intl.NumberFormat(t,{style:"currency",currency:i.code,minimumFractionDigits:e?2:0}).format(r),[i.code,t,e])},useFormattedPrice=e=>{let i=usePriceFormatter();return(0,r.useMemo)(()=>i(e),[i,e])}}};

package/.next/server/chunks/2295.js

@@ -1 +0,0 @@
-"use strict";exports.id=2295,exports.ids=[2295],exports.modules={2946:(e,t,a)=>{a.d(t,{Z:()=>DiscountBadge_DiscountBadge});var r=a(16689),n=a.n(r),d=a(40276);let useDiscountPercent=(e,t)=>(0,r.useMemo)(()=>{let a=e-t,r=100*a/e;return Math.round(r)},[t,e]),DiscountBadge_DiscountBadge=({listPrice:e,spotPrice:t,thresholdLow:a=15,thresholdHigh:r=40,size:c,testId:i="fs-discount-badge"})=>{let l=useDiscountPercent(e,t);if(0===l)return n().createElement(n().Fragment,null);let o=l<=a?"low":l<=r?"medium":"high";return n().createElement(d.Z,{"data-fs-discount-badge":!0,"data-fs-discount-badge-variant":o,size:c,"data-testid":i},l,"% off")}},38394:(e,t,a)=>{a.d(t,{Z:()=>c});var r=a(16689),n=a.n(r);let d=(0,r.forwardRef)(function({testId:e="fs-product-card",variant:t="default",bordered:a=!1,outOfStock:r,children:d,...c},i){return n().createElement("article",{ref:i,"data-fs-product-card":r?"out-of-stock":"","data-fs-product-card-variant":t,"data-fs-product-card-bordered":a,"data-testid":e,...c},d)}),c=d},50547:(e,t,a)=>{a.d(t,{Z:()=>p});var r=a(16689),n=a.n(r),d=a(40727),c=a(69088),i=a(31953),l=a(13024),o=a(2614),s=a(2946),u=a(40276),f=a(83339);let m=(0,r.forwardRef)(function({testId:e="fs-product-card-content",title:t,linkProps:a,price:r,outOfStock:m,outOfStockLabel:p="Out of stock",ratingValue:E,showDiscountBadge:g,buttonLabel:Z="Add",onButtonClick:v,children:b,includeTaxes:P=!1,includeTaxesLabel:h="Tax included",sponsored:w=!1,sponsoredLabel:y="Sponsored",...D},S){let k=r?.listPrice?r.listPrice:0,x=r?.value?r.value:0;return n().createElement("section",{ref:S,"data-fs-product-card-content":!0,"data-fs-product-card-badge":g,"data-testid":e,...D},w&&n().createElement("span",{"data-fs-product-card-sponsored-label":!0},y),n().createElement("div",{"data-fs-product-card-heading":!0},n().createElement("h3",{"data-fs-product-card-title":!0},n().createElement(d.Z,{...a,title:t},n().createElement("span",null,t))),!m&&n().createElement(c.Z,{"data-fs-product-card-prices":!0,value:x,listPrice:k,formatter:r?.formatter}),P&&n().createElement(i.Z,{"data-fs-product-card-taxes-label":!0},h),E&&n().createElement(l.Z,{value:E,icon:n().createElement(o.Z,{name:"Star"})})),g&&!m&&n().createElement(s.Z,{listPrice:k,spotPrice:x}),m&&n().createElement(u.Z,null,p),v&&!m&&n().createElement("div",{"data-fs-product-card-actions":!0},n().createElement(f.Z,{variant:"primary",icon:n().createElement(o.Z,{name:"ShoppingCart"}),iconPosition:"left",size:"small",onClick:v},Z)))}),p=m},65167:(e,t,a)=>{a.d(t,{Z:()=>c});var r=a(16689),n=a.n(r);let d=(0,r.forwardRef)(function({testId:e="fs-product-card-image",aspectRatio:t=1,children:a,...r},d){return n().createElement("div",{ref:d,"data-fs-product-card-image":!0,"data-testid":e,style:{"--fs-product-card-image-aspect-ratio":t},...r},a)}),c=d},13024:(e,t,a)=>{a.d(t,{Z:()=>o});var r=a(16689),n=a.n(r),d=a(2614),c=a(37041),i=a(94564);let l=(0,r.forwardRef)(function({children:e,testId:t="fs-rating",length:a=5,value:l=0,icon:o,onChange:s,disabled:u,...f},m){let[p,E]=(0,r.useState)(0),g={"data-fs-rating-icon-outline":!0},Z=n().isValidElement(o)?o:n().createElement(d.Z,{name:"Star"});return n().createElement(i.Z,{ref:m,"data-fs-rating":!0,"data-fs-rating-actionable":"function"==typeof s,"data-testid":t,...f},Array.from({length:a}).map((e,a)=>{let r=a+1;return n().createElement("li",{key:`rating-${a}`,"data-fs-rating-item":r<=(p||l)?"full":r-l>0&&r-l<1?"partial":"empty","data-testid":`${t}-item`},s?n().createElement(c.Z,{"data-fs-rating-button":!0,icon:Z,size:"small","aria-label":"rate",onClick:()=>{s(r)},onMouseEnter:()=>E(r),onMouseLeave:()=>E(l),disabled:u}):n().createElement(n().Fragment,null,n().createElement("div",{"data-fs-rating-icon-wrapper":!0},Z),n().isValidElement(o)?n().cloneElement(o,g):n().createElement(d.Z,{name:"Star","data-fs-rating-icon-outline":!0})))}))}),o=l}};