@yoobic/yobi 8.5.0-41 → 8.5.0-43

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

@@ -1,12 +1,12 @@
 import { dateFormat, fromToday, getCssColor, getMissionPublicationDate, isDateAfter, isPresent, isToday, isWeb, translate, translateMulti } from '@shared/utils';
-import { h, Host } from '@stencil/core';
+import { forceUpdate, h, Host } from '@stencil/core';
 import { getMissionDueDate, getMissionProgress } from '../../../feature-operate/mission/helpers/missions-helpers';
 import { execHandlerAndStopEvent } from '../../../utils/helpers/common-helpers';
 import { MissionLockedBanner } from '../mission-locked-banner/mission-locked-banner';
 export class YooAnnouncementHeadingComponent {
   getAnnouncement() {
     var _a;
-    return (this.isPreview ? this.announcement : (_a = this.announcement) === null || _a === void 0 ? void 0 : _a.description);
+    return (this.isPreview ? this.mission : (_a = this.mission) === null || _a === void 0 ? void 0 : _a.description);
   }
   get backgroundColor() {
     var _a;
@@ -44,35 +44,38 @@ export class YooAnnouncementHeadingComponent {
       allowSwipeDownDismiss: !this.isLayoutFeed
     };
   }
+  async updateHeader() {
+    forceUpdate(this);
+  }
   renderTag(text, icon, customColor, textCustomColor, customColorOpacity) {
     return h("yoo-tag", { customColor: customColor || this.color, textCustomColor: textCustomColor, customColorOpacity: customColorOpacity }, h("yoo-icon", { class: { custom: true }, name: icon, size: "small", slot: "start" }), text);
   }
   renderPublicationDate() {
-    const date = getMissionPublicationDate(this.announcement);
+    const date = getMissionPublicationDate(this.mission);
     let dateText = isToday(date) ? translate('YOOBICTODAY') : fromToday(date);
     dateText = [translate('YOOBICYESTERDAY'), translate('YOOBICTOMORROW')].includes(dateText) ? dateText : dateText;
     const timeText = translate('SCHEDULEDATTIME', { time: dateFormat(date, 'LT') });
     return this.renderTag(`${dateText} ${timeText}`, 'calendar', this.isLayoutFeed && this.hasPhotos ? getCssColor('light') : null);
   }
   renderPriority() {
-    if (isPresent(this.announcement.priority)) {
+    if (isPresent(this.mission.priority)) {
       const PRIORITY_TEXTS = ['CAMPAIGNPRIORITY1', 'CAMPAIGNPRIORITY2', 'CAMPAIGNPRIORITY3', 'CAMPAIGNPRIORITY4'];
-      const priority = PRIORITY_TEXTS[this.announcement.priority - 1];
+      const priority = PRIORITY_TEXTS[this.mission.priority - 1];
       return this.renderTag(translate(priority), 'flag', this.isLayoutFeed && this.hasPhotos ? getCssColor('light') : null);
     }
   }
   renderCategory() {
     var _a, _b;
-    if (isPresent((_a = this.announcement.category) === null || _a === void 0 ? void 0 : _a.title)) {
-      return this.renderTag(translate((_b = this.announcement.category) === null || _b === void 0 ? void 0 : _b.title), 'tag', this.isLayoutFeed && this.hasPhotos ? getCssColor('light') : null);
+    if (isPresent((_a = this.mission.category) === null || _a === void 0 ? void 0 : _a.title)) {
+      return this.renderTag(translate((_b = this.mission.category) === null || _b === void 0 ? void 0 : _b.title), 'tag', this.isLayoutFeed && this.hasPhotos ? getCssColor('light') : null);
     }
   }
   renderAnnouncementProgress() {
     var _a, _b;
-    const announcementProgress = getMissionProgress(this.announcement);
-    const renderProgress = ((_b = (_a = this.announcement.todo) === null || _a === void 0 ? void 0 : _a.values) === null || _b === void 0 ? void 0 : _b.length) > 0;
+    const announcementProgress = getMissionProgress(this.mission);
+    const renderProgress = ((_b = (_a = this.mission.todo) === null || _a === void 0 ? void 0 : _a.values) === null || _b === void 0 ? void 0 : _b.length) > 0;
     if (!this.isLayoutFeed && (announcementProgress === null || announcementProgress === void 0 ? void 0 : announcementProgress.value) >= 0 && renderProgress) {
-      return h("div", { class: "progress" }, h("yoo-progress-bar", { class: "app-color", shape: "circle", hideProgressValue: true, value: announcementProgress.value, metric: announcementProgress.unit, maxValue: announcementProgress.max }), h("yoo-truncate", { class: "app-color", style: { cssText: '--max-lines: 1' } }, h("span", null, translate('ACTIONSCOMPLETED', { smart_count: announcementProgress.value, total: announcementProgress.max }))));
+      return h("div", { class: "progress" }, h("yoo-progress-bar", { class: "app-color", shape: "circle", hideProgressValue: true, value: announcementProgress.value, metric: announcementProgress.unit, maxValue: announcementProgress.max }), h("yoo-truncate", { style: { cssText: '--max-lines: 1' } }, h("span", null, translate('ACTIONSCOMPLETED', { smart_count: announcementProgress.value, total: announcementProgress.max }))));
     }
   }
   renderDueDate(dueDate) {
@@ -83,15 +86,15 @@ export class YooAnnouncementHeadingComponent {
     return this.renderTag(title, 'calendar-date', color);
   }
   renderContentDetails() {
-    const dueDate = getMissionDueDate(this.announcement);
+    const dueDate = getMissionDueDate(this.mission);
     return [
-      h("div", { class: "title" }, h("yoo-truncate", null, translateMulti(this.announcement.title))),
+      h("div", { class: "title" }, h("yoo-truncate", null, translateMulti(this.mission.title))),
       this.renderAnnouncementProgress(),
       h("div", { class: "tags" }, this.isLayoutFeed && dueDate && this.renderDueDate(dueDate), !this.isLayoutFeed && this.renderPublicationDate(), this.renderPriority(), this.renderCategory())
     ];
   }
   renderContent() {
-    const dueDate = getMissionDueDate(this.announcement);
+    const dueDate = getMissionDueDate(this.mission);
     return (h("div", { class: "outer-container" }, this.isLayoutFeed && this.renderTag(translate(this.isFeed ? 'YOOBICMESSAGES' : 'ANNOUNCEMENT'), 'request', this.color, getCssColor('light'), 1), this.isLayoutFeed && h("div", { class: "details" }, this.renderContentDetails()), !this.isLayoutFeed && this.renderContentDetails(), !this.isLayoutFeed && dueDate && [
       h("div", { class: "progress-separator" }),
       h("div", { class: "progress" }, this.renderDueDate(dueDate))
@@ -100,7 +103,7 @@ export class YooAnnouncementHeadingComponent {
   renderBaseLayout() {
     return [
       this.hasPhotos && (!isWeb() || this.isPreview) && h("yoo-form-carousel", { maxHeight: 270, paginationType: "bullets", ...this.carouselAttributes }),
-      !this.isPreview && h(MissionLockedBanner, { mission: this.announcement }),
+      !this.isPreview && h(MissionLockedBanner, { mission: this.mission }),
       this.renderContent()
     ];
   }
@@ -114,7 +117,7 @@ export class YooAnnouncementHeadingComponent {
     ];
   }
   render() {
-    return this.announcement && h(Host, { class: { feed: this.isLayoutFeed }, style: {
+    return this.mission && h(Host, { class: { feed: this.isLayoutFeed }, style: {
         '--announcement-background-color': this.backgroundColor,
         '--announcement-color': this.color
       } }, this.isLayoutFeed ? this.renderFeedLayout() : this.renderBaseLayout());
@@ -133,7 +136,7 @@ export class YooAnnouncementHeadingComponent {
   }
   static get properties() {
     return {
-      "announcement": {
+      "mission": {
         "type": "unknown",
         "mutable": false,
         "complexType": {
@@ -204,4 +207,24 @@ export class YooAnnouncementHeadingComponent {
       }
     };
   }
+  static get methods() {
+    return {
+      "updateHeader": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
 }

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

@@ -378,11 +378,17 @@ svg:not(:root) {
   display: flex;
   grid-gap: var(--spacing-04, 0.25rem);
   align-items: flex-start;
-  width: 100%;
+  overflow: hidden;
 }
 :host .menu .menu-item .menu-right .mission-user .user .label {
   display: flex;
   flex-direction: column;
+  min-width: 0;
+}
+:host .menu .menu-item .menu-right .mission-user .user .label span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 :host .menu .menu-item .menu-right .mission-user .actions {
   display: flex;
@@ -415,15 +421,6 @@ svg:not(:root) {
 :host .menu.pdf .menu-item .menu-right .menu-content .text {
   flex: initial;
 }
-:host .mission-detail.padding {
-  padding: 0 var(--spacing-16, 1rem) var(--spacing-16, 1rem);
-}
-:host .mission-detail.margin {
-  margin: var(--spacing-16, 1rem);
-  background: var(--light, #ffffff);
-  border-radius: var(--spacing-08, 0.5rem);
-  box-shadow: var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));
-}
 
 /*
  * Imported as is from the old mission-detail component
@@ -485,11 +482,35 @@ svg:not(:root) {
   flex-direction: column;
   height: 100%;
 }
+:host(.mission-detail-deprecated) .mission-detail .bg-stable-ultralight {
+  background: var(--stable-ultralight, #fafafa);
+}
+:host(.mission-detail-deprecated) .mission-detail .bg-light {
+  background: var(--light, #ffffff);
+}
 :host(.mission-detail-deprecated) .mission-detail .scroll-spacer {
   height: calc(var(--safe-area-inset-bottom) + 5.75rem);
 }
+:host(.mission-detail-deprecated) .mission-detail .scroll-spacer.web {
+  height: calc(var(--safe-area-inset-bottom) + 3.5625rem);
+}
+:host(.mission-detail-deprecated) .mission-detail yoo-mission-heading,
+:host(.mission-detail-deprecated) .mission-detail yoo-announcement-heading {
+  display: block;
+}
+:host(.mission-detail-deprecated) .mission-detail yoo-mission-heading {
+  margin: 0 var(--spacing-16, 1rem);
+}
+:host(.mission-detail-deprecated) .mission-detail yoo-mission-heading.web {
+  margin: 0 var(--spacing-24, 1.5rem);
+}
 :host(.mission-detail-deprecated) .mission-detail .mission-content {
-  padding: 0 var(--spacing-16, 1rem) var(--spacing-16, 1rem);
+  padding: var(--spacing-16, 1rem);
+}
+:host(.mission-detail-deprecated) .mission-detail .mission-content.web {
+  margin: var(--spacing-24, 1.5rem);
+  border-radius: var(--border-radius-08, 0.5rem);
+  box-shadow: var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));
 }
 :host(.mission-detail-deprecated).web {
   background: var(--light, #ffffff);

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

@@ -1,6 +1,6 @@
-import { dateFormat, fromToday, getAsyncExtraData, getCssColor, getMissionPublicationDate, getSession, getTodoCampaignPhotos, isDateAfter, isDateSame, isIonic, isPresent, isToday, isWeb, pipes, translate, translateMulti } from '@shared/utils';
+import { dateFormat, fromToday, getAsyncExtraData, getCssColor, getMissionPublicationDate, getSession, isDateAfter, isDateSame, isIonic, isPresent, isToday, isWeb, pipes, translate, translateMulti } from '@shared/utils';
 import { h, Host } from '@stencil/core';
-import { cloneDeep, compact } from 'lodash-es';
+import { cloneDeep, compact, uniq } from 'lodash-es';
 import { getMissionAddress, getMissionDueDate, getMissionPriority, getMissionTags, getMissionUniqueKey, mapMissionToCardInboxEntry } from '../../../feature-operate/mission/helpers/missions-helpers';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 const Menu = ({ icon, text, extraClass, callback }, children, utils) => {
@@ -11,8 +11,9 @@ export class YooMissionDetailsComponent {
     this.animated = true;
     this.instant = false;
   }
-  get campaignPhotos() {
-    return getTodoCampaignPhotos(this.mission);
+  get isTodoMission() {
+    var _a;
+    return ((_a = this.mission) === null || _a === void 0 ? void 0 : _a.type) === 'todo';
   }
   get showInformation() {
     var _a, _b;
@@ -35,8 +36,7 @@ export class YooMissionDetailsComponent {
     return ((_a = session === null || session === void 0 ? void 0 : session.user) === null || _a === void 0 ? void 0 : _a.locationRef) && session.user.locationRef === this.mission.locationRef;
   }
   loadParentMissionData() {
-    var _a;
-    if (((_a = this.mission) === null || _a === void 0 ? void 0 : _a.type) === 'todo' && this.mission.originalMissionId) {
+    if (this.isTodoMission && this.mission.originalMissionId) {
       return getAsyncExtraData({ type: 'get-by-id', params: { collectionName: 'missions', id: this.mission.originalMissionId } })
         .then((mission) => {
         if (mission._id === this.mission.originalMissionId) {
@@ -54,45 +54,54 @@ export class YooMissionDetailsComponent {
   getFooterButtons() {
     var _a, _b;
     const buttons = [];
+    const lastIndex = ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) - 1;
     const size = (isWeb(this.host) ? 'medium' : 'large');
     const buttonsConfig = {
       assign: {
         text: translate(this.mission.ownerRef ? 'REASSIGN' : 'ASSIGN'),
-        size,
         handler: (ev) => this.onAssign(ev)
       },
       continue: {
         text: translate('CONTINUE'),
-        size,
-        cssClass: 'continue',
         handler: (ev) => this.onBook('continue', ev)
       },
       preview: {
         text: translate('PREVIEW'),
-        size,
         handler: (ev) => this.onPreview(ev)
       },
+      read: {
+        text: translate('MARKASREAD'),
+        handler: (ev) => this.onFinish(ev)
+      },
       start: {
         text: translate('START'),
-        size,
         handler: (ev) => this.onBook('start', ev)
       },
+      submit: {
+        text: translate('SUBMIT'),
+        handler: (ev) => this.onFinish(ev)
+      },
       unbook: {
         text: translate('UNBOOK'),
-        size,
         color: 'light',
-        cssClass: 'unbook',
         handler: (ev) => this.onBook('unbook', ev)
       }
     };
-    const lastIndex = ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) - 1;
     (_b = this.actions) === null || _b === void 0 ? void 0 : _b.forEach((item, index) => {
       const config = buttonsConfig[item];
       if (config) {
+        let color = 'light';
+        if (this.disabled) {
+          color = 'stable-light';
+        }
+        else if (index === lastIndex) {
+          color = 'app-color';
+        }
         buttons.push({
-          ...buttonsConfig[item],
-          disabled: this.disabled,
-          color: (index === lastIndex) ? 'app-color' : 'light'
+          animated: !this.disabled,
+          color,
+          size,
+          ...config
         });
       }
     });
@@ -101,6 +110,10 @@ export class YooMissionDetailsComponent {
   onMissionChanged() {
     this.loadParentMissionData();
   }
+  async updateHeader() {
+    var _a;
+    (_a = this.headerEl) === null || _a === void 0 ? void 0 : _a.updateHeader();
+  }
   componentWillLoad() {
     this.isMobile = isIonic(this.host);
     return this.loadParentMissionData();
@@ -117,9 +130,13 @@ export class YooMissionDetailsComponent {
     ev.stopPropagation();
     this.assign.emit();
   }
+  onFinish(ev) {
+    ev.stopPropagation();
+    this.finish.emit();
+  }
   renderExtraActions(user) {
     var _a;
-    if (((_a = this.extraActions) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+    if (!this.isPdf && ((_a = this.extraActions) === null || _a === void 0 ? void 0 : _a.length)) {
       const actions = this.extraActions.filter((action) => ((action === null || action === void 0 ? void 0 : action.isVisible) ? action.isVisible(user) : true));
       if (actions.length > 0) {
         return (h("div", { class: "actions" }, actions.map((action) => (h("yoo-icon", { name: action === null || action === void 0 ? void 0 : action.icon(), color: action === null || action === void 0 ? void 0 : action.iconColor(), onClick: (ev) => {
@@ -230,13 +247,17 @@ export class YooMissionDetailsComponent {
     }
   }
   renderFinishedBy() {
+    var _a, _b, _c;
     if (this.showInformation && this.mission.ownerDisplayName) {
-      const text = this.mission.type === 'visit' ? 'YOOBICUSER' : 'FINISHEDBY';
+      const hasSeveralAssignee = this.isTodoMission &&
+        uniq(compact((_c = (_b = (_a = this.mission) === null || _a === void 0 ? void 0 : _a.todo) === null || _b === void 0 ? void 0 : _b.values) === null || _c === void 0 ? void 0 : _c.map((task) => { var _a, _b; return (_b = (_a = task === null || task === void 0 ? void 0 : task.user) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b._id; }))).length > 1;
+      const text = hasSeveralAssignee ? 'YOOBICSUBMITTEDBY' : 'FINISHEDBY';
+      const finalText = this.mission.type === 'visit' ? 'YOOBICUSER' : text;
       const finishedDate = translate('ONDATEAT', {
         date: pipes.dateFormat.transform(this.mission.finishedDate, 'L'),
         time: pipes.dateFormat.transform(this.mission.finishedDate, 'LT')
       });
-      return (h(Menu, { icon: "author", text: translate(text), extraClass: "mission-user", callback: () => this.selectUser.emit() }, this.mission.needsRebooking && this.mission.assigneeOwnerDisplayName ? (h("div", { class: "user" }, h("div", { class: "label dark" }, h("span", null, this.mission.assigneeOwnerDisplayName), finishedDate && h("span", { class: "font-medium text-color" }, finishedDate)))) : ([
+      return (h(Menu, { icon: "author", text: translate(finalText), extraClass: "mission-user", callback: () => this.selectUser.emit() }, this.mission.needsRebooking && this.mission.assigneeOwnerDisplayName ? (h("div", { class: "user" }, h("div", { class: "label dark" }, h("span", null, this.mission.assigneeOwnerDisplayName), finishedDate && h("span", { class: "font-medium text-color" }, finishedDate)))) : ([
         h("div", { class: "user" }, this.mission.owner && h("yoo-avatar", { instant: this.instant, size: "small", user: this.mission.owner }), h("div", { class: "label dark" }, h("span", null, this.mission.ownerDisplayName), finishedDate && h("span", { class: "font-medium text-color" }, finishedDate))),
         this.renderExtraActions(this.mission.owner)
       ])));
@@ -319,18 +340,40 @@ export class YooMissionDetailsComponent {
     }
   }
   renderOriginalMission() {
-    if (this.mission.type === 'todo' && this.originalMission) {
+    if (this.isTodoMission && this.originalMission) {
       const entry = mapMissionToCardInboxEntry(this.originalMission, { skipUnread: this.isPdf, skipLock: this.isPdf, skipLocation: true });
       return (h(Menu, { icon: "mission", text: translateMulti('VIEWMISSION'), callback: () => getAsyncExtraData({ type: 'mission-detail', params: { mission: this.originalMission } }) }, h("yoo-card-inbox", { entry: entry })));
     }
   }
+  renderTodos() {
+    var _a, _b;
+    return (((_a = this.missionTodos) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h(Menu, { icon: "action-plan", text: translate('YOOBICTODO') }, (_b = this.missionTodos) === null || _b === void 0 ? void 0 : _b.map((m) => {
+      let elemt;
+      const entry = mapMissionToCardInboxEntry(m, { skipUnread: this.isPdf, skipLock: this.isPdf, forceProgressDisplay: true });
+      delete entry.identities;
+      delete entry.tags;
+      return h("yoo-card-inbox", { entry: entry, ref: (ev) => elemt = ev, onClick: () => {
+          elemt.entry = { ...entry, unread: false };
+          getAsyncExtraData({ type: 'mission-detail', params: { mission: m } });
+        } });
+    }))));
+  }
+  renderAudience() {
+    var _a;
+    return (((_a = this.audienceUsers) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h(Menu, { icon: "group", text: translate('MISSIONAUDIENCE', { smart_count: this.audienceUsers.length }) }, h("yoo-avatars", { layout: "list", showMore: this.audienceUsers.length > 10, maxDisplay: 10, users: this.audienceUsers, size: "small", onClick: () => this.selectAudience.emit() }))));
+  }
   renderFooter(buttons) {
     return !!(buttons === null || buttons === void 0 ? void 0 : buttons.length) && h("yoo-form-footer", { buttons: buttons });
   }
-  renderAnnouncementDetails() {
-    return h(Host, null, h("yoo-announcement-heading", { announcement: this.mission, isPreview: this.isPreview }), h("div", { class: 'mission-detail padding ' + (this.isMobile || this.isPreview ? '' : ' margin web') }, h("div", { class: "mission-content" }, h("slot", null))), h("slot", { name: "end" }));
+  renderTodoMissionHeader() {
+    if (this.isTodoCampaign) {
+      return h("yoo-announcement-heading", { ref: (ev) => this.headerEl = ev, mission: this.mission, isPreview: this.isPreview });
+    }
+    else {
+      return h("yoo-mission-heading", { ref: (ev) => this.headerEl = ev, mission: this.mission, animated: this.animated });
+    }
   }
-  renderActionPlanDetails() {
+  renderTodoMissionSummary() {
     const menuContent = compact([
       this.renderValidatedReason('REASON', 'reason', this.mission.originalUnvalidatedReason),
       this.renderOriginalValidatedBy(),
@@ -347,7 +390,18 @@ export class YooMissionDetailsComponent {
       this.renderDuration(),
       this.renderOriginalMission()
     ]);
-    return (h("div", { class: 'mission-detail ' + (this.isMobile ? '' : 'web') }, h("div", { class: "mission-content" }, h("yoo-mission-heading", { animated: this.animated, mission: this.mission }), !!menuContent.length && h("ul", { class: { menu: true, pdf: this.isPdf } }, menuContent), h("slot", null))));
+    return !this.isTodoCampaign && !!menuContent.length &&
+      h("ul", { class: { menu: true, pdf: this.isPdf } }, menuContent);
+  }
+  renderTodoMissionDetails() {
+    const buttons = this.getFooterButtons();
+    return [
+      h("div", { class: { 'mission-detail': true, web: !this.isMobile } }, h("yoo-ion-content", { scrollEvents: true, class: {
+          'bg-light': this.isMobile,
+          'bg-stable-ultralight': !this.isMobile,
+          'no-scrollbar': true
+        } }, h("div", null, h("slot", { name: "before-header" }), this.renderTodoMissionHeader(), h("div", { class: { 'mission-content': true, 'web': !this.isMobile && !this.isPreview, 'bg-light': true } }, this.renderTodoMissionSummary(), h("slot", null)), !!(buttons === null || buttons === void 0 ? void 0 : buttons.length) && h("div", { class: { 'scroll-spacer': true, web: !this.isMobile } }))), this.renderFooter(buttons))
+    ];
   }
   renderMissionDetails() {
     var _a, _b, _c;
@@ -381,31 +435,9 @@ export class YooMissionDetailsComponent {
       this.renderTodos(),
       this.renderAudience()
     ]);
-    return (h("div", { class: { 'mission-detail': true, web: !this.isMobile } }, h("yoo-ion-content", { class: "bg-light no-scrollbar", scrollEvents: true }, h("div", null, h("div", { class: "mission-content" }, h("yoo-mission-heading", { animated: this.animated, mission: this.mission, progress: this.progress && this.progress.value ? this.progress.value : null }), !!menuContent.length && h("ul", { class: { menu: true, pdf: this.isPdf } }, menuContent), h("yoo-mission-score", { charts: this.charts, header: "PREVIOUSSCORE", networkScore: this.networkScore }), h("slot", null)), h("slot", { name: "end" }), !!(buttons === null || buttons === void 0 ? void 0 : buttons.length) && h("div", { class: "scroll-spacer" }))), this.renderFooter(buttons)));
-  }
-  renderTodos() {
-    var _a, _b;
-    return (((_a = this.missionTodos) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h(Menu, { icon: "action-plan", text: translate('YOOBICTODO') }, (_b = this.missionTodos) === null || _b === void 0 ? void 0 : _b.map((m) => {
-      let elemt;
-      const entry = mapMissionToCardInboxEntry(m, { skipUnread: this.isPdf, skipLock: this.isPdf, forceProgressDisplay: true });
-      delete entry.identities;
-      delete entry.tags;
-      return h("yoo-card-inbox", { entry: entry, ref: (ev) => elemt = ev, onClick: () => {
-          elemt.entry = { ...entry, unread: false };
-          getAsyncExtraData({ type: 'mission-detail', params: { mission: m } });
-        } });
-    }))));
+    return (h("div", { class: { 'mission-detail': true, web: !this.isMobile } }, h("yoo-ion-content", { class: "bg-light no-scrollbar", scrollEvents: true }, h("div", null, h("div", { class: "mission-content" }, h("yoo-mission-heading", { animated: this.animated, mission: this.mission, progress: this.progress && this.progress.value ? this.progress.value : null }), !!menuContent.length && h("ul", { class: { menu: true, pdf: this.isPdf } }, menuContent), h("yoo-mission-score", { charts: this.charts, header: "PREVIOUSSCORE", networkScore: this.networkScore }), h("slot", null)), h("slot", { name: "end" }), !!(buttons === null || buttons === void 0 ? void 0 : buttons.length) && h("div", { class: { 'scroll-spacer': true, web: !this.isMobile } }))), this.renderFooter(buttons)));
   }
-  renderAudience() {
-    var _a;
-    return (((_a = this.audienceUsers) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h(Menu, { icon: "group", text: translate('MISSIONAUDIENCE', { smart_count: this.audienceUsers.length }) }, h("yoo-avatars", { layout: "list", showMore: this.audienceUsers.length > 10, maxDisplay: 10, users: this.audienceUsers, size: "small", onClick: () => this.selectAudience.emit() }))));
-  }
-  renderDetails() {
-    var _a;
-    const isActionPlan = ((_a = this.mission) === null || _a === void 0 ? void 0 : _a.type) === 'todo';
-    return isActionPlan ? this.renderActionPlanDetails() : this.renderMissionDetails();
-  }
-  renderResults() {
+  renderMissionResults() {
     var _a, _b, _c, _d;
     const excludedTabs = ['dueDate', 'category'];
     const tags = getMissionTags(this.mission).filter((tag) => !excludedTabs.includes(tag._id));
@@ -434,11 +466,14 @@ export class YooMissionDetailsComponent {
     ]);
     return (h("div", { class: { 'mission-results': true, pdf: this.isPdf, ...getAppContext(this.host) } }, this.isPdf && (h("div", { class: "header-photo-container" }, ((_b = (_a = this.mission) === null || _a === void 0 ? void 0 : _a.description) === null || _b === void 0 ? void 0 : _b.pdfHeaderPhoto) && h("yoo-img", { class: "header-photo", instant: this.instant, src: this.mission.description.pdfHeaderPhoto }), h("div", { class: "header-content" }, h("div", { class: "title" }, translateMulti((_c = this.mission) === null || _c === void 0 ? void 0 : _c.title)), h("div", { class: "subtitle" }, (_d = this.mission) === null || _d === void 0 ? void 0 : _d.address), h("div", { class: "tag-container" }, this.showInformation && (tags === null || tags === void 0 ? void 0 : tags.map((tag) => h("yoo-tag", { color: tag.color, customColor: tag.customColor, innerHTML: tag.title }))))))), h("div", { class: "content" }, !this.isPdf && this.showInformation && h("yoo-mission-heading", { class: "mission-results", isPdf: this.isPdf, mission: this.mission }), !!menuContent.length && h("ul", { class: { menu: true, pdf: this.isPdf } }, menuContent), h("slot", null), this.showScore && h("yoo-mission-score", { class: "mission-detail", isPdf: this.isPdf, charts: this.charts, networkScore: this.networkScore })), h("slot", { name: "end" })));
   }
+  renderDetails() {
+    return this.isTodoMission ? this.renderTodoMissionDetails() : this.renderMissionDetails();
+  }
+  renderResults() {
+    return this.isTodoCampaign ? this.renderTodoMissionDetails() : this.renderMissionResults();
+  }
   render() {
-    if (this.isAnnouncement) {
-      return this.renderAnnouncementDetails();
-    }
-    return (h(Host, { class: { 'web': isWeb(), 'mission-results-deprecated': this.isResult, 'mission-detail-deprecated': !this.isResult } }, this.mission && this.isResult && this.renderResults(), this.mission && !this.isResult && this.renderDetails()));
+    return (h(Host, { class: { 'web': isWeb(), 'mission-results-deprecated': this.isResult && !this.isTodoCampaign, 'mission-detail-deprecated': !this.isResult || this.isTodoCampaign } }, this.mission && !this.isResult && this.renderDetails(), this.mission && this.isResult && this.renderResults()));
   }
   static get is() { return "yoo-mission-details"; }
   static get encapsulation() { return "shadow"; }
@@ -748,7 +783,7 @@ export class YooMissionDetailsComponent {
           "text": ""
         }
       },
-      "isAnnouncement": {
+      "isTodoCampaign": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -762,7 +797,7 @@ export class YooMissionDetailsComponent {
           "tags": [],
           "text": ""
         },
-        "attribute": "is-announcement",
+        "attribute": "is-todo-campaign",
         "reflect": false
       },
       "isPreview": {
@@ -962,6 +997,21 @@ export class YooMissionDetailsComponent {
           "resolved": "void",
           "references": {}
         }
+      }, {
+        "method": "finish",
+        "name": "finish",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
       }, {
         "method": "showUser",
         "name": "showUser",
@@ -1044,6 +1094,26 @@ export class YooMissionDetailsComponent {
         }
       }];
   }
+  static get methods() {
+    return {
+      "updateHeader": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "host"; }
   static get watchers() {
     return [{

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

@@ -208,8 +208,6 @@ svg:not(:root) {
 :host .background-container {
   display: flex;
   flex-direction: row;
-  margin: 0 -1rem 0;
-  border-bottom: solid 1px var(--stable-light, #f1f1f1);
 }
 :host yoo-progress-bar {
   --progress-bar-color: var(--app-color, #5a30f4);
@@ -223,7 +221,6 @@ svg:not(:root) {
 }
 :host .content-container {
   flex: 1;
-  padding: var(--spacing-16, 1rem) var(--spacing-08, 0.5rem);
 }
 :host .mission-title {
   margin-top: var(--spacing-08, 0.5rem);
@@ -250,15 +247,14 @@ svg:not(:root) {
 }
 :host .sub-heading .action-plan-progress yoo-progress-bar {
   --svg-width: 1rem;
+  --stroke-width-circle: 2;
   --trail-bar-color: var(--app-color-20, rgba(90, 48, 244, 0.2));
 }
 :host .sub-heading .action-plan-progress yoo-truncate {
   margin: 0 var(--spacing-08, 0.5rem);
+  font-weight: normal;
+  font-size: var(--font-size-14, 0.875rem);
 }
 :host div:last-child {
   margin-bottom: 0;
-}
-
-:host(.mission-results) .background-container {
-  margin: -1rem -1rem 0;
 }

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

@@ -1,5 +1,5 @@
 import { isIonic, translate, translateMulti } from '@shared/utils';
-import { h, Host } from '@stencil/core';
+import { forceUpdate, h, Host } from '@stencil/core';
 import { getMissionProgress, getMissionTags, getMissionUniqueKey } from '../../../feature-operate/mission/helpers/missions-helpers';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 import { MissionLockedBanner } from '../mission-locked-banner/mission-locked-banner';
@@ -7,6 +7,9 @@ export class YooMissionHeadingComponent {
   constructor() {
     this.animated = true;
   }
+  async updateHeader() {
+    forceUpdate(this);
+  }
   componentWillLoad() {
     this.isMobile = isIonic(this.host);
   }
@@ -131,5 +134,25 @@ export class YooMissionHeadingComponent {
       }
     };
   }
+  static get methods() {
+    return {
+      "updateHeader": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "host"; }
 }

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

@@ -205,6 +205,11 @@ svg:not(:root) {
   overflow: hidden;
 }
 
-:host .margin-bottom {
+:host .line {
+  height: 1px;
   margin-bottom: var(--spacing-16, 1rem);
+  border-bottom: solid var(--border-width-01, 0.0625rem) var(--stable-alt, #d0d0d0);
+}
+:host .line:not(.todo-campaign) {
+  margin-top: 0.75rem;
 }