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

package/src/components/MenuItem/MenuItem.js

@@ -1,76 +1,33 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
-import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN } from '../../constants';
-import { hasChildren } from '../../helpers';
-import BlazeLink from '../BlazeLink';
-import MenuContext from '../Menu/MenuContext';
+import MenuItemRender from './MenuItemRender';
+import MenuEntitiesItem from './MenuEntitiesItem';
 
-const MenuItem = ({ children, eventType, text, modifier, url }) => {
-  const [displayChildren, setDisplayChildren] = useState(false);
-  const { showMobileMenu } = useContext(MenuContext);
+const MenuItem = ({ entities, parent, ...props }) => {
+  const hasEntities = entities && entities.length;
 
-  useEffect(
-    () => {
-      if (!showMobileMenu) setDisplayChildren(false);
-    },
-    [showMobileMenu]
-  );
+  if (!hasEntities) return <MenuItemRender parent={parent} {...props} />;
 
-  const isHoverEvent = eventType === HOVER;
-  const childrenDisplayClass = displayChildren ? '' : HIDDEN;
-
-  const handleItemEvent = ({ type }) => {
-    if (isHoverEvent) {
-      if (type === MOUSE_ENTER) {
-        setDisplayChildren(true);
-      }
-      if (type === MOUSE_LEAVE) {
-        setDisplayChildren(false);
-      }
-    }
-  };
-  const hasValidChildren = hasChildren(children);
-
-  return (
-    <li className={modifier} onMouseEnter={handleItemEvent} onMouseLeave={handleItemEvent}>
-      <div className="menu--item--link">
-        {url ? (
-          <BlazeLink href={url}>{text}</BlazeLink>
-        ) : (
-          <span role="button" onClick={handleItemEvent}>
-            {text}
-          </span>
-        )}
-        {hasValidChildren && (
-          <i
-            role="button"
-            className="menu--item--link--icon"
-            onClick={() => setDisplayChildren(!displayChildren)}>
-            {displayChildren ? <FaChevronUp /> : <FaChevronDown />}
-          </i>
-        )}
-      </div>
-      {hasValidChildren && (
-        <div className={`menu--item-children ${childrenDisplayClass}`}>{children}</div>
-      )}
-    </li>
-  );
+  return <MenuEntitiesItem entities={entities} parent={parent} {...props} />;
 };
 
 MenuItem.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  eventType: PropTypes.string.isRequired,
   modifier: PropTypes.string,
+  parent: PropTypes.object,
   text: PropTypes.string,
   url: PropTypes.string,
-  eventType: PropTypes.string.isRequired,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
+  entities: PropTypes.array
 };
 
 MenuItem.defaultProps = {
-  url: '',
+  children: null,
   modifier: '',
+  parent: {},
   text: '',
-  children: null
+  url: '',
+  entities: []
 };
 
 export default MenuItem;

package/src/components/MenuItem/MenuItemRender.js

@@ -0,0 +1,92 @@
+import React, { useState, useContext, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
+import { useStringTemplate } from '@blaze-cms/utils-handlebars';
+import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN } from '../../constants';
+import { hasChildren } from '../../helpers';
+import BlazeLink from '../BlazeLink';
+import MenuContext from '../Menu/MenuContext';
+import { injectHelperIntoTemplate } from './helpers';
+
+const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) => {
+  const [displayChildren, setDisplayChildren] = useState(false);
+  const { showMobileMenu } = useContext(MenuContext);
+  const {
+    loading: loadingText,
+    data: [textToUse]
+  } = useStringTemplate(parent, [text]);
+
+  const {
+    loading: loadingUrl,
+    data: [urlToUse]
+  } = useStringTemplate(parent, [injectHelperIntoTemplate(url, 'url_encode')]);
+
+  useEffect(
+    () => {
+      if (!showMobileMenu) setDisplayChildren(false);
+    },
+    [showMobileMenu]
+  );
+
+  if (loadingUrl || loadingText) return '';
+
+  const isHoverEvent = eventType === HOVER;
+  const childrenDisplayClass = displayChildren ? '' : HIDDEN;
+
+  const handleItemEvent = ({ type }) => {
+    if (isHoverEvent) {
+      if (type === MOUSE_ENTER) {
+        setDisplayChildren(true);
+      }
+      if (type === MOUSE_LEAVE) {
+        setDisplayChildren(false);
+      }
+    }
+  };
+  const hasValidChildren = hasChildren(children);
+
+  return (
+    <li className={modifier} onMouseEnter={handleItemEvent} onMouseLeave={handleItemEvent}>
+      <div className="menu--item--link">
+        {urlToUse ? (
+          <BlazeLink href={urlToUse}>{textToUse}</BlazeLink>
+        ) : (
+          <span role="button" onClick={handleItemEvent}>
+            {textToUse}
+          </span>
+        )}
+        {hasValidChildren && (
+          <i
+            role="button"
+            className="menu--item--link--icon"
+            onClick={() => setDisplayChildren(!displayChildren)}>
+            {displayChildren ? <FaChevronUp /> : <FaChevronDown />}
+          </i>
+        )}
+      </div>
+
+      {hasValidChildren && (
+        <div className={`menu--item-children ${childrenDisplayClass}`}>{children}</div>
+      )}
+    </li>
+  );
+};
+
+MenuItemRender.propTypes = {
+  modifier: PropTypes.string,
+  text: PropTypes.string,
+  url: PropTypes.string,
+  eventType: PropTypes.string.isRequired,
+  parent: PropTypes.object,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
+};
+
+MenuItemRender.defaultProps = {
+  url: '',
+  modifier: '',
+  text: '',
+  children: null,
+  parent: {}
+};
+
+export default MenuItemRender;

package/src/components/MenuItem/helpers/index.js

@@ -0,0 +1,3 @@
+import injectHelperIntoTemplate from './inject-helper-into-template';
+
+export { injectHelperIntoTemplate };

package/src/components/MenuItem/helpers/inject-helper-into-template.js

@@ -0,0 +1,11 @@
+const injectHelperIntoTemplate = (template, helper) => {
+  if (!helper || !template) return template;
+
+  let result = template.replace(/{{{([^{}]+)}}}/g, `{{{${helper} $1}}}`);
+
+  result = result.replace(/{{([^{}]+)}}(?!})/g, `{{${helper} $1}}`);
+
+  return result;
+};
+
+export default injectHelperIntoTemplate;

package/src/components/Modal/Modal.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import BlazeModal from '@blaze-react/modal';
+import BlazeModal from '../ModalAdapter';
 import { renderChildren, updateChildrensParent, hasChildren } from '../../helpers';
 
 const Modal = ({ children, elementTitle, onClose, ...otherProps }) => {

package/src/components/ModalAdapter/ModalAdapter.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import Modal from '@blaze-react/modal';
+import ReactDOM from 'react-dom';
+import { usePortal } from '../../hooks';
+
+const ModalAdapter = ({ ...props }) => {
+  const target = usePortal();
+
+  return ReactDOM.createPortal(<Modal {...props} />, target);
+};
+
+export default ModalAdapter;

package/src/components/ModalAdapter/index.js

@@ -0,0 +1,3 @@
+import ModalAdapter from './ModalAdapter';
+
+export default ModalAdapter;

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

@@ -3,17 +3,17 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import debounce from 'lodash.debounce';
 import FiltersList from './FiltersList';
-import { isDeviceDesktop, getResponsiveFilterClassnames, buildUrlQuery } from '../helpers';
-
 import CloseMobileForm from './CloseMobileForm';
 import ResetDesktopForm from './ResetDesktopForm';
 import MobileFormToolbar from './MobileFormToolbar';
+import { useFilterAggregationValues } from '../../../hooks';
+import { isDeviceDesktop, getResponsiveFilterClassnames, buildUrlQuery } from '../helpers';
 import { SEARCH, REFINE, MORE_FILTERS_CLASSES } from '../constants';
 
 const SearchFilter = ({
   searchFilterRef,
   listComponentName,
-  data,
+  data: filterData,
   filters,
   hasUrl,
   entity,
@@ -26,11 +26,17 @@ const SearchFilter = ({
   groupAfterMobile,
   filterValues,
   setAppliedFilters,
+  mobileRefineButtonText,
   query
 }) => {
   const [moreFiltersMobileCollapsed, setMoreFiltersMobileCollapsed] = useState(true);
   const [moreFiltersDesktopCollapsed, setMoreFiltersDesktopCollapsed] = useState(true);
 
+  const [data, setStateValues, setSelectProp] = useFilterAggregationValues({
+    data: filterData,
+    filterValues
+  });
+
   const doSubmit = newValues => {
     const newQuery = filterValues
       ? buildUrlQuery(newValues, filters, listComponentName, query)
@@ -74,6 +80,8 @@ const SearchFilter = ({
   };
 
   const updateFilterValues = (newValues, shouldSubmit) => {
+    const [lastChangedFilter] = Object.keys(newValues);
+    setSelectProp(lastChangedFilter);
     setAppliedFilters({ newValues, shouldSearch: shouldSubmit, type: 'update' });
   };
 
@@ -89,6 +97,7 @@ const SearchFilter = ({
         onSubmit={e => {
           e.preventDefault();
           doSubmit(filterValues);
+          setStateValues(filterData);
         }}>
         {displaySearchFilter && (
           <CloseMobileForm handleClose={() => setDisplaySearchFilter(false)} />
@@ -216,7 +225,7 @@ const SearchFilter = ({
             data-testid="refine-mobile"
             aria-label="Toggle Search Filter">
             <div role="button" onClick={() => setDisplaySearchFilter(true)}>
-              {REFINE}
+              {mobileRefineButtonText || REFINE}
             </div>
           </div>
         )}
@@ -240,10 +249,12 @@ SearchFilter.propTypes = {
   filterValues: PropTypes.object.isRequired,
   setAppliedFilters: PropTypes.func.isRequired,
   listComponentName: PropTypes.string,
-  query: PropTypes.object
+  query: PropTypes.object,
+  mobileRefineButtonText: PropTypes.string
 };
 
 SearchFilter.defaultProps = {
+  mobileRefineButtonText: '',
   listComponentName: '',
   query: {}
 };

package/src/components/SearchFilter/SearchFilterContainer.js

@@ -11,7 +11,8 @@ import {
   buildNewUrl,
   getFilterValues,
   getFilterRangesAndCheckboxesValues,
-  getUpdatedFilterBy
+  getUpdatedFilterBy,
+  buildListNameQuery
 } from './helpers';
 import {
   getEntityData,
@@ -25,23 +26,6 @@ import { SCROLL_OFFSET } from '../../constants';
 import searchFilterReducer from './searchFilterReducer';
 import { useGetEntitySchemasAsObj } from '../../hooks';
 
-const getFiltersUrlQuery = (query, listName) => {
-  if (!listName) return query;
-  const updatedQuery = {};
-  const listKey = `pb[${listName}]`;
-  Object.keys(query).forEach(queryKey => {
-    const isListKey = queryKey.indexOf(`${listName}`) !== -1;
-    if (!isListKey) return;
-    const decodedQueryValue = Array.isArray(query[queryKey])
-      ? query[queryKey].map(value => decodeURIComponent(value))
-      : decodeURIComponent(query[queryKey]);
-    const strippedKey = queryKey.substring(listKey.length + 1, queryKey.length - 1);
-    if (isListKey) updatedQuery[strippedKey] = decodedQueryValue;
-  });
-
-  return updatedQuery;
-};
-
 const SearchFilterContainer = ({
   entity,
   url,
@@ -54,7 +38,8 @@ const SearchFilterContainer = ({
   filterByProperty,
   shouldAddFilters,
   listComponentName,
-  parent
+  parent,
+  mobileRefineButtonText
 }) => {
   const { isPreview } = useContext(MainContext);
   const router = useRouter();
@@ -65,15 +50,26 @@ const SearchFilterContainer = ({
   const [urlPath, setUrlPath] = useState(asPath); // used as asPath can take too long to update
   const [filterValues, dispatch] = useReducer(searchFilterReducer, null);
   const { url: currentUrl, query } = parseUrl(urlPath);
-  const updatedQuery = getFiltersUrlQuery(query, listComponentName);
+  const updatedQuery = buildListNameQuery(query, listComponentName);
   const { itemId: parentId, itemEntity: parentEntity } = parent;
 
   useEffect(
     () => {
-      if (asPath) setUrlPath(asPath);
+      const { query: newQuery } = parseUrl(asPath);
+      const updatedNewQuery = buildListNameQuery(newQuery, listComponentName);
+      const newValues = getFilterValues({}, filters, updatedNewQuery);
+      if (newValues)
+        dispatch({
+          newValues,
+          shouldSearch: false,
+          type: 'update'
+        });
+      setUrlPath(asPath);
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [asPath]
   );
+
   const { data: mainSchemas = {}, loading: schemasLoading } = useGetEntitySchemasAsObj([
     parentEntity,
     entity
@@ -186,11 +182,13 @@ const SearchFilterContainer = ({
       setDisplaySearchFilter={setDisplaySearchFilter}
       groupAfterMobile={groupAfterMobile}
       groupAfterDesktop={groupAfterDesktop}
+      mobileRefineButtonText={mobileRefineButtonText}
     />
   );
 };
 
 SearchFilterContainer.propTypes = {
+  mobileRefineButtonText: PropTypes.string,
   entity: PropTypes.string,
   url: PropTypes.string,
   filters: PropTypes.array,
@@ -216,7 +214,8 @@ SearchFilterContainer.defaultProps = {
   filterByProperty: [],
   shouldAddFilters: false,
   listComponentName: '',
-  parent: {}
+  parent: {},
+  mobileRefineButtonText: ''
 };
 
 export default withTitle(SearchFilterContainer);

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

@@ -17,6 +17,7 @@ const SelectFilter = ({
   const filterValue = filterValues[prop] || '';
   const disabledOptions = [];
   const { buckets = [] } = data[prop] || {};
+
   const options = buckets
     .map(({ key, doc_count: count }) => {
       if (!count) disabledOptions.push(key);
@@ -48,6 +49,7 @@ const SelectFilter = ({
         onChange={({ value }) => {
           let valueToUse = value;
           if (value === defaultTextValue) valueToUse = '';
+
           updateFilterValues({ [prop]: valueToUse }, shouldSearch);
         }}
         disabled={disabledOptions}

package/src/components/SearchFilter/helpers/build-list-name-query.js

@@ -0,0 +1,18 @@
+const buildListNameQuery = (query, listName) => {
+  if (!listName) return query;
+  const updatedQuery = {};
+  const listKey = `pb[${listName}]`;
+  Object.keys(query).forEach(queryKey => {
+    const isListKey = queryKey.indexOf(`${listName}`) !== -1;
+    if (!isListKey) return;
+    const decodedQueryValue = Array.isArray(query[queryKey])
+      ? query[queryKey].map(value => decodeURIComponent(value))
+      : decodeURIComponent(query[queryKey]);
+    const strippedKey = queryKey.substring(listKey.length + 1, queryKey.length - 1);
+    if (isListKey) updatedQuery[strippedKey] = decodedQueryValue;
+  });
+
+  return updatedQuery;
+};
+
+export default buildListNameQuery;

package/src/components/SearchFilter/helpers/decode-encode.js

@@ -1,5 +1,4 @@
 const decodeValue = value => decodeURIComponent(value);
-
 const encodeValue = value => encodeURIComponent(value);
 
 export { decodeValue, encodeValue };

package/src/components/SearchFilter/helpers/index.js

@@ -1,3 +1,4 @@
+import buildListNameQuery from './build-list-name-query';
 import buildNewUrl from './build-new-url';
 import { decodeValue, encodeValue } from './decode-encode';
 import checkIfRangeUpdated from './check-if-range-updated';
@@ -16,6 +17,7 @@ import getUpdatedFilterBy from './get-updated-filter-by';
 import buildUrlQuery from './build-url-query';
 
 export {
+  buildListNameQuery,
   buildNewUrl,
   decodeValue,
   encodeValue,

package/src/components/Video/Video.js

@@ -43,7 +43,7 @@ const Video = ({
   });
 
   return (
-    <Wrapper className="video" modifiers={modifiers}>
+    <Wrapper className="video" modifiers={modifiers} key={url}>
       {playInModal ? (
         <VideoModal
           url={url}

package/src/components/Video/VideoContext.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+const VideoContext = createContext({});
+const VideoContextProvider = VideoContext.Provider;
+const VideoContextConsumer = VideoContext.Consumer;
+
+export { VideoContext, VideoContextProvider, VideoContextConsumer };

package/src/components/Video/VideoModal.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import Modal from '@blaze-react/modal';
+import Modal from '../ModalAdapter';
 import VideoRender from './VideoRender';
 
 const VideoModal = ({ ...props }) => {

package/src/components/Video/VideoRender.js

@@ -1,15 +1,40 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import getProvider from './providers';
 import { withTitle } from '../../HOC';
+import { VideoContextProvider } from './VideoContext';
+import emitGtmEvent from './helpers/emit-gtm-event';
 
 const VideoRender = ({ provider, ...props }) => {
+  const ref = useRef(0);
   const Provider = getProvider(provider);
-  return <Provider {...props} />;
+  const { gtmEventName: propEventName } = props;
+  const gtmEventName = propEventName || process.env.BLAZE_VIDEO_EVENT_NAME;
+  const emitEvent = gtmEventName
+    ? ({ action, videoId }) =>
+        emitGtmEvent({
+          gtmEventName,
+          provider,
+          action,
+          videoId,
+          playCounter: ref
+        })
+    : null;
+
+  return (
+    <VideoContextProvider value={{ emitEvent }}>
+      <Provider {...props} />
+    </VideoContextProvider>
+  );
 };
 
 VideoRender.propTypes = {
-  provider: PropTypes.string.isRequired
+  provider: PropTypes.string.isRequired,
+  gtmEventName: PropTypes.string
+};
+
+VideoRender.defaultProps = {
+  gtmEventName: ''
 };
 
 export default withTitle(VideoRender);

package/src/components/Video/constants.js

@@ -0,0 +1,6 @@
+export const EVENT_ACTIONS = {
+  START: 'start',
+  PLAYING: 'playing',
+  PAUSED: 'paused',
+  ENDED: 'ended'
+};

package/src/components/Video/helpers/emit-gtm-event.js

@@ -0,0 +1,25 @@
+import { EVENT_ACTIONS } from '../constants';
+
+const emitGtmEvent = ({ gtmEventName, provider, action, videoId, playCounter }) => {
+  if (!window.dataLayer || !action) return;
+
+  const actionToUse =
+    action === EVENT_ACTIONS.PLAYING && playCounter.current < 1 ? EVENT_ACTIONS.START : action;
+
+  if (action === EVENT_ACTIONS.PLAYING) {
+    // eslint-disable-next-line no-param-reassign
+    playCounter.current += 1;
+  }
+
+  const playCount = playCounter.current;
+
+  window.dataLayer.push({
+    event: gtmEventName,
+    video_action: actionToUse,
+    video_provider: provider,
+    video_id: videoId,
+    video_play_count: playCount
+  });
+};
+
+export default emitGtmEvent;

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

@@ -2,10 +2,13 @@
   Custom controller to extend and scale the 'react-jw-player' library for future updates.
 */
 
+import { EVENT_ACTIONS } from '../../constants';
+
 class JWPlayerController {
-  constructor() {
+  constructor({ emitEvent }) {
     this.player = null;
     this.error = null;
+    this.emitEvent = emitEvent;
   }
 
   setPlayer = player => {
@@ -24,11 +27,25 @@ class JWPlayerController {
     this.error = message;
   };
 
-  onComplete = event => {};
+  doEmitEvent = action => {
+    const { emitEvent } = this;
+    if (emitEvent) {
+      const { mediaid: videoId } = this.player.getPlaylistItem();
+      emitEvent({ action, videoId });
+    }
+  };
+
+  onComplete = event => {
+    this.doEmitEvent(EVENT_ACTIONS.ENDED);
+  };
 
-  onPause = event => {};
+  onPause = event => {
+    this.doEmitEvent(EVENT_ACTIONS.PAUSED);
+  };
 
-  onPlay = event => {};
+  onPlay = event => {
+    this.doEmitEvent(EVENT_ACTIONS.PLAYING);
+  };
 
   get events() {
     return {

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