@yoobic/yobi 8.5.0-60 → 8.5.0-61

package/dist/cjs/yoo-incentive-detail.cjs.entry.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-const index$1 = require('./index-a1bbe627.js');
-require('./index-9aadeb94.js');
-const commonHelpers = require('./common-helpers-9f63a319.js');
-const incentiveHelpers = require('./incentive-helpers-a2954f55.js');
-const overlays = require('./overlays-e5d2ff76.js');
+const index$2 = require('./index-a1bbe627.js');
+require('./index-6f92bccb.js');
+const commonHelpers = require('./common-helpers-44428bf7.js');
+const incentiveHelpers = require('./incentive-helpers-81dda507.js');
+const index$1 = require('./index-0cfb67d1.js');
 require('./lodash-a9050d79.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
@@ -23,7 +23,7 @@ const YooIncentiveDetailComponent = class {
     this.init();
   }
   componentWillLoad() {
-    const session = overlays.getSession();
+    const session = index$1.getSession();
     this.groups = session.groups;
     this.userId = session.userId;
     this.init();
@@ -41,14 +41,14 @@ const YooIncentiveDetailComponent = class {
         var _a;
         return ({
           target: target,
-          milestone: overlays.getIncentiveTargetHighestMilestone(target),
+          milestone: index$1.getIncentiveTargetHighestMilestone(target),
           isOpened: (length === 1) || (target.id === ((_a = this.participant) === null || _a === void 0 ? void 0 : _a.target))
         });
       }).sort((item1, item2) => item2.milestone - item1.milestone)) || [];
     }
     else if (this.participant) {
       const target = (_c = this.incentive.targets) === null || _c === void 0 ? void 0 : _c.find((target) => target.id === this.participant.target);
-      this.targets = target ? [{ target, milestone: overlays.getIncentiveTargetHighestMilestone(target), isOpened: true }] : [];
+      this.targets = target ? [{ target, milestone: index$1.getIncentiveTargetHighestMilestone(target), isOpened: true }] : [];
     }
   }
   getDate() {
@@ -59,7 +59,7 @@ const YooIncentiveDetailComponent = class {
     var _a, _b;
     const isMilestoneReached = ((_a = this.score) === null || _a === void 0 ? void 0 : _a.progress) >= milestone.value;
     const reached = !this.showManagerView && (((_b = this.participant) === null || _b === void 0 ? void 0 : _b.target) === tagetId) && isMilestoneReached;
-    return (index.h("tr", { class: { reached } }, index.h("th", null, milestone.reward), index.h("td", null, !this.showManagerView && index.h("yoo-icon", { name: "check", color: "app-color", class: { 'unvisible': !isMilestoneReached }, size: "small" }), overlays.appendIncentiveUnit(milestone.value, this.incentive.unit, this.incentive.isUnitCurrency, false))));
+    return (index.h("tr", { class: { reached } }, index.h("th", null, milestone.reward), index.h("td", null, !this.showManagerView && index.h("yoo-icon", { name: "check", color: "app-color", class: { 'unvisible': !isMilestoneReached }, size: "small" }), index$1.appendIncentiveUnit(milestone.value, this.incentive.unit, this.incentive.isUnitCurrency, false))));
   }
   renderTargets() {
     return [
@@ -71,15 +71,15 @@ const YooIncentiveDetailComponent = class {
     let milestones;
     let dataEl;
     const toggleData = () => {
-      overlays.gsapTo(dataEl, 0.2, { height: collapsible.isOpened ? 0 : 'auto' });
+      index$1.gsapTo(dataEl, 0.2, { height: collapsible.isOpened ? 0 : 'auto' });
       collapsible.isOpened = !collapsible.isOpened;
       index.forceUpdate(this);
     };
     if ((_a = collapsible.target.milestones) === null || _a === void 0 ? void 0 : _a.length) {
       milestones = collapsible.target.milestones.sort((a, b) => b.value - a.value);
     }
-    const milestoneText = overlays.appendIncentiveUnit(collapsible.milestone, this.incentive.unit, this.incentive.isUnitCurrency, false);
-    return (index.h("div", { class: "target" }, index.h("div", { class: "target-title", onClick: toggleData }, index.h("div", { class: "name" }, collapsible.target.title), index.h("div", { class: "reach" }, this.showManagerView ? milestoneText : overlays.translate('REACHTARGET', { n: milestoneText }), index.h("yoo-icon", { name: collapsible.isOpened ? 'arrow-up' : 'arrow-down', color: "stable" }))), index.h("div", { class: "target-data", ref: el => dataEl = el }, index.h("table", null, milestones === null || milestones === void 0 ? void 0 : milestones.sort((m1, m2) => m2.value - m1.value).map(m => this.renderTargetMilestone(collapsible.target.id, m))))));
+    const milestoneText = index$1.appendIncentiveUnit(collapsible.milestone, this.incentive.unit, this.incentive.isUnitCurrency, false);
+    return (index.h("div", { class: "target" }, index.h("div", { class: "target-title", onClick: toggleData }, index.h("div", { class: "name" }, collapsible.target.title), index.h("div", { class: "reach" }, this.showManagerView ? milestoneText : index$1.translate('REACHTARGET', { n: milestoneText }), index.h("yoo-icon", { name: collapsible.isOpened ? 'arrow-up' : 'arrow-down', color: "stable" }))), index.h("div", { class: "target-data", ref: el => dataEl = el }, index.h("table", null, milestones === null || milestones === void 0 ? void 0 : milestones.sort((m1, m2) => m2.value - m1.value).map(m => this.renderTargetMilestone(collapsible.target.id, m))))));
   }
   renderMobileMilestones() {
     var _a;
@@ -87,22 +87,22 @@ const YooIncentiveDetailComponent = class {
       return;
     const progressText = incentiveHelpers.getProgressText(this.score);
     const targetLeft = this.score.milestone - this.score.progress;
-    const leftOverText = overlays.appendIncentiveUnit(targetLeft > 0 ? targetLeft : 0, this.incentive.unit, this.incentive.isUnitCurrency);
-    return (index.h("div", { class: "milestones" }, index.h("div", { class: "summary" }, index.h("div", { class: "progress" }, progressText), index.h("div", { class: "leftover" }, leftOverText + ' ' + overlays.translate('INCENTIVELEFT'))), index.h("yoo-progress-bar", { class: "progress-bar app-color", value: (this.score.result || 0) * 100 }), !!((_a = this.targets) === null || _a === void 0 ? void 0 : _a.length) && [
-      index.h("div", { class: "subtitle" }, overlays.translate('MILESTONES')),
+    const leftOverText = index$1.appendIncentiveUnit(targetLeft > 0 ? targetLeft : 0, this.incentive.unit, this.incentive.isUnitCurrency);
+    return (index.h("div", { class: "milestones" }, index.h("div", { class: "summary" }, index.h("div", { class: "progress" }, progressText), index.h("div", { class: "leftover" }, leftOverText + ' ' + index$1.translate('INCENTIVELEFT'))), index.h("yoo-progress-bar", { class: "progress-bar app-color", value: (this.score.result || 0) * 100 }), !!((_a = this.targets) === null || _a === void 0 ? void 0 : _a.length) && [
+      index.h("div", { class: "subtitle" }, index$1.translate('MILESTONES')),
       this.renderTargets()
     ]));
   }
   renderTypes() {
     var _a, _b, _c, _d, _e;
-    const size = overlays.isWeb(this.host) ? 'medium' : 'small';
+    const size = index$1.isWeb(this.host) ? 'medium' : 'small';
     let top = '';
-    if (((_a = this.incentive) === null || _a === void 0 ? void 0 : _a.type) === index$1.IncentiveType.competition) {
-      top = ' ' + overlays.translate('INCENTIVESTOPWINNERS', { n: this.incentive.winners });
+    if (((_a = this.incentive) === null || _a === void 0 ? void 0 : _a.type) === index$2.IncentiveType.competition) {
+      top = ' ' + index$1.translate('INCENTIVESTOPWINNERS', { n: this.incentive.winners });
     }
     return [
-      index.h("div", null, index.h("yoo-icon", { name: "group", color: "app-color", size: size }), overlays.translate((_c = (_b = this.incentive) === null || _b === void 0 ? void 0 : _b.partType) === null || _c === void 0 ? void 0 : _c.toUpperCase())),
-      index.h("div", null, index.h("yoo-icon", { name: "instant-play", color: "app-color", size: size }), overlays.translate((_e = (_d = this.incentive) === null || _d === void 0 ? void 0 : _d.type) === null || _e === void 0 ? void 0 : _e.toUpperCase()) + top)
+      index.h("div", null, index.h("yoo-icon", { name: "group", color: "app-color", size: size }), index$1.translate((_c = (_b = this.incentive) === null || _b === void 0 ? void 0 : _b.partType) === null || _c === void 0 ? void 0 : _c.toUpperCase())),
+      index.h("div", null, index.h("yoo-icon", { name: "instant-play", color: "app-color", size: size }), index$1.translate((_e = (_d = this.incentive) === null || _d === void 0 ? void 0 : _d.type) === null || _e === void 0 ? void 0 : _e.toUpperCase()) + top)
     ];
   }
   renderDate() {
@@ -110,11 +110,11 @@ const YooIncentiveDetailComponent = class {
   }
   renderOwner() {
     var _a, _b, _c;
-    return (index.h("div", null, index.h("span", { class: "owner-title" }, `${overlays.translate('OWNER')}:`), index.h("yoo-avatar", { size: "small", imgSrc: (_a = this.incentive.owner) === null || _a === void 0 ? void 0 : _a.imageData }), index.h("span", { class: "owner" }, `${(_b = this.incentive.owner) === null || _b === void 0 ? void 0 : _b.firstName} ${(_c = this.incentive.owner) === null || _c === void 0 ? void 0 : _c.lastName}`)));
+    return (index.h("div", null, index.h("span", { class: "owner-title" }, `${index$1.translate('OWNER')}:`), index.h("yoo-avatar", { size: "small", imgSrc: (_a = this.incentive.owner) === null || _a === void 0 ? void 0 : _a.imageData }), index.h("span", { class: "owner" }, `${(_b = this.incentive.owner) === null || _b === void 0 ? void 0 : _b.firstName} ${(_c = this.incentive.owner) === null || _c === void 0 ? void 0 : _c.lastName}`)));
   }
   renderSaleBreakdown(item) {
     var _a, _b, _c;
-    const value = overlays.appendIncentiveUnit(item.amount, this.incentive.unit, this.incentive.isUnitCurrency, false);
+    const value = index$1.appendIncentiveUnit(item.amount, this.incentive.unit, this.incentive.isUnitCurrency, false);
     return (index.h("div", { class: "item" }, index.h("yoo-img", { src: (_b = (_a = item.product) === null || _a === void 0 ? void 0 : _a.image) === null || _b === void 0 ? void 0 : _b._downloadURL }), index.h("div", { class: "product" }, (_c = item.product) === null || _c === void 0 ? void 0 : _c.title), index.h("div", { class: "values" }, index.h("span", null, value), index.h("span", null, "x", item.weight))));
   }
   renderSalesBreakdown() {
@@ -122,27 +122,27 @@ const YooIncentiveDetailComponent = class {
     if (!((_a = this.salesBreakdown) === null || _a === void 0 ? void 0 : _a.length)) {
       return;
     }
-    const total = overlays.appendIncentiveUnit(incentiveHelpers.getTotalSalesBreakdown(this.salesBreakdown), this.incentive.unit, this.incentive.isUnitCurrency, false);
-    return (index.h("div", { class: "box-content sale-breakdowns" }, this.salesBreakdown.map((item) => this.renderSaleBreakdown(item)), index.h("div", { class: "total" }, index.h("div", null, overlays.translate('TOTAL'), ":"), index.h("div", { class: "value" }, total))));
+    const total = index$1.appendIncentiveUnit(incentiveHelpers.getTotalSalesBreakdown(this.salesBreakdown), this.incentive.unit, this.incentive.isUnitCurrency, false);
+    return (index.h("div", { class: "box-content sale-breakdowns" }, this.salesBreakdown.map((item) => this.renderSaleBreakdown(item)), index.h("div", { class: "total" }, index.h("div", null, index$1.translate('TOTAL'), ":"), index.h("div", { class: "value" }, total))));
   }
   renderChart() {
     return (index.h("yoo-chart", { class: "kpichart", config: this.kpiChartConfig }));
   }
   renderDateRange() {
-    return (index.h("div", { class: "date-range" }, this.incentive.startDate && overlays.dateFormat(this.incentive.startDate, 'L LT'), "\u00A0 - \u00A0", this.incentive.endDate && overlays.dateFormat(this.incentive.endDate, 'L LT')));
+    return (index.h("div", { class: "date-range" }, this.incentive.startDate && index$1.dateFormat(this.incentive.startDate, 'L LT'), "\u00A0 - \u00A0", this.incentive.endDate && index$1.dateFormat(this.incentive.endDate, 'L LT')));
   }
   renderTags() {
     var _a;
     const statusBadgeSetting = incentiveHelpers.getIncentiveStatusBadgeSettings(this.incentive);
     return [
-      index.h("yoo-tag", { color: statusBadgeSetting.color }, overlays.translate(statusBadgeSetting.text)),
+      index.h("yoo-tag", { color: statusBadgeSetting.color }, index$1.translate(statusBadgeSetting.text)),
       (_a = this.incentive.tags) === null || _a === void 0 ? void 0 : _a.map(tag => index.h("yoo-tag", { class: "app-color" }, tag))
     ];
   }
   renderMobile() {
     var _a;
     const positionText = ((_a = this.score) === null || _a === void 0 ? void 0 : _a.position) && incentiveHelpers.getPositionText(this.score.position);
-    return (index.h("div", { class: "outer-container mobile" }, index.h("div", { class: "title" }, this.incentive.title), index.h("div", { class: "types" }, this.renderTypes()), this.incentive.description && index.h("div", { class: "description" }, this.incentive.description), index.h("div", { class: "dates" }, this.renderDate(), this.renderDateRange()), positionText && index.h("div", { class: "position" }, index.h("yoo-tag", { color: "energized-10", icon: "award-trophy-star", size: "medium" }), positionText), this.incentive.type === index$1.IncentiveType.milestones && this.renderMobileMilestones(), index.h("div", { class: "subtitle" }, overlays.translate('PERFORMANCEEVOLUTIONINCENTIVES')), this.renderChart(), index.h("div", { class: "subtitle" }, overlays.translate('INCENTIVELEADERBOARD')), index.h("slot", null)));
+    return (index.h("div", { class: "outer-container mobile" }, index.h("div", { class: "title" }, this.incentive.title), index.h("div", { class: "types" }, this.renderTypes()), this.incentive.description && index.h("div", { class: "description" }, this.incentive.description), index.h("div", { class: "dates" }, this.renderDate(), this.renderDateRange()), positionText && index.h("div", { class: "position" }, index.h("yoo-tag", { color: "energized-10", icon: "award-trophy-star", size: "medium" }), positionText), this.incentive.type === index$2.IncentiveType.milestones && this.renderMobileMilestones(), index.h("div", { class: "subtitle" }, index$1.translate('PERFORMANCEEVOLUTIONINCENTIVES')), this.renderChart(), index.h("div", { class: "subtitle" }, index$1.translate('INCENTIVELEADERBOARD')), index.h("slot", null)));
   }
   renderWebTopContainer() {
     var _a, _b;
@@ -150,21 +150,21 @@ const YooIncentiveDetailComponent = class {
   }
   renderWebMiddleContainer() {
     var _a;
-    const isMilestones = this.incentive.type === index$1.IncentiveType.milestones;
+    const isMilestones = this.incentive.type === index$2.IncentiveType.milestones;
     const positionText = ((_a = this.score) === null || _a === void 0 ? void 0 : _a.position) && incentiveHelpers.getPositionText(this.score.position);
-    const progressBaseValue = overlays.getIncentiveProgressBase(this.incentive, this.score, this.showManagerView);
-    const progressBaseText = overlays.appendIncentiveUnit(progressBaseValue, isMilestones ? null : this.incentive.unit, this.incentive.isUnitCurrency, false);
-    const progressOfValue = overlays.getIncentiveProgressOf(this.incentive, this.score, this.showManagerView);
-    const progressOfText = progressOfValue && overlays.appendIncentiveUnit(progressOfValue, this.incentive.unit, this.incentive.isUnitCurrency, false);
-    const progressPercent = overlays.getIncentiveProgress(this.incentive, this.score, this.showManagerView);
+    const progressBaseValue = index$1.getIncentiveProgressBase(this.incentive, this.score, this.showManagerView);
+    const progressBaseText = index$1.appendIncentiveUnit(progressBaseValue, isMilestones ? null : this.incentive.unit, this.incentive.isUnitCurrency, false);
+    const progressOfValue = index$1.getIncentiveProgressOf(this.incentive, this.score, this.showManagerView);
+    const progressOfText = progressOfValue && index$1.appendIncentiveUnit(progressOfValue, this.incentive.unit, this.incentive.isUnitCurrency, false);
+    const progressPercent = index$1.getIncentiveProgress(this.incentive, this.score, this.showManagerView);
     const leftOverValue = (progressOfValue - progressBaseValue);
-    const progressLeftOver = overlays.appendIncentiveUnit(leftOverValue > 0 ? leftOverValue : null, this.incentive.unit, this.incentive.isUnitCurrency);
-    return (index.h("div", { class: "middle-container" }, index.h("div", { class: "left-container" }, !this.showManagerView && positionText && index.h("div", { class: "position" }, index.h("yoo-tag", { color: "app-color-10", icon: "award-trophy-star", size: "extra-large" }), positionText), index.h("span", { class: "title-category" }, overlays.translate(this.showManagerView ? 'TOTALSALES' : 'SALES')), index.h("span", { class: "total-number" }, progressBaseText), isMilestones && progressOfText && index.h("span", { class: "total-description" }, overlays.translate('INCENTIVESOF'), " ", progressOfText), isMilestones && progressLeftOver && index.h("yoo-tag", { color: "app-color-10" }, progressLeftOver, " ", overlays.translate('LEFT')), isMilestones &&
-      index.h("div", { class: "progress-container" }, index.h("yoo-progress-bar", { value: (progressPercent || 0) * 100, shape: "line", percentValueColorScheme: true }))), index.h("div", { class: "right-container" }, index.h("span", { class: "title-category" }, overlays.translate('PERFORMANCEEVOLUTIONINCENTIVES')), this.renderChart())));
+    const progressLeftOver = index$1.appendIncentiveUnit(leftOverValue > 0 ? leftOverValue : null, this.incentive.unit, this.incentive.isUnitCurrency);
+    return (index.h("div", { class: "middle-container" }, index.h("div", { class: "left-container" }, !this.showManagerView && positionText && index.h("div", { class: "position" }, index.h("yoo-tag", { color: "app-color-10", icon: "award-trophy-star", size: "extra-large" }), positionText), index.h("span", { class: "title-category" }, index$1.translate(this.showManagerView ? 'TOTALSALES' : 'SALES')), index.h("span", { class: "total-number" }, progressBaseText), isMilestones && progressOfText && index.h("span", { class: "total-description" }, index$1.translate('INCENTIVESOF'), " ", progressOfText), isMilestones && progressLeftOver && index.h("yoo-tag", { color: "app-color-10" }, progressLeftOver, " ", index$1.translate('LEFT')), isMilestones &&
+      index.h("div", { class: "progress-container" }, index.h("yoo-progress-bar", { value: (progressPercent || 0) * 100, shape: "line", percentValueColorScheme: true }))), index.h("div", { class: "right-container" }, index.h("span", { class: "title-category" }, index$1.translate('PERFORMANCEEVOLUTIONINCENTIVES')), this.renderChart())));
   }
   renderWebBottomContainer() {
     var _a, _b;
-    return (index.h("div", { class: "bottom-container" }, !!((_a = this.salesBreakdown) === null || _a === void 0 ? void 0 : _a.length) && index.h("div", { class: "box" }, index.h("div", { class: "subtitle" }, overlays.translate('SALESBREAKDOWN')), this.renderSalesBreakdown()), !!this.targets.length && index.h("div", { class: "box milestones" }, index.h("div", { class: "subtitle" }, overlays.translate('MILESTONES')), this.renderTargets()), index.h("div", { class: "box" }, index.h("div", { class: "subtitle" }, overlays.translate('INCENTIVELEADERBOARD')), index.h("div", { class: "box-content leaderboard" }, index.h("slot", null))), !((_b = this.salesBreakdown) === null || _b === void 0 ? void 0 : _b.length) && index.h("div", { class: "box" })));
+    return (index.h("div", { class: "bottom-container" }, !!((_a = this.salesBreakdown) === null || _a === void 0 ? void 0 : _a.length) && index.h("div", { class: "box" }, index.h("div", { class: "subtitle" }, index$1.translate('SALESBREAKDOWN')), this.renderSalesBreakdown()), !!this.targets.length && index.h("div", { class: "box milestones" }, index.h("div", { class: "subtitle" }, index$1.translate('MILESTONES')), this.renderTargets()), index.h("div", { class: "box" }, index.h("div", { class: "subtitle" }, index$1.translate('INCENTIVELEADERBOARD')), index.h("div", { class: "box-content leaderboard" }, index.h("slot", null))), !((_b = this.salesBreakdown) === null || _b === void 0 ? void 0 : _b.length) && index.h("div", { class: "box" })));
   }
   renderWeb() {
     return (index.h("div", { class: "outer-container web" }, this.renderWebTopContainer(), this.renderWebMiddleContainer(), this.renderWebBottomContainer()));
@@ -173,7 +173,7 @@ const YooIncentiveDetailComponent = class {
     if (!this.incentive) {
       return;
     }
-    return (index.h(index.Host, { class: commonHelpers.getAppContext(this.host) }, overlays.isWeb(this.host) ? this.renderWeb() : this.renderMobile()));
+    return (index.h(index.Host, { class: commonHelpers.getAppContext(this.host) }, index$1.isWeb(this.host) ? this.renderWeb() : this.renderMobile()));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {