@umbraco-engage/backoffice 17.0.0-rc1

package/dist/profiles/activity-tracker/activity-tracker.element.js

@@ -0,0 +1,289 @@
+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, property, state, when, } from "@umbraco-cms/backoffice/external/lit";
+import { tryExecute } from "@umbraco-cms/backoffice/resources";
+import { UeTableStyles } from "./ue-table.styles.js";
+import { UeProfileActivityBaseElement } from "./profile-activity-base.element.js";
+import { ProfileService } from "../../generated/index.js";
+const elementName = "ue-profile-detail-activity-tracker";
+let UeProfileDetailsActivityTrackerElement = class UeProfileDetailsActivityTrackerElement extends UeProfileActivityBaseElement {
+    constructor() {
+        super(...arguments);
+        this.#headerKeys = [
+            "engage_profile_details_session",
+            "engage_profile_details_date",
+            "engage_profile_details_time",
+            "engage_profile_details_deviceType",
+            "engage_profile_details_pages",
+            "engage_profile_details_sessionDuration",
+            "engage_profile_details_engagedTime",
+            "engage_profile_details_goals",
+            "engage_profile_details_events",
+            "engage_profile_details_inboundUrl",
+            "engage_profile_details_source",
+            "", // for buttons column
+        ];
+        this._loading = true;
+        this._profileSessions = [];
+        this._pageviewsById = {};
+    }
+    #headerKeys;
+    set profileId(value) {
+        if (!value)
+            return;
+        this.#getAllProfileSessions([value]);
+    }
+    set profileIds(value) {
+        if (!value)
+            return;
+        this.#getAllProfileSessions(value);
+    }
+    async #getAllProfileSessions(profileIds) {
+        if (!profileIds?.length) {
+            this._loading = false;
+            return;
+        }
+        this._loading = true;
+        // Fetch all sessions in parallel and collect results
+        const results = await Promise.all(profileIds.map((id) => this.#getProfileSessions(id)));
+        // Flatten, map, and assign once
+        const allSessions = results.flat().map((r) => ({
+            ...r,
+            pageviewInfoVisible: false,
+            unique: null,
+            entityType: null,
+        }));
+        this._profileSessions = allSessions;
+        this._loading = false;
+    }
+    async #getProfileSessions(id) {
+        const { data } = await tryExecute(this, ProfileService.getProfileSessions({
+            query: { VisitorId: id },
+        }));
+        return (data?.results.map((d) => ({ ...d, pageviewInfoVisible: false })) ?? []);
+    }
+    async #getPageviewsById(id) {
+        if (!id)
+            return;
+        const { data } = await tryExecute(this, ProfileService.getProfilePageviews({
+            query: { sessionId: id },
+        }));
+        this._pageviewsById = {
+            ...this._pageviewsById,
+            [id]: data.map((d) => ({
+                ...d,
+                eventInfoVisible: false,
+            })),
+        };
+        return data;
+    }
+    async #openPageviewRow(session) {
+        if (!session)
+            return;
+        session.pageviewInfoVisible = !session.pageviewInfoVisible;
+        // Get data from API if not stored in component's state
+        if (!this._pageviewsById[session.id]) {
+            const data = await this.#getPageviewsById(session.id);
+            // The IP can only be retrieved from the pageview API. We will get the IP of the first item in the response and use that in the session-object.
+            if (data && data.length > 0) {
+                session.ipAddress = data[0].ipAddress;
+            }
+            //Refresh location for row based on session
+            this.#refreshSessionLocation(session);
+        }
+        this._profileSessions = this._profileSessions?.map((s) => s.id === session.id ? session : s);
+    }
+    #refreshSessionLocation(session) {
+        session.location = [
+            session.country,
+            session.province,
+            session.county,
+            session.city,
+        ]
+            .filter(Boolean)
+            .join(", ");
+    }
+    #renderProfileSessionRow(session) {
+        const sessionWasAbTested = session.wasAbTested || session.wasPersonalized;
+        const visible = session.pageviewInfoVisible;
+        return html `
+      <tbody>
+        <tr
+          class="toggle"
+          @click=${async () => await this.#openPageviewRow(session)}
+        >
+          <td class="profile-table-type-holder">
+            <ue-profile-line-item
+              bottom
+              ?activeAfter=${sessionWasAbTested}
+              ?active=${visible}
+            >
+            </ue-profile-line-item>
+
+            <span class="profile-type-holder">
+              <ue-profile-type-indicator
+                large
+                ?light=${sessionWasAbTested && !visible}
+                ?active=${sessionWasAbTested && visible}
+              >
+                <uui-icon name="icon-chrome-logo"></uui-icon>
+              </ue-profile-type-indicator>
+            </span>
+          </td>
+          <td class="nowrap">
+            ${this.localize.date(session.startDate, {
+            dateStyle: "medium",
+        })}
+          </td>
+          <td>
+            ${this.localize.date(session.startDate, {
+            timeStyle: "short",
+        })}
+          </td>
+          <td>${session.deviceType ?? "-"}</td>
+          <td>${session.pageviewCount}</td>
+          <td>${this.toDateTime(session.sessionDurationInSeconds)}</td>
+          <td>${this.toDateTime(session.engagedTimeInSeconds)}</td>
+          <td>${session.goalCompletionCount ?? 0}</td>
+          <td>${session.goalCompletionCount ?? 4}</td>
+          <td>
+            <span popovertarget="inboundUrlTooltip">
+              ${this.renderSlicedUrl(session.inboundUrl)}
+              ${this.renderUrlToolipAndButton("inboundUrlTooltip", "engage_profile_details_inboundUrl", "icon-out", session.inboundUrl)}
+            </span>
+          </td>
+          <td>
+            ${when(session.referrerUrl, () => html `
+                <span popovertarget="referrerUrlTooltip">
+                  ${this.renderSlicedUrl(session.referrerUrl)}
+                  ${this.renderUrlToolipAndButton("referrerUrlTooltip", "engage_profile_details_source", "icon-fullscreen", session.referrerUrl)}
+                </span>
+              `, () => `Direct`)}
+          </td>
+          <td class="expand-row">
+            <uui-icon
+              name=${`icon-circle-arrow-${visible ? "up" : "down"}`}
+            ></uui-icon>
+          </td>
+        </tr>
+
+        ${when(visible, () => html `
+            <tr>
+              <td colspan="12" class="nested-parent">
+                <ue-profile-detail-activity-pageviews
+                  .session=${session}
+                  .pageviews=${this._pageviewsById[session.id]}
+                ></ue-profile-detail-activity-pageviews>
+              </td>
+            </tr>
+          `)}
+      </tbody>
+    `;
+    }
+    render() {
+        if (this._loading)
+            return html `<uui-loader></uui-loader>`;
+        return html `
+      <uui-box
+        .headline=${this.localize.term("engage_profile_details_headlineActivityTracker")}
+      >
+        <table>
+          <thead>
+            <tr class="labels">
+              ${this.#headerKeys.map((key, idx) => html `
+                  <th class=${idx === 0 ? "profile-table-type-holder" : ""}>
+                    ${key ? this.localize.term(key) : ""}
+                  </th>
+                `)}
+            </tr>
+          </thead>
+
+          ${when(this._profileSessions?.length, () => this._profileSessions?.map((session) => this.#renderProfileSessionRow(session)), () => html `
+              <tbody>
+                <tr>
+                  <td colspan="12">
+                    <div class="empty-message">
+                      ${this.localize.term("engage_profile_details_no_activity")}
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            `)}
+        </table>
+      </uui-box>
+    `;
+    }
+    static { this.styles = [
+        UeTableStyles,
+        css `
+      uui-box {
+        --uui-box-default-padding: 0;
+      }
+
+      uui-loader {
+        display: block;
+        margin: var(--uui-size-5);
+        text-align: center;
+      }
+
+      [popovertarget] {
+        display: flex;
+        align-items: center;
+      }
+
+      .labels th {
+        background: rgba(238, 238, 240, 0.5) !important;
+
+        &:first-child {
+          text-align: center;
+        }
+      }
+
+      .expand-row {
+        color: grey;
+
+        uui-icon {
+          width: var(--uui-size-8);
+        }
+      }
+
+      .nowrap {
+        white-space: nowrap;
+      }
+
+      .toggle:hover td {
+        cursor: pointer;
+        background: #f6f6f7;
+      }
+
+      .empty-message {
+        text-align: center;
+        padding: var(--uui-size-layout-1);
+      }
+    `,
+    ]; }
+};
+__decorate([
+    property({ type: Number })
+], UeProfileDetailsActivityTrackerElement.prototype, "profileId", null);
+__decorate([
+    property({ type: Array })
+], UeProfileDetailsActivityTrackerElement.prototype, "profileIds", null);
+__decorate([
+    state()
+], UeProfileDetailsActivityTrackerElement.prototype, "_loading", void 0);
+__decorate([
+    state()
+], UeProfileDetailsActivityTrackerElement.prototype, "_profileSessions", void 0);
+__decorate([
+    state()
+], UeProfileDetailsActivityTrackerElement.prototype, "_pageviewsById", void 0);
+UeProfileDetailsActivityTrackerElement = __decorate([
+    customElement(elementName)
+], UeProfileDetailsActivityTrackerElement);
+export { UeProfileDetailsActivityTrackerElement };
+export default UeProfileDetailsActivityTrackerElement;

package/dist/profiles/activity-tracker/components/activity-events/activity-events.element.d.ts

@@ -0,0 +1,20 @@
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+import type { UeProfileDetailsActivitySessionModel, UeProfileDetailsPageviewEventModel, UeProfileDetailsPageviewModel } from "../../../entities.js";
+declare const elementName = "ue-profile-activity-table-events";
+export declare class UeProfileDetailsActivityEventsElement extends UmbLitElement {
+    #private;
+    set pageview(value: UeProfileDetailsPageviewModel | null | undefined);
+    get pageview(): UeProfileDetailsPageviewModel | null | undefined;
+    set session(value: UeProfileDetailsActivitySessionModel | null | undefined);
+    get session(): UeProfileDetailsActivitySessionModel | null | undefined;
+    events: Array<UeProfileDetailsPageviewEventModel>;
+    constructor();
+    render(): import("lit-html").TemplateResult<1> | undefined;
+    static styles: import("lit").CSSResult[];
+}
+export default UeProfileDetailsActivityEventsElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeProfileDetailsActivityEventsElement;
+    }
+}

package/dist/profiles/activity-tracker/components/activity-events/activity-events.element.js

@@ -0,0 +1,321 @@
+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, property, when, } from "@umbraco-cms/backoffice/external/lit";
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+import { UMB_WORKSPACE_MODAL } from "@umbraco-cms/backoffice/workspace";
+import { UmbModalRouteRegistrationController } from "@umbraco-cms/backoffice/router";
+import { ENGAGE_AB_TESTING_TEST_ENTITY_TYPE } from "../../../../ab-testing/index.js";
+import { UeTableStyles } from "../../ue-table.styles.js";
+const elementName = "ue-profile-activity-table-events";
+let UeProfileDetailsActivityEventsElement = class UeProfileDetailsActivityEventsElement extends UmbLitElement {
+    #pageview;
+    #session;
+    #isPersonalizedPageview;
+    #isPersonalizedSession;
+    set pageview(value) {
+        if (!value)
+            return;
+        this.#pageview = value;
+        this.#isPersonalizedPageview =
+            (value.abTests?.length ?? 0) > 0 || !!value?.appliedPersonalizationName;
+    }
+    get pageview() {
+        return this.#pageview;
+    }
+    set session(value) {
+        if (!value)
+            return;
+        this.#session = value;
+        this.#isPersonalizedSession = value.wasPersonalized || value.wasAbTested;
+    }
+    get session() {
+        return this.#session;
+    }
+    #eventTypes;
+    #modalPath;
+    constructor() {
+        super();
+        this.#isPersonalizedPageview = false;
+        this.#isPersonalizedSession = false;
+        this.events = [];
+        this.#eventTypes = [
+            {
+                name: "Start",
+                key: "Start",
+                icon: "",
+            },
+            {
+                name: "End",
+                key: "End",
+                icon: "",
+            },
+            {
+                name: "Max reached scroll depth",
+                key: "ScrollDepth",
+                icon: "icon-event-scroll",
+            },
+            {
+                name: "Goal reached",
+                key: "GoalCompletion",
+                icon: "icon-event-goal-reached",
+            },
+            {
+                name: "Click",
+                key: "OutClick",
+                icon: "icon-event-click",
+            },
+            {
+                name: "Event triggered",
+                key: "Event",
+                icon: "icon-event-click",
+            },
+            {
+                name: "Video event",
+                key: "Video",
+                icon: "icon-event-video",
+            },
+            {
+                name: "Umbraco Forms",
+                key: "UmbracoForms",
+                icon: "icon-event-form",
+            },
+        ];
+        new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
+            .addAdditionalPath(ENGAGE_AB_TESTING_TEST_ENTITY_TYPE)
+            .onSetup(() => ({
+            data: {
+                entityType: ENGAGE_AB_TESTING_TEST_ENTITY_TYPE,
+            },
+            modal: {
+                size: "full",
+            },
+        }))
+            .observeRouteBuilder((routeBuilder) => {
+            this.#modalPath = routeBuilder({});
+        });
+    }
+    #onAbTestClick(id) {
+        if (!id)
+            return;
+        history.pushState(null, "", this.#modalPath + `edit/${id}`);
+    }
+    #renderProfileIndicators(singleEvent) {
+        return html `
+      ${when(singleEvent.type == "GoalCompletion", () => this.localize.term("engage_profile_details_conversion"))}
+      ${when(singleEvent.type == "Start" && this.pageview.abTests.length > 0, () => this.pageview?.abTests?.map((abTestVariant, i) => html `
+              <span popovertarget="abTestTooltip_${i}">
+                <uui-button
+                  compact
+                  @click=${() => this.#onAbTestClick(abTestVariant.id)}
+                  label="Go to A/B test '${abTestVariant.name}'"
+                  class="ums-profile__regular-indicator"
+                >
+                  <span class="flex align-center">
+                    <uui-icon name="icon-ab-testing"></uui-icon>
+                    ${abTestVariant.variantName}
+                  </span>
+                </uui-button>
+                <uui-popover-container id="abTestTooltip_${i}">
+                  <ue-tooltip hint>
+                    ${when(abTestVariant.description, (v) => html `<span>${v}</span>`)}
+                    <span style="opacity:0.6;"
+                      >${this.localize.term("engage_profile_details_clickDetail")}</span
+                    >
+                  </ue-tooltip>
+                </uui-popover-container>
+              </span>
+            `))}
+    `;
+    }
+    render() {
+        if (!this.pageview || !this.session)
+            return;
+        return html `
+      <table>
+        <thead>
+          <tr>
+            <th class="profile-table-type-holder">
+              <ue-profile-line-item
+                active
+                ?activeBefore=${this.#isPersonalizedSession}
+                ?activeAfter=${this.#isPersonalizedSession}
+              ></ue-profile-line-item>
+              <ue-profile-line-item
+                inside
+                rotated
+                active
+                ?sessionActive=${this.#isPersonalizedSession}
+                ?activeBefore=${this.#isPersonalizedPageview}
+                ?activeAfter=${this.#isPersonalizedPageview}
+              ></ue-profile-line-item>
+            </th>
+            <th>
+              <ue-label labelKey="engage_profile_details_time"></ue-label>
+            </th>
+            <th>
+              <ue-label labelKey="engage_profile_details_icon"></ue-label>
+            </th>
+            <th>
+              <ue-label labelKey="engage_profile_details_event"></ue-label>
+            </th>
+            <th>
+              <ue-label labelKey="engage_profile_details_detail"></ue-label>
+            </th>
+            <th></th>
+          </tr>
+        </thead>
+        ${when(this.events?.length, () => html `
+            <tbody>
+              ${this.events.map((singleEvent, i, arr) => html `
+                  <tr>
+                    <td class="profile-table-type-holder">
+                      <ue-profile-line-item
+                        active
+                        ?activeAfter=${this.#isPersonalizedSession}
+                        ?activeBefore=${this.#isPersonalizedSession}
+                      ></ue-profile-line-item>
+
+                      <ue-profile-line-item
+                        inside
+                        active
+                        ?last=${i == arr.length - 1}
+                        ?activeBefore=${this.#isPersonalizedPageview}
+                      ></ue-profile-line-item>
+                    </td>
+                    <td>
+                      <span class="profile-type-holder ">
+                        <ue-profile-type-indicator
+                          small
+                          ?active=${this.pageview.abTests.length > 0 ||
+            !!this.pageview?.appliedPersonalizationName}
+                        ></ue-profile-type-indicator>
+                      </span>
+                      ${this.localize.date(singleEvent.timestamp, {
+            timeStyle: "short",
+        })}
+                    </td>
+                    <td>
+                      ${when(this.#eventTypes.find((e) => e.key == singleEvent.type), (e) => html ` <uui-icon .name=${e.icon}></uui-icon> `)}
+                    </td>
+                    <td>
+                      ${when(this.#eventTypes.find((e) => e.key == singleEvent.type), (e) => this.localize.term(`engage_profile_details_event${e.key}`))}
+                    </td>
+                    <td>${singleEvent.detail}</td>
+                    <td>${this.#renderProfileIndicators(singleEvent)}</td>
+                  </tr>
+                `)}
+            </tbody>
+          `, () => html `
+            <tbody>
+              <tr>
+                <td class="profile-table-type-holder">
+                  <ue-profile-line-item
+                    active
+                    ?activeAfter=${this.#isPersonalizedSession}
+                    ?activeBefore=${this.#isPersonalizedSession}
+                  ></ue-profile-line-item>
+                </td>
+                <td class="profile-table-type-holder small">
+                  <ue-profile-line-item
+                    inside
+                    active
+                    ?activeAfter=${this.#isPersonalizedPageview}
+                    ?activeBefore=${this.#isPersonalizedPageview}
+                  ></ue-profile-line-item>
+
+                  <span class="profile-type-holder">
+                    <ue-profile-type-indicator
+                      small
+                      second
+                      ?active=${this.pageview.abTests.length > 0 ||
+            !!this.pageview?.appliedPersonalizationName}
+                    ></ue-profile-type-indicator>
+                  </span>
+                </td>
+                <td colspan="5">Loading ...</td>
+              </tr>
+            </tbody>
+          `)}
+      </table>
+    `;
+    }
+    static { this.styles = [
+        UeTableStyles,
+        css `
+      td {
+        border-top-width: 0;
+        background-color: white;
+      }
+
+      th {
+        padding-bottom: var(--uui-size-1);
+      }
+
+      tr::before,
+      tr::after,
+      td:first-child::before,
+      td:last-child::before {
+        content: "";
+        background: white;
+        position: absolute;
+        top: 0;
+        width: 18px;
+        bottom: 0;
+      }
+
+      tr::after,
+      td:first-child::before {
+        right: 0;
+      }
+
+      td:last-child::before {
+        background: #eeeef080;
+        right: 18px;
+      }
+
+      .profile-table-type-holder {
+        background: transparent;
+      }
+
+      .profile-type-holder {
+        position: absolute !important;
+        left: 0;
+        top: 50%;
+        width: auto;
+        transform: translate(-14px, -12px);
+      }
+
+      .small {
+        width: var(--uui-size-7);
+      }
+
+      td {
+        padding-top: var(--uui-size-4);
+        padding-bottom: var(--uui-size-4);
+        border-bottom: var(--uui-size-1) solid transparent;
+      }
+
+      tr:last-of-type > td {
+        border-bottom-width: var(--uui-size-6);
+      }
+    `,
+    ]; }
+};
+__decorate([
+    property({ type: Object })
+], UeProfileDetailsActivityEventsElement.prototype, "pageview", null);
+__decorate([
+    property({ type: Object })
+], UeProfileDetailsActivityEventsElement.prototype, "session", null);
+__decorate([
+    property({ type: Array })
+], UeProfileDetailsActivityEventsElement.prototype, "events", void 0);
+UeProfileDetailsActivityEventsElement = __decorate([
+    customElement(elementName)
+], UeProfileDetailsActivityEventsElement);
+export { UeProfileDetailsActivityEventsElement };
+export default UeProfileDetailsActivityEventsElement;

package/dist/profiles/activity-tracker/components/activity-pageviews/activity-pageviews.element.d.ts

@@ -0,0 +1,23 @@
+import { UeProfileActivityBaseElement } from "../../../activity-tracker/profile-activity-base.element.js";
+import type { UeProfileDetailsActivitySessionModel, UeProfileDetailsPageviewModel } from "../../../entities.js";
+declare const elementName = "ue-profile-detail-activity-pageviews";
+export declare class UeProfileDetailsActivityPageviewsElement extends UeProfileActivityBaseElement {
+    #private;
+    pageviews: Array<UeProfileDetailsPageviewModel>;
+    set session(value: UeProfileDetailsActivitySessionModel | null | undefined);
+    get session(): UeProfileDetailsActivitySessionModel | null | undefined;
+    private _wasPersonalizedOrAbTested;
+    private eventsByPageviewId;
+    hasPageviews(): boolean;
+    openEventRow(pageview: UeProfileDetailsPageviewModel): Promise<void>;
+    personalizedClass(className: string): string;
+    renderIcon(pageview: any): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export default UeProfileDetailsActivityPageviewsElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeProfileDetailsActivityPageviewsElement;
+    }
+}