update from main

src/api/events/queries.ts

@@ -117,6 +117,7 @@ export const QUERY_RECENT_PROJECT_EVENTS = `
           groupingTimestamp
           lastRepetitionId
           lastRepetitionTime
+          affectedUsers
         }
       }
     }

src/api/workspaces/queries.ts

@@ -56,6 +56,7 @@ export const QUERY_ALL_WORKSPACES_WITH_PROJECTS = `
             count
             groupingTimestamp
             lastRepetitionTime
+            affectedUsers
           }
         }
       }

src/components/modals/PaymentDetailsDialog.vue

@@ -101,12 +101,7 @@
         v-if="isRecurrent"
         class="payment-details__adoption-autoProlongation"
       >
-        <UiCheckboxWithLabel
-          v-if="!selectedCard || selectedCard.id === NEW_CARD_ID"
-          v-model="shouldSaveCard"
-          class="payment-details__adoption-autoProlongation-item"
-          :label="$t('billing.paymentDetails.allowCardSaving')"
-        />
+
         <UiCheckboxWithLabel
           v-model="isAcceptedRecurrentPaymentAgreement"
           class="payment-details__adoption-autoProlongation-item"
@@ -117,6 +112,12 @@
           class="payment-details__adoption-autoProlongation-item"
           :label="$t('billing.autoProlongation.allowingChargesEveryMonth')"
         />
+        <UiCheckboxWithLabel
+          v-if="!selectedCard || selectedCard.id === NEW_CARD_ID"
+          v-model="shouldSaveCard"
+          class="payment-details__adoption-autoProlongation-item"
+          :label="$t('billing.paymentDetails.allowCardSaving')"
+        />
       </section>
 
       <!--Basic payment agreement-->
@@ -398,10 +399,10 @@ export default Vue.extend({
           date.setMonth(date.getMonth() + 1);
         }
 
-        return date.toDateString();
+        return date.toString();
       }
 
-      return this.planDueDate.toDateString();
+      return this.planDueDate.toString();
     },
 
     /**
@@ -414,34 +415,6 @@ export default Vue.extend({
 
       return this.isAcceptedPaymentAgreement;
     },
-
-    /**
-     * True if user pays for the current tariff plan (no plan-changing)
-     */
-    isPaymentForCurrentTariffPlan(): boolean {
-      return this.workspace.plan.id === this.plan.id;
-    },
-
-    /**
-     * True when we need to withdraw the amount only to validate the subscription
-     */
-    isOnlyCardValidationNeeded(): boolean {
-      /**
-       * In case of not recurrent payment we need to withdraw full amount
-       */
-      if (!this.isRecurrent) {
-        return false;
-      }
-
-      /**
-       * In case when user pays for another tariff plan we need to withdraw full amount
-       */
-      if (!this.isPaymentForCurrentTariffPlan) {
-        return false;
-      }
-
-      return !this.isTariffPlanExpired;
-    },
   },
   watch: {
     /**
@@ -567,7 +540,7 @@ export default Vue.extend({
       const widget = new window.cp.CloudPayments({ language: this.$i18n.locale });
 
       const paymentData: PlanProlongationPayload = {
-        checksum: data.checksum,
+        checksum: data.checksum
       };
 
       const interval = this.workspace.isDebug ? 'Day' : 'Month';
@@ -586,13 +559,8 @@ export default Vue.extend({
         }
       }
 
-      let amount = data.plan.monthlyCharge;
-
-      if (this.isOnlyCardValidationNeeded) {
-        amount = AMOUNT_FOR_CARD_VALIDATION;
-      }
-
-      const method = this.isOnlyCardValidationNeeded ? 'auth' : 'charge';
+      const amount = data.isCardLinkOperation ? AMOUNT_FOR_CARD_VALIDATION : data.plan.monthlyCharge;
+      const method = data.isCardLinkOperation ? 'auth' : 'charge'
 
       widget.pay(method,
         {

src/components/project/EventBadge.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    :class="{'event-badge--visited': isVisited}"
+    class="event-badge"
+  >
+    <span class="event-badge__count">
+      {{ eventCount | abbreviateNumber }}
+    </span>
+    <div v-if="affectedUsersCount !== null && affectedUsersCount > 0" class="event-badge__affected-users">
+      <Icon symbol="user-small" class="event-badge__affected-users-icon"/>
+      {{ affectedUsersCount | abbreviateNumber }}
+    </div>
+  </div>
+</template>
+
+<script>
+import Icon from '../utils/Icon.vue';
+
+export default {
+  name: 'EventBadge',
+  components: {
+    Icon,
+  },
+  props: {
+    /**
+     * @type {number} - number of events
+     */
+    eventCount: {
+      type: Number,
+      required: true,
+    },
+
+    /**
+     * @type {number | null} - event affected users count, null for old events, when affected users count was not calculated
+     */
+    affectedUsersCount: {
+      type: [Number, null],
+      default: null,
+    },
+
+    /**
+     * @type {boolean} - true if user visited current event
+     */
+    isVisited: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style>
+.event-badge {
+  display: inline-flex;
+  height: 20px;
+  padding: 5px 5px;
+  color: var(--color-text-main);
+  line-height: 9px;
+  white-space: nowrap;
+  align-items: center;
+  background-color: var(--color-indicator-medium);
+  border-radius: 6px;
+
+  &__affected-users {
+    font-size: 10px;
+    margin-left: 10px;
+    display: flex;
+    align-items: center;
+
+    &-icon {
+      display: block;
+      width: 10px;
+      height: 10px;
+      margin-right: 2px;
+    }
+  }
+
+  &__count {
+    font-size: 12px;
+    font-weight: bold;
+  }
+
+  &--visited {
+    color: var(--color-text-second);
+    background-color: var(--color-bg-main);
+  }
+}
+</style>

src/components/project/EventItem.vue

@@ -13,10 +13,10 @@
       {{ lastOccurrenceTimestamp | prettyTime }}
     </div>
     <div class="event-item__badge-container">
-      <Badge
-        :content="count"
-        :type="isVisited ? 'silent' : 'default'"
-        class="event-item__count"
+      <EventBadge
+        :event-count="count"
+        :affected-users-count="affectedUsersCount"
+        :is-visited="isVisited"
       />
     </div>
     <div class="event-item__info">
@@ -42,16 +42,16 @@
 </template>
 
 <script>
-import Badge from '../utils/Badge';
 import Icon from '../utils/Icon';
 import EventMark from './EventMark';
 import EntityImage from '../utils/EntityImage';
+import EventBadge from './EventBadge.vue';
 
 export default {
   name: 'EventItem',
   components: {
     EventMark,
-    Badge,
+    EventBadge,
     Icon,
     EntityImage,
   },
@@ -79,6 +79,14 @@ export default {
       type: [String, Number],
       default: '',
     },
+
+    /**
+     * @type {number | null} - event affected users count, null for old events, when affected users count was not calculated
+     */
+    affectedUsersCount: {
+      type: [Number, null],
+      default: null,
+    },
   },
   computed: {
     /**
@@ -132,7 +140,7 @@ export default {
     }
 
     &__badge-container {
-      min-width: 45px;
+      min-width: 92px;
       margin-left: 19px;
     }
 

src/components/project/FiltersBar.vue

@@ -6,7 +6,6 @@
           symbol="filter"
           class="filters-bar__filter-icon"
         />
-        {{ $t('projects.filters.filtersLabel') }}
       </div>
       <FlatButton
         v-for="(value, key) in filtersOptions"
@@ -24,7 +23,6 @@
           symbol="sort"
           class="filters-bar__sort-icon"
         />
-        {{ $t('projects.filters.sortLabel') }}
       </div>
       <FlatButton
         v-for="(value, key) in sortOptions"
@@ -94,6 +92,7 @@ export default Vue.extend({
       sortOptions: {
         [EventsSortOrder.ByDate]: 'byDate',
         [EventsSortOrder.ByCount]: 'byCount',
+        [EventsSortOrder.ByAffectedUsers]: 'byAffectedUsers',
       },
     };
   },

src/components/project/Overview.vue

@@ -29,6 +29,7 @@
             :key="dailyEventInfo.groupHash"
             :last-occurrence-timestamp="dailyEventInfo.lastRepetitionTime"
             :count="dailyEventInfo.count"
+            :affected-users-count ="dailyEventInfo.affectedUsers"
             class="project-overview__event"
             :event="getEventByProjectIdAndGroupHash(project.id, dailyEventInfo.groupHash)"
             @onAssigneeIconClick="showAssignees(project.id, dailyEventInfo.groupHash, $event)"

src/components/workspace/settings/BillingOverview.vue

@@ -565,7 +565,6 @@ export default Vue.extend({
     }
 
     &__autopay-is-on {
-      width: 350px;
       height: 14px;
       margin: 20px 166px 0 0;
       color: color-mod(var(--color-border) alpha(60%));

src/i18n/messages/en.json

@@ -43,12 +43,12 @@
       "continue": "Continue",
       "cancel": "Cancel"
     },
-    "newVersionWindow":{
-      "message":"The new version is available",
-      "refresh":"Refresh"
+    "newVersionWindow": {
+      "message": "The new version is available",
+      "refresh": "Refresh"
     },
-    "feedbackButton":{
-      "message":"Leave feedback"
+    "feedbackButton": {
+      "message": "Leave feedback"
     },
     "catalog": {
       "step1": "Add a project",
@@ -90,18 +90,17 @@
   },
   "projects": {
     "filters": {
-      "filtersLabel": "Filter",
       "filtersOptions": {
         "all": "All",
         "starred": "Starred",
         "resolved": "Resolved",
         "unresolved": "Unresolved",
         "ignored": "Ignored"
       },
-      "sortLabel": "Sort",
       "sortOptions": {
         "byDate": "By time",
-        "byCount": "By count"
+        "byCount": "By count",
+        "byAffectedUsers": "By affected users"
       }
     },
     "placeholder": "No project selected",
@@ -406,11 +405,11 @@
     "viewedBy": {
       "assignee": "Assignee"
     },
-    "suspectedCommits":{
+    "suspectedCommits": {
       "header": "Suspected commits",
       "hide": "hide",
       "committed": "committed",
-      "moreRelease":"{numberOfCommits} more commit in this release | {numberOfCommits} more commits in this release"
+      "moreRelease": "{numberOfCommits} more commit in this release | {numberOfCommits} more commits in this release"
     },
     "emptyData": "This event has no context",
     "notFound": "Event not found. Probably it was archived.",
@@ -471,17 +470,17 @@
       "nov",
       "dec"
     ],
-    "relativeTime":{
-      "secondsAgo":"few seconds ago",
-      "minutesAgo":"a minute ago | {numberOfMinutes} minutes ago",
-      "hoursAgo":"an hour ago | {numberOfHours} hours ago",
-      "daysAgo":"yesterday | {numberOfDays} days ago",
-      "monthsAgo":"a month ago | {numberOfMonths} months ago",
-      "yearsAgo":"a year ago | {numberOfYears} years ago"
+    "relativeTime": {
+      "secondsAgo": "few seconds ago",
+      "minutesAgo": "a minute ago | {numberOfMinutes} minutes ago",
+      "hoursAgo": "an hour ago | {numberOfHours} hours ago",
+      "daysAgo": "yesterday | {numberOfDays} days ago",
+      "monthsAgo": "a month ago | {numberOfMonths} months ago",
+      "yearsAgo": "a year ago | {numberOfYears} years ago"
     },
     "readMore": "Read more"
   },
   "errors": {
     "Something went wrong": "Error occurred. Hawk just informed us about it."
   }
-}
+}