From affa3caa550b57c18c478296003e07d171496151 Mon Sep 17 00:00:00 2001
From: Senthil Krishnasamy <senthil.krishnasamy@bigcommerce.com>
Date: Fri, 5 Apr 2019 11:20:53 -0700
Subject: [PATCH 1/2] fix(CP): ES-156 Fixed the filtering issues with price
 range filter selection.

---
 assets/js/theme/common/faceted-search.js | 13 ++++++++++---
 assets/js/theme/common/url-utils.js      | 20 ++++++++++++++++++++
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/assets/js/theme/common/faceted-search.js b/assets/js/theme/common/faceted-search.js
index d9eb035a03..4c2c193e27 100644
--- a/assets/js/theme/common/faceted-search.js
+++ b/assets/js/theme/common/faceted-search.js
@@ -380,10 +380,17 @@ class FacetedSearch {
             return;
         }
 
-        const url = Url.parse(window.location.href);
-        const queryParams = decodeURI($(event.currentTarget).serialize());
+        const url = Url.parse(window.location.href, true);
+        let queryParams = decodeURI($(event.currentTarget).serialize()).split('&');
+        queryParams = urlUtils.parseQueryParams(queryParams);
 
-        urlUtils.goToUrl(Url.format({ pathname: url.pathname, search: `?${queryParams}` }));
+        for (const key in queryParams) {
+            if (queryParams.hasOwnProperty(key)) {
+                url.query[key] = queryParams[key];
+            }
+        }
+
+        urlUtils.goToUrl(Url.format({ pathname: url.pathname, search: urlUtils.buildQueryString(url.query) }));
     }
 
     onStateChange() {
diff --git a/assets/js/theme/common/url-utils.js b/assets/js/theme/common/url-utils.js
index 550706c616..79184b73fc 100644
--- a/assets/js/theme/common/url-utils.js
+++ b/assets/js/theme/common/url-utils.js
@@ -45,6 +45,26 @@ const urlUtils = {
 
         return out.substring(1);
     },
+
+    parseQueryParams: (queryData) => {
+        const params = {};
+
+        for (let i = 0; i < queryData.length; i++) {
+            const temp = queryData[i].split('=');
+
+            if (temp[0] in params) {
+                if (Array.isArray(params[temp[0]])) {
+                    params[temp[0]].push(temp[1]);
+                } else {
+                    params[temp[0]] = [params[temp[0]], temp[1]];
+                }
+            } else {
+                params[temp[0]] = temp[1];
+            }
+        }
+
+        return params;
+    },
 };
 
 export default urlUtils;

From fa81f32c1b0a50aece9823af619c31bb15a9cf35 Mon Sep 17 00:00:00 2001
From: Senthil Krishnasamy <senthil.krishnasamy@bigcommerce.com>
Date: Tue, 9 Apr 2019 13:32:36 -0700
Subject: [PATCH 2/2] fix(CP): ES-156 Added unit test cases.

---
 .../theme/common/faceted-search.spec.js       | 30 ++++++++++++++++++-
 .../test-unit/theme/common/url-utils.spec.js  | 20 +++++++++++++
 2 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/assets/js/test-unit/theme/common/faceted-search.spec.js b/assets/js/test-unit/theme/common/faceted-search.spec.js
index d907ce1af3..8ea67185b3 100644
--- a/assets/js/test-unit/theme/common/faceted-search.spec.js
+++ b/assets/js/test-unit/theme/common/faceted-search.spec.js
@@ -46,6 +46,12 @@ describe('FacetedSearch', () => {
                         '<input name="min_price" value="0">' +
                         '<input name="max_price" value="100">' +
                     '</form>' +
+                    '<form id="facet-range-form-with-other-facets">' +
+                        '<input name="brand[]" value="item1">' +
+                        '<input name="brand[]" value="item2">' +
+                        '<input name="min_price" value="0">' +
+                        '<input name="max_price" value="50">' +
+                    '</form>' +
                 '</div>' +
             '</div>';
 
@@ -216,13 +222,35 @@ describe('FacetedSearch', () => {
             expect(urlUtils.goToUrl).not.toHaveBeenCalled();
         });
 
-        it('should prevent default event', function() {
+        it('should prevent default event', () => {
             hooks.emit(eventName, event);
 
             expect(event.preventDefault).toHaveBeenCalled();
         });
     });
 
+    describe('when price range form is submitted with other facets selected', () => {
+        let event;
+        let eventName;
+
+        beforeEach(() => {
+            eventName = 'facetedSearch-range-submitted';
+            event = {
+                currentTarget: '#facet-range-form-with-other-facets',
+                preventDefault: jasmine.createSpy('preventDefault'),
+            };
+
+            spyOn(urlUtils, 'goToUrl');
+            spyOn(facetedSearch.priceRangeValidator, 'areAll').and.returnValue(true);
+        });
+
+        it('send `min_price` and `max_price` query params if form is valid', () => {
+            hooks.emit(eventName, event);
+
+            expect(urlUtils.goToUrl).toHaveBeenCalledWith('/context.html?brand[]=item1&brand[]=item2&min_price=0&max_price=50');
+        });
+    });
+
     describe('when sort filter is submitted', () => {
         let event;
         let eventName;
diff --git a/assets/js/test-unit/theme/common/url-utils.spec.js b/assets/js/test-unit/theme/common/url-utils.spec.js
index 3b84b75334..0feb52de15 100644
--- a/assets/js/test-unit/theme/common/url-utils.spec.js
+++ b/assets/js/test-unit/theme/common/url-utils.spec.js
@@ -24,5 +24,25 @@ describe('Url Utilities', () => {
 
             expect(queryString).toEqual(expectedQueryString);
         });
+
+        it('should parse the input query params from the input array and return the query string object', () => {
+            const queryInput = [
+                'brand[]=38',
+                'brand[]=39',
+                'brand[]=40',
+                'search_query=',
+                'min_price=15',
+                'max_price=40',
+            ];
+            const expectedResult = {
+                'brand[]': ['38', '39', '40'],
+                max_price: '40',
+                min_price: '15',
+                search_query: '',
+            };
+            const queryStringObj = urlUtil.parseQueryParams(queryInput);
+
+            expect(queryStringObj).toEqual(expectedResult);
+        });
     });
 });