@umbraco-engage/backoffice 17.0.2 → 17.0.4

package/dist/generated/types.gen.d.ts

@@ -145,6 +145,7 @@ export type AbTestUmbracoPageVariantDtoModel = {
     nodeName?: string | null;
     culture?: string | null;
     abTestId?: number | null;
+    variesBySegment: boolean;
 };
 export type AbTestVariantDtoModel = {
     id: number;
@@ -1697,6 +1698,31 @@ export type GetAbTestVariantAllResponses = {
     200: Array<AbTestVariantDtoModel>;
 };
 export type GetAbTestVariantAllResponse = GetAbTestVariantAllResponses[keyof GetAbTestVariantAllResponses];
+export type PostAbTestVariantCreateData = {
+    body?: never;
+    path?: never;
+    query?: {
+        testId?: number;
+    };
+    url: '/umbraco/engage/management/api/v1/ab-test-variant/create';
+};
+export type PostAbTestVariantCreateErrors = {
+    /**
+     * Bad Request
+     */
+    400: unknown;
+    /**
+     * The resource is protected and requires an authentication token
+     */
+    401: unknown;
+};
+export type PostAbTestVariantCreateResponses = {
+    /**
+     * OK
+     */
+    200: AbTestVariantDtoModel;
+};
+export type PostAbTestVariantCreateResponse = PostAbTestVariantCreateResponses[keyof PostAbTestVariantCreateResponses];
 export type PostAbTestVariantDisableData = {
     body?: never;
     path?: never;

package/dist/personalization/applied-personalization/editor-view/applied-personalization-editor-view.element.js

@@ -9,11 +9,11 @@ import { ENGAGE_APPLIED_PERSONALIZATION_EDITOR_VIEW_CONTEXT } from "./applied-pe
 import { css, customElement, html, state, when, } from "@umbraco-cms/backoffice/external/lit";
 import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
 import { UUITextStyles } from "@umbraco-cms/backoffice/external/uui";
-import "../../../core/collection/table-name-column-layout.element.js";
-import "../collection/views/table/elements/applied-personalization-table-name-column-layout.element.js";
 import { UMB_DOCUMENT_ENTITY_TYPE } from "@umbraco-cms/backoffice/document";
 import { UMB_WORKSPACE_MODAL } from "@umbraco-cms/backoffice/workspace";
 import { UmbModalRouteRegistrationController } from "@umbraco-cms/backoffice/router";
+import "../../../core/collection/table-name-column-layout.element.js";
+import "../collection/views/table/elements/applied-personalization-table-name-column-layout.element.js";
 const elementName = "ue-applied-personalization-workspace-editor";
 let UeAppliedPersonalizationWorkspaceEditorElement = class UeAppliedPersonalizationWorkspaceEditorElement extends UmbLitElement {
     #workspaceContext;

package/dist/personalization/context/personalization-editor-view-base.context.js

@@ -43,7 +43,7 @@ export class UePersonalizationEditorViewBaseContext extends UmbContextBase {
         const page = variant.pages?.[0];
         if (!variant.umbracoSegmentAlias || !page)
             return;
-        await this.#preview.preview(page.unique, variant.umbracoSegmentAlias, page.culture);
+        await this.#preview.preview(page.unique, variant.umbracoSegmentAlias, page.culture ?? undefined);
     }
     getPersonalizationByUnique(unique) {
         return this.personalizations.getValue().find((x) => x.unique === unique);

package/dist/personalization/personalized-variants/workspace/personalized-variant-workspace.context.js

@@ -72,7 +72,7 @@ export class UePersonalizedVariantWorkspaceContext extends UeWorkspaceContextBas
         const page = data?.pages?.[0];
         if (!data?.umbracoSegmentAlias || !page)
             return;
-        await this.#preview.preview(page.unique, data.umbracoSegmentAlias, this.#variantId?.culture);
+        await this.#preview.preview(page.unique, data.umbracoSegmentAlias, this.#variantId?.culture ?? undefined);
     }
     async createScaffold() {
         await Promise.all([this.#init, this.#repositoryReady]);

package/dist/reporting/components/reporting-chart-card/reporting-chart-card.element.d.ts

@@ -1,13 +1,19 @@
 import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
-import type { UePrefabType } from "../../../analytics/index.js";
+import { type UePrefabType } from "../../../analytics/index.js";
 declare const elementName = "ue-reporting-chart-card";
 export declare class UeReportingChartCardElement extends UmbLitElement {
     #private;
-    private _config;
+    private _config?;
     headline: string;
+    tooltip?: string;
     prefabAlias: UePrefabType;
+    private _hasSlottedContent;
+    private _showPercentages;
     constructor();
+    protected firstUpdated(): void;
+    connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/reporting/components/reporting-chart-card/reporting-chart-card.element.js

@@ -4,41 +4,94 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, html, property, state, } from "@umbraco-cms/backoffice/external/lit";
+import { css, customElement, html, property, state, when, } from "@umbraco-cms/backoffice/external/lit";
+import { UUITextStyles, } from "@umbraco-cms/backoffice/external/uui";
 import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+import { UePrefabChartPrefabsGeneratorController, } from "../../../analytics/index.js";
 const elementName = "ue-reporting-chart-card";
 let UeReportingChartCardElement = class UeReportingChartCardElement extends UmbLitElement {
+    #prefabsGenerator;
+    #config;
     constructor() {
         super();
-        this._config = {
+        this.#prefabsGenerator = new UePrefabChartPrefabsGeneratorController(this);
+        this.#config = {
             type: "bar",
             showAnnotations: false,
-            showPercentages: false,
             pageSize: 999,
             page: 1,
-            aspect: 1 / 1,
+            aspect: 3 / 2,
         };
         this.headline = "";
+        this._hasSlottedContent = true;
+        this._showPercentages = false;
         const now = new Date();
-        this._config.endDate = now.toISOString();
+        this.#config.endDate = now.toISOString();
         now.setDate(now.getDate() - 30);
-        this._config.startDate = now.toISOString();
+        this.#config.startDate = now.toISOString();
+    }
+    firstUpdated() {
+        // Check slot content immediately after first render
+        const slot = this.shadowRoot?.querySelector("slot");
+        if (slot) {
+            this._hasSlottedContent = slot.assignedNodes().length > 0;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // if no alias, we don't generate a config and assume that
+        // the chart is slotted - typically a doughnut chart
+        if (!this.prefabAlias)
+            return;
+        this._config = this.#prefabsGenerator.generate(this.prefabAlias, this.#config);
     }
     #showPercentageChanged(e) {
-        this._config = { ...this._config, showPercentages: e.target.checked };
+        this._showPercentages = e.target.checked;
+    }
+    #renderTooltip() {
+        if (!this.tooltip)
+            return null;
+        return html `<span popovertarget="info">
+      <umb-icon name="icon-info"></umb-icon>
+      <uui-popover-container id="info" placement="bottom-start">
+        <ue-tooltip hint>${this.tooltip}</ue-tooltip>
+      </uui-popover-container>
+    </span>`;
     }
     render() {
-        return html ` <uui-box .headline=${this.headline}>
-      <ue-chart-toggle
-        slot="header-actions"
-        @change=${this.#showPercentageChanged}
-      ></ue-chart-toggle>
-      <ue-prefab-chart
-        .config=${this._config}
-        alias=${this.prefabAlias}
-      ></ue-prefab-chart>
+        return html ` <uui-box>
+      <div slot="header" class="uui-text">
+        <h5 class="uui-h5">${this.headline}</h5>
+        ${this.#renderTooltip()}
+      </div>
+      ${when(!this._hasSlottedContent, () => html ` <ue-chart-toggle
+          slot="header-actions"
+          @change=${this.#showPercentageChanged}
+        ></ue-chart-toggle>`)}
+
+      <slot></slot>
+      ${!this._hasSlottedContent
+            ? html `<ue-chart
+            .config=${this._config}
+            ?showPercentages=${this._showPercentages}
+          ></ue-chart>`
+            : null}
     </uui-box>`;
     }
+    static { this.styles = [
+        UUITextStyles,
+        css `
+      div {
+        display: flex;
+        align-items: center;
+        gap: var(--uui-size-3);
+      }
+
+      uui-box {
+        height: 100%;
+      }
+    `,
+    ]; }
 };
 __decorate([
     state()
@@ -46,9 +99,18 @@ __decorate([
 __decorate([
     property()
 ], UeReportingChartCardElement.prototype, "headline", void 0);
+__decorate([
+    property()
+], UeReportingChartCardElement.prototype, "tooltip", void 0);
 __decorate([
     property()
 ], UeReportingChartCardElement.prototype, "prefabAlias", void 0);
+__decorate([
+    state()
+], UeReportingChartCardElement.prototype, "_hasSlottedContent", void 0);
+__decorate([
+    state()
+], UeReportingChartCardElement.prototype, "_showPercentages", void 0);
 UeReportingChartCardElement = __decorate([
     customElement(elementName)
 ], UeReportingChartCardElement);

package/dist/reporting/components/segment-personalization/segment-personalization.element.js

@@ -50,26 +50,31 @@ let UeSegmentPersonalizationElement = class UeSegmentPersonalizationElement exte
       <div id="flex">
         <ue-reporting-chart-card
           .headline=${this.localize.term("engage_reporting_personalizedPageviews")}
+          .tooltip=${this.localize.term("engage_reporting_personalizedPageviewsTooltip")}
           prefabAlias="segmentpersonalizationpageviewcoverage"
         ></ue-reporting-chart-card>
         <ue-reporting-chart-card
           .headline=${this.localize.term("engage_reporting_personalizedSessions")}
+          .tooltip=${this.localize.term("engage_reporting_personalizedSessionsTooltip")}
           prefabAlias="segmentpersonalizationsessioncoverage"
         ></ue-reporting-chart-card>
         <ue-reporting-chart-card
           .headline=${this.localize.term("engage_reporting_personalizedProfiles")}
+          .tooltip=${this.localize.term("engage_reporting_personalizedProfilesTooltip")}
           prefabAlias="segmentpersonalizationprofilecoverage"
         ></ue-reporting-chart-card>
 
-        <uui-box
+        <ue-reporting-chart-card
           .headline=${this.localize.term("engage_reporting_sessionsNeeded")}
+          .tooltip=${this.localize.term("engage_reporting_personalizationSessionsNeededTooltip")}
         >
           <ue-donut-chart .data=${this._sessionsNeeded}></ue-donut-chart>
-        </uui-box>
+        </ue-reporting-chart-card>
       </div>`;
     }
     static { this.styles = css `
     h2 {
+      margin: 0 0 var(--uui-size-4);
       color: var(--engage-color-default);
     }
 

package/dist/reporting/components/segment-personalization-goal-performance/segment-personalization-goal-performance.element.js

@@ -104,68 +104,52 @@ let UeSegmentPersonalizationGoalPerformanceElement = class UeSegmentPersonalizat
             <td>-</td>`)}
     </tr>`;
     }
+    #headerCell(label, left = false, span = 1) {
+        return html `<th colspan=${span} class=${left ? "aligned-left" : ""}>
+      ${this.localize.term(label)}
+    </th>`;
+    }
     render() {
         return html `<h2>${this.localize.term("engage_reporting_allGoals")}</h2>
       <uui-box>
         <table>
           <thead>
             <tr>
-              <th>${this.localize.term("engage_goal")}</th>
-              <th>${this.localize.term("engage_type")}</th>
-              <th class="aligned-left" colspan=${this._hasValues ? 3 : 2}>
-                ${this.localize.term("engage_reporting_controlGroup")}
-              </th>
-              <th class="aligned-left" colspan=${this._hasValues ? 3 : 2}>
-                ${this.localize.term("engage_reporting_personalizedGroup")}
-              </th>
-              <th class="aligned-left" colspan=${this._hasValues ? 2 : 1}>
-                ${this.localize.term("engage_reporting_differenceVsControlGroup")}
-              </th>
-              <th class="aligned-left" colspan=${this._hasValues ? 3 : 1}>
-                ${this.localize.term("engage_reporting_differenceVsProfile")}
-              </th>
-            </tr>
-            <tr class="subhead">
-              <th colspan="2"></th>
-              <th class="aligned-left">
-                ${this.localize.term("engage_profiles")}
-              </th>
-              <th>${this.localize.term("engage_reporting_completions")}</th>
-              ${this._hasValues
-            ? html `<th>${this.localize.term("engage_property_value")}</th>`
-            : nothing}
-              <th class="aligned-left">
-                ${this.localize.term("engage_profiles")}
-              </th>
-              <th>${this.localize.term("engage_reporting_completions")}</th>
-              ${this._hasValues
-            ? html `<th>${this.localize.term("engage_property_value")}</th>`
-            : nothing}
-              <th class="aligned-left">
-                ${this.localize.term("engage_profiles")}
-              </th>
-              ${this._hasValues
-            ? html `<th>${this.localize.term("engage_property_value")}</th>`
-            : nothing}
-              <th class="aligned-left">
-                ${this.localize.term("engage_reporting_completions")}
-              </th>
-              ${this._hasValues
-            ? html `<th>${this.localize.term("engage_property_value")}</th>`
-            : nothing}
-              ${this._hasValues
-            ? html `<th>${this.localize.term("engage_change")}</th>`
-            : nothing}
+              ${this.#headerCell("engage_goal")}
+              ${this.#headerCell("engage_type")}
+              ${this.#headerCell("engage_reporting_controlGroup", true, this._hasValues ? 3 : 2)}
+              ${this.#headerCell("engage_reporting_personalizedGroup", true, this._hasValues ? 3 : 2)}
+              ${this.#headerCell("engage_reporting_differenceVsControlGroup", true, this._hasValues ? 2 : 1)}
+              ${this.#headerCell("engage_reporting_differenceVsProfile", true, this._hasValues ? 3 : 1)}
             </tr>
+            ${when(this._data?.length, () => html ` <tr class="subhead">
+                <th colspan="2"></th>
+                ${this.#headerCell("engage_profiles", true)}
+                ${this.#headerCell("engage_reporting_completions")}
+                ${when(this._hasValues, () => html `${this.#headerCell("engage_property_value")}`)}
+                ${this.#headerCell("engage_profiles", true)}
+                ${this.#headerCell("engage_reporting_completions")}
+                ${when(this._hasValues, () => html `${this.#headerCell("engage_property_value")}`)}
+                ${this.#headerCell("engage_profiles", true)}
+                ${when(this._hasValues, () => html `${this.#headerCell("engage_property_value")}`)}
+                ${this.#headerCell("engage_reporting_completions")}
+                ${when(this._hasValues, () => html `${this.#headerCell("engage_property_value")}
+                  ${this.#headerCell("engage_change")}`)}
+              </tr>`)}
           </thead>
           <tbody>
-            ${this._data?.map((d) => this.#renderRow(d))}
+            ${when(this._data?.length, () => this._data?.map((d) => this.#renderRow(d)), () => html `<tr>
+                  <td colspan="${this._hasValues ? 13 : 11}">
+                    <ue-empty-state>No data available</ue-empty-state>
+                  </td>
+                </tr>`)}
           </tbody>
         </table></uui-box
       >`;
     }
     static { this.styles = css `
     h2 {
+      margin: 0 0 var(--uui-size-4);
       color: var(--engage-color-default);
     }
 

package/dist/reporting/components/segment-potential/segment-potential.element.js

@@ -51,25 +51,30 @@ let UeSegmentPotentialElement = class UeSegmentPotentialElement extends UmbLitEl
       <div id="flex">
         <ue-reporting-chart-card
           .headline=${this.localize.term("engage_reporting_pageviewCoverage")}
+          .tooltip=${this.localize.term("engage_reporting_pageviewCoverageTooltip")}
           prefabAlias="segmentpageviewcoverage"
         ></ue-reporting-chart-card>
         <ue-reporting-chart-card
           .headline=${this.localize.term("engage_reporting_sessionCoverage")}
+          .tooltip=${this.localize.term("engage_reporting_sessionCoverageTooltip")}
           prefabAlias="segmentsessioncoverage"
         ></ue-reporting-chart-card>
         <ue-reporting-chart-card
           .headline=${this.localize.term("engage_reporting_profileCoverage")}
+          .tooltip=${this.localize.term("engage_reporting_profileCoverageTooltip")}
           prefabAlias="segmentprofilecoverage"
         ></ue-reporting-chart-card>
-        <uui-box
+        <ue-reporting-chart-card
           .headline=${this.localize.term("engage_reporting_sessionsNeeded")}
+          .tooltip=${this.localize.term("engage_reporting_sessionsNeededTooltip")}
         >
           <ue-donut-chart .data=${this._sessionsNeeded}></ue-donut-chart>
-        </uui-box>
+        </ue-reporting-chart-card>
       </div>`;
     }
     static { this.styles = css `
     h2 {
+      margin: 0 0 var(--uui-size-4);
       color: var(--engage-color-default);
     }
 

package/dist/reporting/components/segment-selector/reporting-segment-selector.element.js

@@ -37,11 +37,14 @@ let UeReportingSegmentSelectorElement = class UeReportingSegmentSelectorElement
             return;
         return html `<div>
         <h3>${this._selectedSegment.name}</h3>
-        <p>${this._selectedSegment.description}</p>
-        <strong
-          >${this.localize.term("engage_personalization_appliedParameters")}</strong
-        >
-        ${this.#renderAppliedParameters()}
+        <div class="flex">
+          <div style="flex: 0 1 20%">
+            <strong>${this.localize.term("general_description")}</strong>
+            <p>${this._selectedSegment.description}</p>
+          </div>
+
+          ${this.#renderAppliedParameters()}
+        </div>
       </div>
       <span id="divider"></span>
       <div class="flex">
@@ -67,17 +70,22 @@ let UeReportingSegmentSelectorElement = class UeReportingSegmentSelectorElement
     </div>`;
     }
     #renderAppliedParameters() {
-        return html `<ue-grid id="appliedParameters" columns="1">
-      ${this._selectedSegment?.rules?.map((rule) => html `<ue-segment-applied-parameter
-            .rule=${rule}
-            .manifest=${this.#reportingContext?.getRuleByType(rule.type)}
-          ></ue-segment-applied-parameter>`)}
-    </ue-grid>`;
+        return html `<div>
+      <strong
+        >${this.localize.term("engage_personalization_appliedParameters")}</strong
+      >
+      <ue-grid id="appliedParameters" columns="1">
+        ${this._selectedSegment?.rules?.map((rule) => html `<ue-segment-applied-parameter
+              .rule=${rule}
+              .manifest=${this.#reportingContext?.getRuleByType(rule.type)}
+            ></ue-segment-applied-parameter>`)}
+      </ue-grid>
+    </div>`;
     }
     render() {
         return html ` <div id="header">
         <h2>${this.localize.term("engage_reporting_segment")}</h2>
-        <h3>${this.localize.term("engage_analytics_last30days")}</h3>
+        <h3>${this.localize.term("engage_analytics_last-30-days")}</h3>
       </div>
       <uui-box>
         <div>
@@ -104,6 +112,7 @@ let UeReportingSegmentSelectorElement = class UeReportingSegmentSelectorElement
 
     h2,
     h3 {
+      margin-top: 0;
       color: var(--engage-color-default);
     }
 
@@ -179,6 +188,11 @@ let UeReportingSegmentSelectorElement = class UeReportingSegmentSelectorElement
       display: flex;
       justify-content: space-between;
 
+      h2,
+      h3 {
+        margin-bottom: var(--uui-size-4);
+      }
+
       h3 {
         color: var(--uui-color-border-emphasis);
       }

package/dist/reporting/screens/reporting-segments-screen.element.js

@@ -18,9 +18,11 @@ let UeReportingSegmentsElement = class UeReportingSegmentsElement extends UeCont
         this.consumeContext(ENGAGE_REPORTING_CONTEXT, (context) => {
             if (!context)
                 return;
-            this.observe(context.currentSegment$, (segmentId) => {
+            this.observe(context.currentSegment$, async (segmentId) => {
                 this._segmentId = segmentId;
-                this.#analyticsContext?.setDrilldown({ segmentId });
+                this.#analyticsContext?.updateDrilldown({
+                    segmentId,
+                });
             });
         });
         this.consumeContext(ENGAGE_ANALYTICS_CONTEXT, (analyticsContext) => {
@@ -30,22 +32,26 @@ let UeReportingSegmentsElement = class UeReportingSegmentsElement extends UeCont
         });
     }
     disconnectedCallback() {
-        super.disconnectedCallback();
         this.#analyticsContext?.setDrilldown(undefined);
+        super.disconnectedCallback();
     }
     renderSidebar() {
         return null;
     }
     renderContent() {
         return html ` <ue-reporting-segment-selector></ue-reporting-segment-selector>
-      ${when(this._segmentId, () => html ` <ue-reporting-segment-potential></ue-reporting-segment-potential>
+      ${when(this._segmentId, () => html `
+          <ue-reporting-segment-potential></ue-reporting-segment-potential>
           <ue-reporting-segment-personalization></ue-reporting-segment-personalization>
-          <ue-segment-personalization-goal-performance></ue-segment-personalization-goal-performance>`)}`;
+          <ue-segment-personalization-goal-performance></ue-segment-personalization-goal-performance>
+        `)}`;
     }
     static { this.styles = [
         ...UeContentScreenBaseElement.styles,
         css `
-      #content > * + * {
+      ue-reporting-segment-potential,
+      ue-reporting-segment-personalization,
+      ue-segment-personalization-goal-performance {
         display: block;
         margin-top: var(--uui-size-layout-1);
       }