Feature/dp

messages/context.json

@@ -65,6 +65,11 @@
   "store/search.filter.placeholder": "Search by {filterName}",
   "store/search.filter.title.brands": "Brands",
   "store/search.filter.title.price-ranges": "Price Ranges",
+  "store/search.filter.title.shipping": "Shipping",
+  "store/search.filter.shipping.name.delivery": "Deliver to",
+  "store/search.filter.shipping.name.pickup-in-point": "Pickup at",
+  "store/search.filter.shipping.name.pickup-nearby": "Pickup nearby",
+  "store/search.filter.shipping.name.pickup-all": "Pickup",
   "store/search.text": "Showing {from}-{to} from {recordsFiltered} records",
   "store/search.selected-filters": "Filtered by:",
   "store/search.total-products": "{recordsFiltered} <span class=\"c-muted-2\">{recordsFiltered, plural, one {Product} other {Products}}</span>",

messages/en.json

@@ -66,6 +66,11 @@
   "store/search.filter.placeholder": "Search by {filterName}",
   "store/search.filter.title.brands": "Brands",
   "store/search.filter.title.price-ranges": "Price Ranges",
+  "store/search.filter.title.shipping": "Shipping",
+  "store/search.filter.shipping.name.delivery": "Deliver to",
+  "store/search.filter.shipping.name.pickup-in-point": "Pickup at",
+  "store/search.filter.shipping.name.pickup-nearby": "Pickup nearby",
+  "store/search.filter.shipping.name.pickup-all": "Pickup",
   "store/search.text": "Showing {from}-{to} from {recordsFiltered} records",
   "store/search.selected-filters": "Filtered by:",
   "store/search.total-products": "{recordsFiltered} <span class=\"c-muted-2\">{recordsFiltered, plural, one {Product} other {Products}}</span>",

react/FilterNavigator.js

@@ -8,7 +8,7 @@
 import { useSearchPage } from 'vtex.search-page-context/SearchPageContext'
 // eslint-disable-next-line no-restricted-imports
 import { flatten } from 'ramda'
-import { FormattedMessage } from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
 import { Button } from 'vtex.styleguide'
 
 import FilterSidebar from './components/FilterSidebar'
@@ -23,7 +23,7 @@
 import useFacetNavigation from './hooks/useFacetNavigation'
 import FilterNavigatorTitleTag from './components/FilterNavigatorTitleTag'
 import styles from './searchResult.css'
-import { CATEGORIES_TITLE } from './utils/getFilters'
+import { CATEGORIES_TITLE, SHIPPING_OPTIONS } from './utils/getFilters'
 import { newFacetPathName } from './utils/slug'
 import { FACETS_RENDER_THRESHOLD } from './constants/filterConstants'
 
@@ -73,6 +73,7 @@
   priceRange,
   tree = [],
   specificationFilters = [],
+  deliveries = [],
   priceRanges = [],
   brands = [],
   loading = false,
@@ -101,6 +102,7 @@
   priceRangeLayout = 'slider',
   showQuantityBadgeOnMobile = false,
 }) => {
+  const intl = useIntl()
   const { isMobile } = useDevice()
   const handles = useCssHandles(CSS_HANDLES)
   const [truncatedFacetsFetched, setTruncatedFacetsFetched] = useState(false)
@@ -158,9 +160,17 @@
     }
   }, [filters, filtersFetchMore, truncatedFacetsFetched, loading])
 
+  const shipping = deliveries.map((delivery) => ({
+    ...delivery,
+    facets: delivery.facets.map((facet) => ({
+      ...facet,
+      name: intl.formatMessage({ id: SHIPPING_OPTIONS[facet.name] }) ,
+    }))
+  }))
+
   const selectedFilters = useMemo(() => {
     const options = [
-      ...specificationFilters.map(filter => {
+      ...specificationFilters.concat(shipping).map(filter => {
         return filter.facets.map(facet => {
           return {
             ...newNamedFacet({ ...facet, title: filter.name }),
@@ -173,7 +183,7 @@
     ]
 
     return flatten(options)
-  }, [brands, priceRanges, specificationFilters]).filter(
+  }, [brands, priceRanges, specificationFilters, shipping]).filter(
     facet => facet.selected
   )
 

react/FilterNavigatorFlexible.js

@@ -63,6 +63,7 @@ const withSearchPageContextProps =
       specificationFilters,
       categoriesTrees,
       queryArgs,
+      deliveries,
     } = facets
 
     const sortedFilters = useMemo(
@@ -113,6 +114,7 @@ const withSearchPageContextProps =
             priceRangeLayout={priceRangeLayout}
             drawerDirectionMobile={drawerDirectionMobile}
             showQuantityBadgeOnMobile={showQuantityBadgeOnMobile}
+            deliveries={deliveries}
           />
         </FilterNavigatorContext.Provider>
       </div>

react/SearchResultFlexible.js

@@ -50,6 +50,7 @@
   preventRouteChange = false,
   showFacetQuantity = false,
   showFacetTitle = false,
+  showShippingFacet = false,
   // Below are set by SearchContext
   searchQuery,
   maxItemsPerPage,
@@ -82,6 +83,7 @@
     priceRanges,
     specificationFilters,
     categoriesTrees,
+    deliveries,
   } = facets
 
   const filters = useMemo(
@@ -92,8 +94,17 @@
         brands,
         brandsQuantity,
         hiddenFacets,
+        deliveries,
+        showShippingFacet
       }),
-    [brands, hiddenFacets, priceRanges, specificationFilters, brandsQuantity]
+    [
+      brands,
+      hiddenFacets,
+      priceRanges,
+      specificationFilters,
+      brandsQuantity,
+      deliveries,
+    ]
   )
 
   const handles = useCssHandles(CSS_HANDLES)

react/components/AccordionFilterContainer.js

@@ -214,7 +214,7 @@ const AccordionFilterContainer = ({
           style={{ background: 'rgba(3, 4, 78, 0.4)' }}
           className={classNames(
             handles.filterLoadingOverlay,
-            'fixed dim top-0 w-100 vh-100 left-0 z-9999 justify-center items-center justify-center items-center flex'
+            'fixed dim top-0 w-100 vh-100 left-0 z-999 justify-center items-center justify-center items-center flex'
           )}
         >
           <Spinner />

react/components/FacetCheckboxList.js

@@ -1,17 +1,12 @@
-import classNames from 'classnames'
 import React, { useContext, useState, useMemo } from 'react'
-import { Checkbox } from 'vtex.styleguide'
-import { applyModifiers } from 'vtex.css-handles'
 import { useRuntime } from 'vtex.render-runtime'
-import { usePixel } from 'vtex.pixel-manager'
 import { useSearchPage } from 'vtex.search-page-context/SearchPageContext'
 
-import { pushFilterManipulationPixelEvent } from '../utils/filterManipulationPixelEvents'
-import styles from '../searchResult.css'
 import SettingsContext from './SettingsContext'
 import { SearchFilterBar } from './SearchFilterBar'
 import { FACETS_RENDER_THRESHOLD } from '../constants/filterConstants'
 import ShowMoreFilterButton from './ShowMoreFilterButton'
+import FacetCheckboxListItem from './FacetCheckboxListItem'
 
 const useSettings = () => useContext(SettingsContext)
 
@@ -25,7 +20,6 @@ const FacetCheckboxList = ({
   truncatedFacetsFetched,
   setTruncatedFacetsFetched,
 }) => {
-  const { push } = usePixel()
   const { searchQuery } = useSearchPage()
   const { showFacetQuantity } = useContext(SettingsContext)
   const { getSettings } = useRuntime()
@@ -76,40 +70,16 @@ const FacetCheckboxList = ({
         <SearchFilterBar name={facetTitle} handleChange={setSearchTerm} />
       ) : null}
       {filteredFacets.slice(0, endSlice).map(facet => {
-        const { name, value: slugifiedName } = facet
-
         return (
-          <div
-            className={classNames(
-              applyModifiers(styles.filterAccordionItemBox, slugifiedName),
-              'pr4 pt3 items-center flex bb b--muted-5'
-            )}
-            key={name}
-            style={{ hyphens: 'auto', wordBreak: 'break-word' }}
-          >
-            <Checkbox
-              className="mb0"
-              checked={facet.selected}
-              id={name}
-              label={
-                showFacetQuantity && !sampling
-                  ? `${facet.name} (${facet.quantity})`
-                  : facet.name
-              }
-              name={name}
-              onChange={() => {
-                pushFilterManipulationPixelEvent({
-                  name: facetTitle,
-                  value: name,
-                  products: searchQuery?.products ?? [],
-                  push,
-                })
-
-                onFilterCheck({ ...facet, title: facetTitle })
-              }}
-              value={name}
-            />
-          </div>
+          <FacetCheckboxListItem
+            facet={facet}
+            facetTitle={facetTitle}
+            onFilterCheck={onFilterCheck}
+            sampling={sampling}
+            searchQuery={searchQuery}
+            showFacetQuantity={showFacetQuantity}
+            key={facet.name}
+          />
         )
       })}
       {shouldTruncate && (

react/components/FacetCheckboxListItem.js

@@ -0,0 +1,87 @@
+import classNames from 'classnames'
+import React, { useMemo } from 'react'
+import { applyModifiers } from 'vtex.css-handles'
+import { Checkbox } from 'vtex.styleguide'
+import { usePixel } from 'vtex.pixel-manager'
+
+import styles from '../searchResult.css'
+import { pushFilterManipulationPixelEvent } from '../utils/filterManipulationPixelEvents'
+import useShippingActions from '../hooks/useShippingActions'
+import ShippingActionButton from './ShippingActionButton'
+
+const FacetCheckboxListItem = ({
+  facet,
+  showFacetQuantity,
+  sampling,
+  facetTitle,
+  searchQuery,
+  onFilterCheck,
+}) => {
+  const { push } = usePixel()
+
+  const { actionLabel, actionType, openDrawer, shouldDisable } =
+    useShippingActions(facet)
+
+  const showActionButton = !!actionType
+
+  const { name, value: slugifiedName } = facet
+
+  const facetLabel = useMemo(() => {
+    let labelElement = facet.name
+
+    if (showFacetQuantity && !sampling) {
+      labelElement = `${labelElement} (${facet.quantity})`
+    }
+
+    if (showActionButton) {
+      labelElement = (
+        <div className="flex flex-column">
+          <span>{labelElement}</span>
+          <ShippingActionButton label={actionLabel} openDrawer={openDrawer} />
+        </div>
+      )
+    }
+
+    return labelElement
+  }, [
+    showFacetQuantity,
+    sampling,
+    facet.name,
+    facet.quantity,
+    showActionButton,
+    actionLabel,
+    openDrawer,
+  ])
+
+  return (
+    <div
+      className={classNames(
+        applyModifiers(styles.filterAccordionItemBox, slugifiedName),
+        'pr4 pt3 items-center flex bb b--muted-5'
+      )}
+      style={{ hyphens: 'auto', wordBreak: 'break-word' }}
+    >
+      <Checkbox
+        disabled={shouldDisable}
+        className="mb0"
+        checked={facet.selected}
+        id={name}
+        label={facetLabel}
+        name={name}
+        onChange={() => {
+          pushFilterManipulationPixelEvent({
+            name: facetTitle,
+            value: name,
+            products: searchQuery?.products ?? [],
+            push,
+          })
+
+          onFilterCheck({ ...facet, title: facetTitle })
+        }}
+        value={name}
+      />
+    </div>
+  )
+}
+
+export default FacetCheckboxListItem