box-ui-elements 16.1.0-beta.9 → 17.0.0

package/es/elements/content-picker/Footer.js.flow

@@ -5,8 +5,9 @@
  */
 
 import React from 'react';
+import { injectIntl, FormattedMessage } from 'react-intl';
 import type { Node } from 'react';
-import { FormattedMessage } from 'react-intl';
+
 import type { Collection, BoxItem } from '../../common/types/core';
 import Button from '../../components/button';
 import ButtonGroup from '../../components/button-group';
@@ -24,6 +25,7 @@ type Props = {
     chooseButtonLabel?: string,
     currentCollection: Collection,
     hasHitSelectionLimit: boolean,
+    intl: any,
     isSingleSelect: boolean,
     onCancel: Function,
     onChoose: Function,
@@ -45,6 +47,7 @@ const Footer = ({
     selectedItems,
     onSelectedClick,
     hasHitSelectionLimit,
+    intl,
     isSingleSelect,
     onCancel,
     onChoose,
@@ -53,55 +56,63 @@ const Footer = ({
     children,
     renderCustomActionButtons,
     showSelectedButton,
-}: Props) => (
-    <footer className="bcp-footer">
-        <div className="bcp-footer-left">
-            {showSelectedButton && !isSingleSelect && (
-                <Button className="bcp-selected" onClick={onSelectedClick} type="button">
-                    <FormattedMessage
-                        className="bcp-selected-count"
-                        {...messages.selected}
-                        values={{ count: selectedCount }}
-                    />
-                    {hasHitSelectionLimit && (
-                        <span className="bcp-selected-max">
-                            (<FormattedMessage {...messages.max} />)
-                        </span>
-                    )}
-                </Button>
-            )}
-        </div>
-        <div className="bcp-footer-right">
-            {children}
+}: Props) => {
+    const cancelMessage = intl.formatMessage(messages.cancel);
+    const chooseMessage = intl.formatMessage(messages.choose);
+    const isChooseButtonDisabled = !selectedCount;
+    return (
+        <footer className="bcp-footer">
+            <div className="bcp-footer-left">
+                {showSelectedButton && !isSingleSelect && (
+                    <Button className="bcp-selected" onClick={onSelectedClick} type="button">
+                        <FormattedMessage
+                            className="bcp-selected-count"
+                            {...messages.selected}
+                            values={{ count: selectedCount }}
+                        />
+                        {hasHitSelectionLimit && (
+                            <span className="bcp-selected-max">
+                                (<FormattedMessage {...messages.max} />)
+                            </span>
+                        )}
+                    </Button>
+                )}
+            </div>
+            <div className="bcp-footer-right">
+                {children}
 
-            {renderCustomActionButtons ? (
-                renderCustomActionButtons({
-                    currentFolderId: currentCollection.id,
-                    currentFolderName: currentCollection.name,
-                    onCancel,
-                    onChoose,
-                    selectedCount,
-                    selectedItems,
-                })
-            ) : (
-                <ButtonGroup className="bcp-footer-actions">
-                    <Tooltip text={cancelButtonLabel || <FormattedMessage {...messages.cancel} />}>
-                        <Button onClick={onCancel} type="button">
-                            <IconClose height={16} width={16} />
-                        </Button>
-                    </Tooltip>
-                    <Tooltip
-                        isDisabled={!selectedCount}
-                        text={chooseButtonLabel || <FormattedMessage {...messages.choose} />}
-                    >
-                        <PrimaryButton isDisabled={!selectedCount} onClick={onChoose} type="button">
-                            <IconCheck color="#fff" height={16} width={16} />
-                        </PrimaryButton>
-                    </Tooltip>
-                </ButtonGroup>
-            )}
-        </div>
-    </footer>
-);
+                {renderCustomActionButtons ? (
+                    renderCustomActionButtons({
+                        currentFolderId: currentCollection.id,
+                        currentFolderName: currentCollection.name,
+                        onCancel,
+                        onChoose,
+                        selectedCount,
+                        selectedItems,
+                    })
+                ) : (
+                    <ButtonGroup className="bcp-footer-actions">
+                        <Tooltip text={cancelButtonLabel || cancelMessage}>
+                            <Button aria-label={cancelMessage} onClick={onCancel} type="button">
+                                <IconClose height={16} width={16} />
+                            </Button>
+                        </Tooltip>
+                        <Tooltip isDisabled={isChooseButtonDisabled} text={chooseButtonLabel || chooseMessage}>
+                            <PrimaryButton
+                                aria-label={chooseMessage}
+                                disabled={isChooseButtonDisabled} // sets disabled attribute
+                                isDisabled={isChooseButtonDisabled} // used in Button component
+                                onClick={onChoose}
+                                type="button"
+                            >
+                                <IconCheck color="#fff" height={16} width={16} />
+                            </PrimaryButton>
+                        </Tooltip>
+                    </ButtonGroup>
+                )}
+            </div>
+        </footer>
+    );
+};
 
-export default Footer;
+export default injectIntl(Footer);

package/es/elements/content-picker/Footer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/content-picker/Footer.js"],"names":["React","FormattedMessage","Button","ButtonGroup","IconCheck","IconClose","messages","PrimaryButton","Tooltip","Footer","currentCollection","selectedCount","selectedItems","onSelectedClick","hasHitSelectionLimit","isSingleSelect","onCancel","onChoose","chooseButtonLabel","cancelButtonLabel","children","renderCustomActionButtons","showSelectedButton","selected","count","max","currentFolderId","id","currentFolderName","name","cancel","choose"],"mappings":"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","sourcesContent":["/**\n * @flow\n * @file Footer list component\n * @author Box\n */\n\nimport React from 'react';\nimport type { Node } from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport type { Collection, BoxItem } from '../../common/types/core';\nimport Button from '../../components/button';\nimport ButtonGroup from '../../components/button-group';\nimport IconCheck from '../../icons/general/IconCheck';\nimport IconClose from '../../icons/general/IconClose';\nimport messages from '../common/messages';\n\nimport PrimaryButton from '../../components/primary-button';\nimport Tooltip from '../common/Tooltip';\nimport './Footer.scss';\n\ntype Props = {\n    cancelButtonLabel?: string,\n    children?: any,\n    chooseButtonLabel?: string,\n    currentCollection: Collection,\n    hasHitSelectionLimit: boolean,\n    isSingleSelect: boolean,\n    onCancel: Function,\n    onChoose: Function,\n    onSelectedClick: Function,\n    renderCustomActionButtons?: ({\n        onCancel: Function,\n        onChoose: Function,\n        selectedCount: number,\n        selectedItems: BoxItem[],\n    }) => Node,\n    selectedCount: number,\n    selectedItems: BoxItem[],\n    showSelectedButton: boolean,\n};\n\nconst Footer = ({\n    currentCollection,\n    selectedCount,\n    selectedItems,\n    onSelectedClick,\n    hasHitSelectionLimit,\n    isSingleSelect,\n    onCancel,\n    onChoose,\n    chooseButtonLabel,\n    cancelButtonLabel,\n    children,\n    renderCustomActionButtons,\n    showSelectedButton,\n}: Props) => (\n    <footer className=\"bcp-footer\">\n        <div className=\"bcp-footer-left\">\n            {showSelectedButton && !isSingleSelect && (\n                <Button className=\"bcp-selected\" onClick={onSelectedClick} type=\"button\">\n                    <FormattedMessage\n                        className=\"bcp-selected-count\"\n                        {...messages.selected}\n                        values={{ count: selectedCount }}\n                    />\n                    {hasHitSelectionLimit && (\n                        <span className=\"bcp-selected-max\">\n                            (<FormattedMessage {...messages.max} />)\n                        </span>\n                    )}\n                </Button>\n            )}\n        </div>\n        <div className=\"bcp-footer-right\">\n            {children}\n\n            {renderCustomActionButtons ? (\n                renderCustomActionButtons({\n                    currentFolderId: currentCollection.id,\n                    currentFolderName: currentCollection.name,\n                    onCancel,\n                    onChoose,\n                    selectedCount,\n                    selectedItems,\n                })\n            ) : (\n                <ButtonGroup className=\"bcp-footer-actions\">\n                    <Tooltip text={cancelButtonLabel || <FormattedMessage {...messages.cancel} />}>\n                        <Button onClick={onCancel} type=\"button\">\n                            <IconClose height={16} width={16} />\n                        </Button>\n                    </Tooltip>\n                    <Tooltip\n                        isDisabled={!selectedCount}\n                        text={chooseButtonLabel || <FormattedMessage {...messages.choose} />}\n                    >\n                        <PrimaryButton isDisabled={!selectedCount} onClick={onChoose} type=\"button\">\n                            <IconCheck color=\"#fff\" height={16} width={16} />\n                        </PrimaryButton>\n                    </Tooltip>\n                </ButtonGroup>\n            )}\n        </div>\n    </footer>\n);\n\nexport default Footer;\n"],"file":"Footer.js"}
+{"version":3,"sources":["../../../src/elements/content-picker/Footer.js"],"names":["React","injectIntl","FormattedMessage","Button","ButtonGroup","IconCheck","IconClose","messages","PrimaryButton","Tooltip","Footer","currentCollection","selectedCount","selectedItems","onSelectedClick","hasHitSelectionLimit","intl","isSingleSelect","onCancel","onChoose","chooseButtonLabel","cancelButtonLabel","children","renderCustomActionButtons","showSelectedButton","cancelMessage","formatMessage","cancel","chooseMessage","choose","isChooseButtonDisabled","selected","count","max","currentFolderId","id","currentFolderName","name"],"mappings":"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","sourcesContent":["/**\n * @flow\n * @file Footer list component\n * @author Box\n */\n\nimport React from 'react';\nimport { injectIntl, FormattedMessage } from 'react-intl';\nimport type { Node } from 'react';\n\nimport type { Collection, BoxItem } from '../../common/types/core';\nimport Button from '../../components/button';\nimport ButtonGroup from '../../components/button-group';\nimport IconCheck from '../../icons/general/IconCheck';\nimport IconClose from '../../icons/general/IconClose';\nimport messages from '../common/messages';\n\nimport PrimaryButton from '../../components/primary-button';\nimport Tooltip from '../common/Tooltip';\nimport './Footer.scss';\n\ntype Props = {\n    cancelButtonLabel?: string,\n    children?: any,\n    chooseButtonLabel?: string,\n    currentCollection: Collection,\n    hasHitSelectionLimit: boolean,\n    intl: any,\n    isSingleSelect: boolean,\n    onCancel: Function,\n    onChoose: Function,\n    onSelectedClick: Function,\n    renderCustomActionButtons?: ({\n        onCancel: Function,\n        onChoose: Function,\n        selectedCount: number,\n        selectedItems: BoxItem[],\n    }) => Node,\n    selectedCount: number,\n    selectedItems: BoxItem[],\n    showSelectedButton: boolean,\n};\n\nconst Footer = ({\n    currentCollection,\n    selectedCount,\n    selectedItems,\n    onSelectedClick,\n    hasHitSelectionLimit,\n    intl,\n    isSingleSelect,\n    onCancel,\n    onChoose,\n    chooseButtonLabel,\n    cancelButtonLabel,\n    children,\n    renderCustomActionButtons,\n    showSelectedButton,\n}: Props) => {\n    const cancelMessage = intl.formatMessage(messages.cancel);\n    const chooseMessage = intl.formatMessage(messages.choose);\n    const isChooseButtonDisabled = !selectedCount;\n    return (\n        <footer className=\"bcp-footer\">\n            <div className=\"bcp-footer-left\">\n                {showSelectedButton && !isSingleSelect && (\n                    <Button className=\"bcp-selected\" onClick={onSelectedClick} type=\"button\">\n                        <FormattedMessage\n                            className=\"bcp-selected-count\"\n                            {...messages.selected}\n                            values={{ count: selectedCount }}\n                        />\n                        {hasHitSelectionLimit && (\n                            <span className=\"bcp-selected-max\">\n                                (<FormattedMessage {...messages.max} />)\n                            </span>\n                        )}\n                    </Button>\n                )}\n            </div>\n            <div className=\"bcp-footer-right\">\n                {children}\n\n                {renderCustomActionButtons ? (\n                    renderCustomActionButtons({\n                        currentFolderId: currentCollection.id,\n                        currentFolderName: currentCollection.name,\n                        onCancel,\n                        onChoose,\n                        selectedCount,\n                        selectedItems,\n                    })\n                ) : (\n                    <ButtonGroup className=\"bcp-footer-actions\">\n                        <Tooltip text={cancelButtonLabel || cancelMessage}>\n                            <Button aria-label={cancelMessage} onClick={onCancel} type=\"button\">\n                                <IconClose height={16} width={16} />\n                            </Button>\n                        </Tooltip>\n                        <Tooltip isDisabled={isChooseButtonDisabled} text={chooseButtonLabel || chooseMessage}>\n                            <PrimaryButton\n                                aria-label={chooseMessage}\n                                disabled={isChooseButtonDisabled} // sets disabled attribute\n                                isDisabled={isChooseButtonDisabled} // used in Button component\n                                onClick={onChoose}\n                                type=\"button\"\n                            >\n                                <IconCheck color=\"#fff\" height={16} width={16} />\n                            </PrimaryButton>\n                        </Tooltip>\n                    </ButtonGroup>\n                )}\n            </div>\n        </footer>\n    );\n};\n\nexport default injectIntl(Footer);\n"],"file":"Footer.js"}

package/es/elements/content-picker/ItemList.scss

@@ -79,7 +79,7 @@
         select {
             &.bcp-shared-access-select {
                 background-color: $white;
-                background-image: linear-gradient(45deg, transparent 50%, $bdl-gray-62 50%), linear-gradient(135deg, $bdl-gray-62 50%, transparent 50%);
+                background-image: linear-gradient(45deg, transparent 50%, $bdl-gray-65 50%), linear-gradient(135deg, $bdl-gray-65 50%, transparent 50%);
                 border-color: $bdl-gray-20;
             }
         }

package/es/elements/content-preview/ContentPreview.js

@@ -40,14 +40,15 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import 'regenerator-runtime/runtime';
 import * as React from 'react';
 import classNames from 'classnames';
-import uniqueid from 'lodash/uniqueId';
-import throttle from 'lodash/throttle';
 import cloneDeep from 'lodash/cloneDeep';
-import omit from 'lodash/omit';
-import getProp from 'lodash/get';
 import flow from 'lodash/flow';
+import getProp from 'lodash/get';
+import isEqual from 'lodash/isEqual';
 import noop from 'lodash/noop';
+import omit from 'lodash/omit';
 import setProp from 'lodash/set';
+import throttle from 'lodash/throttle';
+import uniqueid from 'lodash/uniqueId';
 import Measure from 'react-measure';
 import { withRouter } from 'react-router-dom';
 import { decode } from '../../utils/keys';
@@ -203,15 +204,15 @@ function (_React$PureComponent) {
     _asyncToGenerator(
     /*#__PURE__*/
     regeneratorRuntime.mark(function _callee() {
-      var _this$props2, _this$props2$annotato, activeAnnotationId, enableThumbnailsSidebar, fileOptions, onAnnotatorEvent, onAnnotator, previewExperiences, showAnnotationsControls, tokenOrTokenFunction, rest, _this$state, file, selectedVersion, startAt, fileId, fileOpts, token, previewOptions, Preview;
+      var _this$props2, advancedContentInsights, _this$props2$annotato, activeAnnotationId, enableThumbnailsSidebar, fileOptions, onAnnotatorEvent, onAnnotator, onContentInsightsEventReport, previewExperiences, showAnnotationsControls, tokenOrTokenFunction, rest, _this$state, file, selectedVersion, startAt, fileId, fileOpts, token, previewOptions, Preview;
 
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              _this$props2 = _this.props, _this$props2$annotato = _this$props2.annotatorState;
+              _this$props2 = _this.props, advancedContentInsights = _this$props2.advancedContentInsights, _this$props2$annotato = _this$props2.annotatorState;
               _this$props2$annotato = _this$props2$annotato === void 0 ? {} : _this$props2$annotato;
-              activeAnnotationId = _this$props2$annotato.activeAnnotationId, enableThumbnailsSidebar = _this$props2.enableThumbnailsSidebar, fileOptions = _this$props2.fileOptions, onAnnotatorEvent = _this$props2.onAnnotatorEvent, onAnnotator = _this$props2.onAnnotator, previewExperiences = _this$props2.previewExperiences, showAnnotationsControls = _this$props2.showAnnotationsControls, tokenOrTokenFunction = _this$props2.token, rest = _objectWithoutProperties(_this$props2, ["annotatorState", "enableThumbnailsSidebar", "fileOptions", "onAnnotatorEvent", "onAnnotator", "previewExperiences", "showAnnotationsControls", "token"]);
+              activeAnnotationId = _this$props2$annotato.activeAnnotationId, enableThumbnailsSidebar = _this$props2.enableThumbnailsSidebar, fileOptions = _this$props2.fileOptions, onAnnotatorEvent = _this$props2.onAnnotatorEvent, onAnnotator = _this$props2.onAnnotator, onContentInsightsEventReport = _this$props2.onContentInsightsEventReport, previewExperiences = _this$props2.previewExperiences, showAnnotationsControls = _this$props2.showAnnotationsControls, tokenOrTokenFunction = _this$props2.token, rest = _objectWithoutProperties(_this$props2, ["advancedContentInsights", "annotatorState", "enableThumbnailsSidebar", "fileOptions", "onAnnotatorEvent", "onAnnotator", "onContentInsightsEventReport", "previewExperiences", "showAnnotationsControls", "token"]);
               _this$state = _this.state, file = _this$state.file, selectedVersion = _this$state.selectedVersion, startAt = _this$state.startAt;
 
               if (!(!_this.isPreviewLibraryLoaded() || !file || !tokenOrTokenFunction)) {
@@ -252,6 +253,7 @@ function (_React$PureComponent) {
               }
 
               previewOptions = {
+                advancedContentInsights: advancedContentInsights,
                 container: "#".concat(_this.id, " .bcpr-content"),
                 enableThumbnailsSidebar: enableThumbnailsSidebar,
                 fileOptions: fileOpts,
@@ -295,7 +297,11 @@ function (_React$PureComponent) {
 
               _this.preview.show(file.id, token, _objectSpread({}, previewOptions, {}, omit(rest, Object.keys(previewOptions))));
 
-            case 25:
+              if (advancedContentInsights) {
+                _this.preview.addListener('advanced_insights_report', onContentInsightsEventReport);
+              }
+
+            case 26:
             case "end":
               return _context.stop();
           }
@@ -547,6 +553,16 @@ function (_React$PureComponent) {
       _this.previewContainer = container;
     });
 
+    _defineProperty(_assertThisInitialized(_this), "getThumbnail", function (pageNumber) {
+      var preview = _this.getPreview();
+
+      if (preview && preview.viewer) {
+        return preview.viewer.getThumbnail(pageNumber);
+      }
+
+      return null;
+    });
+
     var apiHost = props.apiHost,
         cache = props.cache,
         _fileId = props.fileId,
@@ -647,14 +663,19 @@ function (_React$PureComponent) {
      * @return {void}
      */
     value: function componentDidUpdate(prevProps, prevState) {
+      var _this$preview;
+
       var _this$props3 = this.props,
+          advancedContentInsights = _this$props3.advancedContentInsights,
           previewExperiences = _this$props3.previewExperiences,
           token = _this$props3.token;
-      var prevPreviewExperiences = prevProps.previewExperiences,
+      var prevContentInsightsOptions = prevProps.advancedContentInsights,
+          prevPreviewExperiences = prevProps.previewExperiences,
           prevToken = prevProps.token;
       var currentFileId = this.state.currentFileId;
       var hasFileIdChanged = prevState.currentFileId !== currentFileId;
       var hasTokenChanged = prevToken !== token;
+      var haveContentInsightsChanged = !isEqual(prevContentInsightsOptions, advancedContentInsights);
       var haveExperiencesChanged = prevPreviewExperiences !== previewExperiences;
 
       if (hasFileIdChanged) {
@@ -677,6 +698,10 @@ function (_React$PureComponent) {
       if (haveExperiencesChanged && this.preview && this.preview.updateExperiences) {
         this.preview.updateExperiences(previewExperiences);
       }
+
+      if (advancedContentInsights && haveContentInsightsChanged && ((_this$preview = this.preview) === null || _this$preview === void 0 ? void 0 : _this$preview.updateContentInsightsOptions)) {
+        this.preview.updateContentInsightsOptions(advancedContentInsights);
+      }
     }
     /**
      * Updates the access token used by preview library
@@ -1148,14 +1173,20 @@ function (_React$PureComponent) {
       }
     }
     /**
-     * Renders the file preview
+     * Fetches a thumbnail for the page given
      *
-     * @inheritdoc
-     * @return {Element}
+     * @return {Promise|null} - promise resolves with the image HTMLElement or null if generation is in progress
      */
 
   }, {
     key: "render",
+
+    /**
+     * Renders the file preview
+     *
+     * @inheritdoc
+     * @return {Element}
+     */
     value: function render() {
       var _this$props7 = this.props,
           apiHost = _this$props7.apiHost,
@@ -1306,6 +1337,7 @@ _defineProperty(ContentPreview, "defaultProps", {
   language: DEFAULT_LOCALE,
   onAnnotator: noop,
   onAnnotatorEvent: noop,
+  onContentInsightsEventReport: noop,
   onDownload: noop,
   onError: noop,
   onLoad: noop,

package/es/elements/content-preview/ContentPreview.js.flow

@@ -7,14 +7,15 @@
 import 'regenerator-runtime/runtime';
 import * as React from 'react';
 import classNames from 'classnames';
-import uniqueid from 'lodash/uniqueId';
-import throttle from 'lodash/throttle';
 import cloneDeep from 'lodash/cloneDeep';
-import omit from 'lodash/omit';
-import getProp from 'lodash/get';
 import flow from 'lodash/flow';
+import getProp from 'lodash/get';
+import isEqual from 'lodash/isEqual';
 import noop from 'lodash/noop';
+import omit from 'lodash/omit';
 import setProp from 'lodash/set';
+import throttle from 'lodash/throttle';
+import uniqueid from 'lodash/uniqueId';
 import Measure from 'react-measure';
 import { withRouter } from 'react-router-dom';
 import type { ContextRouter } from 'react-router-dom';
@@ -75,6 +76,11 @@ type StartAt = {
 };
 
 type Props = {
+    advancedContentInsights: {
+        isActive: boolean,
+        ownerEId: number,
+        userId: number,
+    },
     apiHost: string,
     appHost: string,
     autoFocus: boolean,
@@ -100,6 +106,7 @@ type Props = {
     onAnnotator: Function,
     onAnnotatorEvent: Function,
     onClose?: Function,
+    onContentInsightsEventReport: Function,
     onDownload: Function,
     onLoad: Function,
     onNavigate: Function,
@@ -229,6 +236,7 @@ class ContentPreview extends React.PureComponent<Props, State> {
         language: DEFAULT_LOCALE,
         onAnnotator: noop,
         onAnnotatorEvent: noop,
+        onContentInsightsEventReport: noop,
         onDownload: noop,
         onError: noop,
         onLoad: noop,
@@ -362,11 +370,16 @@ class ContentPreview extends React.PureComponent<Props, State> {
      * @return {void}
      */
     componentDidUpdate(prevProps: Props, prevState: State): void {
-        const { previewExperiences, token } = this.props;
-        const { previewExperiences: prevPreviewExperiences, token: prevToken } = prevProps;
+        const { advancedContentInsights, previewExperiences, token } = this.props;
+        const {
+            advancedContentInsights: prevContentInsightsOptions,
+            previewExperiences: prevPreviewExperiences,
+            token: prevToken,
+        } = prevProps;
         const { currentFileId } = this.state;
         const hasFileIdChanged = prevState.currentFileId !== currentFileId;
         const hasTokenChanged = prevToken !== token;
+        const haveContentInsightsChanged = !isEqual(prevContentInsightsOptions, advancedContentInsights);
         const haveExperiencesChanged = prevPreviewExperiences !== previewExperiences;
 
         if (hasFileIdChanged) {
@@ -384,6 +397,10 @@ class ContentPreview extends React.PureComponent<Props, State> {
         if (haveExperiencesChanged && this.preview && this.preview.updateExperiences) {
             this.preview.updateExperiences(previewExperiences);
         }
+
+        if (advancedContentInsights && haveContentInsightsChanged && this.preview?.updateContentInsightsOptions) {
+            this.preview.updateContentInsightsOptions(advancedContentInsights);
+        }
     }
 
     /**
@@ -750,11 +767,13 @@ class ContentPreview extends React.PureComponent<Props, State> {
      */
     loadPreview = async (): Promise<void> => {
         const {
+            advancedContentInsights,
             annotatorState: { activeAnnotationId } = {},
             enableThumbnailsSidebar,
             fileOptions,
             onAnnotatorEvent,
             onAnnotator,
+            onContentInsightsEventReport,
             previewExperiences,
             showAnnotationsControls,
             token: tokenOrTokenFunction,
@@ -789,6 +808,7 @@ class ContentPreview extends React.PureComponent<Props, State> {
         }
 
         const previewOptions = {
+            advancedContentInsights,
             container: `#${this.id} .bcpr-content`,
             enableThumbnailsSidebar,
             fileOptions: fileOpts,
@@ -820,6 +840,9 @@ class ContentPreview extends React.PureComponent<Props, State> {
             ...previewOptions,
             ...omit(rest, Object.keys(previewOptions)),
         });
+        if (advancedContentInsights) {
+            this.preview.addListener('advanced_insights_report', onContentInsightsEventReport);
+        }
     };
 
     /**
@@ -1210,6 +1233,20 @@ class ContentPreview extends React.PureComponent<Props, State> {
         }
     }
 
+    /**
+     * Fetches a thumbnail for the page given
+     *
+     * @return {Promise|null} - promise resolves with the image HTMLElement or null if generation is in progress
+     */
+    getThumbnail = (pageNumber: ?number): Promise<HTMLElement> | null => {
+        const preview = this.getPreview();
+        if (preview && preview.viewer) {
+            return preview.viewer.getThumbnail(pageNumber);
+        }
+
+        return null;
+    };
+
     /**
      * Renders the file preview
      *