Make Bill Payee Nicknames visible in Exchange for Pay Option

[Edison-Lab709]

When you go to make a Bill Payment from the Exchange tab in the wallet, you do not see the nickname or account number of the payee. So if a payee is from the same provider, in this case, CIBC Visa, all you see is multiple options for CIBC Visa, but there's no information at any point in the payment process to show exactly which card you have selected. It makes the bill payment function pretty much unusable for certain accounts since you do not know who you are paying. You also cannot use the search field to look for a payee by nickname. This would also be helpful.

[BullishNode]

Ack. @claude flesh this issue out and tasks needed

[claude]

Claude finished @BullishNode's task in 2m 13s —— View job

---

Issue Analysis Complete

---

Problem Summary

When selecting a bill payment recipient in the Exchange tab, users cannot distinguish between multiple payees from the same provider (e.g., two different CIBC Visa accounts). The current UI only displays:

• Title: Payee name (e.g., "VISA CIBC")
• Type: "Bill Payment"
• Info Row: "Payee: VISA CIBC"

Missing information that would help users identify the correct recipient:

1. Nickname/Label - User-provided identifier when creating the recipient
2. Account Number - The payee account number entered during recipient creation

Additionally, the search functionality only searches by displayName (which prioritizes payeeName), not by the user's nickname/label or account number.

---

Root Cause Analysis

Files Involved

File	Purpose	Issue
lib/features/recipients/frameworks/ui/widgets/recipients_list_tile.dart:76-82	Displays recipient list item	Only shows ONE field (payeeName OR payeeCode OR payeeAccountNumber), not multiple distinguishing fields
lib/features/recipients/frameworks/ui/tabs/recipients_list_tab.dart:71-75	Search filtering	Only searches by displayName, excludes account number and label
lib/features/recipients/interface_adapters/presenters/models/recipient_view_model.dart:85-88	Display name getter	For bill payments, returns payeeName first, then label - but the label/nickname is available in the data model

Data Available but Not Displayed

The RecipientViewModel contains these fields for bill payments (from recipient_view_model.dart:19-22):

• label - User-provided nickname (optional, entered during creation)
• payeeName - Biller name (e.g., "VISA CIBC")
• payeeCode - Biller code
• payeeAccountNumber - Account number (required, entered during creation)

When creating a bill payment recipient (bill_payment_cad_form.dart:58-63), users provide:

• Biller Name (auto-selected from search)
• Payee Account Number (manually entered)
• Label/Nickname (optional, manually entered)

These distinguishing fields are stored but not displayed in the recipient selection list.

---

Tasks Required

Task 1: Display Account Number and Label in Recipients List

File: lib/features/recipients/frameworks/ui/widgets/recipients_list_tile.dart

Current Code (lines 76-82):

RecipientType.billPaymentCad => _InfoRow(
  label: 'Payee',
  value:
      recipient.payeeName ??
      recipient.payeeCode ??
      recipient.payeeAccountNumber,
),

Required Changes:

• Show the user's label/nickname if provided (as subtitle or in title)
• Always display the account number as an additional info row
• Consider showing a masked/partial account number for privacy (e.g., "****1234")

Proposed UI Structure:

VISA CIBC (Mom's Card)          ○
Bill Payment
Payee: VISA CIBC
Account: ****1234

Or if no label:

VISA CIBC                       ○
Bill Payment
Payee: VISA CIBC
Account: 1234567890

---

Task 2: Enhance Search to Include Account Number and Label

File: lib/features/recipients/frameworks/ui/tabs/recipients_list_tab.dart

Current Code (lines 71-75):

final searchLower = _searchQuery.toLowerCase();
final filtered = recipients.where((recipient) {
  final displayName = recipient.displayName?.toLowerCase() ?? '';
  return displayName.contains(searchLower);
}).toList();

Required Changes:

• Include payeeAccountNumber in search
• Include label in search
• Update search hint text from "Search recipients by name" to "Search by name, label, or account number"

---

Task 3: Update Display Name Logic for Bill Payments (Optional Enhancement)

File: lib/features/recipients/interface_adapters/presenters/models/recipient_view_model.dart

Current Code (lines 85-88):

case RecipientType.billPaymentCad:
  if (payeeName != null && payeeName!.isNotEmpty) return payeeName!;
  if (label != null && label!.isNotEmpty) return label!;
  return null;

Consideration: The display name currently shows payeeName first. An alternative approach could be to show label first if available, as that's the user's preferred identifier. However, this is a design decision that should be confirmed with stakeholders.

---

Implementation Checklist

• Task 1: Modify recipients_list_tile.dart to display:

  • Label/nickname in the title area (if available)
  • Account number as an additional _InfoRow

• Task 2: Modify recipients_list_tab.dart to:

  • Include label in search filtering
  • Include payeeAccountNumber in search filtering
  • Update search placeholder text

• Task 3 (Optional): Consider updating recipient_view_model.dart to prioritize label in display name

• Testing: Test with multiple recipients from same provider to verify distinguishability

---

Design Considerations

1. Privacy: Should account numbers be fully visible or masked (e.g., last 4 digits only)?
2. Label Priority: Should the label appear in the main title alongside or instead of payeeName?
3. UI Layout: Multiple info rows may need spacing/styling adjustments

---

Summary: I analyzed the issue and identified the specific files and code changes needed. The core problem is that recipients_list_tile.dart only displays one field for bill payment recipients, when it should show both the label/nickname and account number to distinguish between multiple payees from the same provider. The search functionality also needs to be extended to search by these additional fields.

[kumulynja]

Fixed in #1709.