From c6683f417fd8f67aaee1f0747dcb772b34664acd Mon Sep 17 00:00:00 2001
From: SebinSong <songxevin@gmail.com>
Date: Wed, 11 Oct 2023 12:10:57 +0900
Subject: [PATCH 1/3] remove cancelPayment from 'PaymentRowTodo.vue'

---
 .../containers/payments/PaymentRowTodo.vue    | 39 +------------------
 1 file changed, 2 insertions(+), 37 deletions(-)

diff --git a/frontend/views/containers/payments/PaymentRowTodo.vue b/frontend/views/containers/payments/PaymentRowTodo.vue
index b85860aadc..deaf488f83 100644
--- a/frontend/views/containers/payments/PaymentRowTodo.vue
+++ b/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
       })
     }

From e12a939c11ed4a0f15ba9872156ac83441e66779 Mon Sep 17 00:00:00 2001
From: Sebin Song <songxevin@gmail.com>
Date: Thu, 19 Oct 2023 03:52:24 +0900
Subject: [PATCH 2/3] #1761 - [Bug] Dismissing a payment and resending it
 doesn't clear it as being sent (#1772)

* correct the check for payment status

* fix the issue where dismissing payment works incorrectly
---
 .../containers/payments/RecordPayment.vue     | 53 ++++++++++++-------
 1 file changed, 35 insertions(+), 18 deletions(-)

diff --git a/frontend/views/containers/payments/RecordPayment.vue b/frontend/views/containers/payments/RecordPayment.vue
index 9bff51d256..1e15635505 100644
--- a/frontend/views/containers/payments/RecordPayment.vue
+++ b/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)

From 3200d2534e192a0c29b1e8901d1ba740b259dfa2 Mon Sep 17 00:00:00 2001
From: Sebin Song <songxevin@gmail.com>
Date: Wed, 25 Oct 2023 02:25:12 +0900
Subject: [PATCH 3/3] #1774, #1771 - Bug-fixes in Payment.vue (#1777)

* fix the payment status not being updated / the UI bug in payment table

* fix the linter error

* Greg's CR

* optimise the fix / fix the issue in TODO support history tab
---
 frontend/assets/style/components/_forms.scss       |  1 +
 frontend/model/state.js                            | 14 +++++++++++---
 frontend/views/components/graphs/Progress.vue      |  7 +++++--
 .../views/containers/contributions/TodoHistory.vue |  8 ++++++--
 .../views/containers/payments/MonthOverview.vue    |  4 ++--
 .../views/containers/payments/PaymentsList.vue     |  1 +
 6 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/frontend/assets/style/components/_forms.scss b/frontend/assets/style/components/_forms.scss
index 26f5ce2b70..da1581f8db 100644
--- a/frontend/assets/style/components/_forms.scss
+++ b/frontend/assets/style/components/_forms.scss
@@ -421,6 +421,7 @@ p.error {
 
 .checkbox {
   > :last-child {
+    height: max-content;
     white-space: nowrap;
 
     &::before,
diff --git a/frontend/model/state.js b/frontend/model/state.js
index 7521fa0152..9b83a0354e 100644
--- a/frontend/model/state.js
+++ b/frontend/model/state.js
@@ -9,6 +9,7 @@ import { EVENT_HANDLED, CONTRACT_REGISTERED } from '~/shared/domains/chelonia/ev
 import Vuex from 'vuex'
 import { CHATROOM_PRIVACY_LEVEL, MESSAGE_NOTIFY_SETTINGS, MESSAGE_TYPES } from '@model/contracts/shared/constants.js'
 import { compareISOTimestamps } from '@model/contracts/shared/time.js'
+import { PAYMENT_NOT_RECEIVED } from '@model/contracts/shared/payments/index.js'
 import { omit, merge, cloneDeep, debounce } from '@model/contracts/shared/giLodash.js'
 import { unadjustedDistribution, adjustedDistribution } from '@model/contracts/shared/distribution/distribution.js'
 import { applyStorageRules } from '~/frontend/model/notifications/utils.js'
@@ -366,6 +367,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 })
           }
         }
@@ -388,6 +390,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 })
               }
             }
@@ -425,17 +428,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,
diff --git a/frontend/views/components/graphs/Progress.vue b/frontend/views/components/graphs/Progress.vue
index 6dcc53cdfd..d4fa0c3f78 100644
--- a/frontend/views/components/graphs/Progress.vue
+++ b/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%'
diff --git a/frontend/views/containers/contributions/TodoHistory.vue b/frontend/views/containers/contributions/TodoHistory.vue
index 9035bed751..d32609587a 100644
--- a/frontend/views/containers/contributions/TodoHistory.vue
+++ b/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 })
           ]
         })
       }
diff --git a/frontend/views/containers/payments/MonthOverview.vue b/frontend/views/containers/payments/MonthOverview.vue
index 5f59c7e3eb..fe9c1de333 100644
--- a/frontend/views/containers/payments/MonthOverview.vue
+++ b/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')
diff --git a/frontend/views/containers/payments/PaymentsList.vue b/frontend/views/containers/payments/PaymentsList.vue
index 1c75e408e5..8f9f107ff3 100644
--- a/frontend/views/containers/payments/PaymentsList.vue
+++ b/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;