Fix billing page multiple item selection highlighting

Compare both id AND type when determining if an item is selected,
since plans and add-ons can have the same ID from different tables.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
poduck
2025-12-22 01:26:31 -05:00
parent cfdbc1f42c
commit f119c6303c
2 changed files with 4 additions and 4 deletions

View File

@@ -29,7 +29,7 @@ export interface CatalogItem {
export interface CatalogListPanelProps { export interface CatalogListPanelProps {
items: CatalogItem[]; items: CatalogItem[];
selectedId: number | null; selectedItem: CatalogItem | null;
onSelect: (item: CatalogItem) => void; onSelect: (item: CatalogItem) => void;
onCreatePlan: () => void; onCreatePlan: () => void;
onCreateAddon: () => void; onCreateAddon: () => void;
@@ -47,7 +47,7 @@ type LegacyFilter = 'all' | 'current' | 'legacy';
export const CatalogListPanel: React.FC<CatalogListPanelProps> = ({ export const CatalogListPanel: React.FC<CatalogListPanelProps> = ({
items, items,
selectedId, selectedItem,
onSelect, onSelect,
onCreatePlan, onCreatePlan,
onCreateAddon, onCreateAddon,
@@ -219,7 +219,7 @@ export const CatalogListPanel: React.FC<CatalogListPanelProps> = ({
<CatalogListItem <CatalogListItem
key={`${item.type}-${item.id}`} key={`${item.type}-${item.id}`}
item={item} item={item}
isSelected={selectedId === item.id} isSelected={selectedItem?.id === item.id && selectedItem?.type === item.type}
onSelect={() => onSelect(item)} onSelect={() => onSelect(item)}
formatPrice={formatPrice} formatPrice={formatPrice}
/> />

View File

@@ -234,7 +234,7 @@ const BillingManagement: React.FC = () => {
) : ( ) : (
<CatalogListPanel <CatalogListPanel
items={catalogItems} items={catalogItems}
selectedId={selectedItem?.id || null} selectedItem={selectedItem}
onSelect={setSelectedItem} onSelect={setSelectedItem}
onCreatePlan={handleCreatePlan} onCreatePlan={handleCreatePlan}
onCreateAddon={handleCreateAddon} onCreateAddon={handleCreateAddon}