AXP-Payment Status Badges Documentation - Complete reference for all payment status badges with short forms and tooltips

AXP_STATUS_BADGES_DOCUMENTATION.md

Payment Status Badges Documentation

This document provides a comprehensive reference for all payment status badges used in the AXAIPay system.

Overview

All status badges use 2-letter abbreviations for better UI space efficiency and include tooltips that display the full meaning on hover.

Status Badge Reference

Status ID	Short Form	Full Meaning	Color Variant	Description
0	CR	Created	dark	Payment has been created but not yet processed
1	PP	Pending Payment	warning	Payment is pending and awaiting processing
2	IP	In Progress	warning	Payment is currently being processed
3	PA	Pending Authorization	warning	Payment is waiting for authorization
4	PT	Pending Termination	secondary	Payment is pending termination
5	PM	Pending Maintenance	secondary	Payment is pending maintenance
11	PD	Paid	success	Payment has been successfully completed
22	FL	Failed	danger	Payment processing failed
23	TO	Timeout	danger	Payment processing timed out
33	VD	Void	info	Payment has been voided
43	PR	Pending Refund	warning	Refund is pending processing
44	RF	Refund	warning	Refund has been processed
55	CN	Canceled	danger	Payment has been canceled
-	UN	Unknown	dark	Status is unknown or undefined

Special Cases

Refund Request Status

When a refund request is active with status REQUESTED, the system displays:

• PR = Processing Refund (with tooltip)

Color Coding

• success (Green): Successful operations (Paid)
• warning (Yellow): Pending or in-progress states
• danger (Red): Failed, canceled, or error states
• info (Blue): Informational states (Void)
• secondary (Gray): Secondary pending states
• dark (Dark Gray): Created or unknown states

Implementation Details

React Bootstrap Components Used

• Badge: For displaying the status
• OverlayTrigger: For tooltip functionality
• Tooltip: For showing the full meaning

Tooltip Behavior

• Placement: Top (appears above the badge)
• Trigger: Hover
• Format: "SHORT = Full Meaning"

Example Usage

<OverlayTrigger
  placement="top"
  overlay={<Tooltip id="pp-tooltip">PP = Pending Payment</Tooltip>}
>
  <Badge variant="warning">PP</Badge>
</OverlayTrigger>

Benefits

1. Space Efficiency: 2-letter abbreviations save UI space
2. User Experience: Tooltips provide full context on hover
3. Consistency: All statuses follow the same pattern
4. Accessibility: Unique tooltip IDs for screen readers
5. Color Coding: Visual distinction through color variants

Maintenance

When adding new statuses:

1. Add the new status to this documentation
2. Update the showStatusBadge function in PaymentHelpers.js
3. Ensure the tooltip follows the "SHORT = Full Meaning" format
4. Choose appropriate color variant based on status type
5. Use unique tooltip ID

---

Last Updated: [Current Date] File: src/_metronic/_helpers/PaymentHelpers.js