@yoobic/yobi 8.3.0-9 → 8.3.0

package/dist/collection/feature-learn/learning/card-course/column/card-course.js

@@ -1,4 +1,4 @@
-import { getPlanDueDate, translate, translateMulti } from '@shared/utils';
+import { getCourseFinishedItemsCount, getCourseProgress, getPlanDueDate, getPlanTotalItemsCount, translateMulti } from '@shared/utils';
 import { Component, Event, h, Prop } from '@stencil/core';
 import { get } from 'lodash-es';
 export class YooCardCourseComponent {
@@ -24,59 +24,70 @@ export class YooCardCourseComponent {
     const isLocked = this.entry.isLocked;
     const isSavedOffline = this.entry.isSavedOffline;
     const isSelfAssigned = this.entry.isSelfAssigned;
-    const hasIcons = isLocked || isSavedOffline || isSelfAssigned;
+    const isFinished = getCourseProgress(this.entry) === 100;
+    const isOngoing = !isFinished && getCourseProgress(this.entry) > 0;
+    const hasIcons = isLocked || isSavedOffline || isSelfAssigned || isFinished || isOngoing;
     const iconSize = this.cardSize === 'small' ? 'small' : 'medium';
     return (backgroundImage && (h("yoo-img", { type: hasIcons ? 'background' : 'default', disabled: isLocked, class: "image", instant: this.entry.isGridCell, src: backgroundImage }, hasIcons && (h("yoo-items", null,
       isLocked && h("yoo-icon", { color: "light", name: "lock", size: iconSize }),
       isSavedOffline && h("yoo-icon", { name: "downloaded", size: iconSize }),
-      isSelfAssigned && h("yoo-icon", { color: "app-color", name: "bookmark", size: iconSize }))))));
+      isFinished && h("yoo-icon", { color: "success", name: "tick", size: iconSize }),
+      isOngoing && h("yoo-icon", { color: "info", name: "ongoing", size: iconSize }),
+      isSelfAssigned && !isFinished && !isOngoing && h("yoo-icon", { color: "app-color", name: "bookmark", size: iconSize }))))));
   }
-  renderProgressBar(lessonsCount) {
-    const { finishedLessonsCount } = this.entry;
-    return h("yoo-progress-bar", { class: { 'app-color': !this.profileSummary }, value: finishedLessonsCount ? (finishedLessonsCount / lessonsCount) * 100 : 0 });
+  renderProgressBar() {
+    const progress = getCourseProgress(this.entry);
+    return h("yoo-progress-bar", { class: { 'app-color': !this.profileSummary }, value: progress });
   }
   renderCourseTitle(plan) {
     return [h("div", { class: "course-title" }, translateMulti(plan.title)), plan.description && h("div", { class: "course-description" }, translateMulti(plan.description))];
   }
-  renderCourseLessonAndPointInfo(lessonsCount, dueDate, isFinished) {
-    const lessonLabel = translate((lessonsCount || 0) > 1 ? 'LESSONS' : 'LESSON');
+  renderCourseLessonAndPointInfo(dueDate) {
+    var _a, _b, _c, _d, _e, _f;
+    const isFinished = getCourseProgress(this.entry) === 100;
+    const key = `SMARTCOUNT${this.entry.type === 'learningpath' ? 'COURSES' : 'LESSONS'}`;
+    const finishedItemsCount = getCourseFinishedItemsCount(this.entry);
+    const finishedItemsText = !isFinished && finishedItemsCount > 0 ? finishedItemsCount + '/' : '';
+    const total = getPlanTotalItemsCount((_a = this.entry) === null || _a === void 0 ? void 0 : _a.plan);
+    let points = (_d = (_c = (_b = this.entry) === null || _b === void 0 ? void 0 : _b.plan) === null || _c === void 0 ? void 0 : _c.availablePoints) === null || _d === void 0 ? void 0 : _d.toString();
+    if (finishedItemsCount > 0) {
+      points = `${Math.round(get(this.entry, 'earnedPoints', 0))}/${(_f = (_e = this.entry) === null || _e === void 0 ? void 0 : _e.plan) === null || _f === void 0 ? void 0 : _f.availablePoints}`;
+    }
     return (h("div", { class: "course-info" },
       this.profileSummary && (h("div", { class: "points" },
         h("yoo-tag", { color: "dark", noBackground: true, size: "small" },
           h("yoo-icon", { color: "app-color", name: "star", size: this.iconSize, slot: "start" }),
-          this.entry.earnedPoints || 0,
-          "/",
-          this.entry.plan.availablePoints || 0))),
-      lessonsCount > 0 && (h("div", { class: "lessons" }, !this.entry.finished && (h("yoo-tag", { color: this.profileSummary ? 'dark' : 'stable', noBackground: true, size: "small" },
-        h("yoo-icon", { color: "stable", name: "lesson", size: this.iconSize, slot: "start" }),
-        this.entry.finishedLessonsCount || 0,
-        "/",
-        lessonsCount || 0,
-        " ",
-        lessonLabel)))),
+          points))),
+      h("div", { class: "lessons" },
+        h("yoo-tag", { color: this.profileSummary ? 'dark' : 'stable', noBackground: true, size: "small" },
+          h("yoo-icon", { color: "stable", name: "lesson", size: this.iconSize, slot: "start" }),
+          translateMulti(key, { numerator: finishedItemsText, smart_count: total }))),
       !isFinished && dueDate && !this.profileSummary && (h("div", { class: "date" },
         h("yoo-tag", { color: "danger", noBackground: true, size: "small" },
           h("yoo-icon", { color: "danger", name: "alarm", size: this.iconSize, slot: "start" }),
           dueDate.toLocaleDateString())))));
   }
-  renderEarnedCoursePoints(plan) {
+  renderEarnedCoursePoints() {
+    var _a, _b, _c, _d, _e;
+    let points = (_c = (_b = (_a = this.entry) === null || _a === void 0 ? void 0 : _a.plan) === null || _b === void 0 ? void 0 : _b.availablePoints) === null || _c === void 0 ? void 0 : _c.toString();
+    const finishedItemsCount = getCourseFinishedItemsCount(this.entry);
+    if (finishedItemsCount > 0) {
+      points = `${Math.round(get(this.entry, 'earnedPoints', 0))}/${(_e = (_d = this.entry) === null || _d === void 0 ? void 0 : _d.plan) === null || _e === void 0 ? void 0 : _e.availablePoints}`;
+    }
     return (h("div", { class: "course-points" },
       h("yoo-tag", { color: this.isSmall ? 'light' : 'app-color-10', noBackground: this.isSmall },
         h("yoo-icon", { slot: "start", color: this.isSmall ? 'light' : 'app-color', size: this.iconSize, name: "star" }),
-        Math.round(this.entry.earnedPoints),
-        "/",
-        plan.availablePoints)));
+        points)));
   }
-  renderCourseContent(plan, lessonsCount, dueDate) {
-    const isFinished = this.entry.finishedLessonsCount > 0 && lessonsCount > 0 && this.entry.finishedLessonsCount === lessonsCount;
+  renderCourseContent(dueDate) {
     if (this.profileSummary) {
-      return [this.renderProgressBar(lessonsCount), this.renderCourseLessonAndPointInfo(lessonsCount, dueDate, isFinished)];
+      return [this.renderProgressBar(), this.renderCourseLessonAndPointInfo(dueDate)];
     }
     else {
       return [
-        !!this.entry.earnedPoints && !!plan.availablePoints && this.renderEarnedCoursePoints(plan),
-        this.renderCourseLessonAndPointInfo(lessonsCount, dueDate, isFinished),
-        this.renderProgressBar(lessonsCount)
+        this.renderEarnedCoursePoints(),
+        this.renderCourseLessonAndPointInfo(dueDate),
+        this.renderProgressBar()
       ];
     }
   }
@@ -88,8 +99,8 @@ export class YooCardCourseComponent {
       lessonsCount = get(plan, 'lessonsCount', 0);
     }
     return (h("div", { class: { 'content-container': true, 'profile-summary': this.profileSummary } }, this.profileSummary
-      ? [this.renderCourseContent(plan, lessonsCount, dueDate), this.renderCourseTitle(plan)]
-      : [this.renderCourseTitle(plan), this.renderCourseContent(plan, lessonsCount, dueDate)]));
+      ? [this.renderCourseContent(dueDate), this.renderCourseTitle(plan)]
+      : [this.renderCourseTitle(plan), this.renderCourseContent(dueDate)]));
   }
   render() {
     var _a;

package/dist/collection/feature-learn/learning/card-course/row/card-course-row.css

@@ -312,6 +312,22 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   align-items: center;
   justify-content: space-between;
 }
+:host .outer-container .content-container .inner-container .info-row .left-part {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+}
+:host .outer-container .content-container .inner-container .info-row .left-part .type-tag {
+  padding-bottom: var(--spacing-08, 0.5rem);
+}
+:host .outer-container .content-container .inner-container .info-row .left-part .info {
+  display: flex;
+  flex-direction: row;
+}
+:host .outer-container .content-container .inner-container .info-row .left-part .info yoo-tag {
+  padding-right: var(--spacing-08, 0.5rem);
+}
 :host .outer-container .content-container .inner-container .info-row.web {
   gap: var(--spacing-16, 1rem);
 }
@@ -323,10 +339,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .outer-container .content-container .inner-container .info-row div {
   display: flex;
-  gap: inherit;
   align-items: center;
 }
 :host .outer-container .content-container .inner-container .info-row yoo-tag {
+  margin-right: var(--spacing-08, 0.5rem);
   overflow: hidden;
 }
 :host .outer-container .content-container .inner-container .info-row yoo-icon.enabled {
@@ -367,7 +383,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --max-lines: 1;
 }
 :host(.web:not(.autocomplete-selection-mode):not(.selected-content):not(.calendar)) .outer-container {
-  height: 6rem;
+  height: auto;
 }
 :host(.web:not(.autocomplete-selection-mode):not(.selected-content):not(.calendar)) .outer-container .content-container {
   max-height: 12rem;

package/dist/collection/feature-learn/learning/card-course/row/card-course-row.js

@@ -1,4 +1,4 @@
-import { dateFormat, getPlanDueDate, getPlanStartDate, isDateAfter, isOffline, isPlanRatingEnabled, isWeb, pipes, showRatingDialog, translate, translateMulti } from '@shared/utils';
+import { dateFormat, getCourseFinishedItemsCount, getCourseProgress, getPlanDueDate, getPlanStartDate, getPlanTotalItemsCount, getPlanTypeTagProps, isDateAfter, isOffline, isPlanRatingEnabled, isWeb, pipes, showRatingDialog, translate, translateMulti } from '@shared/utils';
 import { Component, Element, h, Host, Prop, State } from '@stencil/core';
 import { get, isObject } from 'lodash-es';
 import { getFromOfflineStorage } from '../../../../utils/cache/localForage';
@@ -10,7 +10,9 @@ export class YooCardCourseRowComponent {
   async prepareData() {
     this.actualPlan = this.entry['plan'] || this.entry;
     this.isLocked = this.entry['isLocked'] === true && !this.entry['forceUnlocked'];
-    this.finishedLessonsCount = this.entry['finishedLessonsCount'] || 0;
+    this.forceShowProgressBar = this.host.classList.contains('force-show-progress-bar');
+    this.forceHideProgressBar = this.host.classList.contains('force-hide-progress-bar');
+    this.forceHideProgressTags = this.host.classList.contains('force-hide-progress-tags');
     this.isFinished = this.calcIsFinished();
     this.hasRating = this.calcHasRating();
     const backgroundImage = get(this.actualPlan, 'background._downloadURL', get(this.actualPlan, 'background', get(this.actualPlan, 'imageData', null)));
@@ -50,9 +52,9 @@ export class YooCardCourseRowComponent {
     return pipes.timeAgo.transform(date);
   }
   calcIsFinished() {
-    const lessonsCount = get(this.actualPlan, 'missiondescriptionsRef', []).length;
-    const finishedCount = get(this.entry, 'finishedLessonsCount', 0);
-    return lessonsCount > 0 && finishedCount > 0 && lessonsCount === finishedCount;
+    const totalCount = getPlanTotalItemsCount(this.actualPlan);
+    const finishedCount = getCourseFinishedItemsCount(this.entry);
+    return totalCount > 0 && finishedCount > 0 && totalCount === finishedCount;
   }
   calcHasRating() {
     var _a;
@@ -75,11 +77,6 @@ export class YooCardCourseRowComponent {
       h("yoo-icon", { slot: "start", name: "calendar", color: iconColor, size: "small" }),
       this.dateToDisplay));
   }
-  getLessonsCountText(lessonsCount) {
-    const pluralizedLabel = translate(lessonsCount > 1 ? 'LESSONS' : 'LESSON');
-    const denominator = this.entry && this.entry['finishedLessonsCount'] && !this.isFinished ? this.finishedLessonsCount + '/' : '';
-    return denominator + lessonsCount + ' ' + pluralizedLabel;
-  }
   renderBookmarkIcon() {
     if (this.host.classList.contains('show-bookmark') && this.entry.isSelfAssigned) {
       return h("yoo-icon", { name: "bookmark", class: "enabled", color: "app-color", size: "medium" });
@@ -91,33 +88,37 @@ export class YooCardCourseRowComponent {
     }
   }
   renderCourseContent() {
-    var _a, _b;
-    let points;
-    if (this.actualPlan.availablePoints > 0 && !this.isSelectedContent()) {
-      points = (_b = (_a = this.actualPlan) === null || _a === void 0 ? void 0 : _a.availablePoints) === null || _b === void 0 ? void 0 : _b.toString();
-      if (this.entry['finishedLessonsCount'] && this.entry['finishedLessonsCount'] >= 1) {
-        points = `${Math.round(get(this.entry, 'earnedPoints', 0))}/${this.actualPlan.availablePoints}`;
-      }
-    }
-    return isWeb(this.host) ? this.renderCourseContentWeb(points) : this.renderCourseContentMobile(points);
+    return isWeb(this.host) ? this.renderCourseContentWeb() : this.renderCourseContentMobile();
   }
   renderProgress() {
-    const plan = get(this.entry, 'plan', {});
-    const lessonsCount = get(plan, 'missiondescriptionsRef', []).length;
-    const { finishedLessonsCount } = this.entry || {};
-    const progress = finishedLessonsCount ? (finishedLessonsCount / lessonsCount) * 100 : 0;
-    return !!progress && progress <= 100 && h("yoo-progress-bar", { value: progress, colorsRepartition: {
+    if (this.forceHideProgressBar) {
+      return;
+    }
+    const progress = getCourseProgress(this.entry);
+    return (!!progress && progress < 100 || this.forceShowProgressBar) && h("yoo-progress-bar", { value: progress, colorsRepartition: {
         colors: ['var(--danger)', 'var(--warning)', 'var(--success)'],
         thresholds: [.39, .79, 1]
       } });
   }
-  renderLessonsText() {
-    const lessonsCount = get(this.actualPlan, 'missiondescriptionsRef', []).length;
-    return lessonsCount > 0 ? (h("yoo-tag", { color: "dark", noBackground: true, size: "small" },
+  renderItemsCountTag() {
+    const key = `SMARTCOUNT${this.entry.type === 'learningpath' ? 'COURSES' : 'LESSONS'}`;
+    const finishedItemsCount = getCourseFinishedItemsCount(this.entry);
+    const finishedItemsText = !this.isFinished && finishedItemsCount > 0 ? finishedItemsCount + '/' : '';
+    const total = getPlanTotalItemsCount(this.actualPlan);
+    return total > 0 ? (h("yoo-tag", { color: "dark", noBackground: true, size: "small" },
       h("yoo-icon", { slot: "start", name: "lesson", color: "stable", size: "small" }),
-      this.getLessonsCountText(lessonsCount))) : null;
+      translateMulti(key, { numerator: finishedItemsText, smart_count: total }))) : null;
   }
-  renderPoints(points) {
+  renderPoints() {
+    var _a, _b, _c;
+    if (!((_a = this.actualPlan) === null || _a === void 0 ? void 0 : _a.availablePoints)) {
+      return;
+    }
+    let points = (_c = (_b = this.actualPlan) === null || _b === void 0 ? void 0 : _b.availablePoints) === null || _c === void 0 ? void 0 : _c.toString();
+    const finishedItemsCount = getCourseFinishedItemsCount(this.entry);
+    if (finishedItemsCount > 0) {
+      points = `${Math.round(get(this.entry, 'earnedPoints', 0))}/${this.actualPlan.availablePoints}`;
+    }
     return (h("yoo-tag", { color: "dark", noBackground: true, size: "small" },
       h("yoo-icon", { slot: "start", name: "star", color: "app-color", size: "small" }),
       points));
@@ -147,14 +148,19 @@ export class YooCardCourseRowComponent {
     }
     return null;
   }
-  renderCourseContentMobile(points) {
+  renderCourseContentMobile() {
     var _a;
     return (h("div", { class: "content-container" },
       h("div", { class: "inner-container" },
         !this.isSelectedContent() && (h("div", { class: "info-row" },
-          h("div", null,
-            points && this.renderPoints(points),
-            !this.host.classList.contains('selected-content') && this.renderLessonsText()),
+          h("div", { class: "left-part" },
+            h("div", { class: "type-tag" },
+              this.renderTag({ color: 'app-color', icon: 'courses', content: 'COURSE' }),
+              this.isFinished && !this.forceHideProgressTags && this.renderTag({ color: 'success', icon: 'tick', content: 'YOOBICCOMPLETED' }),
+              !this.isFinished && !this.forceHideProgressTags && getCourseFinishedItemsCount(this.entry) > 0 && this.renderTag({ color: 'info', icon: 'ongoing', content: 'ONGOING' })),
+            h("div", { class: "info" },
+              this.renderPoints(),
+              !this.host.classList.contains('selected-content') && this.renderItemsCountTag())),
           h("div", null,
             !this.hideLessonsCount && this.renderBookmarkIcon(),
             this.renderSyncedOffline()))),
@@ -164,16 +170,25 @@ export class YooCardCourseRowComponent {
         this.renderProgress(),
         this.renderRating())));
   }
-  renderCourseContentWeb(points) {
+  renderTag(tagParams) {
+    const { color, icon, content } = tagParams;
+    const iconElement = `<yoo-icon slot="start" name="${icon}" color="${color}" size="small"></yoo-icon>`;
+    return (h("yoo-tag", { color: color, class: "inverse-color", innerHTML: `${iconElement} ${translate(content)}` }));
+  }
+  renderCourseContentWeb() {
     var _a;
     return (h("div", { class: "content-container web-content-container" },
       h("div", { class: "inner-container" },
         !this.isSelectedContent() && (h("div", { class: "info-row web" },
-          h("div", null,
-            points && this.renderPoints(points),
-            !this.host.classList.contains('selected-content') && this.renderLessonsText(),
-            !this.isFinished && this.dateToDisplay && this.renderDate(),
-            this.actualPlan.isActive === false && (h("yoo-tag", { size: "small", color: "stable-light" }, translate('INACTIVE')))),
+          h("div", { class: "left-part" },
+            h("div", { class: "type-tag" }, this.renderTag(getPlanTypeTagProps({ type: this.actualPlan.type }))),
+            h("div", { class: "info" },
+              this.renderPoints(),
+              !this.host.classList.contains('selected-content') && this.renderItemsCountTag(),
+              !this.isFinished && this.dateToDisplay && this.renderDate(),
+              this.actualPlan.isActive === false && (h("yoo-tag", { size: "small", color: "stable-light" }, translate('INACTIVE'))),
+              this.isFinished && !this.forceHideProgressTags && this.renderTag({ color: 'success', icon: 'tick', content: 'YOOBICCOMPLETED' }),
+              !this.isFinished && !this.forceHideProgressTags && getCourseFinishedItemsCount(this.entry) > 0 && this.renderTag({ color: 'info', icon: 'ongoing', content: 'ONGOING' }))),
           h("div", null,
             !this.hideLessonsCount && this.renderBookmarkIcon(),
             this.renderSyncedOffline()))),

package/dist/collection/feature-learn/learning/card-menu/card-menu.css

@@ -208,11 +208,16 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --icon-margin-left: 0;
   --icon-border-radius: 0;
   --icon-padding: 0;
+  --icon-end-display: initial;
   --arrow-margin: 0 0 0 var(--spacing-08, 0.5rem);
   --container-box-shadow: 0;
   --container-padding-bottom: 0.4rem;
   --container-border-radius: 0;
   --title-padding: 0;
+  --title-font-weight: normal;
+  --title-font-size: cssvar(font-size-14);
+  --title-color: cssvar(dark);
+  --background-color: transparent;
 }
 :host .outer-container {
   display: flex;
@@ -221,6 +226,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding-bottom: var(--container-padding-bottom);
   overflow: hidden;
   white-space: nowrap;
+  background-color: var(--background-color);
   border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
   border-radius: var(--container-border-radius);
   box-shadow: var(--container-box-shadow);
@@ -231,7 +237,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   text-overflow: ellipsis;
   flex: 1;
   padding: var(--title-padding);
-  color: var(--dark, #000000);
+  color: var(--title-color);
+  font-weight: var(--title-font-weight);
+  font-size: var(--title-font-size);
 }
 :host .outer-container yoo-icon.start {
   margin-right: var(--spacing-08, 0.5rem);
@@ -242,6 +250,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   fill: var(--icon-color);
 }
 :host .outer-container yoo-icon.end {
+  display: var(--icon-end-display);
   margin: var(--arrow-margin);
 }
 :host .outer-container .counter {

package/dist/collection/feature-learn/learning/card-menu/card-menu.js

@@ -12,11 +12,12 @@ export class YooCardMenuComponent {
     }
   }
   render() {
+    var _a, _b, _c, _d;
     return (h(Host, { class: getAppContext(this.el) },
-      h("div", { class: "outer-container" },
-        h("yoo-icon", { class: "start", name: this.renderIcon(), size: this.sizeLeftIcon || 'medium' }),
-        h("div", { class: "title" }, translateMulti(this.entry.title)),
-        this.entry.count && h("div", { class: "counter" }, this.entry.count),
+      h("div", { class: "outer-container", style: { 'background-color': (_a = this.entry) === null || _a === void 0 ? void 0 : _a.backgroundCustomColor } },
+        h("yoo-icon", { class: "start", name: this.renderIcon(), size: this.sizeLeftIcon || 'medium', customColor: (_b = this.entry) === null || _b === void 0 ? void 0 : _b.iconCustomColor, style: { 'background-color': ((_c = this.entry) === null || _c === void 0 ? void 0 : _c.iconBackgroundColor) || 'transparent' } }),
+        h("div", { class: "title", style: { 'color': (_d = this.entry) === null || _d === void 0 ? void 0 : _d.titleCustomColor } }, translateMulti(this.entry.title)),
+        this.entry.count !== null && h("div", { class: "counter" }, this.entry.count),
         h("yoo-icon", { class: "end", size: this.sizeLeftIcon || 'medium', name: this.typeRightIcon || 'right', color: "stable" }))));
   }
   static get is() { return "yoo-card-menu"; }

package/dist/collection/feature-learn/learning/lesson-heading/lesson-heading.js

@@ -11,8 +11,8 @@ export class YooLessonHeadingComponent {
     let tagText = '';
     const earnedPoints = Math.round(get(this.lesson, 'points', 0));
     const availablePoints = get(this.lesson, 'description.points', 0);
-    const pointsEarned = earnedPoints !== 0 ? `${earnedPoints}/` : '';
-    const pointsAvailable = availablePoints > 0 ? availablePoints.toString() : '';
+    const pointsEarned = earnedPoints !== 0 ? `${earnedPoints}` : '';
+    const pointsAvailable = availablePoints > 0 ? `/${availablePoints.toString()}` : '';
     tagText = pointsEarned + pointsAvailable;
     return !!(tagText === null || tagText === void 0 ? void 0 : tagText.length) && (h("yoo-tag", { color: "app-color", class: "inverse-color" },
       h("yoo-icon", { slot: "start", size: "small", name: "star", color: "app-color" }),

package/dist/collection/feature-learn/learning/lesson-question-result/lesson-question-result.js

@@ -219,7 +219,7 @@ export class YooLessonQuestionResultComponent {
     }
     else if (!isContentOnly(this.lessonType)) {
       items = (_b = this.fields) === null || _b === void 0 ? void 0 : _b.map((field, i) => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         return ({
           name: `${translate('QUESTION')} ${i + 1}`,
           description: translateMulti(field.sentence || field.description || field.title),
@@ -231,11 +231,12 @@ export class YooLessonQuestionResultComponent {
               ? ((_d = this.lessonData[field.name]) === null || _d === void 0 ? void 0 : _d.earnedConfidencePoints) + ((_e = this.lessonData[field.name]) === null || _e === void 0 ? void 0 : _e.earnedQuestionPoints)
               : ((_f = this.lessonData[field.name]) === null || _f === void 0 ? void 0 : _f.fieldValidity)
                 ? Math.round(this.points)
-                : 0
+                : 0,
+          isCorrect: (_g = this.lessonData[field.name]) === null || _g === void 0 ? void 0 : _g.fieldValidity
         });
       });
     }
-    return h("yoo-points-recap", { heading: translate('TOTALPOINTSEARNED'), totalPoints: Math.round(this.earnedPoints), items: items, showItemIcon: showItemIcon });
+    return h("yoo-points-recap", { heading: translate('TOTALPOINTSEARNED'), totalPoints: Math.round(this.earnedPoints) || 0, items: items, showItemIcon: showItemIcon, forceTotalPoints: true });
   }
   renderProgressBarLessonRecap() {
     var _a;
@@ -278,7 +279,7 @@ export class YooLessonQuestionResultComponent {
     ];
   }
   renderFooter() {
-    return h("yoo-form-footer", { class: "relative", buttons: this.footerActions });
+    return h("yoo-form-footer", { class: "relative", buttons: this.footerActions, forceMobile: this.forceMobile });
   }
   render() {
     return (h(Host, { class: this.resultType },
@@ -775,6 +776,23 @@ export class YooLessonQuestionResultComponent {
       },
       "attribute": "last-field",
       "reflect": false
+    },
+    "forceMobile": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "force-mobile",
+      "reflect": false
     }
   }; }
   static get events() { return [{

package/dist/collection/feature-learn/learning/section-list/section-list.js

@@ -400,7 +400,7 @@ export class YooSectionListComponent {
       h("div", { class: "section-title" },
         this.icon && h("div", { class: "icon" },
           h("yoo-icon", { name: this.icon, size: "medium", color: "text-color" })),
-        h("div", { class: "title" }, section.translatedTitle || translateMulti(section.title)),
+        h("div", { class: "title" }, getCurrentLanguage() === this.baseLanguage ? section.translatedTitle : translateMulti(section.title)),
         h("div", { class: "item-count" }, `${items.length} ${translate((_a = this.countSuffix) === null || _a === void 0 ? void 0 : _a.toUpperCase())}`),
         !this.disableSortable && !this.isReadonly && section.isSortable !== false && h("div", { class: "draggable" },
           h("yoo-icon", { name: "draggable", color: "text-color", size: "medium" })),
@@ -428,8 +428,8 @@ export class YooSectionListComponent {
   }
   renderSectionItem(item) {
     let checkboxRef;
-    const title = getTranslatedAttribute(this.translations, item.title, this.baseLanguage || getCurrentLanguage(), 'title').value || translateMulti(item.title);
-    const text = getTranslatedAttribute(this.translations, item.text, this.baseLanguage || getCurrentLanguage(), 'text').value || translateMulti(item.text);
+    const title = getTranslatedAttribute(this.translations, item.title, getCurrentLanguage() || this.baseLanguage, 'title').value || translateMulti(item.title);
+    const text = getTranslatedAttribute(this.translations, item.text, getCurrentLanguage() || this.baseLanguage, 'text').value || translateMulti(item.text);
     return (h("div", { class: "item selectable", onMouseEnter: this.getItemMouseEnterAction(), onMouseLeave: this.getItemMouseLeaveAction() },
       h("div", { class: "checkbox", ref: (el) => checkboxRef = el }, !this.disableBatchActions && this.isOwner && item.isSelectable !== false && h("yoo-form-checkbox", { onInputChanged: (ev) => this.onCheckboxClicked(ev, item, checkboxRef) })),
       h("div", { class: "item-container", onClick: () => this.itemClicked.emit(item) },

package/dist/collection/feature-operate/campaign/detail-bar/detail-bar.css

@@ -219,6 +219,12 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 .section-container .section-title yoo-tag {
   margin-left: var(--spacing-08, 0.5rem);
 }
+.section-container .action-container {
+  display: flex;
+}
+.section-container .action-container yoo-button:first-child {
+  margin-right: var(--spacing-08, 0.5rem);
+}
 .section-container .collapsible-container {
   display: flex;
 }

package/dist/collection/feature-operate/campaign/detail-bar/detail-bar.js

@@ -17,6 +17,9 @@ export class YooDetailBarComponent {
   onPreview() {
     this.previewed.emit(true);
   }
+  onSharePreview() {
+    this.sharedPreview.emit(true);
+  }
   onTranslate() {
     this.translated.emit(true);
   }
@@ -144,9 +147,13 @@ export class YooDetailBarComponent {
           this.getFieldsLength(),
           " ",
           translate('YOOBICFIELDS')))),
-      !this.isCourse && (h("yoo-button", { color: "light", size: "small", onClick: () => this.onPreview() },
-        translate('OPENPREVIEW'),
-        h("yoo-icon", { slot: "end", name: "view", size: "small" })))));
+      h("div", { class: "action-container" },
+        h("yoo-button", { color: "light", size: "small", onClick: () => this.onPreview() },
+          h("yoo-icon", { slot: "start", name: "play", size: "small" }),
+          translate('PREVIEW')),
+        this.isCourse && (h("yoo-button", { color: "light", size: "small", onClick: () => this.onSharePreview() },
+          h("yoo-icon", { slot: "start", name: "share", size: "small" }),
+          translate('YOOBICSHAREPREVIEW'))))));
   }
   renderInfoContainerCampaign() {
     var _a;
@@ -181,10 +188,10 @@ export class YooDetailBarComponent {
           translate('STATUS'),
           ":"),
         h("yoo-tag", { color: "text-color-10" }, this.status))),
-      this.renderContent('ACTIVE', isBoolean(this.isActive) ? (this.isActive ? 'YES' : 'NO') : '-'),
+      this.renderContent('ACTIVE', isBoolean(this.isActive) ? (this.isActive ? 'YOOBICYES' : 'YOOBICNO') : '-'),
       this.period && this.period !== '-' && this.renderContent('PERIOD', this.period),
-      this.isFeatured !== null && this.renderContent('FEATUREDCOURSE', this.isFeatured ? 'YES' : 'NO'),
-      this.progressiveLessons != null && this.renderContent('PROGRESSIVELESSONS', this.progressiveLessons ? 'Yes' : 'No'),
+      this.isFeatured !== null && this.renderContent('FEATUREDCOURSE', this.isFeatured ? 'YOOBICYES' : 'YOOBICNO'),
+      this.progressiveLessons != null && this.renderContent('PROGRESSIVELESSONS', this.progressiveLessons ? 'YOOBICYES' : 'YOOBICNO'),
       this.category && this.renderContent('CATEGORY', this.category),
       havePoints &&
         this.renderContent('POINTS', h("yoo-tag", { color: "app-color" },
@@ -790,7 +797,22 @@ export class YooDetailBarComponent {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Operations Mission open preview"
+        "text": "Open preview"
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }, {
+      "method": "sharedPreview",
+      "name": "sharedPreview",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Share preview"
       },
       "complexType": {
         "original": "boolean",

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

@@ -225,6 +225,25 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --max-lines: 4;
   --line-height: initial;
 }
+:host .outer-container .progress {
+  display: flex;
+  justify-content: space-between;
+}
+:host .outer-container .progress .quick-task-progress {
+  display: flex;
+  align-items: center;
+  max-width: 12rem;
+}
+:host .outer-container .progress .quick-task-progress yoo-progress-bar {
+  --svg-width: 1rem;
+  --trail-bar-color: var(--app-color-20, rgba(90, 48, 244, 0.2));
+}
+:host .outer-container .progress .quick-task-progress yoo-truncate {
+  margin: 0 var(--spacing-08, 0.5rem);
+}
+:host .outer-container .progress .quick-task-progress yoo-truncate.app-color {
+  color: var(--app-color, #5a30f4);
+}
 :host .outer-container .tags yoo-tag {
   margin-right: var(--spacing-08, 0.5rem);
   margin-bottom: var(--spacing-08, 0.5rem);
@@ -233,9 +252,20 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-bottom: var(--spacing-08, 0.5rem);
   border-bottom: 1px solid var(--announcement-color);
 }
-:host .outer-container .progress {
-  display: flex;
-  justify-content: space-between;
+
+:host(.campaign-photos-mission-details) .outer-container {
+  color: #fff;
+  background-color: transparent;
+}
+:host(.campaign-photos-mission-details) .outer-container .progress .quick-task-progress yoo-progress-bar {
+  --trail-bar-color: var(--light-40, rgba(255, 255, 255, 0.4));
+  --progress-bar-color: var(--light, #ffffff);
+}
+:host(.campaign-photos-mission-details) .outer-container .progress .quick-task-progress yoo-truncate {
+  color: var(--light, #ffffff);
+}
+:host(.campaign-photos-mission-details) .outer-container .progress-separator {
+  border-bottom: var(--border-width-01, 0.0625rem) solid var(--announcement-background-color);
 }
 
 :host(.feed) {