@blaze-cms/react-page-builder 0.118.0 → 0.119.0-alpha.0

package/src/components/CarouselWrapper.js

@@ -2,17 +2,48 @@ import React, { useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
 
-const CarouselWrapper = ({ children, bannerModifier, itemsPerRow }) => {
+const CarouselWrapper = ({
+  children,
+  bannerModifier,
+  itemsPerRow,
+  enableAutoScroll,
+  autoScrollTimer
+}) => {
   const ref = useRef();
   const [buttonDisplay, setButtonDisplays] = useState({ displayLeft: false, displayRight: true });
+  const [shouldAutoScroll, setShouldAutoScroll] = useState(false);
+  const autoScrollRef = useRef();
 
-  useEffect(() => {
-    const {
-      current: { offsetWidth, scrollWidth }
-    } = ref;
+  useEffect(
+    () => {
+      autoScrollRef.current = shouldAutoScroll;
+      const autoScroll = () => {
+        const id = setInterval(scrollCheck, autoScrollTimer);
+        function scrollCheck() {
+          if (!autoScrollRef.current) {
+            clearInterval(id);
+          } else {
+            handleButtonNavigation(true);
+          }
+        }
+      };
 
-    if (scrollWidth <= offsetWidth) setButtonDisplays({ displayLeft: false, displayRight: false });
-  }, []);
+      if (autoScrollRef.current) autoScroll();
+    },
+    [autoScrollTimer, shouldAutoScroll]
+  );
+
+  useEffect(
+    () => {
+      const {
+        current: { offsetWidth, scrollWidth }
+      } = ref;
+      if (scrollWidth <= offsetWidth)
+        setButtonDisplays({ displayLeft: false, displayRight: false });
+      setShouldAutoScroll(enableAutoScroll);
+    },
+    [enableAutoScroll]
+  );
 
   const handleScroll = () => {
     const {
@@ -25,35 +56,46 @@ const CarouselWrapper = ({ children, bannerModifier, itemsPerRow }) => {
 
   const handleButtonNavigation = direction => {
     const {
-      current: { offsetWidth, scrollLeft }
+      current: { offsetWidth, scrollLeft, scrollWidth }
     } = ref;
-    ref.current.scrollLeft = direction ? scrollLeft + offsetWidth : scrollLeft - offsetWidth;
+
+    if (autoScrollRef.current && scrollLeft + offsetWidth >= scrollWidth) {
+      ref.current.scrollLeft = 0;
+    } else {
+      ref.current.scrollLeft = direction ? scrollLeft + offsetWidth : scrollLeft - offsetWidth;
+    }
   };
 
   const { displayLeft, displayRight } = buttonDisplay;
-  const wrapperClassName = `card-carousel relative gap-2${bannerModifier}`;
-  const contentClassName = `card-carousel__content card-carousel__content--items-per-row-${itemsPerRow} flex flex-nowrap p-4 gap-4 overflow-x-scroll`;
+  const wrapperClassName = `cards-carousel${bannerModifier}`;
+  const contentClassName = `cards-carousel--content items-per-row-${itemsPerRow}`;
 
   return (
     <div className={wrapperClassName}>
-      <div className="card-carousel__button-wrapper absolute left-0 h-full flex justify-center items-center z-10">
+      <div className="cards-carousel--left-button-wrapper">
         {displayLeft && (
           <button
             type="button"
-            className="card-carousel__button-back icon-button"
-            onClick={() => handleButtonNavigation()}>
+            className="cards-carousel__button-back icon-button icon"
+            onClick={() => {
+              setShouldAutoScroll(false);
+              handleButtonNavigation();
+            }}>
             <i>
               <FaAngleLeft />
             </i>
           </button>
         )}
       </div>
-      <div className="card-carousel__button-wrapper absolute right-0 h-full flex justify-center items-center z-10">
+      <div className="cards-carousel--right-button-wrapper">
         {displayRight && (
           <button
             type="button"
-            className="card-carousel__button-forward icon-button icon"
-            onClick={() => handleButtonNavigation(true)}>
+            className="cards-carousel--button-forward icon-button icon"
+            onClick={() => {
+              setShouldAutoScroll(false);
+              handleButtonNavigation(true);
+            }}>
             <i>
               <FaAngleRight />
             </i>
@@ -70,13 +112,17 @@ const CarouselWrapper = ({ children, bannerModifier, itemsPerRow }) => {
 CarouselWrapper.propTypes = {
   bannerModifier: PropTypes.string,
   itemsPerRow: PropTypes.number,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  enableAutoScroll: PropTypes.bool,
+  autoScrollTimer: PropTypes.number
 };
 
 CarouselWrapper.defaultProps = {
   itemsPerRow: 0,
   bannerModifier: '',
-  children: []
+  children: [],
+  enableAutoScroll: false,
+  autoScrollTimer: 0
 };
 
 export default CarouselWrapper;

package/src/components/DataSummary/DataSummaryFactory.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 import PropTypes from 'prop-types';
 import { MainContext } from '@blaze-cms/nextjs-components';
 import { getSingleEntitySchema } from '../../application/query';

package/src/components/DataSummary/DataSummaryRender.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 import PropTypes from 'prop-types';
 import { summaryComponents } from './DataSummaryTypes';
 import { getClassModifiers } from '../../utils';

package/src/components/EmailConfirm/EmailConfirm.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { useMutation } from 'react-apollo';
+import { useMutation } from '@apollo/client';
 import { useRouter } from 'next/router';
 import { parseUrl } from 'query-string';
 import EMAIL_CONFIRM_MUTATION from './mutation';

package/src/components/EmailConfirm/mutation.js

@@ -1,4 +1,4 @@
-import gql from 'graphql-tag';
+import { gql } from '@apollo/client';
 
 const EMAIL_CONFIRM_MUTATION = gql`
   mutation confirmUserEmail($token: String!) {

package/src/components/Image/ImageFactory.js

@@ -17,7 +17,7 @@ const ImageFactory = props => {
   const isUsingRelationImage = checkIfUsingRelationImage(entity, fetchFromRelation, imageRelation);
   const { data: { getEntitySchema = {} } = {} } = useGetSingleEntitySchema(entity, !entity);
   const { actions = {} } = getEntitySchema;
-  const { data: relationData } = useGetImageIdFromRelation(
+  const { data: relationData, loading: relationLoading } = useGetImageIdFromRelation(
     itemId,
     imageRelation,
     actions,
@@ -25,16 +25,19 @@ const ImageFactory = props => {
     isPreview
   );
 
-  const updatedImageIds = getImageIds(imageRelation, relationData, imageId);
-
-  const { data: { getFiles: files = [] } = {}, loading, error } = useGetImages(
-    updatedImageIds,
-    true
+  const updatedImageIds = relationLoading
+    ? null
+    : getImageIds(imageRelation, relationData, imageId);
+  const imageIds =
+    updatedImageIds && updatedImageIds.length === 1 ? updatedImageIds[0] : updatedImageIds;
+  const { data: { getFile, getFiles = [] } = {}, loading, error } = useGetImages(
+    imageIds,
+    updatedImageIds && updatedImageIds.length > 1
   );
-
   if (error) return error.message;
   if (loading) return '';
 
+  const files = getFile ? [getFile] : getFiles;
   return files.map(({ id, data: imageData = {}, url: imageUrl = '' }) => {
     if (!imageUrl) return null;
     return <Image key={id} {...props} imageData={imageData} imageUrl={imageUrl} />;

package/src/components/List/ListBuilder.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useQuery } from '@apollo/react-hooks';
-import { getStringTypeProps } from '@blaze-cms/utils';
+import { useQuery } from '@apollo/client';
+import { getStringTypeProps } from '@blaze-cms/utils/src/helpers';
 import {
   CardRenderWithInfiniteScroll,
   CardsRender,

package/src/components/List/ListFactory.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 import { parseUrl } from 'query-string';
 import PropTypes from 'prop-types';
 import { useRouter } from 'next/router';

package/src/components/List/ListRender.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 import PropTypes from 'prop-types';
 import ListPagination from './components/Pagination';
 import ListHeader from './components/Header';

package/src/components/Login/LoggedInMessage.js

@@ -17,7 +17,7 @@ const LoggedInMessage = ({ goToUrl, urlToUse }) => (
 );
 
 LoggedInMessage.propTypes = {
-  goToUrl: PropTypes.string.isRequired,
+  goToUrl: PropTypes.func.isRequired,
   urlToUse: PropTypes.string.isRequired
 };
 

package/src/components/Login/Login.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { handleLogin, checkIfLoggedIn, LOGIN_MUTATION } from '@blaze-cms/core-auth-ui';
 import PropTypes from 'prop-types';
-import { useMutation } from 'react-apollo';
+import { useMutation } from '@apollo/client';
 import { useRouter } from 'next/router';
 import { parseUrl } from 'query-string';
 import LoggedInMessage from './LoggedInMessage';

package/src/components/PasswordReset/PasswordReset.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import Input from '@blaze-react/input';
 import Button from '@blaze-react/button';
-import { useMutation } from 'react-apollo';
+import { useMutation } from '@apollo/client';
 import { useRouter } from 'next/router';
 import { parseUrl } from 'query-string';
 import { RESET_USER_PASSWORD_MUTATION } from '@blaze-cms/core-auth-ui';

package/src/components/PasswordResetRequest/PasswordResetRequest.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import Input from '@blaze-react/input';
 import Button from '@blaze-react/button';
-import { useMutation } from 'react-apollo';
+import { useMutation } from '@apollo/client';
 import { useRouter } from 'next/router';
 import { checkIfLoggedIn, REQUEST_USER_PASSWORD_RESET_MUTATION } from '@blaze-cms/core-auth-ui';
 import { GRAPH_QL_ERROR } from '../../constants';

package/src/components/SearchFilter/SearchFilterContainer.js

@@ -1,6 +1,6 @@
 import React, { useState, useRef } from 'react';
 import { useRouter } from 'next/router';
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 import PropTypes from 'prop-types';
 import { parseUrl, stringify } from 'query-string';
 import SearchFilter from './SearchFilter';

package/src/constants/index.js

@@ -194,10 +194,16 @@ const ALL_AZ_SORT = {
 
 const SCROLL_OFFSET = process.env.BLAZE_SCROLL_OFFSET || 50;
 
+const BANNER_LOADING = 'loading';
+const BANNER_EMPTY = 'empty';
+const BANNER_LOADED = 'loaded';
 const ANCHOR_TAG = 'a';
 const TARGET_BLANK = '_blank';
 
 export {
+  BANNER_LOADING,
+  BANNER_EMPTY,
+  BANNER_LOADED,
   BLANK_SPACE_UNICODE_STRING,
   BOLD_TAG,
   BUTTON,

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

@@ -1,7 +1,7 @@
 import { CATEGORY_ID, ID, PREHEADER_PROP, HEADLINE_PROP } from '../constants';
 
 const defaultProps = [ID, 'name'];
-const categoryProps = 'publishedListingPage{url}';
+const categoryProps = 'id publishedListingPage{id, url}';
 
 const checkProps = props =>
   !!(props && Object.keys(props).filter(prop => prop === CATEGORY_ID).length);
@@ -77,7 +77,7 @@ const getContentProps = (isContent, displayThumbnail) => {
   if (!isContent) return [];
 
   const props = ['url', 'sponsored', 'featured'];
-  if (displayThumbnail) props.push('image.url', 'image.data');
+  if (displayThumbnail) props.push('image.id', 'image.url', 'image.data');
 
   return props;
 };

package/src/hooks/use-get-entity-schema.js

@@ -1,4 +1,4 @@
-import { useQuery, useApolloClient } from '@apollo/react-hooks';
+import { useQuery, useApolloClient } from '@apollo/client';
 import { useState } from 'react';
 import { getEntitySchema } from '../application/query';
 import { ALL } from '../constants';

package/src/hooks/use-get-entity-schemas-as-obj.js

@@ -1,4 +1,4 @@
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 import { getMultipleSchema } from '../application/query';
 
 function useGetEntitySchemasAsObj(identifiers, shouldSkip = false) {

package/src/hooks/use-get-image-id-from-relation.js

@@ -1,4 +1,4 @@
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 import { generateSingleItemQuery } from '../application/query';
 
 function useGetImageIdFromRelation(id, imageRelation, actions, isUsingRelationImage, isPreview) {

package/src/hooks/use-get-images.js

@@ -1,4 +1,4 @@
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 import { getFiles, getFileById } from '../application/query';
 
 function shouldSkip(id) {

package/src/hooks/use-get-single-entity-schema.js

@@ -1,4 +1,4 @@
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 import { getSingleEntitySchema } from '../application/query';
 
 const useGetSingleEntitySchema = (id, skip = false) => {

package/tests/unit/src/components/Banner/AdSlotRender.test.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import AdSlotRender from '../../../../../src/components/Banner/AdSlotRender';
+
+jest.mock('react-dfp', () => {
+  const AdSlot = ({ onSlotRender }) => (
+    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+    <div
+      data-testid="adslot-test"
+      role="button"
+      onMouseLeave={() => onSlotRender({ event: { isEmpty: true } })}
+      onMouseOver={() => onSlotRender({ event: { isEmpty: false } })}
+    />
+  );
+  return { AdSlot };
+});
+
+const slotTestId = 'adslot-test';
+const sizeMapping = [
+  {
+    viewport: [970, 250],
+    sizes: [[970, 250], [970, 528]]
+  },
+  {
+    viewport: [320, 100],
+    sizes: [[320, 100]]
+  },
+  {
+    viewport: [728, 90],
+    sizes: [[320, 100]]
+  }
+];
+
+const defaultProps = {
+  shouldShowBanner: true,
+  sizeMapping,
+  sizeId: 'sizeId',
+  parsedAdunit: 'unit-name',
+  parsedSizes: [],
+  targetingArguments: {}
+};
+
+describe('Banner render component', () => {
+  it('should not render AdSlot if shouldShowBanner=false but should render styles and wrapper', () => {
+    const { asFragment, container, getByTestId } = render(
+      <AdSlotRender {...defaultProps} shouldShowBanner={false} />
+    );
+
+    expect(container.childNodes[0].nodeName).toEqual('STYLE');
+    expect(container.childNodes[1]).toHaveClass('ad-slot ad-slot-loading banner-sizeId');
+    expect(() => getByTestId(slotTestId)).toThrow();
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  describe('AdSlot loading', () => {
+    it('should render AdSlot', () => {
+      const { asFragment, container, getByTestId } = render(<AdSlotRender {...defaultProps} />);
+      expect(getByTestId('adslot-test')).toBeDefined();
+      expect(container.childNodes[1]).toHaveClass('ad-slot ad-slot-loading banner-sizeId');
+      expect(asFragment()).toMatchSnapshot();
+    });
+
+    it('should change class and remove styles after loaded events', async () => {
+      const { asFragment, container, getByTestId } = render(<AdSlotRender {...defaultProps} />);
+      const adSlot = getByTestId(slotTestId);
+
+      fireEvent.mouseOver(adSlot);
+      await waitFor(() =>
+        expect(container.childNodes[0]).toHaveClass('ad-slot ad-slot-loaded banner-sizeId')
+      );
+      expect(asFragment()).toMatchSnapshot();
+
+      fireEvent.mouseLeave(adSlot);
+      await waitFor(() =>
+        expect(container.childNodes[0]).toHaveClass('ad-slot ad-slot-empty banner-sizeId')
+      );
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+});

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

@@ -2,7 +2,8 @@ import '@testing-library/jest-dom/extend-expect';
 import { render } from '@blaze-cms/tools/test-helpers/test-functions';
 import Banner from '../../../../../src/components/Banner/Banner';
 
-jest.mock('@apollo/react-hooks', () => ({
+jest.mock('@apollo/client', () => ({
+  ...jest.requireActual('@apollo/client'),
   useQuery: jest.fn(({ data, loading, error }) => ({ data, loading, error }))
 }));
 jest.mock('next/router', () => ({

package/tests/unit/src/components/Banner/BannerRender.test.js

@@ -0,0 +1,119 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { MockedProvider } from '@apollo/client/testing';
+import { render } from '@testing-library/react';
+import BannerRender from '../../../../../src/components/Banner/BannerRender';
+import { getAction, generateSingleItemQuery, getCount } from '../../../../../src/application/query';
+import {
+  BANNER_QUERY_PROPS,
+  COUNT_CONTENT_HIERARCHIES,
+  GET_BANNER,
+  PUBLISHED
+} from '../../../../../src/constants';
+
+const actionKey = 'getPublishedPage';
+const id = 'record id';
+const action = getAction(actionKey, 'id, name');
+const getEntityDataMock = {
+  request: {
+    query: action,
+    variables: {
+      id
+    }
+  },
+  result: {
+    data: {
+      [actionKey]: {
+        id,
+        name: 'record name'
+      }
+    }
+  }
+};
+
+const sizeId = 'sizeId';
+const sizes = [
+  {
+    width: 320,
+    height: 100,
+    viewports: [
+      {
+        width: 320,
+        height: 100
+      }
+    ]
+  }
+];
+const getBannerMock = {
+  request: {
+    query: generateSingleItemQuery(GET_BANNER, BANNER_QUERY_PROPS),
+    variables: { id: sizeId },
+    skip: false
+  },
+  result: {
+    data: {
+      entityData: {
+        sizes,
+        id,
+        __typename: 'Banner'
+      }
+    }
+  }
+};
+
+const getCountMock = {
+  request: {
+    query: getCount(COUNT_CONTENT_HIERARCHIES),
+    variables: {
+      where: {
+        parentId: id,
+        childEntity: {
+          _ilike: `${PUBLISHED}_%`
+        }
+      }
+    }
+  },
+  result: {
+    data: {
+      entityData: {
+        sizes,
+        id,
+        __typename: 'Banner'
+      }
+    }
+  }
+};
+
+const mocks = [getEntityDataMock, getBannerMock, getCountMock];
+
+const otherProps = { id };
+const defaultProps = {
+  parent: {},
+  asPath: 'path',
+  action,
+  actionKey,
+  adunit: '',
+  baseAdunit: '',
+  sizeId,
+  propsToDisplay: [],
+  entity: '',
+  targetings: '',
+  sizes: '',
+  cardBannerIndex: null,
+  ...otherProps
+};
+
+const setup = (props = defaultProps) =>
+  render(
+    <MockedProvider mocks={mocks}>
+      <BannerRender {...props} />
+    </MockedProvider>
+  );
+
+describe('Banner render component', () => {
+  it('should render', () => {
+    const { asFragment } = setup();
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/tests/unit/src/components/Banner/__snapshots__/AdSlotRender.test.js.snap

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Banner render component AdSlot loading should change class and remove styles after loaded events 1`] = `
+<DocumentFragment>
+  <div
+    class="ad-slot ad-slot-loaded banner-sizeId"
+  >
+    <div
+      data-testid="adslot-test"
+      role="button"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Banner render component AdSlot loading should change class and remove styles after loaded events 2`] = `
+<DocumentFragment>
+  <div
+    class="ad-slot ad-slot-empty banner-sizeId"
+  >
+    <div
+      data-testid="adslot-test"
+      role="button"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Banner render component AdSlot loading should render AdSlot 1`] = `
+<DocumentFragment>
+  <style>
+    @media(min-width:320px){.banner-sizeId{min-height:100px;}@media(min-width:728px){.banner-sizeId{min-height:100px;}@media(min-width:970px){.banner-sizeId{min-height:250px;}
+  </style>
+  <div
+    class="ad-slot ad-slot-loading banner-sizeId"
+  >
+    <div
+      data-testid="adslot-test"
+      role="button"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Banner render component should not render AdSlot if shouldShowBanner=false but should render styles and wrapper 1`] = `
+<DocumentFragment>
+  <style>
+    @media(min-width:320px){.banner-sizeId{min-height:100px;}@media(min-width:728px){.banner-sizeId{min-height:100px;}@media(min-width:970px){.banner-sizeId{min-height:250px;}
+  </style>
+  <div
+    class="ad-slot ad-slot-loading banner-sizeId"
+  />
+</DocumentFragment>
+`;

package/tests/unit/src/components/Banner/__snapshots__/BannerRender.test.js.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Banner render component should render 1`] = `
+<DocumentFragment>
+  <style />
+  <div
+    class="ad-slot ad-slot-loading banner-sizeId"
+  />
+</DocumentFragment>
+`;

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

@@ -3,7 +3,8 @@ import { act, render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import Button from '../../../../src/components/Button';
 
-jest.mock('react-apollo', () => ({
+jest.mock('@apollo/client', () => ({
+  ...jest.requireActual('@apollo/client'),
   useApolloClient: jest.fn(() => ({ resetStore: () => null }))
 }));
 

package/tests/unit/src/components/Card/CardRender.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import '@testing-library/jest-dom/extend-expect';
-import { MockedProvider } from '@apollo/react-testing';
+import { MockedProvider } from '@apollo/client/testing';
 import { render, act } from '@testing-library/react';
 import {
   CARD_RENDER_ENTITY_DATA_MOCK,