Merge branch 'master' into e2e-protocol

frontend/assets/style/components/_forms.scss

@@ -421,6 +421,7 @@ p.error {
 
 .checkbox {
   > :last-child {
+    height: max-content;
     white-space: nowrap;
 
     &::before,

frontend/model/state.js

@@ -368,6 +368,7 @@ const getters = {
         for (const toUser in paymentsFrom[ourUsername]) {
           for (const paymentHash of paymentsFrom[ourUsername][toUser]) {
             const { data, meta } = allPayments[paymentHash]
+
             payments.push({ hash: paymentHash, data, meta, amount: data.amount, period })
           }
         }
@@ -390,6 +391,7 @@ const getters = {
             if (toUser === ourUsername) {
               for (const paymentHash of paymentsFrom[fromUser][toUser]) {
                 const { data, meta } = allPayments[paymentHash]
+
                 payments.push({ hash: paymentHash, data, meta, amount: data.amount })
               }
             }
@@ -427,17 +429,22 @@ const getters = {
     const isOurPayment = (payment) => {
       return isNeeder ? payment.to === ourUsername : payment.from === ourUsername
     }
+    const sumUpAmountReducer = (acc, payment) => acc + payment.amount
     const cPeriod = getters.currentPaymentPeriod
     const ourAdjustedPayments = getters.groupIncomeAdjustedDistribution.filter(isOurPayment)
     const receivedOrSent = isNeeder
       ? getters.ourPaymentsReceivedInPeriod(cPeriod)
       : getters.ourPaymentsSentInPeriod(cPeriod)
+
+    const markedAsNotReceived = receivedOrSent.filter(payment => payment.data.status === PAYMENT_NOT_RECEIVED)
+    const markedAsNotReceivedTotal = markedAsNotReceived.reduce(sumUpAmountReducer, 0)
+
     const paymentsTotal = ourAdjustedPayments.length + receivedOrSent.length
     const nonLateAdjusted = ourAdjustedPayments.filter((p) => !p.isLate)
-    const paymentsDone = paymentsTotal - nonLateAdjusted.length
+    const paymentsDone = paymentsTotal - nonLateAdjusted.length - markedAsNotReceived.length
     const hasPartials = ourAdjustedPayments.some(p => p.partial)
-    const amountDone = receivedOrSent.reduce((acc, payment) => acc + payment.amount, 0)
-    const amountLeft = ourAdjustedPayments.reduce((acc, payment) => acc + payment.amount, 0)
+    const amountDone = receivedOrSent.reduce(sumUpAmountReducer, 0) - markedAsNotReceivedTotal
+    const amountLeft = ourAdjustedPayments.reduce((acc, payment) => acc + payment.amount, 0) + markedAsNotReceivedTotal
     const amountTotal = amountDone + amountLeft
     return {
       paymentsDone,

frontend/views/components/graphs/Progress.vue

@@ -33,11 +33,14 @@ export default ({
   },
   computed: {
     percent () {
-      return `${100 * this.value / this.max}%`
+      return !this.max
+        ? '0%' // When this.max 0, the calculation below becomes 'NaN%', so manually specifying 0% here.
+        : `${100 * this.value / this.max}%`
     },
     percentSoft () {
       if (!this.secValue) return false
-      return `${100 * this.secValue / this.max}%`
+
+      return !this.max ? '0%' : `${100 * this.secValue / this.max}%`
     },
     marksStyle () {
       const color = this.percent === '100%'

frontend/views/containers/contributions/TodoHistory.vue

@@ -18,6 +18,7 @@ div(:class='isReady ? "" : "c-ready"')
 import { mapGetters } from 'vuex'
 import { comparePeriodStamps } from '@model/contracts/shared/time.js'
 import { MAX_HISTORY_PERIODS } from '@model/contracts/shared/constants.js'
+import { PAYMENT_NOT_RECEIVED } from '@model/contracts/shared/payments/index.js'
 import PaymentsMixin from '@containers/payments/PaymentsMixin.js'
 import BarGraph from '@components/graphs/bar-graph/BarGraph.vue'
 import { L } from '@common/common.js'
@@ -57,14 +58,17 @@ export default ({
 
         const paymentDetails = await this.getPaymentDetailsByPeriod(period)
         const { lastAdjustedDistribution } = await this.getPaymentPeriod(period)
+
         const doneCount = getLen(paymentDetails)
+        const markedAsNotReceivedCount = Object.values(paymentDetails)
+          .filter(({ data }) => data.status === PAYMENT_NOT_RECEIVED).length
         const missedCount = getLen(lastAdjustedDistribution || {})
         this.history.unshift({
-          total: doneCount === 0 ? 0 : doneCount / (doneCount + missedCount),
+          total: doneCount === 0 ? 0 : (doneCount - markedAsNotReceivedCount) / (doneCount + missedCount),
           title: this.getPeriodFromStartToDueDate(period),
           tooltipContent: [
             L('Total: {total}', { total: doneCount + missedCount }),
-            L('Completed: {completed}', { completed: doneCount })
+            L('Completed: {completed}', { completed: doneCount - markedAsNotReceivedCount })
           ]
         })
       }

frontend/views/containers/payments/MonthOverview.vue

@@ -19,8 +19,8 @@
         :secValue='item.hasPartials ? item.value + 0.5 : 0'
         :hasMarks='item.hasMarks'
       )
-      p(:class='{"has-text-success": item.max === item.value}')
-        i.icon-check.is-prefix(v-if='item.max === item.value')
+      p(:class='{ "has-text-success": item.max && (item.max === item.value) }')
+        i.icon-check.is-prefix(v-if='item.max && (item.max === item.value)')
         span.has-text-1 {{ item.label }}
 
     li.c-summary-item(v-if='notReceivedPayments')

frontend/views/containers/payments/PaymentRowTodo.vue

@@ -31,32 +31,20 @@
 
     template(slot='cellActions')
       .cpr-date(:class='payment.isLate ? "pill is-danger" : "has-text-1"') {{ humanDate(payment.date) }}
-      payment-actions-menu
-        menu-item(
-          tag='button'
-          item-id='message'
-          icon='times'
-          @click='cancelPayment'
-        )
-          i18n Dismiss this payment
 </template>
 
 <script>
-import sbp from '@sbp/sbp'
 import { mapGetters } from 'vuex'
 import { humanDate } from '@model/contracts/shared/time.js'
 import { MenuItem } from '@components/menu/index.js'
-import { PAYMENT_CANCELLED, PAYMENT_NOT_RECEIVED } from '@model/contracts/shared/payments/index.js'
-import { L } from '@common/common.js'
+import { PAYMENT_NOT_RECEIVED } from '@model/contracts/shared/payments/index.js'
 import PaymentRow from './payment-row/PaymentRow.vue'
-import PaymentActionsMenu from './payment-row/PaymentActionsMenu.vue'
 import PaymentNotReceivedTooltip from './payment-row/PaymentNotReceivedTooltip.vue'
 
 export default ({
   name: 'PaymentRowTodo',
   components: {
     MenuItem,
-    PaymentActionsMenu,
     PaymentNotReceivedTooltip,
     PaymentRow
   },
@@ -80,34 +68,11 @@ export default ({
     wasNotReceived () {
       const { data } = this.payment
       return data && data.status === PAYMENT_NOT_RECEIVED
-    },
-    hash () {
-      return this.payment?.hash
     }
   },
   methods: {
     humanDate,
     // TODO: make multiple payments
-    async cancelPayment () {
-      try {
-        if (this.hash) {
-          await sbp('gi.actions/group/paymentUpdate', {
-            contractID: this.$store.state.currentGroupId,
-            data: {
-              paymentHash: this.hash,
-              updatedProperties: {
-                status: PAYMENT_CANCELLED
-              }
-            }
-          })
-        } else {
-          alert(L("Cannot dismiss a payment that hasn't been sent yet."))
-        }
-      } catch (e) {
-        console.error(e)
-        alert(e.message)
-      }
-    },
     select () {
       this.form.checked = true
     },
@@ -118,7 +83,7 @@ export default ({
   watch: {
     'form.checked' (checked) {
       this.$emit('change', {
-        hash: this.hash,
+        hash: this.payment?.hash,
         checked
       })
     }

frontend/views/containers/payments/PaymentsList.vue

@@ -154,6 +154,7 @@ export default ({
   &.c-is-todo {
     th.c-th-check-all {
       width: 1.125rem;
+      font-size: 14px; // font-size here has to be fixed. Otherwise, it leads to a UI bug(The check icon moving downwards)
 
       .checkbox {
         margin-right: 0.2rem;

frontend/views/containers/payments/RecordPayment.vue

@@ -131,16 +131,16 @@ export default ({
     ]),
     paymentsList () {
       return this.todoItems.map(item => {
-        return item.status === PAYMENT_NOT_RECEIVED // if not received item, re-format the obj
+        return item.data && item.data.status === PAYMENT_NOT_RECEIVED // if not received item, re-format the obj
           ? {
               hash: item.hash,
               data: item.data,
               meta: item.meta,
-              username: item.toUser,
-              displayName: this.userDisplayName(item.toUser),
+              username: item.data.toUser,
+              displayName: this.userDisplayName(item.data.toUser),
               date: item.meta.createdDate,
-              monthstamp: dateToMonthstamp(item.createdDate),
-              amount: item.amount
+              monthstamp: dateToMonthstamp(item.meta.createdDate),
+              amount: item.data.amount
             }
           : item
       })
@@ -172,6 +172,7 @@ export default ({
 
       for (const pRecord of paymentsToRecord) {
         const payment = this.paymentsList[pRecord.index]
+        const isStatusNotReceived = payment.data && payment.data.status === PAYMENT_NOT_RECEIVED
 
         if (pRecord.amount > payment.amount) {
           // TODO/REVIEW - Should we show a warning?
@@ -199,20 +200,36 @@ export default ({
             paymentType: PAYMENT_TYPE_MANUAL,
             ...(memo ? { memo } : {}) // TODO/BUG with flowTyper validation. Empty string '' fails.
           }
-          const msg = await sbp('gi.actions/group/payment', {
-            contractID: this.currentGroupId, data: paymentInfo
-          })
-          // TODO: hack until /payment supports sending completed payment
-          //       (and "uncompleting" a payment)
-          await sbp('gi.actions/group/paymentUpdate', {
-            contractID: this.currentGroupId,
-            data: {
-              paymentHash: msg.hash(),
-              updatedProperties: {
-                status: PAYMENT_COMPLETED
+
+          if (isStatusNotReceived) {
+            // If it's re-sending the payment that has been marked as 'not-recieved' by the receiver,
+            // only update the details of the existing payment item so that it doesn't lead to duplication bug in the payment UI.
+            await sbp('gi.actions/group/paymentUpdate', {
+              contractID: this.currentGroupId,
+              data: {
+                paymentHash: payment.hash,
+                updatedProperties: {
+                  ...paymentInfo,
+                  status: PAYMENT_COMPLETED
+                }
               }
-            }
-          })
+            })
+          } else {
+            const msg = await sbp('gi.actions/group/payment', {
+              contractID: this.currentGroupId, data: paymentInfo
+            })
+            // TODO: hack until /payment supports sending completed payment
+            //       (and "uncompleting" a payment)
+            await sbp('gi.actions/group/paymentUpdate', {
+              contractID: this.currentGroupId,
+              data: {
+                paymentHash: msg.hash(),
+                updatedProperties: {
+                  status: PAYMENT_COMPLETED
+                }
+              }
+            })
+          }
         } catch (e) {
           hasError = true
           console.error('RecordPayment submit() error:', e)