@shopgate/engage 7.32.0-beta.13 → 7.32.0-beta.15

package/product/components/FilterBar/components/Content/components/FilterButton/index.js

@@ -1,35 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
-import { Grid, I18n, Ripple, FilterIcon, Typography } from '@shopgate/engage/components';
+import { i18n } from '@shopgate/engage/core/helpers';
+import { Badge, I18n, FilterIcon, Typography } from '@shopgate/engage/components';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   button: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(0.75),
     color: 'inherit',
-    fontSize: theme.components.icon.medium,
     outline: 0,
-    padding: 0,
-    minWidth: theme.components.navigator.height,
-    height: theme.components.filterBar.height,
-    position: 'relative',
-    zIndex: 1,
-    overflow: 'hidden'
-  },
-  filterButton: {
-    display: 'flex'
+    flexShrink: 0,
+    margin: theme.spacing(0, 1.5),
+    padding: theme.spacing(0.25, 1),
+    border: `1px solid ${theme.components.border.medium}`,
+    borderRadius: theme.shape.borderRadius
   },
-  filterButtonLabel: {
-    alignSelf: 'center',
-    paddingRight: theme.spacing(1)
+  buttonActive: {
+    borderColor: theme.components.badge.background
   },
-  filterButtonRipple: {
-    display: 'flex',
-    height: '100%',
-    width: '100%',
-    justifyContent: 'center',
-    alignItems: 'center',
-    margin: 0,
-    padding: '6px 10px'
+  icon: {
+    fontSize: theme.components.icon.medium,
+    display: 'flex'
   }
 }));
 
@@ -39,39 +32,38 @@ const useStyles = makeStyles()(theme => ({
  * @return {JSX}
  */
 function FilterButton({
-  openFilters
+  openFilters,
+  filterCount
 }) {
   const {
     classes,
     cx
   } = useStyles();
-  return /*#__PURE__*/_jsx("button", {
-    className: cx(classes.button, 'theme__filter-bar__filter-button'),
+  return /*#__PURE__*/_jsxs("button", {
+    className: cx(classes.button, {
+      [classes.buttonActive]: filterCount > 0
+    }, 'theme__filter-bar__filter-button'),
     onClick: openFilters,
     "data-test-id": "filterButton",
+    "aria-label": i18n.text('titles.filter'),
     type: "button",
-    children: /*#__PURE__*/_jsx(Ripple, {
-      className: classes.filterButtonRipple,
-      fill: true,
-      children: /*#__PURE__*/_jsxs(Grid, {
-        component: "div",
-        children: [/*#__PURE__*/_jsx(Grid.Item, {
-          className: classes.filterButton,
-          component: "div",
-          children: /*#__PURE__*/_jsx(Typography, {
-            variant: "subtitle2",
-            component: "span",
-            className: classes.filterButtonLabel,
-            children: /*#__PURE__*/_jsx(I18n.Text, {
-              string: "titles.filter"
-            })
-          })
-        }), /*#__PURE__*/_jsx(Grid.Item, {
-          component: "div",
-          children: /*#__PURE__*/_jsx(FilterIcon, {})
-        })]
+    children: [/*#__PURE__*/_jsx("span", {
+      className: classes.icon,
+      children: /*#__PURE__*/_jsx(FilterIcon, {})
+    }), /*#__PURE__*/_jsx(Typography, {
+      variant: "subtitle2",
+      component: "span",
+      children: /*#__PURE__*/_jsx(I18n.Text, {
+        string: "titles.filter"
       })
-    })
+    }), /*#__PURE__*/_jsx(Badge, {
+      count: filterCount,
+      max: 9,
+      "aria-hidden": true
+    })]
   });
 }
+FilterButton.defaultProps = {
+  filterCount: 0
+};
 export default FilterButton;

package/product/components/FilterBar/components/Content/components/FilterChips/components/FilterChip/index.d.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+export interface FilterChipProps {
+    /**
+     * Id of the filter value. Used as the test id and passed back to `onRemove`.
+     */
+    id: string;
+    /**
+     * The chip label.
+     */
+    children: ReactNode;
+    /**
+     * Whether the chip renders a remove button (default `true`).
+     */
+    removable?: boolean;
+    /**
+     * Aria label for the label button, which opens the filter page.
+     */
+    editLabel?: string;
+    /**
+     * Aria label for the remove button.
+     */
+    removeLabel?: string;
+    /**
+     * Invoked when the chip label is clicked.
+     */
+    onClick?: () => void;
+    /**
+     * Invoked with the chip id when the remove button is clicked.
+     */
+    onRemove?: (id: string) => void;
+}
+/**
+ * A removable chip representing one active filter within the filter bar.
+ * @returns The rendered component.
+ */
+declare const FilterChip: ({ id, children, removable, editLabel, removeLabel, onClick, onRemove, }: FilterChipProps) => import("react").JSX.Element;
+export default FilterChip;
+//# sourceMappingURL=index.d.ts.map

package/product/components/FilterBar/components/Content/components/FilterChips/components/FilterChip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../../../product/components/FilterBar/components/Content/components/FilterChips/components/FilterChip/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAwDtD,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED;;;GAGG;AACH,QAAA,MAAM,UAAU,GAAI,yEAQjB,eAAe,gCAwBjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/product/components/FilterBar/components/Content/components/FilterChips/components/FilterChip/index.js

@@ -0,0 +1,88 @@
+import { useCallback } from 'react';
+import noop from 'lodash/noop';
+import Button from '@shopgate/pwa-common/components/Button';
+import { CrossIcon } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()((theme, {
+  removable
+}) => ({
+  chip: {
+    display: 'flex',
+    alignItems: 'center',
+    minWidth: 0,
+    maxWidth: '72%',
+    height: 30,
+    borderRadius: theme.shape.borderRadius,
+    border: `1px solid ${theme.palette.secondary.main}`,
+    background: theme.palette.background.surface,
+    color: theme.palette.text.primary,
+    paddingLeft: removable ? theme.spacing(0.75) : theme.spacing(1.25),
+    paddingRight: theme.spacing(1.25),
+    outline: 0
+  },
+  name: {
+    ...theme.typography.body2,
+    fontWeight: theme.typography.fontWeightMedium,
+    display: 'block',
+    color: 'inherit',
+    padding: 0,
+    paddingLeft: removable ? theme.spacing(0.5) : 0,
+    maxWidth: '100%',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  },
+  removeButton: {
+    display: 'flex',
+    flexShrink: 0,
+    padding: 0,
+    color: theme.palette.secondary.main
+  }
+}));
+
+/**
+ * `Button` is untyped JavaScript whose optional props read as required from TypeScript.
+ */
+const ChipButton = Button;
+/**
+ * A removable chip representing one active filter within the filter bar.
+ * @returns The rendered component.
+ */
+const FilterChip = ({
+  id,
+  children,
+  removable = true,
+  editLabel,
+  removeLabel,
+  onClick = noop,
+  onRemove = noop
+}) => {
+  const {
+    classes
+  } = useStyles({
+    removable
+  });
+  const handleRemove = useCallback(() => {
+    onRemove(id);
+  }, [onRemove, id]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: classes.chip,
+    "data-test-id": id,
+    children: [removable && /*#__PURE__*/_jsx(ChipButton, {
+      className: classes.removeButton,
+      onClick: handleRemove,
+      testId: "removeFilter",
+      "aria-label": removeLabel,
+      children: /*#__PURE__*/_jsx(CrossIcon, {
+        size: 16
+      })
+    }), /*#__PURE__*/_jsx(ChipButton, {
+      className: classes.name,
+      onClick: onClick,
+      "aria-label": editLabel,
+      children: children
+    })]
+  });
+};
+export default FilterChip;

package/product/components/FilterBar/components/Content/components/FilterChips/index.js

@@ -1,24 +1,41 @@
 import React, { useCallback, useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import noop from 'lodash/noop';
+import { useDispatch } from 'react-redux';
 import { router } from '@virtuous/conductor';
 import appConfig from '@shopgate/pwa-common/helpers/config';
-import { Chip, ChipLayout } from '@shopgate/engage/components';
+import { updateFilters } from '@shopgate/pwa-common-commerce/filter/action-creators';
+import { I18n } from '@shopgate/engage/components';
 import { FILTER_TYPE_RANGE, FILTER_TYPE_MULTISELECT, translateFilterLabel } from '@shopgate/engage/filter';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
-import connect from "./connector";
-import { jsx as _jsx } from "react/jsx-runtime";
+import FilterChip from "./components/FilterChip";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   container: {
-    overflow: 'auto',
-    padding: theme.spacing(0, 1.5),
-    width: '100%'
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+    overflowX: 'auto',
+    overflowY: 'hidden',
+    padding: theme.spacing(0.5, 1.5, 1.5),
+    width: '100%',
+    scrollbarWidth: 'none',
+    '&::-webkit-scrollbar': {
+      display: 'none'
+    },
+    '& > *': {
+      flexShrink: 0
+    }
   },
-  label: {
-    // TODO: This CSS variable is re-defined inside the Chip component. So refactoring to the
-    // theme need some planning.
-    color: 'var(--color-text-high-emphasis)'
+  clearAll: {
+    ...theme.typography.body2,
+    color: theme.palette.text.primary,
+    outline: 0,
+    padding: theme.spacing(0.5, 1, 0.5, 0),
+    whiteSpace: 'nowrap',
+    textDecoration: 'underline',
+    textUnderlineOffset: 3
   }
 }));
 
@@ -29,16 +46,15 @@ const useStyles = makeStyles()(theme => ({
 const FilterChips = ({
   filters,
   routeId,
-  updateFilters,
   scrollTop,
   openFilters,
-  currentPathname,
   onChipCountUpdate
 }) => {
   const {
     classes,
     cx
   } = useStyles();
+  const dispatch = useDispatch();
   const handleRemove = useCallback((id, value) => {
     const {
       [id]: selected,
@@ -62,7 +78,7 @@ const FilterChips = ({
           router.update(routeId, {
             filters: newFilters
           });
-          updateFilters(newFilters);
+          dispatch(updateFilters(newFilters));
           scrollTop();
         }, 0);
         return;
@@ -72,9 +88,16 @@ const FilterChips = ({
     router.update(routeId, {
       filters: newFilters
     });
-    updateFilters(newFilters);
+    dispatch(updateFilters(newFilters));
+    scrollTop();
+  }, [dispatch, filters, routeId, scrollTop]);
+  const handleClearAll = useCallback(() => {
+    router.update(routeId, {
+      filters: null
+    });
+    dispatch(updateFilters(null));
     scrollTop();
-  }, [filters, routeId, scrollTop, updateFilters]);
+  }, [dispatch, routeId, scrollTop]);
   const chips = useMemo(() => {
     if (filters === null || !Object.keys(filters).length) {
       return [];
@@ -108,16 +131,13 @@ const FilterChips = ({
             const editLabel = i18n.text('filter.edit', {
               filter: labelValue
             });
-            entries.push(/*#__PURE__*/_jsx(Chip, {
+            entries.push(/*#__PURE__*/_jsx(FilterChip, {
               id: key,
               onRemove: handleRemove,
               onClick: openFilters,
               removeLabel: removeLabel,
               editLabel: editLabel,
-              children: /*#__PURE__*/_jsx("span", {
-                className: classes.label,
-                children: pricesFormatted
-              })
+              children: pricesFormatted
             }, `filter-${key}`));
             break;
           }
@@ -133,43 +153,42 @@ const FilterChips = ({
             const editLabel = i18n.text('filter.edit', {
               filter: filterFormatted
             });
-            entries.push(/*#__PURE__*/_jsx(Chip, {
+            entries.push(/*#__PURE__*/_jsx(FilterChip, {
               id: value.id,
               onRemove: () => handleRemove(filter.id, value.id),
               onClick: openFilters,
               removeLabel: removeLabel,
               editLabel: editLabel,
-              children: /*#__PURE__*/_jsx("span", {
-                className: classes.label,
-                children: filterFormatted
-              })
+              children: filterFormatted
             }, `filter-${value.id}`));
           });
           break;
       }
     });
     return entries;
-  }, [classes.label, filters, handleRemove, openFilters]);
+  }, [filters, handleRemove, openFilters]);
   useEffect(() => {
     onChipCountUpdate(chips.length);
   }, [chips.length, onChipCountUpdate]);
   if (chips.length === 0) {
     return null;
   }
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: cx(classes.container, 'theme__filter-bar__filter-chips'),
-    children: /*#__PURE__*/_jsx(ChipLayout, {
-      moreLabel: "filter.more",
-      handleMoreButton: openFilters,
-      pathname: currentPathname,
-      children: chips
-    })
+    children: [chips.length > 3 && /*#__PURE__*/_jsx("button", {
+      className: classes.clearAll,
+      onClick: handleClearAll,
+      "data-test-id": "clearAllFilters",
+      type: "button",
+      children: /*#__PURE__*/_jsx(I18n.Text, {
+        string: "filter.clear_all"
+      })
+    }), chips]
   });
 };
 FilterChips.defaultProps = {
-  currentPathname: '',
   filters: null,
   scrollTop: noop,
   onChipCountUpdate: noop
 };
-export default connect(FilterChips);
+export default FilterChips;

package/product/components/FilterBar/components/Content/components/Sort/index.js

@@ -34,7 +34,7 @@ const useStyles = makeStyles()(theme => ({
     zIndex: 2,
     top: '100%',
     left: 0,
-    background: theme.palette.background.emphasized,
+    background: theme.palette.background.surface,
     boxShadow: 'rgba(0, 0, 0, 0.16) 0 2px 2px',
     [responsiveMediaQuery('>xs', {
       webOnly: true

package/product/components/FilterBar/components/Content/index.js

@@ -11,7 +11,8 @@ import FilterChips from "./components/FilterChips";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   root: {
-    display: 'flex'
+    display: 'flex',
+    alignItems: 'center'
   }
 });
 
@@ -20,7 +21,8 @@ const useStyles = makeStyles()({
  * @returns {JSX}
  */
 function FilterBarContent({
-  onChipCountUpdate
+  onChipCountUpdate,
+  filterCount
 }) {
   const {
     classes
@@ -42,7 +44,8 @@ function FilterBarContent({
     children: [/*#__PURE__*/_jsxs("div", {
       className: classes.root,
       children: [/*#__PURE__*/_jsx(Sort, {}), /*#__PURE__*/_jsx(FilterButton, {
-        openFilters: openFilters
+        openFilters: openFilters,
+        filterCount: filterCount
       })]
     }), /*#__PURE__*/_jsx(FilterChips, {
       openFilters: openFilters,
@@ -54,6 +57,7 @@ function FilterBarContent({
   });
 }
 FilterBarContent.defaultProps = {
+  filterCount: 0,
   onChipCountUpdate: noop
 };
 export default FilterBarContent;

package/product/components/FilterBar/index.js

@@ -1,18 +1,20 @@
-import React, { useState, useMemo, memo, useCallback } from 'react';
+import React, { useState, useMemo, memo } from 'react';
 import PropTypes from 'prop-types';
 import { ResponsiveContainer } from '@shopgate/engage/components';
-import { hasNewServices } from '@shopgate/engage/core/helpers';
 import { SortProvider, SORT_SCOPE_CATEGORY, SORT_SCOPE_SEARCH } from '@shopgate/engage/filter';
-import { makeStyles, useTheme } from '@shopgate/engage/styles';
+import { makeStyles } from '@shopgate/engage/styles';
 import Provider from "./FilterBarProvider";
 import Content from "./components/Content";
 import Modal from "./components/FilterModal";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
-    transition: 'transform 200ms cubic-bezier(0.25, 0.1, 0.25, 1)'
+    transition: 'transform 200ms cubic-bezier(0.25, 0.1, 0.25, 1)',
+    background: theme.palette.background.surface,
+    color: theme.palette.text.primary,
+    borderBottom: `1px solid ${theme.components.separatorLine.borderColor}`
   }
-});
+}));
 
 /**
  * The FilterBar component.
@@ -20,35 +22,23 @@ const useStyles = makeStyles()({
  * @returns {JSX}
  */
 const FilterBar = ({
-  filters,
   categoryId
 }) => {
-  const theme = useTheme();
   const {
     classes,
     cx
   } = useStyles();
-  const [active, setActive] = useState(filters !== null && Object.keys(filters).length > 0);
-  const handleChipCountUpdate = useCallback(count => {
-    setActive(count > 0);
-  }, []);
-  const style = useMemo(() => hasNewServices() ? {
-    background: theme.palette.background.emphasized,
-    color: active ? theme.palette.primary.main : theme.palette.text.primary
-  } : {
-    background: active ? theme.palette.secondary.main : theme.palette.background.emphasized,
-    color: active ? theme.palette.secondary.contrastText : theme.palette.text.primary
-  }, [active, theme]);
+  const [filterCount, setFilterCount] = useState(0);
   const sortScope = useMemo(() => categoryId ? SORT_SCOPE_CATEGORY : SORT_SCOPE_SEARCH, [categoryId]);
   return /*#__PURE__*/_jsx("div", {
     className: cx(classes.root, 'theme__filter-bar'),
     "data-test-id": "filterBar",
-    style: style,
     children: /*#__PURE__*/_jsx(SortProvider, {
       scope: sortScope,
       children: /*#__PURE__*/_jsxs(Provider, {
         children: [/*#__PURE__*/_jsx(Content, {
-          onChipCountUpdate: handleChipCountUpdate
+          onChipCountUpdate: setFilterCount,
+          filterCount: filterCount
         }), /*#__PURE__*/_jsx(ResponsiveContainer, {
           breakpoint: ">xs",
           webOnly: true,
@@ -59,7 +49,6 @@ const FilterBar = ({
   });
 };
 FilterBar.defaultProps = {
-  filters: null,
   categoryId: null
 };
 export default /*#__PURE__*/memo(FilterBar);

package/product/components/ProductFilters/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useWidgetSettings, useRoute, useResponsiveValue } from '@shopgate/engage/core/hooks';
+import { useWidgetSettings, useResponsiveValue } from '@shopgate/engage/core/hooks';
 import { applyScrollContainer } from '@shopgate/engage/core/helpers';
 import { ResponsiveContainer, ScrollHeader, SurroundPortals } from '@shopgate/engage/components';
 import { GlobalLocationSwitcher, FulfillmentSlotSwitcher } from '@shopgate/engage/locations/components';
@@ -62,9 +62,6 @@ const ProductFilters = ({
   const {
     hideOnScroll
   } = useWidgetSettings('@shopgate/engage/components/FilterBar');
-  const {
-    state
-  } = useRoute();
 
   // When the PWA is in website mode, we apply a higher offset value than usual because the AppBar
   // is larger.
@@ -94,8 +91,7 @@ const ProductFilters = ({
           renderBar: true
         })]
       }), showFilters && /*#__PURE__*/_jsx(FilterBar, {
-        categoryId: categoryId,
-        filters: state.filters
+        categoryId: categoryId
       })]
     })
   });

package/filter/components/FilterPageContent/components/Selector/components/ValueButton/index.js

@@ -1,69 +0,0 @@
-import React, { memo, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { makeStyles } from '@shopgate/engage/styles';
-import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => {
-  const inactive = {
-    border: `1px solid ${theme.components.border.medium}`,
-    borderRadius: 2,
-    color: 'inherit',
-    height: 42,
-    marginLeft: 8,
-    marginBottom: 8,
-    maxWidth: '100%',
-    minWidth: 42,
-    outline: 0,
-    overflow: 'hidden',
-    padding: '0 8px',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    transition: 'color 100ms cubic-bezier(0.25, 0.1, 0.25, 1), border-color 100ms cubic-bezier(0.25, 0.1, 0.25, 1)',
-    willChange: 'color, border-color'
-  };
-  return {
-    inactive,
-    active: {
-      ...inactive,
-      borderColor: theme.palette.secondary.main,
-      color: theme.palette.secondary.main
-    }
-  };
-});
-
-/**
- * The value button component.
- * @param {Object} props Props.
- * @returns {JSX.Element}
- */
-const ValueButton = ({
-  id,
-  isActive,
-  label,
-  onClick
-}) => {
-  const {
-    classes,
-    cx
-  } = useStyles();
-  const buttonClassName = useMemo(() => cx({
-    [classes.inactive]: !isActive,
-    [classes.active]: isActive
-  }), [classes.active, classes.inactive, isActive, cx]);
-  return /*#__PURE__*/_jsx("button", {
-    className: buttonClassName,
-    value: id,
-    onClick: onClick,
-    "data-test-id": id,
-    type: "button",
-    role: "checkbox",
-    "aria-checked": isActive,
-    children: label
-  });
-};
-ValueButton.defaultProps = {
-  id: null,
-  label: null,
-  isActive: false,
-  onClick() {}
-};
-export default /*#__PURE__*/memo(ValueButton);

package/product/components/FilterBar/components/Content/components/FilterChips/connector.js

@@ -1,22 +0,0 @@
-import { connect } from 'react-redux';
-import { getCurrentPathname } from '@shopgate/engage/core';
-import { updateFilters } from '@shopgate/pwa-common-commerce/filter/action-creators';
-
-/**
- * Maps the contents of the state to the component props.
- * @param {Object} state The current application state.
- * @return {Object} The extended component props.
- */
-const mapStateToProps = state => ({
-  currentPathname: getCurrentPathname(state)
-});
-
-/**
- * @param {Function} dispatch The redux dispatch function.
- * @param {Object} props The components props.
- * @return {Object}
- */
-const mapDispatchToProps = {
-  updateFilters
-};
-export default connect(mapStateToProps, mapDispatchToProps);