Products are now requested with the exact price range from the filters

themes/theme-gmd/pages/Filter/components/Content/helpers/buildUpdatedFilters.js

@@ -0,0 +1,38 @@
+/**
+ * @param {Object} initialFilters The filters before they where modified.
+ * @param {Object} updatedFilters The filters after they where modified.
+ * @return {Object}
+ */
+const buildUpdatedFilters = (initialFilters, updatedFilters) => {
+  // Create a set of active filters by combining state and updatedFilters.
+  const activeFilters = {
+    ...initialFilters,
+    ...updatedFilters,
+  };
+
+  return Object.keys(activeFilters).reduce((result, filterId) => {
+    const filter = activeFilters[filterId];
+
+    if (filterId === 'display_amount') {
+      const [min, max] = filter.value;
+
+      // Take care that the values for the display amount reflect the state of the price slider.
+      filter.value = [
+        Math.floor(min / 100) * 100,
+        Math.ceil(max / 100) * 100,
+      ];
+    }
+
+    if (filter.value.length) {
+      // Only add filters with selected values.
+      return {
+        ...(result === null ? {} : result),
+        [filterId]: filter,
+      };
+    }
+
+    return result;
+  }, null);
+};
+
+export default buildUpdatedFilters;

themes/theme-gmd/pages/Filter/components/Content/helpers/buildUpdatedFilters.spec.js

@@ -0,0 +1,48 @@
+import set from 'lodash/set';
+import cloneDeep from 'lodash/cloneDeep';
+import buildUpdatedFilters from './buildUpdatedFilters';
+
+const mockedFilter = {
+  display_amount: {
+    id: 'display_amount',
+    label: 'Price',
+    type: 'range',
+    value: [100, 2000],
+  },
+  manufacturer: {
+    id: 'manufacturer',
+    label: 'Manufacturer',
+    type: 'multiselect',
+    value: [{
+      id: 'wayland_corp',
+      label: 'Weyland Corp',
+    }, {
+      id: 'tyrell_corp',
+      label: 'Tyrell Corporation',
+    }],
+  },
+};
+
+describe('buildUpdatedFilters()', () => {
+  it('should update filters as expected', () => {
+    const updated = cloneDeep(mockedFilter);
+    expect(buildUpdatedFilters({}, updated)).toEqual(updated);
+  });
+
+  it('should exclude filters when they do not have values selected', () => {
+    const initial = cloneDeep(mockedFilter);
+    const updated = set(cloneDeep(mockedFilter), 'manufacturer.value', []);
+    const { manufacturer, ...expected } = mockedFilter;
+    expect(buildUpdatedFilters(initial, updated)).toEqual(expected);
+  });
+
+  it('should round the values of a display amount filter', () => {
+    const initial = cloneDeep(mockedFilter);
+    const updated = set(cloneDeep(mockedFilter), 'display_amount.value', [125, 1920]);
+    expect(buildUpdatedFilters(initial, updated)).toEqual(mockedFilter);
+  });
+
+  it('should return null both parameters are empty objects', () => {
+    expect(buildUpdatedFilters({}, {})).toBeNull();
+  });
+});

themes/theme-gmd/pages/Filter/components/Content/index.jsx

@@ -15,6 +15,7 @@ import Selector from './components/Selector';
 import ApplyButton from './components/ApplyButton';
 import ResetButton from './components/ResetButton';
 import buildInitialFilters from './helpers/buildInitialFilters';
+import buildUpdatedFilters from './helpers/buildUpdatedFilters';
 import connect from './connector';
 
 /**
@@ -158,27 +159,10 @@ class FilterContent extends PureComponent {
   save = () => {
     const { currentFilters, filters } = this.state;
 
-    // Create a set of active filters by combining state and currentFilters.
-    const activeFilters = {
-      ...currentFilters,
-      ...filters,
-    };
-
-    const newFilters = Object.keys(activeFilters).reduce((result, filterId) => {
-      const filter = activeFilters[filterId];
-
-      if (filter.value.length) {
-        // Only add filters with selected values.
-        return {
-          ...(result === null ? {} : result),
-          [filterId]: filter,
-        };
-      }
-
-      return result;
-    }, null);
-
-    conductor.update(this.props.parentId, { filters: newFilters });
+    conductor.update(
+      this.props.parentId,
+      { filters: buildUpdatedFilters(currentFilters, filters) }
+    );
     setTimeout(conductor.pop, 250);
   }