@coveo/quantic 3.17.1-pre.e71f7b47c3 → 3.18.0-pre.0fddcd3383

package/docs/out/quantic-docs.json

@@ -4911,6 +4911,34 @@
                     }
                 ]
             },
+            {
+                "name": "QuanticInsightPanelSummary",
+                "attribute": "quantic-insight-panel-summary",
+                "description": "<p>The <code>QuanticInsightPanelSummary</code> component is a composite component that displays a title or a Quantic Query Summary depending whether a user query is performed.</p>",
+                "categories": [
+                    "Insight Panel"
+                ],
+                "fires": "",
+                "examples": [
+                    "<c-quantic-insight-query-summary engine-id={engineId}></c-quantic-insight-query-summary>"
+                ],
+                "xmlMeta": {
+                    "apiVersion": "60.0",
+                    "isExposed": "false",
+                    "targets": []
+                },
+                "properties": [
+                    {
+                        "name": "engineId",
+                        "attribute": "engine-id",
+                        "access": "@api",
+                        "description": "<p>The ID of the engine instance the component registers to.</p>",
+                        "required": true,
+                        "defaultValue": "",
+                        "type": "string"
+                    }
+                ]
+            },
             {
                 "name": "QuanticModal",
                 "attribute": "quantic-modal",

package/force-app/main/default/labels/CustomLabels.labels-meta.xml

@@ -1610,4 +1610,11 @@
     <protected>false</protected>
     <shortDescription>Close notification</shortDescription>
   </labels>
+  <labels>
+    <fullName>quantic_InsightRelatedToThisCase</fullName>
+    <value>Insights related to this case</value>
+    <language>en_US</language>
+    <protected>false</protected>
+    <shortDescription>Insights related to this case</shortDescription>
+  </labels>
 </CustomLabels>

package/force-app/main/default/lwc/jsconfig.json

@@ -38,6 +38,9 @@
       "c/quanticResultList": ["quanticResultList/quanticResultList.js"],
       "c/quanticResultLink": ["quanticResultLink/quanticResultLink.js"],
       "c/quanticSort": ["quanticSort/quanticSort.js"],
+      "c/quanticInsightInterface": [
+        "quanticInsightInterface/quanticInsightInterface.js"
+      ],
       "c/quanticSummary": ["quanticSummary/quanticSummary.js"],
       "c/quanticFacetValue": ["quanticFacetValue/quanticFacetValue.js"],
       "c/quanticNumericFacet": ["quanticNumericFacet/quanticNumericFacet.js"],

package/force-app/main/default/lwc/quanticInsightInterface/quanticInsightInterface.js

@@ -44,11 +44,14 @@ export default class QuanticInsightInterface extends LightningElement {
   hasRendered = false;
   /** @type {boolean} */
   ariaLiveEventsBound = false;
+  /** @type {function} */
+  unsubscribeInsightInterface;
 
   /** @type {string} */
   analyticsOriginContext = 'InsightPanel';
 
   disconnectedCallback() {
+    this.unsubscribeInsightInterface?.();
     destroyEngine(this.engineId);
     if (this.ariaLiveEventsBound) {
       this.removeEventListener(
@@ -133,19 +136,36 @@ export default class QuanticInsightInterface extends LightningElement {
     if (this.initialized) {
       return;
     }
-    this.dispatchEvent(
-      new CustomEvent(`quantic__insightinterfaceinitialized`, {
-        detail: {
-          engineId: this.engineId,
-          insightId: this.insightId,
-        },
-        bubbles: true,
-        composed: true,
-      })
+    const engine = getHeadlessBindings(this.engineId).engine;
+    this.insightInterface = CoveoHeadlessInsight.buildInsightInterface(engine);
+    this.unsubscribeInsightInterface = this.insightInterface.subscribe(() =>
+      this.updateInsightInterfaceState()
     );
-    this.initialized = true;
   };
 
+  updateInsightInterfaceState() {
+    if (this.initialized) {
+      return;
+    }
+    this.isInsightInterfaceReady =
+      !this.insightInterface.state.loading &&
+      !!this.insightInterface.state.config;
+
+    if (this.isInsightInterfaceReady) {
+      this.dispatchEvent(
+        new CustomEvent(`quantic__insightinterfaceinitialized`, {
+          detail: {
+            engineId: this.engineId,
+            insightId: this.insightId,
+          },
+          bubbles: true,
+          composed: true,
+        })
+      );
+      this.initialized = true;
+    }
+  }
+
   /**
    * @returns {HTMLInputElement}
    */

package/force-app/main/default/lwc/quanticInsightSummary/quanticInsightSummary.css

@@ -0,0 +1,5 @@
+.initial-summary-message {
+  background-color: #d8e6fe;
+  color: #54698d;
+  width: 100%;
+}

package/force-app/main/default/lwc/quanticInsightSummary/quanticInsightSummary.html

@@ -0,0 +1,18 @@
+<template>
+  <template lwc:if={hasInitializationError}>
+    <c-quantic-component-error component-name={template.host.localName}>
+    </c-quantic-component-error>
+  </template>
+  <template lwc:else>
+    <template if:false={hasError}>
+      <template if:false={showQuerySummary}>
+        <div data-testid="initial-summary-message" class="slds-text-title_bold initial-summary-message slds-var-p-vertical_small slds-var-p-horizontal_medium">{labels.insightRelatedToThisCase}</div>
+      </template>
+      <template if:true={showQuerySummary}>
+        <div class="slds-var-p-vertical_small slds-var-p-horizontal_medium">
+          <c-quantic-summary engine-id={engineId}></c-quantic-summary>
+        </div>
+      </template>
+    </template>
+  </template>
+</template>

package/force-app/main/default/lwc/quanticInsightSummary/quanticInsightSummary.js

@@ -0,0 +1,95 @@
+import {LightningElement, api} from 'lwc';
+import {
+  registerComponentForInit,
+  initializeWithHeadless,
+  getHeadlessBundle,
+} from 'c/quanticHeadlessLoader';
+import insightRelatedToThisCase from '@salesforce/label/c.quantic_InsightRelatedToThisCase';
+
+/** @typedef {import("coveo").InsightEngine} InsightEngine */
+/** @typedef {import("coveo").SearchBox} SearchBox */
+/** @typedef {import("coveo").QuerySummary} QuerySummary */
+
+/**
+ * The `QuanticInsightPanelSummary` component is a composite component that displays a title or a Quantic Query Summary depending whether a user query is performed.
+ * @category Insight Panel
+ * @example
+ * <c-quantic-insight-query-summary engine-id={engineId}></c-quantic-insight-query-summary>
+ */
+export default class QuanticInsightPanelSummary extends LightningElement {
+  /**
+   * The ID of the engine instance the component registers to.
+   * @api
+   * @type {string}
+   */
+  @api engineId;
+
+  labels = {
+    insightRelatedToThisCase,
+  };
+
+  /** @type {boolean} */
+  showQuerySummary = false;
+  /** @type {boolean} */
+  hasError = false;
+
+  /** @type {AnyHeadless} */
+  headless;
+  /** @type {SearchBox} */
+  searchBox;
+  /** @type {QuerySummary} */
+  querySummary;
+  /** @type {boolean} */
+  hasInitializationError;
+
+  connectedCallback() {
+    registerComponentForInit(this, this.engineId);
+  }
+
+  renderedCallback() {
+    initializeWithHeadless(this, this.engineId, this.initialize);
+  }
+
+  /**
+   * @param {InsightEngine} engine
+   */
+  initialize = (engine) => {
+    this.headless = getHeadlessBundle(this.engineId);
+    this.searchBox = this.headless.buildSearchBox(engine);
+    this.querySummary = this.headless.buildQuerySummary(engine);
+    this.unsubscribeSearchBox = this.searchBox.subscribe(() =>
+      this.updateSummaryVisibility()
+    );
+    this.unsubscribeQuerySummary = this.querySummary.subscribe(() =>
+      this.updateHasError()
+    );
+  };
+
+  disconnectedCallback() {
+    this.unsubscribeSearchBox?.();
+    this.unsubscribeQuerySummary?.();
+  }
+
+  /**
+   * Updates summary visibility.
+   * @returns {void}
+   */
+  updateSummaryVisibility() {
+    this.showQuerySummary = !!this.searchBox.state.value;
+  }
+
+  /**
+   * updates the error state of the component.
+   * @returns {void}
+   */
+  updateHasError() {
+    this.hasError = this.querySummary?.state?.hasError;
+  }
+
+  /**
+   * Sets the component in the initialization error state.
+   */
+  setInitializationError() {
+    this.hasInitializationError = true;
+  }
+}

package/force-app/main/default/lwc/quanticInsightSummary/quanticInsightSummary.js-meta.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>60.0</apiVersion>
+    <isExposed>false</isExposed>
+</LightningComponentBundle>

package/force-app/main/default/lwc/quanticNumericFacet/quanticNumericFacet.html

@@ -5,7 +5,7 @@
   </template>
   <template lwc:else>
     <template lwc:if={isFacetEnabled}>
-      <div data-test="facet-content">
+      <div data-testid="facet-content">
         <template if:true={showPlaceholder}>
           <c-quantic-placeholder
             variant="card"
@@ -35,6 +35,7 @@
               </lightning-button-icon>
               <template if:true={hasActiveValues}>
                 <button
+                  data-testid="clear-selection-button"
                   class="facet__clear-filter slds-button slds-grid slds-grid_vertical-align-center slds-var-p-horizontal_x-small slds-m-top_small"
                   onclick={clearSelections}
                   title={clearFilterLabel}
@@ -53,11 +54,13 @@
               </template>
               <template if:false={isCollapsed}>
                 <div
+                  data-testid="facet__body"
                   class="slds-has-dividers_around-space slds-var-m-top_medium"
                 >
                   <template if:true={withInput}>
                     <div class="slds-p-horizontal_x-small">
                       <form
+                        data-testid="facet__search-form"
                         onsubmit={onApply}
                         class="facet__search-form slds-grid slds-gutters slds-var-p-bottom_small"
                       >

package/force-app/main/default/lwc/quanticNumericFacet/quanticNumericFacet.js

@@ -15,7 +15,6 @@ import numberInputMinimum from '@salesforce/label/c.quantic_NumberInputMinimum';
 import {
   registerComponentForInit,
   initializeWithHeadless,
-  getHeadlessBindings,
   registerToStore,
   getHeadlessBundle,
   getBueno,
@@ -34,6 +33,7 @@ import {LightningElement, track, api} from 'lwc';
 /** @typedef {import("coveo").NumericFacetValue} NumericFacetValue */
 /** @typedef {import("coveo").SearchStatus} SearchStatus */
 /** @typedef {import("coveo").SearchEngine} SearchEngine */
+/** @typedef {import("coveo").InsightEngine} InsightEngine */
 /** @typedef {import("coveo").FacetConditionsManager} FacetConditionsManager */
 /** @typedef {import('../quanticUtils/facetDependenciesUtils').DependsOn} DependsOn */
 /**
@@ -223,6 +223,8 @@ export default class QuanticNumericFacet extends LightningElement {
   numericFacetConditionsManager;
   /** @type {FacetConditionsManager} */
   numericFilterConditionsManager;
+  /** @type {SearchEngine | InsightEngine} */
+  engine;
 
   /** @type {string} */
   start;
@@ -262,9 +264,10 @@ export default class QuanticNumericFacet extends LightningElement {
   }
 
   /**
-   * @param {SearchEngine} engine
+   * @param {SearchEngine | InsightEngine} engine
    */
   initialize = (engine) => {
+    this.engine = engine;
     this.validateDependsOnProperty();
     this.headless = getHeadlessBundle(this.engineId);
     this.searchStatus = this.headless.buildSearchStatus(engine);
@@ -273,15 +276,11 @@ export default class QuanticNumericFacet extends LightningElement {
     );
 
     if (this.numberOfValues > 0) {
-      this.initializeFacet(engine);
+      this.initializeFacet();
     }
     if (this.withInput) {
-      this.initializeFilter(engine);
+      this.initializeFilter();
     }
-    this.searchStatus = this.headless.buildSearchStatus(engine);
-    this.unsubscribeSearchStatus = this.searchStatus.subscribe(() =>
-      this.updateState()
-    );
     registerToStore(this.engineId, Store.facetTypes.NUMERICFACETS, {
       label: this.label,
       facetId: this.facet?.state.facetId ?? this.field,
@@ -310,11 +309,8 @@ export default class QuanticNumericFacet extends LightningElement {
     }
   }
 
-  /**
-   * @param {import("coveo").SearchEngine} engine
-   */
-  initializeFacet(engine) {
-    this.facet = this.headless.buildNumericFacet(engine, {
+  initializeFacet() {
+    this.facet = this.headless.buildNumericFacet(this.engine, {
       options: {
         field: this.field,
         generateAutomaticRanges: true,
@@ -327,17 +323,14 @@ export default class QuanticNumericFacet extends LightningElement {
     this.unsubscribe = this.facet.subscribe(() => this.updateState());
     if (this.dependsOn) {
       this.numericFacetConditionsManager = this.initFacetConditionManager(
-        engine,
+        this.engine,
         this.facet.state?.facetId
       );
     }
   }
 
-  /**
-   * @param {import("coveo").SearchEngine} engine
-   */
-  initializeFilter(engine) {
-    this.numericFilter = this.headless.buildNumericFilter(engine, {
+  initializeFilter() {
+    this.numericFilter = this.headless.buildNumericFilter(this.engine, {
       options: {
         field: this.field,
         facetId: this.facet?.state.facetId
@@ -350,7 +343,7 @@ export default class QuanticNumericFacet extends LightningElement {
     );
     if (this.dependsOn) {
       this.numericFilterConditionsManager = this.initFacetConditionManager(
-        engine,
+        this.engine,
         this.numericFilter.state?.facetId
       );
     }
@@ -580,10 +573,9 @@ export default class QuanticNumericFacet extends LightningElement {
     }
 
     if (this.numberOfValues > 0) {
-      const engine = getHeadlessBindings(this.engineId).engine;
-      engine.dispatch(
+      this.engine.dispatch(
         this.headless
-          .loadNumericFacetSetActions(engine)
+          .loadNumericFacetSetActions(this.engine)
           .deselectAllNumericFacetValues(this.facet.state.facetId)
       );
     }

package/force-app/main/default/lwc/quanticResultAction/quanticResultAction.html

@@ -11,7 +11,7 @@
       </button>
     </template>
     <template if:false={loading}>
-      <lightning-button-icon-stateful onclick={handleClick} aria-label={displayedLabel} variant="border-filled"
+      <lightning-button-icon-stateful data-testid="result-action-button" onclick={handleClick} aria-label={displayedLabel} variant="border-filled"
         class={resultActionOrderClasses} icon-name={displayedIcon} selected={_selected}>
       </lightning-button-icon-stateful>
     </template>