@umbraco-engage/backoffice 17.0.0-rc1

package/dist/profiles/insights/goals/goals-table-collection-view.element.d.ts

@@ -0,0 +1,16 @@
+import { UeProfileInsightElement } from "../engage-profile-insight.interface.js";
+declare const elementName = "ue-profile-detail-goals-table";
+export declare class UeProfileDetailGoalsTableElement extends UeProfileInsightElement {
+    #private;
+    private _tableConfig;
+    private _tableColumns;
+    private _tableItems;
+    connectedCallback(): Promise<void>;
+    renderInsight(): import("lit-html").TemplateResult<1>;
+}
+export default UeProfileDetailGoalsTableElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeProfileDetailGoalsTableElement;
+    }
+}

package/dist/profiles/insights/goals/goals-table-collection-view.element.js

@@ -0,0 +1,122 @@
+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 { customElement, html, state, when, } from "@umbraco-cms/backoffice/external/lit";
+import { tryExecute } from "@umbraco-cms/backoffice/resources";
+import { UeProfileInsightElement } from "../engage-profile-insight.interface.js";
+import { GoalService, ProfileService, } from "../../../generated/index.js";
+const elementName = "ue-profile-detail-goals-table";
+let UeProfileDetailGoalsTableElement = class UeProfileDetailGoalsTableElement extends UeProfileInsightElement {
+    constructor() {
+        super(...arguments);
+        this._tableConfig = {
+            allowSelection: false,
+            hideIcon: true,
+        };
+        this._tableColumns = [
+            {
+                name: "Info",
+                alias: "info",
+            },
+            {
+                name: "Conversions",
+                alias: "conversions",
+            },
+            {
+                name: "Value",
+                alias: "value",
+            },
+        ];
+        this._tableItems = [];
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        await this.#getGoals();
+        this.loading = false;
+    }
+    async #getGoals() {
+        const { data } = await tryExecute(this, ProfileService.getProfileGoalCompletions({
+            query: { visitorId: this.profileId },
+        }));
+        if (!data) {
+            return;
+        }
+        const goals = await this.#mapGoals(data);
+        this.#createTableItems(goals);
+    }
+    async #mapGoals(data) {
+        const mappedGoals = await Promise.all(data.map(async (goal) => {
+            const { name, isMain } = await this.#getGoalDetail(goal.unique);
+            const { unique, completionCount, goalId, totalValue } = goal;
+            return {
+                unique,
+                completionCount,
+                goalId,
+                totalValue,
+                entityType: "",
+                name,
+                isMain,
+            };
+        }));
+        return mappedGoals;
+    }
+    async #getGoalDetail(id) {
+        const { data } = await tryExecute(this, GoalService.getGoalDetails({ query: { id } }));
+        return data;
+    }
+    #createTableItems(result) {
+        this._tableItems = result.map((goal) => {
+            return {
+                id: goal.unique,
+                data: [
+                    {
+                        columnAlias: "info",
+                        value: goal.name,
+                    },
+                    {
+                        columnAlias: "conversions",
+                        value: goal.completionCount,
+                    },
+                    {
+                        columnAlias: "value",
+                        value: goal.totalValue,
+                    },
+                ],
+            };
+        });
+    }
+    #renderTable() {
+        return when(this._tableItems.length, () => html `
+          <umb-table
+            .config=${this._tableConfig}
+            .columns=${this._tableColumns}
+            .items=${this._tableItems}
+          >
+          </umb-table>
+        `, () => html `
+        <ue-empty-state>
+          ${this.localize.term("engage_profile_details_noGoals")}
+        </ue-empty-state>
+      `);
+    }
+    renderInsight() {
+        return this.#renderTable();
+    }
+};
+__decorate([
+    state()
+], UeProfileDetailGoalsTableElement.prototype, "_tableConfig", void 0);
+__decorate([
+    state()
+], UeProfileDetailGoalsTableElement.prototype, "_tableColumns", void 0);
+__decorate([
+    state()
+], UeProfileDetailGoalsTableElement.prototype, "_tableItems", void 0);
+UeProfileDetailGoalsTableElement = __decorate([
+    customElement(elementName)
+], UeProfileDetailGoalsTableElement);
+export { UeProfileDetailGoalsTableElement };
+export default UeProfileDetailGoalsTableElement;

package/dist/profiles/insights/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./active-segments/active-segments-list.element.js";
+export * from "./campaigns/campaigns-list.element.js";
+export * from "./customer-journeys/customer-journeys.element.js";
+export * from "./goals/goals-table-collection-view.element.js";
+export * from "./persona-groups/persona-groups.element.js";
+export * from "./search-terms/search-terms.element.js";
+export * from "./engage-profile-insight.interface.js";
+export * from "./potential/potential.element.js";
+export * from "./constants.js";

package/dist/profiles/insights/index.js

@@ -0,0 +1,9 @@
+export * from "./active-segments/active-segments-list.element.js";
+export * from "./campaigns/campaigns-list.element.js";
+export * from "./customer-journeys/customer-journeys.element.js";
+export * from "./goals/goals-table-collection-view.element.js";
+export * from "./persona-groups/persona-groups.element.js";
+export * from "./search-terms/search-terms.element.js";
+export * from "./engage-profile-insight.interface.js";
+export * from "./potential/potential.element.js";
+export * from "./constants.js";

package/dist/profiles/insights/manifests.d.ts

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

package/dist/profiles/insights/manifests.js

@@ -0,0 +1,48 @@
+import { ENGAGE_PROFILE_INSIGHT_EXTENSION_TYPE } from "./constants.js";
+const insights = [
+    {
+        name: "Goals",
+        js: () => import("./goals/goals-table-collection-view.element.js"),
+    },
+    {
+        name: "Campaigns",
+        js: () => import("./campaigns/campaigns-list.element.js"),
+    },
+    {
+        name: "Potential",
+        js: () => import("./potential/potential.element.js"),
+        sidebar: true,
+    },
+    {
+        name: "Search Terms",
+        js: () => import("./search-terms/search-terms.element.js"),
+        noPadding: true,
+    },
+    {
+        name: "Segments",
+        js: () => import("./active-segments/active-segments-list.element.js"),
+    },
+    {
+        name: "Persona Groups",
+        js: () => import("./persona-groups/persona-groups.element.js"),
+        wide: true,
+    },
+    {
+        name: "Journeys",
+        js: () => import("./customer-journeys/customer-journeys.element.js"),
+        wide: true,
+    },
+];
+export const manifests = insights.map((x) => ({
+    type: ENGAGE_PROFILE_INSIGHT_EXTENSION_TYPE,
+    name: `Engage Profile Insights ${x.name}`,
+    alias: `Engage.Profile.Insights.${x.name.replaceAll(" ", "")}`,
+    js: x.js,
+    weight: 100,
+    meta: {
+        label: `#engage_profile_details_headline${x.name.replaceAll(" ", "")}`,
+        wide: x.wide ?? false,
+        sidebar: x.sidebar ?? false,
+        noPadding: x.noPadding ?? false,
+    },
+}));

package/dist/profiles/insights/persona-groups/persona-groups.element.d.ts

@@ -0,0 +1,15 @@
+import { UeProfileInsightElement } from "../engage-profile-insight.interface.js";
+declare const elementName = "ue-profile-detail-persona-groups";
+export declare class UeProfileDetailsPersonaGroupsElement extends UeProfileInsightElement {
+    #private;
+    private personaScores;
+    connectedCallback(): Promise<void>;
+    renderInsight(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export default UeProfileDetailsPersonaGroupsElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeProfileDetailsPersonaGroupsElement;
+    }
+}

package/dist/profiles/insights/persona-groups/persona-groups.element.js

@@ -0,0 +1,65 @@
+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 { UeProfileInsightElement } from "../engage-profile-insight.interface.js";
+import { css, customElement, html, state, } from "@umbraco-cms/backoffice/external/lit";
+import { tryExecute } from "@umbraco-cms/backoffice/resources";
+import { ProfileService, } from "../../../generated/index.js";
+const elementName = "ue-profile-detail-persona-groups";
+let UeProfileDetailsPersonaGroupsElement = class UeProfileDetailsPersonaGroupsElement extends UeProfileInsightElement {
+    constructor() {
+        super(...arguments);
+        this.personaScores = [];
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        await this.#getPersonaGroups();
+        this.loading = false;
+    }
+    async #getPersonaGroups() {
+        const { data } = await tryExecute(this, ProfileService.getProfilePersonaScores({
+            query: { visitorId: this.profileId },
+        }));
+        if (data) {
+            this.personaScores = data;
+        }
+    }
+    #renderPersonaGroups() {
+        return html `
+      <ue-persona-group-scoring
+        inert
+        .config=${{ hideDivider: true }}
+        .value=${this.personaScores?.map((p) => ({
+            entityId: p.personaId,
+            score: p.score,
+            unique: "",
+            id: 0,
+        })) ?? []}
+      >
+      </ue-persona-group-scoring>
+    `;
+    }
+    renderInsight() {
+        return this.#renderPersonaGroups();
+    }
+    static { this.styles = css `
+    ue-persona-group-scoring {
+      --group-gap: 0;
+
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: var(--uui-size-space-4);
+    }
+  `; }
+};
+__decorate([
+    state()
+], UeProfileDetailsPersonaGroupsElement.prototype, "personaScores", void 0);
+UeProfileDetailsPersonaGroupsElement = __decorate([
+    customElement(elementName)
+], UeProfileDetailsPersonaGroupsElement);
+export { UeProfileDetailsPersonaGroupsElement };
+export default UeProfileDetailsPersonaGroupsElement;

package/dist/profiles/insights/potential/potential.css.d.ts

@@ -0,0 +1 @@
+export declare const ProfilePotientialStyles: import("lit").CSSResult;

package/dist/profiles/insights/potential/potential.css.js

@@ -0,0 +1,191 @@
+import { css } from "@umbraco-cms/backoffice/external/lit";
+export const ProfilePotientialStyles = css `
+  #wrapper {
+    padding: 20px;
+  }
+
+  #holder {
+    padding-top: 100%;
+    height: 0;
+    position: relative;
+  }
+
+  #item {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #item::after,
+  #item::before {
+    content: "";
+    width: 3px;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    background: linear-gradient(
+      -180deg,
+      #29c175,
+      #29c135,
+      #5bc129,
+      #9bc129,
+      #c1a829,
+      #c16829,
+      #c12929
+    );
+    z-index: 1;
+  }
+
+  #item::after {
+    transform: rotate(90deg);
+  }
+
+  #ring-holder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 0;
+  }
+
+  .ring {
+    border-radius: 50%;
+    border: 12px solid #68676b;
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.05;
+    margin: auto;
+    box-sizing: border-box;
+  }
+
+  .ring:nth-child(2) {
+    width: 62%;
+    height: 62%;
+    opacity: 0.14;
+  }
+
+  .ring:nth-child(3) {
+    width: 25%;
+    height: 25%;
+    opacity: 0.3;
+  }
+  ue-label {
+    display: inline;
+  }
+  #names {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: 0;
+    list-style: none;
+    bottom: 0;
+    right: 0;
+  }
+
+  #names > * {
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    justify-content: center;
+    transform-origin: top left;
+  }
+
+  #names > :nth-child(1) {
+    left: 50%;
+    transform: translate(-50%, -100%);
+  }
+
+  #names > :nth-child(2) {
+    right: 0;
+    left: auto;
+    top: 50%;
+    transform-origin: top right;
+    transform: rotate(90deg) translate(50%, -100%);
+  }
+
+  #names > :nth-child(3) {
+    left: 50%;
+    top: auto;
+    bottom: 0;
+    transform: translate(-50%, 100%);
+  }
+
+  #names > :nth-child(4) {
+    left: 0;
+    top: 50%;
+    transform: rotate(-90deg) translate(-50%, -100%);
+  }
+
+  #holds-pin {
+    width: 50%;
+    height: 50%;
+    transform: translate(50%, -50%);
+    position: relative;
+  }
+
+  #pin {
+    --color: 152;
+    width: 15px;
+    height: 15px;
+    color: hsl(var(--color), 65%, 46%);
+    position: absolute;
+    z-index: 2;
+    top: auto;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    opacity: 1;
+    transform: scale(1);
+    transition: transform 0.8s cubic-bezier(0.06, 0.44, 0, 1.2);
+  }
+
+  #pin > span {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    color: inherit;
+    background: currentColor;
+    z-index: 1;
+  }
+
+  #pin::after,
+  #pin::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    border-radius: 50%;
+    transform: scale(2.5);
+    color: inherit;
+    background: currentColor;
+    z-index: 0;
+    filter: brightness(1.3) grayscale(0.8);
+    opacity: 0.3;
+    pointer-events: none;
+  }
+
+  #pin::after {
+    filter: brightness(1.2) grayscale(0.4);
+    animation: animateDot 2s ease infinite;
+  }
+`;

package/dist/profiles/insights/potential/potential.element.d.ts

@@ -0,0 +1,20 @@
+import { UeProfileInsightElement } from "../engage-profile-insight.interface.js";
+import { type ProfilePotentialDtoModel } from "../../../generated/index.js";
+declare const elementName = "ue-profile-detail-potential";
+export declare class UeProfileDetailsPotentialElement extends UeProfileInsightElement {
+    #private;
+    set profileId(value: number | undefined);
+    get profileId(): number | undefined;
+    profilePotential: ProfilePotentialDtoModel | undefined;
+    chartDataset: Array<number>;
+    pinColor: number;
+    updatePinColor(dataSet: any): number;
+    renderInsight(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export default UeProfileDetailsPotentialElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeProfileDetailsPotentialElement;
+    }
+}

package/dist/profiles/insights/potential/potential.element.js

@@ -0,0 +1,109 @@
+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 { UeProfileInsightElement } from "../engage-profile-insight.interface.js";
+import { ProfilePotientialStyles } from "./potential.css.js";
+import { customElement, html, property, state, } from "@umbraco-cms/backoffice/external/lit";
+import { tryExecute } from "@umbraco-cms/backoffice/resources";
+import { ProfileService, } from "../../../generated/index.js";
+const elementName = "ue-profile-detail-potential";
+let UeProfileDetailsPotentialElement = class UeProfileDetailsPotentialElement extends UeProfileInsightElement {
+    constructor() {
+        super(...arguments);
+        this.chartDataset = [10, 40];
+        this.pinColor = 0;
+    }
+    set profileId(value) {
+        if (!value)
+            return;
+        this._profileId = value;
+        this.#getProfilePotential();
+    }
+    get profileId() {
+        return this._profileId;
+    }
+    async #getProfilePotential() {
+        const { data } = await tryExecute(this, ProfileService.getProfilePotential({
+            query: { visitorId: this.profileId },
+        }));
+        if (data) {
+            this.profilePotential = data;
+            this.profilePotential.active = Math.round(this.profilePotential.active * 100);
+            this.profilePotential.engaged = Math.round(this.profilePotential.engaged * 100);
+            this.chartDataset = [
+                this.profilePotential.active,
+                this.profilePotential.engaged,
+            ];
+            // Set pin color
+            this.pinColor = this.updatePinColor(this.profilePotential);
+            this.loading = false;
+        }
+    }
+    updatePinColor(dataSet) {
+        // The color we would like to render is a H-value (from HSL colors) between 0 (red) and 152 (green). Any number in between is something in the spectum between red and green.
+        // 2.6 is based on the hardness of the color HSL. If you would like the red color to show up earlier, make this number higher.
+        const activeColor = (dataSet.active + 100) / 2.6;
+        const engagedColor = (dataSet.engaged + 100) / 2.6;
+        let pinColor = activeColor + engagedColor;
+        if (pinColor > 152) {
+            // This is the maximum hsl color we would like to show. Anything above is not green anymore.
+            pinColor = 152;
+        }
+        return pinColor;
+    }
+    #renderPotential() {
+        return html `
+      <div id="wrapper">
+        <div id="holder">
+          <div id="item">
+            <div id="ring-holder">
+              <div class="ring"></div>
+              <div class="ring"></div>
+              <div class="ring"></div>
+            </div>
+            <ol id="names">
+              <li><ue-label>Ued</ue-label></li>
+              <li><ue-label>Active</ue-label></li>
+              <li><ue-label>Not engaged</ue-label></li>
+              <li><ue-label>Inactive</ue-label></li>
+            </ol>
+            <div id="holds-pin">
+              <div
+                id="pin"
+                style="--color: ${this.pinColor}; bottom: ${this
+            .profilePotential?.engaged}%; left: ${this.profilePotential
+            ?.active}%"
+              >
+                <span></span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    renderInsight() {
+        return this.#renderPotential();
+    }
+    static { this.styles = [ProfilePotientialStyles]; }
+};
+__decorate([
+    property({ type: Number })
+], UeProfileDetailsPotentialElement.prototype, "profileId", null);
+__decorate([
+    state()
+], UeProfileDetailsPotentialElement.prototype, "profilePotential", void 0);
+__decorate([
+    state()
+], UeProfileDetailsPotentialElement.prototype, "chartDataset", void 0);
+__decorate([
+    state()
+], UeProfileDetailsPotentialElement.prototype, "pinColor", void 0);
+UeProfileDetailsPotentialElement = __decorate([
+    customElement(elementName)
+], UeProfileDetailsPotentialElement);
+export { UeProfileDetailsPotentialElement };
+export default UeProfileDetailsPotentialElement;

package/dist/profiles/insights/search-terms/search-terms.element.d.ts

@@ -0,0 +1,19 @@
+import { UeProfileInsightElement } from "../engage-profile-insight.interface.js";
+declare const elementName = "ue-profile-detail-search-terms";
+export declare class UeProfileDetailsSearchTermsElement extends UeProfileInsightElement {
+    #private;
+    private _tableSearchTermsColumns;
+    private _allSearchTermsItems;
+    private _tableSearchTermsItems;
+    private _currentPage;
+    private _totalPages;
+    connectedCallback(): Promise<void>;
+    renderInsight(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export default UeProfileDetailsSearchTermsElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeProfileDetailsSearchTermsElement;
+    }
+}