@blaze-cms/react-page-builder 0.146.0-alpha.2 → 0.146.0-alpha.21

package/src/components/Video/providers/YouTube/YoutubeEmbeded.js

@@ -1,8 +1,12 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useInView } from '@blaze-react/utils/lib/customHooks';
 import { IN_VIEW_CONFIG } from '../../../../constants';
 import { getPosterUrl, YT_HQ_FORMAT, YT_IMAGE_URL } from './helpers';
+import { VideoContext } from '../../VideoContext';
+import { EVENT_ACTIONS } from '../../constants';
+
+const SCRIPT_ID = 'youtube-iframe-api';
 
 const YoutubeEmbeded = ({
   autoplay,
@@ -23,6 +27,9 @@ const YoutubeEmbeded = ({
   placeholderOnly,
   imageData
 }) => {
+  const ref = useRef(null);
+  const playerRef = useRef(null);
+  const { emitEvent } = useContext(VideoContext);
   const [isIntersecting, outerRef] = useInView(IN_VIEW_CONFIG);
   const [preconnected, setPreconnected] = useState(false);
   const [renderIframe, setRenderIframe] = useState(!!autoplay);
@@ -43,10 +50,64 @@ const YoutubeEmbeded = ({
     webp
   });
   const mutedValue = muted ? '&mute=1' : '';
-  const iframeSrc = !playlist
+  let iframeSrc = !playlist
     ? `${ytUrl}/embed/${encodedId}?autoplay=1${mutedValue}${paramsImp}`
     : `${ytUrl}/embed/videoseries?autoplay=1${mutedValue}&list=${encodedId}${paramsImp}`;
+  if (emitEvent) {
+    iframeSrc += `&enablejsapi=1`;
+  }
+
   const parsedWrapperClassname = `yt-facade ${renderIframe ? 'yt-activated' : ''}`;
+  const iframeId = `yt-iframe-${videoId}`;
+
+  useEffect(
+    () => {
+      if (!emitEvent || !renderIframe) return;
+
+      if (!document.getElementById(SCRIPT_ID)) {
+        // if script not already loaded
+        const tag = document.createElement('script');
+        tag.id = SCRIPT_ID;
+        tag.src = 'https://www.youtube.com/iframe_api';
+        const firstScriptTag = document.getElementsByTagName('script')[0];
+        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+      }
+
+      const onStateChange = event => {
+        let action = '';
+        if (event.data === window.YT.PlayerState.ENDED) {
+          action = EVENT_ACTIONS.ENDED;
+        } else if (event.data === window.YT.PlayerState.PAUSED) {
+          action = EVENT_ACTIONS.PAUSED;
+        } else if (event.data === window.YT.PlayerState.PLAYING) {
+          action = EVENT_ACTIONS.PLAYING;
+        }
+
+        emitEvent({ action, videoId });
+      };
+
+      if (window.YT) {
+        // if script already loaded then attach player
+        window.YT.ready(() => {
+          playerRef.current = new window.YT.Player(iframeId, {
+            events: {
+              onStateChange
+            }
+          });
+        });
+      } else {
+        // called on script load
+        window.onYouTubeIframeAPIReady = () => {
+          playerRef.current = new window.YT.Player(ref.current, {
+            events: {
+              onStateChange
+            }
+          });
+        };
+      }
+    },
+    [emitEvent, iframeId, renderIframe, videoId]
+  );
 
   useEffect(
     () => {
@@ -114,6 +175,8 @@ const YoutubeEmbeded = ({
         </div>
         {renderIframe && (
           <iframe
+            ref={ref}
+            id={iframeId}
             className={iframeClass}
             title={videoTitle}
             allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"

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

@@ -32,16 +32,14 @@ const builFilterObject = ({ queryKey, value, filters, isRange, isInQuery }) => {
 
 const buildFiltersQuery = ({
   shouldAddFilters,
-
   filterBy,
   filterByProperty,
   rangeValues,
   queryKeys,
   query
 }) => {
-  if (!shouldAddFilters) return [];
   const mustFilters = [];
-  if (query) {
+  if (shouldAddFilters && query) {
     Object.keys(query).forEach(queryKey => {
       if (QUERY_KEYS_TO_IGNORE.includes(queryKey)) return;
       if (!queryKey || !query[queryKey]) return;

package/src/{components/Card/helpers → helpers}/filter-query-setup.js

@@ -1,6 +1,8 @@
 import { getStringTypeProps } from '@blaze-cms/utils/src/helpers';
-import { getGenericRenderVariables, buildRawQueryBase, buildSetFilters } from '../../../helpers';
-import { DEFAULT_LIMIT } from '../../../constants';
+import getGenericRenderVariables from './get-generic-render-variables';
+import buildRawQueryBase from './build-raw-query-base';
+import buildSetFilters from './build-set-filters';
+import { DEFAULT_LIMIT } from '../constants';
 
 const filterQuerySetup = ({
   getEntitySchemas,
@@ -13,7 +15,7 @@ const filterQuerySetup = ({
   itemsToDisplay,
   entitySameAsCurrentItemEntity,
   entitySchema,
-  useRandomSort
+  useRandomSort = false
 }) => {
   const stringProps = getStringTypeProps(entity, filterEntityRelations, getEntitySchemas);
   const filterValues =

package/src/{components/Card/helpers → helpers}/filters-setup.js

@@ -1,5 +1,7 @@
-import { buildQueryFields, getInheritedFilters, getQueryProps } from '../../../helpers';
-import { getSearchPublishedContent } from '../../../application/query';
+import buildQueryFields from './build-query-fields';
+import getInheritedFilters from './get-inherited-filters';
+import getQueryProps from './get-query-props';
+import { getSearchPublishedContent } from '../application/query';
 
 const filtersSetup = ({
   entityFields,
@@ -16,6 +18,7 @@ const filtersSetup = ({
   const fields = buildQueryFields(entityFields, entityTypes, isFull);
   const action = getSearchPublishedContent(fields);
   const inheritedFilters = getInheritedFilters(filterBy, filterByProperty);
+
   const entitySameAsCurrentItemEntity = entities.includes(itemEntityUpdated);
   const { relations: filterEntityRelations = [] } = filterEntitySchema;
   const queryProps = getQueryProps(inheritedFilters, currentSchema, filterEntitySchema);

package/src/helpers/index.js

@@ -53,5 +53,11 @@ export { default as appendImages } from './append-images';
 export { default as parseTextBlock } from './parse-TextBlock';
 export { default as processDataSummaryValue } from './process-data-summary-value';
 export { default as buildQueryKey } from './build-query-key';
+export { default as filterQuerySetup } from './filter-query-setup';
+export { default as filtersSetup } from './filters-setup';
+export { default as getUpdatedItemsToDisplay } from './get-updated-items-to-display';
+export { default as getUpdatedSortProperties } from './get-updated-sort-properties';
+export { default as shouldReturn } from './should-return';
+export { default as shouldSkipSingleQuery } from './should-skip-single-query';
 export { default as buildRawQueryStringified } from './build-raw-query-stringified';
 export { default as buildFiltersQuery } from './build-filters-query';

package/src/{components/Card/helpers → helpers}/should-skip-single-query.js

@@ -1,4 +1,4 @@
-import { ID } from '../../../constants';
+import { ID } from '../constants';
 
 const shouldSkipSingleQuery = (loading, getAction, queryProps) =>
   loading || !getAction || queryProps === ID;

package/src/hooks/index.js

@@ -7,3 +7,5 @@ export { default as useGetSingleEntitySchema } from './use-get-single-entity-sch
 export { default as useCheckMobileScreen } from './use-check-mobile-screen';
 export { default as useBannerInsertion } from './use-banner-insertion';
 export { default as useAppSyncEventHook } from './use-app-sync-event-hook';
+export { default as usePortal } from './use-portal';
+export { default as useFilterAggregationValues } from './use-filter-aggregation-values';

package/src/hooks/use-filter-aggregation-values.js

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+
+const useFilterAggregationValues = ({ data, filterValues }) => {
+  const [stateValues, setStateValues] = useState(data);
+  const [prop, setProp] = useState('');
+
+  useEffect(
+    () => {
+      if (!stateValues) return setStateValues(data);
+
+      const lastChangedFilter = filterValues?.[prop];
+
+      if (!data) return;
+
+      const newOptions = data[prop];
+      const currentOptions = stateValues?.[prop];
+
+      if (lastChangedFilter === null || lastChangedFilter === '') {
+        return setStateValues(prevState => ({
+          ...data,
+          [prop]: newOptions
+        }));
+      }
+
+      setStateValues(prevState => ({
+        ...data,
+        [prop]: currentOptions
+      }));
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [data, prop, filterValues]
+  );
+
+  return [stateValues, setStateValues, setProp, prop];
+};
+
+export default useFilterAggregationValues;

package/src/hooks/use-portal.js

@@ -0,0 +1,18 @@
+import React, { useEffect } from 'react';
+
+function usePortal() {
+  const rootElemRef = React.useRef(document.createElement('div'));
+
+  useEffect(() => {
+    document.body.appendChild(rootElemRef.current);
+
+    const element = rootElemRef.current;
+    return function removeElement() {
+      element.remove();
+    };
+  }, []);
+
+  return rootElemRef.current;
+}
+
+export default usePortal;

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

@@ -2,8 +2,9 @@
  * @jest-environment jsdom
  */
 import React from 'react';
-import { render as _render, act, waitFor } from '@testing-library/react';
+import { render as _render, act, waitFor, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
+import { setEnvs, deleteEnvs } from '@blaze-cms/tools/test-helpers/test-files/test-env';
 import Card from '../../../../../src/components/Card/Card';
 import { pageBuilderComponentsMocks } from './mockData';
 
@@ -211,4 +212,18 @@ describe('Card component', () => {
     });
     expect(getByTestId('full-card')).toBeInTheDocument();
   });
+
+  it('should render link wrapper', async () => {
+    const envs = {
+      BLAZE_PB_ADD_CLICK_TO_CARDS: 'true'
+    };
+    setEnvs(envs);
+    const { asFragment } = await render(Card, {
+      ...componentProps,
+      pageBuilderComponents: pageBuilderComponentsMocks
+    });
+    expect(screen.getByLabelText(componentProps.name)).toBeInTheDocument();
+    expect(asFragment()).toMatchSnapshot();
+    deleteEnvs(envs);
+  });
 });

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

@@ -303,6 +303,89 @@ exports[`Card component should render customPreheader and alternativeHeadline in
 </DocumentFragment>
 `;
 
+exports[`Card component should render link wrapper 1`] = `
+<DocumentFragment>
+  <a
+    aria-label="mock name"
+    class="card card--portrait"
+    href="/mockurl"
+  >
+    <div
+      class="card__image card__image--portrait"
+    >
+      <div
+        class="card__image-link"
+        gtmid=""
+      >
+        <img
+          alt="test-altText"
+          src="test-url"
+        />
+      </div>
+    </div>
+    <div
+      class="card__content-wrapper card__content-wrapper--portrait "
+    >
+      <div
+        class="card__content card__content--portrait"
+      >
+        <div
+          class="badge badge--label"
+          gtmid=""
+          href="published-url"
+        >
+          category-name
+        </div>
+        <div
+          class="card__title card__title--portrait "
+        >
+          <div
+            gtmid=""
+            title="mock name"
+          >
+            mock name
+          </div>
+        </div>
+        <div
+          class="card__item card__item--full"
+          data-testid="full-card"
+        />
+        <div
+          class="card__details card__details--portrait"
+        >
+          <span
+            class=""
+            data-testid="some%20description"
+          >
+            some description
+          </span>
+          <span
+            class=""
+          >
+            extra props
+          </span>
+        </div>
+      </div>
+      <div
+        class="card__child-content"
+      >
+        <div
+          class="child_1"
+        >
+          some stuff
+        </div>
+        <div
+          class="child_2"
+          modifier="child-modi"
+        >
+          another child
+        </div>
+      </div>
+    </div>
+  </a>
+</DocumentFragment>
+`;
+
 exports[`Card component should render without throwing an error and match snapshot 1`] = `
 <DocumentFragment>
   <div

package/tests/unit/src/components/Card/helpers/get-updated-items-to-display.test.js

@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom/extend-expect';
-import getUpdatedItemsToDisplay from '../../../../../../src/components/Card/helpers/get-updated-items-to-display';
+import getUpdatedItemsToDisplay from '../../../../../../src/helpers/get-updated-items-to-display';
 
 const mockedProps = {
   itemsToDisplay: [

package/tests/unit/src/components/Image/Lightbox/Lightbox.test.js

@@ -10,6 +10,10 @@ jest.mock('../../../../../../src/components/Banner', () =>
   jest.fn().mockImplementation(() => <span>Banner</span>)
 );
 
+jest.mock('../../../../../../src/components/ModalAdapter', () =>
+  jest.fn().mockImplementation(({ children }) => children)
+);
+
 const mockProps = {
   imageUrl: 'some-url',
   altTxt: 'atl text',

package/tests/unit/src/components/Image/Lightbox/__snapshots__/Lightbox.test.js.snap

@@ -3,48 +3,13 @@
 exports[`LightBox component should render without throwing an error and match snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="overlay"
-  />
-  <div
-    class=" modal modal--show modal--full-screen"
+    class="row row--display-row"
   >
     <div
-      class="modal__header"
-    >
-      <div
-        class="modal__title"
-      />
-      <div
-        class="modal__close"
-        role="button"
-      >
-        <i
-          class="material-icons"
-        >
-          close
-        </i>
-      </div>
-    </div>
-    <div
-      class="modal__content"
-    >
-      <div
-        class="row row--display-row"
-      >
-        <div
-          class="column column--two-thirds"
-        >
-          <div
-            class="image"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      class="modal__footer"
+      class="column column--two-thirds"
     >
       <div
-        class="modal__button"
+        class="image"
       />
     </div>
   </div>

package/tests/unit/src/components/MenuItem/MenuEntitiesItem.test.js

@@ -0,0 +1,23 @@
+/**
+ * @jest-environment jsdom
+ */
+import '@testing-library/jest-dom/extend-expect';
+import { render } from '@testing-library/react';
+import MenuEntitiesItem from '../../../../../src/components/MenuItem/MenuEntitiesItem';
+import { MOCKED_MENUITEMS_PROPS } from './mocks';
+
+jest.mock('@apollo/client', () => ({
+  ...jest.requireActual('@apollo/client'),
+  useQuery: jest.fn(({ data, loading, error, fetchMore }) => ({ data, loading, error, fetchMore }))
+}));
+
+jest.mock('@blaze-cms/utils-handlebars', () => ({
+  useStringTemplate: jest.fn((parent, [title]) => ({ loading: false, data: [title] }))
+}));
+
+describe('MenuEntitiesItem component', () => {
+  it('should render based on listData received', async () => {
+    const { asFragment } = await render(MenuEntitiesItem, MOCKED_MENUITEMS_PROPS);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -6,25 +6,44 @@ import { render } from '@blaze-cms/tools/test-helpers/test-functions';
 import '@testing-library/jest-dom/extend-expect';
 import MenuItem from '../../../../../src/components/MenuItem';
 
-const props = {
+jest.mock('@apollo/client', () => ({
+  ...jest.requireActual('@apollo/client'),
+  useQuery: jest.fn(({ data, loading, error, fetchMore }) => ({ data, loading, error, fetchMore }))
+}));
+
+jest.mock('@blaze-cms/utils-handlebars', () => ({
+  useStringTemplate: jest.fn((parent, [title]) => ({ loading: false, data: [title] }))
+}));
+
+const componentProps = {
+  id: 'id',
+  name: 'mock name',
   eventType: 'hover',
-  text: 'Item 1',
+  url: '/search?category.name={{currentParent.name}}',
+  text: 'Category: {{currentParent.name}}',
+  entity: 'page',
+  parent: {
+    itemEntity: 'page',
+    itemId: 'item-id'
+  },
+  category: {
+    publishedListingPage: {
+      url: 'published-url'
+    },
+    name: 'Category name'
+  },
   modifier: 'menu-item-mod',
   children: [
     <div className="child_1" key="1" component={{ type: 'menuitem' }}>
-      some child
+      menu child
     </div>
-  ]
+  ],
+  displayCategory: true
 };
 
 describe('MenuItem component', () => {
-  it('should render without throwing an error and match snapshot', () => {
-    const { asFragment } = render(MenuItem, props);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render link if url is passed', () => {
-    const { asFragment } = render(MenuItem, { ...props, url: '/somewhere' });
+  it('should render a MenuItem based on passed parameters', async () => {
+    const { asFragment } = await render(MenuItem, componentProps);
     expect(asFragment()).toMatchSnapshot();
   });
 });

package/tests/unit/src/components/MenuItem/MenuItemRender.test.js

@@ -0,0 +1,55 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import MenuRender from '../../../../../src/components/MenuItem/MenuItemRender';
+
+jest.mock('@blaze-cms/utils-handlebars', () => ({
+  useStringTemplate: jest.fn((parent, [title]) => ({ loadig: false, data: [title] }))
+}));
+
+describe('MenuRender component', () => {
+  it('renders menu item with link when URL is provided', () => {
+    const { getByText } = render(<MenuRender eventType="click" text="Home" url="/home" />);
+    const linkElement = getByText('Home');
+    expect(linkElement).toBeInTheDocument();
+    expect(linkElement.tagName).toBe('A');
+    expect(linkElement.getAttribute('href')).toBe('/home');
+  });
+
+  it('renders menu item without link when URL is not provided', () => {
+    const { getByText } = render(<MenuRender eventType="click" text="About" />);
+    const spanElement = getByText('About');
+    expect(spanElement).toBeInTheDocument();
+    expect(spanElement.tagName).toBe('SPAN');
+  });
+
+  it('toggles display of children on mouse enter and leave events', () => {
+    const { getByText, getByTestId } = render(
+      <MenuRender eventType="hover" text="Parent">
+        <div data-testid="child">Child</div>
+      </MenuRender>
+    );
+    const parentElement = getByText('Parent');
+    const childElement = getByTestId('child');
+
+    fireEvent.mouseEnter(parentElement);
+    expect(childElement).toBeInTheDocument();
+  });
+
+  it('toggles display of children on click event when URL is not provided', () => {
+    const { getByText, getByTestId } = render(
+      <MenuRender eventType="click" text="Parent">
+        <div data-testid="child">Child</div>
+      </MenuRender>
+    );
+    const parentElement = getByText('Parent');
+    const childElement = getByTestId('child');
+
+    fireEvent.click(parentElement);
+    expect(childElement).toBeInTheDocument();
+  });
+});

package/tests/unit/src/components/MenuItem/__snapshots__/MenuEntitiesItem.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MenuEntitiesItem component should render based on listData received 1`] = `<DocumentFragment />`;

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`MenuItem component should render link if url is passed 1`] = `
+exports[`MenuItem component should render a MenuItem based on passed parameters 1`] = `
 <DocumentFragment>
   <li
     class="menu-item-mod"
@@ -9,10 +9,10 @@ exports[`MenuItem component should render link if url is passed 1`] = `
       class="menu--item--link"
     >
       <a
-        aria-label="Item 1"
-        href="/somewhere"
+        aria-label="Category: {{currentParent.name}}"
+        href="/search?category.name={{url_encode currentParent.name}}"
       >
-        Item 1
+        Category: {{currentParent.name}}
       </a>
       <i
         class="menu--item--link--icon"
@@ -40,53 +40,7 @@ exports[`MenuItem component should render link if url is passed 1`] = `
         class="child_1"
         component="[object Object]"
       >
-        some child
-      </div>
-    </div>
-  </li>
-</DocumentFragment>
-`;
-
-exports[`MenuItem component should render without throwing an error and match snapshot 1`] = `
-<DocumentFragment>
-  <li
-    class="menu-item-mod"
-  >
-    <div
-      class="menu--item--link"
-    >
-      <span
-        role="button"
-      >
-        Item 1
-      </span>
-      <i
-        class="menu--item--link--icon"
-        role="button"
-      >
-        <svg
-          fill="currentColor"
-          height="1em"
-          stroke="currentColor"
-          stroke-width="0"
-          viewBox="0 0 448 512"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"
-          />
-        </svg>
-      </i>
-    </div>
-    <div
-      class="menu--item-children hidden"
-    >
-      <div
-        class="child_1"
-        component="[object Object]"
-      >
-        some child
+        menu child
       </div>
     </div>
   </li>