@yoobic/yobi 8.2.0-15 → 8.2.0-18

package/dist/collection/components/form-creator/form-creator/form-creator.css

@@ -364,9 +364,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: 26rem;
 }
 :host .container .content .form-content .scoring-empty-state div {
-  color: var(--text-color, #807f83);
+  color: var(--text-color-80, rgba(128, 127, 131, 0.8));
   font-size: var(--font-size-16, 1rem);
-  opacity: 0.7;
   padding: var(--spacing-16, 1rem);
 }
 :host .container .content .form-content .form-content-blocks-container {

package/dist/collection/components/form-creator/form-creator/form-creator.js

@@ -1,5 +1,5 @@
 import { ALL_MOBILE_FORM_FIELDS, CONDITION_TYPES, FEEDBACK_SCORING_VALUES, FormCreatorBulkActions, FormCreatorOptions, FormFieldCategory, FormFieldType, ScoringCategory } from '@shared/interfaces';
-import { calculateScoringTotal, changeSelectedScoring, checkIfKeyIsInField, checkIfKeyIsInPage, closeModal, CURVE_EASE_OUT_QUAD, findField, findMultiMaxScore, formatScoringValuePairs, formatSlides, getCurrentLanguage, getCustomName, getScoringCategory, getSession, getUUID, isFieldNameUnique, isNullOrUndefined, populateScoringFields, removeParentCondition, removeScoringSelectedFields, serializeScores, setFieldIconAndCategory, showAlert, showModal, showToast, translate, translateMulti, updateTranslationKey } from '@shared/utils';
+import { calculateScoringTotal, changeSelectedScoring, checkIfKeyIsInField, checkIfKeyIsInPage, closeModal, CURVE_EASE_OUT_QUAD, findField, findMultiMaxScore, formatScoringValuePairs, formatSlides, getCurrentLanguage, getCustomName, getScoringCategory, getSession, getUUID, hasImageRecognitionFields, isFieldNameUnique, isNullOrUndefined, populateScoringFields, removeParentCondition, removeScoringSelectedFields, serializeScores, setFieldIconAndCategory, showAlert, showModal, showToast, translate, translateMulti, updateTranslationKey } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
 import { cloneDeep, compact, isArray, orderBy } from 'lodash-es';
 import Sortable from 'sortablejs';
@@ -624,15 +624,20 @@ export class YooFormCreatorComponent {
   }
   onTranslateFieldClicked(event, selectedFieldLocation = null) {
     var _a;
-    //If there are already translations then they are updated by google translate to fill in any missing ones
-    //Note existing translations are NOT overridden
-    if (((_a = this.translations) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      this.loadNewTranslations.emit();
-      selectedFieldLocation = findField(this.currentSlides, event.detail.name);
-      this.reloadTranslationModalOnUpdate = selectedFieldLocation;
+    if (isNullOrUndefined(this.missionDescription.lockTranslations) && hasImageRecognitionFields(this.slides)) {
+      showAlert(translate('YOOBICWARNING'), [translate('YOOBICOK')], translate('LOCKEDTRANSLATIONWARNING'));
     }
     else {
-      this.showTranslationDialog(event);
+      //If there are already translations then they are updated by google translate to fill in any missing ones
+      //Note existing translations are NOT overridden
+      if (((_a = this.translations) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+        this.loadNewTranslations.emit();
+        selectedFieldLocation = findField(this.currentSlides, event.detail.name);
+        this.reloadTranslationModalOnUpdate = selectedFieldLocation;
+      }
+      else {
+        this.showTranslationDialog(event);
+      }
     }
   }
   onCreateNewRestriction(event) {

package/dist/collection/components/form-creator/form-creator-translate/form-creator-translate.js

@@ -1,4 +1,4 @@
-import { cleanUnusedTranslations, closeModal, formatSlides, getLanguageKey, getTranslateLanguageKeys, isNullOrUndefined, showAlert, showModal, translate, updateAuditWithTranslations, updateScoringWithTranslations } from '@shared/utils';
+import { cleanUnusedTranslations, closeModal, formatSlides, getLanguageKey, getTranslateLanguageKeys, hasImageRecognitionFields, isNullOrUndefined, showAlert, showModal, translate, updateAuditWithTranslations, updateScoringWithTranslations } from '@shared/utils';
 import { Component, Event, h, Host, Prop, State, Watch } from '@stencil/core';
 import { cloneDeep, isEqual, remove } from 'lodash-es';
 import { addRow, isAlreadyTranslated, resetFieldTranslations, resetKey, translateAll } from '../helpers';
@@ -66,6 +66,9 @@ export class YooFormCreatorTranslateComponent {
     if (this.baseLanguage && ((_a = this.selectedLanguages) === null || _a === void 0 ? void 0 : _a.length) > 0) {
       this.selectedLanguages = this.selectedLanguages.filter((language) => language !== this.baseLanguage);
     }
+    if (this.missionDescription) {
+      this.missionDescription.lockTranslations = (hasImageRecognitionFields(this.slides) && isNullOrUndefined(this.missionDescription.lockTranslations)) || this.missionDescription.lockTranslations;
+    }
     this.hasTranslations = ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > 0;
     this.updateGridConfig();
   }

package/dist/collection/components/form-creator/workflow/workflow.css

@@ -348,9 +348,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-bottom: unset;
 }
 :host .empty-state-with-text div {
-  color: var(--text-color, #807f83);
+  color: var(--text-color-80, rgba(128, 127, 131, 0.8));
   font-size: var(--font-size-16, 1rem);
-  opacity: 0.7;
   max-width: 25rem;
   padding: var(--spacing-08, 0.5rem);
   text-align: center;

package/dist/collection/components/grid/ag-grid/grid-renderers.js

@@ -2,6 +2,7 @@ import { FormFieldType, IncentivePartType, IncentiveStatus, IncentiveType } from
 import { aclRolesResolver, dateDiff, dateFormat, dateParse, dispatchCustomEvent, getCssColor, getUserDisplayName, groupsResolver, pipes, salesAIFormatDemand, salesAIGetColorFromPattern, toButton, toDate, toHours, translate, translateMulti, utc } from '@shared/utils';
 import { compact, get, indexOf, isArray, isEmpty, isFunction, isNumber, isObject, isString, keys, map, round } from 'lodash-es';
 import { countryFlag } from '../../..//utils/helpers/country-helpers';
+import { getPositionText } from '../../../feature-learn/incentive/helpers/incentive-helpers';
 import { getWorkflowStepBadge } from '../../../feature-operate/mission/helpers/missions-helpers';
 import { dateRangeState } from '../../../utils/helpers/common-helpers';
 import { getJSONHighlighted } from '../../../utils/helpers/form-helpers';
@@ -992,6 +993,23 @@ function incentiveTotalRenderer(params) {
   }
   return '-';
 }
+/**
+ * @function incentiveRankingRenderer
+ * @description Display the user rank
+ * @param {ICellRendererParams} params
+ */
+function incentiveRankingRenderer(params) {
+  const awardIcon = '<yoo-tag color="app-color-10" icon="award-trophy-star" size="small"></yoo-tag>';
+  if (params.data.type === IncentiveType.milestones) {
+    // TODO: GET POSITION
+    const position = 1;
+    const positionText = getPositionText(position);
+    return `${awardIcon} ${positionText}`;
+  }
+  else {
+    return `${awardIcon} -`;
+  }
+}
 function courseStatusRenderer(params) {
   var _a;
   const status = isString(params.value) ? params.value : (_a = params.value) === null || _a === void 0 ? void 0 : _a.tag;
@@ -1389,6 +1407,8 @@ export function getRenderer(renderer) {
       return incentiveParticipantsRenderer;
     case 'incentiveTotalRenderer':
       return incentiveTotalRenderer;
+    case 'incentiveRankingRenderer':
+      return incentiveRankingRenderer;
     case 'courseStatusRenderer':
       return courseStatusRenderer;
     case 'entityRenderer':

package/dist/collection/components/grid/grid/grid.css

@@ -279,13 +279,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .grid-progress yoo-progress-bar {
   --progress-bar-color: var(--app-color, #5a30f4);
 }
-:host yoo-empty-state {
-  height: var(--empty-state-height, 10rem);
-}
-:host yoo-empty-state + yoo-button {
-  max-width: 15rem;
-  margin: 0 auto;
-}
 :host yoo-lottie {
   max-width: 31rem;
 }
@@ -357,20 +350,22 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: 100%;
   padding: 0 var(--spacing-24, 1.5rem);
 }
-:host .empty-state h4 {
-  justify-self: center;
-  margin: unset;
+:host .empty-state yoo-empty-state {
+  height: var(--empty-state-height, 10rem);
 }
-:host .empty-state div {
-  color: var(--text-color, #807f83);
+:host .empty-state .empty-state-details {
+  color: var(--text-color-80, rgba(128, 127, 131, 0.8));
   font-size: var(--font-size-16, 1rem);
-  opacity: 0.7;
+  display: flex;
+  flex-direction: column;
+  grid-gap: var(--spacing-08, 0.5rem);
+  width: 100%;
   padding-bottom: var(--spacing-16, 1rem);
   text-align: center;
 }
-:host .empty-state yoo-empty-state {
-  height: 10rem;
-  padding-top: var(--spacing-16, 1rem);
+:host .empty-state h4 {
+  justify-self: center;
+  margin: unset;
 }
 :host .entity-container-map {
   overflow: hidden;
@@ -3342,6 +3337,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: flex;
   flex-direction: column;
   grid-gap: var(--spacing-08, 0.5rem);
+  align-items: center;
+  width: unset;
 }
 
 :host(.card-cell.small.channel) yoo-empty-state,

package/dist/collection/components/grid/grid/grid.js

@@ -2423,11 +2423,10 @@ export class YooGridComponent {
       h("yoo-button", { animated: false, color: "app-color", fill: "transparent", size: isWeb(this.host) ? 'small' : 'medium', shape: "rectangular", onClick: () => this.onForceSelectAll(showClear) }, translate(showClear ? 'CLEAR' : 'SELECTALL'))));
   }
   renderEmptyStateButton(customStyle) {
-    const buttonSize = isWeb(this.host) || (!this.extraClass || this.extraClass === 'large') ? 'large' : 'medium';
+    const buttonSize = (!this.extraClass && isWeb(this.host)) || this.extraClass.includes('large') ? 'large' : this.extraClass.includes('small') ? 'small' : 'medium';
     return (h("yoo-button", { class: { 'empty-button': true, expanded: customStyle }, size: buttonSize, color: "app-color", onClick: () => this.emptyStateHandler() }, translate(this.emptyStateButtonText)));
   }
   renderEmptyState() {
-    const isLarge = !this.extraClass || this.extraClass === 'large';
     const type = this.emptyState || this.entityType || 'error';
     const displayEmptyState = type && type !== 'none' && !this.hideEmptyState;
     const header = translate(this.emptyStateHeader || EMPTYSTATE_TITLE_MAP[type]);
@@ -2438,12 +2437,11 @@ export class YooGridComponent {
       h("slot", { name: "before" }),
       displayEmptyState && (h("div", { class: `empty-state-container ${this.extraClass}` },
         h("div", { class: { 'empty-state': true, padding: customStyle, ...getAppContext(this.host) } },
-          this.emptyStateTextPosition === 'top' && [!!header && h("h4", null, header), h("div", null, text)],
+          !this.emptyStateNoDescription && this.emptyStateTextPosition === 'top' && [!!header && h("h4", null, header), h("div", null, text)],
           this.emptyStateAnimated ? (h("yoo-lottie", { autoplay: true, loop: true, type: type })) : (h("yoo-empty-state", { class: { [this.displayType]: true, [this.extraClass || 'large']: true, 'with-button': hasButton }, style: { height: this.isAutoComplete && !this.host.classList.contains('expanding-grid') && '5rem' }, type: type })),
           h("div", { class: "empty-state-details" },
-            this.emptyStateTextPosition === 'bottom' && [!!header && h("h4", { innerHTML: header }), h("div", { class: { 'with-button': hasButton }, innerHTML: text })],
-            hasButton && !isLarge && this.renderEmptyStateButton(customStyle)),
-          hasButton && isLarge && this.renderEmptyStateButton(customStyle)))),
+            !this.emptyStateNoDescription && this.emptyStateTextPosition === 'bottom' && [!!header && h("h4", { innerHTML: header }), h("div", { class: { 'with-button': hasButton }, innerHTML: text })],
+            hasButton && this.renderEmptyStateButton(customStyle))))),
       h("slot", { name: "after" })
     ];
   }
@@ -3057,7 +3055,8 @@ export class YooGridComponent {
           'collapsed': this.isMap(),
           'selected card-template': this.displayType === 'card-template' && this.isSelected(item),
           'form': this.host.classList.contains('form'),
-          'table': this.host.classList.contains('table')
+          'table': this.host.classList.contains('table'),
+          'block': this.host.classList.contains('radio-button-choice')
         }, item: item, items: this.entityType === 'photos' ? this.filteredItems : undefined, displayType: this.displayType, entityType: this.entityType, profileSummary: this.profileSummary, icons: this.icons, topActions: this.topActions, bottomActions: this.bottomActions, secondaryActions: this.secondaryActions, customModel: this.customModel, isCollapsible: this.isCollapsibleCheck(), isMap: this.isMap(), isFramed: this.isFramed, isPdf: this.isPdf, unreadCounts: this.unreadCounts, playerCommand: this.currentActivePlayerId, secondaryActionsDropdown: this.secondaryActionsDropdown, selected: this.isSelected(item), valuesColor: (_d = this.valuesColor) === null || _d === void 0 ? void 0 : _d.find((e) => (item._id ? e.key === item._id : item.icon ? e.key === item.title : e.key === item)), highlighted: this.entityType === 'lessons' && this.getLessonHighlight(item), hideUIFields: this.hideUIFields })));
     if (isWeb(this.host) && this.columns && this.columns.length) {
       return this.renderEntityWithColumns(item, content, index);
@@ -4188,6 +4187,23 @@ export class YooGridComponent {
       "attribute": "empty-state-description",
       "reflect": false
     },
+    "emptyStateNoDescription": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "empty-state-no-description",
+      "reflect": false
+    },
     "emptyStateHeader": {
       "type": "string",
       "mutable": false,

package/dist/collection/feature-communicate/feed/card-feed/default/card-feed.css

@@ -1642,10 +1642,12 @@ span.fr-img-caption.fr-view {
   box-shadow: var(--card-shadow-2, 0 0.3125rem 0.9375rem 0 rgba(40, 47, 54, 0.08));
 }
 
-:host(.preview-mode.modal-mode) .outer-container > * {
+:host(.preview-mode.modal-mode) .outer-container > *,
+:host(.no-pointer) .outer-container > * {
   pointer-events: none;
 }
-:host(.preview-mode.modal-mode) .event-container .event-action-container {
+:host(.preview-mode.modal-mode) .event-container .event-action-container,
+:host(.no-pointer) .event-container .event-action-container {
   pointer-events: none;
 }
 

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

@@ -57,7 +57,8 @@ export class YooCardIncentiveComponent {
     return (h("div", { class: "progress" }, progressText));
   }
   renderFooter() {
-    const positionText = getPositionText(this.score);
+    var _a;
+    const positionText = ((_a = this.score) === null || _a === void 0 ? void 0 : _a.position) && getPositionText(this.score.position);
     const progressText = getProgressText(this.score);
     const footer = (h("div", { class: "footer" },
       positionText && this.renderPositionText(positionText),

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

@@ -19,11 +19,9 @@ export function getIncentiveStatusBadgeSettings(incentive) {
  * @param {IIncentiveParticipantScore} score
  * @return {string} Name of position
  */
-export function getPositionText(score) {
-  if (!(score === null || score === void 0 ? void 0 : score.position)) {
+export function getPositionText(position) {
+  if (!position)
     return '';
-  }
-  const position = score.position;
   let numSuffix = 'THSUFFIX';
   if (position % 10 === 1) {
     numSuffix = 'STSUFFIX';

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

@@ -232,9 +232,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .outer-container .unvisible {
   visibility: hidden;
 }
-:host .outer-container .kpichart {
-  height: 200px;
-}
 :host .outer-container .types > div,
 :host .outer-container .date {
   display: flex;
@@ -250,7 +247,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: flex;
   flex-direction: row;
   padding-bottom: var(--spacing-16, 1rem);
-  border-bottom: 1px solid var(--stable-light, #f1f1f1);
+  border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
 }
 :host .outer-container .dates .date {
   color: var(--app-color, #5a30f4);
@@ -269,10 +266,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding: var(--spacing-16, 1rem) 0;
   color: var(--dark, #000000);
   font-weight: var(--font-weight-700, 700);
-  font-size: var(--font-size-14, 0.875rem);
-}
-:host .outer-container .position yoo-tag {
-  margin-right: var(--spacing-08, 0.5rem);
 }
 :host .outer-container .progress-bar {
   margin: var(--spacing-04, 0.25rem) 0;
@@ -383,16 +376,16 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .outer-container.web .middle-container {
   display: flex;
-  height: 14rem;
+  height: 100%;
 }
 :host .outer-container.web .middle-container .left-container {
   flex: 0;
   flex-basis: auto;
   padding-right: 3.5rem;
+  padding-bottom: var(--spacing-16, 1rem);
 }
 :host .outer-container.web .middle-container .left-container .total-number {
   display: inline-flex;
-  margin-top: var(--spacing-16, 1rem);
   color: var(--dark, #000000);
   font-weight: var(--font-weight-900, 900);
   font-size: var(--font-size-54, 3.375rem);
@@ -407,8 +400,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: table;
 }
 :host .outer-container.web .middle-container .left-container .progress-container yoo-progress-bar {
-  width: 4.125rem;
   margin-top: var(--spacing-16, 1rem);
+  --progress-value-font-size: var(--font-size-14, 0.875rem);
 }
 :host .outer-container.web .middle-container .left-container .progress-container .progress-bar-description {
   display: table-cell;
@@ -416,9 +409,26 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   font-weight: var(--font-weight-900, 900);
   vertical-align: middle;
 }
+:host .outer-container.web .middle-container .left-container yoo-progress-bar {
+  width: 15rem;
+  --progress-value-font-size: var(--font-size-20, 1.25rem);
+}
+:host .outer-container.web .middle-container .left-container yoo-tag {
+  display: flex;
+}
+:host .outer-container.web .middle-container .left-container .position {
+  font-size: var(--font-size-16, 1rem);
+  border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
+}
+:host .outer-container.web .middle-container .left-container .position yoo-tag {
+  margin-right: var(--spacing-16, 1rem);
+}
 :host .outer-container.web .middle-container .right-container {
   flex: 1;
 }
+:host .outer-container.web .middle-container .right-container .kpichart {
+  height: 12.5rem;
+}
 :host .outer-container.web .bottom-container {
   display: flex;
   background-color: var(--stable-light-40, rgba(241, 241, 241, 0.4));
@@ -431,7 +441,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   font-size: var(--font-size-14, 0.875rem);
 }
 :host .outer-container.web .bottom-container .box .box-content {
-  height: 380px;
+  height: 23.75rem;
   margin: var(--spacing-16, 1rem);
   padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
   overflow: auto;
@@ -460,7 +470,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   align-items: center;
   padding: var(--spacing-08, 0.5rem) 0;
   font-size: var(--font-size-14, 0.875rem);
-  border-bottom: 1px solid var(--stable-light, #f1f1f1);
+  border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
 }
 :host .outer-container.web .bottom-container .box .box-content .item .values {
   display: flex;
@@ -477,11 +487,26 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-right: var(--spacing-16, 1rem);
 }
 :host .outer-container.web .title-category {
+  display: flex;
   color: var(--dark, #000000);
   font-weight: var(--font-weight-900, 900);
   font-size: var(--font-size-14, 0.875rem);
 }
 
+.outer-container.mobile yoo-progress-bar {
+  width: 4.125rem;
+  --progress-value-font-size: var(--font-size-14, 0.875rem);
+}
+.outer-container.mobile .position {
+  font-size: var(--font-size-14, 0.875rem);
+}
+.outer-container.mobile .position yoo-tag {
+  margin-right: var(--spacing-08, 0.5rem);
+}
+.outer-container.mobile .kpichart {
+  height: 12.5rem;
+}
+
 :host(.web) .box-content {
   /* Track */
   /* Handle */
@@ -503,11 +528,4 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host(.web) .box-content:hover::-webkit-scrollbar-thumb {
   background: var(--stable, #adadad);
-}
-:host(.web) yoo-progress-bar {
-  --progress-value-font-size: var(--font-size-20, 1.25rem) ;
-}
-
-:host(.mobile) yoo-progress-bar {
-  --progress-value-font-size: var(--font-size-14, 0.875rem) ;
 }

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"; }