@yoobic/yobi 8.2.0-16 → 8.2.0-17

package/dist/collection/feature-learn/incentive/incentive-detail/incentive-detail.js

@@ -1,5 +1,5 @@
 import { IncentiveType } from '@shared/interfaces';
-import { appendIncentiveUnit, dateFormat, getIncentiveProgress, getIncentiveTargetHighestMilestone, getIncentiveTotalKpis, getIncentiveTotalTargets, getSession, gsapTo, isWeb, translate } from '@shared/utils';
+import { appendIncentiveUnit, dateFormat, getIncentiveProgress, getIncentiveProgressBase, getIncentiveProgressOf, getIncentiveTargetHighestMilestone, getSession, gsapTo, isWeb, translate } from '@shared/utils';
 import { Component, Element, forceUpdate, h, Host, Prop, Watch } from '@stencil/core';
 import { dateRangeState, getAppContext } from '../../../utils/helpers/common-helpers';
 import { getIncentiveStatusBadgeSettings, getParticipant, getPositionText, getProgressText, getTotalSalesBreakdown, getUserScore } from '../helpers/incentive-helpers';
@@ -23,7 +23,8 @@ export class YooIncentiveDetailComponent {
       return;
     }
     this.participant = getParticipant(this.incentive, this.userId, this.groups);
-    if (isWeb(this.host)) {
+    this.score = getUserScore(this.incentive, this.userId, this.groups);
+    if (this.showManagerView) {
       const length = (_a = this.incentive.targets) === null || _a === void 0 ? void 0 : _a.length; // the target will be opened by default if there is only one, or if the current user is also a participant
       this.targets = ((_b = this.incentive.targets) === null || _b === void 0 ? void 0 : _b.map(target => {
         var _a;
@@ -37,7 +38,6 @@ export class YooIncentiveDetailComponent {
     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: getIncentiveTargetHighestMilestone(target), isOpened: true }] : [];
-      this.score = getUserScore(this.incentive, this.userId, this.groups);
     }
   }
   getDate() {
@@ -47,15 +47,17 @@ export class YooIncentiveDetailComponent {
   renderTargetMilestone(tagetId, milestone) {
     var _a, _b;
     const isMilestoneReached = ((_a = this.score) === null || _a === void 0 ? void 0 : _a.progress) >= milestone.value;
-    const reached = !isWeb(this.host) && (((_b = this.participant) === null || _b === void 0 ? void 0 : _b.target) === tagetId) && isMilestoneReached;
+    const reached = !this.showManagerView && (((_b = this.participant) === null || _b === void 0 ? void 0 : _b.target) === tagetId) && isMilestoneReached;
     return (h("tr", { class: { reached } },
       h("th", null, milestone.reward),
       h("td", null,
-        !isWeb(this.host) && h("yoo-icon", { name: "check", color: "app-color", class: { 'unvisible': !isMilestoneReached }, size: "small" }),
+        !this.showManagerView && h("yoo-icon", { name: "check", color: "app-color", class: { 'unvisible': !isMilestoneReached }, size: "small" }),
         appendIncentiveUnit(milestone.value, this.incentive.unit, this.incentive.isUnitCurrency, false))));
   }
   renderTargets() {
-    return (h("div", { class: "box-content targets" }, this.targets.map((target) => this.renderTarget(target))));
+    return [
+      h("div", { class: "box-content targets" }, this.targets.map((target) => this.renderTarget(target)))
+    ];
   }
   renderTarget(collapsible) {
     var _a;
@@ -74,13 +76,13 @@ export class YooIncentiveDetailComponent {
       h("div", { class: "target-title", onClick: toggleData },
         h("div", { class: "name" }, collapsible.target.title),
         h("div", { class: "reach" },
-          isWeb(this.host) ? milestoneText : translate('REACHTARGET', { n: milestoneText }),
+          this.showManagerView ? milestoneText : translate('REACHTARGET', { n: milestoneText }),
           h("yoo-icon", { name: collapsible.isOpened ? 'arrow-up' : 'arrow-down', color: "stable" }))),
       h("div", { class: "target-data", ref: el => dataEl = el },
         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, _b;
+    var _a;
     if (!this.score)
       return;
     const progressText = getProgressText(this.score);
@@ -91,8 +93,7 @@ export class YooIncentiveDetailComponent {
         h("div", { class: "progress" }, progressText),
         h("div", { class: "leftover" }, leftOverText + ' ' + translate('INCENTIVELEFT'))),
       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) && h("div", { class: "subtitle" }, translate('MILESTONES')),
-      !!((_b = this.targets) === null || _b === void 0 ? void 0 : _b.length) && this.renderTargets()));
+      !!((_a = this.targets) === null || _a === void 0 ? void 0 : _a.length) && this.renderTargets()));
   }
   renderTypes() {
     var _a, _b, _c, _d, _e;
@@ -166,7 +167,8 @@ export class YooIncentiveDetailComponent {
     ];
   }
   renderMobile() {
-    const positionText = getPositionText(this.score);
+    var _a;
+    const positionText = ((_a = this.score) === null || _a === void 0 ? void 0 : _a.position) && getPositionText(this.score.position);
     return (h("div", { class: "outer-container mobile" },
       h("div", { class: "title" }, this.incentive.title),
       h("div", { class: "types" }, this.renderTypes()),
@@ -183,60 +185,75 @@ export class YooIncentiveDetailComponent {
       h("div", { class: "subtitle" }, translate('INCENTIVELEADERBOARD')),
       h("slot", null)));
   }
+  renderWebTopContainer() {
+    var _a, _b;
+    return (h("div", { class: "top-container" },
+      h("div", { class: "image-container" },
+        h("yoo-img", { type: "background", src: (_b = (_a = this.incentive) === null || _a === void 0 ? void 0 : _a.background) === null || _b === void 0 ? void 0 : _b._downloadURL.toString() })),
+      h("div", { class: "description-container" },
+        h("div", { class: "heading-container" },
+          h("span", { class: "title" }, this.incentive.title)),
+        h("div", { class: "info-container" },
+          this.renderTypes(),
+          this.renderDateRange(),
+          this.renderDate(),
+          this.renderOwner()),
+        this.incentive.description && h("div", { class: "description" }, this.incentive.description),
+        h("div", { class: "tags-container" }, this.renderTags()))));
+  }
+  renderWebMiddleContainer() {
+    var _a;
+    const isMilestones = this.incentive.type === IncentiveType.milestones;
+    const positionText = ((_a = this.score) === null || _a === void 0 ? void 0 : _a.position) && getPositionText(this.score.position);
+    const progressBaseValue = getIncentiveProgressBase(this.incentive, this.score, this.showManagerView);
+    const progressBaseText = appendIncentiveUnit(progressBaseValue, isMilestones ? null : this.incentive.unit, this.incentive.isUnitCurrency, false);
+    const progressOfValue = getIncentiveProgressOf(this.incentive, this.score, this.showManagerView);
+    const progressOfText = progressOfValue && appendIncentiveUnit(progressOfValue, this.incentive.unit, this.incentive.isUnitCurrency, false);
+    const progressPercent = getIncentiveProgress(this.incentive, this.score, this.showManagerView);
+    const leftOverValue = (progressOfValue - progressBaseValue);
+    const progressLeftOver = appendIncentiveUnit(leftOverValue > 0 ? leftOverValue : null, this.incentive.unit, this.incentive.isUnitCurrency);
+    return (h("div", { class: "middle-container" },
+      h("div", { class: "left-container" },
+        !this.showManagerView && isMilestones && positionText && h("div", { class: "position" },
+          h("yoo-tag", { color: "app-color-10", icon: "award-trophy-star", size: "extra-large" }),
+          positionText),
+        h("span", { class: "title-category" }, translate(this.showManagerView ? 'TOTALSALES' : 'SALES')),
+        h("span", { class: "total-number" }, progressBaseText),
+        isMilestones && progressOfText && h("span", { class: "total-description" },
+          translate('INCENTIVESOF'),
+          " ",
+          progressOfText),
+        isMilestones && progressLeftOver && h("yoo-tag", { color: "app-color-10" },
+          progressLeftOver,
+          " ",
+          translate('LEFT')),
+        isMilestones &&
+          h("div", { class: "progress-container" },
+            h("yoo-progress-bar", { value: (progressPercent || 0) * 100, shape: "line", percentValueColorScheme: true }))),
+      h("div", { class: "right-container" },
+        h("span", { class: "title-category" }, translate('PERFORMANCEEVOLUTIONINCENTIVES')),
+        this.renderChart())));
+  }
+  renderWebBottomContainer() {
+    var _a, _b;
+    return (h("div", { class: "bottom-container" },
+      !!((_a = this.salesBreakdown) === null || _a === void 0 ? void 0 : _a.length) && h("div", { class: "box" },
+        h("div", { class: "subtitle" }, translate('SALESBREAKDOWN')),
+        this.renderSalesBreakdown()),
+      !!this.targets.length && h("div", { class: "box milestones" },
+        h("div", { class: "subtitle" }, translate('INCENTIVETARGETS')),
+        this.renderTargets()),
+      h("div", { class: "box" },
+        h("div", { class: "subtitle" }, translate('INCENTIVELEADERBOARD')),
+        h("div", { class: "box-content leaderboard" },
+          h("slot", null))),
+      !((_b = this.salesBreakdown) === null || _b === void 0 ? void 0 : _b.length) && h("div", { class: "box" })));
+  }
   renderWeb() {
-    var _a, _b, _c, _d;
-    // display the unit near the total progress only if this is a currency, or if the type of the incentive is not 'milestones'
-    const isMilestones = (this.incentive.type === IncentiveType.milestones);
-    const progressBaseUnit = this.incentive.isUnitCurrency ? this.incentive.unit : (isMilestones ? null : this.incentive.unit);
-    const progressBase = appendIncentiveUnit(getIncentiveTotalKpis(this.incentive), progressBaseUnit, this.incentive.isUnitCurrency, false);
-    let progressOf = null;
-    let progressPercent = null;
-    if (isMilestones) {
-      progressOf = appendIncentiveUnit(getIncentiveTotalTargets(this.incentive), this.incentive.unit, this.incentive.isUnitCurrency, false);
-      progressPercent = getIncentiveProgress(this.incentive);
-    }
     return (h("div", { class: "outer-container web" },
-      h("div", { class: "top-container" },
-        h("div", { class: "image-container" },
-          h("yoo-img", { type: "background", src: (_b = (_a = this.incentive) === null || _a === void 0 ? void 0 : _a.background) === null || _b === void 0 ? void 0 : _b._downloadURL.toString() })),
-        h("div", { class: "description-container" },
-          h("div", { class: "heading-container" },
-            h("span", { class: "title" }, this.incentive.title)),
-          h("div", { class: "info-container" },
-            this.renderTypes(),
-            this.renderDateRange(),
-            this.renderDate(),
-            this.renderOwner()),
-          this.incentive.description && h("div", { class: "description" }, this.incentive.description),
-          h("div", { class: "tags-container" }, this.renderTags()))),
-      h("div", { class: "middle-container" },
-        h("div", { class: "left-container" },
-          h("span", { class: "title-category" }, translate('TOTALSALES')),
-          h("div", null,
-            h("span", { class: "total-number" }, progressBase),
-            progressOf && h("span", { class: "total-description" },
-              translate('INCENTIVESOF'),
-              " ",
-              progressOf)),
-          this.incentive.type === IncentiveType.milestones &&
-            h("div", { class: "progress-container" },
-              h("yoo-progress-bar", { value: (progressPercent || 0) * 100, shape: "circle", percentValueColorScheme: true }),
-              h("span", { class: "progress-bar-description" }, translate('INCENTIVEGENERALTARGET')))),
-        h("div", { class: "right-container" },
-          h("span", { class: "title-category" }, translate('PERFORMANCEEVOLUTIONINCENTIVES')),
-          this.renderChart())),
-      h("div", { class: "bottom-container" },
-        !!((_c = this.salesBreakdown) === null || _c === void 0 ? void 0 : _c.length) && h("div", { class: "box" },
-          h("div", { class: "subtitle" }, translate('SALESBREAKDOWN')),
-          this.renderSalesBreakdown()),
-        !!this.targets.length && h("div", { class: "box milestones" },
-          h("div", { class: "subtitle" }, translate('INCENTIVETARGETS')),
-          this.renderTargets()),
-        h("div", { class: "box" },
-          h("div", { class: "subtitle" }, translate('INCENTIVELEADERBOARD')),
-          h("div", { class: "box-content leaderboard" },
-            h("slot", null))),
-        !((_d = this.salesBreakdown) === null || _d === void 0 ? void 0 : _d.length) && h("div", { class: "box" }))));
+      this.renderWebTopContainer(),
+      this.renderWebMiddleContainer(),
+      this.renderWebBottomContainer()));
   }
   render() {
     if (!this.incentive) {
@@ -311,6 +328,23 @@ export class YooIncentiveDetailComponent {
         "tags": [],
         "text": ""
       }
+    },
+    "showManagerView": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-manager-view",
+      "reflect": false
     }
   }; }
   static get elementRef() { return "host"; }

package/dist/collection/feature-operate/mission/helpers/missions-helpers.js

@@ -58,9 +58,9 @@ export function getMissionDate(mission, isOngoing) {
   }
   return getMissionPublicationDate(mission);
 }
-function getMissionProgress(mission, forceProgressDisplay) {
+export function getMissionProgress(mission, forceProgressDisplay) {
   var _a, _b;
-  const isActionPlanWithTodos = isMissionActionPlan(mission) && !!((_b = (_a = mission.todo) === null || _a === void 0 ? void 0 : _a.values) === null || _b === void 0 ? void 0 : _b.length);
+  const isActionPlanWithTodos = !!((_b = (_a = mission === null || mission === void 0 ? void 0 : mission.todo) === null || _a === void 0 ? void 0 : _a.values) === null || _b === void 0 ? void 0 : _b.length) && isMissionActionPlan(mission);
   if (isActionPlanWithTodos && (!isMissionDone(mission) || forceProgressDisplay)) {
     return {
       value: mission.todo.values.filter((todo) => { var _a, _b; return ((_a = todo.finished) === null || _a === void 0 ? void 0 : _a.value) === true || ((_b = todo.finished) === null || _b === void 0 ? void 0 : _b.value) === false; }).length,

package/dist/collection/feature-operate/mission/mission-details/mission-details.js

@@ -422,7 +422,7 @@ export class YooMissionDetailsComponent {
   renderActionPlanDetails() {
     return (h("div", { class: 'mission-detail ' + (this.isMobile ? '' : 'web') },
       h("div", { class: "mission-content" },
-        h("yoo-mission-heading", { animated: this.animated, mission: this.mission, progress: this.progress && this.progress.value && this.progress.value }),
+        h("yoo-mission-heading", { animated: this.animated, mission: this.mission }),
         h("ul", { class: { menu: true, pdf: this.isPdf } },
           this.renderValidatedReason('REASON', 'reason', this.mission.originalUnvalidatedReason),
           this.renderOriginalValidatedBy(),

package/dist/collection/feature-operate/mission/mission-heading/mission-heading.css

@@ -210,6 +210,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host yoo-progress-bar {
   --progress-bar-color: var(--app-color, #5a30f4);
 }
+:host yoo-truncate {
+  color: var(--app-color, #5a30f4);
+}
 :host yoo-banner {
   --main-color: var(--warning-10, rgba(237, 110, 51, 0.1));
   margin-top: var(--spacing-08, 0.5rem);
@@ -235,6 +238,18 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   max-width: 10rem;
   margin-right: var(--spacing-08, 0.5rem);
 }
+:host .sub-heading .action-plan-progress {
+  display: flex;
+  align-items: center;
+  max-width: 11rem;
+  margin-right: var(--spacing-08, 0.5rem);
+}
+:host .sub-heading .action-plan-progress yoo-progress-bar {
+  width: var(--spacing-16, 1rem);
+}
+:host .sub-heading .action-plan-progress yoo-truncate {
+  margin: 0 var(--spacing-08, 0.5rem);
+}
 :host div:last-child {
   margin-bottom: 0;
 }

package/dist/collection/feature-operate/mission/mission-heading/mission-heading.js

@@ -1,6 +1,6 @@
 import { isIonic, translate, translateMulti } from '@shared/utils';
 import { Component, Element, h, Host, Prop } from '@stencil/core';
-import { getMissionTags } from '../../../feature-operate/mission/helpers/missions-helpers';
+import { getMissionProgress, getMissionTags } from '../../../feature-operate/mission/helpers/missions-helpers';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 import { MissionLockedBanner } from '../mission-locked-banner/mission-locked-banner';
 export class YooMissionHeadingComponent {
@@ -10,9 +10,26 @@ export class YooMissionHeadingComponent {
   componentWillLoad() {
     this.isMobile = isIonic(this.host);
   }
+  renderActionPlanProgress() {
+    const actionProgress = getMissionProgress(this.mission);
+    if ((actionProgress === null || actionProgress === void 0 ? void 0 : actionProgress.value) >= 0) {
+      return h("div", { class: { 'action-plan-progress': true, 'mission-progress-web': !this.isMobile } },
+        h("yoo-progress-bar", { class: "app-color", shape: "circle", hideProgressValue: true, value: actionProgress.value, metric: actionProgress.unit, maxValue: actionProgress.max }),
+        h("yoo-truncate", { class: "app-color", style: { cssText: '--max-lines: 1' } },
+          h("span", null, translate('ACTIONSCOMPLETED', { smart_count: actionProgress.value, total: actionProgress.max }))));
+    }
+    return null;
+  }
+  renderMissionProgress() {
+    if (this.progress >= 0) {
+      return h("div", { class: { 'mission-progress': true, 'mission-progress-web': !this.isMobile } },
+        h("yoo-progress-bar", { animated: this.animated, value: this.progress }));
+    }
+  }
   render() {
     const excludedTags = ['dueDate', 'category', 'progress'];
     const tags = getMissionTags(this.mission).filter((tag) => !excludedTags.includes(tag._id));
+    const isActionPlan = this.mission.type === 'todo';
     return (h(Host, { class: getAppContext(this.host) },
       h("div", { class: { 'background-container': true, pdf: this.isPdf } },
         h("div", { class: "content-container" },
@@ -21,8 +38,8 @@ export class YooMissionHeadingComponent {
             !this.isPdf && this.mission.title && h("div", { class: "mission-title" }, translateMulti(this.mission.title)),
             !this.mission.title && this.mission.type === 'visit' && h("div", { class: "mission-title" }, translate('VISIT')),
             h("div", { class: "sub-heading" },
-              this.progress >= 0 && (h("div", { class: { 'mission-progress': true, 'mission-progress-web': !this.isMobile } },
-                h("yoo-progress-bar", { animated: this.animated, value: this.progress }))), tags === null || tags === void 0 ? void 0 :
+              isActionPlan && this.renderActionPlanProgress(),
+              !isActionPlan && this.renderMissionProgress(), tags === null || tags === void 0 ? void 0 :
               tags.map((tag) => {
                 const tagDefaultColor = tag.customColor ? null : 'stable';
                 return (h("yoo-tag", { color: tag.color || tagDefaultColor, customColor: tag.customColor },

package/dist/{esm/camera-helpers-74eb636a.js → design-system/camera-helpers-019bcaf5.js}

@@ -1,4 +1,4 @@
-import { c3 as cordova, c4 as IonicNativePlugin, cf as cordovaPropertyGet, cg as cordovaPropertySet, ch as registerPlugin, _ as getSession, ci as isIonic, d as isNativeMobile, cj as Device, e as isAndroid, v as isIOS, ck as getMediaDevices, n as showModal, m as getModalAnimation, o as isWeb } from './index-16ec3116.js';
+import { c3 as cordova, c4 as IonicNativePlugin, cf as cordovaPropertyGet, cg as cordovaPropertySet, ch as registerPlugin, _ as getSession, ci as isIonic, d as isNativeMobile, cj as Device, e as isAndroid, v as isIOS, ck as getMediaDevices, n as showModal, m as getModalAnimation, o as isWeb } from './index-31fcf34b.js';
 
 var __extends$2 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -205,7 +205,7 @@ var CameraResultType;
 })(CameraResultType || (CameraResultType = {}));
 
 const Camera = registerPlugin('Camera', {
-    web: () => import('./web-2f7b9722.js').then(m => new m.CameraWeb()),
+    web: () => import('./web-af5f29c4.js').then(m => new m.CameraWeb()),
 });
 
 var __extends = (undefined && undefined.__extends) || (function () {

package/dist/design-system/{chat-helpers-6d14c0c0.js → chat-helpers-a5613453.js}

@@ -1,4 +1,4 @@
-import { al as is24Hour, am as isFile, n as showModal, o as isWeb } from './index-16ec3116.js';
+import { al as is24Hour, am as isFile, n as showModal, o as isWeb } from './index-31fcf34b.js';
 import { a as isArray } from './lodash-b0ad17f3.js';
 
 /**

package/dist/design-system/{common-helpers-162a2c9d.js → common-helpers-cd0eef7a.js}

@@ -1,4 +1,4 @@
-import { m as getModalAnimation, t as translate, n as showModal, o as isWeb, p as debounce, q as querySelectorDeep$1, d as isNativeMobile, S as ScreenOrientation, r as findParent, u as isIphoneX, f as isIpadPro, j as isTablet, c as isFullScreenFalse, v as isIOS, e as isAndroid, w as setAnimation, x as animations, y as getCssColor, Y as YOOBICON_ENTITIES_MAP, z as startOf, A as isDateBefore, B as dateDiffInCalendarDays, D as isDateAfter, E as getAsyncExtraData, F as isNativeFilePath, G as cleanupWKWebViewFilePath, k as Cloudinary, H as getProtocol, C as CloudinaryGradientLayer } from './index-16ec3116.js';
+import { m as getModalAnimation, t as translate, n as showModal, o as isWeb, p as debounce, q as querySelectorDeep$1, d as isNativeMobile, S as ScreenOrientation, r as findParent, u as isIphoneX, f as isIpadPro, j as isTablet, c as isFullScreenFalse, v as isIOS, e as isAndroid, w as setAnimation, x as animations, y as getCssColor, Y as YOOBICON_ENTITIES_MAP, z as startOf, A as isDateBefore, B as dateDiffInCalendarDays, D as isDateAfter, E as getAsyncExtraData, F as isNativeFilePath, G as cleanupWKWebViewFilePath, k as Cloudinary, H as getProtocol, C as CloudinaryGradientLayer } from './index-31fcf34b.js';
 import { A as get } from './lodash-b0ad17f3.js';
 
 function getDefaultModalAnimation() {