fix: update manteca refund activity ui

src/components/Global/Badges/StatusBadge.tsx

@@ -30,8 +30,9 @@ const StatusBadge: React.FC<StatusBadgeProps> = ({ status, className, size = 'sm
                 return 'bg-secondary-4 text-yellow-6 border border-yellow-7'
             case 'failed':
             case 'cancelled':
-            case 'refunded':
                 return 'bg-error-1 text-error border border-error-2'
+            case 'refunded':
+                return 'bg-secondary-4 text-yellow-6 border border-yellow-7'
             case 'soon':
             case 'custom':
                 return 'bg-primary-3 text-primary-4'

src/components/Global/Icons/Icon.tsx

@@ -66,6 +66,7 @@ import {
     WarningRounded,
     SpeedRounded,
     InfoRounded,
+    UndoRounded,
 } from '@mui/icons-material'
 import { DocsIcon } from './docs'
 import { PeanutSupportIcon } from './peanut-support'
@@ -148,6 +149,7 @@ export type IconName =
     | 'split'
     | 'globe-lock'
     | 'bulb'
+    | 'undo'
     | 'upload-cloud'
     | 'alert-filled'
     | 'paste'
@@ -288,6 +290,7 @@ const iconComponents: Record<IconName, ComponentType<SVGProps<SVGSVGElement>>> =
     'txn-off': TxnOffIcon,
     docs: DocsIcon,
     bulb: BulbIcon,
+    undo: (props) => <MaterialIconWrapper Icon={UndoRounded} {...props} />,
     'upload-cloud': (props) => <MaterialIconWrapper Icon={CloudUploadOutlined} {...props} />,
     'invite-heart': InviteHeartIcon,
     'alert-filled': (props) => <MaterialIconWrapper Icon={WarningRounded} {...props} />,

src/components/Global/StatusPill/index.tsx

@@ -13,7 +13,7 @@ const StatusPill = ({ status }: StatusPillProps) => {
         completed: 'border-success-5 bg-success-2 text-success-4',
         pending: 'border-yellow-8 bg-secondary-4 text-yellow-6',
         cancelled: 'border-error-2 bg-error-1 text-error',
-        refunded: 'border-error-2 bg-error-1 text-error',
+        refunded: 'border-yellow-8 bg-secondary-4 text-yellow-6',
         failed: 'border-error-2 bg-error-1 text-error',
         processing: 'border-yellow-8 bg-secondary-4 text-yellow-6',
         soon: 'border-yellow-8 bg-secondary-4 text-yellow-6',
@@ -27,7 +27,7 @@ const StatusPill = ({ status }: StatusPillProps) => {
         soon: 'pending',
         pending: 'pending',
         cancelled: 'cancel',
-        refunded: 'cancel',
+        refunded: 'undo',
         closed: 'success',
     }
 
@@ -38,7 +38,7 @@ const StatusPill = ({ status }: StatusPillProps) => {
         soon: 7,
         pending: 8,
         cancelled: 6,
-        refunded: 6,
+        refunded: 8,
         closed: 7,
     }
 

src/components/TransactionDetails/TransactionCard.tsx

@@ -182,9 +182,13 @@ const TransactionCard: React.FC<TransactionCardProps> = ({
                             </div>
                             {/* display the action icon and type text */}
                             <div className="flex items-center gap-1 text-xs font-medium text-gray-1">
-                                {!isTestTransaction && getActionIcon(type, transaction.direction)}
+                                {!isTestTransaction && getActionIcon(type, transaction.direction, status)}
                                 <span className="capitalize">
-                                    {isTestTransaction ? 'Setup' : isPerkReward ? 'Cashback' : getActionText(type)}
+                                    {isTestTransaction
+                                        ? 'Setup'
+                                        : isPerkReward
+                                          ? 'Cashback'
+                                          : getActionText(type, status)}
                                 </span>
                                 {status && <StatusPill status={status} />}
                             </div>
@@ -232,7 +236,15 @@ const TransactionCard: React.FC<TransactionCardProps> = ({
 }
 
 // helper functions
-function getActionIcon(type: TransactionType, direction: TransactionDirection): React.ReactNode {
+function getActionIcon(
+    type: TransactionType,
+    direction: TransactionDirection,
+    status?: StatusPillType
+): React.ReactNode {
+    if (status === 'refunded') {
+        return <Icon name="arrow-down-left" size={7} fill="currentColor" />
+    }
+
     let iconName: IconName | null = null
     let iconSize = 7
 
@@ -275,7 +287,9 @@ function getActionIcon(type: TransactionType, direction: TransactionDirection):
     return <Icon name={iconName} size={iconSize} fill="currentColor" />
 }
 
-function getActionText(type: TransactionType): string {
+function getActionText(type: TransactionType, status?: StatusPillType): string {
+    if (status === 'refunded') return 'Refund'
+
     let actionText: string = type
     switch (type) {
         case 'bank_withdraw':

src/components/TransactionDetails/TransactionDetailsReceipt.tsx

@@ -160,7 +160,9 @@ export const TransactionDetailsReceipt = ({
                 !(
                     transaction.extraDataForDrawer?.originalType === EHistoryEntryType.SEND_LINK &&
                     transaction.extraDataForDrawer?.originalUserRole === EHistoryUserRole.SENDER
-                )
+                ) &&
+                // hide token and network for refunded entries
+                transaction.status !== 'refunded'
             ),
             txId: !!transaction.txHash,
             // show cancelled row if status is cancelled, use cancelledDate or fallback to createdAt
@@ -1291,7 +1293,7 @@ export const TransactionDetailsReceipt = ({
                 </div>
             )}
 
-            {isQRPayment && (
+            {isQRPayment && transaction.status !== 'refunded' && (
                 <Button
                     onClick={() => {
                         router.push(`/request?amount=${transaction.amount}&merchant=${transaction.userName}`)