@faststore/core 3.67.0 → 3.68.0

package/src/components/search/Filter/FilterDesktop.tsx

@@ -1,33 +1,34 @@
-import { setFacet, toggleFacet, useSearch } from '@faststore/sdk'
+import { setFacet, useSearch } from '@faststore/sdk'
 
 import {
+  regionSliderTypes,
+  Button as UIButton,
   Filter as UIFilter,
   FilterFacetBoolean as UIFilterFacetBoolean,
   FilterFacetBooleanItem as UIFilterFacetBooleanItem,
   FilterFacetRange as UIFilterFacetRange,
   FilterFacets as UIFilterFacets,
+  Icon as UIIcon,
+  useUI,
 } from '@faststore/ui'
+
 import { gql } from '@generated/gql'
-import type { Filter_FacetsFragment } from '@generated/graphql'
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import type { useFilter } from 'src/sdk/search/useFilter'
-import { deliveryPromise } from 'discovery.config'
+import type { FilterSliderProps } from './FilterSlider'
 
-interface Props {
-  /**
-   * The array that represents the details of every facet.
-   */
-  facets: Filter_FacetsFragment[]
-  /**
-   * ID to find this component in testing tools (e.g.: cypress,
-   * testing-library, and jest).
-   */
-  testId?: string
-  /**
-   * Title for the `FilterDesktop` component.
-   */
-  title?: string
-}
+import {
+  useDeliveryPromise,
+  PICKUP_ALL_FACET_VALUE,
+} from 'src/sdk/deliveryPromise'
+import { getGlobalSettings } from 'src/utils/globalSettings'
+import FilterDeliveryMethodFacet from './FilterDeliveryMethodFacet'
+
+interface FilterDesktopProps
+  extends Omit<
+    FilterSliderProps,
+    'onClose' | 'size' | 'direction' | 'applyBtnProps' | 'clearBtnProps'
+  > {}
 
 function FilterDesktop({
   facets,
@@ -35,84 +36,141 @@ function FilterDesktop({
   dispatch,
   expanded,
   title,
-}: Props & ReturnType<typeof useFilter>) {
-  const { resetInfiniteScroll, state, setState } = useSearch()
-
-  const filteredFacets = deliveryPromise.enabled
-    ? facets
-    : facets.filter((facet) => facet.key !== 'shipping')
+}: FilterDesktopProps & ReturnType<typeof useFilter>) {
+  const cmsData = getGlobalSettings()
+  const { deliveryPromise: deliveryPromiseSettings } = cmsData ?? {}
+  const {
+    resetInfiniteScroll,
+    state: searchState,
+    setState: setSearchState,
+  } = useSearch()
+  const { openRegionSlider } = useUI()
+  const {
+    facets: filteredFacets,
+    deliveryLabel,
+    isPickupAllEnabled,
+    shouldDisplayDeliveryButton,
+    onDeliveryFacetChange,
+  } = useDeliveryPromise({
+    allFacets: facets,
+    selectedFilterFacets: searchState.selectedFacets,
+    deliveryPromiseSettings,
+  })
 
   return (
-    <UIFilter
-      testId={`desktop-${testId}`}
-      title={title}
-      indicesExpanded={expanded}
-      onAccordionChange={(idx) =>
-        dispatch({ type: 'toggleExpanded', payload: idx })
-      }
-    >
-      {filteredFacets.map((facet, index) => {
-        const { __typename: type, label } = facet
-        const isExpanded = expanded.has(index)
-        return (
+    <>
+      <UIFilter
+        testId={`desktop-${testId}`}
+        title={title}
+        indicesExpanded={expanded}
+        onAccordionChange={(idx) =>
+          dispatch({ type: 'toggleExpanded', payload: idx })
+        }
+      >
+        {shouldDisplayDeliveryButton && (
           <UIFilterFacets
-            key={`${testId}-${label}-${index}`}
+            key={`${testId}-delivery-unset`}
             testId={testId}
-            index={index}
-            type={type}
-            label={label}
+            index={0}
+            type=""
+            label={deliveryLabel}
+            description={deliveryPromiseSettings?.deliveryMethods?.description}
           >
-            {type === 'StoreFacetBoolean' && isExpanded && (
-              <UIFilterFacetBoolean>
-                {facet.values.map((item) => (
-                  <UIFilterFacetBooleanItem
-                    key={`${testId}-${facet.label}-${item.label}`}
-                    id={`${testId}-${facet.label}-${item.label}`}
-                    testId={testId}
-                    onFacetChange={(facet) => {
-                      setState({
-                        ...state,
-                        selectedFacets: toggleFacet(
-                          state.selectedFacets,
-                          facet
-                        ),
-                        page: 0,
-                      })
-                      resetInfiniteScroll(0)
-                    }}
-                    selected={item.selected}
-                    value={item.value}
-                    quantity={item.quantity}
-                    facetKey={facet.key}
-                    label={item.label}
-                  />
-                ))}
-              </UIFilterFacetBoolean>
-            )}
-            {type === 'StoreFacetRange' && isExpanded && (
-              <UIFilterFacetRange
-                facetKey={facet.key}
-                min={facet.min}
-                max={facet.max}
-                formatter={
-                  facet.key.toLowerCase() === 'price'
-                    ? useFormattedPrice
-                    : undefined
-                }
-                onFacetChange={(facet) => {
-                  setState({
-                    ...state,
-                    selectedFacets: setFacet(state.selectedFacets, facet, true),
-                    page: 0,
-                  })
-                  resetInfiniteScroll(0)
-                }}
-              />
-            )}
+            <UIButton
+              data-fs-filter-list-delivery-button
+              variant="secondary"
+              onClick={() => openRegionSlider(regionSliderTypes.setLocation)}
+              icon={<UIIcon name="MapPin" />}
+            >
+              {deliveryPromiseSettings?.deliveryMethods
+                ?.setLocationButtonLabel ?? 'Set Location'}
+            </UIButton>
           </UIFilterFacets>
-        )
-      })}
-    </UIFilter>
+        )}
+
+        {filteredFacets.map((facet, idx) => {
+          const index = shouldDisplayDeliveryButton ? idx + 1 : idx
+          const { __typename: type, label } = facet
+          const isExpanded = expanded.has(index)
+          const isDeliveryFacet = facet.key === 'shipping'
+
+          return (
+            <UIFilterFacets
+              key={`${testId}-${label}-${index}`}
+              testId={testId}
+              index={index}
+              type={type}
+              label={isDeliveryFacet ? deliveryLabel : label}
+              description={
+                isDeliveryFacet
+                  ? deliveryPromiseSettings?.deliveryMethods?.description
+                  : undefined
+              }
+            >
+              {type === 'StoreFacetBoolean' && isExpanded && (
+                <UIFilterFacetBoolean>
+                  {facet.values.map(
+                    (item) =>
+                      (item.value !== PICKUP_ALL_FACET_VALUE ||
+                        isPickupAllEnabled) && (
+                        <UIFilterFacetBooleanItem
+                          key={`${testId}-${facet.label}-${item.value}`}
+                          id={`${testId}-${facet.label}-${item.value}`}
+                          testId={testId}
+                          onFacetChange={(facet) => {
+                            onDeliveryFacetChange({ facet })
+                            resetInfiniteScroll(0)
+                          }}
+                          selected={item.selected}
+                          value={item.value}
+                          quantity={item.quantity}
+                          facetKey={facet.key}
+                          label={
+                            isDeliveryFacet ? (
+                              <FilterDeliveryMethodFacet
+                                item={item}
+                                deliveryMethods={
+                                  deliveryPromiseSettings?.deliveryMethods
+                                }
+                              />
+                            ) : (
+                              item.label
+                            )
+                          }
+                          type={isDeliveryFacet ? 'radio' : 'checkbox'}
+                        />
+                      )
+                  )}
+                </UIFilterFacetBoolean>
+              )}
+              {type === 'StoreFacetRange' && isExpanded && (
+                <UIFilterFacetRange
+                  facetKey={facet.key}
+                  min={facet.min}
+                  max={facet.max}
+                  formatter={
+                    facet.key.toLowerCase() === 'price'
+                      ? useFormattedPrice
+                      : undefined
+                  }
+                  onFacetChange={(facet) => {
+                    setSearchState({
+                      selectedFacets: setFacet(
+                        searchState.selectedFacets,
+                        facet,
+                        true
+                      ),
+                      page: 0,
+                    })
+                    resetInfiniteScroll(0)
+                  }}
+                />
+              )}
+            </UIFilterFacets>
+          )
+        })}
+      </UIFilter>
+    </>
   )
 }
 

package/src/components/search/Filter/FilterSlider.tsx

@@ -1,16 +1,31 @@
 import dynamic from 'next/dynamic'
 
 import { useSearch } from '@faststore/sdk'
+import {
+  regionSliderTypes,
+  useUI,
+  type ButtonProps as UIButtonProps,
+  type FilterFacetBooleanItemProps as UIFilterFacetBooleanItemProps,
+  type FilterFacetRangeProps as UIFilterFacetRangeProps,
+  type FilterFacetsProps as UIFilterFacetsProps,
+  type FilterProps as UIFilterProps,
+  type FilterSliderProps as UIFilterSliderProps,
+  type IconProps as UIIconProps,
+} from '@faststore/ui'
+
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
-import { deliveryPromise } from 'discovery.config'
 
-import type {
-  FilterFacetBooleanItemProps as UIFilterFacetBooleanItemProps,
-  FilterFacetRangeProps as UIFilterFacetRangeProps,
-  FilterFacetsProps as UIFilterFacetsProps,
-  FilterProps as UIFilterProps,
-  FilterSliderProps as UIFilterSliderProps,
-} from '@faststore/ui'
+import type { Filter_FacetsFragment } from '@generated/graphql'
+import FilterDeliveryMethodFacet from './FilterDeliveryMethodFacet'
+
+import type { useFilter } from 'src/sdk/search/useFilter'
+import {
+  useDeliveryPromise,
+  PICKUP_ALL_FACET_VALUE,
+} from 'src/sdk/deliveryPromise'
+import { getGlobalSettings } from 'src/utils/globalSettings'
+
+import styles from './section.module.scss'
 
 const UIFilter = dynamic<{ children: React.ReactNode } & UIFilterProps>(() =>
   /* webpackChunkName: "UIFilter" */
@@ -38,13 +53,14 @@ const UIFilterSlider = dynamic<UIFilterSliderProps>(() =>
   /* webpackChunkName: "UIFilterSlider" */
   import('@faststore/ui').then((mod) => mod.FilterSlider)
 )
-
-import type { Filter_FacetsFragment } from '@generated/graphql'
-
-import type { useFilter } from 'src/sdk/search/useFilter'
-
-import styles from './section.module.scss'
-
+const UIButton = dynamic<UIButtonProps>(() =>
+  /* webpackChunkName: "UIButton" */
+  import('@faststore/ui').then((mod) => mod.Button)
+)
+const UIIcon = dynamic<UIIconProps>(() =>
+  /* webpackChunkName: "UIIcon" */
+  import('@faststore/ui').then((mod) => mod.Icon)
+)
 export interface FilterSliderProps {
   /**
    * ID to find this component in testing tools (e.g.: cypress,
@@ -80,104 +96,177 @@ function FilterSlider({
   applyButtonLabel,
 }: FilterSliderProps & ReturnType<typeof useFilter>) {
   const { resetInfiniteScroll, setState, state } = useSearch()
+  const { openRegionSlider } = useUI()
+
+  const cmsData = getGlobalSettings()
+  const { deliveryPromise: deliveryPromiseSettings } = cmsData ?? {}
 
-  const filteredFacets = deliveryPromise.enabled
-    ? facets
-    : facets.filter((facet) => facet.key !== 'shipping')
+  const {
+    facets: filteredFacets,
+    deliveryLabel,
+    isPickupAllEnabled,
+    shouldDisplayDeliveryButton,
+    onDeliveryFacetChange,
+  } = useDeliveryPromise({
+    selectedFilterFacets: selected,
+    allFacets: facets,
+    deliveryPromiseSettings,
+  })
 
   return (
-    <UIFilterSlider
-      overlayProps={{
-        className: `section ${styles.section} section-filter-slider`,
-      }}
-      title={title}
-      size="partial"
-      direction="rightSide"
-      clearBtnProps={{
-        variant: 'secondary',
-        onClick: () => dispatch({ type: 'selectFacets', payload: [] }),
-        children: clearButtonLabel ?? 'Clear All',
-      }}
-      applyBtnProps={{
-        variant: 'primary',
-        onClick: () => {
-          resetInfiniteScroll(0)
+    <>
+      <UIFilterSlider
+        overlayProps={{
+          className: `section ${styles.section} section-filter-slider`,
+        }}
+        title={title}
+        size="partial"
+        direction="rightSide"
+        clearBtnProps={{
+          variant: 'secondary',
+          onClick: () => dispatch({ type: 'selectFacets', payload: [] }),
+          children: clearButtonLabel ?? 'Clear All',
+        }}
+        applyBtnProps={{
+          variant: 'primary',
+          onClick: () => {
+            resetInfiniteScroll(0)
+
+            const isOtherShippingFacetSelected = selected.some(
+              ({ key, value }) =>
+                key === 'shipping' && value !== 'pickup-in-point'
+            )
+            const removePickupPointFacet = selected.filter(
+              ({ key }) => key !== 'pickupPoint'
+            )
 
-          setState({
-            ...state,
-            selectedFacets: selected,
-            page: 0,
+            setState({
+              selectedFacets: isOtherShippingFacetSelected
+                ? removePickupPointFacet
+                : selected,
+              page: 0,
+            })
+          },
+          children: applyButtonLabel ?? 'Apply',
+        }}
+        onClose={() => {
+          dispatch({
+            type: 'selectFacets',
+            payload: state.selectedFacets,
           })
-        },
-        children: applyButtonLabel ?? 'Apply',
-      }}
-      onClose={() => {
-        dispatch({
-          type: 'selectFacets',
-          payload: state.selectedFacets,
-        })
-      }}
-    >
-      <UIFilter
-        testId={`mobile-${testId}`}
-        indicesExpanded={expanded}
-        onAccordionChange={(index: number) =>
-          dispatch({ type: 'toggleExpanded', payload: index })
-        }
+        }}
       >
-        {filteredFacets.map((facet, index) => {
-          const { __typename: type, label } = facet
-          const isExpanded = expanded.has(index)
-          return (
+        <UIFilter
+          testId={`mobile-${testId}`}
+          indicesExpanded={expanded}
+          onAccordionChange={(index: number) =>
+            dispatch({ type: 'toggleExpanded', payload: index })
+          }
+        >
+          {shouldDisplayDeliveryButton && (
             <UIFilterFacets
-              key={`${testId}-${label}-${index}`}
-              testId={`mobile-${testId}`}
-              index={index}
-              type={type}
-              label={label}
+              key={`${testId}-delivery-0`}
+              testId={testId}
+              index={0}
+              type=""
+              label={deliveryLabel}
+              description={
+                deliveryPromiseSettings?.deliveryMethods?.description
+              }
             >
-              {type === 'StoreFacetBoolean' && isExpanded && (
-                <UIFilterFacetBoolean>
-                  {facet.values.map((item) => (
-                    <UIFilterFacetBooleanItem
-                      key={`${testId}-${facet.label}-${item.label}`}
-                      id={`${testId}-${facet.label}-${item.label}`}
-                      testId={`mobile-${testId}`}
-                      onFacetChange={(facet) =>
-                        dispatch({ type: 'toggleFacet', payload: facet })
-                      }
-                      selected={item.selected}
-                      value={item.value}
-                      quantity={item.quantity}
-                      facetKey={facet.key}
-                      label={item.label}
-                    />
-                  ))}
-                </UIFilterFacetBoolean>
-              )}
-              {type === 'StoreFacetRange' && isExpanded && (
-                <UIFilterFacetRange
-                  facetKey={facet.key}
-                  min={facet.min}
-                  max={facet.max}
-                  formatter={
-                    facet.key.toLowerCase() === 'price'
-                      ? useFormattedPrice
-                      : undefined
-                  }
-                  onFacetChange={(facet) =>
-                    dispatch({
-                      type: 'setFacet',
-                      payload: { facet, unique: true },
-                    })
-                  }
-                />
-              )}
+              <UIButton
+                data-fs-filter-list-delivery-button
+                variant="secondary"
+                onClick={() => openRegionSlider(regionSliderTypes.setLocation)}
+                icon={<UIIcon name="MapPin" />}
+              >
+                {deliveryPromiseSettings?.deliveryMethods
+                  ?.setLocationButtonLabel ?? 'Set Location'}
+              </UIButton>
             </UIFilterFacets>
-          )
-        })}
-      </UIFilter>
-    </UIFilterSlider>
+          )}
+
+          {filteredFacets.map((facet, idx) => {
+            const index = shouldDisplayDeliveryButton ? idx + 1 : idx
+            const { __typename: type, label } = facet
+            const isExpanded = expanded.has(index)
+            const isDeliveryFacet = facet.key === 'shipping'
+
+            return (
+              <UIFilterFacets
+                key={`${testId}-${label}-${index}`}
+                testId={`mobile-${testId}`}
+                index={index}
+                type={type}
+                label={isDeliveryFacet ? deliveryLabel : label}
+                description={
+                  isDeliveryFacet
+                    ? deliveryPromiseSettings?.deliveryMethods?.description
+                    : undefined
+                }
+              >
+                {type === 'StoreFacetBoolean' && isExpanded && (
+                  <UIFilterFacetBoolean>
+                    {facet.values.map(
+                      (item) =>
+                        (item.value !== PICKUP_ALL_FACET_VALUE ||
+                          isPickupAllEnabled) && (
+                          <UIFilterFacetBooleanItem
+                            key={`${testId}-${facet.label}-${item.value}`}
+                            id={`${testId}-${facet.label}-${item.value}`}
+                            testId={`mobile-${testId}`}
+                            onFacetChange={(facet) => {
+                              onDeliveryFacetChange({
+                                facet,
+                                filterDispatch: dispatch,
+                              })
+                            }}
+                            selected={item.selected}
+                            value={item.value}
+                            quantity={item.quantity}
+                            facetKey={facet.key}
+                            label={
+                              isDeliveryFacet ? (
+                                <FilterDeliveryMethodFacet
+                                  item={item}
+                                  deliveryMethods={
+                                    deliveryPromiseSettings?.deliveryMethods
+                                  }
+                                />
+                              ) : (
+                                item.label
+                              )
+                            }
+                            type={isDeliveryFacet ? 'radio' : 'checkbox'}
+                          />
+                        )
+                    )}
+                  </UIFilterFacetBoolean>
+                )}
+                {type === 'StoreFacetRange' && isExpanded && (
+                  <UIFilterFacetRange
+                    facetKey={facet.key}
+                    min={facet.min}
+                    max={facet.max}
+                    formatter={
+                      facet.key.toLowerCase() === 'price'
+                        ? useFormattedPrice
+                        : undefined
+                    }
+                    onFacetChange={(facet) =>
+                      dispatch({
+                        type: 'setFacet',
+                        payload: { facet, unique: true },
+                      })
+                    }
+                  />
+                )}
+              </UIFilterFacets>
+            )
+          })}
+        </UIFilter>
+      </UIFilterSlider>
+    </>
   )
 }
 

package/src/components/search/Filter/section.module.scss

@@ -6,11 +6,13 @@
   @import "@faststore/ui/src/components/atoms/Input/styles.scss";
   @import "@faststore/ui/src/components/atoms/Link/styles.scss";
   @import "@faststore/ui/src/components/atoms/List/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Radio/styles.scss";
   @import "@faststore/ui/src/components/atoms/Slider/styles.scss";
   @import "@faststore/ui/src/components/molecules/DiscountBadge/styles.scss";
   @import "@faststore/ui/src/components/molecules/Accordion/styles.scss";
   @import "@faststore/ui/src/components/molecules/InputField/styles.scss";
   @import "@faststore/ui/src/components/molecules/Modal/styles.scss";
+  @import "@faststore/ui/src/components/molecules/RadioField/styles.scss";
   @import "@faststore/ui/src/components/molecules/SelectField/styles.scss";
   @import "@faststore/ui/src/components/organisms/Filter/styles.scss";
   @import "@faststore/ui/src/components/organisms/FilterSlider/styles.scss";

package/src/components/sections/ProductGallery/section.module.scss

@@ -38,6 +38,7 @@
     @import "@faststore/ui/src/components/atoms/Link/styles.scss";
     @import "@faststore/ui/src/components/atoms/List/styles.scss";
     @import "@faststore/ui/src/components/atoms/Price/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Radio/styles.scss";
     @import "@faststore/ui/src/components/atoms/Select/styles.scss";
     @import "@faststore/ui/src/components/atoms/Skeleton/styles";
     @import "@faststore/ui/src/components/atoms/Slider/styles.scss";
@@ -48,6 +49,7 @@
     @import "@faststore/ui/src/components/molecules/ProductCard/styles.scss";
     @import "@faststore/ui/src/components/molecules/ProductCardSkeleton/styles";
     @import "@faststore/ui/src/components/molecules/ProductPrice/styles.scss";
+    @import "@faststore/ui/src/components/molecules/RadioField/styles.scss";
     @import "@faststore/ui/src/components/molecules/SelectField/styles.scss";
     @import "@faststore/ui/src/components/organisms/EmptyState/styles.scss";
     @import "@faststore/ui/src/components/organisms/Filter/styles.scss";

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

@@ -4,4 +4,5 @@ export const RegionBarDefaultComponents = {
   RegionBar: UIRegionBar,
   LocationIcon: UIIcon,
   ButtonIcon: UIIcon,
+  FilterButtonIcon: UIIcon,
 } as const

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

@@ -13,7 +13,7 @@ type RegionBarSectionProps = {
    */
   className?: string
   /**
-   * A React component that will be rendered as an icon.
+   * A React component that will be rendered as the location icon.
    */
   icon: RegionBarProps['icon']
   /**
@@ -22,6 +22,7 @@ type RegionBarSectionProps = {
   label: RegionBarProps['label']
   /**
    * Specifies a label for the edit text.
+   * @deprecated
    */
   editLabel?: RegionBarProps['editLabel']
   /**