From 933c7b0f11650ac8c42479d780a7c795d95aaa1f Mon Sep 17 00:00:00 2001 From: Hiago Lucas Cardeal de Melo Silva Date: Mon, 9 Sep 2024 14:45:07 -0300 Subject: [PATCH 01/12] . --- react/FilterNavigator.js | 5 +- react/FilterNavigatorFlexible.js | 2 + react/SearchResultFlexible.js | 11 +- react/components/AvailableFilters.js | 25 +++++ react/components/FacetItem.js | 129 ++++++++++++++++++++-- react/components/SearchFilter.js | 3 + react/components/SearchQuery.js | 1 + react/components/ShippingActionButton.tsx | 24 ++++ react/hooks/useShouldDisableFacet.js | 17 ++- react/searchResult.css | 11 ++ react/typings/vtex.styleguide.d.ts | 1 + react/utils/compatibilityLayer.js | 5 +- react/utils/getFilters.js | 2 + 13 files changed, 223 insertions(+), 13 deletions(-) create mode 100644 react/components/ShippingActionButton.tsx diff --git a/react/FilterNavigator.js b/react/FilterNavigator.js index 6186c1783..5094483bf 100644 --- a/react/FilterNavigator.js +++ b/react/FilterNavigator.js @@ -73,6 +73,7 @@ const FilterNavigator = ({ priceRange, tree = [], specificationFilters = [], + deliveries = [], priceRanges = [], brands = [], loading = false, @@ -160,7 +161,7 @@ const FilterNavigator = ({ const selectedFilters = useMemo(() => { const options = [ - ...specificationFilters.map(filter => { + ...specificationFilters.concat(deliveries).map(filter => { return filter.facets.map(facet => { return { ...newNamedFacet({ ...facet, title: filter.name }), @@ -173,7 +174,7 @@ const FilterNavigator = ({ ] return flatten(options) - }, [brands, priceRanges, specificationFilters]).filter( + }, [brands, priceRanges, specificationFilters, deliveries]).filter( facet => facet.selected ) diff --git a/react/FilterNavigatorFlexible.js b/react/FilterNavigatorFlexible.js index becb16071..475f68efd 100644 --- a/react/FilterNavigatorFlexible.js +++ b/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} /> diff --git a/react/SearchResultFlexible.js b/react/SearchResultFlexible.js index 9d59ccb43..f4f5e87f2 100644 --- a/react/SearchResultFlexible.js +++ b/react/SearchResultFlexible.js @@ -82,6 +82,7 @@ const SearchResultFlexible = ({ priceRanges, specificationFilters, categoriesTrees, + deliveries, } = facets const filters = useMemo( @@ -92,8 +93,16 @@ const SearchResultFlexible = ({ brands, brandsQuantity, hiddenFacets, + deliveries, }), - [brands, hiddenFacets, priceRanges, specificationFilters, brandsQuantity] + [ + brands, + hiddenFacets, + priceRanges, + specificationFilters, + brandsQuantity, + deliveries, + ] ) const handles = useCssHandles(CSS_HANDLES) diff --git a/react/components/AvailableFilters.js b/react/components/AvailableFilters.js index eda4ee871..1a47e821b 100644 --- a/react/components/AvailableFilters.js +++ b/react/components/AvailableFilters.js @@ -60,6 +60,31 @@ const Filter = ({ /> ) + case 'DELIVERY': + return ( + + ) + default: return ( { + const isSSR = useSSR() + const { push } = usePixel() + + const actionType = shippingActionTypes[facet.value] + const eventIdentifier = eventIdentifiers[actionType] + + const [actionLabel, setActionLabel] = useState(placeHolders[actionType]) + const [isAddressSet, setIsAddressSet] = useState(false) + const [isPickupSet, setIsPickupSet] = useState(false) + + usePixelEventCallback({ + eventId: `shipping-option-${eventIdentifier}`, + handler: e => { + if (e?.data?.label) { + setActionLabel(e.data.label) + + if (eventIdentifier === 'addressLabel') { + setIsAddressSet(true) + } + + if (eventIdentifier === 'pickupPointLabel') { + setIsPickupSet(true) + } + } else { + setActionLabel(placeHolders[actionType]) + + if (eventIdentifier === 'addressLabel') { + setIsAddressSet(false) + } + + if (eventIdentifier === 'pickupPointLabel') { + setIsPickupSet(false) + } + } + }, + }) + + useEffect(() => { + if (!isSSR) { + return + } + + const windowLabel = window[eventIdentifier] + + if (windowLabel) { + setActionLabel(windowLabel) + + if (eventIdentifier === 'addressLabel') { + setIsAddressSet(true) + } + + if (eventIdentifier === 'pickupPointLabel') { + setIsPickupSet(true) + } + } else { + setActionLabel(placeHolders[actionType]) + + if (eventIdentifier === 'addressLabel') { + setIsAddressSet(false) + } + + if (eventIdentifier === 'pickupPointLabel') { + setIsPickupSet(false) + } + } + }, [actionType, eventIdentifier, isSSR]) + + const openDrawer = useCallback(() => { + push({ + id: drawerEvent[actionType], + }) + }, [actionType, push]) + const { showFacetQuantity } = useContext(SettingsContext) const [selected, setSelected] = useState(facet.selected) - const { push } = usePixel() const handles = useCssHandles(CSS_HANDLES) const classes = classNames( applyModifiers(handles.filterItem, facet.value), @@ -61,7 +163,7 @@ const FacetItem = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [facet.selected]) - const shouldDisable = useShouldDisableFacet(facet) + const shouldDisable = useShouldDisableFacet(facet, isAddressSet, isPickupSet) const facetLabel = useMemo(() => { const labelElement = @@ -75,6 +177,11 @@ const FacetItem = ({ ({facet.quantity}) + ) : showActionButton && actionType && facet.value !== 'pickup-nearby' ? ( +
+ {facet.name} + +
) : ( facet.name ) @@ -90,13 +197,19 @@ const FacetItem = ({ return labelElement }, [ - facet, + showFacetQuantity, + sampling, + facet.name, + facet.value, + facet.quantity, handles.productCount, handles.filterItemTitle, - facetTitle, + showActionButton, + actionType, + actionLabel, + openDrawer, showTitle, - showFacetQuantity, - sampling, + facetTitle, ]) return ( diff --git a/react/components/SearchFilter.js b/react/components/SearchFilter.js index f39138dcd..07c684083 100644 --- a/react/components/SearchFilter.js +++ b/react/components/SearchFilter.js @@ -27,6 +27,7 @@ const SearchFilter = ({ closeOnOutsideClick, appliedFiltersOverview, showClearByFilter, + type = 'TEXT', }) => { const intl = useIntl() const sampleFacet = facets && facets.length > 0 ? facets[0] : null @@ -59,6 +60,7 @@ const SearchFilter = ({ facet={facet} preventRouteChange={preventRouteChange} navigateToFacet={navigateToFacet} + showActionButton={type === 'DELIVERY'} /> )} @@ -93,6 +95,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/hooks/useShouldDisableFacet.js b/react/hooks/useShouldDisableFacet.js index 759d53e42..a9dc40d82 100644 --- a/react/hooks/useShouldDisableFacet.js +++ b/react/hooks/useShouldDisableFacet.js @@ -2,9 +2,24 @@ 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') && + !isAddressSet + ) { + return true + } + + if (facet.value === 'pickup-in-point' && !isPickupSet) { + return true + } + if (!facet.selected || !map) { return false } diff --git a/react/searchResult.css b/react/searchResult.css index 63948a915..ffefb8280 100644 --- a/react/searchResult.css +++ b/react/searchResult.css @@ -258,3 +258,14 @@ .notFound--layout { } + +.shippingActionButton { + border: 0; + padding: 0; + font-size: 14px; + background: unset; + cursor: pointer; + text-align: left; + font-weight: 500; + color: #134CD8; +} 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..b3b53c66d 100644 --- a/react/utils/getFilters.js +++ b/react/utils/getFilters.js @@ -12,6 +12,7 @@ const getFilters = ({ specificationFilters = [], priceRanges = [], brands = [], + deliveries = [], brandsQuantity = 0, hiddenFacets = {}, }) => { @@ -35,6 +36,7 @@ const getFilters = ({ : [] return [ + ...deliveries, ...mappedSpecificationFilters, !hiddenFacets.brands && !isEmpty(brands) && { From 3715e2397bd9d39a9de72246f7e992dbd8f4744e Mon Sep 17 00:00:00 2001 From: Hiago Lucas Cardeal de Melo Silva Date: Sun, 22 Sep 2024 17:19:46 -0300 Subject: [PATCH 02/12] add buttons to mobile --- react/components/AccordionFilterContainer.js | 24 ++++ react/components/AccordionFilterGroup.js | 2 + react/components/FacetCheckboxList.js | 52 ++------ react/components/FacetCheckboxListItem.js | 73 ++++++++++ react/components/FacetItem.js | 110 +--------------- react/hooks/useShippingActions.js | 132 +++++++++++++++++++ react/hooks/useShouldDisableFacet.js | 4 +- 7 files changed, 252 insertions(+), 145 deletions(-) create mode 100644 react/components/FacetCheckboxListItem.js create mode 100644 react/hooks/useShippingActions.js diff --git a/react/components/AccordionFilterContainer.js b/react/components/AccordionFilterContainer.js index 879d2e63f..25058b37b 100644 --- a/react/components/AccordionFilterContainer.js +++ b/react/components/AccordionFilterContainer.js @@ -185,6 +185,30 @@ const AccordionFilterContainer = ({ /> ) + case 'DELIVERY': + return ( + + ) + default: return ( { const handles = useCssHandles(CSS_HANDLES) const filters = useSelectedFilters(facets) @@ -67,6 +68,7 @@ const AccordionFilterGroup = ({ navigationType={navigationType} truncatedFacetsFetched={truncatedFacetsFetched} setTruncatedFacetsFetched={setTruncatedFacetsFetched} + showActionButton={type === 'DELIVERY'} /> diff --git a/react/components/FacetCheckboxList.js b/react/components/FacetCheckboxList.js index 57ff8aba0..ea216c4bc 100644 --- a/react/components/FacetCheckboxList.js +++ b/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) @@ -24,8 +19,8 @@ const FacetCheckboxList = ({ navigationType, truncatedFacetsFetched, setTruncatedFacetsFetched, + showActionButton, }) => { - const { push } = usePixel() const { searchQuery } = useSearchPage() const { showFacetQuantity } = useContext(SettingsContext) const { getSettings } = useRuntime() @@ -76,40 +71,17 @@ const FacetCheckboxList = ({ ) : null} {filteredFacets.slice(0, endSlice).map(facet => { - const { name, value: slugifiedName } = facet - return ( -
- { - pushFilterManipulationPixelEvent({ - name: facetTitle, - value: name, - products: searchQuery?.products ?? [], - push, - }) - - onFilterCheck({ ...facet, title: facetTitle }) - }} - value={name} - /> -
+ ) })} {shouldTruncate && ( diff --git a/react/components/FacetCheckboxListItem.js b/react/components/FacetCheckboxListItem.js new file mode 100644 index 000000000..90b5db724 --- /dev/null +++ b/react/components/FacetCheckboxListItem.js @@ -0,0 +1,73 @@ +import classNames from 'classnames' +import React 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, + showActionButton, +}) => { + const { push } = usePixel() + + const { actionLabel, actionType, openDrawer, shouldDisable } = + useShippingActions(facet) + + const { name, value: slugifiedName } = facet + + return ( +
+ + {facet.name} + +
+ ) : ( + facet.name + ) + } + name={name} + onChange={() => { + pushFilterManipulationPixelEvent({ + name: facetTitle, + value: name, + products: searchQuery?.products ?? [], + push, + }) + + onFilterCheck({ ...facet, title: facetTitle }) + }} + value={name} + /> + + ) +} + +export default FacetCheckboxListItem diff --git a/react/components/FacetItem.js b/react/components/FacetItem.js index 9911c50e5..a285da50a 100644 --- a/react/components/FacetItem.js +++ b/react/components/FacetItem.js @@ -1,21 +1,14 @@ -import React, { - useContext, - useState, - useEffect, - useMemo, - useCallback, -} from 'react' +import React, { useContext, useState, useEffect, useMemo } from 'react' import { Checkbox } from 'vtex.styleguide' import { useCssHandles, applyModifiers } from 'vtex.css-handles' import classNames from 'classnames' import { useSearchPage } from 'vtex.search-page-context/SearchPageContext' -import { usePixel, usePixelEventCallback } from 'vtex.pixel-manager' -import { useSSR } from 'vtex.render-runtime/react/components/NoSSR' +import { usePixel } from 'vtex.pixel-manager' import { pushFilterManipulationPixelEvent } from '../utils/filterManipulationPixelEvents' import SettingsContext from './SettingsContext' -import useShouldDisableFacet from '../hooks/useShouldDisableFacet' import ShippingActionButton from './ShippingActionButton' +import useShippingActions from '../hooks/useShippingActions' const CSS_HANDLES = ['filterItem', 'productCount', 'filterItemTitle'] @@ -30,27 +23,6 @@ const reservedVariableNames = [ 'parent', ] -const shippingActionTypes = { - delivery: 'DELIVERY', - 'pickup-nearby': '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 FacetItem = ({ navigateToFacet, facetTitle, @@ -60,78 +32,10 @@ const FacetItem = ({ showTitle = false, showActionButton, }) => { - const isSSR = useSSR() const { push } = usePixel() - const actionType = shippingActionTypes[facet.value] - const eventIdentifier = eventIdentifiers[actionType] - - const [actionLabel, setActionLabel] = useState(placeHolders[actionType]) - const [isAddressSet, setIsAddressSet] = useState(false) - const [isPickupSet, setIsPickupSet] = useState(false) - - usePixelEventCallback({ - eventId: `shipping-option-${eventIdentifier}`, - handler: e => { - if (e?.data?.label) { - setActionLabel(e.data.label) - - if (eventIdentifier === 'addressLabel') { - setIsAddressSet(true) - } - - if (eventIdentifier === 'pickupPointLabel') { - setIsPickupSet(true) - } - } else { - setActionLabel(placeHolders[actionType]) - - if (eventIdentifier === 'addressLabel') { - setIsAddressSet(false) - } - - if (eventIdentifier === 'pickupPointLabel') { - setIsPickupSet(false) - } - } - }, - }) - - useEffect(() => { - if (!isSSR) { - return - } - - const windowLabel = window[eventIdentifier] - - if (windowLabel) { - setActionLabel(windowLabel) - - if (eventIdentifier === 'addressLabel') { - setIsAddressSet(true) - } - - if (eventIdentifier === 'pickupPointLabel') { - setIsPickupSet(true) - } - } else { - setActionLabel(placeHolders[actionType]) - - if (eventIdentifier === 'addressLabel') { - setIsAddressSet(false) - } - - if (eventIdentifier === 'pickupPointLabel') { - setIsPickupSet(false) - } - } - }, [actionType, eventIdentifier, isSSR]) - - const openDrawer = useCallback(() => { - push({ - id: drawerEvent[actionType], - }) - }, [actionType, push]) + const { actionLabel, actionType, openDrawer, shouldDisable } = + useShippingActions(facet) const { showFacetQuantity } = useContext(SettingsContext) @@ -163,8 +67,6 @@ const FacetItem = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [facet.selected]) - const shouldDisable = useShouldDisableFacet(facet, isAddressSet, isPickupSet) - const facetLabel = useMemo(() => { const labelElement = showFacetQuantity && !sampling ? ( @@ -177,7 +79,7 @@ const FacetItem = ({ ({facet.quantity}) - ) : showActionButton && actionType && facet.value !== 'pickup-nearby' ? ( + ) : showActionButton && actionType ? (
{facet.name} 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 a9dc40d82..0ab25774a 100644 --- a/react/hooks/useShouldDisableFacet.js +++ b/react/hooks/useShouldDisableFacet.js @@ -10,7 +10,9 @@ export default function useShouldDisableFacet( const { map } = useSearchPage() if ( - (facet.value === 'delivery' || facet.value === 'pickup-nearby') && + (facet.value === 'delivery' || + facet.value === 'pickup-nearby' || + facet.value === 'pickup') && !isAddressSet ) { return true From 5db3a7877a49c77d9bfa69c63973afd34af306fa Mon Sep 17 00:00:00 2001 From: Hiago Lucas Cardeal de Melo Silva Date: Sun, 22 Sep 2024 17:44:24 -0300 Subject: [PATCH 03/12] fix zindex --- react/components/AccordionFilterContainer.js | 2 +- react/components/SideBar.js | 4 ++-- react/searchResult.css | 4 ++++ 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/react/components/AccordionFilterContainer.js b/react/components/AccordionFilterContainer.js index 25058b37b..90d263331 100644 --- a/react/components/AccordionFilterContainer.js +++ b/react/components/AccordionFilterContainer.js @@ -238,7 +238,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' )} > 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/searchResult.css b/react/searchResult.css index ffefb8280..c2026798c 100644 --- a/react/searchResult.css +++ b/react/searchResult.css @@ -269,3 +269,7 @@ font-weight: 500; color: #134CD8; } + +.scrim, .sidebar { + z-index: 999; +} From d0c0813a35ea0749e90c5c386e10ec3835b15c12 Mon Sep 17 00:00:00 2001 From: Luara Kerlen dos Santos Rangel Date: Tue, 1 Oct 2024 11:11:18 -0300 Subject: [PATCH 04/12] feat: add shipping filter messages --- messages/context.json | 5 +++++ messages/en.json | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/messages/context.json b/messages/context.json index bc119b827..c92aa645e 100644 --- a/messages/context.json +++ b/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} {recordsFiltered, plural, one {Product} other {Products}}", diff --git a/messages/en.json b/messages/en.json index 9079f8953..eb70dedbd 100644 --- a/messages/en.json +++ b/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} {recordsFiltered, plural, one {Product} other {Products}}", From f3950d579b1ee303040e5c1135918e69d346af8a Mon Sep 17 00:00:00 2001 From: Luara Kerlen dos Santos Rangel Date: Tue, 1 Oct 2024 11:11:40 -0300 Subject: [PATCH 05/12] feat: add shipping filter options and messages --- react/utils/getFilters.js | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/react/utils/getFilters.js b/react/utils/getFilters.js index b3b53c66d..57af5513b 100644 --- a/react/utils/getFilters.js +++ b/react/utils/getFilters.js @@ -1,5 +1,7 @@ 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' @@ -8,6 +10,13 @@ const BRANDS_TYPE = 'Brands' const PRICE_RANGES_TYPE = 'PriceRanges' const SPECIFICATION_FILTERS_TYPE = 'SpecificationFilters' +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 getFilters = ({ specificationFilters = [], priceRanges = [], @@ -16,6 +25,17 @@ const getFilters = ({ brandsQuantity = 0, hiddenFacets = {}, }) => { + const intl = useIntl() + + const shipping = deliveries.map((delivery) => ({ + ...delivery, + title: SHIPPING_TITLE, + facets: delivery.facets.map((facet) => ({ + ...facet, + name: intl.formatMessage({ id: SHIPPING_OPTIONS[facet.name] }) , + })) + })) + const hiddenFacetsNames = ( path(['specificationFilters', 'hiddenFilters'], hiddenFacets) || [] ).map(filter => filter.name) @@ -36,7 +56,7 @@ const getFilters = ({ : [] return [ - ...deliveries, + ...shipping, ...mappedSpecificationFilters, !hiddenFacets.brands && !isEmpty(brands) && { From 65db107af7ca198f6d55e2af528a307278533920 Mon Sep 17 00:00:00 2001 From: Luara Kerlen dos Santos Rangel Date: Tue, 1 Oct 2024 11:14:56 -0300 Subject: [PATCH 06/12] feat: refactor components to remove code repetition --- react/components/AccordionFilterContainer.js | 24 -------------------- react/components/AccordionFilterGroup.js | 2 -- react/components/FacetCheckboxList.js | 2 -- react/components/FacetCheckboxListItem.js | 2 +- 4 files changed, 1 insertion(+), 29 deletions(-) diff --git a/react/components/AccordionFilterContainer.js b/react/components/AccordionFilterContainer.js index 90d263331..cfcf585a5 100644 --- a/react/components/AccordionFilterContainer.js +++ b/react/components/AccordionFilterContainer.js @@ -185,30 +185,6 @@ const AccordionFilterContainer = ({ /> ) - case 'DELIVERY': - return ( - - ) - default: return ( { const handles = useCssHandles(CSS_HANDLES) const filters = useSelectedFilters(facets) @@ -68,7 +67,6 @@ const AccordionFilterGroup = ({ navigationType={navigationType} truncatedFacetsFetched={truncatedFacetsFetched} setTruncatedFacetsFetched={setTruncatedFacetsFetched} - showActionButton={type === 'DELIVERY'} />
diff --git a/react/components/FacetCheckboxList.js b/react/components/FacetCheckboxList.js index ea216c4bc..183dbff0d 100644 --- a/react/components/FacetCheckboxList.js +++ b/react/components/FacetCheckboxList.js @@ -19,7 +19,6 @@ const FacetCheckboxList = ({ navigationType, truncatedFacetsFetched, setTruncatedFacetsFetched, - showActionButton, }) => { const { searchQuery } = useSearchPage() const { showFacetQuantity } = useContext(SettingsContext) @@ -80,7 +79,6 @@ const FacetCheckboxList = ({ searchQuery={searchQuery} showFacetQuantity={showFacetQuantity} key={facet.name} - showActionButton={showActionButton} /> ) })} diff --git a/react/components/FacetCheckboxListItem.js b/react/components/FacetCheckboxListItem.js index 90b5db724..a0940f801 100644 --- a/react/components/FacetCheckboxListItem.js +++ b/react/components/FacetCheckboxListItem.js @@ -16,12 +16,12 @@ const FacetCheckboxListItem = ({ facetTitle, searchQuery, onFilterCheck, - showActionButton, }) => { const { push } = usePixel() const { actionLabel, actionType, openDrawer, shouldDisable } = useShippingActions(facet) + const showActionButton = !!actionType const { name, value: slugifiedName } = facet From 18cadc56e72967e8445679aa2b155cd0c4a9486a Mon Sep 17 00:00:00 2001 From: Luara Kerlen dos Santos Rangel Date: Tue, 1 Oct 2024 11:17:31 -0300 Subject: [PATCH 07/12] feat: refactor components to remove code repetition --- react/components/AvailableFilters.js | 25 ------------------------- react/components/FacetItem.js | 2 +- react/components/SearchFilter.js | 2 -- 3 files changed, 1 insertion(+), 28 deletions(-) diff --git a/react/components/AvailableFilters.js b/react/components/AvailableFilters.js index 1a47e821b..eda4ee871 100644 --- a/react/components/AvailableFilters.js +++ b/react/components/AvailableFilters.js @@ -60,31 +60,6 @@ const Filter = ({ /> ) - case 'DELIVERY': - return ( - - ) - default: return ( { const { push } = usePixel() const { actionLabel, actionType, openDrawer, shouldDisable } = useShippingActions(facet) + const showActionButton = !!actionType const { showFacetQuantity } = useContext(SettingsContext) diff --git a/react/components/SearchFilter.js b/react/components/SearchFilter.js index 07c684083..a8700203f 100644 --- a/react/components/SearchFilter.js +++ b/react/components/SearchFilter.js @@ -27,7 +27,6 @@ const SearchFilter = ({ closeOnOutsideClick, appliedFiltersOverview, showClearByFilter, - type = 'TEXT', }) => { const intl = useIntl() const sampleFacet = facets && facets.length > 0 ? facets[0] : null @@ -60,7 +59,6 @@ const SearchFilter = ({ facet={facet} preventRouteChange={preventRouteChange} navigateToFacet={navigateToFacet} - showActionButton={type === 'DELIVERY'} /> )} From 7cad25d9364f7125db20a16f9f38ca65b4b1d3ed Mon Sep 17 00:00:00 2001 From: Luara Kerlen dos Santos Rangel Date: Tue, 1 Oct 2024 11:17:54 -0300 Subject: [PATCH 08/12] feat: refactor components to improve code reuse and maintainability --- react/components/FacetCheckboxListItem.js | 46 +++++++++++++++-------- react/components/FacetItem.js | 27 +++++++------ 2 files changed, 46 insertions(+), 27 deletions(-) diff --git a/react/components/FacetCheckboxListItem.js b/react/components/FacetCheckboxListItem.js index a0940f801..cbdc96a06 100644 --- a/react/components/FacetCheckboxListItem.js +++ b/react/components/FacetCheckboxListItem.js @@ -25,6 +25,36 @@ const FacetCheckboxListItem = ({ const { name, value: slugifiedName } = facet + const facetLabel = useMemo(() => { + let labelElement = facet.name + + if (showFacetQuantity && !sampling) { + labelElement = (`${labelElement} (${facet.quantity})`) + } + + if (showActionButton) { + labelElement = ( +
+ {labelElement} + +
+ ) + } + + return labelElement + }, [ + showFacetQuantity, + sampling, + facet.name, + facet.quantity, + showActionButton, + actionLabel, + openDrawer, + ]) + return (
- {facet.name} - -
- ) : ( - facet.name - ) - } + label={facetLabel} name={name} onChange={() => { pushFilterManipulationPixelEvent({ diff --git a/react/components/FacetItem.js b/react/components/FacetItem.js index 054a928ee..b23a0d756 100644 --- a/react/components/FacetItem.js +++ b/react/components/FacetItem.js @@ -68,10 +68,12 @@ const FacetItem = ({ }, [facet.selected]) const facetLabel = useMemo(() => { - const labelElement = - showFacetQuantity && !sampling ? ( + let labelElement = facet.name + + if (showFacetQuantity && !sampling) { + labelElement = ( <> - {facet.name}{' '} + {labelElement}{' '} - ) : showActionButton && actionType ? ( -
- {facet.name} + ) + } + + if (showActionButton) { + labelElement = ( +
+ {labelElement}
- ) : ( - facet.name ) + } if (showTitle) { - return ( + labelElement = ( <> - {facetTitle}:{' '} - {labelElement} + {facetTitle}: {labelElement} ) } @@ -107,7 +111,6 @@ const FacetItem = ({ handles.productCount, handles.filterItemTitle, showActionButton, - actionType, actionLabel, openDrawer, showTitle, From 7612795d4b16cb54c71f1a332494d396bebbd166 Mon Sep 17 00:00:00 2001 From: Luara Kerlen dos Santos Rangel Date: Tue, 1 Oct 2024 11:59:27 -0300 Subject: [PATCH 09/12] feat: Adjust selected shipping filter options messages --- react/FilterNavigator.js | 17 +++++++++++++---- react/utils/getFilters.js | 10 +++++----- 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/react/FilterNavigator.js b/react/FilterNavigator.js index 5094483bf..5a514ce16 100644 --- a/react/FilterNavigator.js +++ b/react/FilterNavigator.js @@ -8,7 +8,7 @@ import { useCssHandles, applyModifiers } from 'vtex.css-handles' 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 { 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' @@ -102,6 +102,7 @@ const FilterNavigator = ({ priceRangeLayout = 'slider', showQuantityBadgeOnMobile = false, }) => { + const intl = useIntl() const { isMobile } = useDevice() const handles = useCssHandles(CSS_HANDLES) const [truncatedFacetsFetched, setTruncatedFacetsFetched] = useState(false) @@ -159,9 +160,17 @@ const FilterNavigator = ({ } }, [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.concat(deliveries).map(filter => { + ...specificationFilters.concat(shipping).map(filter => { return filter.facets.map(facet => { return { ...newNamedFacet({ ...facet, title: filter.name }), @@ -174,7 +183,7 @@ const FilterNavigator = ({ ] return flatten(options) - }, [brands, priceRanges, specificationFilters, deliveries]).filter( + }, [brands, priceRanges, specificationFilters, shipping]).filter( facet => facet.selected ) diff --git a/react/utils/getFilters.js b/react/utils/getFilters.js index 57af5513b..17cf59bc9 100644 --- a/react/utils/getFilters.js +++ b/react/utils/getFilters.js @@ -6,17 +6,17 @@ 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' -const BRANDS_TYPE = 'Brands' -const PRICE_RANGES_TYPE = 'PriceRanges' -const SPECIFICATION_FILTERS_TYPE = 'SpecificationFilters' - -const SHIPPING_OPTIONS = { +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 getFilters = ({ specificationFilters = [], priceRanges = [], From d291635a61e0917392ff46c3774c59c4ae22f82a Mon Sep 17 00:00:00 2001 From: Luara Kerlen dos Santos Rangel Date: Thu, 3 Oct 2024 11:50:02 -0300 Subject: [PATCH 10/12] refactor: adjust FaceItem component to improve User Interface --- react/components/FacetItem.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/react/components/FacetItem.js b/react/components/FacetItem.js index b23a0d756..a3494e985 100644 --- a/react/components/FacetItem.js +++ b/react/components/FacetItem.js @@ -87,7 +87,7 @@ const FacetItem = ({ if (showActionButton) { labelElement = (
- {labelElement} +
{labelElement}
) @@ -120,7 +120,7 @@ const FacetItem = ({ return (
From 5aa5b730ea287982fa7afe370098e23edb94cbfb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arthur=20Ferr=C3=A3o?= Date: Thu, 3 Oct 2024 15:56:21 -0300 Subject: [PATCH 11/12] feat: add facets default to the shipping filter --- react/SearchResultFlexible.js | 2 + react/hooks/useShouldDisableFacet.js | 6 ++- react/utils/getFilters.js | 74 +++++++++++++++++++++++++++- 3 files changed, 80 insertions(+), 2 deletions(-) diff --git a/react/SearchResultFlexible.js b/react/SearchResultFlexible.js index f4f5e87f2..84b3dca78 100644 --- a/react/SearchResultFlexible.js +++ b/react/SearchResultFlexible.js @@ -50,6 +50,7 @@ const SearchResultFlexible = ({ preventRouteChange = false, showFacetQuantity = false, showFacetTitle = false, + showShippingFacet = false, // Below are set by SearchContext searchQuery, maxItemsPerPage, @@ -94,6 +95,7 @@ const SearchResultFlexible = ({ brandsQuantity, hiddenFacets, deliveries, + showShippingFacet }), [ brands, diff --git a/react/hooks/useShouldDisableFacet.js b/react/hooks/useShouldDisableFacet.js index 0ab25774a..e31ef9738 100644 --- a/react/hooks/useShouldDisableFacet.js +++ b/react/hooks/useShouldDisableFacet.js @@ -8,7 +8,7 @@ export default function useShouldDisableFacet( isPickupSet ) { const { map } = useSearchPage() - + if ( (facet.value === 'delivery' || facet.value === 'pickup-nearby' || @@ -22,6 +22,10 @@ export default function useShouldDisableFacet( return true } + if(facet.quantity === 0) { + return true + } + if (!facet.selected || !map) { return false } diff --git a/react/utils/getFilters.js b/react/utils/getFilters.js index 17cf59bc9..7b4dbbbc6 100644 --- a/react/utils/getFilters.js +++ b/react/utils/getFilters.js @@ -16,6 +16,50 @@ export const SHIPPING_OPTIONS = { const BRANDS_TYPE = 'Brands' const PRICE_RANGES_TYPE = 'PriceRanges' const SPECIFICATION_FILTERS_TYPE = 'SpecificationFilters' +const SHIPPING_KEY = 'shipping' + +const facetDefault = { + id: null, + quantity: 0, + name: null, + key: SHIPPING_KEY, + selected: false, + value: null, + link: null, + linkEncoded: null, + href: null, + range: null, + children: null, + map: SHIPPING_KEY +} +const shippingFacetDefault = { + name: SHIPPING_KEY, + type: 'DELIVERY', + hidden: false, + quantity: 0, + facets: [ + { + ...facetDefault, + name: 'delivery', + value: 'delivery' + }, + { + ...facetDefault, + name: 'pickup-in-point', + value: 'pickup-in-point' + }, + { + ...facetDefault, + name: 'pickup-nearby', + value: 'pickup-nearby' + }, + { + ...facetDefault, + name: 'pickup-all', + value: 'pickup-all' + } + ] +} const getFilters = ({ specificationFilters = [], @@ -24,6 +68,7 @@ const getFilters = ({ deliveries = [], brandsQuantity = 0, hiddenFacets = {}, + showShippingFacet = false }) => { const intl = useIntl() @@ -54,9 +99,11 @@ const getFilters = ({ key: spec.facets?.[0].key, })) : [] + + const deliveriesFormatted = getFormattedDeliveries(shipping, showShippingFacet) return [ - ...shipping, + ...deliveriesFormatted, ...mappedSpecificationFilters, !hiddenFacets.brands && !isEmpty(brands) && { @@ -74,4 +121,29 @@ 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 From f1af527e593924aa65fd93651c672e6e1783267a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arthur=20Ferr=C3=A3o?= Date: Fri, 4 Oct 2024 12:27:55 -0300 Subject: [PATCH 12/12] feat: update default facets to use formatMessage --- react/components/FacetCheckboxListItem.js | 14 ++- react/utils/getFilters.js | 105 +++++++++------------- 2 files changed, 48 insertions(+), 71 deletions(-) diff --git a/react/components/FacetCheckboxListItem.js b/react/components/FacetCheckboxListItem.js index cbdc96a06..c5d101a26 100644 --- a/react/components/FacetCheckboxListItem.js +++ b/react/components/FacetCheckboxListItem.js @@ -1,5 +1,5 @@ import classNames from 'classnames' -import React from 'react' +import React, { useMemo } from 'react' import { applyModifiers } from 'vtex.css-handles' import { Checkbox } from 'vtex.styleguide' import { usePixel } from 'vtex.pixel-manager' @@ -21,6 +21,7 @@ const FacetCheckboxListItem = ({ const { actionLabel, actionType, openDrawer, shouldDisable } = useShippingActions(facet) + const showActionButton = !!actionType const { name, value: slugifiedName } = facet @@ -29,20 +30,17 @@ const FacetCheckboxListItem = ({ let labelElement = facet.name if (showFacetQuantity && !sampling) { - labelElement = (`${labelElement} (${facet.quantity})`) + labelElement = `${labelElement} (${facet.quantity})` } - + if (showActionButton) { labelElement = (
{labelElement} - +
) - } + } return labelElement }, [ diff --git a/react/utils/getFilters.js b/react/utils/getFilters.js index 7b4dbbbc6..d52a3aa88 100644 --- a/react/utils/getFilters.js +++ b/react/utils/getFilters.js @@ -18,47 +18,20 @@ const PRICE_RANGES_TYPE = 'PriceRanges' const SPECIFICATION_FILTERS_TYPE = 'SpecificationFilters' const SHIPPING_KEY = 'shipping' -const facetDefault = { - id: null, - quantity: 0, - name: null, - key: SHIPPING_KEY, - selected: false, - value: null, - link: null, - linkEncoded: null, - href: null, - range: null, - children: null, - map: SHIPPING_KEY -} const shippingFacetDefault = { name: SHIPPING_KEY, type: 'DELIVERY', hidden: false, quantity: 0, - facets: [ - { - ...facetDefault, - name: 'delivery', - value: 'delivery' - }, - { - ...facetDefault, - name: 'pickup-in-point', - value: 'pickup-in-point' - }, - { - ...facetDefault, - name: 'pickup-nearby', - value: 'pickup-nearby' - }, - { - ...facetDefault, - name: 'pickup-all', - value: 'pickup-all' - } - ] + 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 = ({ @@ -68,19 +41,10 @@ const getFilters = ({ deliveries = [], brandsQuantity = 0, hiddenFacets = {}, - showShippingFacet = false + showShippingFacet = false, }) => { const intl = useIntl() - const shipping = deliveries.map((delivery) => ({ - ...delivery, - title: SHIPPING_TITLE, - facets: delivery.facets.map((facet) => ({ - ...facet, - name: intl.formatMessage({ id: SHIPPING_OPTIONS[facet.name] }) , - })) - })) - const hiddenFacetsNames = ( path(['specificationFilters', 'hiddenFilters'], hiddenFacets) || [] ).map(filter => filter.name) @@ -99,8 +63,26 @@ const getFilters = ({ key: spec.facets?.[0].key, })) : [] - - const deliveriesFormatted = getFormattedDeliveries(shipping, showShippingFacet) + + 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, @@ -122,28 +104,25 @@ const getFilters = ({ } const getFormattedDeliveries = (deliveries, showShippingFacet) => { - if(!showShippingFacet){ - return deliveries.filter((d) => d.name !== SHIPPING_KEY) + 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 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) + const facetsNotIncluded = shippingFacetDefault.facets.filter(facet => + shippingFacet.facets.every(f => f.value !== facet.value) ) - shippingFacet.facets = [ - ...shippingFacet.facets, - ...facetsNotIncluded - ] + shippingFacet.facets = [...shippingFacet.facets, ...facetsNotIncluded] - return deliveries.map((facet) => facet.name === SHIPPING_KEY ? shippingFacet : facet) + return deliveries.map(facet => + facet.name === SHIPPING_KEY ? shippingFacet : facet + ) } export default getFilters