@blaze-cms/react-page-builder 0.131.0-project-admin-customisations.2 → 0.132.0-admin-updates.0

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

@@ -1,6 +1,9 @@
-const getLinkToPublishedContent = (key = '', props = {}) => {
+const getLinkToPublishedContent = (key = '', props = {}, currentValue = null) => {
   const [baseKey] = key.split('.');
   if (!props[baseKey]) return '';
+
+  if (currentValue && typeof currentValue.url !== 'undefined') return currentValue.url;
+
   const content = Array.isArray(props[baseKey]) ? props[baseKey][0] : props[baseKey];
   return content && content.url ? content.url : '';
 };

package/src/components/Layout/Layout.js

@@ -7,43 +7,40 @@ import { getStylesToUpdate, checkIfRowHasColumns } from './helpers';
 import { renderChildren, hasChildren } from '../../helpers';
 import { COLUMN } from '../../constants';
 
-const Layout = ({
-  type,
-  children,
-  settings,
-  modifier,
-  backgroundImage,
-  tagType,
-  dataNoSnippet,
-  ...otherProps
-}) => {
-  const {
-    data: { getFile: { url = null } = {} }
-  } = useGetImages(backgroundImage);
+const Layout = React.forwardRef(
+  (
+    { type, children, settings, modifier, backgroundImage, tagType, dataNoSnippet, ...otherProps },
+    ref
+  ) => {
+    const {
+      data: { getFile: { url = null } = {} }
+    } = useGetImages(backgroundImage);
 
-  const style = getStylesToUpdate({ backgroundImage: url });
-  const { title } = settings;
+    const style = getStylesToUpdate({ backgroundImage: url });
+    const { title } = settings;
 
-  const classModifiers = getClassModifiers(type, { modifier, ...otherProps });
-  const additionalRowModifier = checkIfRowHasColumns(type, children) ? ' display-row' : '';
+    const classModifiers = getClassModifiers(type, { modifier, ...otherProps });
+    const additionalRowModifier = checkIfRowHasColumns(type, children) ? ' display-row' : '';
 
-  if (type === COLUMN && !hasChildren(children)) return null;
+    if (type === COLUMN && !hasChildren(children)) return null;
 
-  const otherWrapperProps = {};
-  if (dataNoSnippet) otherWrapperProps['data-nosnippet'] = true;
+    const otherWrapperProps = {};
+    if (dataNoSnippet) otherWrapperProps['data-nosnippet'] = true;
 
-  return (
-    <Wrapper
-      tagType={tagType}
-      className={type}
-      modifiers={`${classModifiers}${additionalRowModifier}`}
-      style={style}
-      {...otherWrapperProps}>
-      {title && <h2 className="heading heading--section">{title}</h2>}
-      {renderChildren(children, otherProps)}
-    </Wrapper>
-  );
-};
+    return (
+      <Wrapper
+        ref={ref}
+        tagType={tagType}
+        className={type}
+        modifiers={`${classModifiers}${additionalRowModifier}`}
+        style={style}
+        {...otherWrapperProps}>
+        {title && <h2 className="heading heading--section">{title}</h2>}
+        {renderChildren(children, otherProps)}
+      </Wrapper>
+    );
+  }
+);
 
 Layout.propTypes = {
   type: PropTypes.string.isRequired,

package/src/components/Layout/LayoutFactory.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import dynamic from 'next/dynamic';
+import Layout from './Layout';
+
+const LayoutWithStickyTimer = dynamic(() =>
+  import(/* webpackChunkName: "blazePbLayoutWithStickyTimer" */ './LayoutWithStickyTimer')
+);
+
+const LayoutFactory = props => {
+  const { sticky, stickyTimer } = props;
+
+  if (sticky && stickyTimer) return <LayoutWithStickyTimer {...props} />;
+
+  return <Layout {...props} />;
+};
+
+export default LayoutFactory;

package/src/components/Layout/LayoutWithStickyTimer.js

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useInView } from '@blaze-react/utils/lib/customHooks';
+import recreateOnNavigation from '../../HOC/recreateOnNavigation';
+import Layout from './Layout';
+
+const LayoutWithStickyTimer = ({ sticky, stickyTimer, ...otherProps }) => {
+  const [isIntersecting, outerRef] = useInView({});
+  const [isSticky, setIsSticky] = useState(sticky);
+
+  useEffect(
+    () => {
+      if (isIntersecting && sticky && !!stickyTimer) {
+        setIsSticky(true);
+        const timer = setTimeout(() => {
+          setIsSticky(false);
+        }, stickyTimer);
+
+        return () => {
+          clearTimeout(timer);
+        };
+      }
+    },
+    [isIntersecting, stickyTimer, sticky]
+  );
+
+  return <Layout {...otherProps} sticky={isSticky} ref={sticky ? outerRef : null} />;
+};
+
+LayoutWithStickyTimer.propTypes = {
+  sticky: PropTypes.bool,
+  stickyTimer: PropTypes.number
+};
+
+LayoutWithStickyTimer.defaultProps = {
+  sticky: false,
+  stickyTimer: 0
+};
+
+export default recreateOnNavigation(LayoutWithStickyTimer);

package/src/components/Layout/index.js

@@ -1,3 +1,3 @@
-import Layout from './Layout';
+import LayoutFactory from './LayoutFactory';
 
-export default Layout;
+export default LayoutFactory;

package/src/components/SearchContent/SearchContent.js

@@ -118,7 +118,6 @@ SearchContent.propTypes = {
   searchInputWrapperDesktop: PropTypes.string,
   placeholder: PropTypes.string,
   isMobile: PropTypes.bool,
-  collapsible: PropTypes.bool,
   entities: PropTypes.array.isRequired,
   modifier: PropTypes.string,
   collapsedSearch: PropTypes.bool
@@ -130,7 +129,6 @@ SearchContent.defaultProps = {
   searchInputWrapperDesktop: '',
   placeholder: '',
   isMobile: false,
-  collapsible: false,
   modifier: '',
   collapsedSearch: false
 };

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

@@ -3,12 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import debounce from 'lodash.debounce';
 import FiltersList from './FiltersList';
-import {
-  isDeviceDesktop,
-  buildUrlQuery,
-  getFilterValues,
-  getResponsiveFilterClassnames
-} from '../helpers';
+import { isDeviceDesktop, buildUrlQuery, getResponsiveFilterClassnames } from '../helpers';
 import CloseMobileForm from './CloseMobileForm';
 import ResetDesktopForm from './ResetDesktopForm';
 import MobileFormToolbar from './MobileFormToolbar';
@@ -71,9 +66,8 @@ const SearchFilter = ({
   const formId = `filter-${name}-form`;
 
   const handleReset = () => {
-    const newValues = getFilterValues(null, filters, {});
-    setAppliedFilters({ newValues, type: 'reset' });
-    doSubmit(newValues);
+    setAppliedFilters({ type: 'reset' });
+    doSubmit();
   };
 
   const updateFilterValues = (newValues, shouldSubmit) => {

package/src/components/SearchFilter/SearchFilterContainer.js

@@ -98,9 +98,10 @@ const SearchFilterContainer = ({
   const { searchPublishedContent: { rawResults: { aggregations: filterData } = {} } = {} } =
     data || {};
 
-  if (!filterValues && !loading && filterData) {
+  if (!filterValues && !loading && (filterData || !rawQueryStringified)) {
     const newValues = getFilterValues(filterData, filters, updatedQuery);
     dispatch({ newValues, shouldSearch: false, type: 'update' });
+    return null;
   }
 
   const handleSearch = newQuery => {
@@ -110,11 +111,13 @@ const SearchFilterContainer = ({
     scrollToFirstList();
     if (!newQuery) {
       const baseQuery = `${currentUrl}${parsedHashBit}`;
+      setUrlPath(baseQuery);
       return router.push('/Resolver', baseQuery, { shallow: !url, scroll: false }).then(() => {
         setKey(`filter-${name}:${Date.now()}`); // remove after range component update
       });
     }
     const newUrl = buildNewUrl(url, currentUrl, newQuery, hashBit);
+    setUrlPath(newUrl);
     return router.push('/Resolver', newUrl, { shallow: !url, scroll: false });
   };
 
@@ -131,7 +134,8 @@ const SearchFilterContainer = ({
       window.scrollTo(0, 0);
     }
   };
-  if (!filterValues || filterValues.dataNotSet) return null;
+
+  if (!filterValues) return null;
 
   return (
     <SearchFilter

package/src/components/SearchFilter/helpers/build-url-query.js

@@ -3,6 +3,8 @@ import parseFilterValue from './parse-filter-value';
 import { buildQueryKey } from '../../../helpers';
 
 const buildUrlQuery = (filterValues, filters, listComponentName = '', query = {}) => {
+  if (!filterValues) return '';
+
   const newQuery = [];
   const queryKeys = [];
   const searchValue = filterValues[SEARCH_TERM];

package/src/components/SearchFilter/searchFilterReducer.js

@@ -6,7 +6,7 @@ const searchFilterReducer = (state, action) => {
     case 'resetSearch':
       return { ...state, shouldSearch: false };
     case 'reset':
-      return { ...newValues, shouldSearch: false };
+      return null;
     default:
       throw new Error();
   }

package/src/helpers/get-entities-with-banner.js

@@ -4,8 +4,9 @@ export default function getEntitiesWithBanner(entities, options, hasNewBannerSet
   const { hasBanner } = options;
   if (hasNewBannerSettings) {
     return entities.map(currentEntity => {
-      const { parent, transform, limit } = options;
-      return { ...currentEntity, parent, limit, transform };
+      const { parent, transform, limit, banner } = options;
+      const { adunit, baseAdunit } = banner || {};
+      return { ...currentEntity, parent, limit, transform, adunit, baseAdunit };
     });
   }
   if (!hasBanner) return entities;

package/src/utils/get-class-modifiers.js

@@ -25,7 +25,7 @@ const iconProps = [BUTTON_TYPE, ...commonProps];
 const commonAttributes = { props: commonProps, prefix: null };
 
 const supportedTypes = {
-  row: { props: [WIDTH, ...responsiveProps, ...commonProps] },
+  row: { props: [WIDTH, STICKY, ...responsiveProps, ...commonProps] },
   column: { props: [WIDTH, STICKY, ...responsiveProps, ...commonProps] },
   button: {
     props: buttonProps,

package/tests/unit/src/HOC/recreateOnNavigation.test.js

@@ -0,0 +1,28 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render } from '@testing-library/react';
+import recreateOnNavigation from '../../../../src/HOC/recreateOnNavigation';
+
+jest.mock('next/router', () => {
+  const mockRouter = {
+    asPath: '/abc',
+    push: null
+  };
+  return {
+    router: mockRouter,
+    useRouter: () => mockRouter
+  };
+});
+
+describe('recreateOnNavigation HOC', () => {
+  const mockComponent = jest.fn(() => <div>Mock Component</div>);
+  it('should render component and change key on route change', async () => {
+    const WrapperComponent = recreateOnNavigation(mockComponent);
+    const name = 'test';
+    render(<WrapperComponent name={name} />);
+    expect(mockComponent).toHaveBeenCalledWith(expect.objectContaining({ name }), {});
+  });
+});

package/tests/unit/src/components/DataSummary/helpers/build-loop-props-content.test.js

@@ -90,4 +90,45 @@ describe('buildLoopPropsContent helper function', () => {
     });
     expect.hasAssertions();
   });
+
+  it('should nested items with urls', () => {
+    const data = {
+      nestedLoopProp: [
+        {
+          nestedValue: 'abc',
+          url: 'http://blazecms.app/abc'
+        },
+        {
+          nestedValue: '123',
+          url: 'http://blazecms.app/123'
+        },
+        {
+          nestedValue: 'no url',
+          url: null
+        }
+      ]
+    };
+    const withUrl = buildLoopPropsContent(
+      mockedLoopProps,
+      [
+        {
+          bold: false,
+          enableLink: true,
+          label: '',
+          modifier: '',
+          prefix: '',
+          propertiesToDisplay: ['nestedLoopProp.nestedValue'],
+          shouldStrip: true
+        }
+      ],
+      0,
+      data
+    );
+
+    withUrl.forEach(([, value, url], index) => {
+      expect(value).toEqual(data.nestedLoopProp[index].nestedValue);
+      expect(url).toEqual(data.nestedLoopProp[index].url || '');
+    });
+    expect.hasAssertions();
+  });
 });

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

@@ -38,4 +38,25 @@ describe('get link to published content', () => {
     const result = getLinkToPublishedContent(publishedKey, props);
     expect(result).toEqual('');
   });
+
+  it('should return url from the currentValue', () => {
+    const currentValue = { url: 'currentValueUrl' };
+    const props = { content: [content] };
+    const result = getLinkToPublishedContent(publishedKey, props, currentValue);
+    expect(result).toEqual(currentValue.url);
+  });
+
+  it('should return url from the currentValue even if falsey', () => {
+    const currentValue = { url: null };
+    const props = { content: [content] };
+    const result = getLinkToPublishedContent(publishedKey, props, currentValue);
+    expect(result).toEqual(currentValue.url);
+  });
+
+  it('should not return url from the currentValue if not set', () => {
+    const currentValue = {};
+    const props = { content: [content] };
+    const result = getLinkToPublishedContent(publishedKey, props, currentValue);
+    expect(result).toEqual(content.url);
+  });
 });

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

@@ -4,7 +4,7 @@
 import React from 'react';
 import '@testing-library/jest-dom/extend-expect';
 import { render } from '@blaze-cms/tools/test-helpers/test-functions';
-import Layout from '../../../../../src/components/Layout';
+import Layout from '../../../../../src/components/Layout/Layout';
 import { COLUMN, ROW } from '../../../../../src/constants';
 import useGetImages from '../../../../../src/hooks/use-get-images';
 

package/tests/unit/src/components/Layout/LayoutFactory.test.js

@@ -0,0 +1,53 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render } from '@testing-library/react';
+import Layout from '../../../../../src/components/Layout';
+
+jest.mock('../../../../../src/components/Layout/Layout', () =>
+  jest.fn(({ children }) => <div data-testid="Layout">{children}</div>)
+);
+
+jest.mock('next/dynamic', () => {
+  const LayoutWithStickyTimer = ({ children }) => (
+    <div data-testid="LayoutWithStickyTimer">{children}</div>
+  );
+  return jest.fn(() => LayoutWithStickyTimer);
+});
+
+const defaultComponentTestId = 'Layout';
+const testId = 'child-test-id';
+
+describe('LayoutFactoriy component', () => {
+  const props = { someProps: true, children: <div data-testid={testId} /> };
+
+  it('should be defined', () => {
+    expect(Layout).toBeDefined();
+  });
+
+  it('should render Layout component', () => {
+    const { getByTestId } = render(<Layout {...props} />);
+    expect(getByTestId(defaultComponentTestId)).toBeDefined();
+    expect(getByTestId(testId)).toBeDefined();
+  });
+
+  it('should render LayoutWithStickyTimer component', () => {
+    const { getByTestId } = render(<Layout {...props} sticky stickyTimer={10} />);
+    expect(getByTestId('LayoutWithStickyTimer')).toBeDefined();
+    expect(getByTestId(testId)).toBeDefined();
+  });
+
+  it('should render if stickyTimer is not set', () => {
+    const { getByTestId } = render(<Layout {...props} sticky />);
+    expect(getByTestId(defaultComponentTestId)).toBeDefined();
+    expect(getByTestId(testId)).toBeDefined();
+  });
+
+  it('should render if sticky is not set', () => {
+    const { getByTestId } = render(<Layout {...props} stickyTimer={20} />);
+    expect(getByTestId(defaultComponentTestId)).toBeDefined();
+    expect(getByTestId(testId)).toBeDefined();
+  });
+});