@salesforcedevs/dx-components 0.16.1 → 0.18.0

package/src/modules/dx/headerNav/headerNav.html

@@ -13,6 +13,7 @@
 
                     <!-- DESKTOP "MORE CONTENT" NAV ITEM -->
                     <dx-dropdown
+                        analytics-event="custEv_topNavLinkClick"
                         if:true={navItem.options}
                         nav-item-label={navItem.label}
                         open-on-hover

package/src/modules/dx/headerSearch/__tests__/headerSearch.test.ts

@@ -1,27 +1,23 @@
-import {
-    HeadlessEngine,
-    buildStandaloneSearchBox,
-    searchAppReducers
-} from "@coveo/headless";
+import { buildSearchEngine, buildStandaloneSearchBox } from "@coveo/headless";
 import Input from "dx/input";
 import Button from "dx/button";
 import Dropdown from "dx/dropdown";
 import HeaderSearch from "dx/headerSearch";
 import { PopoverRequestCloseType } from "typings/custom";
 import { createRenderComponent } from "utils/tests";
+import { coveoHeaderConfig } from "utils/coveo";
 import { MOCK_SUGGESTIONS } from "./mockData";
-import mockProps, { coveoConfig } from "./mockProps";
+import mockProps from "./mockProps";
 
 const COVEO_CONFIG = {
     configuration: {
-        organizationId: coveoConfig.coveoOrganizationId,
-        accessToken: coveoConfig.coveoPublicAccessToken,
+        organizationId: coveoHeaderConfig.coveoOrganizationId,
+        accessToken: coveoHeaderConfig.coveoPublicAccessToken,
         search: {
-            pipeline: coveoConfig.coveoSearchPipeline,
-            searchHub: coveoConfig.coveoSearchHub
+            pipeline: coveoHeaderConfig.coveoSearchPipeline,
+            searchHub: coveoHeaderConfig.coveoSearchHub
         }
-    },
-    reducers: searchAppReducers
+    }
 };
 
 const REDIRECT_URL = "https://developer.salesforce.com";
@@ -37,9 +33,8 @@ const mockUpdateText = jest.fn();
 
 jest.mock("@coveo/headless", () => {
     return {
-        HeadlessEngine: jest.fn(),
-        buildStandaloneSearchBox: jest.fn(),
-        searchAppReducers: jest.fn()
+        buildSearchEngine: jest.fn(),
+        buildStandaloneSearchBox: jest.fn()
     };
 });
 
@@ -68,14 +63,11 @@ const expectMobileToDefaultRender = ({
 };
 
 const expectSearchToInit = () => {
-    expect(HeadlessEngine).toHaveBeenCalledTimes(1);
-    expect(HeadlessEngine).toHaveBeenCalledWith(COVEO_CONFIG);
+    expect(buildSearchEngine).toHaveBeenCalledTimes(1);
+    expect(buildSearchEngine).toHaveBeenCalledWith(COVEO_CONFIG);
     expect(buildStandaloneSearchBox).toHaveBeenCalledTimes(1);
-    const [
-        engine,
-        options
-    ] = (buildStandaloneSearchBox as jest.Mock).mock.calls[0];
-    expect(engine).toBeInstanceOf(HeadlessEngine);
+    const options = (buildStandaloneSearchBox as jest.Mock).mock.calls[0][1];
+
     expect(options).toEqual({
         options: {
             numberOfSuggestions: 3,
@@ -85,8 +77,6 @@ const expectSearchToInit = () => {
     expect(mockSubscribe).toHaveBeenCalledTimes(1);
     expect(subscribeCallback).not.toBeNull();
     expect(subscribeCallback).toBeInstanceOf(Function);
-    expect(mockUpdateText).toHaveBeenCalledTimes(1);
-    expect(mockUpdateText).toHaveBeenCalledWith("");
 };
 
 describe(TAG, () => {
@@ -113,9 +103,8 @@ describe(TAG, () => {
             expect(container).not.toBeNull();
             expect(container.classList).toContain("desktop_search-container");
 
-            const suggestionsDropdown: Dropdown = element.shadowRoot.querySelector(
-                "dx-dropdown"
-            );
+            const suggestionsDropdown: Dropdown =
+                element.shadowRoot.querySelector("dx-dropdown");
             expect(suggestionsDropdown.options).toHaveLength(0);
             expect(suggestionsDropdown.open).toBe(false);
 
@@ -132,21 +121,18 @@ describe(TAG, () => {
 
         it("renders as mobile view", () => {
             const element = render({ ...mockProps, mobile: true });
-            const container: HTMLElement = element.shadowRoot.querySelector(
-                "div"
-            );
+            const container: HTMLElement =
+                element.shadowRoot.querySelector("div");
             expect(container).not.toBeNull();
             expect(container.classList).toHaveLength(0);
 
-            const dropdowns: Dropdown[] = element.shadowRoot.querySelectorAll(
-                "dx-dropdown"
-            );
+            const dropdowns: Dropdown[] =
+                element.shadowRoot.querySelectorAll("dx-dropdown");
             expect(dropdowns).toHaveLength(1);
             const [dropdown] = dropdowns;
             const input: Input = element.shadowRoot.querySelector("dx-input");
-            const button: Button = element.shadowRoot.querySelector(
-                "dx-button"
-            );
+            const button: Button =
+                element.shadowRoot.querySelector("dx-button");
             expectMobileToDefaultRender({
                 input,
                 dropdown,
@@ -165,9 +151,8 @@ describe(TAG, () => {
             const element = render({ ...mockProps, mobile: true });
 
             const input: Input = element.shadowRoot.querySelector("dx-input");
-            const dropdown: Dropdown = element.shadowRoot.querySelector(
-                "dx-dropdown"
-            );
+            const dropdown: Dropdown =
+                element.shadowRoot.querySelector("dx-dropdown");
             const button = element.shadowRoot.querySelector("dx-button");
             button.click();
 

package/src/modules/dx/headerSearch/__tests__/mockProps.ts

@@ -1,11 +1,6 @@
-export const coveoConfig = {
-    coveoOrganizationId: "coveosalesforcetestakshatha",
-    coveoPublicAccessToken: "xx8d9c92ef-1018-4d92-a3c7-647dff01c21c",
-    coveoSearchPipeline: "salesforcedevdoc",
-    coveoSearchHub: "salesforcedevdoc"
-};
+import { coveoHeaderConfig } from "utils/coveo";
 
 export default {
     mobile: false,
-    ...coveoConfig
+    ...coveoHeaderConfig
 };

package/src/modules/dx/headerSearch/headerSearch.ts

@@ -1,13 +1,12 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { PopoverRequestCloseType, Option } from "typings/custom";
+import { buildSearchEngine } from "utils/coveo";
 import {
-    HeadlessEngine,
     StandaloneSearchBox as StandaloneSearchBoxType,
-    StandaloneSearchBoxOptions,
     StandaloneSearchBoxState,
     buildStandaloneSearchBox,
-    searchAppReducers
+    StandaloneSearchBoxOptions
 } from "@coveo/headless";
 
 const baseSearchHref = `/search`;
@@ -32,11 +31,11 @@ export default class HeaderSearch extends LightningElement {
     private get suggestions(): Option[] {
         if (this.searchState) {
             return this.searchState.suggestions.map(
-                ({ value }: { value: string }) => ({
-                    id: value,
-                    label: value,
+                ({ highlightedValue }: { highlightedValue: string }) => ({
+                    id: highlightedValue,
+                    label: highlightedValue,
                     link: {
-                        href: this.createSearchHref(value),
+                        href: this.createSearchHref(highlightedValue),
                         target: null
                     }
                 })
@@ -83,25 +82,20 @@ export default class HeaderSearch extends LightningElement {
             redirectionUrl: "https://developer.salesforce.com"
         };
 
-        const engine = new HeadlessEngine({
-            configuration: {
-                organizationId: this.coveoOrganizationId,
-                accessToken: this.coveoPublicAccessToken,
-                search: {
-                    pipeline: this.coveoSearchPipeline,
-                    searchHub: this.coveoSearchHub
-                }
-            },
-            reducers: searchAppReducers
+        const engine = buildSearchEngine({
+            organizationId: this.coveoOrganizationId,
+            publicAccessToken: this.coveoPublicAccessToken,
+            searchPipeline: this.coveoSearchPipeline,
+            searchHub: this.coveoSearchHub
         });
 
         this.searchBox = buildStandaloneSearchBox(engine, { options });
-        this.searchBox.subscribe(() => {
+
+        this.searchBox?.subscribe(() => {
             if (this.searchBox) {
                 this.searchState = this.searchBox.state;
             }
         });
-        this.searchBox.updateText("");
     }
 
     private createSearchHref = (value: string | null = "") => {

package/src/modules/dx/lazy/lazy.ts

@@ -2,13 +2,6 @@ import { LightningElement, api } from "lwc";
 
 import { LazyMode } from "typings/custom";
 
-declare global {
-    interface Window {
-        requestIdleCallback: any;
-        cancelIdleCallback: any;
-    }
-}
-
 /**
  * Defines a fallback for BackgroundTasksAPI for browsers that doesn't support it.
  * Currently BackgroundTasksAPI is supported by all major browsers

package/src/modules/dx/newsletterForm/newsletterForm.ts

@@ -2,6 +2,18 @@ import { LightningElement, api } from "lwc";
 import { track } from "dx/instrumentation";
 import { CountryOptions, CheckboxTextSet } from "typings/custom";
 
+const ANALYTICS_INFO = {
+    itemTitle: "newsletter sign up submit",
+    formName: "newsletter",
+    formType: "newsletter",
+    method: "email",
+    destinationType: "internal",
+    clickText: "Subscribe Now",
+    clickUrl: "/newsletter/success",
+    elementType: "button",
+    ctaClick: true
+};
+
 export default class Form extends LightningElement {
     @api checkboxTextSet: string = "";
     @api countries: string = "";
@@ -134,16 +146,13 @@ export default class Form extends LightningElement {
         submitButtonEl.textContent = "...Processing request";
 
         try {
-            const res = await fetch(
-                "/pages/pardot/footer_optin",
-                {
-                    method: "POST",
-                    headers: {
-                        "Content-Type": "application/json"
-                    },
-                    body: JSON.stringify(formData)
-                }
-            );
+            const res = await fetch("/pages/pardot/footer_optin", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify(formData)
+            });
 
             if (!res.ok) {
                 throw new Error(errorMsg);
@@ -156,7 +165,7 @@ export default class Form extends LightningElement {
             }
 
             // GTM event
-            track(submitButtonEl, "custEv_newsletterSubscription");
+            track(submitButtonEl, "custEv_formCompletion", ANALYTICS_INFO);
 
             window.location.assign("/newsletter/success");
         } catch (error) {

package/src/modules/dx/sidebar/__tests__/mockSearchChangeEmptyEvent.ts

@@ -0,0 +1,6 @@
+export default {
+    detail: {
+        value: "pwa",
+        results: []
+    }
+};