- ) : (
- facet.name
+ )
+ }
+
+ if (showActionButton) {
+ labelElement = (
+
)
+ }
if (showTitle) {
- return (
+ labelElement = (
<>
- {facetTitle}:{' '}
- {labelElement}
+ {facetTitle}: {labelElement}
)
}
return labelElement
}, [
- facet,
+ showFacetQuantity,
+ sampling,
+ facet.name,
+ facet.value,
+ facet.quantity,
handles.productCount,
handles.filterItemTitle,
- facetTitle,
+ showActionButton,
+ actionLabel,
+ openDrawer,
showTitle,
- showFacetQuantity,
- sampling,
+ facetTitle,
])
return (
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 c710be21f..c7838f7ff 100644
--- a/react/components/SearchQuery.js
+++ b/react/components/SearchQuery.js
@@ -247,6 +247,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..d163b352b
--- /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: 'Enter location',
+ PICKUP_POINT: 'Enter store',
+}
+
+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..e31ef9738 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 c1f2d9f1c..00daff44e 100644
--- a/react/utils/compatibilityLayer.js
+++ b/react/utils/compatibilityLayer.js
@@ -54,7 +54,7 @@ export const buildSelectedFacetsAndFullText = (query, map, priceRange) => {
}
const addMap = facet => {
- facet['map'] = facet.key
+ facet.map = facet.key
if (facet.children) {
facet.children.forEach(facetChild => addMap(facetChild))
@@ -79,6 +79,8 @@ export const detachFiltersByType = facets => {
groupedFilters.TEXT || []
)
+ const deliveries = groupedFilters.DELIVERY || []
+
const categoriesTrees = pathOr(
[],
['CATEGORYTREE', 0, 'facets'],
@@ -102,6 +104,7 @@ export const detachFiltersByType = facets => {
specificationFilters,
categoriesTrees,
priceRanges,
+ deliveries,
}
}
diff --git a/react/utils/getFilters.js b/react/utils/getFilters.js
index 1a25feb3a..d52a3aa88 100644
--- a/react/utils/getFilters.js
+++ b/react/utils/getFilters.js
@@ -1,20 +1,50 @@
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 SHIPPING_OPTIONS = {
+ 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',
+}
+
const BRANDS_TYPE = 'Brands'
const PRICE_RANGES_TYPE = 'PriceRanges'
const SPECIFICATION_FILTERS_TYPE = 'SpecificationFilters'
+const SHIPPING_KEY = 'shipping'
+
+const shippingFacetDefault = {
+ name: SHIPPING_KEY,
+ type: 'DELIVERY',
+ hidden: false,
+ quantity: 0,
+ facets: Object.keys(SHIPPING_OPTIONS).map(option => ({
+ id: null,
+ quantity: 0,
+ name: option,
+ key: SHIPPING_KEY,
+ selected: false,
+ map: SHIPPING_KEY,
+ value: option,
+ })),
+}
const getFilters = ({
specificationFilters = [],
priceRanges = [],
brands = [],
+ deliveries = [],
brandsQuantity = 0,
hiddenFacets = {},
+ showShippingFacet = false,
}) => {
+ const intl = useIntl()
+
const hiddenFacetsNames = (
path(['specificationFilters', 'hiddenFilters'], hiddenFacets) || []
).map(filter => filter.name)
@@ -34,7 +64,28 @@ const getFilters = ({
}))
: []
+ const deliveriesFormatted = getFormattedDeliveries(
+ deliveries,
+ showShippingFacet
+ )
+
+ const shippingIndex = deliveriesFormatted.findIndex(
+ d => d.name === SHIPPING_KEY
+ )
+
+ if (shippingIndex !== -1) {
+ deliveriesFormatted[shippingIndex] = {
+ ...deliveriesFormatted[shippingIndex],
+ title: SHIPPING_TITLE,
+ facets: deliveriesFormatted[shippingIndex].facets.map(facet => ({
+ ...facet,
+ name: intl.formatMessage({ id: SHIPPING_OPTIONS[facet.name] }),
+ })),
+ }
+ }
+
return [
+ ...deliveriesFormatted,
...mappedSpecificationFilters,
!hiddenFacets.brands &&
!isEmpty(brands) && {
@@ -52,4 +103,26 @@ const getFilters = ({
].filter(Boolean)
}
+const getFormattedDeliveries = (deliveries, showShippingFacet) => {
+ if (!showShippingFacet) {
+ return deliveries.filter(d => d.name !== SHIPPING_KEY)
+ }
+
+ 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
+ )
+}
+
export default getFilters