@umbraco-engage/backoffice 17.0.0-rc1 → 17.0.0

package/dist/core/components/scoring/scoring-base.element.d.ts

@@ -9,7 +9,7 @@ export declare abstract class UeScoringBaseElement<GroupModel extends UeScoreabl
     protected items: GroupModel[];
     value: UeEntityScoreModel[];
     config?: UeScoringElementConfig;
-    inert: boolean;
+    readonly: boolean;
     private _hideDivider;
     constructor(repositoryCtor: UeDetailRepositoryConstructor<GroupModel>, dividerText?: string);
     connectedCallback(): Promise<void>;
@@ -17,7 +17,8 @@ export declare abstract class UeScoringBaseElement<GroupModel extends UeScoreabl
         target: HTMLInputElement;
     }, id: number, upperScoreLimit: number): void;
     getValue(id: number): number;
+    getItem(id: number): UeEntityScoreModel | undefined;
     renderGroup(group: GroupModel): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1> | undefined;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
 }

package/dist/core/components/scoring/scoring-base.element.js

@@ -9,6 +9,7 @@ import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
 import { appendToFrozenArray } from "@umbraco-cms/backoffice/observable-api";
 import { UmbChangeEvent } from "@umbraco-cms/backoffice/event";
 import { UmbId } from "@umbraco-cms/backoffice/id";
+import { UUITextStyles } from "@umbraco-cms/backoffice/external/uui";
 export class UeScoringBaseElement extends UmbLitElement {
     #dividerText;
     constructor(repositoryCtor, dividerText) {
@@ -16,7 +17,7 @@ export class UeScoringBaseElement extends UmbLitElement {
         this.defaultUpperScoreLimit = 10;
         this.items = [];
         this.value = [];
-        this.inert = false;
+        this.readonly = false;
         this._hideDivider = false;
         this.repository = new repositoryCtor(this);
         this.#dividerText = dividerText;
@@ -49,13 +50,93 @@ export class UeScoringBaseElement extends UmbLitElement {
     getValue(id) {
         return this.value?.find((x) => x.entityId === id)?.score ?? 0;
     }
-    #renderReadonly(item) {
-        return html `<uui-tag look="secondary">${this.getValue(item.id)}</uui-tag>`;
+    getItem(id) {
+        return this.value?.find((x) => x.entityId === id);
+    }
+    #renderReadonly(src, group) {
+        const item = this.getItem(src.id);
+        // if no item, the score is 0
+        // but we still want to show the empty default state
+        if (!item) {
+            return html `
+        <div slot="primary">
+          <uui-tag look="secondary"> 0 </uui-tag>
+        </div>
+        <uui-progress-bar progress="0" slot="secondary"></uui-progress-bar>
+      `;
+        }
+        const itemFromGroup = group.items.find((x) => x.id === item.entityId);
+        const groupItemIds = group.items.map((x) => x.id);
+        // we need all items ordered to calculate deviation as we compare the max to the second highest
+        // but all other items compare to the max.
+        const sortedGroupItems = this.value
+            .filter((x) => groupItemIds.includes(x.entityId))
+            .sort((a, b) => b.score - a.score);
+        let diff = 0;
+        // for non-max items, compare to the max.
+        if (sortedGroupItems[0]?.entityId !== item.entityId) {
+            diff = sortedGroupItems[0].score - item.score;
+        }
+        else {
+            // for the max item, chekk if it meets the minimum deviation compared to the second highest
+            diff = item.score - (sortedGroupItems[1]?.score ?? 0);
+        }
+        let minDiff = group.minimumDeviation ?? 1;
+        if (group.minimumDeviationType === "Percent") {
+            minDiff = item.score * (minDiff / 100);
+        }
+        const withinDeviation = diff < minDiff;
+        // if progress is >= 100, but isActive is false, assume deviation not met
+        const progress = (item.score / (group.minimumParticipationScoreThreshold ?? 1)) * 100;
+        const meetsThreshold = progress >= 100;
+        const activeColor = meetsThreshold
+            ? !item.isActive
+                ? "var(--uui-color-border-emphasis)"
+                : itemFromGroup?.color?.value
+            : "default";
+        const progressColor = meetsThreshold
+            ? !item.isActive
+                ? "var(--uui-color-border-emphasis)"
+                : itemFromGroup?.color?.value
+            : "var(--uui-color-border)";
+        let tooltip;
+        if (item.isActive) {
+            tooltip = this.localize.term("engage_scoringTooltipActiveItem", itemFromGroup?.title);
+        }
+        else if (meetsThreshold && !item.isActive && withinDeviation) {
+            tooltip = this.localize.term("engage_scoringTooltipInactiveMeetsThresholdWithinDeviation", itemFromGroup?.title);
+        }
+        else if (meetsThreshold && !withinDeviation && !item.isActive) {
+            const activeItemId = this.value.find((x) => x.isActive && groupItemIds.includes(x.entityId))?.entityId;
+            const activeItem = group.items.find((x) => x.id === activeItemId);
+            tooltip = this.localize.term("engage_scoringTooltipInactiveMeetsThresholdNotWithinDeviation", itemFromGroup?.title, activeItem?.title);
+        }
+        return html `<div
+        slot="primary"
+        style="display:flex; align-items:center"
+        popovertarget="popover-${item.entityId}"
+      >
+        <uui-tag
+          style="--color: ${activeColor}"
+          look=${meetsThreshold ? "primary" : "secondary"}
+        >
+          ${item.score}
+        </uui-tag>
+        ${when(tooltip, () => html ` <uui-popover-container id="popover-${item.entityId}">
+            <ue-tooltip hint> ${tooltip}</ue-tooltip>
+          </uui-popover-container>`)}
+      </div>
+      <uui-progress-bar
+        style="--uui-color-positive: ${progressColor}"
+        progress=${progress}
+        slot="secondary"
+      ></uui-progress-bar> `;
     }
     #renderEditor(item, group) {
         if (group.upperScoreLimit &&
             group.upperScoreLimit > this.defaultUpperScoreLimit) {
             return html `<uui-input
+        slot="primary"
         type="number"
         max=${group.upperScoreLimit}
         min="0"
@@ -64,25 +145,41 @@ export class UeScoringBaseElement extends UmbLitElement {
       ></uui-input>`;
         }
         return html `<umb-input-slider
+      slot="primary"
       .max=${group.upperScoreLimit ?? this.defaultUpperScoreLimit}
       @change=${(e) => this.onValueChange(e, item.id, group.upperScoreLimit)}
       .valueLow=${this.getValue(item.id)}
     ></umb-input-slider>`;
     }
     renderGroup(group) {
-        return html `<uui-box .headline=${group.title ?? ""}>
-      ${when(group.upperScoreLimit !== this.defaultUpperScoreLimit, () => html ` <div slot="header-actions">
-            ${this.localize.term("engage_scoreFromTo", group.upperScoreLimit)}
-          </div>`)}
+        return html `<div class="scoring-group">
+      <div id="header" class="uui-text">
+        <h5 class="uui-h5">${group.title}</h5>
+        ${when(group.upperScoreLimit !== this.defaultUpperScoreLimit &&
+            !this.readonly, () => this.localize.term("engage_scoreFromTo", group.upperScoreLimit))}
+      </div>
+
       ${group.items.map((item) => html `<ue-group-box
             style="${`--engage-bar-color: ${item.color?.value}`}"
             .name=${item.title}
-            .description=${item.description}
+            .description=${this.readonly ? null : item.description}
             .iconUrl=${item.iconUrl}
           >
-            ${when(this.inert, () => this.#renderReadonly(item), () => this.#renderEditor(item, group))}
+            ${when(this.readonly, () => this.#renderReadonly(item, group), () => this.#renderEditor(item, group))}
           </ue-group-box>`)}
-    </uui-box>`;
+      ${when(this.readonly, () => html ` <small>
+            <span
+              >Minimal deviation:
+              ${group.minimumDeviation}${group.minimumDeviationType ===
+            "Percent"
+            ? "%"
+            : ""}</span
+            ><span>|</span
+            ><span>
+              Threshold value: ${group.minimumParticipationScoreThreshold}</span
+            >
+          </small>`)}
+    </div>`;
     }
     render() {
         if (!this.items.length)
@@ -90,23 +187,48 @@ export class UeScoringBaseElement extends UmbLitElement {
         return html ` ${when(this._hideDivider === false, () => html `<ue-divider .text=${this.#dividerText}></ue-divider>`)}
     ${this.items.map((group) => this.renderGroup(group))}`;
     }
-    static { this.styles = css `
-    uui-box {
-      height: var(--content-height, auto);
-    }
+    static { this.styles = [
+        UUITextStyles,
+        css `
+      .scoring-group {
+        height: var(--content-height, auto);
+        display: flex;
+        flex-direction: column;
+      }
 
-    ue-group-box + ue-group-box {
-      margin-top: var(--uui-size-2);
-    }
+      ue-group-box + ue-group-box {
+        margin-top: var(--uui-size-2);
+      }
 
-    uui-box + uui-box {
-      margin-top: var(--group-gap, var(--uui-size-3));
-    }
+      .scoring-group + .scoring-group {
+        margin-top: var(--group-gap, var(--uui-size-space-5));
+      }
 
-    uui-tag {
-      align-self: center;
-    }
-  `; }
+      uui-tag {
+        align-self: center;
+      }
+
+      small {
+        display: flex;
+        padding-top: var(--uui-size-3);
+        margin-top: auto;
+        gap: var(--uui-size-2);
+      }
+
+      small span {
+        display: block;
+      }
+
+      /* from uui-box */
+      #header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-right: var(--uui-size-space-5);
+        margin-bottom: var(--uui-size-space-2);
+      }
+    `,
+    ]; }
 }
 __decorate([
     state()
@@ -119,7 +241,7 @@ __decorate([
 ], UeScoringBaseElement.prototype, "config", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], UeScoringBaseElement.prototype, "inert", void 0);
+], UeScoringBaseElement.prototype, "readonly", void 0);
 __decorate([
     state()
 ], UeScoringBaseElement.prototype, "_hideDivider", void 0);

package/dist/core/components/tooltip/tooltip-element.js

@@ -32,8 +32,8 @@ let UeTooltipElement = class UeTooltipElement extends UmbLitElement {
         this.#unbindListeners();
     }
     #bindListeners() {
-        this.#trigger = this.getHostElement().closest("[popovertarget]") ?? undefined;
-        this.#host = this.getHostElement().closest("uui-popover-container") ?? undefined;
+        this.#trigger = this.getHostElement().closest("[popovertarget]");
+        this.#host = this.getHostElement().closest("uui-popover-container");
         if (!this.#trigger || !this.#host) {
             console.warn("UeTooltipElement[hint] requires a uui-popover-container and a popovertarget element to function properly.");
             return;

package/dist/core/context/entities.d.ts

@@ -10,4 +10,5 @@ export interface UeValidatedWorkspaceContextArgs {
     detailRepositoryAlias: string;
     routedComponents?: UeRoutedComponentsConfiguration;
     actions?: Array<UeWorkspaceAction>;
+    withRedirectOnCreate?: boolean;
 }

package/dist/core/context/workspace-context-base.d.ts

@@ -12,6 +12,6 @@ export declare abstract class UeWorkspaceContextBase<WorkspaceDataModelType exte
     constructor(host: UmbControllerHost, args: UeValidatedWorkspaceContextArgs);
     update(data: Partial<WorkspaceDataModelType>): void;
     getPropertyValue<T = any>(alias: keyof WorkspaceDataModelType & string): T | undefined;
-    requestSave(isUpdate?: boolean): Promise<void>;
+    requestSave(): Promise<void>;
     delete(unique: string): Promise<void>;
 }

package/dist/core/context/workspace-context-base.js

@@ -23,7 +23,7 @@ export class UeWorkspaceContextBase extends UmbEntityDetailWorkspaceContextBase
         // we don't use the value anywhere, hence the garbage-in below.
         // Note this is obsolete, and will be removed in v18, so will need to be revisited.
         this.setParent({ entityType: "engage-entity-root", unique: "" });
-        this.#setRoutes(args.routedComponents);
+        this.#setRoutes(args.routedComponents, args.withRedirectOnCreate ?? true);
         this.#registerActions(args.actions);
     }
     #registerActions(actions) {
@@ -54,7 +54,7 @@ export class UeWorkspaceContextBase extends UmbEntityDetailWorkspaceContextBase
             });
         });
     }
-    #setRoutes(routedComponents) {
+    #setRoutes(routedComponents, withRedirectOnCreate) {
         if (!routedComponents)
             return;
         this.routes.setRoutes([
@@ -62,7 +62,9 @@ export class UeWorkspaceContextBase extends UmbEntityDetailWorkspaceContextBase
                 path: "edit/:id",
                 component: routedComponents.edit,
                 setup: async (_component, info) => {
-                    this.removeUmbControllerByAlias(UmbWorkspaceIsNewRedirectControllerAlias);
+                    withRedirectOnCreate
+                        ? this.removeUmbControllerByAlias(UmbWorkspaceIsNewRedirectControllerAlias)
+                        : {};
                     await this.load(info.match.params.id);
                 },
             },
@@ -73,7 +75,9 @@ export class UeWorkspaceContextBase extends UmbEntityDetailWorkspaceContextBase
                     await this.createScaffold({
                         parent: { entityType: "engage-entity-root", unique: "" },
                     });
-                    new UmbWorkspaceIsNewRedirectController(this, this, this.getHostElement().shadowRoot.querySelector("umb-router-slot"));
+                    withRedirectOnCreate
+                        ? new UmbWorkspaceIsNewRedirectController(this, this, this.getHostElement().shadowRoot.querySelector("umb-router-slot"))
+                        : {};
                 },
             },
         ]);
@@ -89,15 +93,14 @@ export class UeWorkspaceContextBase extends UmbEntityDetailWorkspaceContextBase
     }
     // save must also validate, so we borrow the implementation from the CMS submit, which closes
     // editor modals, which we do not want as we have separated save and save-and-close
-    // provide isUpdate to ignore new state, and force an update
-    async requestSave(isUpdate = false) {
+    async requestSave() {
         const data = this._data.getCurrent();
         if (!data)
             return;
-        return this.#validateAndSave(() => this.#save(data, isUpdate), (reason) => this.invalidSubmit(reason));
+        return this.#validateAndSave(() => this.#save(data), (reason) => this.invalidSubmit(reason));
     }
-    async #save(data, isUpdate = false) {
-        const result = this.getIsNew() && !isUpdate
+    async #save(data) {
+        const result = this.getIsNew()
             ? this._create(data, { unique: "", entityType: "engage-entity-root" })
             : this._update(data);
         return result;

package/dist/core/entities.d.ts

@@ -72,6 +72,7 @@ export interface UeEntityScoreModel {
     score: number;
     id: number;
     unique: string;
+    isActive?: boolean;
     entityId: number;
 }
 export interface UeLicensedFeaturesMap {

package/dist/core/lang/{en-us.js → en.js}

@@ -44,6 +44,7 @@ export default {
         confirmDisableUeMessage: "If Umbraco Engage is disabled, no data will be collected and no personalization or A/B testing is applied.",
         contains: "Contains",
         containsVerb: "contains",
+        conversionRate: "Conversion rate",
         core: "Core",
         count: "Count",
         county: "County",
@@ -178,6 +179,7 @@ export default {
         province: "Province",
         scoreFromTo: (from) => `Score from 0 to ${from}`,
         showProfile: `Show profile`,
+        ratio: "Ratio",
         referralgroups: `Referral groups`,
         referralGroup: "Referral group",
         referrals: "Referrals",
@@ -198,6 +200,9 @@ export default {
         score: "Score",
         scoredcampaigns: (count) => `Scored campaigns${count !== undefined ? ` (${count})` : ""}`,
         scoredreferrals: (count) => `Scored referrals${count !== undefined ? ` (${count})` : ""}`,
+        scoringTooltipActiveItem: (name) => `'${name}' has met both the scoring threshold and minimal deviation and is the active item in this group`,
+        scoringTooltipInactiveMeetsThresholdWithinDeviation: (name) => `'${name}' has met the scoring threshold but the minimal deviation is not met`,
+        scoringTooltipInactiveMeetsThresholdNotWithinDeviation: (name, activeItem) => `'${name}' has met the scoring threshold but '${activeItem}' is active as it has the highest score with a valid minimal deviation`,
         searchTerms: "Search terms",
         selectLanguage: "Select a culture",
         segmentinsights: "Segment insights",
@@ -305,6 +310,7 @@ export default {
         settingsDescription: "Which conversion goal do you want to improve and which percentage of your visitors should be subjected to the test?",
         showArchivedProjects: "Show archived projects",
         startedOn: "Started on",
+        startsOn: "Starts on",
         startTest: "Start an A/B test for this page",
         startTestDescription: "This will default to a Single Page test which allows you to A/B test Umbraco content.",
         stoppedOn: "Stopped on",
@@ -407,8 +413,9 @@ export default {
         videoUrl: "Video URL",
         visitors: "Visitors",
         yesterday: "Yesterday",
-        "last-7-days": "Last 7 days",
         last30days: "Last 30 days",
+        "last-7-days": "Last 7 days",
+        "last-30-days": "Last 30 days",
         "this-month": "This month",
         "last-month": "Last month",
         "this-year": "This year",

package/dist/core/lang/manifests.js

@@ -7,6 +7,6 @@ export const manifests = [
         meta: {
             culture: "en",
         },
-        js: () => import("./en-us.js"),
+        js: () => import("./en.js"),
     },
 ];

package/dist/core/path/edit-variant-workspace-path-pattern.class.js

@@ -15,12 +15,20 @@ export class UePathPattern extends UmbPathPattern {
         this.#fallback = fallback;
     }
     generateAbsolute(params) {
+        this.#checkSegmentation(params);
         return ((this.#base.indexOf(":") !== -1
             ? ueUrlPatternToString(this.#base, params, this.#fallback)
             : this.#base) +
             ueUrlPatternToString(this.#local, params, this.#fallback));
     }
     generateLocal(params) {
+        this.#checkSegmentation(params);
         return ueUrlPatternToString(this.#local, params, this.#fallback);
     }
+    // if no segment provided, we don't want to open split view, so we adjust the local pattern
+    #checkSegmentation(params) {
+        if (!params.segment) {
+            this.#local = "edit/:unique/:culture";
+        }
+    }
 }

package/dist/core/property/property-dataset-renderer.controller.d.ts

@@ -4,6 +4,9 @@ import type { UmbControllerHost } from "@umbraco-cms/backoffice/controller-api";
 import { UmbLocalizationController } from "@umbraco-cms/backoffice/localization-api";
 import type { UmbPropertyValueData } from "@umbraco-cms/backoffice/property";
 import type { UeDatasetHostWorkspaceContext, UePropertyConfigData } from "./types.js";
+export interface PropertyConfiguration {
+    disabled?: boolean;
+}
 export declare class UePropertyDataSetRendererController<EntityType, ContextEntityType extends {
     [K in keyof ContextEntityType]: ContextEntityType[K];
 } | EntityType = EntityType, HostContextType extends UeDatasetHostWorkspaceContext<ContextEntityType> = UeDatasetHostWorkspaceContext<ContextEntityType>> extends UmbControllerBase {
@@ -14,6 +17,7 @@ export declare class UePropertyDataSetRendererController<EntityType, ContextEnti
     properties: UePropertyConfigData<EntityType>;
     constructor(host: UmbControllerHost, contextToken: UmbContextToken<any, HostContextType>, properties: UePropertyConfigData<EntityType>, dataPath?: keyof ContextEntityType & string);
     withItems(forProperty: keyof EntityType & string, optionGenerator: (data: EntityType | undefined, src?: Array<never>) => Array<Option>): this;
+    withConfiguration(forProperty: keyof EntityType & string, configurationGenerator: (data: EntityType | undefined) => PropertyConfiguration): this;
     render(): import("lit-html").TemplateResult<1>;
     destroy(): void;
 }

package/dist/core/property/property-dataset-renderer.controller.js

@@ -9,6 +9,7 @@ export class UePropertyDataSetRendererController extends UmbControllerBase {
     #hostElm;
     #validationContext;
     #optionGenerators;
+    #propertyConfiguration;
     #validators;
     #dataPath;
     constructor(host, contextToken, properties, dataPath) {
@@ -16,6 +17,7 @@ export class UePropertyDataSetRendererController extends UmbControllerBase {
         this.localize = new UmbLocalizationController(this);
         this.value = [];
         this.#optionGenerators = {};
+        this.#propertyConfiguration = {};
         this.#validators = [];
         this.#hostElm = host.getHostElement();
         this.properties = properties;
@@ -40,6 +42,11 @@ export class UePropertyDataSetRendererController extends UmbControllerBase {
         this.#optionGenerators[this.#camel(forProperty)] = optionGenerator;
         return this;
     }
+    withConfiguration(forProperty, configurationGenerator) {
+        this.#propertyConfiguration[this.#camel(forProperty)] =
+            configurationGenerator;
+        return this;
+    }
     #getByDataPath(obj) {
         if (!this.#dataPath)
             return obj;
@@ -142,6 +149,7 @@ export class UePropertyDataSetRendererController extends UmbControllerBase {
             alias: prop.alias,
         })}].value`;
         const editor = typeof prop.editor === "string" ? prop.editor : prop.editor(this.data);
+        const disabled = this.#propertyConfiguration[alias]?.(this.data)?.disabled;
         return html `<umb-property
       .dataPath=${dataPath}
       alias=${alias}
@@ -153,6 +161,7 @@ export class UePropertyDataSetRendererController extends UmbControllerBase {
       .config=${prop.config}
       .appearance=${prop.appearance}
       .validation=${prop.validation}
+      ?readonly=${disabled}
     ></umb-property>`;
     }
     #getPropertyValue(obj) {

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

@@ -0,0 +1,2 @@
+import type { Client, Config } from './types.gen.js';
+export declare const createClient: (config?: Config) => Client;