Feature/shipping facets as radio

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- Radio button to delivery filter.
+
 ## [3.136.1] - 2025-02-26
 
 ### Removed

manifest.json

@@ -5,9 +5,7 @@
   "title": "VTEX Search Result",
   "description": "A search result wrapper component",
   "mustUpdateAt": "2019-04-25",
-  "registries": [
-    "smartcheckout"
-  ],
+  "registries": ["smartcheckout"],
   "scripts": {
     "postreleasy": "vtex publish --verbose"
   },

react/components/AccordionFilterGroup.js

@@ -2,12 +2,16 @@ import React from 'react'
 import { useIntl } from 'react-intl'
 import classNames from 'classnames'
 import { useCssHandles, applyModifiers } from 'vtex.css-handles'
+import { useSearchPage } from 'vtex.search-page-context/SearchPageContext'
+import { usePixel } from 'vtex.pixel-manager'
 
 import AccordionFilterItem from './AccordionFilterItem'
 import FacetCheckboxList from './FacetCheckboxList'
 import useSelectedFilters from '../hooks/useSelectedFilters'
 import { getFilterTitle } from '../constants/SearchHelpers'
 import { searchSlugify } from '../utils/slug'
+import RadioFilters from './RadioFilters'
+import { pushFilterManipulationPixelEvent } from '../utils/filterManipulationPixelEvents'
 
 const CSS_HANDLES = ['accordionFilterOpen']
 
@@ -29,13 +33,17 @@ const AccordionFilterGroup = ({
   onClearFilter,
   showClearByFilter,
 }) => {
+  const { searchQuery } = useSearchPage()
   const handles = useCssHandles(CSS_HANDLES)
   const filters = useSelectedFilters(facets)
   const selectedFilters = filters.filter(facet => facet.selected)
   const intl = useIntl()
   const facetTitle = getFilterTitle(title, intl)
   const slugifiedFacetTitle = searchSlugify(facetTitle)
   const facetKey = filters.length > 0 ? filters[0].key : null
+  const { push } = usePixel()
+
+  const isRadio = filters.some(filter => filter.key === 'shipping')
 
   return (
     <AccordionFilterItem
@@ -58,16 +66,31 @@ const AccordionFilterGroup = ({
           className
         )}
       >
-        <FacetCheckboxList
-          onFilterCheck={onFilterCheck}
-          facets={filters}
-          quantity={quantity}
-          facetTitle={facetTitle}
-          truncateFilters={truncateFilters}
-          navigationType={navigationType}
-          truncatedFacetsFetched={truncatedFacetsFetched}
-          setTruncatedFacetsFetched={setTruncatedFacetsFetched}
-        />
+        {isRadio ? (
+          <RadioFilters
+            facets={filters}
+            onChange={facet => {
+              pushFilterManipulationPixelEvent({
+                name: facetTitle,
+                value: facet.name,
+                products: searchQuery?.products ?? [],
+                push,
+              })
+              onFilterCheck({ ...facet, title: facetTitle }, true)
+            }}
+          />
+        ) : (
+          <FacetCheckboxList
+            onFilterCheck={onFilterCheck}
+            facets={filters}
+            quantity={quantity}
+            facetTitle={facetTitle}
+            truncateFilters={truncateFilters}
+            navigationType={navigationType}
+            truncatedFacetsFetched={truncatedFacetsFetched}
+            setTruncatedFacetsFetched={setTruncatedFacetsFetched}
+          />
+        )}
       </div>
     </AccordionFilterItem>
   )

react/components/FilterOptionTemplate.js

@@ -22,6 +22,7 @@ import useOutsideClick from '../hooks/useOutsideClick'
 import ShowMoreFilterButton from './ShowMoreFilterButton'
 import { useRenderOnView } from '../hooks/useRenderOnView'
 import { FACETS_RENDER_THRESHOLD } from '../constants/filterConstants'
+import RadioFilters from './RadioFilters'
 
 /** Returns true if elementRef has ever been scrolled */
 const useHasScrolled = elementRef => {
@@ -162,9 +163,20 @@ const FilterOptionTemplate = ({
         ? FACETS_RENDER_THRESHOLD
         : filteredFacets.length
 
+    const isRadio = filters.some(filter => filter.key === 'shipping')
+
     return (
       <>
-        {filteredFacets.slice(0, endSlice).map(children)}
+        {isRadio ? (
+          <RadioFilters
+            facets={filteredFacets}
+            onChange={facet =>
+              navigateToFacet({ ...facet, title }, preventRouteChange)
+            }
+          />
+        ) : (
+          filteredFacets.slice(0, endSlice).map(children)
+        )}
         {placeholderSize > 0 && <div style={{ height: placeholderSize }} />}
         {shouldTruncate && (
           <ShowMoreFilterButton

react/components/FilterSidebar.js

@@ -95,13 +95,23 @@ const FilterSidebar = ({
     )
   }
 
-  const handleFilterCheck = filter => {
+  const handleFilterCheck = (filter, isRadio = false) => {
     if (updateOnFilterSelectionOnMobile && preventRouteChange) {
       navigateToFacet(filter, preventRouteChange)
 
       return
     }
 
+    if (isRadio) {
+      setFilterOperations(
+        filterOperations
+          .filter(facet => facet.key !== filter.key)
+          .concat(filter)
+      )
+
+      return
+    }
+
     if (!isFilterSelected(filterOperations, filter)) {
       setFilterOperations(filterOperations.concat(filter))
     } else {

react/components/RadioFilters.js

@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from 'react'
+import { useIntl } from 'react-intl'
+import { RadioGroup } from 'vtex.styleguide'
+
+import ShippingActionButton from './ShippingActionButton'
+import useShippingActions from '../hooks/useShippingActions'
+
+const RadioItem = ({ facet }) => {
+  const intl = useIntl()
+
+  const { actionLabel, actionType, openDrawer } = useShippingActions(facet)
+
+  return (
+    <div>
+      <div>{facet.name}</div>
+      {actionType ? (
+        <ShippingActionButton
+          label={intl.formatMessage({ id: actionLabel ?? 'none' })}
+          openDrawer={openDrawer}
+        />
+      ) : undefined}
+    </div>
+  )
+}
+
+const RadioFilters = ({ facets, onChange }) => {
+  const selectedOption = facets.find(facet => facet.selected)
+  const lastValue = selectedOption ? selectedOption.value : undefined
+
+  const [selectedValue, setSelectedValue] = useState(lastValue)
+
+  useEffect(() => {
+    setSelectedValue(lastValue)
+  }, [lastValue])
+
+  const onRadioSelect = e => {
+    const { value } = e.currentTarget
+
+    setSelectedValue(value)
+
+    const clickedFacet = facets.find(facet => facet.value === value)
+
+    if (clickedFacet.selected) {
+      return
+    }
+
+    onChange(clickedFacet)
+  }
+
+  return (
+    <RadioGroup
+      hideBorder
+      size="small"
+      name="shipping"
+      options={facets.map(facet => ({
+        id: facet.value,
+        value: facet.value,
+        label: <RadioItem facet={facet} />,
+        disabled: facet.quantity === 0,
+      }))}
+      value={selectedValue}
+      onChange={onRadioSelect}
+    />
+  )
+}
+
+export default RadioFilters

react/components/SelectedFilters.js

@@ -23,7 +23,9 @@ const SelectedFilters = ({
   const handles = useCssHandles(CSS_HANDLES)
   const { showFacetTitle } = useContext(SettingsContext)
 
-  const visibleFilters = filters.filter(filter => !filter.hidden)
+  const visibleFilters = filters
+    .filter(filter => !filter.hidden)
+    .filter(filter => filter.key !== 'shipping')
 
   if (!visibleFilters.length) {
     return null

react/hooks/useFacetNavigation.js

@@ -173,6 +173,11 @@ export const buildNewQueryMap = (
   facets,
   selectedFacets
 ) => {
+  // RadioGroup behavior
+  if (facets.some(facet => facet.key === 'shipping')) {
+    selectedFacets = selectedFacets.filter(facet => facet.key !== 'shipping')
+  }
+
   const querySegments = selectedFacets.map(facet => facet.value)
   const mapSegments = selectedFacets.map(facet => facet.map)
 

react/searchResult.css

@@ -273,3 +273,7 @@
 .scrim, .sidebar {
   z-index: 999;
 }
+
+.filterContent {
+  padding-right: 2px;
+}