Show a contact us message when the User Actions is not enabled SFINT-…

…2570 (#50)

* Added enable prompt when user actions isn't enabled SFINT-2570

* Added test and modified message and container padding SFINT-2570

* Cleanup SFINT-2570

* Removed newline from expected string to match innerText SFINT-2570

* Ran Linter SFINT-2570

* Changed curly braces to paranthesis SFINT-2570

* Added css class for enable prompt SFINT-2570

* Updated unit test with new css class SFINT-2570

src/components/UserActions/Strings.ts

@@ -2,6 +2,7 @@ import { Translation, Language } from '../../utils/translation';
 
 Translation.register(Language.English, {
     UserActions_no_actions: 'No actions available for this user',
+    UserActions_enable_prompt: 'The User Action feature is not activated for your organization.\nTo activate it, contact Coveo Support.',
 
     QueryList_more: 'Show More',
     QueryList_less: 'Show Less',

src/components/UserActions/UserActions.scss

@@ -50,6 +50,11 @@ $search-ui-dropdown-header-color: #1d4f76;
         text-align: center;
     }
 
+    .coveo-enable-prompt {
+        padding: 1.5em;
+        text-align: center;
+    }
+
     .coveo-close {
         display: inline-block;
         width: 1em;

src/components/UserActions/UserActions.ts

@@ -143,7 +143,7 @@ export class UserActions extends Component {
             (get(this.root, UserProfileModel) as UserProfileModel)
                 .getActions(this.options.userId)
                 .then(actions => (actions.length > 0 ? this.render() : this.renderNoActions()))
-                .catch(() => this.renderNoActions());
+                .catch(e => (e.statusCode === 404 ? this.renderEnablePrompt() : this.renderNoActions()));
 
             this.bindings.usageAnalytics.logCustomEvent({ name: 'openUserActions', type: 'User Actions' }, {}, this.element);
             this.root.classList.add(UserActions.USER_ACTION_OPENED);
@@ -264,6 +264,15 @@ export class UserActions extends Component {
         this.element.appendChild(element);
     }
 
+    private renderEnablePrompt() {
+        const element = document.createElement('div');
+        element.classList.add('coveo-enable-prompt');
+        element.innerText = l(`${UserActions.ID}_enable_prompt`);
+
+        this.element.innerHTML = '';
+        this.element.appendChild(element);
+    }
+
     private showViewedByCustomer() {
         this.bind.onRootElement(ResultListEvents.newResultDisplayed, (args: IDisplayedNewResultEventArgs) => {
             if (Boolean(args.item.getElementsByClassName('CoveoViewedByCustomer').length)) {

tests/components/UserActions/UserActions.spec.ts

@@ -1,12 +1,13 @@
 import { Mock, Fake, Simulate } from 'coveo-search-ui-tests';
 import { UserActions } from '../../../src/components/UserActions/UserActions';
-import { Logger, Initialization, QueryEvents, ResultListEvents, IQueryResult } from 'coveo-search-ui';
+import { Logger, Initialization, QueryEvents, ResultListEvents, IQueryResult, l } from 'coveo-search-ui';
 import { createSandbox, SinonSandbox, SinonStub, SinonStubbedInstance } from 'sinon';
 import { UserAction, UserProfileModel } from '../../../src/models/UserProfileModel';
 import { delay, fakeUserProfileModel } from '../../utils';
 import { ClickedDocumentList, QueryList, UserActivity } from '../../../src/Index';
 import { UserActionType } from '../../../src/rest/UserProfilingEndpoint';
 import { ResponsiveUserActions } from '../../../src/components/UserActions/ResponsiveUserActions';
+import '../../../src/components/UserActions/Strings';
 
 describe('UserActions', () => {
     let sandbox: SinonSandbox;
@@ -190,6 +191,26 @@ describe('UserActions', () => {
         expect(hideSpy.called).toBe(true);
     });
 
+    it('should show a message when user actions is not enabled', () => {
+        sandbox.stub(Initialization, 'automaticallyCreateComponentsInside');
+
+        const mock = Mock.advancedComponentSetup<UserActions>(
+            UserActions,
+            new Mock.AdvancedComponentSetupOptions(null, { userId: 'testuserId' }, env => {
+                fakeUserProfileModel(env.root, sandbox).getActions.returns(Promise.reject({ statusCode: 404 }));
+                return env;
+            })
+        );
+        mock.cmp.show();
+
+        return delay(() => {
+            expect(mock.cmp.element.querySelector<HTMLElement>('.coveo-enable-prompt')).not.toBeNull();
+            expect(mock.cmp.element.querySelector<HTMLElement>('.coveo-enable-prompt').innerText).toBe(
+                l(`${UserActions.ID}_enable_prompt`).replace('\n', '')
+            );
+        });
+    });
+
     it('should show a message when no actions are available', () => {
         sandbox.stub(Initialization, 'automaticallyCreateComponentsInside');
 
@@ -204,7 +225,7 @@ describe('UserActions', () => {
 
         return delay(() => {
             expect(mock.cmp.element.querySelector<HTMLElement>('.coveo-no-actions')).not.toBeNull();
-            expect(mock.cmp.element.querySelector<HTMLElement>('.coveo-no-actions').innerText).toBe('No actions available for this user');
+            expect(mock.cmp.element.querySelector<HTMLElement>('.coveo-no-actions').innerText).toBe(l(`${UserActions.ID}_no_actions`));
         });
     });
 
@@ -221,7 +242,7 @@ describe('UserActions', () => {
         mock.cmp.show();
 
         return delay(() => {
-            expect(mock.cmp.element.querySelector<HTMLElement>('.coveo-no-actions').innerText).toBe('No actions available for this user');
+            expect(mock.cmp.element.querySelector<HTMLElement>('.coveo-no-actions').innerText).toBe(l(`${UserActions.ID}_no_actions`));
         });
     });