@blaze-cms/react-page-builder 0.146.0-alpha.4 → 0.146.0-alpha.40

package/src/components/Video/providers/JWPlayer/JWPlayerProvider.js

@@ -1,10 +1,9 @@
-import React from 'react';
+import React, { useContext, useRef } from 'react';
 import PropTypes from 'prop-types';
 import ReactJWPlayer from 'react-jw-player';
 import { JW_PLAYER_TYPE_FILE, VIDEO_WRAPPER_CLASS_NAME } from '../../../../constants';
 import JWPlayerController from './JWPlayerController';
-
-const PlayerController = new JWPlayerController();
+import { VideoContext } from '../../VideoContext';
 
 const JWPlayerProvider = ({
   url,
@@ -17,15 +16,18 @@ const JWPlayerProvider = ({
   imageData,
   loop: repeat
 }) => {
+  const { emitEvent } = useContext(VideoContext);
+  const PlayerController = useRef(new JWPlayerController({ emitEvent }));
+
   const handleOnReady = () => {
     const jwPlayer = window.jwplayer(name);
     if (jwPlayer) {
-      PlayerController.setPlayer(jwPlayer);
+      PlayerController.current.setPlayer(jwPlayer);
     }
   };
 
   const getJWPlayerProps = () => {
-    const { events } = PlayerController;
+    const { events } = PlayerController.current;
 
     const props = {
       customProps: { repeat, controls, events },

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/constants/index.js

@@ -37,6 +37,7 @@ const ID = 'id';
 const LINK = 'link';
 const LOGOUT = 'logout';
 const GRAPH_QL_ERROR = 'GraphQL error: ';
+const PRIORITY_HIGH = 'high';
 const HOVER = 'hover';
 const MOUSE_ENTER = 'mouseenter';
 const MOUSE_LEAVE = 'mouseleave';
@@ -258,6 +259,7 @@ export {
   MIN_BANNER_HEIGHT,
   MAX_BANNER_HEIGHT,
   GRAPH_QL_ERROR,
+  PRIORITY_HIGH,
   HOVER,
   MOUSE_ENTER,
   MOUSE_LEAVE,

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/helpers/build-search-values-checkbox-select.js

@@ -18,6 +18,7 @@ const buildSearchValuesCheckboxSelect = (query, rangeFilters, checkboxFilters, s
       if (isQueryParamString) {
         if (rangeFilterProps.includes(queryParam)) {
           const [min, max] = query[queryParam].split('-');
+          if (min === 'NaN' || max === 'NaN') return;
           acc.values.push({
             range: {
               [queryParam]: {

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/src/index.js

@@ -5,6 +5,8 @@ export { componentMap, variantHandler, getClassModifiers } from './utils';
 export { default as components } from './components';
 export { default as variants } from './variants';
 export { default as LoadingComponent } from './components/Loading';
+export { default as Modal } from './components/ModalAdapter';
+export { default as ErrorMessage } from './components/ErrorMessage';
 export {
   getAction,
   generateSingleItemQuery,

package/src/variants/FloatingSideButton/index.js

@@ -0,0 +1,8 @@
+const floatingSideButton = {
+  getSettings: componentSettings => ({
+    ...componentSettings,
+    modifier: 'button--floating-side'
+  })
+};
+
+export default floatingSideButton;

package/src/variants/LiveBlogList/LiveBlogList.js

@@ -0,0 +1,75 @@
+import React, { useRef, useState, useEffect } from 'react';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import Button from '@blaze-react/button';
+import { FaPlus, FaMinus } from 'react-icons/fa';
+
+dayjs.extend(relativeTime);
+
+const LiveBlogList = props => {
+  const { children, date, published } = props;
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [shouldShowButton, setShouldShowButton] = useState(false);
+
+  const contentRef = useRef(null);
+
+  useEffect(
+    () => {
+      if (contentRef.current) {
+        const contentHeight = contentRef.current.scrollHeight;
+        if (contentHeight > 400) {
+          setShouldShowButton(true);
+        }
+      }
+    },
+    [children]
+  );
+
+  const toggleExpanded = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const usedDate = date || published;
+
+  let displayedDate = '';
+  if (usedDate) {
+    const diffInDays = dayjs().diff(dayjs(usedDate), 'day');
+    if (diffInDays < 1) {
+      displayedDate = dayjs(usedDate).fromNow();
+    } else if (diffInDays < 365) {
+      displayedDate = dayjs(usedDate).format('DD MMM');
+    } else {
+      displayedDate = dayjs(usedDate).format('DD MMM YYYY');
+    }
+  }
+
+  const isCollapsed = !isExpanded && shouldShowButton;
+
+  return (
+    <div className="live-blog-container">
+      {usedDate && <div className="live-blog-date">{displayedDate}</div>}
+
+      <div ref={contentRef} className={`live-blog-content ${isCollapsed ? 'collapsed' : ''}`}>
+        {children}
+      </div>
+
+      {shouldShowButton && (
+        <div className="live-blog-button-wrapper">
+          <Button className="live-blog-toggle" onClick={toggleExpanded} type="button">
+            {isExpanded ? (
+              <>
+                <FaMinus className="toggle-icon" /> Show Less
+              </>
+            ) : (
+              <>
+                <FaPlus className="toggle-icon" /> Show More
+              </>
+            )}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default LiveBlogList;

package/src/variants/LiveBlogList/index.js

@@ -0,0 +1,13 @@
+import dynamic from 'next/dynamic';
+
+const liveBlogList = {
+  VariantComponent: dynamic(() =>
+    import(/* webpackChunkName: "blazePbliveBlogList" */ './LiveBlogList')
+  ),
+  getSettings: componentSettings => ({
+    ...componentSettings,
+    modifier: 'liveBlogList'
+  })
+};
+
+export default liveBlogList;

package/src/variants/index.js

@@ -5,6 +5,8 @@ import longformRow from './LongformRow';
 import parallaxImageTextRight from './ParallaxImageTextRight';
 import thumbnailCarousel from './ThumbnailCarousel';
 import slideSummary from './SlideSummary';
+import floatingSideButton from './FloatingSideButton';
+import liveBlogList from './LiveBlogList';
 
 export default {
   heroImage,
@@ -13,5 +15,7 @@ export default {
   longformRow,
   parallaxImageTextRight,
   thumbnailCarousel,
-  slideSummary
+  slideSummary,
+  floatingSideButton,
+  liveBlogList
 };

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/DateTime/DateTime.test.js

@@ -4,9 +4,12 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
+import dayjs from 'dayjs';
 import DateTime from '../../../../../src/components/DateTime';
 
 describe('DateTime component', () => {
+  const customFormat = 'MM-DD-YYYY';
+
   it('renders null if both format and customFormat are not provided', () => {
     const { container } = render(<DateTime />);
     expect(container.firstChild).toBeNull();
@@ -86,14 +89,13 @@ describe('DateTime component', () => {
     ).toBeInTheDocument();
   });
 
-  it('renders correctly with customFormat', () => {
-    const customFormat = 'YYYY-MM-DD';
-    const { getByText } = render(<DateTime format="L" customFormat={customFormat} />);
-    expect(getByText(/\d{4}-\d{2}-\d{2}/)).toBeInTheDocument();
+  it('renders correctly with customFormat DD-YYYY-MM', () => {
+    const customDateFormat = 'DD-YYYY-MM';
+    const { getByText } = render(<DateTime format="L" customFormat={customDateFormat} />);
+    expect(getByText(/\d{2}-\d{4}-\d{2}/)).toBeInTheDocument();
   });
 
   it('renders correctly with customFormat and modifier', () => {
-    const customFormat = 'MM-DD-YYYY';
     const modifier = 'bold';
     const { getByText } = render(
       <DateTime format="L" customFormat={customFormat} modifier={modifier} />
@@ -102,4 +104,26 @@ describe('DateTime component', () => {
     expect(dateElement).toBeInTheDocument();
     expect(dateElement).toHaveClass('bold');
   });
+
+  it('renders with prefix and suffix', () => {
+    const formattedDate = dayjs().format(customFormat);
+    const prefix = 'Start: ';
+    const suffix = ' End';
+
+    const { getByText } = render(
+      <DateTime format="L" customFormat={customFormat} prefix={prefix} suffix={suffix} />
+    );
+
+    expect(getByText(`${prefix}${formattedDate}${suffix}`)).toBeInTheDocument();
+  });
+
+  it('renders only the date when prefix and suffix are not provided', () => {
+    const formattedDate = dayjs().format(customFormat);
+
+    const { getByText, queryByText } = render(<DateTime format="L" customFormat={customFormat} />);
+
+    expect(getByText(formattedDate)).toBeInTheDocument();
+    expect(queryByText('Start: ')).not.toBeInTheDocument();
+    expect(queryByText(' End')).not.toBeInTheDocument();
+  });
 });

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

@@ -59,7 +59,7 @@ exports[`GlobalLightbox component should match snapshot 1`] = `
                     class="slider__counter slider__counter--gallery"
                     data-testid="image-counter"
                   >
-                    1 of 1
+                    1 / 1
                   </div>
                 </div>
                 <div

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',