@blaze-cms/react-page-builder 0.122.0 → 0.122.2

package/src/components/SearchFilter/SearchFilter/SearchFilter.js

@@ -44,8 +44,6 @@ const SearchFilter = ({
   groupAfterDesktop,
   groupAfterMobile
 }) => {
-  const [isDesktop, setIsDesktop] = useState(true);
-  const [pageWidth, setPageWidth] = useState(null);
   const [moreFiltersMobileCollapsed, setMoreFiltersMobileCollapsed] = useState(true);
   const [moreFiltersDesktopCollapsed, setMoreFiltersDesktopCollapsed] = useState(true);
   const [filterValues, dispatch] = useReducer(reducer, initialFilterValues);
@@ -55,27 +53,6 @@ const SearchFilter = ({
     handleSearch(newQuery);
   }, 200);
 
-  useEffect(
-    () => {
-      if (window && !pageWidth) {
-        setPageWidth(window.innerWidth);
-        setIsDesktop(isDeviceDesktop());
-      }
-
-      const handleResize = ({ target: { innerWidth } }) => {
-        setIsDesktop(isDeviceDesktop());
-        setPageWidth(innerWidth);
-        if (isDesktop) setDisplaySearchFilter(false);
-      };
-
-      window.addEventListener('resize', handleResize);
-      return () => {
-        window.removeEventListener('resize', handleResize);
-      };
-    },
-    [isDesktop, pageWidth, setDisplaySearchFilter]
-  );
-
   useEffect(
     () => {
       if (filterValues.shouldSearch) {
@@ -86,16 +63,9 @@ const SearchFilter = ({
     [filterValues, handleSubmit]
   );
 
-  let isDesktopFormDisplayed = true;
-  let isMobileFormDisplayed = false;
-
-  if (!isDesktop && isCollapsedOnResponsive) {
-    isMobileFormDisplayed = displaySearchFilter;
-    isDesktopFormDisplayed = false;
-  }
-
-  const formClass = classnames({
-    'filter__form filter__form--mobile': isMobileFormDisplayed
+  const formClass = classnames('filter__form filter__form--initial', {
+    'filter__form--mobile': isCollapsedOnResponsive && displaySearchFilter,
+    'filter__form--collapsible': isCollapsedOnResponsive
   });
 
   const {
@@ -122,143 +92,138 @@ const SearchFilter = ({
 
   return (
     <>
-      {isDesktopFormDisplayed || isMobileFormDisplayed ? (
-        <form
-          ref={searchFilterRef}
-          className={formClass}
-          data-testid={formId}
-          id={formId}
-          onSubmit={e => {
-            e.preventDefault();
-            const newQuery = buildQuery(filterValues, filters);
-            handleSearch(newQuery);
-          }}>
-          {isMobileFormDisplayed && (
-            <CloseMobileForm handleClose={() => setDisplaySearchFilter(false)} />
-          )}
-
-          <div className="filter filter--search-refine">
-            {isDesktopFormDisplayed && <ResetDesktopForm handleReset={handleReset} />}
-
-            <div className="filter__wrapper filter__wrapper--search-refine">
-              {!shouldGroup && (
+      <form
+        ref={searchFilterRef}
+        className={formClass}
+        data-testid={formId}
+        id={formId}
+        onSubmit={e => {
+          e.preventDefault();
+          const newQuery = buildQuery(filterValues, filters);
+          handleSearch(newQuery);
+        }}>
+        {displaySearchFilter && (
+          <CloseMobileForm handleClose={() => setDisplaySearchFilter(false)} />
+        )}
+
+        <div className="filter filter--search-refine">
+          <ResetDesktopForm handleReset={handleReset} />
+
+          <div className="filter__wrapper filter__wrapper--search-refine">
+            {!shouldGroup && (
+              <FiltersList
+                shouldSearch={shouldSearch}
+                data={data}
+                filters={filters}
+                hasUrl={hasUrl}
+                entity={entity}
+                filterValues={filterValues}
+                updateFilterValues={updateFilterValues}
+              />
+            )}
+
+            {shouldGroup && (
+              <>
                 <FiltersList
                   shouldSearch={shouldSearch}
                   data={data}
-                  filters={filters}
+                  filters={filters.slice(0, groupAfterMobile)}
                   hasUrl={hasUrl}
                   entity={entity}
                   filterValues={filterValues}
                   updateFilterValues={updateFilterValues}
                 />
-              )}
-
-              {shouldGroup && (
-                <>
-                  <FiltersList
-                    shouldSearch={shouldSearch}
-                    data={data}
-                    filters={filters.slice(0, groupAfterMobile)}
-                    hasUrl={hasUrl}
-                    entity={entity}
-                    filterValues={filterValues}
-                    updateFilterValues={updateFilterValues}
-                  />
 
-                  {!!groupAfterMobile && (
-                    <button
-                      className={moreFiltersMobileTogglerClass}
-                      type="button"
-                      onClick={() => setMoreFiltersMobileCollapsed(!moreFiltersMobileCollapsed)}>
-                      Filters
-                    </button>
-                  )}
-
-                  <div className={moreFiltersMobileWrapperClass}>
-                    <div className={MORE_FILTERS_CLASSES.MOBILE_CONTENT}>
-                      <FiltersList
-                        shouldSearch={shouldSearch && isDeviceDesktop()}
-                        data={data}
-                        filters={filters.slice(
-                          groupAfterMobile,
-                          groupAfterDesktop ? groupAfterDesktop - 1 : 0
-                        )}
-                        hasUrl={hasUrl}
-                        entity={entity}
-                        filterValues={filterValues}
-                        updateFilterValues={updateFilterValues}
-                      />
-
-                      {!!groupAfterDesktop && (
-                        <button
-                          className={moreFiltersDesktopTogglerClass}
-                          type="button"
-                          onClick={() =>
-                            setMoreFiltersDesktopCollapsed(!moreFiltersDesktopCollapsed)
-                          }>
-                          More filters
-                        </button>
+                {!!groupAfterMobile && (
+                  <button
+                    className={moreFiltersMobileTogglerClass}
+                    type="button"
+                    onClick={() => setMoreFiltersMobileCollapsed(!moreFiltersMobileCollapsed)}>
+                    Filters
+                  </button>
+                )}
+
+                <div className={moreFiltersMobileWrapperClass}>
+                  <div className={MORE_FILTERS_CLASSES.MOBILE_CONTENT}>
+                    <FiltersList
+                      shouldSearch={shouldSearch && isDeviceDesktop()}
+                      data={data}
+                      filters={filters.slice(
+                        groupAfterMobile,
+                        groupAfterDesktop ? groupAfterDesktop - 1 : 0
                       )}
+                      hasUrl={hasUrl}
+                      entity={entity}
+                      filterValues={filterValues}
+                      updateFilterValues={updateFilterValues}
+                    />
+
+                    {!!groupAfterDesktop && (
+                      <button
+                        className={moreFiltersDesktopTogglerClass}
+                        type="button"
+                        onClick={() =>
+                          setMoreFiltersDesktopCollapsed(!moreFiltersDesktopCollapsed)
+                        }>
+                        More filters
+                      </button>
+                    )}
+
+                    <div className={moreFiltersDesktopWrapperClass}>
+                      <div className={MORE_FILTERS_CLASSES.DESKTOP_CONTENT}>
+                        <FiltersList
+                          shouldSearch={false}
+                          data={data}
+                          filters={filters.slice(groupAfterDesktop)}
+                          hasUrl={hasUrl}
+                          entity={entity}
+                          filterValues={filterValues}
+                          updateFilterValues={updateFilterValues}
+                        />
+                      </div>
 
-                      <div className={moreFiltersDesktopWrapperClass}>
-                        <div className={MORE_FILTERS_CLASSES.DESKTOP_CONTENT}>
-                          <FiltersList
-                            shouldSearch={false}
-                            data={data}
-                            filters={filters.slice(groupAfterDesktop)}
-                            hasUrl={hasUrl}
-                            entity={entity}
-                            filterValues={filterValues}
-                            updateFilterValues={updateFilterValues}
-                          />
-                        </div>
-
-                        <div className={MORE_FILTERS_CLASSES.DESKTOP_BUTTONS}>
-                          <ResetDesktopForm handleReset={handleReset} />
+                      <div className={MORE_FILTERS_CLASSES.DESKTOP_BUTTONS}>
+                        <ResetDesktopForm handleReset={handleReset} />
 
-                          <button className="button button--full-width" type="submit">
-                            {SEARCH}
-                          </button>
-                        </div>
+                        <button className="button button--full-width" type="submit">
+                          {SEARCH}
+                        </button>
                       </div>
                     </div>
+                  </div>
 
-                    <div className={MORE_FILTERS_CLASSES.MOBILE_BUTTONS}>
-                      <ResetDesktopForm handleReset={handleReset} />
+                  <div className={MORE_FILTERS_CLASSES.MOBILE_BUTTONS}>
+                    <ResetDesktopForm handleReset={handleReset} />
 
-                      <button className="button button--full-width" type="submit">
-                        {SEARCH}
-                      </button>
-                    </div>
+                    <button className="button button--full-width" type="submit">
+                      {SEARCH}
+                    </button>
                   </div>
-                </>
-              )}
+                </div>
+              </>
+            )}
 
-              <br />
+            <br />
 
-              {isDesktopFormDisplayed && (
-                <button className="button button--full-width" type="submit">
-                  {SEARCH}
-                </button>
-              )}
-            </div>
+            {!displaySearchFilter && (
+              <button className="button button--full-width" type="submit">
+                {SEARCH}
+              </button>
+            )}
           </div>
+        </div>
+
+        {displaySearchFilter && <MobileFormToolbar formId={formId} handleReset={handleReset} />}
+      </form>
 
-          {isMobileFormDisplayed && <MobileFormToolbar formId={formId} handleReset={handleReset} />}
-        </form>
-      ) : (
-        <>
-          {isCollapsedOnResponsive && (
-            <div
-              className="filter__refine filter__refine--mobile-close"
-              data-testid="refine-mobile">
-              <div role="button" onClick={() => setDisplaySearchFilter(true)}>
-                {REFINE}
-              </div>
+      {isCollapsedOnResponsive &&
+        !displaySearchFilter && (
+          <div className="filter__refine filter__refine--mobile-close" data-testid="refine-mobile">
+            <div role="button" onClick={() => setDisplaySearchFilter(true)}>
+              {REFINE}
             </div>
-          )}
-        </>
-      )}
+          </div>
+        )}
     </>
   );
 };

package/src/helpers/get-filter-props.js

@@ -17,13 +17,16 @@ const getFilterProps = (
   {
     relations: currentEntityRelations = [],
     properties: currentEntityProperties = {},
+    dynamicProperties: currentEntityDynamicProperties = {},
     identifier: currentEntityId
   } = {},
   { relations: filterEntityRelations = [], identifier: filteryEntityId } = {}
 ) => {
   const [filterName] = filter.split('/');
   const [relationName, relationProp] = filterName.split('.');
-  const hasProperty = !!currentEntityProperties[filterName];
+  const hasProperty = !!(
+    currentEntityProperties[filterName] || currentEntityDynamicProperties[filterName]
+  );
   const relationEntityName = relationProp
     ? getFilterLocalKeys(relationName, currentEntityRelations)
     : null;

package/tests/helpers/mocks.js

@@ -20,6 +20,12 @@ const GTM_CLASSNAME = 'gtm-classname';
 
 const MOCKED_SCHEMA_FOR_FILTERS = {
   identifier: 'page',
+  dynamicProperties: {
+    dynamicProp: {
+      type: 'string',
+      searchable: true
+    }
+  },
   relations: [
     {
       relationType: 'hasOne',

package/tests/unit/src/components/DataSummary/helpers/get-link-to-published-content.test.js

@@ -2,6 +2,8 @@ import '@testing-library/jest-dom/extend-expect';
 import { getLinkToPublishedContent } from '../../../../../../src/components/DataSummary/helpers';
 
 describe('get link to published content', () => {
+  const publishedKey = 'content.published';
+  const content = { url: 'url' };
   it('should be a function', () => {
     expect(typeof getLinkToPublishedContent).toEqual('function');
   });
@@ -17,14 +19,26 @@ describe('get link to published content', () => {
   });
 
   it('should return url if key does include "published" and there is related content published', () => {
-    const props = { content: [{ url: 'url' }] };
-    const result = getLinkToPublishedContent('content.published', props);
-    expect(result).toEqual('url');
+    const props = { content: [content] };
+    const result = getLinkToPublishedContent(publishedKey, props);
+    expect(result).toEqual(content.url);
   });
 
   it('should return blank string if key does include "published" but there is no related content published', () => {
+    const props = { content: [] };
+    const result = getLinkToPublishedContent(publishedKey, props);
+    expect(result).toEqual('');
+  });
+
+  it('should return url if key does include "published" and content is not an array', () => {
+    const props = { content };
+    const result = getLinkToPublishedContent(publishedKey, props);
+    expect(result).toEqual(content.url);
+  });
+
+  it('should return blank string if key does include "published" but there is no url', () => {
     const props = { content: {} };
-    const result = getLinkToPublishedContent('content.published', props);
+    const result = getLinkToPublishedContent(publishedKey, props);
     expect(result).toEqual('');
   });
 });

package/tests/unit/src/components/SearchFilter/SearchFilter/SearchFilter.test.js

@@ -1,8 +1,7 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import SearchFilter from '../../../../../../src/components/SearchFilter/SearchFilter';
-import { TABLET_WIDTH } from '../../../../../../src/components/SearchFilter/constants';
 
 // TODO DELETE WHEN UTIL WILL BE MERGED & USE IMPORT COMMENTED ABOVE
 const renderComponent = (Component, props) => {
@@ -28,118 +27,97 @@ const mockedProps = {
   displaySearchFilter: false
 };
 
-const customGlobal = global;
-const defaultWidth = global.innerWidth;
-
-afterAll(() => {
-  customGlobal.innerWidth = defaultWidth;
-});
-
 describe('SearchFilter component', () => {
   it('should be defined', () => {
     expect(SearchFilter).toBeDefined();
   });
 
-  describe('when the device is mobile', () => {
-    beforeEach(() => {
-      customGlobal.innerWidth = TABLET_WIDTH;
-      fireEvent(customGlobal, new Event('resize'));
+  describe('when isCollapsedOnResponsive = true, displaySearchFilter = false', () => {
+    const specificMockedProps = {
+      ...mockedProps,
+      isCollapsedOnResponsive: true,
+      displaySearchFilter: false
+    };
+
+    it('should NOT render form', () => {
+      renderComponent(SearchFilter, specificMockedProps);
+      expect(screen.queryByRole('form')).not.toBeInTheDocument();
     });
 
-    describe('when isCollapsedOnResponsive = true, displaySearchFilter = false', () => {
-      const specificMockedProps = {
-        ...mockedProps,
-        isCollapsedOnResponsive: true,
-        displaySearchFilter: false
-      };
-
-      it('should NOT render form', () => {
-        renderComponent(SearchFilter, specificMockedProps);
-        expect(screen.queryByRole('form')).not.toBeInTheDocument();
-      });
-
-      it('should render the mobile refine button', () => {
-        renderComponent(SearchFilter, specificMockedProps);
-        expect(screen.queryByTestId('refine-mobile')).toBeInTheDocument();
-      });
+    it('should render the mobile refine button', () => {
+      renderComponent(SearchFilter, specificMockedProps);
+      expect(screen.queryByTestId('refine-mobile')).toBeInTheDocument();
     });
+  });
 
-    describe('when isCollapsedOnResponsive = false, displaySearchFilter = true', () => {
-      const specificMockedProps = {
-        ...mockedProps,
-        isCollapsedOnResponsive: false,
-        displaySearchFilter: true
-      };
-
-      it('should NOT render form', () => {
-        renderComponent(SearchFilter, specificMockedProps);
-        expect(screen.queryByRole('form')).not.toBeInTheDocument();
-      });
+  describe('when isCollapsedOnResponsive = false, displaySearchFilter = true', () => {
+    const specificMockedProps = {
+      ...mockedProps,
+      isCollapsedOnResponsive: false,
+      displaySearchFilter: true
+    };
+
+    it('should NOT render form', () => {
+      renderComponent(SearchFilter, specificMockedProps);
+      expect(screen.queryByRole('form')).not.toBeInTheDocument();
     });
+  });
+
+  describe('when isCollapsedOnResponsive = false, displaySearchFilter = false', () => {
+    const specificMockedProps = {
+      ...mockedProps,
+      isCollapsedOnResponsive: false,
+      displaySearchFilter: false
+    };
 
-    describe('when isCollapsedOnResponsive = false, displaySearchFilter = false', () => {
-      const specificMockedProps = {
-        ...mockedProps,
-        isCollapsedOnResponsive: false,
-        displaySearchFilter: false
-      };
-
-      it('should render without throwing error and match snapshot', () => {
-        const { asFragment } = renderComponent(SearchFilter, specificMockedProps);
-        expect(asFragment()).toMatchSnapshot();
-      });
-
-      it('should render form', () => {
-        renderComponent(SearchFilter, specificMockedProps);
-
-        const formId = `filter-${specificMockedProps.name}-form`;
-        const form = screen.getByTestId(formId);
-        expect(form).toBeInTheDocument();
-      });
+    it('should render without throwing error and match snapshot', () => {
+      const { asFragment } = renderComponent(SearchFilter, specificMockedProps);
+      expect(asFragment()).toMatchSnapshot();
     });
 
-    describe('when isCollapsedOnResponsive = true, displaySearchFilter = true', () => {
-      const specificMockedProps = {
-        ...mockedProps,
-        isCollapsedOnResponsive: true,
-        displaySearchFilter: true
-      };
-
-      it('should render without throwing error and match snapshot', () => {
-        const { asFragment } = renderComponent(SearchFilter, specificMockedProps);
-        expect(asFragment()).toMatchSnapshot();
-      });
-
-      it('should render form', () => {
-        renderComponent(SearchFilter, specificMockedProps);
-
-        const formId = `filter-${specificMockedProps.name}-form`;
-        const form = screen.getByTestId(formId);
-        expect(form).toBeInTheDocument();
-      });
+    it('should render form', () => {
+      renderComponent(SearchFilter, specificMockedProps);
+
+      const formId = `filter-${specificMockedProps.name}-form`;
+      const form = screen.getByTestId(formId);
+      expect(form).toBeInTheDocument();
     });
   });
 
-  describe('when the device is desktop', () => {
-    beforeEach(() => {
-      customGlobal.innerWidth = TABLET_WIDTH + 10;
-      fireEvent(customGlobal, new Event('resize'));
-    });
+  describe('when isCollapsedOnResponsive = true, displaySearchFilter = true', () => {
+    const specificMockedProps = {
+      ...mockedProps,
+      isCollapsedOnResponsive: true,
+      displaySearchFilter: true
+    };
 
     it('should render without throwing error and match snapshot', () => {
-      const { asFragment } = renderComponent(SearchFilter, mockedProps);
+      const { asFragment } = renderComponent(SearchFilter, specificMockedProps);
       expect(asFragment()).toMatchSnapshot();
     });
 
     it('should render form', () => {
-      renderComponent(SearchFilter, mockedProps);
+      renderComponent(SearchFilter, specificMockedProps);
 
-      const formId = `filter-${mockedProps.name}-form`;
+      const formId = `filter-${specificMockedProps.name}-form`;
       const form = screen.getByTestId(formId);
       expect(form).toBeInTheDocument();
     });
   });
 
+  it('should render without throwing error and match snapshot', () => {
+    const { asFragment } = renderComponent(SearchFilter, mockedProps);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render form', () => {
+    renderComponent(SearchFilter, mockedProps);
+
+    const formId = `filter-${mockedProps.name}-form`;
+    const form = screen.getByTestId(formId);
+    expect(form).toBeInTheDocument();
+  });
+
   describe('when groupAfterMobile > 0 and groupAfterDesktop = 0', () => {
     const specificMockedProps = {
       ...mockedProps,