@umbraco-engage/backoffice 17.0.0-rc1

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

@@ -0,0 +1,244 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { css, customElement, html, nothing, state, when, } from "@umbraco-cms/backoffice/external/lit";
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+import { tryExecute } from "@umbraco-cms/backoffice/resources";
+import { ENGAGE_REPORTING_CONTEXT } from "../../reporting.context.js";
+import { ReportingService, } from "../../../generated/index.js";
+const elementName = "ue-segment-personalization-goal-performance";
+let UeSegmentPersonalizationGoalPerformanceElement = class UeSegmentPersonalizationGoalPerformanceElement extends UmbLitElement {
+    constructor() {
+        super();
+        this._hasValues = false;
+        this._data = [];
+        this.consumeContext(ENGAGE_REPORTING_CONTEXT, (context) => {
+            if (!context)
+                return;
+            this.observe(context.currentSegment$, (currentSegment) => {
+                if (!currentSegment)
+                    return;
+                this.#getData(currentSegment);
+            });
+        });
+    }
+    async #getData(segmentId) {
+        const data = (await tryExecute(this, ReportingService.getReportingGoalPersonalizationPerformanceBySegmentId({
+            path: { segmentId },
+        }))).data;
+        this._hasValues = data.some((d) => d.controlGroupGoalValue || d.personalizedGroupGoalValue);
+        // Calculate the derived properties
+        data.forEach((d) => {
+            d.absoluteCompletionGainPerProfile =
+                d.personalizedGroupGoalCompletions / d.personalizedGroupProfiles -
+                    d.controlGroupGoalCompletions / d.controlGroupProfiles;
+            d.relativeCompletionGainPerProfile =
+                d.personalizedGroupGoalCompletions /
+                    d.personalizedGroupProfiles /
+                    (d.controlGroupGoalCompletions / d.controlGroupProfiles) -
+                    1;
+            d.absoluteValueGainPerProfile =
+                d.personalizedGroupGoalValue / d.personalizedGroupProfiles -
+                    d.controlGroupGoalValue / d.controlGroupProfiles;
+            d.relativeValueGainPerProfile =
+                d.personalizedGroupGoalValue /
+                    d.personalizedGroupProfiles /
+                    (d.controlGroupGoalValue / d.controlGroupProfiles) -
+                    1;
+        });
+        this._data = data;
+    }
+    #addDotsToNumber(n) {
+        if (typeof n !== "number")
+            return "-";
+        return this.localize.number(n);
+    }
+    #markPositive(n) {
+        return n > 0 ? "+" : "";
+    }
+    #percentage(v) {
+        return `${((v ?? 0) * 100).toFixed(2)}%`;
+    }
+    #renderValue(v) {
+        return html `${this.#markPositive(v)}${v.toFixed(2)}`;
+    }
+    #renderValueChange(v) {
+        if (!v || v === 0)
+            return nothing;
+        return html `<uui-tag
+      .color=${v < 0 ? "danger" : v > 0 ? "positive" : "default"}
+      >${this.#markPositive(v)}${this.#percentage(v)}</uui-tag
+    >`;
+    }
+    #renderRow(d) {
+        return html `<tr>
+      <td>${d.goalName}</td>
+      <td>${d.goalType}</td>
+      <td>${this.#addDotsToNumber(d.controlGroupProfiles)}</td>
+      <td>${this.#addDotsToNumber(d.controlGroupGoalCompletions)}</td>
+      ${this._hasValues
+            ? html `<td>${this.#addDotsToNumber(d.controlGroupGoalValue)}</td>`
+            : html `<td>-</td>`}
+      <td>${this.#addDotsToNumber(d.personalizedGroupProfiles)}</td>
+      <td>${this.#addDotsToNumber(d.personalizedGroupGoalCompletions)}</td>
+      ${this._hasValues
+            ? html `<td>${this.#addDotsToNumber(d.personalizedGroupGoalValue)}</td>`
+            : html `<td>-</td>`}
+      <td>
+        ${d.personalizedGroupGoalCompletions - d.controlGroupGoalCompletions}
+      </td>
+      ${this._hasValues &&
+            d.personalizedGroupGoalValue &&
+            d.controlGroupGoalValue
+            ? html `<td>
+            ${d.personalizedGroupGoalValue - d.controlGroupGoalValue}
+          </td>`
+            : html `<td>-</td>`}
+      <td>${this.#renderValue(d.absoluteCompletionGainPerProfile)}</td>
+      ${when(this._hasValues &&
+            (d.personalizedGroupGoalValue || d.controlGroupGoalValue), () => html `<td>${this.#renderValue(d.absoluteValueGainPerProfile)}</td>
+          <td>${this.#renderValueChange(d.relativeValueGainPerProfile)}</td>`, () => html `<td>-</td>
+            <td>-</td>`)}
+    </tr>`;
+    }
+    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}
+            </tr>
+          </thead>
+          <tbody>
+            ${this._data?.map((d) => this.#renderRow(d))}
+          </tbody>
+        </table></uui-box
+      >`;
+    }
+    static { this.styles = css `
+    h2 {
+      color: var(--engage-color-default);
+    }
+
+    uui-tag {
+      --uui-tag-padding: var(--uui-size-space-1);
+    }
+
+    .flex {
+      display: flex;
+      align-items: center;
+      line-height: 1;
+      gap: var(--uui-size-2);
+    }
+
+    table {
+      border-collapse: collapse;
+      display: table;
+      width: 100%;
+      border-radius: var(--uui-border-radius);
+      background-color: var(--uui-color-surface);
+      cursor: default;
+    }
+
+    thead {
+      display: table-header-group;
+      font-weight: bold;
+    }
+
+    tr {
+      display: table-row;
+      position: relative;
+      outline-offset: -3px;
+    }
+
+    th,
+    td {
+      position: relative;
+      display: table-cell;
+      padding: var(
+        --uui-table-cell-padding,
+        var(--uui-size-3) var(--uui-size-5)
+      );
+      vertical-align: middle;
+    }
+
+    td {
+      height: var(--uui-table-cell-height, var(--uui-size-12));
+      border-top: 1px solid var(--uui-color-border);
+    }
+
+    .subhead th {
+      color: #68676b;
+      font-size: 12px;
+    }
+
+    th {
+      padding-top: var(--uui-size-2);
+      padding-bottom: var(--uui-size-2);
+    }
+
+    .aligned-left {
+      text-align: left;
+      padding-left: 80px;
+    }
+  `; }
+};
+__decorate([
+    state()
+], UeSegmentPersonalizationGoalPerformanceElement.prototype, "_hasValues", void 0);
+__decorate([
+    state()
+], UeSegmentPersonalizationGoalPerformanceElement.prototype, "_data", void 0);
+UeSegmentPersonalizationGoalPerformanceElement = __decorate([
+    customElement(elementName)
+], UeSegmentPersonalizationGoalPerformanceElement);
+export { UeSegmentPersonalizationGoalPerformanceElement };

package/dist/reporting/components/segment-potential/segment-potential.element.d.ts

@@ -0,0 +1,15 @@
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+declare const elementName = "ue-reporting-segment-potential";
+export declare class UeSegmentPotentialElement extends UmbLitElement {
+    #private;
+    private _sessionsNeeded?;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export default UeSegmentPotentialElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeSegmentPotentialElement;
+    }
+}

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

@@ -0,0 +1,93 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { css, customElement, html, state, } from "@umbraco-cms/backoffice/external/lit";
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+import { tryExecute } from "@umbraco-cms/backoffice/resources";
+import { ENGAGE_REPORTING_CONTEXT } from "../../reporting.context.js";
+import { ReportingService } from "../../../generated/index.js";
+const elementName = "ue-reporting-segment-potential";
+let UeSegmentPotentialElement = class UeSegmentPotentialElement extends UmbLitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.consumeContext(ENGAGE_REPORTING_CONTEXT, (context) => {
+            if (!context)
+                return;
+            this.observe(context.currentSegment$, async (currentSegment) => {
+                if (!currentSegment)
+                    return;
+                await this.#getSessionData(currentSegment);
+            });
+        });
+    }
+    async #getSessionData(segmentId) {
+        const { data } = await tryExecute(this, ReportingService.getReportingSegmentSessionsPotentialBySegmentId({
+            path: { segmentId },
+        }));
+        this._sessionsNeeded = this.#map(data);
+    }
+    #map(data) {
+        const arr = [];
+        // Loop through object and fill the chart
+        for (const item in data) {
+            const obj = {
+                label: this.localize.term(`engage_profiles_${item}`),
+                key: item,
+                // If the data is a number, we can use it directly
+                data: data[item],
+            };
+            arr.push(obj);
+        }
+        return arr.slice(1); // Remove the first item, which is the total
+    }
+    render() {
+        return html `<h2>
+        ${this.localize.term("engage_reporting_segmentPotential")}
+      </h2>
+
+      <div id="flex">
+        <ue-reporting-chart-card
+          .headline=${this.localize.term("engage_reporting_pageviewCoverage")}
+          prefabAlias="segmentpageviewcoverage"
+        ></ue-reporting-chart-card>
+        <ue-reporting-chart-card
+          .headline=${this.localize.term("engage_reporting_sessionCoverage")}
+          prefabAlias="segmentsessioncoverage"
+        ></ue-reporting-chart-card>
+        <ue-reporting-chart-card
+          .headline=${this.localize.term("engage_reporting_profileCoverage")}
+          prefabAlias="segmentprofilecoverage"
+        ></ue-reporting-chart-card>
+        <uui-box
+          .headline=${this.localize.term("engage_reporting_sessionsNeeded")}
+        >
+          <ue-donut-chart .data=${this._sessionsNeeded}></ue-donut-chart>
+        </uui-box>
+      </div>`;
+    }
+    static { this.styles = css `
+    h2 {
+      color: var(--engage-color-default);
+    }
+
+    #flex {
+      display: flex;
+      gap: var(--uui-size-6);
+    }
+
+    #flex > * {
+      flex: 1 1 0;
+    }
+  `; }
+};
+__decorate([
+    state()
+], UeSegmentPotentialElement.prototype, "_sessionsNeeded", void 0);
+UeSegmentPotentialElement = __decorate([
+    customElement(elementName)
+], UeSegmentPotentialElement);
+export { UeSegmentPotentialElement };
+export default UeSegmentPotentialElement;

package/dist/reporting/components/segment-selector/reporting-segment-selector.element.d.ts

@@ -0,0 +1,17 @@
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+declare const elementName = "ue-reporting-segment-selector";
+export declare class UeReportingSegmentSelectorElement extends UmbLitElement {
+    #private;
+    private _segments;
+    private _segmentOptions;
+    private _selectedSegment;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export default UeReportingSegmentSelectorElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeReportingSegmentSelectorElement;
+    }
+}

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

@@ -0,0 +1,211 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { css, customElement, html, state, when, } from "@umbraco-cms/backoffice/external/lit";
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+import { ENGAGE_REPORTING_CONTEXT } from "../../reporting.context.js";
+const elementName = "ue-reporting-segment-selector";
+let UeReportingSegmentSelectorElement = class UeReportingSegmentSelectorElement extends UmbLitElement {
+    #reportingContext;
+    constructor() {
+        super();
+        this._segments = [];
+        this._segmentOptions = [];
+        this.consumeContext(ENGAGE_REPORTING_CONTEXT, (context) => {
+            if (!context)
+                return;
+            this.#reportingContext = context;
+            this.observe(this.#reportingContext.segments$, (segments) => {
+                this._segments = segments ?? [];
+                this._segmentOptions = this._segments.map((segment) => ({
+                    name: segment.name,
+                    value: `${segment.id}`,
+                }));
+            });
+        });
+    }
+    #onSegmentChange(event) {
+        const value = event.target.value;
+        this._selectedSegment = this._segments.find((segment) => segment.id.toString() === value);
+        this.#reportingContext?.setCurrentSegment(this._selectedSegment?.id);
+    }
+    #renderSelectedSegment() {
+        if (!this._selectedSegment)
+            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>
+      <span id="divider"></span>
+      <div class="flex">
+        <div>
+          <uui-icon name="icon-segment-core"></uui-icon
+          ><strong>
+            ${this.localize.term("engage_personalization_segmentType")}:
+            ${this._selectedSegment.type}</strong
+          >
+        </div>
+        <div>
+          <uui-icon name="icon-users"></uui-icon
+          ><strong>
+            ${this.localize.term("engage_personalization_controlGroupSize")}:
+            ${this._selectedSegment.controlGroupSize}%</strong
+          >
+        </div>
+      </div> `;
+    }
+    #renderNoSelectedSegment() {
+        return html `<div id="empty">
+      <p>${this.localize.term("engage_reporting_selectSegmentFromDropdown")}</p>
+    </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>`;
+    }
+    render() {
+        return html ` <table class="reporting-title">
+        <tr>
+          <td>
+            <h2>${this.localize.term("engage_reporting_segment")}</h2>
+          </td>
+          <td>
+            <h3>${this.localize.term("engage_analytics_last30days")}</h3>
+          </td>
+        </tr>
+      </table>
+      <uui-box>
+        <div>
+          <div id="sidebar">
+            <h3>${this.localize.term("engage_reporting_selectSegment")}</h3>
+            <uui-select
+              style="width: 100%"
+              .options=${this._segmentOptions}
+              @change=${this.#onSegmentChange}
+            >
+            </uui-select>
+            <uui-icon name="icon-target"></uui-icon>
+          </div>
+          <div id="main">
+            ${when(this._selectedSegment, () => this.#renderSelectedSegment(), () => this.#renderNoSelectedSegment())}
+          </div>
+        </div>
+      </uui-box>`;
+    }
+    static { this.styles = css `
+    :host {
+      --uui-box-default-padding: 0;
+    }
+
+    h2,
+    h3 {
+      color: var(--engage-color-default);
+    }
+
+    .flex {
+      display: flex;
+      gap: var(--uui-size-32);
+    }
+
+    uui-select {
+      z-index: 1;
+    }
+
+    uui-box {
+      overflow: hidden;
+    }
+
+    uui-box > div {
+      display: flex;
+    }
+
+    ue-grid {
+      margin-top: 1em;
+    }
+
+    #main {
+      padding: var(--uui-size-8) 0;
+    }
+
+    #main > div {
+      padding: 0 var(--uui-size-8);
+    }
+
+    #divider {
+      margin: var(--uui-size-8) 0;
+      display: block;
+      border-bottom: 1px solid var(--uui-color-divider-standalone);
+    }
+
+    #sidebar {
+      padding: var(--uui-size-8);
+      position: relative;
+      background-color: var(--engage-color-default);
+      width: 230px;
+
+      h3 {
+        color: white;
+      }
+    }
+
+    #sidebar uui-icon {
+      color: white;
+      opacity: 0.2;
+      position: absolute;
+      font-size: 100px;
+      bottom: calc(-1 * var(--uui-size-8));
+      right: var(--uui-size-space-4);
+    }
+
+    #main {
+      flex: 1;
+    }
+
+    #empty {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--uui-size-layout-3);
+      opacity: 0.6;
+      height: 100%;
+    }
+
+    .reporting-title {
+      width: 100%;
+    }
+
+    .reporting-title td:last-child {
+      text-align: right;
+      opacity: 0.5;
+    }
+
+    .reporting-title td:last-child h3 {
+      color: var(--engage-cockpit-color-gray) !important;
+    }
+  `; }
+};
+__decorate([
+    state()
+], UeReportingSegmentSelectorElement.prototype, "_segments", void 0);
+__decorate([
+    state()
+], UeReportingSegmentSelectorElement.prototype, "_segmentOptions", void 0);
+__decorate([
+    state()
+], UeReportingSegmentSelectorElement.prototype, "_selectedSegment", void 0);
+UeReportingSegmentSelectorElement = __decorate([
+    customElement(elementName)
+], UeReportingSegmentSelectorElement);
+export { UeReportingSegmentSelectorElement };
+export default UeReportingSegmentSelectorElement;

package/dist/reporting/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./screens/index.js";
+export * from "./components/index.js";

package/dist/reporting/index.js

@@ -0,0 +1,2 @@
+export * from "./screens/index.js";
+export * from "./components/index.js";

package/dist/reporting/manifests-reporting.d.ts

@@ -0,0 +1 @@
+export declare const manifests: Array<UmbExtensionManifest>;

package/dist/reporting/manifests-reporting.js

@@ -0,0 +1,26 @@
+import { ENGAGE_FEATURE_REPORTING, ENGAGE_SCREEN_REPORTING, ENGAGE_USER_GROUP_PERMISSIONS_CONDITION_ALIAS, ScreenManifestGenerator, } from "../core/index.js";
+const REPORTING_SCREEN = "ue-reporting-screen";
+const screens = [
+    { name: "Segments", elementName: "ue-reporting-segments" },
+];
+export const manifests = [
+    {
+        type: "engageScreenElement",
+        alias: ENGAGE_SCREEN_REPORTING,
+        name: `Engage Reporting Screen`,
+        elementName: REPORTING_SCREEN,
+        weight: 50,
+        meta: {
+            label: "#engage_reporting",
+            pathname: "reporting",
+            icon: "icon-presentation",
+        },
+        conditions: [
+            {
+                alias: ENGAGE_USER_GROUP_PERMISSIONS_CONDITION_ALIAS,
+                match: ENGAGE_FEATURE_REPORTING,
+            }
+        ]
+    },
+    ...screens.map((screen) => ScreenManifestGenerator(screen, REPORTING_SCREEN, "Reporting")),
+];

package/dist/reporting/reporting.context.d.ts

@@ -0,0 +1,17 @@
+import { UmbContextBase } from "@umbraco-cms/backoffice/class-api";
+import { UmbContextToken } from "@umbraco-cms/backoffice/context-api";
+import type { UmbControllerHost } from "@umbraco-cms/backoffice/controller-api";
+import { type UeManifestSegmentRule, type UeSegmentDetailModel } from "../personalization/segments/index.js";
+export declare class UeReportingContext extends UmbContextBase {
+    #private;
+    segments$: import("rxjs").Observable<UeSegmentDetailModel[]>;
+    currentSegment$: import("rxjs").Observable<number | undefined>;
+    rules$: import("rxjs").Observable<UeManifestSegmentRule[]>;
+    constructor(host: UmbControllerHost);
+    hostConnected(): Promise<void>;
+    getRuleByType(type: string): UeManifestSegmentRule | undefined;
+    setCurrentSegment(segmentId: number | undefined): void;
+}
+export default UeReportingContext;
+export declare const ENGAGE_REPORTING_CONTEXT_ALIAS = "UeReportingContext";
+export declare const ENGAGE_REPORTING_CONTEXT: UmbContextToken<UeReportingContext, UeReportingContext>;

package/dist/reporting/reporting.context.js

@@ -0,0 +1,49 @@
+import { UmbContextBase } from "@umbraco-cms/backoffice/class-api";
+import { UmbContextToken } from "@umbraco-cms/backoffice/context-api";
+import { umbExtensionsRegistry } from "@umbraco-cms/backoffice/extension-registry";
+import { UmbArrayState, UmbNumberState, } from "@umbraco-cms/backoffice/observable-api";
+import { tryExecute } from "@umbraco-cms/backoffice/resources";
+import { UeSegmentsDetailRepository, } from "../personalization/segments/index.js";
+export class UeReportingContext extends UmbContextBase {
+    #segmentsDetailRepository;
+    #segments;
+    // currentSegment is the ID, not the unique key. TODO => Guidify.
+    #currentSegment;
+    #rules;
+    constructor(host) {
+        super(host, ENGAGE_REPORTING_CONTEXT);
+        this.#segmentsDetailRepository = new UeSegmentsDetailRepository(this);
+        this.#segments = new UmbArrayState([], (x) => x.id);
+        this.segments$ = this.#segments.asObservable();
+        // currentSegment is the ID, not the unique key. TODO => Guidify.
+        this.#currentSegment = new UmbNumberState(undefined);
+        this.currentSegment$ = this.#currentSegment.asObservable();
+        this.#rules = new UmbArrayState([], (x) => x.type);
+        this.rules$ = this.#rules.asObservable();
+    }
+    async hostConnected() {
+        super.hostConnected();
+        await this.#getSegments();
+        this.#observeRules();
+    }
+    getRuleByType(type) {
+        return this.#rules.getValue().find((x) => x.meta.type === type);
+    }
+    setCurrentSegment(segmentId) {
+        this.#currentSegment.setValue(segmentId);
+    }
+    #observeRules() {
+        this.observe(umbExtensionsRegistry.byType("engageSegmentRule"), (rules) => {
+            if (!rules?.length)
+                return;
+            this.#rules.setValue(rules.sort((a, b) => ((a.weight ?? 0) > (b.weight ?? 0) ? 1 : -1)));
+        });
+    }
+    async #getSegments() {
+        const { data } = await tryExecute(this, this.#segmentsDetailRepository.requestAll());
+        this.#segments.setValue(data ?? []);
+    }
+}
+export default UeReportingContext;
+export const ENGAGE_REPORTING_CONTEXT_ALIAS = "UeReportingContext";
+export const ENGAGE_REPORTING_CONTEXT = new UmbContextToken(ENGAGE_REPORTING_CONTEXT_ALIAS);