diff --git a/src/lib/Preview.js b/src/lib/Preview.js index ff3043cb1..6cbfef2c1 100644 --- a/src/lib/Preview.js +++ b/src/lib/Preview.js @@ -980,6 +980,9 @@ class Preview extends EventEmitter { // have preview permissions (any collaboration role except for `Uploader`). this.options.downloadWM = !!options.downloadWM; + // Object with ftux experience data that can determine whether specific experiences can show + this.options.experiences = options.experiences || {}; + // Options that are applicable to certain file ids this.options.fileOptions = options.fileOptions || {}; diff --git a/src/lib/viewers/controls/annotations/AnnotationsTargetedTooltip.tsx b/src/lib/viewers/controls/annotations/AnnotationsTargetedTooltip.tsx index 40a2faa05..969d14c0b 100644 --- a/src/lib/viewers/controls/annotations/AnnotationsTargetedTooltip.tsx +++ b/src/lib/viewers/controls/annotations/AnnotationsTargetedTooltip.tsx @@ -12,6 +12,7 @@ export type Props = React.PropsWithChildren<{ function AnnotationsTargetedTooltip({ children, isEnabled = false }: Props): JSX.Element | null { const { experiences } = React.useContext(ExperiencesContext); const { setIsForced } = React.useContext(ControlsLayerContext); + const [shouldTargetAnnotationsTooltip, setShouldTargetAnnotationsTooltip] = React.useState(true); const [wasClosedByUser, setWasClosedByUser] = React.useState(false); const shouldTarget = !!( @@ -28,7 +29,7 @@ function AnnotationsTargetedTooltip({ children, isEnabled = false }: Props): JSX return ( @@ -44,6 +45,10 @@ function AnnotationsTargetedTooltip({ children, isEnabled = false }: Props): JSX experiences.tooltipFlowAnnotationsExperience.onClose(); setIsForced(false); }, + onComplete: (): void => { + experiences.tooltipFlowAnnotationsExperience.onComplete(); + setShouldTargetAnnotationsTooltip(false); + }, onShow: (): void => { experiences.tooltipFlowAnnotationsExperience.onShow(); diff --git a/src/lib/viewers/image/ImageBaseViewer.js b/src/lib/viewers/image/ImageBaseViewer.js index e2d1a14a4..1098b9892 100644 --- a/src/lib/viewers/image/ImageBaseViewer.js +++ b/src/lib/viewers/image/ImageBaseViewer.js @@ -29,6 +29,7 @@ class ImageBaseViewer extends BaseViewer { this.handleMouseUp = this.handleMouseUp.bind(this); this.cancelDragEvent = this.cancelDragEvent.bind(this); this.finishLoading = this.finishLoading.bind(this); + this.isDiscoverabilityEnabled = this.isDiscoverabilityEnabled.bind(this); if (this.isMobile) { if (Browser.isIOS()) { @@ -137,6 +138,19 @@ class ImageBaseViewer extends BaseViewer { this.emit('panstart'); } + /** + * Determines whether discoverability is enabled + * + * @private + * @return {boolean} value of whether discoverability is enabled for given type + */ + isDiscoverabilityEnabled() { + const { enableAnnotationsImageDiscoverability, experiences = {} } = this.options; + const canShow = Object.values(experiences).some(experience => experience.canShow); + + return !canShow && !!enableAnnotationsImageDiscoverability; + } + /** * Pan the image to the given x/y position * diff --git a/src/lib/viewers/image/ImageViewer.js b/src/lib/viewers/image/ImageViewer.js index 92b145a3a..8b87513d4 100644 --- a/src/lib/viewers/image/ImageViewer.js +++ b/src/lib/viewers/image/ImageViewer.js @@ -37,7 +37,7 @@ class ImageViewer extends ImageBaseViewer { this.updatePannability = this.updatePannability.bind(this); this.annotationControlsFSM = new AnnotationControlsFSM( - this.options.enableAnnotationsImageDiscoverability ? AnnotationState.REGION_TEMP : AnnotationState.NONE, + this.isDiscoverabilityEnabled() ? AnnotationState.REGION_TEMP : AnnotationState.NONE, ); this.annotationControlsFSM.subscribe(this.applyCursorFtux); @@ -54,7 +54,7 @@ class ImageViewer extends ImageBaseViewer { * @return {void} */ destroy() { - if (this.options.enableAnnotationsImageDiscoverability) { + if (this.isDiscoverabilityEnabled()) { this.removeListener('zoom', this.handleZoomEvent); } @@ -86,7 +86,7 @@ class ImageViewer extends ImageBaseViewer { const fileName = getProp(this.options, 'file.name'); this.imageEl.setAttribute('alt', fileName); - if (this.options.enableAnnotationsImageDiscoverability) { + if (this.isDiscoverabilityEnabled()) { this.addListener('zoom', this.handleZoomEvent); } @@ -189,7 +189,7 @@ class ImageViewer extends ImageBaseViewer { // Annotation overrides getInitialAnnotationMode() { - return this.options.enableAnnotationsImageDiscoverability ? AnnotationMode.REGION : AnnotationMode.NONE; + return this.isDiscoverabilityEnabled() ? AnnotationMode.REGION : AnnotationMode.NONE; } /** @@ -576,7 +576,7 @@ class ImageViewer extends ImageBaseViewer { } const isDiscoverable = this.annotationControlsFSM.getState() === AnnotationState.REGION_TEMP; - const isUsingDiscoverability = this.options.enableAnnotationsImageDiscoverability && isDiscoverable; + const isUsingDiscoverability = this.isDiscoverabilityEnabled() && isDiscoverable; // For tracking purposes, set property to true when the annotation controls are in a state // in which the default discoverability experience is enabled diff --git a/src/lib/viewers/image/__tests__/ImageViewer-test.js b/src/lib/viewers/image/__tests__/ImageViewer-test.js index 3a1275e4a..299b7b683 100644 --- a/src/lib/viewers/image/__tests__/ImageViewer-test.js +++ b/src/lib/viewers/image/__tests__/ImageViewer-test.js @@ -895,4 +895,26 @@ describe('lib/viewers/image/ImageViewer', () => { expect(image.cache.set).toBeCalledWith(IMAGE_FTUX_CURSOR_SEEN_KEY, true, true); }); }); + + describe('isDiscoverabilityEnabled()', () => { + test.each` + canShow | enableAnnotationsImageDiscoverability | result + ${true} | ${true} | ${false} + ${true} | ${false} | ${false} + ${false} | ${true} | ${true} + ${false} | ${false} | ${false} + `( + 'should return correct value for isDiscoverabilityEnabled', + ({ canShow, enableAnnotationsImageDiscoverability, result }) => { + image.options.experiences = { + tooltipFlowAnnotationsExperience: { + canShow, + }, + }; + image.options.enableAnnotationsImageDiscoverability = enableAnnotationsImageDiscoverability; + + expect(image.isDiscoverabilityEnabled()).toBe(result); + }, + ); + }); });