@blaze-cms/react-page-builder 0.119.0 → 0.120.0-alpha.2

package/lib-es/helpers/get-generic-render-variables.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/helpers/get-generic-render-variables.js"],"names":["getSortbyFieldName","DEFAULT_LIMIT","DEFAULT_OFFSET","buildSortValues","sortFilters","relations","stringProps","length","sort","sortValues","map","propsToDisplay","sortFieldName","toLowerCase","filter","Boolean","join","getCorrectSort","filterProps","isTextSearchApplied","sortby","sortProperties","getGenericRenderVariables","rawQueryStringified","isTextSearchFilterApplied","limit","offset","raw","Number"],"mappings":";;;;;;AAAA,OAAOA,kBAAP,MAA+B,0BAA/B;AACA,SAASC,aAAT,EAAwBC,cAAxB,QAA8C,cAA9C;;AAEA,MAAMC,eAAe,GAAG,CAACC,WAAD,EAAcC,SAAd,EAAyBC,WAAzB,KAAyC;AAC/D,MAAI,CAACF,WAAD,IAAgB,CAACA,WAAW,CAACG,MAAjC,EAAyC,OAAO;AAAEC,IAAAA,IAAI,EAAE;AAAR,GAAP;AACzC,QAAMC,UAAU,GAAGL,WAAW,CAC3BM,GADgB,CACZ,CAAC;AAAEF,IAAAA,IAAF;AAAQG,IAAAA;AAAR,GAAD,KAA8B;AACjC,QAAI,CAACH,IAAL,EAAW,OAAO,IAAP;AAEX,UAAMI,aAAa,GAAGZ,kBAAkB,CAACK,SAAD,EAAYM,cAAZ,EAA4BL,WAA5B,CAAxC;AACA,WAAOM,aAAa,GAAI,GAAEA,aAAc,IAAGJ,IAAI,CAACK,WAAL,EAAmB,EAA1C,GAA8C,IAAlE;AACD,GANgB,EAOhBC,MAPgB,CAOTC,OAPS,EAQhBC,IARgB,CAQX,GARW,CAAnB;AAUA,SAAO;AAAER,IAAAA,IAAI,EAAEC;AAAR,GAAP;AACD,CAbD;;AAcA,MAAMQ,cAAc,GAAG,CAACZ,SAAD,EAAYa,WAAZ,EAAyBZ,WAAzB,EAAsCa,mBAAtC,KAA8D;AACnF,MAAIA,mBAAJ,EAAyB;AACvB,WAAO,EAAP;AACD;;AACD,QAAM;AAAEX,IAAAA,IAAF;AAAQY,IAAAA,MAAR;AAAgBC,IAAAA,cAAc,GAAG;AAAjC,MAAwCH,WAA9C;AAEA,SAAOf,eAAe,CACpB,CAAC;AAAEK,IAAAA,IAAF;AAAQG,IAAAA,cAAc,EAAES;AAAxB,GAAD,EAAmC,GAAGC,cAAtC,CADoB,EAEpBhB,SAFoB,EAGpBC,WAHoB,CAAtB;AAKD,CAXD;;AAaA,MAAMgB,yBAAyB,GAAG,CAChCjB,SADgC,EAEhCa,WAAW,GAAG,EAFkB,EAGhCZ,WAAW,GAAG,EAHkB,EAIhCiB,mBAAmB,GAAG,EAJU,EAKhCC,yBAAyB,GAAG,KALI,KAM7B;AACH,QAAM;AAAEC,IAAAA,KAAK,GAAGxB,aAAV;AAAyByB,IAAAA;AAAzB,MAAoCR,WAA1C;AACA,QAAMV,IAAI,GAAGS,cAAc,CAACZ,SAAD,EAAYa,WAAZ,EAAyBZ,WAAzB,EAAsCkB,yBAAtC,CAA3B;AACA,QAAMG,GAAG,GAAGJ,mBAAmB,GAAG;AAAEA,IAAAA;AAAF,GAAH,GAA6B,EAA5D;AAEA;AACEE,IAAAA,KAAK,EAAEG,MAAM,CAACH,KAAK,IAAIxB,aAAV,CADf;AAEEyB,IAAAA,MAAM,EAAEE,MAAM,CAACF,MAAM,IAAIxB,cAAX;AAFhB,KAGKM,IAHL,GAIKmB,GAJL;AAMD,CAjBD;;AAmBA,eAAeL,yBAAf","sourcesContent":["import getSortbyFieldName from './get-sort-by-field-name';\nimport { DEFAULT_LIMIT, DEFAULT_OFFSET } from '../constants';\n\nconst buildSortValues = (sortFilters, relations, stringProps) => {\n  if (!sortFilters || !sortFilters.length) return { sort: [] };\n  const sortValues = sortFilters\n    .map(({ sort, propsToDisplay }) => {\n      if (!sort) return null;\n\n      const sortFieldName = getSortbyFieldName(relations, propsToDisplay, stringProps);\n      return sortFieldName ? `${sortFieldName}:${sort.toLowerCase()}` : null;\n    })\n    .filter(Boolean)\n    .join(',');\n\n  return { sort: sortValues };\n};\nconst getCorrectSort = (relations, filterProps, stringProps, isTextSearchApplied) => {\n  if (isTextSearchApplied) {\n    return {};\n  }\n  const { sort, sortby, sortProperties = [] } = filterProps;\n\n  return buildSortValues(\n    [{ sort, propsToDisplay: sortby }, ...sortProperties],\n    relations,\n    stringProps\n  );\n};\n\nconst getGenericRenderVariables = (\n  relations,\n  filterProps = {},\n  stringProps = [],\n  rawQueryStringified = '',\n  isTextSearchFilterApplied = false\n) => {\n  const { limit = DEFAULT_LIMIT, offset } = filterProps;\n  const sort = getCorrectSort(relations, filterProps, stringProps, isTextSearchFilterApplied);\n  const raw = rawQueryStringified ? { rawQueryStringified } : {};\n\n  return {\n    limit: Number(limit || DEFAULT_LIMIT),\n    offset: Number(offset || DEFAULT_OFFSET),\n    ...sort,\n    ...raw\n  };\n};\n\nexport default getGenericRenderVariables;\n"],"file":"get-generic-render-variables.js"}
+{"version":3,"sources":["../../src/helpers/get-generic-render-variables.js"],"names":["getSortbyFieldName","DEFAULT_LIMIT","DEFAULT_OFFSET","buildSortValues","sortFilters","relations","stringProps","length","sort","sortValues","map","propsToDisplay","sortFieldName","toLowerCase","filter","Boolean","join","getCorrectSort","filterProps","isTextSearchApplied","sortby","sortProperties","getGenericRenderVariables","rawQuery","isTextSearchFilterApplied","useRandomSort","limit","offset","limitToUse","Number","offsetToUse","rawQueryStringified","JSON","stringify","query","function_score","random_score","boost_mode"],"mappings":";;;;;;AAAA,OAAOA,kBAAP,MAA+B,0BAA/B;AACA,SAASC,aAAT,EAAwBC,cAAxB,QAA8C,cAA9C;;AAEA,MAAMC,eAAe,GAAG,CAACC,WAAD,EAAcC,SAAd,EAAyBC,WAAzB,KAAyC;AAC/D,MAAI,CAACF,WAAD,IAAgB,CAACA,WAAW,CAACG,MAAjC,EAAyC,OAAO;AAAEC,IAAAA,IAAI,EAAE;AAAR,GAAP;AAEzC,QAAMC,UAAU,GAAGL,WAAW,CAC3BM,GADgB,CACZ,CAAC;AAAEF,IAAAA,IAAF;AAAQG,IAAAA;AAAR,GAAD,KAA8B;AACjC,QAAI,CAACH,IAAL,EAAW,OAAO,IAAP;AAEX,UAAMI,aAAa,GAAGZ,kBAAkB,CAACK,SAAD,EAAYM,cAAZ,EAA4BL,WAA5B,CAAxC;AACA,WAAOM,aAAa,GAAI,GAAEA,aAAc,IAAGJ,IAAI,CAACK,WAAL,EAAmB,EAA1C,GAA8C,IAAlE;AACD,GANgB,EAOhBC,MAPgB,CAOTC,OAPS,EAQhBC,IARgB,CAQX,GARW,CAAnB;AAUA,SAAO;AAAER,IAAAA,IAAI,EAAEC;AAAR,GAAP;AACD,CAdD;;AAeA,MAAMQ,cAAc,GAAG,CAACZ,SAAD,EAAYa,WAAZ,EAAyBZ,WAAzB,EAAsCa,mBAAtC,KAA8D;AACnF,MAAIA,mBAAJ,EAAyB;AACvB,WAAO,EAAP;AACD;;AACD,QAAM;AAAEX,IAAAA,IAAF;AAAQY,IAAAA,MAAR;AAAgBC,IAAAA,cAAc,GAAG;AAAjC,MAAwCH,WAA9C;AAEA,SAAOf,eAAe,CACpB,CAAC;AAAEK,IAAAA,IAAF;AAAQG,IAAAA,cAAc,EAAES;AAAxB,GAAD,EAAmC,GAAGC,cAAtC,CADoB,EAEpBhB,SAFoB,EAGpBC,WAHoB,CAAtB;AAKD,CAXD;;AAaA,MAAMgB,yBAAyB,GAAG,CAChCjB,SADgC,EAEhCa,WAAW,GAAG,EAFkB,EAGhCZ,WAAW,GAAG,EAHkB,EAIhCiB,QAAQ,GAAG,EAJqB,EAKhCC,yBAAyB,GAAG,KALI,EAMhCC,aAAa,GAAG,KANgB,KAO7B;AACH,QAAM;AAAEC,IAAAA,KAAK,GAAGzB,aAAV;AAAyB0B,IAAAA;AAAzB,MAAoCT,WAA1C;AACA,QAAMU,UAAU,GAAGC,MAAM,CAACH,KAAK,IAAIzB,aAAV,CAAzB;AACA,QAAM6B,WAAW,GAAGD,MAAM,CAACF,MAAM,IAAIzB,cAAX,CAA1B;;AAEA,MAAIuB,aAAJ,EAAmB;AACjB,UAAMM,mBAAmB,GAAGC,IAAI,CAACC,SAAL,CAAe;AACzCC,MAAAA,KAAK,EAAE;AACLC,QAAAA,cAAc,EAAE;AACdD,UAAAA,KAAK,EAAEX,QADO;AAEda,UAAAA,YAAY,EAAE,EAFA;AAGdC,UAAAA,UAAU,EAAE;AAHE;AADX;AADkC,KAAf,CAA5B;AAUA,WAAO;AACLX,MAAAA,KAAK,EAAEE,UADF;AAELD,MAAAA,MAAM,EAAEG,WAFH;AAGLC,MAAAA;AAHK,KAAP;AAKD;;AAED,QAAMvB,IAAI,GAAGS,cAAc,CAACZ,SAAD,EAAYa,WAAZ,EAAyBZ,WAAzB,EAAsCkB,yBAAtC,CAA3B;AAEA;AACEE,IAAAA,KAAK,EAAEE,UADT;AAEED,IAAAA,MAAM,EAAEG;AAFV,KAGKtB,IAHL;AAIEuB,IAAAA,mBAAmB,EAAEC,IAAI,CAACC,SAAL,CAAe;AAClCC,MAAAA,KAAK,EAAEX;AAD2B,KAAf;AAJvB;AAQD,CAxCD;;AA0CA,eAAeD,yBAAf","sourcesContent":["import getSortbyFieldName from './get-sort-by-field-name';\nimport { DEFAULT_LIMIT, DEFAULT_OFFSET } from '../constants';\n\nconst buildSortValues = (sortFilters, relations, stringProps) => {\n  if (!sortFilters || !sortFilters.length) return { sort: [] };\n\n  const sortValues = sortFilters\n    .map(({ sort, propsToDisplay }) => {\n      if (!sort) return null;\n\n      const sortFieldName = getSortbyFieldName(relations, propsToDisplay, stringProps);\n      return sortFieldName ? `${sortFieldName}:${sort.toLowerCase()}` : null;\n    })\n    .filter(Boolean)\n    .join(',');\n\n  return { sort: sortValues };\n};\nconst getCorrectSort = (relations, filterProps, stringProps, isTextSearchApplied) => {\n  if (isTextSearchApplied) {\n    return {};\n  }\n  const { sort, sortby, sortProperties = [] } = filterProps;\n\n  return buildSortValues(\n    [{ sort, propsToDisplay: sortby }, ...sortProperties],\n    relations,\n    stringProps\n  );\n};\n\nconst getGenericRenderVariables = (\n  relations,\n  filterProps = {},\n  stringProps = [],\n  rawQuery = {},\n  isTextSearchFilterApplied = false,\n  useRandomSort = false\n) => {\n  const { limit = DEFAULT_LIMIT, offset } = filterProps;\n  const limitToUse = Number(limit || DEFAULT_LIMIT);\n  const offsetToUse = Number(offset || DEFAULT_OFFSET);\n\n  if (useRandomSort) {\n    const rawQueryStringified = JSON.stringify({\n      query: {\n        function_score: {\n          query: rawQuery,\n          random_score: {},\n          boost_mode: 'replace'\n        }\n      }\n    });\n\n    return {\n      limit: limitToUse,\n      offset: offsetToUse,\n      rawQueryStringified\n    };\n  }\n\n  const sort = getCorrectSort(relations, filterProps, stringProps, isTextSearchFilterApplied);\n\n  return {\n    limit: limitToUse,\n    offset: offsetToUse,\n    ...sort,\n    rawQueryStringified: JSON.stringify({\n      query: rawQuery\n    })\n  };\n};\n\nexport default getGenericRenderVariables;\n"],"file":"get-generic-render-variables.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.119.0",
+  "version": "0.120.0-alpha.2",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -83,5 +83,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "2bbdbff965c620190bc67b5bae4b210041d44c0f"
+  "gitHead": "4100a7f4e48face4e0e60c66ac6d095720436ef9"
 }

package/src/components/Banner/AdSlotRender.js

@@ -11,7 +11,7 @@ const AdSlotRender = ({
   parsedSizes,
   targetingArguments
 }) => {
-  const [loadingStatus, setLoadingStatus] = useState(BANNER_LOADING);
+  const [{ loadingStatus = BANNER_LOADING, minHeight }, setLoadingStatus] = useState({});
 
   const bannerClass = `banner-${sizeId}`;
 
@@ -19,25 +19,29 @@ const AdSlotRender = ({
     loadingStatus === BANNER_LOADING &&
     sizeMapping
       .map(({ sizes: styleSizes, viewport: [minWidth] }) => {
-        const minHeight = Math.min(...styleSizes.map(([, height]) => height));
-        return `@media(min-width:${minWidth}px){.${bannerClass}{min-height:${minHeight}px;}`;
+        const minimumHeight = Math.min(...styleSizes.map(([, height]) => height));
+        return `@media(min-width:${minWidth}px){.${bannerClass}{min-height:${minimumHeight}px;}`;
       })
       .sort();
   const className = `ad-slot ad-slot-${loadingStatus} ${bannerClass}`;
 
   return (
     <>
-      {styles && <style>{styles}</style>}
-      <div className={className}>
+      {styles && <style>{styles.join('\n')}</style>}
+      <div className={className} style={{ minHeight }}>
         {shouldShowBanner && (
           <AdSlot
             adUnit={parsedAdunit}
             sizes={parsedSizes}
             targetingArguments={targetingArguments}
             sizeMapping={sizeMapping}
-            onSlotRender={({ event: { isEmpty } }) => {
+            onSlotRender={slotData => {
+              const {
+                event: { isEmpty, size }
+              } = slotData;
+              const slotHeight = size && size.length ? size[1] : undefined;
               const newLoadingStatus = isEmpty ? BANNER_EMPTY : BANNER_LOADED;
-              setLoadingStatus(newLoadingStatus);
+              setLoadingStatus({ loadingStatus: newLoadingStatus, minHeight: slotHeight });
             }}
           />
         )}

package/src/components/Banner/Banner.js

@@ -1,10 +1,12 @@
 import React, { useContext } from 'react';
 import { MainContext } from '@blaze-cms/nextjs-components';
+import { checkIfLoggedIn } from '@blaze-cms/core-auth-ui';
 import PropTypes from 'prop-types';
 import flatten from 'lodash.flatten';
 import { useQuery } from '@apollo/client';
 import { useRouter } from 'next/router';
-import { getSingleEntitySchema } from '../../application/query';
+import { buildUserQuery, buildUserPropsData } from './helpers';
+import { getSingleEntitySchema, getUser } from '../../application/query';
 import Wrapper from '../Wrapper';
 import BannerRender from './BannerRender';
 import buildPropsQuery from '../../helpers/build-props-query';
@@ -14,15 +16,20 @@ import getEntityRenderProps from '../../helpers/get-entity-render-props';
 const Banner = ({ type, ...otherProps }) => {
   const router = useRouter();
   const { isPreview } = useContext(MainContext);
+  const { id: userId } = checkIfLoggedIn();
   const { asPath } = router;
-  const { parent, entity, sizeId, propsToDisplay = [] } = otherProps;
-
+  const { parent, entity, sizeId, propsToDisplay = [], userPropsToDisplay = [] } = otherProps;
+  const userQuery = buildUserQuery(userPropsToDisplay);
   const { itemEntity } = parent;
   const { data, error, loading } = useQuery(getSingleEntitySchema, {
     variables: { id: entity || itemEntity }
   });
+  const { data: userData, loading: userLoading } = useQuery(getUser(userQuery), {
+    variables: { id: userId },
+    skip: !userPropsToDisplay.length || !userId
+  });
 
-  if (loading) return '';
+  if (loading || userLoading) return '';
   if (error) return error.message;
   if (!data) return null;
   if (!sizeId) return null;
@@ -35,6 +42,7 @@ const Banner = ({ type, ...otherProps }) => {
       : []
   );
 
+  const userPropsData = buildUserPropsData(userData, userPropsToDisplay);
   const { actionKey, action } = getEntityRenderProps(queryProps, data, isPreview);
   const bannerKey = `${sizeId}${asPath}`;
 
@@ -46,6 +54,7 @@ const Banner = ({ type, ...otherProps }) => {
         action={action}
         actionKey={actionKey}
         asPath={asPath}
+        userPropsData={userPropsData}
       />
     </Wrapper>
   );

package/src/components/Banner/BannerRender.js

@@ -33,6 +33,7 @@ const BannerRender = ({
   action,
   actionKey,
   cardBannerIndex,
+  userPropsData,
   ...otherProps
 }) => {
   const { id } = otherProps;
@@ -63,7 +64,6 @@ const BannerRender = ({
   });
 
   const parsedTargetings = buildContextualTargeting(actionKey, entityRecordData, propsToDisplay);
-
   const { entityData } = bannerData;
   const { sizes: bannerSizes } = entityData || {};
 
@@ -81,7 +81,7 @@ const BannerRender = ({
 
   const customTargetings = setCustomTargetings(targetings, cardBannerIndex);
 
-  const targetingArguments = { ...parsedTargetings, ...customTargetings };
+  const targetingArguments = { ...parsedTargetings, ...customTargetings, ...userPropsData };
 
   return (
     <AdSlotRender
@@ -107,7 +107,8 @@ BannerRender.propTypes = {
   entity: PropTypes.string,
   targetings: PropTypes.string,
   sizes: PropTypes.string,
-  cardBannerIndex: PropTypes.number
+  cardBannerIndex: PropTypes.number,
+  userPropsData: PropTypes.object
 };
 
 BannerRender.defaultProps = {
@@ -118,7 +119,8 @@ BannerRender.defaultProps = {
   entity: '',
   targetings: '',
   sizes: '',
-  cardBannerIndex: null
+  cardBannerIndex: null,
+  userPropsData: {}
 };
 
 export default withTitle(BannerRender);

package/src/components/Banner/helpers.js

@@ -135,6 +135,52 @@ const getMinBannerHeight = bannerSizes => {
   return MIN_BANNER_HEIGHT;
 };
 
+const buildUserQuery = userProps => {
+  if (!userProps || !userProps.length) return '';
+  const basicProps = [];
+  const nestedProps = {};
+  userProps.forEach(({ propertiesToDisplay }) => {
+    const [propKey] = propertiesToDisplay;
+    if (!propKey || propKey === 'id') return;
+    if (propKey.indexOf('.') !== -1) {
+      const [baseProp, nestedProp] = propKey.split('.');
+      if (nestedProps[baseProp]) nestedProps[baseProp].push(nestedProp);
+      else nestedProps[baseProp] = [nestedProp];
+    } else basicProps.push(propKey);
+  });
+
+  Object.keys(nestedProps).forEach(nestedKey => {
+    const nested = nestedProps[nestedKey];
+    basicProps.push(nestedKey);
+    basicProps.push('{');
+    nested.forEach(prop => basicProps.push(prop));
+    basicProps.push('}');
+  });
+
+  return basicProps.join(' ');
+};
+
+const buildUserPropsData = (userData, userProps) => {
+  if (!userData || !userProps.length) return {};
+  const { getUser: user } = userData;
+  const propsWithData = {};
+  userProps.forEach(({ propertiesToDisplay, label }) => {
+    const [key] = propertiesToDisplay;
+    const parsedKey = key.split('.');
+    const value = getNestedValue(parsedKey, user);
+    const labelToUse = label || key;
+    if (value) propsWithData[labelToUse] = value;
+  });
+  return propsWithData;
+};
+
+const getNestedValue = (keys, object) => {
+  const key = keys.shift();
+  const nestedValue = object[key];
+  if (!nestedValue) return null;
+  return keys.length ? getNestedValue(keys, nestedValue) : nestedValue;
+};
+
 export {
   getParsedSizes,
   setCustomTargetings,
@@ -143,5 +189,7 @@ export {
   buildContextualTargeting,
   buildSizeMapping,
   getMaxBannerHeight,
-  getMinBannerHeight
+  getMinBannerHeight,
+  buildUserPropsData,
+  buildUserQuery
 };

package/src/components/BlazeLink.js

@@ -7,6 +7,7 @@ const BlazeLink = ({ children, className, name, href, as, shallow, scroll, gtmId
   const { hasGTM } = useContext(MainContext);
   const gtmProps = hasGTM && !!gtmId ? { gtmId } : {};
   const linkExtraProps = buildLinkExtraProps({ className, name, as, ...gtmProps });
+  if (!href) return children;
 
   return (
     <Link href={href} shallow={shallow} scroll={scroll} onClick={onClick} {...linkExtraProps}>

package/src/components/Card/Card.js

@@ -93,11 +93,9 @@ const Card = ({
               ))}
             {displayTitle && (
               <h2 className={getModifiers('card__title', modifiers)}>
-                {url && (
-                  <BlazeLink title={linkTitle} gtmId={gtmId} href={url} scroll>
-                    {headline}
-                  </BlazeLink>
-                )}
+                <BlazeLink title={linkTitle} gtmId={gtmId} href={url} scroll>
+                  {headline}
+                </BlazeLink>
               </h2>
             )}
             {!!propsToDisplay.length && (

package/src/components/Card/CardContainer.js

@@ -109,7 +109,9 @@ CardContainer.propTypes = {
   itemsPerRow: PropTypes.number,
   enableCarousel: PropTypes.bool,
   bannerModifier: PropTypes.string,
-  priorityLimit: PropTypes.number
+  priorityLimit: PropTypes.number,
+  enableAutoScroll: PropTypes.bool,
+  autoScrollTimer: PropTypes.number
 };
 
 CardContainer.defaultProps = {
@@ -127,7 +129,9 @@ CardContainer.defaultProps = {
   itemsPerRow: 1,
   enableCarousel: false,
   bannerModifier: '',
-  priorityLimit: 0
+  priorityLimit: 0,
+  enableAutoScroll: false,
+  autoScrollTimer: 0
 };
 
 export default withTitle(CardContainer);

package/src/components/Card/CardRender.js

@@ -22,6 +22,7 @@ import { filtersSetup, filterQuerySetup, shouldSkipSingleQuery, shouldReturn } f
 const CardContainer = dynamic(() => import('./CardContainer'));
 
 const CardRender = ({ entity, entityFields, itemsToDisplay, children, ...otherProps }) => {
+  const { isPreview } = useContext(MainContext);
   const {
     parent: { itemId, itemEntity },
     filterBy = [],
@@ -29,7 +30,8 @@ const CardRender = ({ entity, entityFields, itemsToDisplay, children, ...otherPr
     sortby,
     sort,
     sortProperties = [],
-    operator: filterOperator = AND
+    operator: filterOperator = AND,
+    useRandomSort
   } = otherProps;
 
   const updatedSortProperties = [...sortProperties];
@@ -55,14 +57,15 @@ const CardRender = ({ entity, entityFields, itemsToDisplay, children, ...otherPr
     entity
   ]);
 
-  const { isPreview } = useContext(MainContext);
-  const { entityType, docType } = getEntityData(entity);
+  const schemas = Object.values(mainSchemas);
+  const currentSchema = schemas.find(({ identifier }) => identifier === itemEntityUpdated) || {};
+  const filterEntitySchema = schemas.find(({ id }) => entity === id) || {};
+  const { entityType, docType } = getEntityData(entity, filterEntitySchema);
+
   const {
     getAction,
     queryProps,
     inheritedFilters,
-    currentSchema,
-    filterEntitySchema,
     entitySameAsCurrentItemEntity,
     action,
     filterEntityRelations
@@ -72,7 +75,8 @@ const CardRender = ({ entity, entityFields, itemsToDisplay, children, ...otherPr
     filterBy,
     filterByProperty,
     entity,
-    getEntitySchemas: Object.values(mainSchemas),
+    currentSchema,
+    filterEntitySchema,
     isPreview,
     itemEntityUpdated
   });
@@ -111,12 +115,15 @@ const CardRender = ({ entity, entityFields, itemsToDisplay, children, ...otherPr
     filterOperator,
     filterEntityRelations,
     itemsToDisplay,
-    entitySameAsCurrentItemEntity
+    entitySameAsCurrentItemEntity,
+    useRandomSort
   });
   const { data, error: cardsError, loading: cardsLoading } = useQuery(action, {
     variables,
+    fetchPolicy: useRandomSort ? 'cache-and-network' : 'cache-first',
     skip: shouldReturn(!updatedFilterBy, _loading, _load, schemaLoading, _error, _err, schemaError)
   });
+
   const imageIds = itemsToDisplay.map(({ imageId }) => imageId).filter(Boolean);
   const { data: imagesData, loading: imagesLoading } = useGetImages(imageIds, true);
   const isLoading = shouldReturn(_loading, _load, schemaLoading, cardsLoading, imagesLoading);
@@ -126,11 +133,10 @@ const CardRender = ({ entity, entityFields, itemsToDisplay, children, ...otherPr
   if (isLoading) return '';
   if (hasError) return null;
   if (cardsError) return cardsError.message;
-
   let { results: cardData } = data[SEARCH_PUBLISHED_CONTENT];
   if (!cardData || !cardData.length) return null;
   cardData = entitySameAsCurrentItemEntity ? removeExtraItems(cardData, limit, itemId) : cardData;
-  const orderedData = sortResponseData(cardData, itemsToDisplay);
+  const orderedData = useRandomSort ? cardData : sortResponseData(cardData, itemsToDisplay);
   const { regularChildren, gtmChildren } = splitChildren(children, cardData, entity, {
     name: variableProps.name
   });

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

@@ -11,7 +11,9 @@ const filterQuerySetup = ({
   filterOperator,
   filterEntityRelations,
   itemsToDisplay,
-  entitySameAsCurrentItemEntity
+  entitySameAsCurrentItemEntity,
+  entitySchema,
+  useRandomSort
 }) => {
   const stringProps = getStringTypeProps(entity, filterEntityRelations, getEntitySchemas);
   const filterValues =
@@ -27,7 +29,9 @@ const filterQuerySetup = ({
       relations: filterEntityRelations,
       stringProps,
       itemsToDisplay,
-      addListFiltersToQuery: true
+      addListFiltersToQuery: true,
+      entity,
+      entitySchema
     })
   };
 
@@ -39,7 +43,9 @@ const filterQuerySetup = ({
     filterEntityRelations,
     { ...variableProps, limit: requestLimit },
     stringProps,
-    JSON.stringify(rawQuery)
+    rawQuery,
+    false,
+    useRandomSort
   );
 
   return { variables, limit };

package/src/components/Card/helpers/filters-setup.js

@@ -7,18 +7,15 @@ const filtersSetup = ({
   filterBy,
   filterByProperty,
   entity,
-  getEntitySchemas,
+  currentSchema,
+  filterEntitySchema,
   isPreview,
   itemEntityUpdated
 }) => {
   const fields = buildQueryFields(entityFields, entityType);
   const action = getSearchPublishedContent(fields);
   const inheritedFilters = getInheritedFilters(filterBy, filterByProperty);
-
   const entitySameAsCurrentItemEntity = itemEntityUpdated === entity;
-  const currentSchema =
-    getEntitySchemas.find(({ identifier }) => identifier === itemEntityUpdated) || {};
-  const filterEntitySchema = getEntitySchemas.find(({ id }) => entity === id) || {};
   const { relations: filterEntityRelations = [] } = filterEntitySchema;
   const queryProps = getQueryProps(inheritedFilters, currentSchema, filterEntitySchema);
   const { actions = {} } = currentSchema || {};

package/src/components/List/ListBuilder.js

@@ -62,7 +62,7 @@ const ListBuilder = props => {
   const shouldApplyDefaultSort = !sortProperties || !sortProperties.length;
   const itemsPerPageToUse = getItemsPerPageToUse(itemsPerPage, limitToUse);
   const initialOffset = getCurrentOffset(offset, itemsPerPageToUse, paginationIndex, limitToUse);
-  const { entityType, docType } = getEntityData(entity);
+  const { entityType, docType } = getEntityData(entity, requiredSchema);
   const fields = buildQueryFields(entityFields, entityType, !isCard);
   const action = getSearchPublishedContent(fields);
   const actionKey = SEARCH_PUBLISHED_CONTENT;
@@ -110,7 +110,7 @@ const ListBuilder = props => {
       sortProperties
     },
     stringProps,
-    JSON.stringify(azRawQuery),
+    azRawQuery,
     isTextSearchFilterApplied
   );
 
@@ -153,7 +153,7 @@ const ListBuilder = props => {
       sortProperties
     },
     stringProps,
-    JSON.stringify(rawQuery),
+    rawQuery,
     isTextSearchFilterApplied
   );
 

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

@@ -59,7 +59,7 @@ const getTypeBaseProps = (data, cardOptions, extraPropsHaveCategory) => {
   if (!isCard) return { typeBasedProps: [ID], shouldAddCategoryProps };
 
   const { getEntitySchema } = data;
-  const { interfaces, properties, dynamicProperties } = getEntitySchema;
+  const { interfaces, properties, dynamicProperties, relations } = getEntitySchema;
 
   const isContent = !!interfaces.includes('content/content');
   const hasCategory = checkProps(properties) || checkProps(dynamicProperties);
@@ -68,19 +68,16 @@ const getTypeBaseProps = (data, cardOptions, extraPropsHaveCategory) => {
   const typeBasedProps = [...defaultProps];
 
   typeBasedProps.push(...getCategoyProps(shouldAddCategoryProps, hasCategory, hasPreheader));
-  typeBasedProps.push(...getContentProps(isContent, displayThumbnail));
+  typeBasedProps.push(...getContentProps(isContent));
+
+  if (displayThumbnail && relations.find(({ localField }) => localField === 'image')) {
+    typeBasedProps.push('image.id', 'image.url', 'image.data');
+  }
 
   return { typeBasedProps, shouldAddCategoryProps };
 };
 
-const getContentProps = (isContent, displayThumbnail) => {
-  if (!isContent) return [];
-
-  const props = ['url', 'sponsored', 'featured'];
-  if (displayThumbnail) props.push('image.id', 'image.url', 'image.data');
-
-  return props;
-};
+const getContentProps = isContent => (isContent ? ['url', 'sponsored', 'featured'] : []);
 
 const getCategoyProps = (shouldAddCategoryProps, hasCategory, hasPreheader) => {
   if (!shouldAddCategoryProps) return [];

package/src/helpers/get-entity-data.js

@@ -1,11 +1,19 @@
 import upperFirst from 'lodash.upperfirst';
 import camelcase from 'lodash.camelcase';
 
-const getEntityData = entity => {
-  const docType = `published_${entity}`;
-  const entityType = `Published${upperFirst(camelcase(entity))}`;
+const getEntityData = (entity, schema) => {
+  const publishedDocType = `published_${entity}`;
+  const publishedEntityType = `Published${upperFirst(camelcase(entity))}`;
 
-  return { docType, entityType };
+  if (schema) {
+    const { interfaces, [entity]: { interfaces: nestedInterfaces } = {} } = schema || {};
+    const interfacesToCheck = interfaces || nestedInterfaces;
+    if (interfacesToCheck && !interfacesToCheck.includes('publish/publishable')) {
+      return { docType: entity, entityType: upperFirst(camelcase(entity)) };
+    }
+  }
+
+  return { docType: publishedDocType, entityType: publishedEntityType };
 };
 
 export default getEntityData;

package/src/helpers/get-generic-render-variables.js

@@ -3,6 +3,7 @@ import { DEFAULT_LIMIT, DEFAULT_OFFSET } from '../constants';
 
 const buildSortValues = (sortFilters, relations, stringProps) => {
   if (!sortFilters || !sortFilters.length) return { sort: [] };
+
   const sortValues = sortFilters
     .map(({ sort, propsToDisplay }) => {
       if (!sort) return null;
@@ -32,18 +33,41 @@ const getGenericRenderVariables = (
   relations,
   filterProps = {},
   stringProps = [],
-  rawQueryStringified = '',
-  isTextSearchFilterApplied = false
+  rawQuery = {},
+  isTextSearchFilterApplied = false,
+  useRandomSort = false
 ) => {
   const { limit = DEFAULT_LIMIT, offset } = filterProps;
+  const limitToUse = Number(limit || DEFAULT_LIMIT);
+  const offsetToUse = Number(offset || DEFAULT_OFFSET);
+
+  if (useRandomSort) {
+    const rawQueryStringified = JSON.stringify({
+      query: {
+        function_score: {
+          query: rawQuery,
+          random_score: {},
+          boost_mode: 'replace'
+        }
+      }
+    });
+
+    return {
+      limit: limitToUse,
+      offset: offsetToUse,
+      rawQueryStringified
+    };
+  }
+
   const sort = getCorrectSort(relations, filterProps, stringProps, isTextSearchFilterApplied);
-  const raw = rawQueryStringified ? { rawQueryStringified } : {};
 
   return {
-    limit: Number(limit || DEFAULT_LIMIT),
-    offset: Number(offset || DEFAULT_OFFSET),
+    limit: limitToUse,
+    offset: offsetToUse,
     ...sort,
-    ...raw
+    rawQueryStringified: JSON.stringify({
+      query: rawQuery
+    })
   };
 };
 

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

@@ -9,8 +9,8 @@ jest.mock('react-dfp', () => {
     <div
       data-testid="adslot-test"
       role="button"
-      onMouseLeave={() => onSlotRender({ event: { isEmpty: true } })}
-      onMouseOver={() => onSlotRender({ event: { isEmpty: false } })}
+      onMouseLeave={() => onSlotRender({ event: { isEmpty: true, size: null } })}
+      onMouseOver={() => onSlotRender({ event: { isEmpty: false, size: [970, 250] } })}
     />
   );
   return { AdSlot };
@@ -61,7 +61,7 @@ describe('Banner render component', () => {
       expect(asFragment()).toMatchSnapshot();
     });
 
-    it('should change class and remove styles after loaded events', async () => {
+    it('should change class and remove responsive styles after loaded events', async () => {
       const { asFragment, container, getByTestId } = render(<AdSlotRender {...defaultProps} />);
       const adSlot = getByTestId(slotTestId);
 
@@ -69,6 +69,7 @@ describe('Banner render component', () => {
       await waitFor(() =>
         expect(container.childNodes[0]).toHaveClass('ad-slot ad-slot-loaded banner-sizeId')
       );
+      expect(container.childNodes[0]).toHaveStyle('min-height: 250px');
       expect(asFragment()).toMatchSnapshot();
 
       fireEvent.mouseLeave(adSlot);

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

@@ -1,9 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Banner render component AdSlot loading should change class and remove styles after loaded events 1`] = `
+exports[`Banner render component AdSlot loading should change class and remove responsive styles after loaded events 1`] = `
 <DocumentFragment>
   <div
     class="ad-slot ad-slot-loaded banner-sizeId"
+    style="min-height: 250px;"
   >
     <div
       data-testid="adslot-test"
@@ -13,10 +14,11 @@ exports[`Banner render component AdSlot loading should change class and remove s
 </DocumentFragment>
 `;
 
-exports[`Banner render component AdSlot loading should change class and remove styles after loaded events 2`] = `
+exports[`Banner render component AdSlot loading should change class and remove responsive styles after loaded events 2`] = `
 <DocumentFragment>
   <div
     class="ad-slot ad-slot-empty banner-sizeId"
+    style=""
   >
     <div
       data-testid="adslot-test"
@@ -29,7 +31,9 @@ exports[`Banner render component AdSlot loading should change class and remove s
 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;}
+    @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"
@@ -45,7 +49,9 @@ exports[`Banner render component AdSlot loading should render AdSlot 1`] = `
 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;}
+    @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"