Viewed By Customer

package.json

@@ -48,7 +48,7 @@
         "@types/jasmine": "^3.3.9",
         "@types/node": "^11.11.3",
         "@types/sinon": "^7.0.13",
-        "coveo-search-ui": "^2.6459.0",
+        "coveo-search-ui": "2.0.342",
         "coveo-search-ui-tests": "0.0.5",
         "coveralls": "^3.0.3",
         "istanbul-instrumenter-loader": "^3.0.1",

src/Index.ts

@@ -7,3 +7,4 @@ export { ClickedDocumentList } from './components/UserActions/ClickedDocumentLis
 export { QueryList } from './components/UserActions/QueryList';
 export { UserProfilingEndpoint } from './rest/UserProfilingEndpoint';
 export { ResultsFilter } from './components/ResultsFilter/ResultsFilter';
+export { ViewedByCustomer } from './components/ViewedByCustomer/ViewedByCustomer';

src/components/ViewedByCustomer/Strings.ts

@@ -0,0 +1,5 @@
+import { Translation, Language } from '../../utils/translation';
+
+Translation.register(Language.English, {
+    ViewedByCustomer_DefaultLabel: 'Viewed by Customer'
+});

src/components/ViewedByCustomer/ViewedByCustomer.scss

@@ -0,0 +1,18 @@
+@import '../../sass/Variables.scss';
+@import '../../sass/Text.scss';
+
+.CoveoViewedByCustomer {
+    color: black;
+    font-weight: bold;
+    font-size: 14px;
+    .viewed-by-customer-icon {
+        vertical-align: middle;
+        svg {
+            height: 1em;
+            width: 1em;
+        }
+    }
+    .viewed-by-customer-label {
+        vertical-align: baseline;
+    }
+}

src/components/ViewedByCustomer/ViewedByCustomer.ts

@@ -0,0 +1,70 @@
+import { Component, ComponentOptions, IComponentBindings, Initialization, l } from 'coveo-search-ui';
+import { user } from '../../utils/icons';
+import './Strings';
+
+/**
+ * The options for the ViewedByCustomerComponent
+ */
+export interface IViewedByCustomerOptions {
+    /**
+     * If true, will display an icon when the component is displayed itself.
+     */
+    showIcon?: boolean;
+    /**
+     * The label that should be displayed when the component is displayed.
+     */
+    label?: string;
+}
+
+/**
+ * Result component indicating if a search result have been viewed by the targeted user.
+ */
+export class ViewedByCustomer extends Component {
+    /**
+     * Unique Identifier used by the Search-UI.
+     */
+    public static readonly ID = 'ViewedByCustomer';
+
+    /**
+     * Default options used by the component.
+     */
+    public static readonly options: IViewedByCustomerOptions = {
+        showIcon: ComponentOptions.buildBooleanOption({ defaultValue: true }),
+        label: ComponentOptions.buildStringOption({ defaultValue: l(`${ViewedByCustomer.ID}_DefaultLabel`) })
+    };
+
+    // Internal CSS selectors.
+    private static readonly ICON_CLASS = 'viewed-by-customer-icon';
+    private static readonly LABEL_CLASS = 'viewed-by-customer-label';
+
+    /**
+     * Create an instance of {@link ViewedByCustomer}.
+     * @param element Element on which to bind the component.
+     * @param options Initialization options of the component.
+     * @param bindings Bindings of the Search-UI environment.
+     */
+    public constructor(public element: HTMLElement, public options: IViewedByCustomerOptions, public bindings: IComponentBindings) {
+        super(element, ViewedByCustomer.ID, bindings) /* istanbul ignore next Issue with Istanbul and super calls*/;
+        this.options = ComponentOptions.initComponentOptions(element, ViewedByCustomer, options);
+
+        if (this.resolveResult().isUserActionView) {
+            this.render();
+        }
+    }
+
+    private render() {
+        if (this.options.showIcon) {
+            const iconElement = document.createElement('span');
+            iconElement.classList.add(ViewedByCustomer.ICON_CLASS);
+            iconElement.innerHTML = user;
+            this.element.appendChild(iconElement);
+        }
+
+        const labelElement = document.createElement('span');
+        labelElement.classList.add(ViewedByCustomer.LABEL_CLASS);
+        labelElement.innerText = this.options.label;
+        this.element.appendChild(labelElement);
+    }
+}
+
+Initialization.registerAutoCreateComponent(ViewedByCustomer);

src/sass/Index.scss

@@ -1,2 +1,3 @@
 @import '../components/AttachResult/AttachResult.scss';
 @import '../components/UserActions/UserActions.scss';
+@import '../components/ViewedByCustomer/ViewedByCustomer.scss';

src/utils/icons.ts

@@ -6,10 +6,12 @@ import * as SEARCH from '../../img/search.svg';
 import * as VIEW from '../../img/view.svg';
 import * as DOT from '../../img/dot.svg';
 import * as PAPER_CLIP from '../../img/paperclip.svg';
+import * as USER from '../../img/user.svg';
 
 export const arrowDown = ARROW_DOWN;
 export const duplicate = DUPLICATE;
 export const search = SEARCH;
 export const view = VIEW;
 export const dot = DOT;
 export const paperclipIcon = PAPER_CLIP;
+export const user = USER;

tests/components/ViewedByCustomer/ViewedByCustomer.spec.ts

@@ -0,0 +1,49 @@
+import { ViewedByCustomer } from '../../../src/Index';
+import { Mock, Fake } from 'coveo-search-ui-tests';
+import { IViewedByCustomerOptions } from '../../../src/components/ViewedByCustomer/ViewedByCustomer';
+import { IQueryResult } from 'coveo-search-ui';
+import { AdvancedComponentSetupOptions } from 'coveo-search-ui-tests/MockEnvironment';
+
+describe('ViewedByCustomer', () => {
+    const LABEL_CSS_CLASS = 'viewed-by-customer-label';
+    const ICON_CSS_CLASS = 'viewed-by-customer-icon';
+
+    describe('when the field isUserActionView of the result true', () => {
+        const fakeResult: IQueryResult = { ...Fake.createFakeResult(), isUserActionView: true };
+
+        it('should display the default label and the icon when no options are given', () => {
+            const testComponent = Mock.advancedResultComponentSetup<ViewedByCustomer>(ViewedByCustomer, fakeResult).cmp;
+            expect(testComponent.element.getElementsByClassName(ICON_CSS_CLASS).length).toBe(1);
+            expect(testComponent.element.getElementsByClassName(LABEL_CSS_CLASS).length).toBe(1);
+            expect((testComponent.element.getElementsByClassName(LABEL_CSS_CLASS).item(0) as HTMLSpanElement).innerText).toBe('Viewed by Customer');
+        });
+
+        it('should display the label given in the option if any is given', () => {
+            const option = new Mock.AdvancedComponentSetupOptions();
+            (option.cmpOptions as IViewedByCustomerOptions).label = 'test label';
+            const testComponent = Mock.advancedResultComponentSetup<ViewedByCustomer>(ViewedByCustomer, fakeResult, option).cmp;
+            expect(testComponent.element.getElementsByClassName(LABEL_CSS_CLASS).length).toBe(1);
+            expect(testComponent.element.getElementsByClassName(LABEL_CSS_CLASS).item(0).innerHTML).toBe('test label');
+        });
+
+        it('should hide the icon if showIcon option is set to false', () => {
+            const option = new Mock.AdvancedComponentSetupOptions();
+            (option.cmpOptions as IViewedByCustomerOptions).showIcon = false;
+            const testComponent = Mock.advancedResultComponentSetup<ViewedByCustomer>(ViewedByCustomer, fakeResult, option).cmp;
+            expect(testComponent.element.getElementsByClassName(ICON_CSS_CLASS).length).toBe(0);
+        });
+    });
+
+    [false, undefined, null].forEach(falsyValue => {
+        describe(`when the field isUserActionView of the result is ${falsyValue}`, () => {
+            const fakeResult: IQueryResult = { ...Fake.createFakeResult(), isUserActionView: falsyValue };
+
+            it('should not display the component or add anything to its own DOM', () => {
+                const option: AdvancedComponentSetupOptions = new Mock.AdvancedComponentSetupOptions();
+                (option.cmpOptions as IViewedByCustomerOptions).showIcon = false;
+                const testComponent = Mock.advancedResultComponentSetup<ViewedByCustomer>(ViewedByCustomer, fakeResult, option).cmp;
+                expect(testComponent.element.children.length).toBe(0);
+            });
+        });
+    });
+});