fix(wallet-admin): disable editing cancelled challenges

Signed-off-by: Rakib Ansary <rakibansary@topcoder.com>

Author: rakibansary

src/apps/wallet-admin/src/home/tabs/payments/PaymentsTab.tsx

@@ -32,7 +32,7 @@ function formatStatus(status: string): string {
         case 'PAID':
             return 'Paid'
         case 'CANCELLED':
-            return 'Cancelled'
+            return 'Cancel'
         default:
             return status.replaceAll('_', ' ')
     }
@@ -116,6 +116,11 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
                 formattedReleaseDate = formatIOSDateString(payment.releaseDate)
             }
 
+            let status = formatStatus(payment.details[0].status)
+            if (status === 'Cancel') {
+                status = 'Cancelled'
+            }
+
             return {
                 createDate: formatIOSDateString(payment.createdAt),
                 currency: payment.details[0].currency,
@@ -129,7 +134,7 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
                 netPaymentNumber: parseFloat(payment.details[0].totalAmount),
                 releaseDate: formattedReleaseDate,
                 releaseDateObj: releaseDate,
-                status: formatStatus(payment.details[0].status),
+                status,
                 type: payment.category.replaceAll('_', ' ')
                     .toLowerCase(),
             }

src/apps/wallet-admin/src/lib/components/payments-table/PaymentTable.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 /* eslint-disable react/jsx-no-bind */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import React, { useEffect, useState } from 'react'
@@ -59,7 +60,7 @@ const PaymentsTable: React.FC<PaymentTableProps> = (props: PaymentTableProps) =>
                                 <td>{payment.releaseDate}</td>
                                 <td>{payment.datePaid}</td>
                                 <td className={styles.actionButtons}>
-                                    {props.canEdit && payment.status.toUpperCase() !== 'PAID' && (
+                                    {props.canEdit && payment.status.toUpperCase() !== 'PAID' && payment.status.toUpperCase() !== 'CANCELLED' && (
                                         <Button
                                             icon={IconOutline.PencilIcon}
                                             size='sm'