@blaze-cms/react-page-builder 0.124.0-alpha.1 → 0.124.0-alpha.13

package/lib-es/utils/get-props-to-display-modifiers.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/get-props-to-display-modifiers.js"],"names":["getPropsToDisplayModifiers","propsToDisplay","map","modifier"],"mappings":"AAAA,MAAMA,0BAA0B,GAAGC,cAAc,IAC/CA,cAAc,CAACC,GAAf,CAAmB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAkBA,QAAQ,IAAI,EAAjD,CADF;;AAGA,eAAeH,0BAAf","sourcesContent":["const getPropsToDisplayModifiers = propsToDisplay =>\n  propsToDisplay.map(({ modifier }) => modifier || '');\n\nexport default getPropsToDisplayModifiers;\n"],"file":"get-props-to-display-modifiers.js"}
+{"version":3,"file":"get-props-to-display-modifiers.js","names":["getPropsToDisplayModifiers","propsToDisplay","map","modifier"],"sources":["../../src/utils/get-props-to-display-modifiers.js"],"sourcesContent":["const getPropsToDisplayModifiers = propsToDisplay =>\n  propsToDisplay.map(({ modifier }) => modifier || '');\n\nexport default getPropsToDisplayModifiers;\n"],"mappings":"AAAA,MAAMA,0BAA0B,GAAGC,cAAc,IAC/CA,cAAc,CAACC,GAAf,CAAmB,CAAC;EAAEC;AAAF,CAAD,KAAkBA,QAAQ,IAAI,EAAjD,CADF;;AAGA,eAAeH,0BAAf"}

package/lib-es/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/index.js"],"names":["getClassModifiers","componentMap","isObjectEmpty","getImageData","getPropsToDisplayModifiers"],"mappings":"AAAA,OAAOA,iBAAP,MAA8B,uBAA9B;AACA,OAAOC,YAAP,MAAyB,iBAAzB;AACA,OAAOC,aAAP,MAA0B,mBAA1B;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,OAAOC,0BAAP,MAAuC,kCAAvC;AAEA,SAASJ,iBAAT,EAA4BC,YAA5B,EAA0CC,aAA1C,EAAyDC,YAAzD,EAAuEC,0BAAvE","sourcesContent":["import getClassModifiers from './get-class-modifiers';\nimport componentMap from './component-map';\nimport isObjectEmpty from './is-object-empty';\nimport getImageData from './get-image-data';\nimport getPropsToDisplayModifiers from './get-props-to-display-modifiers';\n\nexport { getClassModifiers, componentMap, isObjectEmpty, getImageData, getPropsToDisplayModifiers };\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["getClassModifiers","componentMap","isObjectEmpty","getImageData","getPropsToDisplayModifiers"],"sources":["../../src/utils/index.js"],"sourcesContent":["import getClassModifiers from './get-class-modifiers';\nimport componentMap from './component-map';\nimport isObjectEmpty from './is-object-empty';\nimport getImageData from './get-image-data';\nimport getPropsToDisplayModifiers from './get-props-to-display-modifiers';\n\nexport { getClassModifiers, componentMap, isObjectEmpty, getImageData, getPropsToDisplayModifiers };\n"],"mappings":"AAAA,OAAOA,iBAAP,MAA8B,uBAA9B;AACA,OAAOC,YAAP,MAAyB,iBAAzB;AACA,OAAOC,aAAP,MAA0B,mBAA1B;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,OAAOC,0BAAP,MAAuC,kCAAvC;AAEA,SAASJ,iBAAT,EAA4BC,YAA5B,EAA0CC,aAA1C,EAAyDC,YAAzD,EAAuEC,0BAAvE"}

package/lib-es/utils/is-object-empty.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/is-object-empty.js"],"names":["isObjectEmpty","objectToCheck","Object","keys","length"],"mappings":"AAAA,eAAe,SAASA,aAAT,CAAuBC,aAAvB,EAAsC;AACnD,SAAO,EAAE,CAACA,aAAD,IAAkBC,MAAM,CAACC,IAAP,CAAYF,aAAZ,EAA2BG,MAA/C,CAAP;AACD","sourcesContent":["export default function isObjectEmpty(objectToCheck) {\n  return !(!objectToCheck || Object.keys(objectToCheck).length);\n}\n"],"file":"is-object-empty.js"}
+{"version":3,"file":"is-object-empty.js","names":["isObjectEmpty","objectToCheck","Object","keys","length"],"sources":["../../src/utils/is-object-empty.js"],"sourcesContent":["export default function isObjectEmpty(objectToCheck) {\n  return !(!objectToCheck || Object.keys(objectToCheck).length);\n}\n"],"mappings":"AAAA,eAAe,SAASA,aAAT,CAAuBC,aAAvB,EAAsC;EACnD,OAAO,EAAE,CAACA,aAAD,IAAkBC,MAAM,CAACC,IAAP,CAAYF,aAAZ,EAA2BG,MAA/C,CAAP;AACD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.124.0-alpha.1",
+  "version": "0.124.0-alpha.13",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -30,7 +30,7 @@
     "@blaze-cms/core-auth-ui": "^0.119.0",
     "@blaze-cms/core-errors": "^0.118.0",
     "@blaze-cms/image-cdn-react": "^0.2.0",
-    "@blaze-cms/nextjs-components": "^0.124.0-alpha.1",
+    "@blaze-cms/nextjs-components": "^0.124.0-alpha.2",
     "@blaze-cms/setup-ui": "^0.92.0",
     "@blaze-cms/utils": "^0.118.0",
     "@blaze-react/breadcrumb": "0.8.0-alpha.60",
@@ -84,5 +84,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "797f21d4f5d2291343e2bdb017039cfd3b6290e0"
+  "gitHead": "7bfa1ccc9090449c53f859acb54549f35d8be4d3"
 }

package/src/application/query/index.js

@@ -156,6 +156,10 @@ const getPublishedContent = entity => `
         ... on ${entity} {
           id
           name
+          image {
+            url
+            __typename
+          }
           url
           __typename
         }

package/src/components/Carousel/CarouselRender/CarouselRender.js

@@ -56,7 +56,7 @@ const CarouselRender = ({ imageIds, displayCount, ...otherProps }) => {
         className="carousel__button carousel__button--previous"
         role="button"
         onClick={() => handleNavigation(navigation.back)}>
-        <div className="arrow arrow--left" />
+        <div className="carousel--arrow__left" />
       </div>
       <div className="carousel__list" ref={listRef}>
         {imageIds.map(imageId => <CarouselImage key={imageId} imageId={imageId} {...otherProps} />)}
@@ -66,7 +66,7 @@ const CarouselRender = ({ imageIds, displayCount, ...otherProps }) => {
         role="button"
         onClick={() => handleNavigation(navigation.next)}>
         {shouldDisplayCount && <p>{countMessage}</p>}
-        <div className="arrow arrow--right" />
+        <div className="carousel--arrow__right" />
       </div>
     </>
   );

package/src/components/CarouselWrapper.js

@@ -1,6 +1,5 @@
 import React, { useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
 
 const CarouselWrapper = ({
   children,
@@ -81,9 +80,7 @@ const CarouselWrapper = ({
               setShouldAutoScroll(false);
               handleButtonNavigation();
             }}>
-            <i>
-              <FaAngleLeft size={arrowSize} />
-            </i>
+            <i className="cards-carousel--arrow__left" />
           </button>
         )}
       </div>
@@ -96,9 +93,7 @@ const CarouselWrapper = ({
               setShouldAutoScroll(false);
               handleButtonNavigation(true);
             }}>
-            <i>
-              <FaAngleRight size={arrowSize} />
-            </i>
+            <i className="cards-carousel--arrow__right" />
           </button>
         )}
       </div>

package/src/components/SearchContent/index.js

@@ -1,12 +1,15 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { gql, useQuery } from '@apollo/client';
+import { gql, useApolloClient } from '@apollo/client';
+
 import { useRouter } from 'next/router';
 import { getPublishedContent } from '../../application/query';
 import BlazeLink from '../BlazeLink';
 
+const logError = error => error;
+
 const SearchContent = ({
-  entity,
+  entities,
   searchInputAlignment,
   searchInputWrapperMobile,
   searchInputWrapperDesktop,
@@ -16,44 +19,79 @@ const SearchContent = ({
 }) => {
   const [collapsed, setCollapsed] = useState(collapsible);
   const [searchTerm, setSearchTerm] = useState(null);
+  const [data, setData] = useState([]);
+
   const router = useRouter();
+  const client = useApolloClient();
 
   const capitalize = s => {
     if (typeof s !== 'string') return '';
     return s.charAt(0).toUpperCase() + s.slice(1);
   };
 
-  const [a, b] = entity.split('_');
-
-  const entityName = capitalize(a) + capitalize(b);
+  React.useEffect(() => {
+    if (data && data.length !== 0) return;
+
+    const promises = entities.map(entity => {
+      const [a, b] = entity.split('_');
+
+      const entityName = capitalize(a) + capitalize(b);
+
+      const rawQueryStringified = JSON.stringify({
+        size: 0,
+        query: {
+          bool: {
+            should: [
+              {
+                match: {
+                  docType: entity
+                }
+              }
+            ],
+            minimum_should_match: 1
+          }
+        }
+      });
 
-  const rawQueryStringified = JSON.stringify({
-    size: 0,
-    query: {
-      bool: {
-        should: [
-          {
-            match: {
-              docType: entity
-            }
+      const query = gql`
+        ${getPublishedContent(entityName)}
+      `;
+
+      try {
+        return client.query({
+          query,
+          variables: {
+            rawQueryStringified,
+            offset: 0,
+            limit: 5
           }
-        ],
-        minimum_should_match: 1
+        });
+      } catch (e) {
+        return [];
       }
+    });
+
+    try {
+      (async () => {
+        try {
+          const fetchResults = await Promise.all(promises);
+          const searchResults = fetchResults
+            .map(result => {
+              const { data: resultData } = result;
+              return resultData.searchPublishedContent.results;
+            })
+            .flat();
+
+          setData(searchResults);
+        } catch (e) {
+          logError(e);
+        }
+      })();
+    } catch (e) {
+      logError(e);
     }
   });
 
-  const query = gql`
-    ${getPublishedContent(entityName)}
-  `;
-
-  const { loading, error, data } = useQuery(query, {
-    variables: { rawQueryStringified, offset: 0, limit: 5 }
-  });
-
-  if (loading) return null;
-  if (error) return null;
-
   const handleClick = (e, url) => {
     e.preventDefault();
     router.push(url);
@@ -65,26 +103,28 @@ const SearchContent = ({
     }
   };
 
-  const renderResults = () => {
+  const renderResults = () =>
     // eslint-disable-next-line no-undef
-    const { results } = data?.searchPublishedContent;
+    data?.map(dataItem => {
+      const { name, image, url } = dataItem;
 
-    if (results && searchTerm && searchTerm !== '') {
-      return results.map(({ name, url }) => {
+      if (searchTerm && searchTerm !== '') {
         if (name.includes(searchTerm)) {
           return (
             <BlazeLink href={url} onClick={e => handleClick(e, url)}>
-              {name}
+              <div className="search-content--results__wrapper">
+                {image.url ? (
+                  <img src={image.url} alt={name} className="search-content--results__image" />
+                ) : null}
+                <span className="search-content--results__title">{name}</span>
+              </div>
             </BlazeLink>
           );
         }
 
         return null;
-      });
-    }
-
-    return [];
-  };
+      }
+    });
 
   const searchResultsMessage = searchTerm ? `Search results for: ${searchTerm}` : '';
 
@@ -164,7 +204,7 @@ SearchContent.propTypes = {
   placeholder: PropTypes.string,
   isMobile: PropTypes.bool,
   collapsible: PropTypes.bool,
-  entity: PropTypes.string.isRequired
+  entities: PropTypes.array.isRequired
 };
 
 SearchContent.defaultProps = {

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

@@ -48,9 +48,15 @@ const SearchFilter = ({
   const [moreFiltersDesktopCollapsed, setMoreFiltersDesktopCollapsed] = useState(true);
   const [filterValues, dispatch] = useReducer(reducer, initialFilterValues);
 
-  const handleSubmit = debounce(newValues => {
+  const doSubmit = (newValues = filterValues) => {
     const newQuery = buildQuery(newValues, filters);
     handleSearch(newQuery);
+    setMoreFiltersDesktopCollapsed(true);
+    setMoreFiltersMobileCollapsed(true);
+  };
+
+  const handleSubmit = debounce(newValues => {
+    doSubmit(newValues);
   }, 200);
 
   useEffect(
@@ -99,8 +105,7 @@ const SearchFilter = ({
         id={formId}
         onSubmit={e => {
           e.preventDefault();
-          const newQuery = buildQuery(filterValues, filters);
-          handleSearch(newQuery);
+          doSubmit();
         }}>
         {displaySearchFilter && (
           <CloseMobileForm handleClose={() => setDisplaySearchFilter(false)} />
@@ -136,6 +141,7 @@ const SearchFilter = ({
 
                 {!!groupAfterMobile && (
                   <button
+                    data-testId="search-filter-mobile-toggler"
                     className={moreFiltersMobileTogglerClass}
                     type="button"
                     onClick={() => setMoreFiltersMobileCollapsed(!moreFiltersMobileCollapsed)}>
@@ -160,6 +166,7 @@ const SearchFilter = ({
 
                     {!!groupAfterDesktop && (
                       <button
+                        data-testId="search-filter-desktop-toggler"
                         className={moreFiltersDesktopTogglerClass}
                         type="button"
                         onClick={() =>

package/src/components/SearchFilter/constants.js

@@ -2,7 +2,7 @@ const CHECKBOX = 'checkbox';
 const SELECT = 'select';
 const TEXT_SEARCH = 'text-search';
 const SEARCH_TERM = 'search_term';
-const SIZE = 50;
+const SIZE = process.env.BLAZE_PB_SEARCH_FILETER_AGG_SIZE || 500;
 const KEYWORD = 'keyword';
 const RAW_RESULTS = 'rawResults';
 const DEFAULT_OPTION = 'Any';

package/src/helpers/build-props-query.js

@@ -22,23 +22,24 @@ const buildPropsQuery = (data, extraProps = [], cardOptions = null) => {
   const basicProps = uniqueProps
     .filter(prop => prop && !prop.includes('.'))
     .filter((prop, i, arr) => arr.indexOf(prop) === i);
-  const complexProps = buildComplexProps(shouldAddCategoryProps, uniqueProps);
-
+  const complexProps = buildComplexProps(shouldAddCategoryProps, uniqueProps, data);
   return [...basicProps, ...complexProps].join(',');
 };
 
-const buildComplexProps = (shouldAddCategoryProps, props) =>
+const buildComplexProps = (shouldAddCategoryProps, props, { getEntitySchema: { relations } }) =>
   props
     .filter(prop => prop && prop.includes('.'))
     .map(nested => nested.split('.')[0])
     .filter((prop, i, arr) => arr.indexOf(prop) === i)
     .map(base => {
+      const matchingRelation = relations.find(({ localField }) => localField === base);
       const nestedProps = props
         .filter(
           (extraProp, i, arr) =>
             extraProp && extraProp.startsWith(`${base}.`) && arr.indexOf(extraProp) === i
         )
         .map(nested => nested.split('.')[1]);
+      if (matchingRelation && !nestedProps.includes('id')) nestedProps.push('id');
 
       const jointNestedProps = nestedProps.join(',');
       if (base === 'category' && shouldAddCategoryProps)
@@ -70,6 +71,8 @@ const getTypeBaseProps = (data, cardOptions, extraPropsHaveCategory) => {
   typeBasedProps.push(...getCategoyProps(shouldAddCategoryProps, hasCategory, hasPreheader));
   typeBasedProps.push(...getContentProps(isContent));
 
+  if (properties.url || dynamicProperties.url) typeBasedProps.push('url');
+
   if (displayThumbnail && relations.find(({ localField }) => localField === 'image')) {
     typeBasedProps.push('image.id', 'image.url', 'image.data');
   }

package/tests/helpers/mocks.js

@@ -1521,13 +1521,13 @@ const RAW_QUERY_ALL_SEARCH_VALUE_DIFFERENT_OPERATOR_TEXT_CHECKBOX_HAS_OR_OPERATO
 };
 
 const RAW_QUERY_STRINGIFIED =
-  '{"aggs":{"tags.name":{"terms":{"field":"tags.name.keyword","size":50}},"category.name"' +
-  ':{"terms":{"field":"category.name.keyword","size":50}}},"size":0,"query":{"bool":{"filter":{"bool"' +
+  '{"aggs":{"tags.name":{"terms":{"field":"tags.name.keyword","size":500}},"category.name"' +
+  ':{"terms":{"field":"category.name.keyword","size":500}}},"size":0,"query":{"bool":{"filter":{"bool"' +
   ':{"should":[{"match":{"docType":"published_page"}}],"minimum_should_match":1}}}}}';
 
 const RAW_QUERY_STRINGIFIED_WITH_RANGE =
-  '{"aggs":{"tags.name":{"terms":{"field":"tags.name.keyword","size":50}},"category.name":{"' +
-  'terms":{"field":"category.name.keyword","size":50}},"price":{"stats":{"field":"price"}},"length":' +
+  '{"aggs":{"tags.name":{"terms":{"field":"tags.name.keyword","size":500}},"category.name":{"' +
+  'terms":{"field":"category.name.keyword","size":500}},"price":{"stats":{"field":"price"}},"length":' +
   '{"stats":{"field":"length"}}},"size":0,"query":{"bool":{"filter":{"bool":{"should":[{"match":' +
   '{"docType":"published_page"}}],"minimum_should_match":1}}}}}';
 

package/tests/unit/src/components/Carousel/__snapshots__/Carousel.test.js.snap

@@ -11,7 +11,7 @@ exports[`Carousel component should render carousel and match snapshot 1`] = `
         role="button"
       >
         <div
-          class="arrow arrow--left"
+          class="carousel--arrow__left"
         />
       </div>
       <div
@@ -28,7 +28,7 @@ exports[`Carousel component should render carousel and match snapshot 1`] = `
         role="button"
       >
         <div
-          class="arrow arrow--right"
+          class="carousel--arrow__right"
         />
       </div>
     </div>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import SearchFilter from '../../../../../../src/components/SearchFilter/SearchFilter';
 
@@ -153,5 +153,27 @@ describe('SearchFilter component', () => {
       const { asFragment } = renderComponent(SearchFilter, specificMockedProps);
       expect(asFragment()).toMatchSnapshot();
     });
+
+    it('should toggle open and close classes on click and submit', () => {
+      const { getByTestId } = renderComponent(SearchFilter, specificMockedProps);
+      const mobileToggler = getByTestId('search-filter-mobile-toggler');
+      const desktopToggler = getByTestId('search-filter-desktop-toggler');
+      const form = screen.getByTestId(`filter-${specificMockedProps.name}-form`);
+
+      fireEvent.click(mobileToggler);
+      expect(mobileToggler).toHaveClass(
+        'filter__more-filters-mobile-toggler filter__more-filters-mobile-toggler--open'
+      );
+
+      fireEvent.click(desktopToggler);
+      expect(desktopToggler).toHaveClass(
+        'filter__more-filters-desktop-toggler filter__more-filters-desktop-toggler--open'
+      );
+
+      fireEvent.submit(form);
+
+      expect(mobileToggler).toHaveClass('filter__more-filters-mobile-toggler');
+      expect(desktopToggler).toHaveClass('filter__more-filters-desktop-toggler');
+    });
   });
 });

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

@@ -121,6 +121,7 @@ exports[`SearchFilter component when groupAfterMobile = 0 and groupAfterDesktop
           >
             <button
               class="filter__more-filters-desktop-toggler"
+              data-testid="search-filter-desktop-toggler"
               type="button"
             >
               More filters
@@ -288,6 +289,7 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
       >
         <button
           class="filter__more-filters-mobile-toggler"
+          data-testid="search-filter-mobile-toggler"
           type="button"
         >
           Filters
@@ -461,6 +463,7 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
       >
         <button
           class="filter__more-filters-mobile-toggler"
+          data-testid="search-filter-mobile-toggler"
           type="button"
         >
           Filters
@@ -473,6 +476,7 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
           >
             <button
               class="filter__more-filters-desktop-toggler"
+              data-testid="search-filter-desktop-toggler"
               type="button"
             >
               More filters

package/tests/unit/src/helpers/build-props-query.test.js

@@ -33,6 +33,7 @@ describe('get card render props', () => {
       dynamicProperties: {}
     }
   };
+
   const cardProps = {};
 
   it('should be a function', () => {
@@ -159,4 +160,46 @@ describe('get card render props', () => {
       'id,name,url,sponsored,featured,category{name,listingPageId,listingPageEntity, id publishedListingPage{id, url}}'
     );
   });
+
+  it('should include url if property has url', () => {
+    testUrlProperty({ extraProperties: { url: 'url' }, cardProps });
+  });
+
+  it('should include url if dynamic property has url', () => {
+    testUrlProperty({ dynamicProperties: { url: 'url' }, cardProps });
+  });
+
+  it('should add id prop to nested relations', () => {
+    const _data = {
+      getEntitySchema: {
+        interfaces: [CONTENT_INTERFACE],
+        properties: {
+          id: 'id',
+          categoryId: 'catId'
+        },
+        relations: [{ localField: 'address' }],
+        dynamicProperties: {}
+      }
+    };
+    const query = buildPropsQuery(_data, ['address.country'], cardProps);
+    expect(query).toEqual(
+      'id,name,url,sponsored,featured,category{name,listingPageId,listingPageEntity, id publishedListingPage{id, url}},address{country,id}'
+    );
+  });
 });
+
+function testUrlProperty({ extraProperties = {}, dynamicProperties = {}, cardProps }) {
+  const dataWithUrlProperty = {
+    getEntitySchema: {
+      interfaces: [],
+      properties: {
+        id: 'id',
+        ...extraProperties
+      },
+      relations: [],
+      dynamicProperties
+    }
+  };
+  const query = buildPropsQuery(dataWithUrlProperty, [], cardProps);
+  expect(query).toEqual('id,name,url');
+}