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:
@@ -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}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user