- ) : (
- facet.name
)
+ }
+
+ if (showActionButton) {
+ labelElement = (
+
+ )
+ }
if (showTitle) {
- return (
+ labelElement = (
<>
{facetTitle}:{' '}
{labelElement}
@@ -90,19 +110,25 @@ const FacetItem = ({
return labelElement
}, [
- facet,
+ showFacetQuantity,
+ sampling,
+ facet.name,
+ facet.value,
+ facet.quantity,
handles.productCount,
handles.filterItemTitle,
- facetTitle,
+ showActionButton,
+ actionLabel,
+ openDrawer,
showTitle,
- showFacetQuantity,
- sampling,
+ facetTitle,
+ intl,
])
return (
diff --git a/react/components/FilterNavigator/legacy/FilterSidebar.js b/react/components/FilterNavigator/legacy/FilterSidebar.js
index 1393332e6..a38d51d90 100644
--- a/react/components/FilterNavigator/legacy/FilterSidebar.js
+++ b/react/components/FilterNavigator/legacy/FilterSidebar.js
@@ -13,6 +13,7 @@ import { facetOptionShape } from '../../../constants/propTypes'
import useSelectedFilters from './hooks/useSelectedFilters'
import searchResult from './searchResult.css'
import QueryContext from '../../QueryContext'
+import isShippingOptionsComponent from '../../../utils/isShippingOptionsComponent'
const FilterSidebar = ({ filters, preventRouteChange = false }) => {
const { navigate, setQuery } = useRuntime()
@@ -49,7 +50,11 @@ const FilterSidebar = ({ filters, preventRouteChange = false }) => {
}
}
- const handleClose = () => {
+ const handleClose = e => {
+ if (isShippingOptionsComponent(e)) {
+ return
+ }
+
setOpen(false)
}
diff --git a/react/components/FilterSidebar.js b/react/components/FilterSidebar.js
index 8a4ffeb20..52fc13931 100644
--- a/react/components/FilterSidebar.js
+++ b/react/components/FilterSidebar.js
@@ -23,6 +23,7 @@ import {
filterCategoryDepartmentCollectionAndFT,
} from '../utils/queryAndMapUtils'
import { pushFilterManipulationPixelEvent } from '../utils/filterManipulationPixelEvents'
+import isShippingOptionsComponent from '../utils/isShippingOptionsComponent'
const CSS_HANDLES = [
'filterPopupButton',
@@ -110,7 +111,11 @@ const FilterSidebar = ({
}
}
- const handleClose = () => {
+ const handleClose = e => {
+ if (isShippingOptionsComponent(e)) {
+ return
+ }
+
setOpen(false)
}
diff --git a/react/components/SearchFilter.js b/react/components/SearchFilter.js
index f39138dcd..a8700203f 100644
--- a/react/components/SearchFilter.js
+++ b/react/components/SearchFilter.js
@@ -93,6 +93,7 @@ SearchFilter.propTypes = {
/** Whether an overview of the applied filters should be displayed (`"show"`) or not (`"hide"`). */
appliedFiltersOverview: PropTypes.string,
showClearByFilter: PropTypes.bool,
+ type: PropTypes.string,
}
export default SearchFilter
diff --git a/react/components/SearchQuery.js b/react/components/SearchQuery.js
index 5a8a0d291..bf383ff88 100644
--- a/react/components/SearchQuery.js
+++ b/react/components/SearchQuery.js
@@ -248,6 +248,7 @@ const useQueries = (variables, facetsArgs, price) => {
specificationFilters: [],
categoriesTrees: [],
priceRanges: [],
+ deliveries: [],
}
const selectedFacetsOutput =
diff --git a/react/components/ShippingActionButton.tsx b/react/components/ShippingActionButton.tsx
new file mode 100644
index 000000000..b300dd99d
--- /dev/null
+++ b/react/components/ShippingActionButton.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { useCssHandles } from 'vtex.css-handles'
+
+const CSS_HANDLES = ['shippingActionButton']
+
+interface Props {
+ label: string
+ openDrawer: () => void
+}
+
+const ShippingActionButton = ({ label, openDrawer }: Props) => {
+ const handles = useCssHandles(CSS_HANDLES)
+
+ return (
+
+ )
+}
+
+export default ShippingActionButton
diff --git a/react/components/SideBar.js b/react/components/SideBar.js
index 005ca787d..76eddca84 100644
--- a/react/components/SideBar.js
+++ b/react/components/SideBar.js
@@ -42,14 +42,14 @@ class Sidebar extends Component {
}
const scrimClasses = classNames(
- 'fixed dim bg-base--inverted top-0 z-9999 w-100 vh-100 o-40 left-0',
+ `${searchResult.scrim} fixed dim bg-base--inverted top-0 w-100 vh-100 o-40 left-0`,
{
dn: !isOpen,
}
)
const sidebarClasses = classNames(
- `${searchResult.sidebar} w-auto-ns h-100 fixed top-0 z-9999 bg-base shadow-2 flex flex-column`,
+ `${searchResult.sidebar} w-auto-ns h-100 fixed top-0 bg-base shadow-2 flex flex-column`,
this.props.fullWidth ? 'w-100' : 'w-80',
filtersDrawerDirectionMobile === 'drawerLeft' ? 'right-0' : 'left-0'
)
diff --git a/react/hooks/useShippingActions.js b/react/hooks/useShippingActions.js
new file mode 100644
index 000000000..f868d47e6
--- /dev/null
+++ b/react/hooks/useShippingActions.js
@@ -0,0 +1,132 @@
+import { useCallback, useEffect, useState } from 'react'
+import { usePixel, usePixelEventCallback } from 'vtex.pixel-manager'
+import { useSSR } from 'vtex.render-runtime/react/components/NoSSR'
+
+import useShouldDisableFacet from './useShouldDisableFacet'
+
+const shippingActionTypes = {
+ delivery: 'DELIVERY',
+ 'pickup-nearby': 'DELIVERY',
+ pickup: 'DELIVERY',
+ 'pickup-in-point': 'PICKUP_POINT',
+}
+
+const eventIdentifiers = {
+ DELIVERY: 'addressLabel',
+ PICKUP_POINT: 'pickupPointLabel',
+}
+
+const placeHolders = {
+ DELIVERY: 'store/search.filter.shipping.action-button.delivery',
+ PICKUP_POINT: 'store/search.filter.shipping.action-button.pickup-in-point',
+}
+
+const drawerEvent = {
+ DELIVERY: 'shipping-option-deliver-to',
+ PICKUP_POINT: 'shipping-option-store',
+}
+
+const addressDependentValues = [
+ 'delivery',
+ 'pickup-in-point',
+ 'pickup-nearby',
+ 'pickup',
+]
+
+const useShippingActions = facet => {
+ const actionType = shippingActionTypes[facet.value]
+ const eventIdentifier = actionType ? eventIdentifiers[actionType] : null
+
+ const [actionLabel, setActionLabel] = useState(placeHolders[actionType])
+ const [isAddressSet, setIsAddressSet] = useState(false)
+ const [isPickupSet, setIsPickupSet] = useState(false)
+
+ const isAddressDependent =
+ addressDependentValues.findIndex(value => facet.value === value) > -1
+
+ const isSSR = useSSR()
+ const { push } = usePixel()
+
+ usePixelEventCallback({
+ eventId: `shipping-option-${eventIdentifier}`,
+ handler: e => {
+ if (e?.data?.label) {
+ setActionLabel(e.data.label)
+
+ if (isAddressDependent) {
+ setIsAddressSet(true)
+ }
+
+ if (eventIdentifier === 'pickupPointLabel') {
+ setIsPickupSet(true)
+ }
+ } else {
+ setActionLabel(placeHolders[actionType])
+
+ if (isAddressDependent) {
+ setIsAddressSet(false)
+ }
+
+ if (eventIdentifier === 'pickupPointLabel') {
+ setIsPickupSet(false)
+ }
+ }
+ },
+ })
+
+ useEffect(() => {
+ if (!isSSR) {
+ return
+ }
+
+ const windowLabel = window[eventIdentifier]
+
+ if (windowLabel) {
+ setActionLabel(windowLabel)
+
+ if (isAddressDependent) {
+ setIsAddressSet(true)
+ }
+
+ if (eventIdentifier === 'pickupPointLabel') {
+ setIsPickupSet(true)
+ }
+ } else {
+ setActionLabel(placeHolders[actionType])
+
+ if (isAddressDependent) {
+ setIsAddressSet(false)
+ }
+
+ if (eventIdentifier === 'pickupPointLabel') {
+ setIsPickupSet(false)
+ }
+ }
+ }, [actionType, eventIdentifier, isSSR, isAddressDependent])
+
+ const openDrawer = useCallback(() => {
+ push({
+ id: drawerEvent[actionType],
+ })
+ }, [actionType, push])
+
+ const shouldDisable = useShouldDisableFacet(facet, isAddressSet, isPickupSet)
+
+ if (facet.value === 'pickup-nearby' || facet.value === 'pickup') {
+ return {
+ actionLabel: null,
+ actionType: null,
+ openDrawer: null,
+ shouldDisable,
+ }
+ }
+
+ return {
+ actionType,
+ actionLabel,
+ openDrawer,
+ shouldDisable,
+ }
+}
+
+export default useShippingActions
diff --git a/react/hooks/useShouldDisableFacet.js b/react/hooks/useShouldDisableFacet.js
index 759d53e42..489515b4c 100644
--- a/react/hooks/useShouldDisableFacet.js
+++ b/react/hooks/useShouldDisableFacet.js
@@ -2,9 +2,30 @@ import { useSearchPage } from 'vtex.search-page-context/SearchPageContext'
import { MAP_VALUES_SEP } from '../constants'
-export default function useShouldDisableFacet(facet) {
+export default function useShouldDisableFacet(
+ facet,
+ isAddressSet,
+ isPickupSet
+) {
const { map } = useSearchPage()
+ if (
+ (facet.value === 'delivery' ||
+ facet.value === 'pickup-nearby' ||
+ facet.value === 'pickup') &&
+ !isAddressSet
+ ) {
+ return true
+ }
+
+ if (facet.value === 'pickup-in-point' && !isPickupSet) {
+ return true
+ }
+
+ if (facet.quantity === 0) {
+ return true
+ }
+
if (!facet.selected || !map) {
return false
}
diff --git a/react/searchResult.css b/react/searchResult.css
index 63948a915..c2026798c 100644
--- a/react/searchResult.css
+++ b/react/searchResult.css
@@ -258,3 +258,18 @@
.notFound--layout {
}
+
+.shippingActionButton {
+ border: 0;
+ padding: 0;
+ font-size: 14px;
+ background: unset;
+ cursor: pointer;
+ text-align: left;
+ font-weight: 500;
+ color: #134CD8;
+}
+
+.scrim, .sidebar {
+ z-index: 999;
+}
diff --git a/react/typings/vtex.styleguide.d.ts b/react/typings/vtex.styleguide.d.ts
index e2c82da55..e2c402bc6 100644
--- a/react/typings/vtex.styleguide.d.ts
+++ b/react/typings/vtex.styleguide.d.ts
@@ -2,4 +2,5 @@ declare module 'vtex.styleguide' {
import type { ComponentType } from 'react'
export const Spinner: ComponentType>
+ export const RadioGroup: ComponentType>
}
diff --git a/react/utils/compatibilityLayer.js b/react/utils/compatibilityLayer.js
index 583bff626..85cd92a78 100644
--- a/react/utils/compatibilityLayer.js
+++ b/react/utils/compatibilityLayer.js
@@ -2,6 +2,23 @@
import { groupBy, pathOr, zipObj } from 'ramda'
import { PATH_SEPARATOR, MAP_VALUES_SEP } from '../constants'
+import { shippingOptions, SHIPPING_KEY } from './getFilters'
+
+const shippingFacetDefault = {
+ name: SHIPPING_KEY,
+ type: 'DELIVERY',
+ hidden: false,
+ quantity: 0,
+ facets: Object.keys(shippingOptions).map(option => ({
+ id: null,
+ quantity: 0,
+ name: option,
+ key: SHIPPING_KEY,
+ selected: false,
+ map: SHIPPING_KEY,
+ value: option,
+ })),
+}
export const getMainSearches = (query, map) => {
const querySegments = (query && query.split(PATH_SEPARATOR)) || []
@@ -79,6 +96,8 @@ export const detachFiltersByType = facets => {
groupedFilters.TEXT || []
)
+ const deliveries = getFormattedDeliveries(groupedFilters.DELIVERY || [])
+
const categoriesTrees = pathOr(
[],
['CATEGORYTREE', 0, 'facets'],
@@ -102,6 +121,7 @@ export const detachFiltersByType = facets => {
specificationFilters,
categoriesTrees,
priceRanges,
+ deliveries,
}
}
@@ -116,3 +136,21 @@ export const buildQueryArgsFromSelectedFacets = selectedFacets => {
{ query: '', map: '' }
)
}
+
+const getFormattedDeliveries = deliveries => {
+ const shippingFacet = deliveries.find(d => d.name === SHIPPING_KEY)
+
+ if (!shippingFacet) {
+ return [...deliveries, shippingFacetDefault]
+ }
+
+ const facetsNotIncluded = shippingFacetDefault.facets.filter(facet =>
+ shippingFacet.facets.every(f => f.value !== facet.value)
+ )
+
+ shippingFacet.facets = [...shippingFacet.facets, ...facetsNotIncluded]
+
+ return deliveries.map(facet =>
+ facet.name === SHIPPING_KEY ? shippingFacet : facet
+ )
+}
diff --git a/react/utils/getFilters.js b/react/utils/getFilters.js
index 1a25feb3a..8f4208668 100644
--- a/react/utils/getFilters.js
+++ b/react/utils/getFilters.js
@@ -1,9 +1,20 @@
import { path, contains, isEmpty } from 'ramda'
+import { useIntl } from 'react-intl'
+export const SHIPPING_TITLE = 'store/search.filter.title.shipping'
export const CATEGORIES_TITLE = 'store/search.filter.title.categories'
export const BRANDS_TITLE = 'store/search.filter.title.brands'
export const PRICE_RANGES_TITLE = 'store/search.filter.title.price-ranges'
+export const shippingOptions = {
+ delivery: 'store/search.filter.shipping.name.delivery',
+ 'pickup-in-point': 'store/search.filter.shipping.name.pickup-in-point',
+ 'pickup-nearby': 'store/search.filter.shipping.name.pickup-nearby',
+ 'pickup-all': 'store/search.filter.shipping.name.pickup-all',
+}
+
+export const SHIPPING_KEY = 'shipping'
+
const BRANDS_TYPE = 'Brands'
const PRICE_RANGES_TYPE = 'PriceRanges'
const SPECIFICATION_FILTERS_TYPE = 'SpecificationFilters'
@@ -12,9 +23,39 @@ const getFilters = ({
specificationFilters = [],
priceRanges = [],
brands = [],
+ deliveries = [],
brandsQuantity = 0,
hiddenFacets = {},
+ showShippingFacet = false,
}) => {
+ // eslint-disable-next-line react-hooks/rules-of-hooks
+ const intl = useIntl()
+
+ let deliveriesFormatted = deliveries
+
+ const shipping = deliveries.find(d => d.name === SHIPPING_KEY)
+
+ if (shipping) {
+ const shippingFacet = {
+ ...shipping,
+ title: SHIPPING_TITLE,
+ facets: shipping.facets.map(facet => ({
+ ...facet,
+ name: intl.formatMessage({ id: shippingOptions[facet.name] }),
+ })),
+ }
+
+ deliveriesFormatted = deliveries.map(facet =>
+ facet.name === SHIPPING_KEY ? shippingFacet : facet
+ )
+ }
+
+ if (!showShippingFacet) {
+ deliveriesFormatted = deliveriesFormatted.filter(
+ d => d.name !== SHIPPING_KEY
+ )
+ }
+
const hiddenFacetsNames = (
path(['specificationFilters', 'hiddenFilters'], hiddenFacets) || []
).map(filter => filter.name)
@@ -35,6 +76,7 @@ const getFilters = ({
: []
return [
+ ...deliveriesFormatted,
...mappedSpecificationFilters,
!hiddenFacets.brands &&
!isEmpty(brands) && {
diff --git a/react/utils/isShippingOptionsComponent.js b/react/utils/isShippingOptionsComponent.js
new file mode 100644
index 000000000..4f004fdf4
--- /dev/null
+++ b/react/utils/isShippingOptionsComponent.js
@@ -0,0 +1,23 @@
+const SHIPPING_OPTION_COMPONENT_DRAWER_CLASS =
+ 'vtex-shipping-option-components-0-x-drawer'
+
+const SHIPPING_OPTION_COMPONENT_OVERLAY_CLASS =
+ 'vtex-shipping-option-components-0-x-overlay'
+
+const isShippingOptionsComponent = e => {
+ if (!e.target) {
+ return false
+ }
+
+ const shippingOptionsDawerElement = e.target.closest(
+ `.${SHIPPING_OPTION_COMPONENT_DRAWER_CLASS}`
+ )
+
+ const isShippingOptionsOverlayElement = e.target.classList.contains(
+ SHIPPING_OPTION_COMPONENT_OVERLAY_CLASS
+ )
+
+ return shippingOptionsDawerElement || isShippingOptionsOverlayElement
+}
+
+export default isShippingOptionsComponent