@blaze-cms/react-page-builder 0.146.0-node18.1 → 0.146.0-rc-eagle-3.0

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

@@ -1,17 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { MdClose } from 'react-icons/md';
-import { MOBILE_REFINEMENT_TITLE } from '../constants';
+import { useTranslation } from '@blaze-cms/nextjs-components';
+import { TRANSLATION_NAMESPACE } from '../../../constants';
 
-const CloseMobileForm = ({ handleClose }) => (
-  <div className="filter__header filter__header--mobile">
-    <p>{MOBILE_REFINEMENT_TITLE}</p>
+const CloseMobileForm = ({ handleClose }) => {
+  const { t } = useTranslation(TRANSLATION_NAMESPACE);
+  return (
+    <div className="filter__header filter__header--mobile">
+      <p>{t('MOBILE_REFINEMENT_TITLE')}</p>
 
-    <i role="button" onClick={handleClose} aria-label="Close">
-      <MdClose />
-    </i>
-  </div>
-);
+      <i role="button" onClick={handleClose} aria-label="Close">
+        <MdClose />
+      </i>
+    </div>
+  );
+};
 
 CloseMobileForm.propTypes = {
   handleClose: PropTypes.func.isRequired

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

@@ -15,90 +15,93 @@ const FiltersList = ({
 }) => {
   const { itemId } = useContext(MainContext);
 
-  return filters.map(({ type, label, propsToDisplay, elementTitle, ...otherProps }, index) => {
-    if (!propsToDisplay && !propsToDisplay.length) return null;
-    const dynamicKey = [itemId, index].join('-');
-    const isDataAvailable = !!data && Object.keys(data).length;
-    const dataAggregations = isDataAvailable ? data : null;
-    const areAggregationsAvailable = isDataAvailable && !!dataAggregations;
+  return filters.map(
+    ({ type, label, propsToDisplay, elementTitle, unit, ...otherProps }, index) => {
+      if (!propsToDisplay && !propsToDisplay.length) return null;
+      const dynamicKey = [itemId, index].join('-');
+      const isDataAvailable = !!data && Object.keys(data).length;
+      const dataAggregations = isDataAvailable ? data : null;
+      const areAggregationsAvailable = isDataAvailable && !!dataAggregations;
 
-    switch (type) {
-      case TEXT_SEARCH:
-        return (
-          <div
-            key={dynamicKey}
-            className="filter__section filter__section--search-refine filter__section--search">
-            <TextSearch
-              {...otherProps}
-              label={label}
-              elementTitle={elementTitle}
-              searchValue={filterValues[SEARCH_TERM]}
-              updateFilterValues={updateFilterValues}
-              filterValues={filterValues}
-            />
-          </div>
-        );
-
-      case CHECKBOX:
-        return (
-          <div
-            key={dynamicKey}
-            className="filter__section filter__section--search-refine filter__section--checkboxes">
-            <Checkbox
-              {...otherProps}
-              data={data}
-              prop={propsToDisplay[0]}
-              label={label}
-              elementTitle={elementTitle}
-              hasUrl={hasUrl}
-              filterValues={filterValues}
-              updateFilterValues={updateFilterValues}
-              shouldSearch={shouldSearch}
-            />
-          </div>
-        );
+      switch (type) {
+        case TEXT_SEARCH:
+          return (
+            <div
+              key={dynamicKey}
+              className="filter__section filter__section--search-refine filter__section--search">
+              <TextSearch
+                {...otherProps}
+                label={label}
+                elementTitle={elementTitle}
+                searchValue={filterValues[SEARCH_TERM]}
+                updateFilterValues={updateFilterValues}
+                filterValues={filterValues}
+              />
+            </div>
+          );
 
-      case SELECT:
-        return (
-          <div
-            key={dynamicKey}
-            className="filter__section filter__section--search-refine filter__section--selects">
-            <SelectFilter
-              {...otherProps}
-              data={data}
-              prop={propsToDisplay[0]}
-              label={label}
-              elementTitle={elementTitle}
-              hasUrl={hasUrl}
-              filterValues={filterValues}
-              updateFilterValues={updateFilterValues}
-              shouldSearch={shouldSearch}
-            />
-          </div>
-        );
+        case CHECKBOX:
+          return (
+            <div
+              key={dynamicKey}
+              className="filter__section filter__section--search-refine filter__section--checkboxes">
+              <Checkbox
+                {...otherProps}
+                data={data}
+                prop={propsToDisplay[0]}
+                label={label}
+                elementTitle={elementTitle}
+                hasUrl={hasUrl}
+                filterValues={filterValues}
+                updateFilterValues={updateFilterValues}
+                shouldSearch={shouldSearch}
+              />
+            </div>
+          );
 
-      case RANGE:
-        return (
-          !!areAggregationsAvailable && (
-            <div key={dynamicKey} className="range-slider__wrapper">
-              <Range
+        case SELECT:
+          return (
+            <div
+              key={dynamicKey}
+              className="filter__section filter__section--search-refine filter__section--selects">
+              <SelectFilter
                 {...otherProps}
-                dataAggregations={dataAggregations}
-                propsToDisplay={propsToDisplay}
+                data={data}
+                prop={propsToDisplay[0]}
                 label={label}
                 elementTitle={elementTitle}
-                entity={entity}
+                hasUrl={hasUrl}
                 filterValues={filterValues}
                 updateFilterValues={updateFilterValues}
                 shouldSearch={shouldSearch}
               />
             </div>
-          )
-        );
-      default:
-        return null;
+          );
+
+        case RANGE:
+          return (
+            !!areAggregationsAvailable && (
+              <div key={dynamicKey} className="range-slider__wrapper">
+                <Range
+                  {...otherProps}
+                  dataAggregations={dataAggregations}
+                  propsToDisplay={propsToDisplay}
+                  label={label}
+                  elementTitle={elementTitle}
+                  unit={unit}
+                  entity={entity}
+                  filterValues={filterValues}
+                  updateFilterValues={updateFilterValues}
+                  shouldSearch={shouldSearch}
+                />
+              </div>
+            )
+          );
+        default:
+          return null;
+      }
     }
-  });
+  );
 };
 
 FiltersList.propTypes = {

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

@@ -1,23 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { RESET, SEARCH } from '../constants';
+import { useTranslation } from '@blaze-cms/nextjs-components';
+import { TRANSLATION_NAMESPACE } from '../../../constants';
 
-const MobileFormToolbar = ({ formId, handleReset }) => (
-  <div className="filter__refine filter__refine--mobile-open">
-    <div
-      className="reset"
-      data-testid="reset-button"
-      role="button"
-      onClick={handleReset}
-      aria-label="Reset search filters">
-      {RESET}
-    </div>
+const MobileFormToolbar = ({ formId, handleReset }) => {
+  const { t } = useTranslation(TRANSLATION_NAMESPACE);
+  return (
+    <div className="filter__refine filter__refine--mobile-open">
+      <div
+        className="reset"
+        data-testid="reset-button"
+        role="button"
+        onClick={handleReset}
+        aria-label={t('RESET_ALL_FILTERS')}>
+        {t('RESET_ALL_FILTERS')}
+      </div>
 
-    <button className="search" type="submit" form={formId}>
-      {SEARCH}
-    </button>
-  </div>
-);
+      <button className="search" type="submit" form={formId}>
+        {t('SEARCH_MOBILE_BUTTON_TEXT')}
+      </button>
+    </div>
+  );
+};
 
 MobileFormToolbar.propTypes = {
   formId: PropTypes.string.isRequired,

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

@@ -1,27 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FaRedoAlt } from 'react-icons/fa';
-import { RESET } from '../constants';
+import { useTranslation } from '@blaze-cms/nextjs-components';
+import { TRANSLATION_NAMESPACE } from '../../../constants';
 
-const ResetDesktopForm = ({ handleReset }) => (
-  <div className="filter__reset">
-    <button
-      type="button"
-      className="icon-button icon-button--reset"
-      title="reset--button"
-      data-testid="reset-icon"
-      onClick={handleReset}
-      aria-label="Reset search filters">
-      <i>
-        <FaRedoAlt />
-      </i>
-    </button>
+const ResetDesktopForm = ({ handleReset }) => {
+  const { t } = useTranslation(TRANSLATION_NAMESPACE);
+  return (
+    <div className="filter__reset">
+      <button
+        type="button"
+        className="icon-button icon-button--reset"
+        title="reset--button"
+        data-testid="reset-icon"
+        onClick={handleReset}
+        aria-label={t('RESET_ALL_FILTERS')}>
+        <i>
+          <FaRedoAlt />
+        </i>
+      </button>
 
-    <div role="button" onClick={handleReset} data-testid="reset-button">
-      {RESET}
+      <div role="button" onClick={handleReset} data-testid="reset-button">
+        {t('RESET_ALL_FILTERS')}
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 ResetDesktopForm.propTypes = {
   handleReset: PropTypes.func.isRequired

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

@@ -2,13 +2,15 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import debounce from 'lodash.debounce';
+import { useTranslation } from '@blaze-cms/nextjs-components';
 import FiltersList from './FiltersList';
 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';
+import { MORE_FILTERS_CLASSES } from '../constants';
+import { TRANSLATION_NAMESPACE } from '../../../constants';
 
 const SearchFilter = ({
   searchFilterRef,
@@ -29,6 +31,7 @@ const SearchFilter = ({
   mobileRefineButtonText,
   query
 }) => {
+  const { t } = useTranslation(TRANSLATION_NAMESPACE);
   const [moreFiltersMobileCollapsed, setMoreFiltersMobileCollapsed] = useState(true);
   const [moreFiltersDesktopCollapsed, setMoreFiltersDesktopCollapsed] = useState(true);
 
@@ -187,7 +190,7 @@ const SearchFilter = ({
                         <ResetDesktopForm handleReset={handleReset} />
 
                         <button className="button button--full-width" type="submit">
-                          {SEARCH}
+                          {t('SEARCH_BUTTON_TEXT')}
                         </button>
                       </div>
                     </div>
@@ -197,7 +200,7 @@ const SearchFilter = ({
                     <ResetDesktopForm handleReset={handleReset} />
 
                     <button className="button button--full-width" type="submit">
-                      {SEARCH}
+                      {t('SEARCH_BUTTON_TEXT')}
                     </button>
                   </div>
                 </div>
@@ -206,7 +209,7 @@ const SearchFilter = ({
 
             {!displaySearchFilter && (
               <button className="button button--full-width" type="submit">
-                {SEARCH}
+                {t('SEARCH_BUTTON_TEXT')}
               </button>
             )}
           </div>
@@ -219,9 +222,9 @@ const SearchFilter = ({
         <div
           className="filter__refine filter__refine--mobile-close"
           data-testid="refine-mobile"
-          aria-label="Toggle Search Filter">
+          aria-label={t('REFINE_SEARCH')}>
           <div role="button" onClick={() => setDisplaySearchFilter(true)}>
-            {mobileRefineButtonText || REFINE}
+            {mobileRefineButtonText || t('REFINE_SEARCH')}
           </div>
         </div>
       )}

package/src/components/SearchFilter/SearchFilterContainer.js

@@ -19,10 +19,10 @@ import {
   getInheritedFilters,
   getQueryProps,
   buildRawQueryStringified,
-  buildFiltersQuery
+  buildFiltersQuery,
+  getComponentId
 } from '../../helpers';
 import { RAW_RESULTS } from './constants';
-import { SCROLL_OFFSET } from '../../constants';
 import searchFilterReducer from './searchFilterReducer';
 import { useGetEntitySchemasAsObj } from '../../hooks';
 
@@ -133,31 +133,35 @@ const SearchFilterContainer = ({
   }
 
   const handleSearch = newQuery => {
+    const componentId = listComponentName ? getComponentId(listComponentName) : '';
     setDisplaySearchFilter(false);
     const hashBit = asPath.split('#')[1] || '';
-    const parsedHashBit = hashBit ? `#${hashBit}` : '';
-    scrollToFirstList();
+    let parsedHashBit = hashBit ? `#${hashBit}` : '';
+    parsedHashBit = parsedHashBit || (componentId ? `#${componentId}` : '');
+
+    scrollToFirstList(componentId);
     if (!newQuery) {
-      const baseQuery = `${currentUrl}${parsedHashBit}`;
+      const baseUrl = url || currentUrl;
+      const baseQuery = `${baseUrl}${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);
+    const hashToUse = componentId;
+    const newUrl = buildNewUrl(url, currentUrl, newQuery, hashToUse);
     setUrlPath(newUrl);
     return router.push('/Resolver', newUrl, { shallow: !url, scroll: false });
   };
 
-  const scrollToFirstList = () => {
-    const [list] = document.getElementsByClassName('list-top');
+  const scrollToFirstList = componentId => {
+    const list = componentId
+      ? document.getElementById(componentId)
+      : document.getElementsByClassName('list-top')[0];
     const shouldScrollToFirstList = !url && list;
 
     if (shouldScrollToFirstList) {
-      window.scrollTo({
-        left: 0,
-        top: window.pageYOffset - SCROLL_OFFSET + list.getBoundingClientRect().top
-      });
+      list.scrollIntoView();
     } else {
       window.scrollTo(0, 0);
     }

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
+import classNames from 'classnames';
 import RangeFilter from '@blaze-react/range-filter';
 import { useRouter } from 'next/router';
 import Select from '@blaze-react/select';
@@ -18,7 +19,8 @@ const Range = ({
   updateFilterValues,
   filterValues,
   shouldSearch,
-  elementTitle
+  elementTitle,
+  unit
 }) => {
   const router = useRouter();
   const debounceAmount = shouldSearch ? 1200 : 400;
@@ -38,7 +40,6 @@ const Range = ({
   if (loading || !rangeOption || !rangeValue) return '';
 
   const options = getSelectOptions(getEntitySchema, propsToDisplay);
-  // get range from aggregations so it updates
   const { min, max } = calculateMinMax(dataAggregations[rangeOption], rangeInterval);
   const minValue = rangeValue.minValue < min ? min : rangeValue.minValue;
   const maxValue = rangeValue.maxValue > max ? max : rangeValue.maxValue;
@@ -48,6 +49,11 @@ const Range = ({
     updateFilterValues({ [option]: { ...value, selectedOption: rangeOption } }, shouldSearch);
   }, debounceAmount);
 
+  let displayLabel = '';
+  if (!hasMultipleOptions) {
+    displayLabel = label;
+  }
+
   return (
     <>
       {elementTitle && <div className="heading heading--section">{elementTitle}</div>}
@@ -62,8 +68,11 @@ const Range = ({
             onChange={({ value }) => {
               const updatedOptions = {};
               propsToDisplay.forEach(prop => {
-                const { min: eMin, max: eMax } = filterValues[prop];
-                const initValue = getRangeValue(null, rangeInterval, eMin, eMax);
+                const { min: aggMin, max: aggMax } = calculateMinMax(
+                  dataAggregations[prop],
+                  rangeInterval
+                );
+                const initValue = getRangeValue(null, rangeInterval, aggMin, aggMax);
                 updatedOptions[prop] = { ...initValue, selectedOption: value };
               });
 
@@ -72,16 +81,22 @@ const Range = ({
           />
         </>
       )}
-      <RangeFilter
-        key={`${rangeOption}-${minValue}-${maxValue}`}
-        name={rangeOption}
-        label={hasMultipleOptions ? '' : label}
-        value={valueToUse}
-        id={rangeOption}
-        onChange={({ value }) => {
-          handleChange(rangeOption, value);
-        }}
-      />
+      <div
+        className={classNames('range-filter-wrapper', {
+          'has-unit': unit
+        })}
+        style={unit ? { '--unit': `"${unit}"` } : {}}>
+        <RangeFilter
+          key={`${rangeOption}-${min}-${max}`}
+          name={rangeOption}
+          label={displayLabel}
+          value={valueToUse}
+          id={rangeOption}
+          onChange={({ value }) => {
+            handleChange(rangeOption, value);
+          }}
+        />
+      </div>
     </>
   );
 };
@@ -95,14 +110,16 @@ Range.propTypes = {
   rangeInterval: PropTypes.number,
   label: PropTypes.string,
   elementTitle: PropTypes.string,
-  dataAggregations: PropTypes.object.isRequired
+  dataAggregations: PropTypes.object.isRequired,
+  unit: PropTypes.string
 };
 
 Range.defaultProps = {
   shouldSearch: false,
   rangeInterval: 1,
   label: '',
-  elementTitle: ''
+  elementTitle: '',
+  unit: ''
 };
 
 export default Range;

package/src/components/SearchFilter/constants.js

@@ -17,10 +17,6 @@ const UPDATED_RANGES = 'updated_ranges';
 const MIN_VALUE = 'min-value';
 const MAX_VALUE = 'max-value';
 const TABLET_WIDTH = 768;
-const RESET = 'Reset all filters';
-const SEARCH = 'Search';
-const REFINE = `Refine Search`;
-const MOBILE_REFINEMENT_TITLE = 'Search refinement';
 
 const MORE_FILTERS_CLASSES_BASE = 'filter__more-filters';
 const MORE_FILTERS_CLASSES = {
@@ -54,9 +50,5 @@ export {
   MIN_VALUE,
   MAX_VALUE,
   TABLET_WIDTH,
-  RESET,
-  SEARCH,
-  REFINE,
-  MOBILE_REFINEMENT_TITLE,
   MORE_FILTERS_CLASSES
 };

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

@@ -1,6 +1,7 @@
-const buildNewUrl = (url, currentUrl, queryParams, hashBit) => {
+const buildNewUrl = (url, currentUrl, queryParams, newHashBit) => {
   const encodedQuery = encodeURI(queryParams);
-  const baseUrl = url || currentUrl;
+  const [baseUrl, urlHash] = (url || currentUrl).split('#');
+  const hashBit = newHashBit || urlHash || '';
   const newUrl = encodedQuery ? `${baseUrl}?${encodedQuery}` : `${baseUrl}`;
   return hashBit ? `${newUrl}#${hashBit}` : newUrl;
 };

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

@@ -22,7 +22,16 @@ const buildUrlQuery = (filterValues = {}, filters = [], listComponentName = '',
   });
 
   Object.keys(query).forEach(key => {
-    if (queryKeys.indexOf(key) === -1) newQuery.push(`${key}=${query[key]}`);
+    if (queryKeys.indexOf(key) !== -1) return;
+
+    let shouldAdd = true;
+    if (!listComponentName) {
+      shouldAdd = !key.endsWith('[page]');
+    } else {
+      shouldAdd = !key.includes(listComponentName);
+    }
+
+    if (shouldAdd) newQuery.push(`${key}=${query[key]}`);
   });
 
   return newQuery.join('&');

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';
@@ -164,8 +165,6 @@ const AZ = [
 
 const AZ_DEFAULT_PROP = 'name';
 
-const SCROLL_OFFSET = process.env.BLAZE_SCROLL_OFFSET || 50;
-
 const BANNER_LOADING = 'loading';
 const BANNER_EMPTY = 'empty';
 const BANNER_LOADED = 'loaded';
@@ -178,6 +177,9 @@ const DATA_SUMMARY_URL_REGEX =
 const DATA_SUMMARY_TEL_REGEX = /^\+{0,1}[0-9\(\)\.\- \/]{7,}$/; // note: very loose phone number match not for validation
 const SIZE = process.env.BLAZE_PB_SEARCH_FILETER_AGG_SIZE || 500;
 
+const TRANSLATION_NAMESPACE = 'page-builder-fe';
+const COMPONENT_ID_PREFIX = 'pb-';
+
 export {
   BANNER_LOADING,
   BANNER_EMPTY,
@@ -259,6 +261,7 @@ export {
   MIN_BANNER_HEIGHT,
   MAX_BANNER_HEIGHT,
   GRAPH_QL_ERROR,
+  PRIORITY_HIGH,
   HOVER,
   MOUSE_ENTER,
   MOUSE_LEAVE,
@@ -278,12 +281,13 @@ export {
   AZ_QUERY_CONST,
   AZ_DEFAULT_PROP,
   AZ,
-  SCROLL_OFFSET,
   ANCHOR_TAG,
   TARGET_BLANK,
   DATA_SUMMARY_EMAIL_REGEX,
   DATA_SUMMARY_URL_REGEX,
   DATA_SUMMARY_TEL_REGEX,
   VIMEO_OEMBED_URL,
-  SIZE
+  SIZE,
+  TRANSLATION_NAMESPACE,
+  COMPONENT_ID_PREFIX
 };

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

@@ -79,7 +79,7 @@ const getTypeBaseProps = (entitySchema, cardOptions, extraPropsHaveCategory) =>
 
   const { interfaces, properties, dynamicProperties, relations } = entitySchema;
 
-  const isContent = !!interfaces.includes('content/content');
+  const isContent = !!interfaces.includes('content/content-base');
   const hasCategory = checkProps(properties) || checkProps(dynamicProperties);
   const hasPreheader = properties[PREHEADER_PROP];
 
@@ -97,7 +97,8 @@ const getTypeBaseProps = (entitySchema, cardOptions, extraPropsHaveCategory) =>
   return { typeBasedProps, shouldAddCategoryProps };
 };
 
-const getContentProps = isContent => (isContent ? ['url', 'sponsored', 'featured'] : []);
+// make sure all props are supported by content/content-base interface
+const getContentProps = isContent => (isContent ? ['url', 'sponsored', 'featured', 'live'] : []);
 
 const getCategoyProps = (shouldAddCategoryProps, hasCategory, hasPreheader) => {
   if (!shouldAddCategoryProps) return [];

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

@@ -6,7 +6,7 @@ const buildQueryFields = (sanitizedEntityFields, entityTypes, isFull) =>
       ${sanitizedEntityFields}
       __typename
       id
-      ${isFull ? 'pageBuilderComponents' : ''}
+     ${isFull ? 'pageBuilderComponents: preparedPageBuilderComponents' : ''}
     }`
     )}
   },

package/src/helpers/get-component-id.js

@@ -0,0 +1,12 @@
+import cssesc from 'cssesc';
+import { COMPONENT_ID_PREFIX } from '../constants';
+
+const getComponentId = (componentName, noPrefix = false, toLowerCase = false) => {
+  let id = `${noPrefix ? '' : COMPONENT_ID_PREFIX}${componentName.replace(/\s+/g, '-')}`;
+  if (toLowerCase) {
+    id = id.toLowerCase();
+  }
+  return cssesc(id, { isIdentifier: true });
+};
+
+export default getComponentId;